/* Maia Schvartzman | Nutriendo desde cero — estilos */
:root{
  color-scheme: light;
  --avena:#F7F4EC;      /* fondo general */
  --avena-2:#EFEAE0;    /* superficies */
  --salvia-claro:#D8E1CE; /* fondo de sección intermedia */
  --salvia:#A9BBA0;     /* arco, acentos suaves */
  --hoja:#4F6B52;       /* textos secundarios, iconos */
  --bosque:#22352A;     /* texto principal y sección oscura */
  --manteca:#F1DC86;    /* botones y marcador */
  --rosa:#E9B8C8;       /* marcador secundario */
  --blanco:#FBFCF8;
  --radio-s:10px; --radio-m:18px;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(76px + env(safe-area-inset-top,0px)); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--avena); color:var(--bosque); font-family:var(--sans); font-size:1.0625rem; line-height:1.6}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display); line-height:1.05; margin:0; letter-spacing:-.02em; font-weight:700}
p{margin:0}
:focus-visible{outline:3px solid var(--hoja); outline-offset:3px; border-radius:6px}
.wrap{width:min(1180px, 100% - 2.5rem); margin-inline:auto}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:1rem; top:-4rem; background:var(--bosque); color:var(--blanco); padding:.6rem 1rem; border-radius:var(--radio-s); z-index:100}
.skip:focus{top:1rem}

