@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  --cream:#EEF4DA;
  --lime:#B0C759;
  --sage:#A6C08C;
  --green:#14613C;
  --dark:#0B311C;
  --blue:#5196D0;
  --yellow:#FFCD00;
  --paper:#F9FAF0;
  --white:#fff;
  --card:var(--white);
  --text:#173E2A;
  --muted:#5b6f61;
  --radius:24px;
  --line:1.6px;
  --shadow:0 24px 70px rgba(11,49,28,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  background:var(--cream);
  color:var(--text);
  overflow-x:hidden;
  font-size:16px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
.container{width:min(1160px,92vw);margin-inline:auto}
.section{position:relative;padding:112px 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);margin-bottom:24px;
}
.eyebrow:before{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg id='Capa_2' data-name='Capa 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1084.5 1084.5'%3E%3Cg id='Capa_1-2' data-name='Capa 1'%3E%3Cpath fill='%23b2c75b' d='M0,0h442.83c354.15,0,641.67,287.52,641.67,641.67v442.83h-442.83C287.52,1084.5,0,796.98,0,442.83V0h0Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;display:inline-block;flex:none}
h1,h2,h3{letter-spacing:-.055em;color:#21482f}
h1{
  font-family:"Playfair Display",serif;
  font-size:clamp(2.25rem,4.15vw,4.15rem);
  line-height:1.04;
  font-weight:700;
  max-width:720px;
}
h2{
  font-size:clamp(1.85rem,3.2vw,3.15rem);
  line-height:1.06;
  font-weight:800;
}
h3{font-size:1.35rem;line-height:1.12}
p{line-height:1.75;color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:13px 23px;border-radius:999px;
  border:var(--line) solid var(--lime);
  background:var(--lime);color:white;font-weight:700;font-size:.91rem;
  cursor:pointer;white-space:nowrap;
}
.btn { box-shadow: 0 12px 28px rgba(176,199,89,.32); }
.btn.secondary{background:transparent;color:var(--green);border-color:var(--lime)}
.btn.blue{background:var(--blue);border-color:var(--blue)}
.btn.dark{background:var(--dark);border-color:var(--dark)}

#site-header{
  position:sticky;top:0;z-index:99;
  background:rgba(238,244,218,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(20,97,60,.08);
}
.header-inner{
  min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo img{width:168px;height:auto}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;font-size:.88rem;font-weight:600}
.header-cta{display:flex;align-items:center;gap:16px}
.header-instagram{
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--green);
  
}
.header-instagram svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.menu-toggle{display:none;border:0;background:transparent;width:40px;height:40px;color:var(--dark);font-size:1.8rem}

#inicio{
  padding:86px 0 76px;
  min-height:calc(100vh - 86px);
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:72px;
  align-items:center;
}
.hero-copy p.lead{
  font-size:1.02rem;
  max-width:650px;
  margin:32px 0 30px;
  line-height:1.9;
}
.hero-bullets{
  display:grid;
  gap:16px;
  margin:34px 0 40px;
  list-style:none;
}
.hero-bullets li{display:flex;gap:12px;color:var(--dark);font-weight:600}
.hero-bullets li:before{content:"";width:10px;height:10px;background:var(--lime);border-radius:50%;margin-top:8px;flex:none}
.hero-actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}
.micro{
  font-size:.88rem;
  color:#6b7d69;
  margin-top:24px;
}
.hero-visual{position:relative;min-height:560px}
.hero-photos{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end;position:relative;z-index:2}
.photo{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:transparent;}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.tall{height:380px}
.photo.short{height:300px;margin-top:70px}
.photo.wide{grid-column:1/3;height:190px;border-radius:26px}





#confianza{padding:34px 0 90px}
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-card{
  background:rgba(255,255,255,.48);border:1px solid rgba(20,97,60,.10);
  border-radius:22px;padding:26px;min-height:150px;
}
.trust-card .num{color:var(--blue);font-weight:800;font-size:.82rem;margin-bottom:18px}
.trust-card h3{font-size:1.05rem;margin-bottom:9px}
.trust-card p{font-size:.9rem;line-height:1.55}

#propuesta{padding:115px 0;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.20) 100%)}
.proposal-wrap{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center;
  background:rgba(255,255,255,.35);border-radius:34px;padding:52px;position:relative;overflow:hidden;
}

.proposal-card{
  background:var(--blue);border-radius:26px;padding:34px;color:white;position:relative;overflow:hidden;
}
.proposal-card img{height:320px;width:100%;object-fit:cover;border-radius:180px 180px 0 0;margin-bottom:22px}
.proposal-card h3{font-size:2rem;color:white;max-width:420px}
.quote{
  margin-top:26px;font-size:1.65rem;line-height:1.08;font-weight:800;color:var(--green);
  border-left:3px solid var(--lime);padding-left:22px;letter-spacing:-.04em;
}

.section-head{text-align:center;max-width:820px;margin:0 auto 52px}
.section-head p{margin-top:26px}
#planes{padding:120px 0;position:relative}

.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.plan-card{
  background:var(--paper);border-radius:26px;padding:26px;border:1px solid rgba(11,49,28,.09);
  box-shadow:0 16px 50px rgba(11,49,28,.06);
}
.plan-card.featured{background:var(--lime);color:white;transform:translateY(-10px)}
.plan-card.featured h3,.plan-card.featured p,.plan-card.featured .price{color:white}
.plan-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:18px}
.badge{display:inline-flex;padding:7px 12px;border-radius:999px;background:#DCE8AA;color:var(--green);font-size:.72rem;font-weight:800;white-space:nowrap}
.plan-card p{font-size:.92rem;line-height:1.6}
.price{margin:18px 0;font-weight:800;color:var(--green)}
.accordion-btn{
  width:100%;border:1.6px solid rgba(20,97,60,.18);background:white;color:var(--green);
  border-radius:16px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;font-weight:800;margin:18px 0 12px;
}
.featured .accordion-btn{border-color:rgba(255,255,255,.45)}
.panel{display:none;padding-top:6px}
.plan-card.open .panel{display:block}
.panel h4{font-size:.86rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin:18px 0 8px}
.featured .panel h4{color:white}
.panel ul{list-style:none;display:grid;gap:8px}
.panel li{font-size:.88rem;line-height:1.45;color:inherit;display:flex;gap:8px}
.panel li:before{content:"";width:7px;height:7px;background:var(--lime);border-radius:50%;margin-top:7px;flex:none}
.featured .panel li:before{background:white}
.plan-micro{font-size:.8rem!important;margin-top:12px;color:#71806e}
.plans-close{margin-top:34px;text-align:center}

#objetivos{padding:110px 0 96px}
.tags-row{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:48px}
.tag{
  border:2px solid var(--blue);color:var(--blue);background:rgba(255,255,255,.22);
  border-radius:999px;padding:11px 22px;font-weight:700;font-size:.95rem;
}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit-card{
  background:rgba(255,255,255,.45);border:1px solid rgba(81,150,208,.25);
  border-radius:24px;padding:26px;min-height:210px;
}
.icon{width:44px;height:44px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:white;margin-bottom:22px;font-weight:800}
.benefit-card h3{margin-bottom:12px}

#proceso{padding:120px 0;background:rgba(255,255,255,.18)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:steps}
.step{
  background:var(--paper);border-radius:24px;padding:28px;position:relative;min-height:230px;
}
.step:before{counter-increment:steps;content:"0" counter(steps);font-size:3rem;font-weight:800;color:rgba(81,150,208,.35);letter-spacing:-.06em}
.step h3{margin:18px 0 10px}

#sobre-mi-preview{padding:120px 0}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.about-image{position:relative}
.about-image img{height:560px;width:100%;object-fit:cover;border-radius:240px 240px 28px 28px}

.checks{list-style:none;display:grid;gap:12px;margin:26px 0}
.checks li{display:flex;gap:11px;font-weight:700;color:var(--dark)}
.checks li:before{content:"✓";color:var(--lime);font-weight:900}

#recetas-preview{padding:110px 0;background:var(--lime)}
#recetas-preview h2,#recetas-preview .section-head p{color:var(--dark)}
.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.recipe-card{background:var(--paper);border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.recipe-card img{height:230px;width:100%;object-fit:cover}
.recipe-content{padding:25px}
.recipe-meta{color:var(--blue);font-weight:800;font-size:.82rem;margin:12px 0 18px}

#recetario{padding:96px 0}
.recetario-banner{
  background:var(--blue);border-radius:30px;padding:48px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;color:white;position:relative;overflow:hidden;
}
.recetario-banner h2,.recetario-banner p{color:white}

.recetario-banner img{border-radius:220px 220px 0 0;height:330px;width:100%;object-fit:cover;position:relative;z-index:1}

#faq{padding:110px 0}
.faq-wrap{max-width:900px;margin:auto}
.faq-item{border-bottom:1.5px solid rgba(20,97,60,.18)}
.faq-q{width:100%;border:0;background:transparent;padding:24px 0;display:flex;justify-content:space-between;gap:20px;text-align:left;font-weight:800;font-size:1.1rem;color:var(--dark);cursor:pointer}
.faq-a{display:none;padding:0 0 24px}
.faq-item.open .faq-a{display:block}

#cta-final{padding:120px 0;background:var(--dark);color:white;text-align:center;position:relative;overflow:hidden}
#cta-final h2,#cta-final p{color:white}
#cta-final .container{max-width:880px}



#footer{background:#062918;color:white;padding:70px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.3fr .8fr 1.1fr .9fr;gap:38px}
.footer-logo{width:170px;margin-bottom:20px}
#footer p,#footer a,#footer li{color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.8}
#footer h3{color:white;margin-bottom:16px}
#footer ul{list-style:none;display:grid;gap:8px}
.legal{margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:rgba(255,255,255,.55)}
.whatsapp-floating{
  position:fixed;right:24px;bottom:24px;z-index:100;
  background:#25D366;color:white;border-radius:999px;padding:15px 20px;font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.mobile-menu{display:none}

@media(max-width:980px){
  .header-cta .btn{display:none}
  .header-instagram{display:none}
  .menu-toggle{display:block}
  .nav-links{display:none}
  .mobile-menu.open{display:grid}
  .mobile-menu{position:absolute;left:4vw;right:4vw;top:86px;background:var(--paper);border-radius:22px;padding:22px;box-shadow:var(--shadow);gap:16px}
  .hero-grid,.proposal-wrap,.about-grid,.recetario-banner{grid-template-columns:1fr}
  .hero-visual{min-height:auto}
  .trust-bar,.steps{grid-template-columns:repeat(2,1fr)}
  .plans-grid,.benefit-grid,.recipe-grid,.footer-grid{grid-template-columns:1fr 1fr}
  .plan-card.featured{transform:none}
}
@media(max-width:640px){
  .section,#planes,#objetivos,#proceso,#sobre-mi-preview,#recetas-preview,#faq,#cta-final{padding:78px 0}
  h1{font-size:2.7rem;line-height:1.05}
  h2{font-size:2.15rem;line-height:1.08}
  .logo img{width:138px}
  .hero-actions .btn{width:100%}
  .hero-copy p.lead{margin:28px 0 28px;line-height:1.8}
  .hero-bullets{margin:30px 0 36px}
  .hero-photos{grid-template-columns:1fr 1fr;gap:12px}
  .photo.tall{height:260px}.photo.short{height:220px;margin-top:30px}.photo.wide{height:150px}
  .trust-bar,.steps,.plans-grid,.benefit-grid,.recipe-grid,.footer-grid{grid-template-columns:1fr}
  .proposal-wrap,.recetario-banner{padding:28px}
  .about-image img{height:430px}
  .whatsapp-floating{padding:14px;width:56px;height:56px;display:grid;place-items:center;font-size:0}
  .whatsapp-floating:before{content:"☘";font-size:1.4rem}
}

/* === Sistema global de espaciado editorial === */
:root{
  --space-title-text: 52px;
  --space-text-block: 46px;
  --space-block-cta: 48px;
  --space-cta-micro: 38px;
  --space-list-item: 22px;
  --space-card-gap: 30px;
  --space-section-y: 150px;
  --space-section-mobile: 92px;
}

#confianza,
#propuesta,
#planes,
#objetivos,
#proceso,
#sobre-mi-preview,
#recetas-preview,
#recetario,
#faq,
#cta-final{
  padding-top: var(--space-section-y) !important;
  padding-bottom: var(--space-section-y) !important;
}

.section-head{
  margin-bottom: 76px !important;
}

.section-head h2,
.hero-copy h1,
.proposal-wrap h2,
.about-grid h2,
.recetario-banner h2,
#cta-final h2{
  margin-bottom: 0 !important;
}

.section-head h2 + p,
.hero-copy h1 + .lead,
.proposal-wrap h2 + p,
.about-grid h2 + p,
.recetario-banner h2 + p,
#cta-final h2 + p{
  margin-top: var(--space-title-text) !important;
}

.proposal-wrap p + p,
.about-grid p + p,
.recetario-banner p + p,
#cta-final p + p{
  margin-top: 24px !important;
}

