/* =========================================================
   HUEVO PASITO DEL CAMPO — Landing Page
   Tokens: verde oscuro #0B5D2A · verde #2E7D32
           amarillo #F4C542 · naranja #F57C00 · crema #FDFBF5
   Tipografía: Fraunces (display) + Inter (texto/UI)
   ========================================================= */

:root{
  --verde-oscuro:#0B5D2A;
  --verde:#2E7D32;
  --amarillo:#F4C542;
  --naranja:#F57C00;
  --crema:#FDFBF5;

  --texto:#1E2A1B;
  --texto-suave:#5B6B54;
  --borde:#E8E2D2;

  --tarjeta:#FFFFFF;

  --radio-s:10px;
  --radio-m:16px;
  --radio-l:28px;

  --sombra: 0 12px 32px -12px rgba(11,93,42,0.18);
  --sombra-sm: 0 6px 16px -8px rgba(11,93,42,0.16);

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--texto);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.15;color:var(--verde-oscuro);font-weight:600;}
p{margin:0;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--naranja);
  outline-offset:2px;
}

/* -------------------- reveal on scroll -------------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* -------------------- eyebrow -------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--naranja);
  margin:0 0 14px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--naranja);display:inline-block;}
.eyebrow-dark{color:var(--verde);}
.eyebrow-dark .dot{background:var(--verde);}
.eyebrow-light{color:var(--amarillo);}
.eyebrow-light .dot{background:var(--amarillo);}

/* -------------------- buttons -------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:.98rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex:none;}
.btn-cta{
  background:var(--naranja);
  color:#fff;
  box-shadow:var(--sombra-sm);
}
.btn-cta:hover{transform:translateY(-2px); box-shadow:var(--sombra); background:#e06f00;}
.btn-outline{
  background:transparent;
  color:var(--verde-oscuro);
  border:2px solid var(--verde-oscuro);
  padding:13px 26px;
}
.btn-outline:hover{background:var(--verde-oscuro); color:#fff;}
.btn-small{padding:10px 18px; font-size:.88rem;}
.btn-lg{padding:19px 38px; font-size:1.08rem;}
.btn-block{width:100%;}

.link-arrow{
  font-weight:700;
  color:var(--verde-oscuro);
  border-bottom:2px solid var(--amarillo);
  padding-bottom:2px;
  transition:color .15s ease;
}
.link-arrow:hover{color:var(--naranja);}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(253,251,245,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding-top:12px;padding-bottom:12px;
  position:relative;
}
.brand-logo{height:52px;width:auto;}
.main-nav{display:flex;align-items:center;gap:28px;flex:1;justify-content:center;}
.main-nav a{
  font-weight:600;font-size:.94rem;color:var(--texto);
  position:relative;padding:6px 0;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--naranja);transition:width .2s ease;
}
.main-nav a:hover::after{width:100%;}
.header-cta{flex:none;}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:6px;}
.nav-toggle span{width:24px;height:2px;background:var(--verde-oscuro);border-radius:2px;}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  padding:64px 0 0;
  background:linear-gradient(180deg,#FFF9E9 0%, var(--crema) 65%);
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding-bottom:70px;
}
.hero-copy h1{
  font-size:clamp(2.3rem, 4vw, 3.4rem);
  margin-bottom:20px;
  letter-spacing:-.01em;
}
.hero-copy h1 em{color:var(--naranja);font-style:normal;}
.hero-sub{
  font-size:1.12rem;
  color:var(--texto-suave);
  max-width:52ch;
  margin-bottom:32px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:30px;}
.hero-badges{display:flex;flex-wrap:wrap;gap:22px;}
.hero-badges li{
  display:flex;align-items:center;gap:8px;
  font-weight:600;font-size:.9rem;color:var(--verde-oscuro);
}
.hero-badges svg{width:17px;height:17px;color:var(--verde);flex:none;}

.hero-media{position:relative;}
.hero-media-frame{
  position:relative;
  border-radius:var(--radio-l);
  overflow:hidden;
  box-shadow:var(--sombra);
  transform:rotate(1.2deg);
  background:#fff;
}
.hero-media-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4;}
.floating-tag{
  position:absolute; right:18px; bottom:18px;
  background:var(--verde-oscuro);
  color:#fff;
  padding:12px 18px;
  border-radius:var(--radio-m);
  font-size:.78rem;
  font-weight:600;
  line-height:1.35;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.35);
}
.floating-tag strong{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--amarillo);
  display:block;
}

/* signature sunrise divider */
.sun-divider{width:100%;line-height:0;color:var(--verde-oscuro);}
.sun-divider svg{width:100%;height:90px;display:block;fill:var(--verde-oscuro);}

