/* Ajustes de contraste (WCAG AA): el rosa del botón y el texto atenuado pasan a tonos algo más oscuros que los tokens de marca */
:root{--accent-primary:#B5506B;--text-muted:#6f6a68}
/* Cristal esmerilado: una sola receta para cabecera, tarjetas sobre foto y pies de foto */
:root{--glass-bg:rgba(255,255,255,.58);--glass-line:rgba(255,255,255,.65);--glass-blur:blur(22px) saturate(1.6);--glass-shadow:0 8px 32px rgba(30,20,15,.10)}
.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass-bg:rgba(255,255,255,.94)}}
@media (prefers-reduced-transparency:reduce){:root{--glass-bg:rgba(255,255,255,.96)}.glass{-webkit-backdrop-filter:none;backdrop-filter:none}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body-m);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.label{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0}
.lead{font-family:var(--font-sans);font-weight:300;font-size:17px;line-height:1.65;color:var(--text-secondary);margin:0;text-wrap:pretty}

/* Titular "línea ligera / línea en negrita" */
.pair{font-family:var(--font-serif);line-height:1.15;letter-spacing:-.01em;margin:0;text-wrap:balance}
.pair span{display:block}
.pair span:first-child{font-weight:400}
.pair span:last-child{font-weight:700}

/* Botones */
.btn{display:inline-block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:15px;padding:12px 24px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.btn--s{padding:8px 16px;font-size:13.5px}
.btn--primary{background:rgba(160,62,90,.9);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);color:var(--text-inverse);border-color:rgba(255,255,255,.4);box-shadow:0 6px 20px rgba(120,40,65,.22),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--primary:hover{background:rgba(148,54,80,.96)}
.btn--outline{background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);color:var(--text-primary);border-color:rgba(30,30,30,.2);box-shadow:0 6px 20px rgba(30,20,15,.10),inset 0 1px 0 rgba(255,255,255,.7)}
.btn--outline:hover{background:rgba(255,255,255,.7)}

/* Cabecera flotante */
.header{position:sticky;top:16px;z-index:20;height:0;padding:0 clamp(12px,3vw,40px)}
.header__bar{max-width:1200px;margin:0 auto;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);border-radius:999px;box-shadow:var(--glass-shadow);padding:10px 10px 10px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.header__logo{font-family:var(--font-display);font-size:26px;white-space:nowrap}
.header__actions{display:flex;align-items:center;gap:8px}
.header__toggle{display:none;width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative;color:var(--text-primary)}
.header__toggle span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform var(--duration-normal) var(--ease-standard),top var(--duration-normal) var(--ease-standard)}
.header__toggle span:first-child{top:16px}
.header__toggle span:last-child{top:23px}
.header__toggle[aria-expanded="true"] span:first-child{top:19.5px;transform:rotate(45deg)}
.header__toggle[aria-expanded="true"] span:last-child{top:19.5px;transform:rotate(-45deg)}
.header__toggle:hover{background:var(--surface-sunken)}
/* Menú móvil y tableta: panel de cristal bajo la cabecera (no ocupa la pantalla) */
.header__bar{position:relative;z-index:2}
.header__toggle[aria-expanded="true"]:hover{background:transparent}
.header__social{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--text-secondary);transition:color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.header__social:hover{color:var(--text-brand);background:rgba(255,255,255,.55)}
.header__menu{position:absolute;z-index:1;top:68px;right:clamp(12px,3vw,40px);width:min(340px,calc(100% - 2 * clamp(12px,3vw,40px)));padding:6px 24px 8px;border-radius:28px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);animation:menu-in .3s var(--ease-standard)}
.header__menu[hidden]{display:none}
.header__menu>a{display:block;font-family:var(--font-serif);font-size:22px;line-height:1.2;color:var(--text-primary);padding:15px 0;border-bottom:1px solid var(--border-default);transition:color var(--duration-fast) var(--ease-standard)}
.header__menu>a:hover,.header__menu a[aria-current="page"]{color:var(--text-brand)}
.header__menu>a:last-child{border-bottom:0}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.header__menu{background:var(--surface-page)}}
@media (prefers-reduced-transparency:reduce){.header__menu{background:var(--surface-page);-webkit-backdrop-filter:none;backdrop-filter:none}}
.header__nav{display:flex;gap:clamp(16px,2.4vw,36px);white-space:nowrap}
.header__nav a{font-family:var(--font-sans);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);transition:color var(--duration-fast) var(--ease-standard)}
.header__nav a:hover,.header__nav a[aria-current="page"]{color:var(--text-brand)}