.hero-bullets,
.checks,
.panel ul{
  gap: var(--space-list-item) !important;
}

.hero-copy .lead + .hero-bullets,
.proposal-wrap p + .quote,
.about-grid p + .checks{
  margin-top: var(--space-text-block) !important;
}

.hero-bullets + .hero-actions,
.checks + .quote,
#cta-final p + br + .hero-actions{
  margin-top: var(--space-block-cta) !important;
}

.hero-actions + .micro,
.recetario-banner .btn + .micro{
  margin-top: var(--space-cta-micro) !important;
}

.trust-bar,
.plans-grid,
.benefit-grid,
.steps,
.recipe-grid{
  gap: var(--space-card-gap) !important;
}

.plan-top{
  margin-bottom: var(--space-text-block) !important;
}

.price{
  margin-top: 28px !important;
  margin-bottom: 30px !important;
}

.accordion-btn{
  margin-top: var(--space-block-cta) !important;
  margin-bottom: 24px !important;
}

.panel h4{
  margin-top: 34px !important;
  margin-bottom: 16px !important;
}

.plans-close{
  margin-top: 64px !important;
}

.tags-row{
  margin-bottom: 64px !important;
}

.benefit-card h3,
.step h3,
.recipe-card h3{
  margin-bottom: 20px !important;
}

.step h3{
  margin-top: 30px !important;
}

.recipe-meta{
  margin-top: 24px !important;
  margin-bottom: 30px !important;
}

.faq-q{
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.faq-a{
  padding-bottom: 38px !important;
}

@media(max-width:640px){
  #confianza,
  #propuesta,
  #planes,
  #objetivos,
  #proceso,
  #sobre-mi-preview,
  #recetas-preview,
  #recetario,
  #faq,
  #cta-final{
    padding-top: var(--space-section-mobile) !important;
    padding-bottom: var(--space-section-mobile) !important;
  }

  .section-head{
    margin-bottom: 58px !important;
  }

  .section-head h2 + p,
  .hero-copy h1 + .lead,
  .proposal-wrap h2 + p,
  .about-grid h2 + p,
  .recetario-banner h2 + p,
  #cta-final h2 + p{
    margin-top: 40px !important;
  }

  .hero-copy .lead + .hero-bullets,
  .proposal-wrap p + .quote,
  .about-grid p + .checks{
    margin-top: 38px !important;
  }

  .hero-bullets + .hero-actions,
  .checks + .quote,
  #cta-final p + br + .hero-actions{
    margin-top: 40px !important;
  }

  .hero-actions + .micro,
  .recetario-banner .btn + .micro{
    margin-top: 32px !important;
  }
}


/* === Unificación global de párrafos === */
p,
.plan-card p,
.benefit-card p,
.step p,
.recipe-card p,
.faq-a p,
.panel p,
.plan-micro,
.micro,
.section-head p,
.trust-card p,
#footer p,
#footer li,
#footer a{
  font-size:16px !important;
  line-height:1.9 !important;
  font-weight:400 !important;
}

.hero-copy .lead{
  font-size:16px !important;
  line-height:1.9 !important;
}


/* === Cambios solicitados: sin sección confianza, propuesta limpia y planes alineados === */

/* Propuesta de valor como en referencia: bloque claro, imagen izquierda, texto derecha */
.proposal-clean{
  grid-template-columns: .95fr 1.05fr !important;
  gap:72px !important;
  padding:64px !important;
  background:rgba(255,255,255,.45) !important;
  border-radius:34px !important;
  align-items:center !important;
}

.proposal-image img{
  width:100% !important;
  height:560px !important;
  object-fit:cover !important;
  border-radius:34px !important;
  box-shadow:none !important;
}

.proposal-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.proposal-copy h1{
  max-width:650px !important;
}

.proposal-copy p{
  max-width:690px !important;
}

.proposal-card{
  background:transparent !important;
  padding:0 !important;
}

/* Planes: intro en dos líneas, cards iguales y textos/botones alineados */
#planes .section-head{
  max-width:1040px !important;
  margin-bottom:86px !important;
}

#planes .plans-intro-text{
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  line-height:1.85 !important;
}

.plans-grid{
  align-items:stretch !important;
}

.plan-card{
  min-height:520px !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  padding:34px !important;
}

.plan-top{
  min-height:158px !important;
  margin-bottom:0 !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:start !important;
  gap:18px !important;
}

.plan-top h3{
  min-height:28px !important;
  margin-bottom:16px !important;
}

.plan-top p{
  min-height:96px !important;
  max-width:250px !important;
  margin:0 !important;
}

.plan-card .price{
  margin-top:34px !important;
  margin-bottom:24px !important;
  min-height:24px !important;
}

.plan-card > .btn{
  width:100% !important;
  margin-bottom:38px !important;
  min-height:46px !important;
}

.plan-card .accordion-btn{
  margin-top:auto !important;
  margin-bottom:0 !important;
  min-height:48px !important;
}

.plan-card.open .panel{
  margin-top:28px !important;
}

/* Mantener tamaño igual de cajas aunque haya acordeón abierto */
.plan-card.open{
  min-height:520px !important;
}

/* Si se abre el acordeón, crece hacia abajo de manera ordenada */
.panel{
  padding-top:0 !important;
}

/* Mejor ajuste visual del plan destacado sin romper alturas */
.plan-card.featured{
  transform:none !important;
}

@media(max-width:980px){
  .proposal-clean{
    grid-template-columns:1fr !important;
    padding:42px !important;
  }
  .proposal-image img{
    height:430px !important;
  }
  .plan-card,
  .plan-card.open{
    min-height:auto !important;
  }
  .plan-top,
  .plan-top p{
    min-height:auto !important;
  }
}

@media(max-width:640px){
  .proposal-clean{
    padding:34px !important;
  }
  .proposal-image img{
    height:340px !important;
  }
  #planes .plans-intro-text br{
    display:none !important;
  }
}


/* === Padding horizontal global 15% === */
.container{
  width:100% !important;
  max-width:none !important;
  padding-left:15% !important;
  padding-right:15% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

header .container{
  padding-left:15% !important;
  padding-right:15% !important;
}

@media(max-width:1200px){
  .container,
  header .container{
    padding-left:10% !important;
    padding-right:10% !important;
  }
}

@media(max-width:768px){
  .container,
  header .container{
    padding-left:24px !important;
    padding-right:24px !important;
  }
}


/* === Reequilibrio general de espacios y proporciones === */

/* Mantiene padding 15%, pero evita que los contenidos queden demasiado estirados o perdidos */
.container{
  padding-left:15% !important;
  padding-right:15% !important;
}

/* Ritmo vertical más parejo en toda la página */
#inicio{
  padding-top:86px !important;
  padding-bottom:110px !important;
}

#propuesta,
#planes,
#objetivos,
#proceso,
#sobre-mi-preview,
#recetas-preview,
#recetario,
#faq,
#cta-final{
  padding-top:118px !important;
  padding-bottom:118px !important;
}

/* Headers de sección menos separados para evitar huecos excesivos */
.section-head{
  margin-bottom:58px !important;
}

.section-head h2 + p,
.hero-copy h1 + .lead,
.proposal-wrap h2 + p,
.about-grid h2 + p,
.recetario-banner h2 + p,
#cta-final h2 + p{
  margin-top:34px !important;
}

/* Separación entre bloques más consistente */
.hero-copy .lead + .hero-bullets,
.proposal-wrap p + .quote,
.about-grid p + .checks{
  margin-top:34px !important;
}

.hero-bullets + .hero-actions,
.checks + .quote{
  margin-top:36px !important;
}

.hero-actions + .micro,
.recetario-banner .btn + .micro{
  margin-top:26px !important;
}

/* Hero más equilibrado entre texto e imagen */
.hero-grid{
  grid-template-columns:1fr 1fr !important;
  gap:64px !important;
  align-items:center !important;
}

.hero-copy h1{
  max-width:680px !important;
}

.hero-copy p.lead{
  max-width:620px !important;
}

.hero-visual{
  min-height:auto !important;
}

.hero-photos{
  gap:16px !important;
}

.photo.tall{
  height:350px !important;
}

.photo.short{
  height:280px !important;
  margin-top:48px !important;
}

.photo.wide{
  height:180px !important;
}

/* Propuesta de valor: bloque más proporcionado */
.proposal-clean{
  padding:54px !important;
  gap:58px !important;
  max-width:100% !important;
}