/* ---------- Botones ---------- */
.btn{white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.75rem 1.4rem; border-radius:999px; font-weight:600; font-size:1rem; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background-color .15s ease}
.btn:active{transform:scale(.97)}
.btn-main{background:var(--manteca); color:var(--bosque)}
.btn-main:hover{background:#EBD26C}
.btn-ghost{border-color:var(--bosque); color:var(--bosque); background:transparent}
.btn-ghost:hover{background:var(--avena-2)}

/* ---------- Menú ---------- */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(247,244,236,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:51; background:rgba(247,244,236,.9); backdrop-filter:blur(10px)}
.nav.scrolled{border-color:rgba(34,53,42,.12)}
.nav-in{display:flex; align-items:center; gap:1.5rem; height:72px}
.brand{white-space:nowrap; display:flex; align-items:center; gap:.55rem; text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; margin-right:auto}
.brand-logo{width:38px; height:38px; flex:none; border-radius:10px}
.nav-links{display:flex; gap:1.75rem; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; font-weight:500; color:var(--hoja); padding:.4rem 0}
.nav-links a:hover{color:var(--bosque)}
.nav .btn{min-height:42px; padding:.55rem 1.1rem}
.menu-btn{display:none; width:44px; height:44px; border:0; background:transparent; border-radius:var(--radio-s); cursor:pointer; color:var(--bosque)}
.menu-btn svg{width:26px; height:26px}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate}
.hero-palabra{position:absolute; z-index:-1; left:0; right:0; top:-.3vw; text-align:center; font-family:var(--display); font-weight:800; font-size:15vw; line-height:.82; letter-spacing:-.04em; color:var(--manteca); white-space:nowrap; pointer-events:none; user-select:none}
.hero-palabra span{display:block}
.hero-grid{position:relative; display:grid; min-height:0; grid-template-columns:minmax(0,1fr) minmax(360px, 620px) minmax(0,1fr); grid-template-rows:auto; grid-template-areas:"intro copy lema"; column-gap:2rem; padding:calc(var(--palabra-alto, 30vw) + 1.5rem) 0 4.5rem}
.hero-copy{grid-area:copy; position:relative; z-index:2; text-align:center; align-self:end}
.hero h1{font-size:clamp(3rem, 5.6vw, 5.2rem); font-weight:800; letter-spacing:-.04em; line-height:.95; text-wrap:balance; text-shadow:0 0 24px var(--avena), 0 0 48px var(--avena), 0 0 8px var(--avena)}
.mark{position:relative; white-space:nowrap; display:inline-block}
.mark svg{position:absolute; left:-4%; bottom:-.1em; width:108%; height:.42em; z-index:-1; overflow:visible}
.mark path{fill:none; stroke:var(--manteca); stroke-width:14; stroke-linecap:round}
.hero-ctas{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem}
.glass{background:rgba(251,252,248,.88); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(255,255,255,.7); border-radius:var(--radio-m); box-shadow:0 10px 30px -12px rgba(34,53,42,.25)}
.hero-creds{grid-area:intro; position:relative; z-index:2; display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; align-self:end; justify-self:start; padding:0; margin-left:calc(7.5vw - (100vw - min(1180px, 100vw - 2.5rem)) / 2)}
.cred{display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem 1rem 1rem; width:auto; min-width:250px}
.cred img{width:52px; height:52px; flex:none}
.cred .escudo{object-fit:contain}
.cred-foto img{border-radius:14px; object-fit:cover}
.cred b{display:block; font-family:var(--display); font-weight:800; font-size:1.25rem; line-height:1.1; letter-spacing:-.02em; color:var(--bosque); white-space:nowrap}
.cred span{display:block; margin-top:.25rem; font-size:.9rem; font-weight:500; line-height:1.3; color:var(--hoja)}
.cred:nth-child(2){margin-left:clamp(2rem, 3.5vw, 3.8rem)}
.cred .logo-unlp, .solo-desk{display:none !important}
.hero-agenda{grid-area:lema; position:relative; z-index:2; align-self:end; justify-self:end; margin-right:calc((100vw + min(1180px, 100vw - 2.5rem)) / 2 - 90vw); padding:1.3rem 1.4rem; max-width:260px}
.agenda-estado{display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; line-height:1.1}
.agenda-punto{position:relative; width:12px; height:12px; border-radius:50%; background:#2FBF62; flex:none}
.agenda-punto::after{content:""; position:absolute; inset:0; border-radius:50%; background:inherit}
.agenda-texto{margin-top:.5rem; font-size:.95rem; color:var(--hoja); line-height:1.45}
.agenda-btn{margin-top:1rem; min-height:44px; padding:.55rem 1rem; font-size:.92rem; background:#25D366; color:#0B3D22; gap:.5rem}
.agenda-btn:hover{background:#1EBE5A}
.agenda-btn svg{width:18px; height:18px}
.hero-agenda.completa .agenda-punto{background:#E0A52E}
@media (prefers-reduced-motion: no-preference){
  .hero-agenda:not(.completa) .agenda-punto::after{animation:latido 2s ease-out infinite}
}
@keyframes latido{0%{transform:scale(1); opacity:.7} 100%{transform:scale(2.8); opacity:0}}

/* ---------- Secciones ---------- */
.sec{padding:clamp(4rem, 9vw, 7rem) 0}
.sec-head{max-width:640px; margin-bottom:clamp(2rem, 5vw, 3.5rem)}
.sec-head h2{font-size:clamp(2.1rem, 4.4vw, 3.4rem)}
.sec-head p{margin-top:1rem; color:var(--hoja); font-size:1.125rem; max-width:52ch}
.sec-head.centrado{margin-inline:auto; text-align:center}
.sec-head.centrado p{margin-inline:auto}
/* Curvas entre secciones: retoman el arco del hero */
:root{--hero-tarjetas:clamp(11rem, 26vh, 18rem); --panel-r:36px; --panel-m:clamp(.6rem, 1.6vw, 1.25rem)}
/* Paneles redondeados: secciones de color como bloques con esquinas suaves */
.panel{margin-inline:var(--panel-m); border-radius:var(--panel-r)}

/* Consultas: interruptor presencial / online */
.modo-switch{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:6px; border-radius:999px; background:var(--blanco); border:1.5px solid rgba(34,53,42,.15); margin-bottom:clamp(1.8rem, 4vw, 2.8rem)}
.modo-switch button{all:unset; position:relative; z-index:1; cursor:pointer; padding:.85rem 1.8rem; min-width:9.5rem; text-align:center; font-family:var(--display); font-weight:700; font-size:1.15rem; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:.5rem; color:var(--hoja); transition:color .3s}
.modo-switch button svg{width:20px; height:20px}
.modo-switch button[aria-selected="true"]{color:var(--bosque)}
.modo-switch button:focus-visible{outline:3px solid var(--bosque); outline-offset:2px}
.modo-thumb{position:absolute; top:6px; bottom:6px; left:6px; width:calc(50% - 6px); border-radius:999px; background:var(--manteca); transition:transform .45s cubic-bezier(.65,0,.35,1)}
.modo[data-modo="online"] .modo-thumb{transform:translateX(100%)}
.modo-panel{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center}
.modo-panel[hidden]{display:none}
.modo-panel.modo-solo{grid-template-columns:1fr}
.modo-panel.entra{animation:aparece .5s cubic-bezier(.2,.8,.2,1)}
.modo-texto h3{font-size:clamp(2rem, 3.6vw, 2.8rem)}
.modo-texto > p{margin-top:1rem; color:var(--hoja); font-size:1.1rem; max-width:40ch}
.modo-texto address{font-style:normal; margin-top:1.4rem; display:flex; gap:.9rem; align-items:center}
.modo-texto address img{height:46px; width:auto}
.modo-texto address span{font-weight:600; line-height:1.4}
.modo-lista{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.65rem}
.modo-lista li{display:flex; gap:.7rem; align-items:flex-start}
.modo-lista li::before{content:""; flex:none; width:22px; height:22px; margin-top:.1em; border-radius:50%; background:var(--salvia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322352A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.modo-texto .link-sec{display:inline-block; margin-top:1.2rem}

/* Mapa real (Google Maps) */
.mapa{position:relative; margin:0; aspect-ratio:1; max-width:540px; width:100%; justify-self:center; border-radius:28px; overflow:hidden; background:var(--salvia-claro); border:1px solid rgba(34,53,42,.12); box-shadow:0 30px 60px -32px rgba(34,53,42,.55)}
.mapa iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.75) contrast(1.02)}
.mapa-fallback{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; color:var(--hoja); font-weight:600; text-decoration:none; background:repeating-linear-gradient(0deg, transparent 0 27px, rgba(79,107,82,.12) 27px 28px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(79,107,82,.12) 27px 28px), var(--salvia-claro)}
.mapa-fallback svg{width:40px; height:40px; color:var(--bosque)}
.mapa-tag{position:absolute; left:14px; right:14px; bottom:14px; display:flex; align-items:center; gap:.8rem; padding:.7rem .7rem .7rem .9rem; background:rgba(251,252,248,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:18px; box-shadow:0 12px 30px -12px rgba(34,53,42,.5)}
.mapa-tag img{height:36px; width:auto}
.mapa-tag > span{flex:1; font-weight:700; line-height:1.25; font-size:.95rem}
.mapa-tag small{display:block; font-weight:500; color:var(--hoja); font-size:.85rem}
.mapa-tag a{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--manteca); color:var(--bosque); flex:none; transition:transform .2s}
.mapa-tag a:hover{transform:scale(1.08)}
.mapa-tag a svg{width:20px; height:20px}
.modo-acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem}
.modo-acciones .btn svg{width:20px; height:20px}
.btn-wa{background:#25D366; color:#0B3D22}
.btn-wa:hover{background:#1EBE5A}

/* Sobre mí */
.sobre{background:var(--bosque); color:var(--avena); position:relative; z-index:2; overflow:hidden}
.sobre-grid{display:grid; grid-template-columns:1fr 1fr; min-height:560px}
.sobre-texto{padding:clamp(3.5rem, 8vw, 6.5rem) 0; padding-right:2rem; position:relative; z-index:2; align-self:center}
.sobre h2{font-size:clamp(2.1rem, 4vw, 3.2rem); font-weight:500; max-width:15ch}
.sobre h2 strong{font-weight:800; display:block}
.sobre-texto p{margin-top:1.6rem; max-width:48ch; color:rgba(237,240,229,.86); font-size:1.08rem; line-height:1.7}
.sobre-texto p b{color:var(--avena); font-weight:600}
.sobre-texto p.sobre-saludo{font-family:var(--display); font-weight:700; font-size:1.35rem; color:var(--blanco); margin-top:1.4rem}
.sobre-firma{margin-top:1.8rem; padding-top:1rem; border-top:1px solid rgba(237,240,229,.25); display:inline-block; font-size:.92rem; color:rgba(237,240,229,.72)}
.sobre-foto{position:absolute; top:0; right:0; bottom:0; width:50%}
.sobre-foto img{width:100%; height:100%; object-fit:cover; object-position:50% 62%;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 38%); mask-image:linear-gradient(to right, transparent 0%, #000 38%)}

/* Cómo trabajo */
.cita{font-family:var(--display); font-size:clamp(1.5rem, 3vw, 2.2rem); font-weight:500; line-height:1.2; max-width:24ch; margin-bottom:3rem; color:var(--hoja)}
.cita b{color:var(--bosque); font-weight:700}
.como{background:var(--salvia-claro); margin-top:var(--panel-m); position:relative}
.como .cita{margin-inline:auto; text-align:center}
.pasos{list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 350px)); justify-content:center; gap:1.6rem}
.paso{position:relative; width:100%; aspect-ratio:.64; border-radius:999px; overflow:hidden; background:var(--bosque); color:var(--blanco); display:flex; flex-direction:column; align-items:center; text-align:center; isolation:isolate}
.paso img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.paso::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(22,36,28,.82) 0%, rgba(22,36,28,.55) 34%, rgba(22,36,28,.08) 62%, rgba(22,36,28,.35) 100%)}
.paso:hover img{transform:scale(1.06)}
.paso-info{display:flex; flex-direction:column; align-items:center; padding:24% 13% 0}
.paso-badge{display:inline-flex; align-items:center; gap:.5rem; background:var(--blanco); color:var(--bosque); border-radius:999px; padding:.3rem .35rem .3rem .9rem; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem}
.paso-num{display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 .4rem; border-radius:999px; background:var(--manteca); color:var(--bosque); font-family:var(--display); font-weight:800; font-size:.9rem; letter-spacing:0}
.paso-titulo{display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.45rem, 2.2vw, 1.85rem); line-height:1.1; letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.35)}
.paso-desc{display:block; margin-top:.7rem; font-size:.98rem; line-height:1.45; color:rgba(251,252,248,.92); text-shadow:0 1px 10px rgba(0,0,0,.4)}

