/* =========================================================
   ERNATZEN — Nutrición clínica y oncológica
   Sistema de diseño: eucalipto / salvia / arcilla / arena / marfil / carbón
   Tipografía: Fraunces (serif editorial) + Work Sans (sans humanista)
   Fuentes auto-alojadas (variables, subset latin) — sin dependencia externa.
   ========================================================= */

@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('../assets/fonts/fraunces.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:400 600;
  font-display:swap; src:url('../assets/fonts/fraunces-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../assets/fonts/work-sans.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --eucalipto:      #365E57;
  --eucalipto-700:  #2A4A44;
  --eucalipto-900:  #1F3733;
  --salvia:         #9CAF9C;
  --salvia-100:     #E7EEE6;
  --arcilla:        #C9826B;
  --arcilla-700:    #A8674E; /* uso en texto/CTA sólido: pasa AA con blanco */
  --arena:          #E8DED0;
  --marfil:         #F7F4EE;
  --carbon:         #303735;
  --blanco:         #FFFFFF;

  --serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans: "Work Sans", "Segoe UI", system-ui, sans-serif;

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 6px;

  --ease: cubic-bezier(.22,.61,.36,1);       /* entradas — ease-out */
  --ease-hover: cubic-bezier(.4,0,.2,1);     /* microinteracciones — ease-in-out */
  --dur: .5s;

  --header-h: 100px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  background: var(--marfil);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, button, select{ font-family: inherit; font-size: 1rem; }
h1,h2,h3,h4,p,figure{ margin:0; }

.skip-link{
  position:absolute; left:1rem; top:-60px;
  background: var(--eucalipto); color:#fff; padding:.75rem 1.25rem;
  border-radius: var(--radius); z-index: 1000; transition: top .2s var(--ease);
}
.skip-link:focus{ top: 1rem; }

:focus-visible{ outline: 2.5px solid var(--arcilla-700); outline-offset: 3px; }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arcilla-700);
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--arcilla-700);
}