.proposal-image img{
  height:500px !important;
}

.proposal-copy h1{
  max-width:620px !important;
}

.quote{
  margin-top:30px !important;
}

/* Planes: menos aire muerto y cards más ordenadas */
#planes .section-head{
  margin-bottom:62px !important;
}

#planes .plans-intro-text{
  max-width:900px !important;
}

.plans-grid{
  gap:24px !important;
}

.plan-card{
  padding:30px !important;
  min-height:500px !important;
}

.plan-top{
  min-height:150px !important;
  margin-bottom:0 !important;
}

.plan-top h3{
  margin-bottom:14px !important;
}

.plan-top p{
  min-height:92px !important;
  max-width:100% !important;
}

.plan-card .price{
  margin-top:26px !important;
  margin-bottom:22px !important;
}

.plan-card > .btn{
  margin-bottom:30px !important;
}

.plan-card .accordion-btn{
  margin-top:auto !important;
}

.plans-close{
  margin-top:48px !important;
}

/* Objetivos y cards */
.tags-row{
  margin-bottom:48px !important;
  gap:14px !important;
}

.benefit-grid,
.steps,
.recipe-grid{
  gap:24px !important;
}

.benefit-card,
.step,
.recipe-content{
  padding:28px !important;
}

.benefit-card{
  min-height:220px !important;
}

.step{
  min-height:245px !important;
}

/* Sobre mí */
.about-grid{
  gap:58px !important;
}

.about-image img{
  height:500px !important;
}

/* Recetario */
.recetario-banner{
  padding:54px !important;
  gap:58px !important;
}

.recetario-banner img{
  height:300px !important;
}

/* FAQ y CTA */
.faq-q{
  padding-top:26px !important;
  padding-bottom:26px !important;
}

.faq-a{
  padding-bottom:28px !important;
}

#cta-final .container{
  max-width:none !important;
}

#cta-final h2{
  margin-left:auto !important;
  margin-right:auto !important;
}

#cta-final p{
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Desktop mediano: evitar columnas demasiado apretadas */
@media(max-width:1200px){
  .container,
  header .container{
    padding-left:8% !important;
    padding-right:8% !important;
  }

  .hero-grid,
  .proposal-clean,
  .about-grid,
  .recetario-banner{
    gap:44px !important;
  }

  .plans-grid{
    gap:20px !important;
  }
}

/* Tablet */
@media(max-width:980px){
  #inicio,
  #propuesta,
  #planes,
  #objetivos,
  #proceso,
  #sobre-mi-preview,
  #recetas-preview,
  #recetario,
  #faq,
  #cta-final{
    padding-top:90px !important;
    padding-bottom:90px !important;
  }

  .hero-grid,
  .proposal-clean,
  .about-grid,
  .recetario-banner{
    grid-template-columns:1fr !important;
  }

  .plans-grid,
  .benefit-grid,
  .recipe-grid,
  .footer-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .steps{
    grid-template-columns:1fr 1fr !important;
  }

  .proposal-image img,
  .about-image img{
    height:420px !important;
  }
}

/* Mobile */
@media(max-width:640px){
  .container,
  header .container{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  #inicio,
  #propuesta,
  #planes,
  #objetivos,
  #proceso,
  #sobre-mi-preview,
  #recetas-preview,
  #recetario,
  #faq,
  #cta-final{
    padding-top:74px !important;
    padding-bottom:74px !important;
  }

  .section-head{
    margin-bottom:44px !important;
  }

  .section-head h2 + p,
  .hero-copy h1 + .lead,
  .proposal-wrap h2 + p,
  .about-grid h2 + p,
  .recetario-banner h2 + p,
  #cta-final h2 + p{
    margin-top:28px !important;
  }

  .plans-grid,
  .benefit-grid,
  .recipe-grid,
  .footer-grid,
  .steps{
    grid-template-columns:1fr !important;
  }

  .proposal-clean,
  .recetario-banner{
    padding:28px !important;
  }

  .photo.tall{height:260px !important;}
  .photo.short{height:220px !important;margin-top:28px !important;}
  .photo.wide{height:150px !important;}

  .proposal-image img,
  .about-image img{
    height:340px !important;
  }
}


/* === Ajuste sección 2 exactamente como referencia === */

#propuesta{
  padding-top:110px !important;
  padding-bottom:110px !important;
}

.proposal-clean{
  background:rgba(255,255,255,.42) !important;
  border-radius:38px !important;
  padding:48px !important;
  grid-template-columns:.88fr 1.12fr !important;
  gap:52px !important;
  align-items:center !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

.proposal-image{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.proposal-image img{
  width:100% !important;
  max-width:520px !important;
  height:620px !important;
  object-fit:cover !important;
  border-radius:34px !important;
}

.proposal-copy{
  max-width:720px !important;
}

.proposal-copy .eyebrow{
  margin-bottom:22px !important;
}

.proposal-copy h1{
  font-size:clamp(3rem,4.2vw,5rem) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  max-width:720px !important;
  margin-bottom:0 !important;
}

.proposal-copy h1 + p{
  margin-top:42px !important;
}

.proposal-copy p{
  font-size:16px !important;
  line-height:2 !important;
  color:#5d6c61 !important;
  max-width:650px !important;
}

.proposal-copy p + p{
  margin-top:26px !important;
}

.quote{
  margin-top:40px !important;
  border-left:4px solid #b7cb56 !important;
  padding-left:22px !important;
  font-size:1.15rem !important;
  line-height:1.15 !important;
  letter-spacing:-.04em !important;
  max-width:540px !important;
  color:#0f4c2c !important;
}

@media(max-width:1100px){
  .proposal-clean{
    grid-template-columns:1fr !important;
    gap:42px !important;
    padding:38px !important;
  }

  .proposal-image img{
    max-width:none !important;
    height:460px !important;
  }

  .proposal-copy{
    max-width:none !important;
  }

  .proposal-copy h1{
    max-width:none !important;
  }
}

@media(max-width:640px){
  .proposal-clean{
    padding:28px !important;
    border-radius:28px !important;
  }

  .proposal-image img{
    height:340px !important;
    border-radius:24px !important;
  }

  .proposal-copy h1{
    font-size:2.3rem !important;
    line-height:1.02 !important;
  }

  .proposal-copy h1 + p{
    margin-top:30px !important;
  }

  .quote{
    margin-top:32px !important;
  }
}

/* === Ajustes de revisión: jerarquía y cards de planes === */
.proposal-copy h1{
  color:#21482f;
  font-family:Inter, system-ui, -apple-system, Segoe UI, sans-serif !important;
  font-weight:800 !important;
}

.plan-card{
  position:relative !important;
}

.plan-top{
  display:block !important;
  min-height:0 !important;
}

.plan-top .badge{
  position:absolute !important;
  top:30px !important;
  right:30px !important;
}

.plan-top h3{
  padding-right:150px !important;
}

.plan-top p{
  width:100% !important;
  max-width:none !important;
  min-height:auto !important;
  padding-right:0 !important;
}

.copy-lines{
  display:block !important;
  text-align:center !important;
}

.copy-lines span{
  display:block !important;
}

.copy-lines span + span{
  margin-top:4px !important;
}

#objetivos .section-head p{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:980px !important;
}

#objetivos .section-head p + p{
  margin-top:4px !important;
}

.proposal-copy h1{
  font-family:"Playfair Display",serif !important;
  font-size:clamp(2.25rem,4.15vw,4.15rem) !important;
  line-height:1.04 !important;
  font-weight:700 !important;
  max-width:720px !important;
}

#planes .plans-intro-text{
  max-width:980px !important;
}

#planes .plan-card{
  min-height:540px !important;
}

#planes .plan-top{
  margin-bottom:34px !important;
}

#planes .plan-top h3{
  margin-bottom:28px !important;
}

#planes .plan-top p{
  line-height:1.8 !important;
}

#planes .plan-card .price{
  margin-top:auto !important;
  margin-bottom:24px !important;
}

#planes .plan-card > .btn{
  margin-bottom:0 !important;
}

#planes .plan-card .accordion-btn{
  margin-top:24px !important;
}

#objetivos .section-head{
  margin-bottom:48px !important;
}

#objetivos .section-head h2 + p{
  margin-top:24px !important;
}

#proceso .section-head p,
#cta-final p{
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#sobre-mi-preview .checks{
  gap:6px !important;
}

#sobre-mi-preview .checks li{
  line-height:1.3 !important;
}

#recetario .recetario-banner{
  width:70% !important;
  max-width:1400px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:64px !important;
}

#cta-final .container > .quote{
  color:#F9FAF0 !important;
  opacity:1 !important;
}

@media(max-width:1200px){
  .plan-top .badge{
    position:static !important;
    margin-bottom:22px !important;
  }

  .plan-top{
    display:flex !important;
    flex-direction:column-reverse !important;
    align-items:flex-start !important;
  }

  .plan-top h3{
    padding-right:0 !important;
  }

  #planes .plan-card .accordion-btn{
    margin-top:24px !important;
  }

  #recetario .recetario-banner{
    width:84% !important;
  }
}

@media(max-width:640px){
  .copy-lines span + span{
    margin-top:6px !important;
  }

  #planes .plan-card{
    min-height:auto !important;
  }

  #planes .plan-card .accordion-btn{
    margin-top:24px !important;
  }

  #recetario .recetario-banner{
    width:calc(100% - 48px) !important;
    padding:28px !important;
  }
}

/* === Pulido final de spacing e interlineado === */
:root{
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-7:28px;
  --s-8:32px;
  --s-10:40px;
  --s-12:48px;
  --s-14:56px;
  --s-16:64px;
  --s-18:72px;
  --s-20:80px;
  --s-24:96px;
}

body{
  line-height:1.6;
}

h1{
  line-height:1.04 !important;
}

h2{
  line-height:1.08 !important;
}

h3{
  line-height:1.16 !important;
}

p,
.plan-card p,
.benefit-card p,
.step p,
.recipe-card p,
.faq-a p,
.panel p,
.plan-micro,
.micro,
.section-head p,
.trust-card p,
#footer p,
#footer li,
#footer a{
  line-height:1.66 !important;
}

#inicio{
  padding-top:var(--s-20) !important;
  padding-bottom:var(--s-18, 72px) !important;
}

#propuesta,
#planes,
#objetivos,
#proceso,
#sobre-mi-preview,
#recetas-preview,
#recetario,
#faq,
#cta-final{
  padding-top:var(--s-20) !important;
  padding-bottom:var(--s-20) !important;
}

.section-head{
  margin-bottom:var(--s-12) !important;
}

.section-head h2 + p,
.section-head h2 + .copy-lines,
.hero-copy h1 + .lead,
.proposal-copy h1 + p,
.about-grid h2 + p,
.recetario-banner h2 + p,
#cta-final h2 + p{
  margin-top:var(--s-6) !important;
}