@keyframes aparece{from{opacity:.25; transform:translateY(8px)} to{opacity:1; transform:none}}

/* Turnos y redes */
.contacto{position:relative; overflow:hidden; isolation:isolate; text-align:center; color:var(--avena); border-radius:var(--panel-r); padding:clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 6vw, 5rem);
  background:radial-gradient(circle at 82% 12%, rgba(241,220,134,.22), transparent 38%), radial-gradient(circle at 10% 90%, rgba(169,187,160,.35), transparent 42%), linear-gradient(135deg, #4F6B52 0%, #3A5240 55%, #2B3F30 100%);
  box-shadow:0 40px 80px -40px rgba(34,53,42,.6)}
.contacto-kicker{display:inline-flex; align-items:center; gap:.8rem; font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,240,229,.7)}
.contacto-kicker::before{content:""; width:34px; height:1px; background:currentColor}
.contacto h2{margin:1.1rem auto 0; max-width:24ch; font-size:clamp(1.7rem, 3.4vw, 2.6rem); font-weight:700; line-height:1.15; color:var(--blanco)}
.contacto-sub{margin:1rem auto 0; max-width:48ch; color:rgba(237,240,229,.78)}
.contacto-redes{display:grid; grid-template-columns:repeat(5, 1fr); gap:1rem; max-width:1060px; margin:clamp(2rem, 5vw, 3rem) auto 0}
.cred-red{--c:255,255,255; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem; min-height:128px; padding:1.4rem 1rem; border-radius:20px; text-decoration:none; color:#fff; font-weight:700; font-size:1rem;
  background:rgba(var(--c), .22); border:1px solid rgba(var(--c), .55);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s, box-shadow .3s}
