/* ===== Tokens de marca (deben ir primero) ===== */
:root{
  --pf-green: #76E352;
  --pf-pink:  #E352CE;
  --pf-black: #202020;
  --pf-gray:  #D4D4D4;
  --pf-white: #FFFFFF;

  --pf-radius: 14px;
  --pf-shadow: 0 8px 24px rgba(0,0,0,.08);
  --pf-maxw: 1100px;
  --pf-font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--pf-font);
  color:var(--pf-black);
  background:var(--pf-white);
  line-height:1.5;
  padding-top:72px; /* header fijo */
}
@media (max-width: 900px){
  body{ padding-top:64px; }
}
a{ color:var(--pf-pink); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ max-width:var(--pf-maxw); margin:0 auto; padding:16px }
section{ scroll-margin-top:88px; padding:56px 0 } /* que no tape el header */

/* ===== UI (botones, tarjetas) ===== */
.card{
  background:var(--pf-white);
  border:1px solid var(--pf-gray);
  border-radius:var(--pf-radius);
  box-shadow:var(--pf-shadow);
  padding:18px;
}
.btn{
  display:inline-block;
  padding:14px 18px;
  border-radius:var(--pf-radius);
  font-weight:600;
  text-align:center;
  border:2px solid transparent;
  transition:.15s ease-in-out;
}
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--pf-green); color:var(--pf-white) }
.btn-primary:hover{ filter:brightness(.95) }
.btn-accent{ background:var(--pf-pink); color:var(--pf-white) }
.btn-accent:hover{ filter:brightness(.95) }
.btn-outline{
  background:var(--pf-white);
  color:var(--pf-green);
  border:2px solid var(--pf-green);
}
.btn-outline:hover{ background:#f6fff2 }

/* ===== Header / Navbar ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:var(--pf-white);
  box-shadow:var(--pf-shadow);
  border-bottom-color:var(--pf-gray);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }

.brand-logo{ height:64px; display:block; }
@media (max-width:900px){ .brand-logo{ height:52px; } }

.menu{ display:flex; gap:18px; align-items:center }
.menu a{
  font-weight:600; padding:8px 10px; border-radius:10px;
  color:var(--pf-white); /* estado inicial sobre hero */
  text-decoration:none; transition:color .2s ease, background .2s ease;
}
.site-header.scrolled .menu a{ color:var(--pf-black) }
@media (max-width:900px){
  .menu{ gap:12px }
  .nav{ height:64px }
}

/* ===== HERO emocional ===== */
.hero{
  position:relative;
  min-height:90vh;
  display:grid; place-items:center;
  text-align:center;
  background:url('../img/hero-familia.png') center/cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.35); /* overlay para legibilidad */
}
.hero-content{ position:relative; z-index:1; padding:0 16px; }

/* H1: tamaño original (no se achica) */
.hero h1{
  margin:0 0 12px;
  font-weight:800;
  font-size:clamp(28px, 6vw, 56px);
  line-height:1.1;
  color:#fff;
}

/* Subtexto del hero más grande y legible */
.hero .text-hero,
.hero p.text-hero{
  color:#fff;
  margin:0 0 18px;
  font-size:clamp(16px, 2.2vw, 20px);
}

/* CTA hero */
.hero .cta{ display:grid; gap:12px; grid-auto-flow:row; justify-items:center }
.hero .btn{ min-width:240px }
@media (min-width:768px){ .hero .cta{ grid-auto-flow:column } }

/* Importante: NO forzar color blanco a todos los <a> del hero
   para no "borrar" el texto del botón blanco */
/* (dejado intencionalmente en blanco) */