.copy-lines span + span{
  margin-top:var(--s-2) !important;
}

.intro-copy,
.section-head .intro-copy,
#planes .plans-intro-text{
  display:block !important;
  max-width:740px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  line-height:1.62 !important;
}

.intro-copy span,
.plans-intro-text span{
  display:inline !important;
}

.intro-copy span + span,
.plans-intro-text span + span{
  margin-top:0 !important;
}

.hero-grid,
.proposal-clean,
.about-grid,
.recetario-banner{
  gap:var(--s-12) !important;
}

.hero-copy p.lead{
  margin-top:var(--s-6) !important;
  margin-bottom:0 !important;
  line-height:1.7 !important;
}

.hero-bullets{
  margin-top:var(--s-8) !important;
  margin-bottom:var(--s-8) !important;
  gap:var(--s-4) !important;
}

.hero-actions{
  gap:var(--s-4) !important;
}

.hero-actions + .micro{
  margin-top:var(--s-5) !important;
}

.proposal-clean{
  padding:var(--s-12) !important;
}

.proposal-copy p + p,
.about-grid p + p,
.recetario-banner p + p,
#cta-final p + p{
  margin-top:var(--s-4) !important;
}

.proposal-wrap p + .quote,
.about-grid p + .checks{
  margin-top:var(--s-6) !important;
}

.quote{
  margin-top:var(--s-6) !important;
  line-height:1.22 !important;
}

.trust-bar,
.plans-grid,
.benefit-grid,
.steps,
.recipe-grid{
  gap:var(--s-6) !important;
}

.plan-card,
.benefit-card,
.step,
.recipe-content{
  padding:var(--s-7) !important;
}

#planes .section-head{
  margin-bottom:var(--s-12) !important;
}

#planes .plans-intro-text{
  line-height:1.62 !important;
}

#planes .plan-card{
  min-height:520px !important;
}

#planes .plan-top{
  margin-bottom:var(--s-7) !important;
}

#planes .plan-top h3{
  margin-bottom:var(--s-5) !important;
}

#planes .plan-top p{
  line-height:1.62 !important;
}

#planes .plan-card .price{
  margin-top:auto !important;
  margin-bottom:var(--s-5) !important;
}

#planes .plan-card > .btn{
  min-height:46px !important;
  margin-bottom:0 !important;
}

#planes .plan-card .accordion-btn{
  min-height:46px !important;
  margin-top:var(--s-5) !important;
  margin-bottom:0 !important;
}

.plan-card.open .panel{
  margin-top:var(--s-6) !important;
}

.panel h4{
  margin-top:var(--s-6) !important;
  margin-bottom:var(--s-3) !important;
}

.panel ul{
  gap:var(--s-2) !important;
}

.panel li{
  line-height:1.45 !important;
}

.plans-close{
  margin-top:var(--s-10) !important;
}

.plans-close p + br,
.recetario-banner p + br,
#cta-final p + br{
  display:none !important;
}

.plans-close p + br + .btn,
.recetario-banner p + br + .btn,
#cta-final p + br + .hero-actions{
  margin-top:var(--s-8) !important;
}

.tags-row{
  gap:var(--s-3) !important;
  margin-bottom:var(--s-10) !important;
}

.icon{
  margin-bottom:var(--s-5) !important;
}

.benefit-card h3,
.step h3,
.recipe-card h3{
  margin-bottom:var(--s-4) !important;
}

.step h3{
  margin-top:var(--s-5) !important;
}

.checks{
  gap:var(--s-2) !important;
  margin-top:var(--s-5) !important;
  margin-bottom:var(--s-5) !important;
}

.checks li{
  line-height:1.32 !important;
}

.recipe-meta{
  margin-top:var(--s-4) !important;
  margin-bottom:var(--s-5) !important;
}

.recetario-banner{
  padding:var(--s-12) !important;
}

.recetario-banner .btn + .micro{
  margin-top:var(--s-5) !important;
}

.faq-q{
  padding-top:var(--s-5) !important;
  padding-bottom:var(--s-5) !important;
}

.faq-a{
  padding-bottom:var(--s-6) !important;
}

#cta-final p + p{
  margin-top:var(--s-4) !important;
}

#cta-final .quote{
  margin-top:var(--s-8) !important;
}

/* === CTA final: más aire y jerarquía de cierre === */
#cta-final{
  padding-top:clamp(132px, 11vw, 176px) !important;
  padding-bottom:clamp(132px, 11vw, 176px) !important;
}

#cta-final .container{
  max-width:1040px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

#cta-final h2{
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#cta-final .intro-copy{
  max-width:880px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#cta-final h2 + .intro-copy{
  margin-top:42px !important;
}

#cta-final .intro-copy + .intro-copy{
  margin-top:26px !important;
}

#cta-final .hero-actions{
  gap:24px !important;
  margin-top:52px !important;
}

#cta-final .hero-actions .btn{
  min-width:220px !important;
  padding-left:30px !important;
  padding-right:30px !important;
}

#cta-final .quote{
  margin-top:68px !important;
  max-width:760px !important;
  padding-top:22px !important;
  padding-bottom:22px !important;
  padding-left:30px !important;
  text-align:left !important;
  border-left-width:4px !important;
}

@media(max-width:720px){
  #cta-final{
    padding-top:104px !important;
    padding-bottom:104px !important;
  }

  #cta-final .hero-actions{
    gap:16px !important;
    margin-top:42px !important;
  }

  #cta-final .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
  }

  #cta-final .quote{
    margin-top:52px !important;
    padding-left:22px !important;
  }
}

#footer{
  padding-top:var(--s-16) !important;
  padding-bottom:var(--s-8) !important;
}

.footer-grid{
  gap:var(--s-10) !important;
}

.legal{
  margin-top:var(--s-10) !important;
  padding-top:var(--s-6) !important;
}

@media(max-width:980px){
  #inicio,
  #propuesta,
  #planes,
  #objetivos,
  #proceso,
  #sobre-mi-preview,
  #recetas-preview,
  #recetario,
  #faq,
  #cta-final{
    padding-top:var(--s-20) !important;
    padding-bottom:var(--s-20) !important;
  }

  .section-head{
    margin-bottom:var(--s-10) !important;
  }

  .hero-grid,
  .proposal-clean,
  .about-grid,
  .recetario-banner{
    gap:var(--s-10) !important;
  }
}

@media(max-width:640px){
  #inicio,
  #propuesta,
  #planes,
  #objetivos,
  #proceso,
  #sobre-mi-preview,
  #recetas-preview,
  #recetario,
  #faq,
  #cta-final{
    padding-top:var(--s-16) !important;
    padding-bottom:var(--s-16) !important;
  }

  .section-head{
    margin-bottom:var(--s-8) !important;
  }

  .section-head h2 + p,
  .section-head h2 + .copy-lines,
  .hero-copy h1 + .lead,
  .proposal-copy h1 + p,
  .about-grid h2 + p,
  .recetario-banner h2 + p,
  #cta-final h2 + p{
    margin-top:var(--s-5) !important;
  }

  .proposal-clean,
  .recetario-banner{
    padding:var(--s-7) !important;
  }

  .plans-grid,
  .benefit-grid,
  .steps,
  .recipe-grid,
  .footer-grid{
    gap:var(--s-5) !important;
  }

#planes .plan-card{
  min-height:auto !important;
}
}

/* === Aislamiento real de pricing cards y accordions === */
#planes .plans-grid{
  align-items:start !important;
  grid-auto-rows:auto !important;
}

#planes .plan-card{
  align-self:start !important;
  height:auto !important;
  min-height:520px !important;
}

#planes .plan-card.open{
  height:auto !important;
}

#planes .plan-card .price{
  margin-top:auto !important;
}

#planes .plan-card .panel{
  display:none !important;
}

#planes .plan-card.open .panel{
  display:block !important;
}

#planes .plan-card .accordion-btn{
  flex:none !important;
}

#planes .plan-card:not(.open) .panel{
  visibility:hidden !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

#planes .plan-card.open .panel{
  visibility:visible !important;
  height:auto !important;
  overflow:visible !important;
}

@media(max-width:980px){
  #planes .plan-card,
  #planes .plan-card.open{
    min-height:auto !important;
  }
}

/* === Textos introductorios como párrafos continuos === */
.section-head > p,
#planes .plans-intro-text,
#objetivos .section-head > p,
#proceso .section-head > p,
#recetas-preview .section-head > p,
#cta-final .intro-copy{
  display:block !important;
  max-width:740px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  line-height:1.62 !important;
}

.section-head > p span,
#planes .plans-intro-text span,
#cta-final .intro-copy span{
  display:inline !important;
  margin:0 !important;
}

@media(max-width:640px){
  .section-head > p,
  #planes .plans-intro-text,
  #objetivos .section-head > p,
  #proceso .section-head > p,
  #recetas-preview .section-head > p,
  #cta-final .intro-copy{
    max-width:100% !important;
    line-height:1.58 !important;
  }
}

/* === Hero inicial: dos columnas estables con collage controlado === */
@media(min-width:981px){
  #inicio{
    min-height:auto !important;
  }

  #inicio .hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    gap:68px !important;
    align-items:center !important;
  }

  #inicio .hero-copy{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    min-width:0 !important;
  }

  #inicio .hero-copy h1{
    max-width:660px !important;
  }

  #inicio .hero-visual{
    display:grid !important;
    align-self:center !important;
    place-items:center !important;
    min-height:0 !important;
    padding-top:0 !important;
    margin-top:0 !important;
    box-sizing:border-box !important;
  }

  #inicio .hero-photos{
    width:100% !important;
    max-width:760px !important;
    height:clamp(560px, 42vw, 720px) !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:1fr .58fr !important;
    gap:18px !important;
    align-items:stretch !important;
    position:relative !important;
    z-index:2 !important;
  }

  #inicio .photo{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  #inicio .photo.short{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:end !important;
    height:82% !important;
  }

  #inicio .photo.tall{
    grid-column:2 !important;
    grid-row:1 !important;
    height:auto !important;
  }

  #inicio .photo.wide{
    grid-column:1 / 3 !important;
    grid-row:2 !important;
    height:auto !important;
  }

  #inicio .photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/* === Propuesta: módulo split de dos cajas === */
@media(min-width:981px){
  #propuesta .proposal-clean{
    display:grid !important;
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr) !important;
    gap:64px !important;
    align-items:stretch !important;
    padding:clamp(40px, 4vw, 56px) !important;
  }

  #propuesta .proposal-image{
    position:relative !important;
    display:block !important;
    min-width:0 !important;
    min-height:0 !important;
  }

  #propuesta .proposal-image img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:34px !important;
  }

  #propuesta .proposal-copy{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    max-width:720px !important;
    min-width:0 !important;
  }
}