.cred-red svg{width:34px; height:34px; transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cred-red:hover{transform:translateY(-5px); background:rgba(var(--c), .42); box-shadow:0 18px 40px -18px rgba(var(--c), .8)}
.cred-red:hover svg{transform:scale(1.12)}
.cred-red:focus-visible{outline:3px solid var(--manteca); outline-offset:3px}
.red-wa{--c:37,211,102}
.red-ig{--c:225,48,108}
.red-tt{--c:17,17,17}
.red-li{--c:10,102,194}
.red-mail{--c:241,220,134}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem, 5vw, 4rem)}
.faq details{border-bottom:1px solid rgba(34,53,42,.2)}
.faq details:first-child{border-top:1px solid rgba(34,53,42,.2)}
.faq summary{list-style:none; cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0; font-family:var(--display); font-weight:700; font-size:1.25rem; position:relative; line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:.4rem; top:50%; width:14px; height:14px; border-right:2px solid var(--bosque); border-bottom:2px solid var(--bosque); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 2rem 1.4rem 0; color:var(--hoja); max-width:60ch}
.faq-resp{overflow:hidden}
.faq summary::after{transition:transform .35s cubic-bezier(.4,0,.2,1)}

/* WhatsApp flotante */
.wa-flotante{position:fixed; z-index:60; right:max(1.1rem, env(safe-area-inset-right,0px)); bottom:calc(1.1rem + env(safe-area-inset-bottom,0px)); width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(34,53,42,.55); opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1)}
.wa-flotante.visible{opacity:1; transform:none; pointer-events:auto}
.wa-flotante svg{width:30px; height:30px}
.wa-flotante:focus-visible{outline:3px solid var(--bosque); outline-offset:3px}