/* ===== Nosotros ===== */
.section-nosotros{ background:#fff; }
.nosotros-grid{
  display:grid; align-items:center; gap:24px;
  grid-template-columns: 1.2fr 1fr;        /* texto | imagen */
}
.nosotros-texto h2{
  margin:0 0 8px; font-size:clamp(24px,4vw,36px);
}
.nosotros-texto p{ margin:6px 0; color:#444; }
.nosotros-foto img{
  width:100%; max-width:480px; height:auto; display:block;
  margin:0 auto; border-radius:14px; box-shadow:var(--pf-shadow);
}
@media (max-width:900px){
  .nosotros-grid{ grid-template-columns:1fr; }
  .nosotros-foto img{ max-width:380px; }
}

/* ===== Menú (grid + cards) ===== */
.menu-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:24px;
}
.menu-card{
  background:#fff;
  border-radius:14px;
  box-shadow:var(--pf-shadow);
  padding:16px;
  text-align:center;
}
.menu-card h3{ margin:0 0 8px; font-size:18px; font-weight:700 }
.menu-card .thumb{
  width:100%; aspect-ratio:1/1;
  border-radius:10px; overflow:hidden; margin-bottom:12px;
  background:#f4f4f4; box-shadow:var(--pf-shadow);
}
.menu-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* sublista de rellenos */
.sub-lista{
  list-style:none; margin:0 0 12px; padding:0;
  color:#555; font-size:14px;
}
.sub-lista li{ margin-bottom:4px; }

@media (min-width: 900px){
  .menu-card .thumb{ aspect-ratio: 4 / 3; } /* rectangulares en desktop */
}

/* ===== Mapa ===== */
.section-mapa h2{ margin:0 0 8px; font-size:clamp(24px,4vw,36px) }
.section-mapa p{ margin:0 0 18px; color:#555 }
.mapa-box{
  border-radius:14px; overflow:hidden; box-shadow: var(--pf-shadow);
}
.mapa-box iframe{ display:block; width:100%; height:420px; }

/* ===== Recetas (teasers) ===== */
.section-recetas h2{ margin:0 0 8px; font-size:clamp(24px,4vw,36px) }
.section-recetas p.text-muted{ margin:0 0 24px; color:#555 }
.recetas-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:24px;
}
.receta-card{
  background:#fff; border-radius:14px; box-shadow:var(--pf-shadow);
  padding:16px; text-align:center;
}
.receta-card .thumb{
  width:100%; aspect-ratio:4/3;
  border-radius:10px; overflow:hidden; margin-bottom:12px;
  background:#f4f4f4; box-shadow:var(--pf-shadow);
}
.receta-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.receta-card h3{ margin:0 0 8px; font-size:18px }
.receta-card .rec-desc{ margin:0 0 12px; color:#666; font-size:14px }

/* ===== Footer ===== */
.site-footer{
  background:#f9fafb;
  padding:40px 16px 20px;
  margin-top:40px;
  color:#333;
  font-size:14px;
}
.footer-grid{
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  margin-bottom:20px;
}
.footer-logo{ height:50px; margin-bottom:10px; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:6px; }
.footer-links a{ color:var(--pf-black); text-decoration:none; }
.footer-links a:hover{ color:var(--pf-green); }
.footer-copy{
  border-top:1px solid var(--pf-gray);
  padding-top:12px; text-align:center;
  font-size:13px; color:#666;
}

/* ===== Sorteo ===== */
.section-sorteo h1 {
  font-size: clamp(28px, 5vw, 40px);
  margin-bottom: 16px;
  color: var(--pf-pink);
}

.section-sorteo p {
  font-size: 16px;
  color: #444;
  margin-bottom: 18px;
}

.sorteo-img {
  max-width: 480px;
  width: 100%;
  border-radius: 14px;
  box-shadow: var(--pf-shadow);
  margin: 20px auto;
  display: block;
}

.sorteo-reglas {
  margin-top: 30px;
  padding: 16px;
  background: #fff8f2;
  border-left: 4px solid var(--pf-green);
  border-radius: 8px;
}

.sorteo-ganadores {
  margin-top: 40px;
}

.galeria-ganadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.card-sorteo {
  background: #fff8fb;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin: 40px 0;
  box-shadow: var(--pf-shadow);
}

.card-sorteo h2 {
  margin: 0 0 10px;
  color: var(--pf-pink);
}

/* ===== Ajuste sutil del texto del hero ===== */
.text-hero{
  font-size: clamp(16px, 2.2vw, 18px);
  color: #f1f1f1;
  max-width: 780px;
  margin: 0 auto 16px;
}

/* ===== Banner/Card del sorteo en home ===== */
.card-sorteo{
  background: #fff8fb;                /* leve rosado festivo */
  border: 1px solid var(--pf-gray);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow);
  padding: 18px;
  text-align: center;
}
.card-sorteo h2{
  margin: 0 0 8px;
  color: var(--pf-pink);
  font-size: clamp(20px, 3.6vw, 26px);
}
.card-sorteo p{ margin: 0 0 12px; color:#555 }

/* ===== Sección: Sorteo semanal ===== */
.section-sorteo{
  padding: 56px 0;
  background:
    radial-gradient(10px 10px at 15% 20%, rgba(227,82,206,.10) 20%, transparent 21%),
    radial-gradient(10px 10px at 85% 35%, rgba(118,227,82,.10) 20%, transparent 21%),
    radial-gradient(8px 8px at 25% 80%, rgba(227,82,206,.08) 20%, transparent 21%),
    #fff; /* toque festivo muy sutil */
}
.section-sorteo h2{
  margin: 0 0 10px;
  color: var(--pf-pink);
  font-size: clamp(22px, 4.2vw, 34px);
}
.section-sorteo p{ color:#444; margin: 0 0 14px }

.sorteo-img{
  max-width: 520px;
  width: 100%;
  display: block;
  margin: 14px auto 18px;
  border-radius: 14px;
  box-shadow: var(--pf-shadow);
  object-fit: cover;
}

/* Caja de regla */
.sorteo-reglas{
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid var(--pf-green);
  background: #f7fff3;
  border-radius: 10px;
}
.sorteo-reglas h3{
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--pf-black);
}
.sorteo-reglas p{ margin:0; color:#333 }

/* Galería de ganadores (futuro) */
.sorteo-ganadores{ margin-top: 24px }
.sorteo-ganadores h3{
  margin: 0 0 8px;
  font-size: 18px;
}
.galeria-ganadores{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.galeria-ganadores img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--pf-shadow);
}

/* Botones dentro de la sección sorteo */
.section-sorteo .btn-accent{
  box-shadow: 0 6px 18px rgba(227,82,206,.25);
}
.section-sorteo .btn-accent:hover{
  filter: brightness(.95);
}

/* Responsive fino */
@media (max-width: 900px){
  .section-sorteo{ padding: 44px 0 }
  .sorteo-img{ max-width: 420px }
}

/* ===== Motion presets (suave y accesible) ===== */
:root{
  --ani-dur: .6s;
  --ani-ease: cubic-bezier(.22,.72,.21,.99);
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Scroll reveal (estado inicial) */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--ani-dur) var(--ani-ease),
              transform var(--ani-dur) var(--ani-ease);
  will-change: opacity, transform;
}
.reveal.in{ opacity: 1; transform: none; }

/* Variantes opcionales (por si querés usar) */
.reveal.fade-right{ transform: translateX(-18px); }
.reveal.fade-left { transform: translateX(18px); }
.reveal.zoom-in   { transform: scale(.96); }

/* Micro-interacciones */
.btn{ transition: transform .12s ease, box-shadow .2s ease; }
.btn:hover{ transform: translateY(-2px); box-shadow: var(--pf-shadow); }

.menu-card{
  transition: transform .25s var(--ani-ease), box-shadow .25s var(--ani-ease);
}
.menu-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.12); }