@media(max-width:980px){
  #propuesta .proposal-clean{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:36px !important;
    align-items:start !important;
  }

  #propuesta .proposal-image{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:28px !important;
    width:100% !important;
  }

  #propuesta .proposal-image img{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    height:clamp(220px, 50vw, 300px) !important;
    object-fit:cover !important;
    border-radius:inherit !important;
  }

  #propuesta .proposal-copy{
    max-width:none !important;
  }
}

#propuesta{
  padding-top:calc(var(--s-20) + 70px) !important;
  padding-bottom:calc(var(--s-20) + 70px) !important;
}

#objetivos{
  padding-bottom:calc(var(--s-20) + 70px) !important;
}

#proceso{
  padding-bottom:100px !important;
}

/* === Sobre mí: módulo split de dos cajas === */
@media(min-width:981px){
  #sobre-mi-preview .about-grid{
    display:grid !important;
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr) !important;
    gap:64px !important;
    align-items:stretch !important;
  }

  #sobre-mi-preview .about-image{
    position:relative !important;
    display:block !important;
    min-width:0 !important;
    min-height:0 !important;
  }

  #sobre-mi-preview .about-image img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:220px 220px 28px 28px !important;
  }

  #sobre-mi-preview .about-grid > div:last-child{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    max-width:720px !important;
    min-width:0 !important;
  }
}

@media(max-width:980px){
  #sobre-mi-preview .about-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:36px !important;
    align-items:start !important;
  }

  #sobre-mi-preview .about-image{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:220px 220px 28px 28px !important;
    width:100% !important;
  }

  #sobre-mi-preview .about-image img{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    height:clamp(240px, 55vw, 340px) !important;
    object-fit:cover !important;
    border-radius:inherit !important;
  }

  #sobre-mi-preview .about-grid > div:last-child{
    max-width:none !important;
  }
}

/* === Recetario: banner split de dos cajas === */
@media(min-width:981px){
  #recetario .recetario-banner{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(360px, .9fr) !important;
    gap:48px !important;
    align-items:center !important;
    width:70% !important;
    max-width:1400px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:48px 56px !important;
    background:var(--blue) !important;
    border-radius:30px !important;
    overflow:hidden !important;
  }

  #recetario .recetario-banner > div:first-child{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
    max-width:760px !important;
  }

  #recetario .recetario-banner > img{
    width:100% !important;
    max-width:none !important;
    height:clamp(300px, 30vw, 420px) !important;
    min-height:0 !important;
    object-fit:cover !important;
    border-radius:220px 220px 0 0 !important;
    align-self:center !important;
  }
}

@media(max-width:980px){
  #recetario .recetario-banner{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:36px !important;
    align-items:start !important;
  }

  #recetario .recetario-banner > div:first-child{
    max-width:none !important;
  }

  #recetario .recetario-banner > img{
    width:100% !important;
    max-width:none !important;
    height:clamp(240px, 45vw, 320px) !important;
    object-fit:cover !important;
    border-radius:220px 220px 24px 24px !important;
  }
}

/* === Planes: respiración del párrafo descriptivo === */
#planes .plan-top p{
  margin-top:18px !important;
}

/* === Planes: descripción asociada al bloque inferior === */
#planes .plan-card{
  display:flex !important;
  flex-direction:column !important;
}

#planes .plan-top{
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  grid-template-rows:auto 1fr auto !important;
  align-items:start !important;
  gap:0 18px !important;
  min-height:0 !important;
  margin-bottom:0 !important;
}

#planes .plan-top > div{
  display:contents !important;
}

#planes .plan-top h3{
  grid-column:1 !important;
  grid-row:1 !important;
  margin:0 !important;
  padding-right:0 !important;
}

#planes .plan-top .badge{
  grid-column:2 !important;
  grid-row:1 !important;
  position:static !important;
  justify-self:end !important;
  align-self:start !important;
}

#planes .plan-top p{
  grid-column:1 / -1 !important;
  grid-row:3 !important;
  align-self:end !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 0 16px !important;
  padding-right:0 !important;
}

#planes .plan-card .price{
  margin-top:0 !important;
}

/* === Planes: CTA secundario de ayuda === */
#planes .plans-close,
#opciones .plans-close {
  width:min(900px, 94%) !important;
  margin:78px auto 0 !important;
  padding:clamp(18px, 3vw, 28px) clamp(20px, 4vw, 48px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:18px !important;
  text-align:center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#planes .plans-close h2,
#opciones .plans-close h2 {
  margin:0 !important;
  max-width:760px !important;
  color:#21482f !important;
  font-family:var(--font-title) !important;
  font-size:40px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
}

#planes .plans-close p,
#opciones .plans-close p {
  max-width:680px !important;
  margin:2px 0 0 !important;
  color:var(--muted) !important;
  font-size:16px !important;
  line-height:1.65 !important;
  font-weight:400 !important;
}

#planes .plans-close .btn,
#opciones .plans-close .btn {
  min-height:50px !important;
  padding:15px 36px !important;
  margin-top:12px !important;
}

@media(max-width:640px){
  #planes .plans-close,
  #opciones .plans-close {
    width:100% !important;
    margin-top:52px !important;
    padding:24px 0 !important;
    border-radius:0 !important;
  }

  #planes .plans-close h2,
  #opciones .plans-close h2 {
    font-size:clamp(1.75rem, 8vw, 2.45rem) !important;
  }

  #planes .plans-close .btn,
  #opciones .plans-close .btn {
    width:100% !important;
  }
}

/* ==============================
   TYPOGRAPHY SYSTEM OVERRIDES
   ============================== */
:root{
  --font-title: "Shocka Serif", "Playfair Display", Georgia, serif;
  --font-body: "SF Compact Display", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-title-main: clamp(2.55rem, 3.7vw, 4.15rem);
  --fs-title-small: clamp(2rem, 2.8vw, 3rem);
  --fs-h1: clamp(3.1rem, 4.4vw, 4.8rem);
  --fs-h2: clamp(2.35rem, 3.2vw, 3.7rem);

  --fs-body: 16px;
  --fs-body-small: 15px;
  --fs-ui: 14px;
  --fs-micro: 12px;

  --lh-title: 1;
  --lh-body: 1.6;
  --lh-ui: 1.1;
}

body{
  font-family:var(--font-body) !important;
  font-size:var(--fs-body) !important;
  line-height:var(--lh-body) !important;
  font-weight:400 !important;
}

h1{
  font-family:var(--font-title) !important;
  font-size:var(--fs-h1) !important;
  line-height:.95 !important;
  letter-spacing:-0.02em !important;
  font-weight:700 !important;
}

h2{
  font-family:var(--font-title) !important;
  font-size:var(--fs-h2) !important;
  line-height:var(--lh-title) !important;
  letter-spacing:-0.02em !important;
  font-weight:700 !important;
}

h3{
  font-family:var(--font-body) !important;
  font-size:22px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}



p,
.faq-a p{
  font-size:var(--fs-body) !important;
  line-height:var(--lh-body) !important;
  font-weight:400 !important;
}

.hero-copy p.lead,
.section-head p,
.intro-copy{
  font-size:var(--fs-body) !important;
  line-height:var(--lh-body) !important;
}

.proposal-copy h1,
#planes .section-head h2,
#objetivos .section-head h2,
#proceso .section-head h2,
#sobre-mi-preview h2,
#recetas-preview .section-head h2,
#recetario h2,
#faq .section-head h2,
#cta-final h2{
  font-family:var(--font-title) !important;
  font-size:var(--fs-h2) !important;
  line-height:var(--lh-title) !important;
  letter-spacing:-0.02em !important;
  font-weight:700 !important;
}

#inicio h1{
  font-size:60px !important;
  line-height:.95 !important;
  letter-spacing:-0.02em !important;
}

.eyebrow,
.badge,
.recipe-meta,
.legal,
.plan-micro,
.trust-card .num{
  font-size:var(--fs-micro) !important;
  line-height:var(--lh-ui) !important;
  font-weight:700 !important;
}

.nav-links,
.micro,
.panel h4,
.panel li{
  font-size:var(--fs-ui) !important;
  line-height:var(--lh-ui) !important;
}

.btn,
.tag,
#footer p,
#footer a,
#footer li,
.plan-card p,
.trust-card p{
  font-size:var(--fs-body-small) !important;
  line-height:var(--lh-body) !important;
}

.btn,
.badge,
.tag,
.accordion-btn{
  line-height:var(--lh-ui) !important;
}

.btn{
  font-weight:700 !important;
}

.accordion-btn,
.faq-q{
  font-size:var(--fs-ui) !important;
  font-weight:800 !important;
}

.faq-q{
  font-size:17px !important;
  line-height:1.2 !important;
}

.trust-card h3{
  font-size:18px !important;
  line-height:1.2 !important;
}

.proposal-card h3{
  font-size:var(--fs-title-small) !important;
  line-height:var(--lh-title) !important;
}

.quote{
  font-size:clamp(1.1rem, 1.4vw, 1.55rem) !important;
  line-height:1.18 !important;
  font-weight:700 !important;
  letter-spacing:-0.005em !important;
}

#recetario .recetario-banner .btn{
  width:fit-content !important;
  max-width:100% !important;
  align-self:flex-start !important;
  padding-inline:26px !important;
}

/* === Títulos internos: peso y espaciado más editorial === */
#planes .plan-top h3,
.benefit-card h3,
.step h3,
.recipe-card h3,
.trust-card h3,
.proposal-card h3,
#footer h3{
  font-family:var(--font-title) !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
}

.panel h4{
  font-family:var(--font-title) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

.step:before{
  font-family:var(--font-title) !important;
  font-size:48px !important;
  line-height:var(--lh-ui) !important;
  letter-spacing:0 !important;
}

#objetivos .icon{
  font-family:var(--font-title) !important;
  font-size:21px !important;
}

@media(max-width:980px){
  h1{
    font-size:clamp(2rem, 8vw, 3rem) !important;
  }

  h2{
    font-size:clamp(1.8rem, 6vw, 2.6rem) !important;
  }
}

/* ==============================
   TOPIC STRIP — CLEAN MARQUEE
   ============================== */

#topic-strip {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: 100px 0;
  display: grid;
  gap: 50px;
}

/* Eliminar figuras decorativas anteriores */
#topic-strip::before,
#topic-strip::after {
  display: none !important;
  content: none !important;
}