h1{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--eucalipto-900);
}
h2{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.12;
  color: var(--eucalipto-900);
}
h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.25;
  color: var(--eucalipto-900);
}
em, i.accent{
  font-family: var(--serif);
  font-style: italic;
  color: var(--arcilla-700);
}
.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--carbon);
  max-width: 46ch;
}
.lede--light{ color: #4E5854; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight: 600; font-size: .98rem;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease-hover), background .2s var(--ease-hover), box-shadow .2s var(--ease-hover), color .2s var(--ease-hover);
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; transition: transform .2s var(--ease-hover); }
.btn:hover svg{ transform: translateX(3px); }
.btn:hover{ transform: translateY(-2px) scale(1.015); }
.btn:active{ transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.btn--primary{ background: var(--eucalipto); color: var(--blanco); }
.btn--primary:hover{ background: var(--eucalipto-700); box-shadow: 0 10px 24px -10px rgba(54,94,87,.55); }

.btn--clay{ background: var(--arcilla-700); color: var(--blanco); }
.btn--clay:hover{ background: #935A43; box-shadow: 0 10px 24px -10px rgba(168,103,78,.5); }

.btn--outline{ background: transparent; border-color: var(--eucalipto); color: var(--eucalipto); }
.btn--outline:hover{ background: var(--eucalipto); color: #fff; }

.btn--whatsapp{ background: #25D366; color: #fff; }
.btn--whatsapp:hover{ background: #1EBD5A; box-shadow: 0 10px 24px -10px rgba(37,211,102,.55); }
.btn--whatsapp svg{ width:18px; height:18px; }

/* ---------- Placeholder / editable markers ---------- */
.editable{
  position: relative;
  border: 1.5px dashed rgba(54,94,87,.4);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  background: rgba(255,255,255,.35);
}
/* ---------- Header ---------- */
.site-header{
  position: fixed; inset-block-start:0; inset-inline:0; z-index: 500;
  height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(247,244,238,0);
  transition: background .3s var(--ease-hover), box-shadow .3s var(--ease-hover), height .3s var(--ease-hover);
}
.site-header.is-scrolled{
  background: rgba(247,244,238,.92);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(48,55,53,.08);
  height: 72px;
}
.site-header__inner{
  width:100%; max-width: 1400px;
  display:flex; align-items:center; justify-content:space-between; gap: 1rem;
}
.brand-logo{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo img{ height: 72px; width:auto; transition: height .3s var(--ease); }
.site-header.is-scrolled .brand-logo img{ height: 56px; }

.main-nav{ display:flex; align-items:center; gap: 1.35rem; }
.main-nav a{
  font-size: .9rem; font-weight: 500; color: var(--eucalipto-900);
  position: relative; padding: .3rem 0; white-space: nowrap;
}
.main-nav a{ transition: color .2s var(--ease-hover); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--arcilla-700); transition: right .25s var(--ease-hover);
}
.main-nav a:hover::after, .main-nav a.is-active::after{ right:0; }
.main-nav a.is-active{ color: var(--arcilla-700); }

.header-actions{ display:flex; align-items:center; gap: 1rem; flex-shrink:0; }
.header-actions .btn--primary.header-cta{ padding: .75rem 1.35rem; font-size: .88rem; white-space: nowrap; }
.nav-toggle{
  display:none; background:none; border:none; padding:.5rem;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:24px; height:2px; background: var(--eucalipto-900); border-radius:2px; }

@media (max-width: 1400px){
  .main-nav{
    position: fixed; inset: 72px 0 0 0; height: calc(100vh - 72px);
    background: var(--marfil); flex-direction:column; justify-content:flex-start;
    padding: 2.5rem var(--gutter); gap: 1.6rem;
    transform: translateX(100%); transition: transform .4s var(--ease);
    overflow-y:auto;
  }
  .main-nav[data-open="true"]{ transform: translateX(0); }
  .main-nav a{ font-size: 1.25rem; }
  .nav-toggle{ display:flex; }
  .header-actions .btn--primary.header-cta{ display:none; }
  .main-nav .nav-cta{ margin-top: 1rem; }
}
@media (min-width: 1401px){
  .main-nav .nav-cta{ display:none; }
}

/* ---------- Decorative arc motifs ---------- */
.sunrise-shape{
  position:absolute; pointer-events:none; z-index:0;
}
.sunrise-shape svg{ width:100%; height:100%; display:block; }

/* Separador SVG: el trazo se dibuja progresivamente al entrar en el viewport */
.section-seam{
  position:relative; z-index:3; pointer-events:none;
  height: clamp(40px, 6vw, 64px);
  margin-block: -1px;
}
.seam-arc{ display:block; width:100%; height:100%; overflow:visible; }
.seam-arc path{
  fill:none; stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.section-seam--sunrise .seam-arc path{ stroke: var(--eucalipto); opacity:.4; }
.section-seam--clay .seam-arc path{ stroke: var(--arcilla-700); opacity:.45; }

/* Transiciones de tono entre secciones con fondos distintos */
.metodo::after{
  content:""; position:absolute; inset:0 0 auto 0; height: 160px; z-index:0;
  background: linear-gradient(to bottom, rgba(247,244,238,.5), rgba(247,244,238,0));
}
.historia::before{
  content:""; position:absolute; inset:0 0 auto 0; height: 130px; z-index:0;
  background: linear-gradient(to bottom, rgba(31,55,51,.16), rgba(31,55,51,0));
}
.planes::before{
  content:""; position:absolute; inset:0 0 auto 0; height: 110px; z-index:0;
  background: linear-gradient(to bottom, rgba(232,222,208,.55), rgba(232,222,208,0));
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding-block-start: calc(var(--header-h) + 3.5rem);
  padding-block-end: 6rem;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(201,130,107,.16), transparent 55%),
    linear-gradient(175deg, var(--arena) 0%, var(--marfil) 46%);
}
.hero__dawn-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: var(--arena);
  animation: dawn-fade 1.15s var(--ease) forwards;
}
@keyframes dawn-fade{ from{ opacity:1; } to{ opacity:0; } }

.hero__grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 5rem);
  align-items:center; position:relative; z-index:2;
}
@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; gap: 3rem; }
}