.menu-card .thumb img{
  transition: transform .6s var(--ani-ease);
}
.menu-card:hover .thumb img{ transform: scale(1.05); }

/* Hero: entrada suave al cargar */
.hero-content{
  opacity: 0; transform: translateY(12px);
  animation: heroIn .7s var(--ani-ease) .15s forwards;
}
@keyframes heroIn{
  to{ opacity:1; transform:none; }
}

/* Sorteo: leve “glow” al pasar el mouse */
.card-sorteo{
  position: relative;
  overflow: hidden;
}
.card-sorteo::after{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(40% 40% at 20% 10%, rgba(227,82,206,.10), transparent 60%),
              radial-gradient(35% 35% at 90% 80%, rgba(118,227,82,.10), transparent 60%);
  opacity:.0; transition: opacity .35s ease;
  pointer-events:none;
}
.card-sorteo:hover::after{ opacity:.8; }

/* Mapa: levantar levemente en hover */
.mapa-box{ transition: transform .25s var(--ani-ease), box-shadow .25s var(--ani-ease); }
.mapa-box:hover{ transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.10); }

/* Recetas: cards con reveal y hover sutil */
.receta-card{ transition: transform .25s var(--ani-ease), box-shadow .25s var(--ani-ease); }
.receta-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.12); }

/* ========= Atención continua en la card del sorteo ========= */
/* Vibrato intermitente + levísima flotación */
.card-sorteo{
  animation: pf-attention 8s var(--ani-ease) infinite;
  will-change: transform, box-shadow;
}
@keyframes pf-attention{
  /* flotación suave */
  0%   { transform: translateY(0) rotate(0deg) }
  45%  { transform: translateY(-2px) rotate(0deg) }
  50%  { transform: translateY(0) rotate(0deg) }
  /* vibrato cortito para llamar la atención */
  60%  { transform: translateY(0) rotate(-1.2deg) }
  62%  { transform: translateY(0) rotate(1.2deg) }
  64%  { transform: translateY(0) rotate(-0.8deg) }
  66%  { transform: translateY(0) rotate(0.8deg) }
  68%  { transform: translateY(0) rotate(0deg) }
  100% { transform: translateY(0) rotate(0deg) }
}

/* Glow sutil en la card al mismo tiempo (ya tenías uno en :hover; esto lo acompaña) */
.card-sorteo{
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
}

/* ========= Shimmer en el botón “Ver detalles” ========= */
.card-sorteo .btn-primary{
  position: relative;
  overflow: hidden;
}
.card-sorteo .btn-primary::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 20%, transparent 40%);
  transform: translateX(-120%);
  animation: pf-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pf-shimmer{
  0%   { transform: translateX(-120%) }
  60%  { transform: translateX(140%) }
  100% { transform: translateX(140%) }
}

/* Respeto accesibilidad: usuarios con reduce motion no ven animaciones */
@media (prefers-reduced-motion: reduce){
  .card-sorteo{ animation: none !important }
  .card-sorteo .btn-primary::after{ animation: none !important }
}

/* ===== Sorteo semanal ===== */
.section-sorteo {
  background: #fff;
  padding: 56px 0;
}

.sorteo-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 32px;
}

.sorteo-texto h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--pf-pink);
}

.sorteo-texto p {
  margin: 6px 0;
  color: #444;
  font-size: 15px;
}

.sorteo-texto .regla {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
  font-style: italic;
}

.sorteo-foto img {
  width: 100%;
  max-width: 400px;
  border-radius: 14px;
  box-shadow: var(--pf-shadow);
  display: block;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .sorteo-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .sorteo-foto img {
    max-width: 300px;
  }
}