.topic-strip__row {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.topic-strip__track {
  display: flex;
  align-items: center;
  width: max-content;
  
  
}

.topic-strip__set {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(17px, 1.9vw, 34px);
  padding-right: clamp(17px, 1.9vw, 34px);
}

.topic-pill {
  flex: 0 0 auto;
  height: clamp(38px, 3vw, 50px);
  padding: 0 clamp(20px, 2vw, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #b0c859;
  border-radius: 999px;
  background: rgba(244, 249, 230, 0.35);
  color: #b0c859;
  font-family: var(--font-body, "SF Compact Display", Inter, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.topic-pill--image {
  width: clamp(100px, 9vw, 150px);
  padding: 0;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
}

.topic-pill--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 999px;
}

@media (max-width: 768px) {
  #topic-strip {
    padding: 100px 0;
    gap: 50px;
  }

  .topic-strip__set {
    gap: 14px;
    padding-right: 14px;
  }

  .topic-pill {
    height: 36px;
    padding: 0 18px;
    font-size: 16px;
  }

  .topic-pill--image {
    width: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topic-strip__track {
    
    transform: none;
  }

  .topic-strip__set {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
  }
}



/* ==============================
   PAGE BACKGROUND SVG SHAPES
   ============================== */

body {
  position: relative;
  background: var(--cream, #eef4da) !important;
  overflow-x: hidden;
}

.page-bg-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-shape {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  opacity: 0.82;
  
}

/* Asegurar que todo el contenido quede por encima */
#site-header,
main,
section,
footer,
.whatsapp-floating {
  position: relative;
}

main,
section,
footer {
  z-index: 1;
}

#site-header {
  z-index: 99;
}

.whatsapp-floating {
  z-index: 100;
}

/* HERO / primera pantalla */
.bg-shape--circle-a {
  width: clamp(106px, 10.6vw, 202px);
  top: 7%;
  left: -3.5%;
  opacity: 0.72;
  
}

.bg-shape--wave-a {
  width: clamp(229px, 22.9vw, 458px);
  top: 12.8%;
  right: -5%;
  
}

.bg-shape--circle-b {
  width: clamp(66px, 5.3vw, 106px);
  top: 27%;
  right: 9%;
  
}

/* Zona entre hero / objetivos / video */
.bg-shape--blue-a {
  width: clamp(132px, 12.3vw, 246px);
  top: 34%;
  left: 5%;
  
}

.bg-shape--green-a {
  width: clamp(132px, 11.4vw, 238px);
  top: 41%;
  right: -4%;
  
}

.bg-shape--circle-c {
  width: clamp(92px, 7.9vw, 150px);
  top: 47%;
  left: -1.5%;
  
}

/* Zona planes */
.bg-shape--circle-d {
  width: clamp(97px, 8.8vw, 176px);
  top: 56%;
  right: 8%;
  
}

.bg-shape--blue-b {
  width: clamp(158px, 14.1vw, 282px);
  top: 63%;
  left: -1.5%;
  transform: rotate(-10deg);
  
}

/* Zona recetario / faq / cierre */
.bg-shape--wave-b {
  width: clamp(220px, 21.1vw, 440px);
  top: 76%;
  left: -7%;
  
}

.bg-shape--circle-e {
  width: clamp(84px, 7vw, 141px);
  top: 83%;
  right: 15%;
  
}

.bg-shape--green-b {
  width: clamp(114px, 10.6vw, 202px);
  top: 90%;
  right: 5%;
  
}

.bg-shape--wave-c {
  width: clamp(209px, 19.8vw, 396px);
  top: 24%;
  left: -8%;
  opacity: 0.7;
  
}

.bg-shape--circle-f {
  width: clamp(84px, 7.7vw, 149px);
  top: 31%;
  right: -1.5%;
  opacity: 0.76;
  
}

.bg-shape--yellow-f {
  width: clamp(64px, 5.5vw, 106px);
  top: 50%;
  right: 1%;
  opacity: 0.78;
  
}

.bg-shape--blue-c {
  width: clamp(138px, 12.1vw, 242px);
  top: 69%;
  right: -3%;
  opacity: 0.72;
  
}

.bg-shape--green-c {
  width: clamp(123px, 11vw, 226px);
  top: 72%;
  left: 7%;
  opacity: 0.74;
  
}

.bg-shape--circle-g {
  width: clamp(86px, 7.7vw, 143px);
  top: 94%;
  left: 12%;
  opacity: 0.7;
  
}

/* Movimiento mínimo y elegante */








/* Responsive */
@media (max-width: 980px) {
  .bg-shape {
    opacity: 0.65;
  }

  .bg-shape--wave-a,
  .bg-shape--wave-b,
  .bg-shape--wave-c {
    width: 299px;
  }

  .bg-shape--circle-a {
    left: -55px;
  }

  .bg-shape--green-a,
  .bg-shape--blue-c {
    right: -70px;
  }

  .bg-shape--blue-b,
  .bg-shape--wave-c {
    left: -60px;
  }
}

@media (max-width: 640px) {
  .bg-shape {
    opacity: 0.42;
  }

  .bg-shape--circle-a,
  .bg-shape--circle-c,
  .bg-shape--blue-a,
  .bg-shape--circle-d,
  .bg-shape--green-b,
  .bg-shape--circle-f,
  .bg-shape--blue-c,
  .bg-shape--green-c,
  .bg-shape--circle-g {
    width: 106px;
  }

  .bg-shape--wave-a,
  .bg-shape--wave-b,
  .bg-shape--wave-c {
    width: 229px;
  }

  .bg-shape--circle-b,
  .bg-shape--circle-e,
  .bg-shape--yellow-f {
    width: 64px;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
}


/* ==============================
   SENIOR FRONTEND POLISH PASS
   ============================== */

:root {
  --polish-border: rgba(23, 62, 42, 0.12);
  --polish-border-strong: rgba(23, 62, 42, 0.2);
  --polish-surface: rgba(255, 255, 255, 0.48);
  --polish-surface-strong: rgba(255, 255, 255, 0.72);
  --polish-shadow: 0 22px 70px rgba(16, 58, 34, 0.08);
  --polish-shadow-card: 0 18px 52px rgba(16, 58, 34, 0.07);
  --polish-focus: 0 0 0 3px rgba(176, 200, 89, 0.3);
}

html {
  scroll-padding-top: 96px;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#site-header {
  background: rgba(238, 244, 218, 0.82) !important;
  border-bottom: 1px solid rgba(23, 62, 42, 0.08) !important;
  box-shadow: 0 10px 36px rgba(16, 58, 34, 0.05);
  backdrop-filter: blur(14px);
}

.header-inner {
  min-height: 78px !important;
}

.nav-links a {
  position: relative;
  padding: 10px 0;
  
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0.55;
  
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

a:focus-visible,
button:focus-visible,
.accordion-btn:focus-visible,
.faq-q:focus-visible {
  outline: none;
  box-shadow: var(--polish-focus);
}

.btn {
  box-shadow: 0 12px 26px rgba(176, 200, 89, 0.18);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(16, 58, 34, 0.16);
}

.btn.secondary:hover {
  background: rgba(176, 200, 89, 0.12);
  border-color: rgba(23, 62, 42, 0.28);
}

.header-instagram:hover,
.whatsapp-floating:hover {
  transform: translateY(-2px);
}

main {
  overflow: clip;
}

#inicio,
#sobre-mi-preview,
#propuesta,
#planes,
#objetivos,
#proceso,
#recetas-preview,
#recetario,
#faq,
#cta-final {
  scroll-margin-top: 96px;
}

.section-head {
  margin-bottom: clamp(42px, 5vw, 76px) !important;
}

.section-head p,
.intro-copy {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

#inicio {
  padding-top: clamp(76px, 8vw, 118px) !important;
  padding-bottom: clamp(76px, 8vw, 112px) !important;
}

#inicio .hero-grid {
  gap: clamp(42px, 7vw, 92px) !important;
  align-items: center !important;
}

#inicio .hero-copy {
  max-width: 680px;
}

#inicio .lead {
  max-width: 620px;
}

#inicio .hero-bullets {
  gap: 18px !important;
}

#inicio .hero-bullets li {
  align-items: flex-start;
  line-height: 1.45;
}

#inicio .hero-photos {
  gap: clamp(14px, 1.4vw, 20px) !important;
  filter: drop-shadow(0 30px 60px rgba(16, 58, 34, 0.09));
}


#inicio .photo:hover,
#propuesta .proposal-image img:hover,
#sobre-mi-preview .about-image img:hover,
#recetario .recetario-banner > img:hover {
  transform: translateY(-4px);
}

#propuesta .proposal-clean {
  border: 1px solid rgba(23, 62, 42, 0.08);
  box-shadow: var(--polish-shadow);
  background: rgba(255, 255, 255, 0.46) !important;
  backdrop-filter: blur(4px);
}

#propuesta .proposal-clean,
#sobre-mi-preview .about-grid,
#recetario .recetario-banner {
  gap: clamp(38px, 5vw, 72px) !important;
}

#propuesta .proposal-image img,
#sobre-mi-preview .about-image img,
#recetario .recetario-banner > img {
  box-shadow: 0 24px 62px rgba(16, 58, 34, 0.12);
}

#topic-strip {
  isolation: isolate;
}

#planes .plans-grid {
  gap: clamp(20px, 2.4vw, 32px) !important;
}

#planes .plan-card {
  border-color: var(--polish-border) !important;
  box-shadow: var(--polish-shadow-card) !important;
  
}

#planes .plan-card:hover {
  transform: translateY(-3px);
  border-color: var(--polish-border-strong) !important;
  box-shadow: 0 22px 58px rgba(16, 58, 34, 0.11) !important;
}

#planes .plan-card.featured {
  box-shadow: 0 26px 76px rgba(176, 200, 89, 0.26) !important;
}

#planes .plan-card.featured:hover {
  transform: translateY(-4px);
}

#planes .accordion-btn:hover {
  border-color: rgba(23, 62, 42, 0.26) !important;
  background: rgba(255, 255, 255, 0.76) !important;
}

#planes .plans-close,
#opciones .plans-close {
  margin-top: clamp(68px, 7vw, 104px) !important;
}

#planes .plans-close .btn:hover,
#opciones .plans-close .btn:hover {
  transform: translateY(-2px) scale(1.01);
}

#planes .plan-top h3 {
  font-size: 36px !important;
}

.benefit-card,
.step,
.recipe-card {
  box-shadow: var(--polish-shadow-card);
  
}

.benefit-card:hover,
.step:hover,
.recipe-card:hover {
  transform: translateY(-2px);
  border-color: var(--polish-border-strong);
  box-shadow: 0 20px 54px rgba(16, 58, 34, 0.1);
}

.benefit-card {
  background: rgba(255, 255, 255, 0.54) !important;
}

.step {
  background: rgba(255, 255, 255, 0.68) !important;
}

.recipe-card:hover img {
  transform: scale(1.012);
}