/* Hero: foto a sangre con velo, como en Design */
.hero{position:relative;min-height:min(92vh,820px);display:flex;align-items:center;padding:120px 0 72px}
.hero__photo{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;background:var(--surface-sunken)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.55) 40%,rgba(255,255,255,0) 65%);pointer-events:none}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero__body{max-width:560px;display:grid;gap:22px}
.hero__body .label{color:var(--text-brand)}
.hero__title{font-size:clamp(32px,4vw,52px)}
.hero__body .lead{color:var(--text-primary)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* Secciones */
.section{padding:clamp(64px,9vw,120px) 0;scroll-margin-top:72px}
.section--sand{background:var(--surface-sunken)}
.section__head{display:grid;gap:16px;max-width:720px;margin-bottom:clamp(32px,5vw,56px)}
.section__head .label,.about__body .label{color:var(--text-brand)}
.section__title{font-size:clamp(28px,3.5vw,40px)}

.statement{padding:clamp(72px,10vw,128px) 0;background:var(--surface-card)}
.statement .wrap{max-width:900px;text-align:center;display:grid;gap:24px}
.statement__text{font-family:var(--font-serif);font-style:italic;font-size:clamp(24px,3.4vw,38px);line-height:1.3;margin:0;text-wrap:balance}
.statement__sign{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-brand);margin:0}

/* Pasos: tres fotos de la experiencia con una palabra cada una */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.step{display:grid;gap:8px;align-content:start}
.step__photo{margin:0 0 12px;aspect-ratio:4/5;border-radius:var(--radius-l);overflow:hidden;background:var(--surface-sunken)}
.step__photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-standard)}
.step h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin:0;transition:font-weight 1.1s var(--ease-standard),color 1.1s var(--ease-standard)}
.step p{font-family:var(--font-sans);font-weight:300;font-size:16px;line-height:1.65;color:var(--text-secondary);margin:0}
@media (hover:hover){.step:hover h3{font-weight:600;color:var(--text-brand)}.step:hover .step__photo img{transform:scale(1.035)}}
.where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(16px,3vw,48px);margin-top:clamp(40px,6vw,72px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--border-default)}
.where .label{color:var(--text-brand)}
.where__text{font-family:var(--font-sans);font-weight:300;font-size:17px;line-height:1.65;color:var(--text-secondary);margin:0;max-width:560px;text-wrap:pretty}