/* Rendimiento: los fondos decorativos se pintan una sola vez en su propia capa */
.contacto{contain:paint}
.footer{contain:paint}

/* Footer */
.footer{position:relative; overflow:hidden; background:var(--bosque); color:var(--avena); padding:clamp(3.5rem, 7vw, 5.5rem) 0 1.6rem; border-radius:var(--panel-r) var(--panel-r) 0 0; margin-top:clamp(1rem, 3vw, 2rem)}
.footer-top{position:relative; display:grid; grid-template-columns:1.5fr .8fr 1fr; gap:clamp(2rem, 5vw, 4rem)}
.footer .brand{color:var(--avena); font-size:1.4rem}
.footer .brand-logo{width:44px; height:44px; border-radius:12px}
.footer-datos{margin-top:1rem; color:rgb(237, 240, 229); font-size:.92rem}
.footer-col h2{font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--salvia); margin-bottom:1rem}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.25rem}
.footer-col ul a{color:var(--avena); text-decoration:none; padding:.3rem 0; display:inline-block; transition:color .2s, transform .2s}
.footer-col ul a:hover{color:var(--manteca); transform:translateX(4px)}
.footer-col address{font-style:normal; color:rgba(237,240,229,.8); line-height:1.6; font-size:.98rem}
.footer-redes{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.3rem}
.footer-redes a{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid rgba(237,240,229,.25); color:var(--avena); transition:background-color .2s, color .2s, border-color .2s, transform .2s}
.footer-redes a svg{width:20px; height:20px}
.footer-redes a:hover{background:var(--manteca); border-color:var(--manteca); color:var(--bosque); transform:translateY(-3px)}
.footer a:focus-visible{outline:2px solid var(--manteca); outline-offset:3px}
.credito{color:rgba(237,240,229,.7); text-decoration:none}
.credito b{color:var(--avena); font-weight:600}
.credito:hover b{color:var(--manteca)}
.footer-bajo{position:relative; margin-top:1.4rem; padding:1.1rem 80px 0 0; border-top:1px solid rgba(237,240,229,.15); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; font-size:.85rem; color:rgba(237,240,229,.6)}

/* ---------- Aparición al scrollear ---------- */
.js .reveal{opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0ms)}
.js .reveal.solo-fade{transform:none}
.js .reveal.visible{opacity:1; transform:none}