#recetario .recetario-banner {
  box-shadow: 0 28px 80px rgba(45, 111, 164, 0.2);
}

#faq .faq-item:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(23, 62, 42, 0.16);
}

#cta-final {
  padding-block: clamp(118px, 13vw, 190px) !important;
}

#cta-final .container {
  max-width: 940px !important;
}

#cta-final .hero-actions {
  gap: 22px !important;
  margin-top: 36px !important;
}

#footer {
  padding-top: clamp(68px, 7vw, 100px) !important;
}

.footer-grid {
  gap: clamp(30px, 4vw, 58px) !important;
}

@media (max-width: 980px) {
  .header-inner {
    min-height: 74px !important;
  }

  #inicio .hero-grid,
  #propuesta .proposal-clean,
  #sobre-mi-preview .about-grid,
  #recetario .recetario-banner {
    gap: clamp(30px, 6vw, 52px) !important;
  }

  #planes .plan-card:hover,
  #planes .plan-card.featured:hover,
  .benefit-card:hover,
  .step:hover,
  .recipe-card:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 82px;
  }

  #inicio {
    padding-top: 56px !important;
    padding-bottom: 68px !important;
  }

  #inicio h1 {
    font-size: clamp(3rem, 14vw, 4rem) !important;
    line-height: 0.94 !important;
  }

  #inicio .hero-grid {
    gap: 42px !important;
  }

  #inicio .hero-photos {
    gap: 12px !important;
  }

  .section-head {
    margin-bottom: 34px !important;
  }

  .btn {
    min-height: 44px;
  }

  #topic-strip {
    padding-block: 82px !important;
    gap: 36px !important;
  }

  #cta-final {
    padding-block: 92px !important;
  }
}

/* ==============================
   PREMIUM MOTION SYSTEM
   ============================== */

.motion-ready {
  --motion-ease: cubic-bezier(.16, .75, .22, 1);
  --motion-ease-soft: cubic-bezier(.2, .68, .22, 1);
  --motion-duration: 760ms;
  --motion-short: 560ms;
}

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready 

.motion-ready [data-parallax] {
  overflow: hidden;
}

.motion-ready [data-parallax] img {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.04);
  
  
}

.motion-ready #inicio .hero-visual[data-parallax] {
  transform: translate3d(0, calc(var(--parallax-y, 0px) * .25), 0);
  
}

.motion-ready .plan-card,
.motion-ready .benefit-card,
.motion-ready .step,
.motion-ready .recipe-card,
.motion-ready .faq-item,
.motion-ready .recetario-banner,
.motion-ready .plans-close {
  transform-origin: center top;
}

.motion-ready .btn,
.motion-ready .nav-links a,
.motion-ready .plan-card,
.motion-ready .benefit-card,
.motion-ready .step,
.motion-ready .recipe-card,
.motion-ready .faq-item {
  transition:
    transform 260ms var(--motion-ease-soft),
    box-shadow 260ms ease,
    background-color 260ms ease,
    color 260ms ease,
    border-color 260ms ease;
}

@media (hover: hover) {
  .motion-ready .btn:hover {
    transform: translateY(-2px) scale(1.01);
  }

  .motion-ready .plan-card:hover,
  .motion-ready .benefit-card:hover,
  .motion-ready .step:hover,
  .motion-ready .recipe-card:hover,
  .motion-ready .faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 52px rgba(18, 55, 36, .11);
  }

  .motion-ready .nav-links a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
  }

  .motion-ready .nav-links a:hover {
    background-size: 100% 1px;
  }
}

.motion-ready .accordion-btn span,
.motion-ready .faq-q span {
  display: inline-flex;
  
}

.motion-ready .plan-card.open .accordion-btn span,
.motion-ready .faq-item.open .faq-q span {
  transform: rotate(180deg);
}

.motion-ready .bg-shape {
  translate: 0 var(--shape-scroll, 0px);
  
}

@media (min-width: 901px) {
  .motion-ready #proceso.motion-pinned {
    min-height: 118vh;
  }

  .motion-ready #proceso.motion-pinned > .container {
    position: sticky;
    top: 92px;
  }

  .motion-ready #proceso.motion-pinned .step {
    transition:
      transform 320ms var(--motion-ease-soft),
      box-shadow 320ms ease,
      border-color 320ms ease,
      opacity 320ms ease;
  }

  .motion-ready #proceso.motion-pinned .step:not(.is-active) {
    opacity: .82;
  }

  .motion-ready #proceso.motion-pinned .step.is-active {
    opacity: 1;
    transform: translateY(-6px);
    border-color: rgba(176, 200, 89, .55);
    box-shadow: 0 22px 48px rgba(18, 55, 36, .12);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready {
    scroll-behavior: auto;
  }

  .motion-ready [data-parallax] img,
  .motion-ready #inicio .hero-visual[data-parallax],
  .motion-ready .bg-shape {
    transform: none !important;
    translate: 0 0 !important;
  }

  .motion-ready #proceso.motion-pinned {
    min-height: auto;
  }

  .motion-ready #proceso.motion-pinned > .container {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    
  }
}



/* RESTORED ANIMATIONS */

/* 1. Background Shapes Absolute Parallax */
body {
  position: relative;
  background: var(--cream, #eef4da) !important;
  overflow-x: hidden;
}

#site-header,
main,
section,
footer,
.whatsapp-floating {
  position: relative;
}

main,
section,
footer {
  z-index: 1;
}

#site-header {
  z-index: 99;
}

.whatsapp-floating {
  z-index: 100;
}

.page-bg-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-shape {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  opacity: 0.82;
  will-change: transform;
}

.bg-shape--circle-a { width: clamp(106px, 10.6vw, 202px); top: 7%; left: -3.5%; opacity: 0.72; animation: bgFloatOne 10s ease-in-out infinite; }
.bg-shape--wave-a { width: clamp(229px, 22.9vw, 458px); top: 12.8%; right: -5%; animation: bgFloatTwo 12s ease-in-out infinite; }
.bg-shape--circle-b { width: clamp(66px, 5.3vw, 106px); top: 27%; right: 9%; animation: bgFloatThree 9s ease-in-out infinite; }
.bg-shape--blue-a { width: clamp(132px, 12.3vw, 246px); top: 34%; left: 5%; animation: bgFloatTwo 11s ease-in-out infinite; }
.bg-shape--green-a { width: clamp(132px, 11.4vw, 238px); top: 41%; right: -4%; animation: bgFloatOne 10s ease-in-out infinite; }
.bg-shape--circle-c { width: clamp(92px, 7.9vw, 150px); top: 47%; left: -1.5%; animation: bgFloatThree 13s ease-in-out infinite; }
.bg-shape--circle-d { width: clamp(97px, 8.8vw, 176px); top: 56%; right: 8%; animation: bgFloatOne 11s ease-in-out infinite; }
.bg-shape--blue-b { width: clamp(158px, 14.1vw, 282px); top: 63%; left: -1.5%; transform: rotate(-10deg); animation: bgFloatTwo 13s ease-in-out infinite; }
.bg-shape--wave-b { width: clamp(220px, 21.1vw, 440px); top: 76%; left: -7%; animation: bgFloatThree 12s ease-in-out infinite; }
.bg-shape--circle-e { width: clamp(84px, 7vw, 141px); top: 83%; right: 15%; animation: bgFloatOne 9s ease-in-out infinite; }
.bg-shape--green-b { width: clamp(114px, 10.6vw, 202px); top: 90%; right: 5%; animation: bgFloatTwo 11s ease-in-out infinite; }
.bg-shape--wave-c { width: clamp(209px, 19.8vw, 396px); top: 24%; left: -8%; opacity: 0.7; animation: bgFloatFour 14s ease-in-out infinite; }
.bg-shape--circle-f { width: clamp(84px, 7.7vw, 149px); top: 31%; right: -1.5%; opacity: 0.76; animation: bgFloatOne 10s ease-in-out infinite; }
.bg-shape--yellow-f { width: clamp(64px, 5.5vw, 106px); top: 50%; right: 1%; opacity: 0.78; animation: bgFloatThree 10s ease-in-out infinite; }
.bg-shape--blue-c { width: clamp(138px, 12.1vw, 242px); top: 69%; right: -3%; opacity: 0.72; animation: bgFloatTwo 12s ease-in-out infinite; }
.bg-shape--green-c { width: clamp(123px, 11vw, 226px); top: 72%; left: 7%; opacity: 0.74; animation: bgFloatFour 13s ease-in-out infinite; }
.bg-shape--circle-g { width: clamp(86px, 7.7vw, 143px); top: 94%; left: 12%; opacity: 0.7; animation: bgFloatOne 11s ease-in-out infinite; }

@keyframes bgFloatOne { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(15px, -20px, 0) rotate(3deg); } }
@keyframes bgFloatTwo { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 50% { transform: translate3d(-18px, 15px, 0) rotate(2deg); } }
@keyframes bgFloatThree { 0%, 100% { transform: translate3d(0, 0, 0) rotate(1deg); } 50% { transform: translate3d(20px, 15px, 0) rotate(-3deg); } }
@keyframes bgFloatFour { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); } 50% { transform: translate3d(-15px, -15px, 0) rotate(2deg); } }

.motion-ready .bg-shape {
  translate: 0 var(--shape-scroll, 0px);
  transition: opacity 260ms ease;
}

@media (max-width: 980px) {
  .bg-shape { opacity: 0.65; }
  .bg-shape--wave-a, .bg-shape--wave-b, .bg-shape--wave-c { width: 299px; }
  .bg-shape--circle-a { left: -55px; }
  .bg-shape--green-a, .bg-shape--blue-c { right: -70px; }
  .bg-shape--blue-b, .bg-shape--wave-c { left: -60px; }
}

@media (max-width: 640px) {
  .bg-shape { opacity: 0.42; }
  .bg-shape--circle-a, .bg-shape--circle-c, .bg-shape--blue-a, .bg-shape--circle-d, .bg-shape--green-b, .bg-shape--circle-f, .bg-shape--blue-c, .bg-shape--green-c, .bg-shape--circle-g { width: 106px; }
  .bg-shape--wave-a, .bg-shape--wave-b, .bg-shape--wave-c { width: 229px; }
  .bg-shape--circle-b, .bg-shape--circle-e, .bg-shape--yellow-f { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-shape { animation: none !important; }
  .motion-ready .bg-shape { transform: none !important; translate: 0 0 !important; }
}

/* 2. Marquee (Topic Strip) */
#topic-strip {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background: transparent;
  width: 100%;
}
.topic-strip__row {
  width: 100vw; /* full viewport width */
  overflow: hidden;
  display: flex;
  /* Fade edges */
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.topic-strip__track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
}
.topic-strip__row--left .topic-strip__track {
  animation: scroll-left 50s linear infinite;
}
.topic-strip__row--right .topic-strip__track {
  animation: scroll-right 60s linear infinite;
}
.topic-strip__set {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
  flex-wrap: nowrap !important;
}