/* ===================== SECTIONS shared ===================== */
.section{padding:96px 0;}
.section-alt{background:#FBF6E6;}
.section-head{max-width:680px; margin:0 auto 52px; text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.section-sub{margin-top:16px;color:var(--texto-suave);font-size:1.05rem;}

/* ===================== PROBLEM ===================== */
.problem{background:var(--verde-oscuro); color:#F3EFE0;}
.problem .eyebrow-dark{color:var(--amarillo);}
.problem .eyebrow-dark .dot{background:var(--amarillo);}
.problem .section-head h2{color:#fff;}
.problem-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:44px;
}
.problem-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radio-m);
  padding:26px 22px;
}
.problem-ico{font-size:1.6rem;color:var(--amarillo);display:block;margin-bottom:12px;}
.problem-card p{font-size:.96rem; color:#E7E2D0;}
.problem-conclusion{
  text-align:center;font-size:1.2rem;font-family:var(--font-display);font-weight:500;
  color:#fff; max-width:760px;margin:0 auto;
}
.problem-conclusion strong{color:var(--amarillo);font-weight:600;}

/* ===================== BENEFITS ===================== */
.benefits-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.benefit-card{
  background:var(--tarjeta);
  border:1px solid var(--borde);
  border-radius:var(--radio-m);
  padding:30px 24px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.benefit-card:hover{transform:translateY(-4px);box-shadow:var(--sombra-sm);}
.benefit-ico{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--c) 12%, white);
  color:var(--c);
  margin-bottom:18px;
}
.benefit-ico svg{width:26px;height:26px;}
.benefit-card h3{font-size:1.15rem;margin-bottom:10px;}
.benefit-card p{color:var(--texto-suave); font-size:.95rem;}

/* ===================== STEPS ===================== */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  position:relative;
  margin-bottom:70px;
}
.steps::before{
  content:"";
  position:absolute; top:26px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg, var(--verde) 0 10px, transparent 10px 20px);
}
.step{position:relative; text-align:center; padding:0 16px;}
.step-n{
  display:inline-flex; align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--verde-oscuro); color:var(--amarillo);
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  margin-bottom:18px; position:relative; z-index:1;
  box-shadow:0 0 0 6px var(--section-bg, #FBF6E6);
}
.step h3{font-size:1.05rem;margin-bottom:8px;}
.step p{font-size:.92rem;color:var(--texto-suave);}

.delivery-showcase{
  display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
  background:var(--tarjeta); border-radius:var(--radio-l); padding:20px;
  box-shadow:var(--sombra-sm);
}
.delivery-img{border-radius:var(--radio-m); overflow:hidden;}
.delivery-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11;}
.delivery-copy{padding:16px 28px 16px 4px;}
.delivery-copy h3{font-size:1.4rem;margin-bottom:14px;}
.delivery-copy p{color:var(--texto-suave); margin-bottom:20px;}