@keyframes hero-rise{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform:none; } }
.hero-anim{ opacity:0; animation: hero-rise .65s var(--ease) forwards; }
.hero-anim--eyebrow{ animation-delay: .05s; }
.hero-anim--title{ animation-delay: .2s; }
.hero-anim--lede{ animation-delay: .38s; }
.hero-anim--cta{ animation-delay: .54s; }
.hero-anim--portrait{ animation-delay: .32s; }
.hero-anim--bio{ animation-delay: .78s; }

.hero__eyebrow{ margin-bottom: 1.4rem; }
.hero__title{ margin-bottom: 1.5rem; }
.hero__title .sun-underline{ position:relative; white-space:nowrap; }
.hero__lede{ margin-bottom: 2.2rem; }
.hero__cta-row{ display:flex; align-items:center; gap: 1.5rem; flex-wrap:wrap; }
.hero__credential{ font-size: .88rem; color: #55625D; }
.hero__credential strong{ color: var(--eucalipto-900); }

.hero__portrait{ position: relative; }
.portrait-frame{
  position: relative;
  width: min(420px, 88%);
  margin-inline: auto;
  aspect-ratio: 1/1;
}
.portrait-frame__arc{
  position:absolute; inset:-14px; z-index:1; color: var(--eucalipto);
  overflow: visible;
}
.portrait-frame__arc path{
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: arc-draw 1s var(--ease) .5s forwards;
}
@keyframes arc-draw{ to{ stroke-dashoffset: 0; } }

@keyframes photo-reveal{ from{ opacity:0; transform: scale(.93); } to{ opacity:1; transform:none; } }
.portrait-frame__photo{
  position:relative; z-index:2;
  width:100%; height:100%; border-radius: 50%;
  overflow:hidden;
  background: linear-gradient(155deg, var(--salvia-100), var(--arena));
  display:flex; align-items:center; justify-content:center;
  border: 6px solid var(--marfil);
  box-shadow: 0 30px 60px -25px rgba(31,55,51,.4);
  opacity:0;
  animation: photo-reveal .75s var(--ease) .45s forwards;
}
.portrait-frame__photo img{ width:100%; height:100%; object-fit:cover; }
.portrait-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; padding: 1.5rem; color: var(--eucalipto-700);
}
.portrait-placeholder svg{ width:44px; height:44px; opacity:.65; }
.portrait-placeholder strong{ font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }
.portrait-placeholder span{ font-size:.76rem; color:#5A6864; }
.portrait-sun{
  position:absolute; z-index:3; bottom:8%; right:2%;
  width: 20%; aspect-ratio:2/1; background: var(--arcilla);
  border-radius: 999px 999px 0 0;
  box-shadow: 0 10px 24px -8px rgba(201,130,107,.6);
  opacity:0;
  animation: sunrise-rise 1.1s var(--ease) .75s forwards;
}
@keyframes sunrise-rise{
  from{ opacity:0; transform: translateY(80%); }
  to{ opacity:1; transform: translateY(0); }
}

.hero__bio{
  margin-top: 1.8rem;
  display:flex; gap: .9rem;
}
.hero__bio .quote-mark{ font-family: var(--serif); font-size: 2.4rem; color: var(--arcilla); line-height:.6; }
.hero__bio p{ font-size: .96rem; color:#454F4B; line-height:1.6; }

/* ---------- Sección Ayuda ---------- */
.ayuda{ position:relative; padding-block: 7rem 6rem; background: var(--marfil); }
.ayuda__head{ max-width: 640px; margin-bottom: 4rem; }
.ayuda__head h2{ margin-block: .9rem 1.1rem; }

.ayuda__blocks{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 0; border-top: 1px solid rgba(54,94,87,.15);
}
.ayuda__block{
  padding: 3rem clamp(1rem, 3vw, 3rem) 3rem 0;
  position:relative;
}
.ayuda__block + .ayuda__block{
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid rgba(54,94,87,.15);
}
.ayuda__block-mark{
  width: 46px; height: 23px; margin-bottom: 1.6rem;
  border-radius: 999px 999px 0 0;
}
.ayuda__block--salud .ayuda__block-mark{ background: var(--eucalipto); }
.ayuda__block--onco .ayuda__block-mark{ background: var(--arcilla); }
.ayuda__block h3{ margin-bottom: .5rem; }
.ayuda__block .block-kicker{ font-size:.85rem; color:#5A6864; margin-bottom: 1.6rem; display:block; }
.ayuda__block .block-kicker--lg{
  font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight:500; color: var(--eucalipto-900); margin-bottom: .5rem;
}

.ayuda__list{ display:flex; flex-direction:column; }
.ayuda__list li{
  position:relative;
  padding: .95rem 0 .95rem 2rem;
  border-bottom: 1px solid rgba(48,55,53,.09);
  font-size: 1.02rem;
  color: var(--carbon);
}
.ayuda__list li::before{
  content:"";
  position:absolute; left:0; top: 1.15rem;
  width:9px; height:9px; border-radius: 999px 999px 0 0;
}
.ayuda__block--salud .ayuda__list li::before{ background: var(--eucalipto); }
.ayuda__block--onco .ayuda__list li::before{ background: var(--arcilla); }
.ayuda__list li:last-child{ border-bottom:none; }

@media (max-width: 800px){
  .ayuda__blocks{ grid-template-columns: 1fr; }
  .ayuda__block + .ayuda__block{ border-left:none; border-top: 1px solid rgba(54,94,87,.15); padding-left:0; padding-top: 3rem; }
}

/* ---------- Método / Timeline ---------- */
.metodo{ position:relative; padding-block: 6.5rem 7rem; background: var(--eucalipto-900); color: var(--marfil); overflow:hidden; }
.metodo::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(90% 70% at 12% 0%, rgba(156,175,156,.14), transparent 60%);
}
.metodo__head{ position:relative; z-index:1; text-align:center; max-width: 640px; margin-inline:auto; margin-bottom: 4.5rem; }
.metodo__head .eyebrow{ color: var(--arcilla); justify-content:center; }
.metodo__head .eyebrow::before{ background: var(--arcilla); }
.metodo__head h2{ color: var(--marfil); margin-block: .9rem 0; }
.metodo__head h2 em{ color: var(--arcilla); }

.timeline{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.timeline__step p a{
  display:inline-flex; align-items:center; gap:.3em;
  color: var(--eucalipto-900); background: var(--arcilla);
  font-weight:700; text-decoration:none;
  padding: .18em .7em; border-radius:999px;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.4);
  transition: background .2s var(--ease-hover), transform .2s var(--ease-hover), box-shadow .2s var(--ease-hover);
}
.timeline__step p a::after{
  content:"→"; font-weight:700; transition: transform .2s var(--ease-hover);
}
.timeline__step p a:hover{
  background: var(--salvia-100); transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.5);
}
.timeline__step p a:hover::after{ transform: translateX(2px); }
.timeline__step{ position:relative; text-align:center; padding-top: 2.5rem; }
.timeline__step::before{
  content:""; position:absolute; top:24px; left:50%; right:-50%;
  height:0; border-top: 2px dashed rgba(247,244,238,.35);
  transform-origin: left; transform: scaleX(0);
  transition: transform .6s var(--ease);
}
.timeline__step:last-child::before{ display:none; }
.timeline__num{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:600; font-size:1.15rem;
  margin:0 auto 1.4rem; position:relative; z-index:2;
  color: var(--eucalipto-900);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.4);
  opacity:0; transform: scale(.55);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.timeline__step:nth-child(odd) .timeline__num{ background: var(--arcilla); }
.timeline__step:nth-child(even) .timeline__num{ background: var(--salvia); }
.timeline__step h3{
  color: var(--marfil); font-size: 1.2rem; margin-bottom:.6rem;
  opacity:0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.timeline__step p{
  font-size:.92rem; color: rgba(247,244,238,.75); line-height:1.55;
  opacity:0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* Delays escalonados: cada paso se anima después del anterior */
.timeline.is-visible .timeline__step:nth-child(1) .timeline__num{ transition-delay: .05s; }
.timeline.is-visible .timeline__step:nth-child(1) h3{ transition-delay: .2s; }
.timeline.is-visible .timeline__step:nth-child(1) p{ transition-delay: .28s; }
.timeline.is-visible .timeline__step:nth-child(1)::before{ transition-delay: .35s; }

.timeline.is-visible .timeline__step:nth-child(2) .timeline__num{ transition-delay: .6s; }
.timeline.is-visible .timeline__step:nth-child(2) h3{ transition-delay: .75s; }
.timeline.is-visible .timeline__step:nth-child(2) p{ transition-delay: .83s; }
.timeline.is-visible .timeline__step:nth-child(2)::before{ transition-delay: .9s; }

.timeline.is-visible .timeline__step:nth-child(3) .timeline__num{ transition-delay: 1.15s; }
.timeline.is-visible .timeline__step:nth-child(3) h3{ transition-delay: 1.3s; }
.timeline.is-visible .timeline__step:nth-child(3) p{ transition-delay: 1.38s; }
.timeline.is-visible .timeline__step:nth-child(3)::before{ transition-delay: 1.45s; }

.timeline.is-visible .timeline__step:nth-child(4) .timeline__num{ transition-delay: 1.7s; }
.timeline.is-visible .timeline__step:nth-child(4) h3{ transition-delay: 1.85s; }
.timeline.is-visible .timeline__step:nth-child(4) p{ transition-delay: 1.93s; }
.timeline.is-visible .timeline__step:nth-child(4)::before{ transition-delay: 2s; }

.timeline.is-visible .timeline__step:nth-child(5) .timeline__num{ transition-delay: 2.25s; }
.timeline.is-visible .timeline__step:nth-child(5) h3{ transition-delay: 2.4s; }
.timeline.is-visible .timeline__step:nth-child(5) p{ transition-delay: 2.48s; }

.timeline.is-visible .timeline__num{ opacity:1; transform:none; }
.timeline.is-visible .timeline__step h3,
.timeline.is-visible .timeline__step p{ opacity:1; transform:none; }
.timeline.is-visible .timeline__step::before{ transform: scaleX(1); }

@media (max-width: 820px){
  .timeline{ grid-template-columns: 1fr; gap: 2.6rem; max-width:340px; margin-inline:auto; }
  .timeline__step{ padding-top:0; padding-left: 3.2rem; text-align:left; }
  .timeline__num{ position:absolute; left:0; top:0; margin:0; }
  .timeline__step::before{
    top:0; left:23px; right:auto; bottom:-2.6rem; width:0; height:auto;
    border-top:none; border-left: 2px dashed rgba(247,244,238,.35);
    transform-origin: top; transform: scaleY(0);
  }
  .timeline.is-visible .timeline__step::before{ transform: scaleY(1); }
}

/* ---------- Historia ---------- */
.historia{ position:relative; padding-block: 7rem; background: var(--arena); overflow:hidden; }
.historia__grid{ position:relative; z-index:1; display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width: 900px){
  .historia__grid{ grid-template-columns: 1fr; gap: 2.5rem; }
}
.historia__mark{ position:relative; }
.historia__mark .arc-big{ width: 100%; max-width:280px; height:auto; }
.historia__anchor{
  font-family: var(--serif); font-style:italic; font-size: clamp(1.3rem,2vw,1.7rem);
  color: var(--eucalipto-900); margin-block: 1.4rem 0; max-width: 20ch;
}
.historia__body h2{ margin-bottom: 1.6rem; }
.historia__body .lede{ max-width:none; }
.historia__body p + p{ margin-top: 1.1rem; }
.historia__subtitle{ margin-block: 2.4rem 1.1rem; }

/* ---------- Planes ---------- */
.planes{ position:relative; padding-block: 7rem; background: var(--marfil); }
.planes__head{ position:relative; z-index:1; text-align:center; max-width: 620px; margin-inline:auto; margin-bottom: 4rem; }
.planes__head .eyebrow{ justify-content:center; }
.planes__head h2{ margin-block: .9rem 1rem; }

.planes__grid{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items:stretch; }
.plan-card{
  display:flex; flex-direction:column;
  background:#fff; border-radius: 18px;
  padding: 2.4rem 2rem;
  border: 1px solid rgba(54,94,87,.12);
  box-shadow: 0 20px 45px -30px rgba(48,55,53,.35);
  transition: transform .2s var(--ease-hover), box-shadow .2s var(--ease-hover);
}
.plan-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 55px -25px rgba(48,55,53,.28); }
.plan-card--featured{ background: var(--eucalipto-900); color: var(--marfil); border-color:transparent; }
.plan-card--featured .plan-card__desc,
.plan-card--featured .plan-item{ color: rgba(247,244,238,.8); }
.plan-card--featured h3{ color: var(--marfil); }
.plan-card__badge{
  align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--arcilla-700); background: #F3E2D9;
  padding:.3rem .7rem; border-radius:999px; margin-bottom:1.1rem;
}
.plan-card--featured .plan-card__badge{ background: var(--arcilla); color:#fff; }
.plan-card__desc{ font-size:.92rem; color:#5A6864; margin-block: .6rem 1.6rem; }
.plan-card__price{
  font-family: var(--serif); font-size: 2rem; margin-bottom: .3rem; color: var(--eucalipto-900);
}
.plan-card--featured .plan-card__price{ color: var(--marfil); }
.plan-card__price .unit{ font-family: var(--sans); font-size:.85rem; font-weight:500; color:#6B7672; }
.plan-card--featured .plan-card__price .unit{ color: rgba(247,244,238,.65); }
.plan-items{ display:flex; flex-direction:column; gap:.7rem; margin-bottom: 2rem; flex:1; }
.plan-item{ display:flex; gap:.6rem; font-size:.92rem; color:#454F4B; align-items:flex-start; }
.plan-item svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; color: var(--arcilla-700); }
.plan-card--featured .plan-item svg{ color: var(--arcilla); }
.plan-card .btn{ justify-content:center; }

@media (max-width: 920px){
  .planes__grid{ grid-template-columns: 1fr; max-width: 440px; margin-inline:auto; }
}

/* ---------- FAQ ---------- */
.faq{ position:relative; padding-block: 7rem; background: var(--marfil); }
.faq__head{ max-width: 640px; margin-bottom: 3.5rem; }
.faq__head h2{ margin-block: .9rem 0; }

.faq__list{ max-width: 820px; margin-inline:auto; display:flex; flex-direction:column; gap: .9rem; }
.faq-item{
  background:#fff; border-radius: 14px;
  border: 1px solid rgba(54,94,87,.12);
  padding: .3rem 1.5rem;
  transition: box-shadow .2s var(--ease-hover), border-color .2s var(--ease-hover);
}
.faq-item[open]{ box-shadow: 0 16px 34px -24px rgba(48,55,53,.35); border-color: rgba(54,94,87,.22); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.2rem 0;
  font-family: var(--serif); font-size: 1.08rem; font-weight:500;
  color: var(--eucalipto-900);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex-shrink:0; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--sans); font-size:1.2rem; font-weight:400; line-height:1;
  color: var(--arcilla-700); background: #F3E2D9;
  transition: transform .25s var(--ease-hover);
}
.faq-item[open] summary::after{ content:"–"; transform: rotate(180deg); }
.faq-item p{ font-size: .96rem; color:#4E5854; line-height:1.65; padding-block: 0 1.3rem; max-width: 68ch; }

/* ---------- Contacto ---------- */
.contacto{ position:relative; padding-block: 7rem; background: var(--arena); overflow:hidden; }
.contacto__grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); }
.contacto__head h2{ margin-block:.9rem 1.2rem; }
.contacto__list{ display:flex; flex-direction:column; gap: 1.5rem; margin-block: 2rem 2.2rem; }
.contacto__item{ display:flex; gap: 1rem; align-items:flex-start; }
.contacto__item .icon{
  width:42px; height:42px; border-radius:50%; background: var(--eucalipto);
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contacto__item .icon svg{ width:18px; height:18px; }
.contacto__item strong{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:#5A6864; margin-bottom:.15rem; }
.contacto__item a, .contacto__item span{ font-size:1.02rem; color: var(--eucalipto-900); font-weight:500; }
.contacto__map{ border-radius: 16px; overflow:hidden; border: 1px solid rgba(54,94,87,.15); box-shadow: 0 20px 40px -28px rgba(48,55,53,.4); }
.contacto__map iframe{ width:100%; height: 260px; border:0; display:block; }
.contacto__map-placeholder{
  height: 260px; padding: 1.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  background: linear-gradient(150deg, var(--salvia-100), var(--arena));
  color: var(--eucalipto-700);
}
.contacto__map-placeholder[hidden]{ display:none; }
.contacto__map-placeholder svg{ width:32px; height:32px; opacity:.7; }
.contacto__map-placeholder p{ font-size:.9rem; color:#4E5854; max-width:32ch; }
.contacto__map-placeholder-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center; }
.contacto__map-placeholder-actions a{ font-size:.85rem; font-weight:600; color: var(--eucalipto-700); text-decoration:underline; }
.contacto__map-placeholder-actions .btn{ padding:.6rem 1.2rem; font-size:.85rem; }

/* ---------- Aviso de cookies ---------- */
.cookie-banner{
  position: fixed; left:0; right:0; bottom:0; z-index: 800;
  background: var(--eucalipto-900);
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,.35);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner__inner{
  max-width: var(--container); margin-inline:auto; padding: 1.2rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.cookie-banner__inner p{ flex:1 1 380px; font-size:.86rem; line-height:1.55; color: rgba(247,244,238,.88); margin:0; }
.cookie-banner__inner p a{ color: var(--arcilla); text-decoration:underline; }
.cookie-banner__actions{ display:flex; gap:.8rem; flex-shrink:0; }
.cookie-banner__actions .btn{ padding:.7rem 1.3rem; font-size:.85rem; }
.cookie-banner__actions .btn--outline{ border-color: rgba(247,244,238,.5); color: var(--marfil); }
.cookie-banner__actions .btn--outline:hover{ background: rgba(247,244,238,.12); color:#fff; }

@media (max-width: 640px){
  .cookie-banner__inner{ flex-direction:column; align-items:stretch; text-align:center; gap:.9rem; padding-block:.9rem; }
  .cookie-banner__inner p{ font-size:.78rem; flex-basis:auto; }
  .cookie-banner__actions{ justify-content:center; }
  .cookie-banner__actions .btn{ flex:1; justify-content:center; padding:.65rem 1rem; }
}

.whatsapp-note{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.88rem; font-weight:600; color: #128C4A;
  background: #E4F7EC; border-radius:999px;
  padding:.55rem 1rem; margin-top: 1.1rem;
}
.whatsapp-note svg{ width:18px; height:18px; flex-shrink:0; }

.contact-form{
  background:#fff; border-radius: 18px; padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid rgba(54,94,87,.12); box-shadow: 0 24px 50px -30px rgba(48,55,53,.35);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field{ margin-bottom: 1.2rem; display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.85rem; font-weight:600; color: var(--eucalipto-900); }
.field input, .field textarea{
  border: 1.5px solid rgba(54,94,87,.22); border-radius: 10px;
  padding: .8rem .95rem; background: var(--marfil); color: var(--carbon);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color: var(--eucalipto); box-shadow: 0 0 0 3px rgba(54,94,87,.13); outline:none; }
.field textarea{ resize: vertical; min-height: 120px; }
.form-consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:#5A6864; margin-bottom: 1.4rem; }
.form-consent a{ text-decoration:underline; color: var(--eucalipto-700); }
.form-note{ font-size:.76rem; color:#8B948F; margin-top:.9rem; }
.form-status{ margin-top:1rem; font-size:.9rem; font-weight:600; color: var(--eucalipto-700); display:none; }
.form-status.is-visible{ display:block; }
.form-status.form-status--error{ color: var(--arcilla-700); }

@media (max-width: 920px){ .contacto__grid{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .form-row{ grid-template-columns:1fr; } }

/* ---------- Blog ---------- */
.blog{ padding-block: 7rem; background: var(--marfil); }
.blog__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom: 3.5rem; flex-wrap:wrap; }
.blog__head h2{ margin-block:.9rem 0; }
.blog__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
.blog-card{ display:flex; flex-direction:column; transition: transform .2s var(--ease-hover); }
.blog-card:hover{ transform: translateY(-5px); }
.blog-card__media{
  aspect-ratio: 4/3; border-radius:16px; overflow:hidden; margin-bottom: 1.2rem;
  background: linear-gradient(150deg, var(--salvia-100), var(--arena));
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow: 0 0 0 rgba(48,55,53,0);
  transition: box-shadow .2s var(--ease-hover);
}
.blog-card:hover .blog-card__media{ box-shadow: 0 16px 32px -18px rgba(48,55,53,.4); }
.blog-card__media svg{ width:34px; height:34px; color: var(--eucalipto); opacity:.55; }
.blog-card__tag{ position:absolute; top:12px; left:12px; background:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--arcilla-700); padding:.3rem .65rem; border-radius:999px; }
.blog-card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.blog-card p{ font-size:.92rem; color:#5A6864; margin-bottom:1rem; }
.blog-card__link{ font-size:.86rem; font-weight:600; color: var(--eucalipto-700); display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; }
.blog-card__link svg{ width:14px; height:14px; transition: transform .2s var(--ease-hover); }
.blog-card:hover .blog-card__link svg{ transform: translateX(3px); }

@media (max-width: 900px){ .blog__grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }

/* ---------- Footer ---------- */
.site-footer{ background: var(--eucalipto-900); color: var(--marfil); padding-block: 4.5rem 2rem; }
.footer__grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer__brand .footer-logo-card{
  display:inline-block; background: var(--marfil); border-radius: 10px;
  padding: .7rem 1rem; margin-bottom: 1.3rem;
}
.footer__brand img{ height:30px; display:block; }
.footer__brand p{ font-size:.88rem; color: rgba(247,244,238,.68); max-width: 30ch; }
.footer h4{ font-family: var(--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--salvia); margin-bottom:1.1rem; font-weight:700; }
.footer ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer a{ font-size:.9rem; color: rgba(247,244,238,.82); }
.footer a:hover{ color:#fff; }
.footer__social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer__social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(247,244,238,.3); display:flex; align-items:center; justify-content:center; }
.footer__social svg{ width:16px; height:16px; }
.footer__bottom{ border-top:1px solid rgba(247,244,238,.15); padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.8rem; color: rgba(247,244,238,.55); }
.footer__bottom a{ color: rgba(247,244,238,.7); }

@media (max-width: 800px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .footer__grid{ grid-template-columns: 1fr; }
}

/* ---------- Scroll reveal ---------- */
/* Dirección de entrada configurable por sección vía data-reveal="left|right|scale|fade" */
[data-reveal]{
  opacity:0; transform: translateY(22px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform: translateX(-30px); }
[data-reveal="right"]{ transform: translateX(30px); }
[data-reveal="scale"]{ transform: translateY(16px) scale(.97); }

.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:100%;
  background: var(--arcilla-700);
  transform: scaleX(0); transform-origin: left;
  z-index: 700; pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .btn:hover, .plan-card:hover, .blog-card:hover{ transform:none; }
  .hero-anim, .portrait-sun, .portrait-frame__photo{ animation-delay:0s !important; }
  .timeline__num, .timeline__step h3, .timeline__step p, .timeline__step::before,
  .seam-arc path{ transition-delay:0s !important; }
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

section{ scroll-margin-top: 90px; }