/* Ensure the bubbles look right */
.topic-strip .bubble {
  padding: 12px 24px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0,0,0,0.1);
  white-space: nowrap;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (max-width: 768px) {
  #topic-strip { padding: 40px 0; gap: 20px; }
  .topic-strip__set { gap: 15px; padding-right: 15px; }
}


/* ==============================
   PREMIUM SYSTEM: LENIS, LOADER & INTERACTIONS
   ============================== */

/* 1. LENIS SMOOTH SCROLL */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* 2. PAGE LOADER */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--cream, #eef4da);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 200px;
}
.loader-counter {
  font-family: var(--font-display, sans-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--text, #173e2a);
}
.loader-bar {
  width: 100%;
  height: 2px;
  background: rgba(23, 62, 42, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.loader-progress {
  width: 0%;
  height: 100%;
  background: var(--text, #173e2a);
  transform-origin: left;
}

/* 3. GSAP INITIAL STATES (FOUC prevention) */
body.is-loading {
  overflow: hidden;
}
.word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 2px;
  margin-right: 0.25em;
  vertical-align: top;
}
.word-inner {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.title-lines .title-line {
  display: block;
}

/* 4. NAV LINKS HOVER PREMIUM */
.nav-links a.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.9em;
}
.nav-link:hover .nav-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* 5. PREMIUM BUTTON HOVERS */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease !important;
}
.btn:active {
  transform: scale(0.98) !important;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}
.btn:hover::before {
  left: 100%;
}

/* 6. FORM FOCUS ELEGANTE */
input, textarea, select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--polish-border-strong, #173e2a) !important;
  box-shadow: 0 4px 14px rgba(23, 62, 42, 0.08) !important;
  background-color: #fff !important;
}

/* 7. MICROINTERACTIONS (ICONS) */
.social-icon, .whatsapp-floating, .faq-item, .accordion-btn {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease !important;
}
.social-icon:hover, .whatsapp-floating:hover {
  transform: scale(1.04) translateY(-2px) !important;
}

/* 8. PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .nav-link::after, .btn::before, .nav-arrow {
    display: none !important;
  }
  .btn, .social-icon, .whatsapp-floating {
    transform: none !important;
    transition: none !important;
  }
}



/* ==============================
   FIX: STATIC FRAMES FOR PARALLAX
   ============================== */
/* Move border-radius and overflow hidden to wrappers so images can scale/parallax inside without breaking the rounded corners */

/* About Section Image Wrapper */
.about-image {
  overflow: hidden !important;
  border-radius: 240px 240px 28px 28px !important;
  /* Match the dimensions of the original image so the wrapper acts as a static window */
  height: 100% !important; min-height: 560px !important;
  width: 100% !important;
  position: relative !important;
  transform: none !important; /* Keep wrapper static */
}
.about-image img {
  border-radius: inherit !important; /* Ensure clipping works perfectly on Safari iOS */
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Proposal Section Image Wrapper */
.proposal-image {
  overflow: hidden !important;
  border-radius: 34px !important;
  height: 100% !important; min-height: 560px !important;
  width: 100% !important;
  position: relative !important;
  transform: none !important; /* Keep wrapper static */
}
.proposal-image img {
  border-radius: inherit !important; /* Ensure clipping works perfectly on Safari iOS */
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Hero Section Photos Wrappers */
.hero-photos .photo {
  overflow: hidden !important;
  border-radius: 28px !important;
  position: relative !important;
  transform: none !important; /* Keep wrapper static */
}
.hero-photos .photo.short {
  border-radius: 60px 60px 18px 18px !important;
}
.hero-photos .photo.tall {
  border-radius: 120px 120px 24px 24px !important;
}
.hero-photos .photo.wide {
  border-radius: 18px 18px 60px 60px !important;
}
.hero-photos .photo img {
  border-radius: inherit !important; /* Ensure clipping works perfectly on Safari iOS */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Recipe Cards Image Wrappers */
.recipe-card {
  overflow: hidden !important;
  border-radius: 26px !important;
}
.recipe-card img {
  border-radius: inherit !important; /* Ensure clipping works perfectly on Safari iOS */
}

/* Responsive adjustments for the wrappers */
@media (max-width: 980px) {
  .about-image {
    min-height: 0 !important;
    height: clamp(240px, 55vw, 340px) !important;
  }
  .proposal-image {
    min-height: 0 !important;
    height: clamp(220px, 50vw, 300px) !important;
  }
}


.loader-logo {
  width: 140px;
  margin-bottom: 8px;
  animation: loaderPulse 1.5s infinite alternate ease-in-out;
}
@keyframes loaderPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.05); opacity: 1; }
}

/* === Planes: 4 cards por fila con mejor ancho util === */
#planes .container {
  max-width: none !important;
  padding-left: clamp(28px, 4vw, 72px) !important;
  padding-right: clamp(28px, 4vw, 72px) !important;
}

#planes .section-head {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#planes .plans-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 1.8vw, 28px) !important;
  width: min(94vw, 1500px) !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: stretch !important;
}

#planes .plan-card,
#planes .plan-card.open {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 540px !important;
  padding: clamp(24px, 2.2vw, 34px) !important;
  text-align: left !important;
  border-radius: 26px !important;
}

#planes .plan-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  min-height: 0 !important;
  margin: 0 0 28px !important;
  text-align: left !important;
}

#planes .plan-card .badge {
  position: static !important;
  align-self: flex-start !important;
  margin: 0 0 22px !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

#planes .plan-top h3,
#planes .plan-card h3 {
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  font-family: "Playfair Display", serif !important;
  font-size: clamp(34px, 2.85vw, 48px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.055em !important;
  text-align: left !important;
  text-wrap: balance;
}

#planes .plan-card .plan-title-long {
  font-size: clamp(29px, 2.35vw, 39px) !important;
  line-height: 0.96 !important;
}

#planes .plan-top p,
#planes .plan-card p {
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 24px 0 0 !important;
  text-align: left !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

#planes .plan-card > .btn {
  width: 100% !important;
  justify-content: center !important;
  margin: auto 0 18px !important;
  min-height: 46px !important;
}

#planes .plan-card .accordion-btn {
  width: 100% !important;
  margin: 0 !important;
  min-height: 48px !important;
}

#planes .plan-card.open .panel {
  margin-top: 26px !important;
}

@media (max-width: 1100px) {
  #planes .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(92vw, 900px) !important;
  }

  #planes .plan-card,
  #planes .plan-card.open {
    min-height: 500px !important;
  }

  #planes .plan-top h3,
  #planes .plan-card h3 {
    font-size: clamp(44px, 6vw, 64px) !important;
  }

  #planes .plan-card .plan-title-long {
    font-size: clamp(38px, 5vw, 54px) !important;
  }
}

@media (max-width: 640px) {
  #planes .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #planes .plans-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #planes .plan-card,
  #planes .plan-card.open {
    min-height: 0 !important;
  }

  #planes .plan-top h3,
  #planes .plan-card h3 {
    font-size: clamp(48px, 14vw, 68px) !important;
  }

  #planes .plan-card .plan-title-long {
    font-size: clamp(40px, 11vw, 56px) !important;
  }
}

/* Nav hover: keep a single clean underline. */
#site-header .nav-links a,
#site-header .nav-links a:hover,
#site-header .nav-links a:focus,
#site-header .nav-links a:focus-visible,
#site-header .nav-link,
#site-header .nav-link:hover,
#site-header .nav-link:focus,
#site-header .nav-link:focus-visible,
.mobile-menu a,
.mobile-menu a:hover,
.mobile-menu a:focus,
.mobile-menu a:focus-visible {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#site-header .nav-link::after,
#site-header .nav-links a.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: -2px;
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.75;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

#site-header .nav-link:hover::after,
#site-header .nav-link:focus-visible::after,
#site-header .nav-links a.nav-link:hover::after,
#site-header .nav-links a.nav-link:focus-visible::after {
  width: 100%;
  transform: scaleX(1);
}

/* Home plans: large 4-card layout matching the reference. */
#planes .plans-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(28px, 2vw, 38px) !important;
  width: min(88vw, 1780px) !important;
  max-width: 1780px !important;
}

#planes .plan-card,
#planes .plan-card.open {
  min-height: clamp(660px, 43vw, 880px) !important;
  padding: clamp(44px, 3vw, 58px) clamp(38px, 3vw, 52px) !important;
  border-radius: 34px !important;
}

#planes .plan-card.featured {
  transform: none !important;
}

#planes .plan-card .badge {
  margin-bottom: clamp(30px, 2.6vw, 46px) !important;
}

#planes .plan-top {
  justify-content: flex-start !important;
}

#planes .plan-top h3,
#planes .plan-card h3 {
  font-size: clamp(44px, 3vw, 58px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.055em !important;
}

#planes .plan-card .plan-title-long {
  font-size: clamp(32px, 2.25vw, 44px) !important;
  line-height: 0.92 !important;
}

#planes .plan-top p,
#planes .plan-card p {
  margin-top: clamp(92px, 8vw, 160px) !important;
  font-size: clamp(17px, 1.05vw, 20px) !important;
  line-height: 1.68 !important;
}

#planes .plan-card > .btn {
  width: min(100%, 220px) !important;
  min-height: 66px !important;
  margin: auto 0 22px !important;
  padding-inline: 28px !important;
}

#planes .plan-card.featured > .btn {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}

#planes .plan-card .accordion-btn {
  width: min(100%, 220px) !important;
  min-height: 64px !important;
  padding-inline: 24px !important;
  border-radius: 18px !important;
}

@media (max-width: 1100px) {
  #planes .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(92vw, 940px) !important;
  }

  #planes .plan-card,
  #planes .plan-card.open {
    min-height: 620px !important;
  }
}

@media (max-width: 640px) {
  #planes .plans-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #planes .plan-card,
  #planes .plan-card.open {
    min-height: 0 !important;
  }

  #planes .plan-top p,
  #planes .plan-card p {
    margin-top: 52px !important;
  }
}

/* Corrección de clipping en WebKit/Safari para imágenes con transformación/parallax */
.about-image,
.proposal-image,
.hero-photos .photo,
.visual-card,
.recipe-card,
.recipe-hero,
.content-block,
.photo {
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  mask-image: radial-gradient(white, black) !important;
  isolation: isolate !important;
}

.about-image img,
.proposal-image img,
.hero-photos .photo img,
.visual-card img,
.recipe-card img,
.recipe-hero img,
.content-block img,
.photo img {
  border-radius: inherit !important;
}