/* ---------- Animación de entrada del hero ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .hero-palabra{animation:fade 1s ease both}
  .js   .js .mark path{stroke-dasharray:400; stroke-dashoffset:400; animation:trazo .7s .9s ease-out forwards}
  .js .hero-creds, .js .hero-agenda{animation:fade .6s .7s ease both}
}
@keyframes crece{from{transform:translateX(-50%) scale(.82); opacity:0} to{transform:translateX(-50%); opacity:1}}
@keyframes sube{from{transform:translateY(30px); opacity:0} to{transform:none; opacity:1}}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}

/* ---------- Rendimiento en pantallas táctiles ---------- */
@media (max-width: 1000px), (hover: none){
  .nav, body::before{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(247,244,236,.97)}
  .contacto, .paso{transform:translateZ(0)}
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .pasos{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem}
  .paso-desc{font-size:.9rem}
  .hero-grid{min-height:0; grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"copy" "intro"; row-gap:1.8rem; padding:calc(var(--palabra-alto, 26vw) + 2rem) 0 3rem}
  .hero-palabra{top:1rem}
  .hero-copy{margin-top:0}
  .hero-creds{grid-area:intro; display:flex; justify-content:center; align-items:stretch; align-self:start; justify-self:stretch; gap:.6rem; padding:0; margin:0; z-index:3; flex-direction:row}
  .hero-creds .cred{flex:0 1 auto; min-width:0; max-width:49%; margin:0; padding:.65rem .8rem .65rem .65rem; gap:.6rem; border-radius:16px}
  .hero-creds .cred img{width:40px; height:40px}
  .hero-creds .cred-foto img{border-radius:11px}
  .hero-creds .cred b{font-size:.9rem; color:var(--bosque); line-height:1.15; white-space:nowrap}
  .hero-creds .cred span{font-size:.74rem; margin-top:.15rem}
  .hero-agenda{display:none}
}
@media (max-width: 820px){
  .nav-links{display:none}
  .menu-btn{display:inline-grid; place-items:center}
  .nav-links.abierto{display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:72px; background:var(--avena); border-bottom:1px solid rgba(34,53,42,.12); padding:.5rem 1.25rem 1rem}
  .nav-links.abierto a{display:block; padding:.85rem 0; font-size:1.1rem; color:var(--bosque)}
  .modo-panel, .faq-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-marca{grid-column:1 / -1}
  .contacto-redes{grid-template-columns:1fr 1fr}
  .contacto-redes > :first-child{grid-column:1 / -1}
  .modo-switch{display:grid; width:100%}
  .modo-switch button{min-width:0; padding:.8rem 1rem}
  .sobre-grid{grid-template-columns:1fr; min-height:0}
  .sobre-foto{position:relative; width:auto; height:400px}
  .sobre-foto img{-webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%); mask-image:linear-gradient(to bottom, #000 55%, transparent 100%)}
  .sobre{display:flex; flex-direction:column-reverse}
  .sobre-texto{padding:0 0 4rem; margin-top:-3rem}
  :root{--panel-r:24px}
  .pasos{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:.8rem; margin-inline:-1.25rem; padding:.8rem 1.25rem 1rem; scrollbar-width:none}
  .pasos::-webkit-scrollbar{display:none}
  .pasos > li{flex:0 0 min(74%, 290px); scroll-snap-align:start; scroll-snap-stop:always; width:auto}
  .pasos{scroll-padding-inline:1.25rem; justify-content:flex-start; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
  .paso-desc{font-size:.95rem}
}
@media (max-width: 380px){
  .hero-creds .cred{padding:.55rem .6rem .55rem .55rem; gap:.45rem}
  .hero-creds .cred b{font-size:.8rem}
  .hero-creds .cred span{font-size:.68rem}
  .hero-creds .cred img{width:34px; height:34px}
}
@media (max-width: 560px){
  .footer-top{grid-template-columns:1fr}
  .footer-bajo{flex-direction:column; padding-right:76px}
  .contacto{margin-inline:calc(var(--panel-m) - 1.25rem)}
  .cred-red{min-height:110px}
  .nav-in{gap:.6rem}
  .nav .btn{padding:.5rem .9rem; font-size:.92rem}
  .brand{font-size:.98rem; line-height:1.05}
  .brand .br{display:block}
  .brand svg{width:26px; height:26px}
}