/* ===================== PRICING ===================== */
.price-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
}
.price-card{
  position:relative;
  background:var(--tarjeta);
  border:1px solid var(--borde);
  border-radius:var(--radio-l);
  padding:36px 32px 32px;
}
.price-card-img{
  border-radius:var(--radio-m); overflow:hidden; margin-bottom:22px;
}
.price-card-img img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.price-card-highlight{
  background:var(--verde-oscuro); color:#F3EFE0;
  border-color:var(--verde-oscuro);
}
.price-card-highlight h3, .price-card-highlight .price-tag strong{color:#fff;}
.price-card-highlight .price-desc{color:#D7E3CE;}
.price-card-highlight .price-features li{color:#E7E2D0;}
.price-card-highlight .price-features svg{color:var(--amarillo);}
.price-badge{
  position:absolute; top:-14px; left:32px;
  background:var(--amarillo); color:var(--verde-oscuro);
  font-weight:700; font-size:.78rem; letter-spacing:.03em;
  padding:7px 16px; border-radius:999px; text-transform:uppercase;
}
.price-badge-alt{background:var(--naranja); color:#fff;}
.price-card h3{font-size:1.3rem; margin-bottom:10px;}
.price-card h3 .muted{font-family:var(--font-body); font-weight:500; font-size:.85rem; color:var(--texto-suave);}
.price-card-highlight h3 .muted{color:#C9D8BF;}
.price-desc{color:var(--texto-suave); font-size:.95rem; margin-bottom:22px;}
.price-tag{
  font-size:1rem; color:var(--texto-suave); margin-bottom:22px;
}
.price-tag strong{
  font-family:var(--font-display); font-size:2.3rem; color:var(--verde-oscuro);
  display:inline-block; margin:0 4px;
}
.price-tag span{font-size:.85rem;}
.price-features{margin-bottom:26px;}
.price-features li{
  display:flex; align-items:center; gap:10px;
  font-size:.92rem; color:var(--texto); padding:6px 0;
}
.price-features svg{width:16px;height:16px; color:var(--verde); flex:none;}
.price-note{
  text-align:center; margin-top:36px; color:var(--texto-suave); font-size:.98rem;
}

/* ===================== DARK / COMPARISON ===================== */
.section-dark{background:var(--verde-oscuro); color:#F3EFE0;}
.section-dark .light{color:#fff;}
.compare-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:56px;
}
.compare-col{
  border-radius:var(--radio-m); padding:32px 28px;
}
.compare-col-us{background:rgba(244,197,66,.1); border:1.5px solid var(--amarillo);}
.compare-col-them{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);}
.compare-col h4{font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--amarillo); margin-bottom:20px; font-weight:700;}
.compare-col-them h4{color:#B9C7AF;}
.compare-col li{display:flex; align-items:flex-start; gap:12px; padding:9px 0; font-size:.96rem;}
.compare-col-us svg{width:18px;height:18px;color:var(--amarillo); flex:none; margin-top:2px;}
.compare-col-them .x{color:#8FA085; flex:none; font-weight:700;}
.compare-col-them li{color:#C9D2C0;}

.stats-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  border-top:1px solid rgba(255,255,255,.15); padding-top:44px;
}
.stat{text-align:center;}
.stat strong{
  display:block; font-family:var(--font-display); font-size:2.6rem; color:var(--amarillo);
}
.stat span{display:block; font-size:.88rem; color:#C9D2C0; margin-top:8px;}

/* ===================== QUALITY DIAGRAM ===================== */
.quality-diagram{
  position:relative;
  width:600px; max-width:100%;
  height:600px;
  margin:0 auto;
}
.quality-egg{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:168px; z-index:2;
  filter:drop-shadow(0 14px 28px rgba(11,93,42,.16));
}
.quality-item{
  position:absolute; top:50%; left:50%;
  width:172px;
  text-align:center;
}
.qi-1{transform:translate(-50%,-50%) translate(0,-222px);}
.qi-2{transform:translate(-50%,-50%) translate(192px,-111px);}
.qi-3{transform:translate(-50%,-50%) translate(192px,111px);}
.qi-4{transform:translate(-50%,-50%) translate(0,222px);}
.qi-5{transform:translate(-50%,-50%) translate(-192px,111px);}
.qi-6{transform:translate(-50%,-50%) translate(-192px,-111px);}

.quality-ico{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--c) 12%, white);
  color:var(--c);
  margin:0 auto 12px;
}
.quality-ico svg{width:24px;height:24px;}
.quality-item h4{font-size:.98rem; color:var(--verde-oscuro); margin-bottom:6px;}
.quality-item p{font-size:.84rem; color:var(--texto-suave); line-height:1.45;}

@media (max-width: 900px){
  .quality-diagram{
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px 20px;
    width:100%;
  }
  .quality-egg{
    position:static; transform:none;
    grid-column:1 / -1; justify-self:center;
    width:130px; margin-bottom:6px;
  }
  .quality-item{position:static; width:auto;}
  .qi-1,.qi-2,.qi-3,.qi-4,.qi-5,.qi-6{transform:none;}
}
@media (max-width: 560px){
  .quality-diagram{grid-template-columns:1fr;}
}

/* ===================== ABOUT ===================== */
.about-inner{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;
}
.about-img{border-radius:var(--radio-l); overflow:hidden; box-shadow:var(--sombra-sm);}
.about-img img{width:100%; aspect-ratio:3/3.6; object-fit:cover;}
.about-copy h2{font-size:clamp(1.6rem,2.8vw,2.1rem); margin-bottom:18px;}
.about-copy p{color:var(--texto-suave); margin-bottom:16px;}
.about-list{margin-top:22px;}
.about-list li{display:flex; align-items:center; gap:12px; padding:8px 0; font-weight:600; font-size:.96rem;}
.about-list svg{width:18px;height:18px; color:var(--verde); flex:none;}

/* ===================== TESTIMONIAL ===================== */
.testimonial-section{padding-top:0; background:#FBF6E6;}
.testimonial{
  max-width:720px; margin:0 auto; text-align:center;
  background:var(--tarjeta); border-radius:var(--radio-l);
  padding:52px 48px; box-shadow:var(--sombra-sm);
}
.quote-mark{width:34px;height:34px;color:var(--amarillo); margin-bottom:14px;}
.testimonial p{
  font-family:var(--font-display); font-size:1.35rem; color:var(--verde-oscuro);
  line-height:1.5; margin-bottom:22px;
}
.author-name{display:block; font-weight:700;}
.author-role{display:block; font-size:.85rem; color:var(--texto-suave); margin-top:2px;}

/* ===================== FAQ ===================== */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--borde);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:22px 4px; text-align:left;
  font-weight:600; font-size:1.02rem; color:var(--verde-oscuro);
}
.faq-icon{font-size:1.4rem; color:var(--naranja); transition:transform .25s ease; font-weight:400;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease;
  padding:0 4px;
}
.faq-item.open .faq-a{max-height:200px; padding-bottom:20px;}
.faq-a p{color:var(--texto-suave); font-size:.96rem;}

/* ===================== CTA FINAL ===================== */
.cta-final{
  background:linear-gradient(135deg, var(--naranja), #d9660a);
  padding:80px 0;
}
.cta-final-inner{text-align:center;}
.cta-final h2{color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:14px;}
.cta-final p{color:#FFE9CF; font-size:1.08rem; margin-bottom:32px;}
.cta-final .btn-cta{background:#fff; color:var(--naranja);}
.cta-final .btn-cta:hover{background:var(--verde-oscuro); color:#fff;}

/* ===================== FOOTER ===================== */
.site-footer{background:#093F1D; color:#CFE0C6; padding-top:60px;}
.footer-inner{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-logo{
  height:64px; margin-bottom:16px;
  background:var(--crema); border-radius:999px;
  padding:6px 14px;
}
.footer-brand p{font-size:.9rem; color:#A9C09A;}
.social-links{display:flex; gap:12px; margin-top:20px;}
.social-links a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:#CFE0C6;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.social-links a:hover{background:var(--amarillo); color:var(--verde-oscuro); transform:translateY(-2px);}
.social-links svg{width:18px;height:18px;}
.footer-col h5{color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px;}
.footer-col a, .footer-col p{display:block; font-size:.92rem; color:#CFE0C6; margin-bottom:10px;}
.footer-col a:hover{color:var(--amarillo);}
.footer-bottom{padding:22px 24px; text-align:center; font-size:.82rem; color:#8BAA7A;}

/* ===================== FLOATING WHATSAPP ===================== */
.whatsapp-float{
  position:fixed; bottom:22px; right:22px; z-index:200;
  width:58px;height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.35);
  transition:transform .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:30px;height:30px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .main-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--crema);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--borde);
    box-shadow:var(--sombra-sm);
  }
  .main-nav.is-open{display:flex;}
  .main-nav a{width:100%; padding:16px 24px; border-bottom:1px solid var(--borde);}
  .main-nav a::after{display:none;}
  .nav-toggle{display:flex;}
  .nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.is-active span:nth-child(2){opacity:0;}
  .nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-toggle span{transition:transform .2s ease, opacity .2s ease;}
  .hero-inner{grid-template-columns:1fr; padding-bottom:50px;}
  .hero-media{order:-1;}
  .problem-grid{grid-template-columns:repeat(2,1fr);}
  .benefits-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr); gap:36px 0;}
  .steps::before{display:none;}
  .delivery-showcase{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
  .compare-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr; gap:30px;}
  .about-inner{grid-template-columns:1fr;}
  .about-img img{aspect-ratio:16/10;}
  .footer-inner{grid-template-columns:1fr 1fr; gap:34px;}
}

@media (max-width: 640px){
  .section{padding:64px 0;}
  .wrap{padding:0 18px;}
  .header-cta{display:none;}
  .hero{padding-top:36px;}
  .hero-copy h1{font-size:2rem;}
  .problem-grid{grid-template-columns:1fr;}
  .benefits-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr; gap:34px;}
  .testimonial{padding:36px 26px;}
  .testimonial p{font-size:1.1rem;}
  .footer-inner{grid-template-columns:1fr;}
  .cta-final h2{font-size:1.5rem;}
}