.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:center}
.about__photo{position:relative;margin:0;border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/5;background:var(--surface-sunken)}
.about__cap{position:absolute;left:14px;bottom:14px;padding:0;border-radius:var(--radius-m);font-family:var(--font-sans);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.3);box-shadow:none;transition:background var(--duration-fast) var(--ease-standard)}
.about__cap a{display:grid;gap:1px;padding:10px 16px}
@media (hover:hover){.about__cap:hover{background:rgba(255,255,255,.28)}}
.about__cap strong{font-weight:500;font-size:14px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.about__cap span{font-size:12px;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.js .about__cap{opacity:var(--p,0)}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.about__body{display:grid;gap:20px}
.brand{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:1.06em;color:var(--text-brand);white-space:nowrap}

/* Máquina de escribir en la etiqueta del hero: letra a letra, con cursor fino que se apaga al terminar */
.js [data-type]:not(.is-typed){visibility:hidden}
.js [data-type] .ch{opacity:0}
.js [data-type] .ch.on{opacity:1}
.js [data-type] .ch.cur::after{content:"";display:inline-block;width:1px;height:.95em;margin-left:1px;vertical-align:-.12em;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.js [data-type]:not(.is-typed){visibility:visible}.js [data-type] .ch{opacity:1}}

/* Páginas sueltas (gracias, legales) y pie */
.page{padding-top:clamp(120px,14vw,168px);min-height:70vh}
.page__in{display:grid;gap:20px;justify-items:start;max-width:720px}
.page__in .label{color:var(--text-brand)}
.page__in--text{gap:12px}
.page__in--text h2{font-family:var(--font-serif);font-weight:600;font-size:20px;margin:20px 0 0}
.page__in--text p{font-family:var(--font-sans);font-weight:300;font-size:16px;line-height:1.7;color:var(--text-secondary);margin:0;max-width:62ch}
.page__in--text a{text-decoration:underline;text-underline-offset:2px}
.footer{border-top:1px solid var(--border-default);padding:28px 0;font-family:var(--font-sans);font-size:13px;color:var(--text-muted)}
.footer__in{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.footer p{margin:0}
.footer a:hover{color:var(--text-brand)}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}

/* Lista de email */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lista .wrap{max-width:720px;display:grid;gap:20px;justify-items:center;text-align:center}
.lista .label{color:var(--text-brand)}
.lista .lead{max-width:520px}
.form{display:grid;gap:14px;width:100%;max-width:520px;margin-top:8px}
.form__row{display:flex;gap:10px}
.form input[type=email]{flex:1;min-width:0;min-height:48px;padding:12px 22px;border:1px solid var(--border-default);border-radius:var(--radius-pill);background:#fff;font:inherit;font-family:var(--font-sans);font-size:16px;color:var(--text-primary)}
.form input[type=email]::placeholder{color:var(--text-muted)}
.form .btn{white-space:nowrap}
.consent{display:flex;gap:10px;align-items:flex-start;text-align:left;font-family:var(--font-sans);font-size:13.5px;line-height:1.5;color:var(--text-secondary)}
.consent input{margin-top:3px;accent-color:var(--accent-primary);flex:none}
.consent a{text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px}
.form__msg{margin:0;min-height:1.5em;font-family:var(--font-sans);font-size:14px;color:var(--text-secondary)}
.form__msg.is-error{color:#9b2c2c}
.form__msg.is-ok{color:var(--text-brand)}
.form[hidden],.form__done[hidden]{display:none}
.form__done{display:grid;gap:10px;justify-items:center;max-width:460px;margin-top:8px;outline:none;animation:done-in .6s var(--ease-out,ease-out) both}
.form__done p{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--text-secondary)}
.form__tick{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(181,80,107,.1);color:var(--text-brand)}
.form__done-title{margin:6px 0 0;font-family:var(--font-serif);font-weight:500;font-size:clamp(22px,3vw,26px);color:var(--text-primary)}
.form__again{margin-top:6px;padding:6px 2px;border:0;background:none;font:inherit;font-family:var(--font-sans);font-size:14px;color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.form__again:hover{color:var(--text-primary)}
@keyframes done-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:520px){.form__row{flex-direction:column}}

/* Movimiento calmado: solo si hay JS y el usuario no pide menos movimiento */
.js .word{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .8s var(--ease-standard),transform .8s var(--ease-standard);transition-delay:calc(var(--i)*55ms)}
.js .is-in .word{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-standard),transform .7s var(--ease-standard)}
.js .reveal.is-in{opacity:1;transform:none}
.js .step.reveal:nth-child(2){transition-delay:.08s}
.js .step.reveal:nth-child(3){transition-delay:.16s}
.js .reveal--photo{opacity:1;transform:none}
/* Foto de Pepa: un degradado la va desvelando de arriba abajo al ritmo del scroll (--p va de 0 a 1, lo calcula main.js) */
.js .reveal--photo img{-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);-webkit-mask-size:100% 250%;mask-size:100% 250%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 calc(100% - var(--p,0)*100%);mask-position:0 calc(100% - var(--p,0)*100%)}
@media (prefers-reduced-motion:reduce){
  .js .word,.js .reveal{opacity:1;transform:none;transition:none}
  .js .reveal--photo img{-webkit-mask-image:none;mask-image:none;transition:none}
}

@media (max-width:860px){
  .where{grid-template-columns:1fr;gap:8px}
  .steps{grid-template-columns:1fr;max-width:420px}
  .about{grid-template-columns:1fr}
  .about__photo{max-width:420px;width:100%;margin:0 auto}
}
@media (max-width:819px){.header__nav{display:none}.header__toggle{display:block}}
@media (min-width:820px){.header__menu{display:none!important}.header__toggle{display:none}}
@media (max-width:359px){.header__social{display:none}}
@media (max-width:520px){.header__bar{padding-left:22px}}
@media (max-width:860px){
  .hero{align-items:flex-start;min-height:660px;padding:112px 0 40px;background:var(--surface-page)}
  .hero__photo{top:60%;background:none}
  .hero__photo img{object-position:60% 50%}
  .hero__photo::after{display:none}
  .hero__photo img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);mask-image:linear-gradient(180deg,transparent 0,#000 45%)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Asesoría */
.advice{padding-bottom:clamp(64px,9vw,120px)}
.advice__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,88px);align-items:start}
.advice__text{display:grid;gap:20px;justify-items:start}
.advice__text .label{color:var(--text-brand)}
.advice__photo{margin:0;border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/5;background:var(--surface-sunken)}
.advice__photo img{width:100%;height:100%;object-fit:cover}
.facts{margin:4px 0 0;width:100%;max-width:520px;display:grid}
.facts>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--border-default)}
.facts>div:last-child{border-bottom:1px solid var(--border-default)}
.facts dt{font-family:var(--font-sans);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-top:3px}
.facts dd{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--text-primary)}
.advice__cta{display:grid;gap:10px;justify-items:start;margin-top:6px}
.note{margin:0;font-family:var(--font-sans);font-size:13px;color:var(--text-muted)}
.advice__how{margin-top:clamp(56px,8vw,104px)}
.advice__h{font-family:var(--font-serif);font-weight:500;font-size:clamp(24px,3vw,30px);margin:0 0 24px}
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px)}
.how li{display:grid;gap:12px;align-content:start;padding-top:18px;border-top:1px solid var(--border-default)}
.how__n{font-family:var(--font-serif);font-size:28px;line-height:1;color:var(--text-brand)}
.how p{margin:0;font-family:var(--font-sans);font-weight:300;font-size:16px;line-height:1.6;color:var(--text-secondary)}
.how strong{font-weight:500;color:var(--text-primary)}
.advice__fine{margin:28px 0 0;font-family:var(--font-serif);font-style:italic;font-size:18px;color:var(--text-secondary)}
@media (max-width:860px){
  .advice__in{grid-template-columns:1fr}
  .advice__photo{max-width:420px;width:100%;order:2}
  .how{grid-template-columns:1fr}
  .how li{grid-template-columns:36px 1fr;align-items:baseline}
}