:root{--paper:#F3ECE4;--ink:#241319;--rose:#FF4F93;--violet:#B14CFF;--gold:#B98F53;--dim:#7a6b70;--line:#e0d1d7;}
*{margin:0;box-sizing:border-box}
body{font-family:'Manrope',system-ui;color:var(--ink);background:var(--paper)}
.hero{overflow:hidden;background:var(--paper)}
#bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");opacity:.04;pointer-events:none;z-index:6;mix-blend-mode:multiply}
.serif{font-family:'Instrument Serif',serif}
.em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--rose)}
.sc{font-family:'Space Grotesk';text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:600;color:var(--dim)}
.script{font-family:'Sacramento',cursive;color:var(--violet)}
img{display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 3rem;position:relative;z-index:2}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:5vh 0 0}
.brand{font-family:'Instrument Serif';font-size:1.6rem;line-height:1}
.brand small{display:block;font-family:'Space Grotesk';letter-spacing:.2em;font-size:.58rem;text-transform:uppercase;color:var(--dim);margin-top:.3rem}
.issue{font-family:'Space Grotesk';font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-align:right;line-height:1.8;white-space:nowrap}
.rule{height:1px;background:var(--line);margin:1.4vh 0 0}
.ghost{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:'Instrument Serif';font-style:italic;font-size:52vh;line-height:.8;color:rgba(177,76,255,.06);z-index:1;white-space:nowrap;pointer-events:none}
/* stage centra el bloque de la foto */
.stage{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;padding:7vh 0 5vh;}
/* TODO gira en torno a .figblock: nombre y foto siempre alineados */
.figblock{position:relative;width:min(400px,78vw)}
.arch{position:absolute;top:-4%;left:-9%;width:118%;height:108%;z-index:0;border-radius:230px 230px 22px 22px;
background:linear-gradient(135deg,#F9C7DD 0%,#F2B6D6 22%,#D9B6F2 46%,#C9A9F0 62%,#F7D3BE 82%,#F9C7DD 100%);
background-size:260% 260%;animation:archflow 18s ease-in-out infinite;}
@keyframes archflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.arch::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:220% 220%;animation:sheen 9s ease-in-out infinite;}
@keyframes sheen{0%{background-position:120% 0}55%{background-position:-40% 0}100%{background-position:-40% 0}}
.fig{position:relative;z-index:1;width:100%;height:min(64vh,540px);object-fit:cover;object-position:center top;border-radius:210px 210px 16px 16px;box-shadow:0 40px 90px -40px rgba(60,20,40,.5)}
.hola{position:absolute;z-index:3;left:-32%;top:-11%;font-family:'Instrument Serif';font-size:clamp(3.8rem,11vw,9.5rem);line-height:.82}
.soy{position:absolute;z-index:3;left:-16%;right:-16%;bottom:4%;text-align:center;font-family:'Instrument Serif';font-size:clamp(3.8rem,11vw,9.5rem);line-height:.82}
.soy em{font-style:italic;color:var(--rose)}
.note{position:absolute;z-index:4;left:-42%;bottom:22%;text-align:left;max-width:150px}
.note .script{font-size:1.9rem;display:block;line-height:1}
.note svg{width:60px;height:40px;overflow:visible;margin-top:.2rem}
.arrow{stroke:var(--violet);fill:none;stroke-width:2;stroke-linecap:round}
.edge{position:absolute;right:10px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:'Space Grotesk';letter-spacing:.32em;font-size:.64rem;text-transform:uppercase;color:var(--dim);z-index:4}
/* ====== MÓVIL: composición limpia y anclada ====== */
@media(max-width:860px){
.wrap{padding:0 1.4rem}
.topbar{flex-direction:column;gap:.5rem}
.issue{text-align:left}
.ghost{font-size:30vh;top:44%}
.stage{padding:6vh 0 4vh}
.figblock{width:74vw;max-width:340px}
.fig{height:min(58vh,460px)}
.hola{left:0;right:0;top:-8%;text-align:center;font-size:clamp(3.4rem,17vw,5.4rem)}
.soy{left:0;right:0;bottom:3%;text-align:center;font-size:clamp(3.4rem,17vw,5.4rem)}
.note,.edge{display:none}
}
@media(max-width:400px){ .hola,.soy{font-size:3.2rem} .figblock{width:82vw} }
/* ==== HISTORIA ==== */
.historia{overflow:hidden;background:var(--paper);padding:clamp(6rem,14vh,10rem) 0}
#hbg{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.historia::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");opacity:.04;pointer-events:none;mix-blend-mode:multiply;z-index:1}
.hwrap{max-width:1180px;margin:0 auto;padding:0 3rem;position:relative;z-index:2}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:5.5rem;align-items:center}
.htxt h2{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.08;margin-bottom:1.5rem}
.htxt h2 em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--rose);font-weight:400}
.htxt p{color:var(--dim);line-height:1.7;margin-bottom:.9rem;max-width:48ch;font-size:1rem}
.htxt .born{font-family:'Space Grotesk';font-weight:600;font-size:1.2rem;color:var(--ink);margin:1.1rem 0}
.htxt .born em{font-family:'Instrument Serif';font-style:italic;color:var(--rose);font-weight:400}
.htxt .endline{font-family:'Manrope';font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.45;color:var(--ink);margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.htxt .endline em{font-family:'Instrument Serif';font-style:italic;color:var(--rose);font-size:1.35em}
.hphoto{position:relative}
.hphoto .arch{position:absolute;top:-4%;left:-7%;width:114%;height:108%;z-index:0;border-radius:200px 200px 20px 20px;
background:linear-gradient(135deg,#F9C7DD,#F2B6D6 22%,#D9B6F2 46%,#C9A9F0 62%,#F7D3BE 82%,#F9C7DD);
background-size:260% 260%;animation:archflow 16s ease-in-out infinite;}
@keyframes archflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hphoto .arch::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-size:220% 220%;animation:sheen 8s ease-in-out infinite}
@keyframes sheen{0%{background-position:120% 0}55%{background-position:-40% 0}100%{background-position:-40% 0}}
.hphoto img{position:relative;z-index:1;width:100%;height:min(72vh,600px);object-fit:cover;object-position:center top;border-radius:180px 180px 14px 14px;box-shadow:0 40px 90px -40px rgba(60,20,40,.5)}
@media(max-width:860px){.hgrid{grid-template-columns:1fr;gap:2.5rem}.hphoto{order:-1}.hphoto img{height:min(58vh,470px)}.htxt p{max-width:none}.hwrap{padding:0 1.4rem}}
/* ==== CIERRE ==== */
.cierre{overflow:hidden;background:var(--paper);padding:clamp(8rem,20vh,14rem) 0}
#cbg{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.cierre::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");opacity:.04;pointer-events:none;mix-blend-mode:multiply;z-index:1}
.cwrap{max-width:720px;margin:0 auto;padding:0 3rem;position:relative;z-index:2;text-align:center}
.cierre
.letter p{font-family:'Instrument Serif',serif;font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.5;color:var(--ink);margin-bottom:1.4rem}
.letter p em{font-style:italic;color:var(--rose)}
.sign{font-family:'Herr Von Muellerhoff',cursive;font-size:clamp(3.6rem,8.5vw,5.8rem);color:var(--ink);line-height:1;margin:2.4rem 0 0}
.signrole{font-family:'Space Grotesk';text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--dim);margin-top:.4rem}
.cbtn{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.8rem;background:var(--rose);color:#fff;font-family:'Space Grotesk';font-weight:600;padding:1rem 2.2rem;border-radius:999px;text-decoration:none;letter-spacing:.02em;box-shadow:0 18px 40px -14px rgba(255,79,147,.55)}
@media(max-width:860px){.cwrap{padding:0 1.6rem}}
/* ===== SCROLL REVEAL ===== */
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.14s}.reveal.d2{transition-delay:.28s}.reveal.d3{transition-delay:.42s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* ===== CARTAS APILADAS (todas se fijan; la siguiente cubre a la anterior) — PC y móvil ===== */
.hero{position:sticky;top:0;z-index:1;height:100vh;overflow:hidden}
.historia{position:relative;z-index:2;border-radius:40px 40px 0 0;box-shadow:0 -32px 70px -30px rgba(60,20,40,.30)}
.cierre{position:relative;z-index:3;min-height:auto;display:flex;align-items:center;border-radius:40px 40px 0 0;box-shadow:0 -32px 70px -30px rgba(60,20,40,.30)}
.historia>.hwrap,.cierre>.cwrap{width:100%}
@media(max-width:860px){
.historia,.cierre{border-radius:30px 30px 0 0}
.historia{padding:5rem 0 4rem}
.hphoto img{height:52vh;object-position:center 12%}
.htxt h2{font-size:1.75rem;margin-bottom:1.1rem}
.htxt p{font-size:.98rem;line-height:1.7;margin-bottom:.9rem}
.htxt .born{font-size:1.15rem;margin:1.1rem 0}
.htxt .endline{font-size:1.05rem;margin-top:1.3rem;padding-top:1.3rem}
.hgrid{gap:2rem}
}
/* ===== MÓVIL: sin sticky, scroll normal (para que la historia se lea completa) ===== */
@media(max-width:860px){
.hero{position:relative!important;height:auto!important;min-height:100svh}
.historia{position:relative!important}
.cierre{position:relative!important;min-height:auto!important;padding:clamp(5rem,12vh,8rem) 0}
}
/* ===== HISTORIA · editorial tipo periódico ===== */
.historia .hwrap{max-width:min(1000px,92vw);margin:0 auto}
.hgrid{display:block} /* ya no hay 2 columnas */
.htxt{max-width:none;font-size:1.02rem}
/* la foto flota a la derecha y el texto la rodea */
.hphoto{float:right;width:min(190px,26%);margin:.5rem 0 1.2rem 2rem;position:relative;shape-outside:inset(0 round 8px)}
.hphoto .arch{display:none}
.hphoto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 15%;
border-radius:8px;box-shadow:0 16px 40px -22px rgba(60,20,40,.42);display:block}
/* pie de foto tipo periódico */
.hphoto::after{content:"Maite Clavero";display:block;margin-top:.5rem;
font-family:'Space Grotesk';font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
color:rgba(42,15,28,.42);line-height:1.5}
/* letra capitular */
.htxt p:first-of-type::first-letter{
float:left;font-family:'Instrument Serif';font-size:4.4rem;line-height:.82;
padding:.12em .12em 0 0;color:var(--rose)}
/* limpiar el float al final de la sección */
.hgrid::after{content:"";display:block;clear:both}
@media(max-width:860px){
.hphoto{float:right;width:min(140px,38%);margin:.3rem 0 1rem 1.2rem;shape-outside:none}
.hphoto img{aspect-ratio:3/4;object-position:center 12%}
.hphoto::after{font-size:.55rem}
.htxt p:first-of-type::first-letter{font-size:3.4rem}
.historia{padding:5rem 0 4rem}
}
/* ===== HISTORIA · foto pequeña editorial (regla final, gana a las anteriores) ===== */
.historia .hphoto{float:right!important;width:min(190px,26%)!important;height:auto!important;
margin:.5rem 0 1.2rem 2rem!important;position:relative;order:0!important;shape-outside:inset(0 round 8px)}
.historia .hphoto img{width:100%!important;height:auto!important;aspect-ratio:3/4;
object-fit:cover;object-position:center 15%;border-radius:8px!important;
box-shadow:0 16px 40px -22px rgba(60,20,40,.42)!important;display:block}
.historia .hphoto .arch{display:none!important}
@media(max-width:860px){
.historia .hphoto{float:right!important;width:min(140px,38%)!important;margin:.3rem 0 1rem 1.2rem!important;shape-outside:none}
.historia .hphoto img{height:auto!important;aspect-ratio:3/4;object-position:center 12%}
}
/* ===== HISTORIA · layout editorial definitivo ===== */
.historia .hgrid{display:block!important;grid-template-columns:none!important}
.historia .htxt{max-width:none!important}
.historia .hgrid::after{content:"";display:block;clear:both}
/* ---- */
/* ===== NAVBAR + FOOTER Say Notary — v1 =====
Variables y reset acotados a los componentes para no pisar el CSS de cada pagina.
(se omite la regla global body{background:#0a0407} a proposito) */
.navwrap,.svc-wrap,.footer{--cream:#F4ECE6;--paper:#F3ECE4;--rose:#FF4F93;--violet:#B14CFF;--ink:#2A0F1C;--dim:rgba(244,236,230,.72);}
html{scroll-behavior:smooth}
.navwrap a,.svc-wrap a,.footer a{text-decoration:none;color:inherit}
/* ===== NAVBAR ===== */
.navwrap{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem}
.navwrap .nav{max-width:1100px;margin:0 auto;border-radius:999px;padding:.6rem 1.4rem;
display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
background:rgba(20,10,16,.45);
-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 18px 44px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
transition:background .35s,border-color .35s}
/* blindaje: impide que el CSS propio de la pagina se cuele en el navbar
(ej. legal-v1 define .nav a con fondo blanco para sus pastillas) */
.navwrap .nav a,.navwrap .nav button{background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
/* marca */
.navwrap .brand{display:flex;align-items:center}
.navwrap .brand img{height:32px;width:auto}
/* fondo oscuro (por defecto): logo con letras crema */
.navwrap .brand .logo-oscuro{display:block}
.navwrap .brand .logo-claro{display:none}
/* fondo claro: logo con letras vino */
body.theme-light .navwrap .brand .logo-oscuro{display:none}
body.theme-light .navwrap .brand .logo-claro{display:block}
/* links */
.navwrap .links{display:flex;align-items:center;gap:1.9rem}
.navwrap .links a,.navwrap .drop>button{font-family:'Manrope';font-weight:500;font-size:.93rem;color:rgba(244,236,230,.82);
background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.32rem;transition:color .3s}
.navwrap .links a:hover,.navwrap .drop:hover>button{color:#fff}
.navwrap .drop{position:relative}
.navwrap .caret{font-size:.62rem;transition:transform .3s}
.navwrap .drop:hover .caret{transform:rotate(180deg)}
/* derecha */
.right{display:flex;align-items:center;gap:.7rem}
.navwrap .lang{display:flex;border-radius:999px;padding:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.navwrap .lang button{font-family:'Space Grotesk';font-weight:600;font-size:.74rem;background:none;border:0;
color:rgba(244,236,230,.65);cursor:pointer;padding:.28rem .6rem;border-radius:999px;transition:.25s}
.navwrap .lang button.on{background:var(--rose);color:#fff}
/* burger */
.navwrap .burger{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;position:relative;z-index:210}
.navwrap .burger i{position:absolute;left:11px;right:11px;height:2px;background:var(--cream);border-radius:2px;transition:.4s cubic-bezier(.76,0,.24,1)}
.navwrap .burger i:nth-child(1){top:15px}.navwrap .burger i:nth-child(2){top:20px}.navwrap .burger i:nth-child(3){top:25px}
/* ===== TEMA CLARO ===== */
body.theme-light .navwrap .nav{background:rgba(255,255,255,.5);border-color:rgba(42,15,28,.1);
box-shadow:0 18px 44px -26px rgba(60,20,40,.4), inset 0 1px 0 rgba(255,255,255,.9)}
body.theme-light .navwrap .links a,body.theme-light .navwrap .drop>button{color:rgba(42,15,28,.75)}
body.theme-light .navwrap .links a:hover,body.theme-light .navwrap .drop:hover>button{color:var(--ink)}
body.theme-light .navwrap .lang{background:rgba(42,15,28,.06);border-color:rgba(42,15,28,.12)}
body.theme-light .navwrap .lang button{color:rgba(42,15,28,.6)}
body.theme-light .navwrap .lang button.on{background:var(--rose);color:#fff}
body.theme-light .navwrap .burger i{background:var(--ink)}
@media(max-width:960px){
.navwrap .links{display:none}
.navwrap .burger{display:block}
.navwrap .nav{padding:.5rem .8rem}
.navwrap{padding:.9rem}
.navwrap .brand img{height:26px}
}
/* fondo del navbar en tema claro (regla que faltaba) */
body.theme-light .navwrap .nav{
background:rgba(255,255,255,.55);
border-color:rgba(42,15,28,.12);
box-shadow:0 18px 44px -26px rgba(60,20,40,.42), inset 0 1px 0 rgba(255,255,255,.9);
}
.navwrap .nav,.navwrap .links a,.navwrap .drop>button,.navwrap .lang,.navwrap .lang button,.navwrap .burger i,.navwrap .brand img{transition:background .35s,color .35s,border-color .35s,box-shadow .35s,filter .35s}
/* ===== BOTÓN SERVICIOS ===== */
.navwrap .svc-open{font-family:'Manrope';font-weight:500;font-size:.93rem;color:rgba(244,236,230,.82);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:color .3s}
.navwrap .svc-open:hover{color:#fff}
.navwrap .svc-open .caret{font-size:1rem;transition:transform .3s}
.navwrap .svc-open:hover .caret{transform:translateX(3px)}
body.theme-light .navwrap .svc-open{color:rgba(42,15,28,.75)}
body.theme-light .navwrap .svc-open:hover{color:var(--ink)}
/* ===== PANEL LATERAL DE SERVICIOS ===== */
.svc-wrap{position:fixed;inset:0;z-index:180;visibility:hidden}
.svc-wrap.on{visibility:visible}
.svc-wrap .svc-panel{position:absolute;top:0;right:0;height:100%;width:min(600px,94vw);overflow:hidden;
display:flex;flex-direction:column;justify-content:center;padding:5rem 3.4rem}
.svc-wrap .svc-overlay{position:absolute;inset:0;background:rgba(8,3,6,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .5s}
.svc-wrap.on .svc-overlay{opacity:1}
/* capas que barren desde la derecha (stickers de color) */
.svc-wrap .svc-layer{position:absolute;inset:0;transform:translateX(101%);transition:transform .6s cubic-bezier(.65,.01,.05,.99)}
.svc-wrap .svc-layer.l1{background:linear-gradient(140deg,#FF4F93,#FF2E88)}
.svc-wrap .svc-layer.l2{background:linear-gradient(140deg,#B14CFF,#7B3FD1);transition-delay:.10s}
.svc-wrap .svc-layer.l3{background:#160910;transition-delay:.20s}
.svc-wrap.on .svc-layer{transform:translateX(0)}
/* al cerrar, salen en orden inverso */
.svc-wrap .svc-layer.l1{transition-delay:.20s}
.svc-wrap .svc-layer.l2{transition-delay:.10s}
.svc-wrap .svc-layer.l3{transition-delay:0s}
.svc-wrap.on .svc-layer.l1{transition-delay:0s}
.svc-wrap.on .svc-layer.l2{transition-delay:.10s}
.svc-wrap.on .svc-layer.l3{transition-delay:.20s}
/* formas ambientales de fondo */
.svc-wrap .svc-shapes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.svc-wrap .bg-shape{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s}
.svc-wrap .bg-shape.active{opacity:1}
.svc-wrap .shape-el{opacity:0;transform-box:fill-box;transform-origin:center}
.svc-wrap .bg-shape.active .shape-el{animation:popIn .6s cubic-bezier(.34,1.56,.64,1) forwards}
.svc-wrap .bg-shape.active .shape-el:nth-child(2){animation-delay:.07s}
.svc-wrap .bg-shape.active .shape-el:nth-child(3){animation-delay:.14s}
.svc-wrap .bg-shape.active .shape-el:nth-child(4){animation-delay:.21s}
.svc-wrap .bg-shape.active .shape-el:nth-child(5){animation-delay:.28s}
.svc-wrap .bg-shape.active .shape-el:nth-child(6){animation-delay:.35s}
@keyframes popIn{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.svc-wrap .svc-inner{position:relative;z-index:2}
.svc-wrap .svc-kick{font-family:'Space Grotesk';text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;color:rgba(244,236,230,.5);margin-bottom:1.8rem;opacity:0;transition:opacity .5s .4s}
.svc-wrap.on .svc-kick{opacity:1}
.svc-wrap .svc-list{list-style:none;margin:0;padding:0}
.svc-wrap .svc-list li{overflow:hidden;position:relative}
/* fila con hover: barra que sube por detrás */
.svc-wrap .svc-link{position:relative;display:block;padding:.55rem 3.4rem;margin:0 -3.4rem;border-radius:0;overflow:hidden;
transform:translateY(140%) rotate(8deg);transition:transform .62s cubic-bezier(.65,.01,.05,.99)}
.svc-wrap.on .svc-link{transform:translateY(0) rotate(0)}
.svc-wrap .svc-list li:nth-child(1) .svc-link{transition-delay:.32s}
.svc-wrap .svc-list li:nth-child(2) .svc-link{transition-delay:.37s}
.svc-wrap .svc-list li:nth-child(3) .svc-link{transition-delay:.42s}
.svc-wrap .svc-list li:nth-child(4) .svc-link{transition-delay:.47s}
.svc-wrap .svc-list li:nth-child(5) .svc-link{transition-delay:.52s}
.svc-wrap .svc-list li:nth-child(6) .svc-link{transition-delay:.57s}
.svc-wrap .svc-list li:nth-child(7) .svc-link{transition-delay:.62s}
.svc-wrap .svc-link .hover-bg{position:absolute;inset:0;border-radius:0;background:var(--hb,rgba(255,79,147,.9));
transform:translateY(101%);transition:transform .42s cubic-bezier(.65,.01,.05,.99);z-index:0}
.svc-wrap .svc-link:hover .hover-bg{transform:translateY(0)}
.svc-wrap .svc-link .txtmask{position:relative;z-index:1;display:block;overflow:hidden}
.svc-wrap .svc-link .txt{display:block;font-family:'Instrument Serif';font-size:clamp(1.6rem,3.2vw,2.35rem);
line-height:1.3;color:var(--cream);transition:transform .48s cubic-bezier(.65,.01,.05,.99),color .35s}
/* al hacer hover, la palabra sale por arriba y resurge desde abajo */
.svc-wrap .svc-link:hover .txt{animation:slideUpWord .55s cubic-bezier(.65,.01,.05,.99) forwards}
@keyframes slideUpWord{0%{transform:translateY(0)}45%{transform:translateY(-105%)}46%{transform:translateY(105%)}100%{transform:translateY(0)}}
.svc-wrap .svc-link.on-light:hover .txt{color:#160910}
.svc-wrap .svc-close{position:absolute;top:2rem;right:2.4rem;z-index:3;width:44px;height:44px;border:0;background:none;
cursor:pointer;color:var(--cream);font-size:1.7rem;line-height:1;opacity:0;transition:opacity .4s .35s,transform .35s,color .3s}
.svc-wrap.on .svc-close{opacity:1}
.svc-wrap .svc-close:hover{transform:rotate(90deg);color:var(--rose)}
@media(max-width:600px){.svc-wrap .svc-panel{padding:5rem 1.6rem}.svc-wrap .svc-link{padding:.55rem 1.6rem;margin:0 -1.6rem}}
.svc-wrap .svc-back{margin-top:1.8rem;background:none;border:1px solid rgba(244,236,230,.3);color:rgba(244,236,230,.75);
font-family:'Space Grotesk';font-weight:600;font-size:.85rem;padding:.55rem 1.3rem;border-radius:999px;cursor:pointer;transition:.25s}
.svc-wrap .svc-back:hover{background:rgba(255,255,255,.08);color:#fff}
.svc-wrap .svc-list.sub .svc-link{transition-delay:0s!important}
@media(max-width:960px){.svc-wrap .svc-panel{width:100%}}
/* ===== MODO MENÚ PRINCIPAL (colores invertidos) ===== */
.svc-wrap.mode-main .svc-layer.l1{background:linear-gradient(140deg,#C9A96E,#E7C9A3)}
.svc-wrap.mode-main .svc-layer.l2{background:linear-gradient(140deg,#FFD9E6,#F7E3D4)}
.svc-wrap.mode-main .svc-layer.l3{background:#F6F0E9}
.svc-wrap.mode-main .svc-kick{color:rgba(42,15,28,.55)}
.svc-wrap.mode-main .svc-close{color:#2A0F1C}
.svc-wrap.mode-main .svc-close:hover{color:#FF4F93}
.svc-wrap.mode-main .svc-link .txt{color:#2A0F1C}
.svc-wrap.mode-main .svc-link:hover .txt{color:#F6F0E9}
.svc-wrap.mode-main .svc-back{border-color:rgba(42,15,28,.3);color:rgba(42,15,28,.7)}
.svc-wrap.mode-main .svc-back:hover{background:rgba(42,15,28,.07);color:#2A0F1C}
/* formas propias del menú principal */
.svc-wrap .mainshapes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;display:none}
.svc-wrap.mode-main .mainshapes{display:block}
.svc-wrap.mode-main .svc-shapes{display:none}
/* ===== HOVER DEL NAVBAR (links, servicios, idioma) ===== */
.navwrap .links a,.navwrap .svc-open{position:relative;padding:.35rem .1rem;transition:color .3s,transform .35s cubic-bezier(.34,1.4,.64,1),text-shadow .35s}
/* subrayado de luz que crece desde el centro */
.navwrap .links a::after,.navwrap .svc-open::after{content:"";position:absolute;left:50%;right:50%;bottom:-2px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--rose),var(--violet));
transition:left .35s cubic-bezier(.65,.01,.05,.99),right .35s cubic-bezier(.65,.01,.05,.99),box-shadow .35s;opacity:.95}
.navwrap .links a:hover::after,.navwrap .svc-open:hover::after{left:0;right:0;box-shadow:0 0 12px rgba(255,79,147,.8)}
/* el texto crece y se ilumina */
.navwrap .links a:hover,.navwrap .svc-open:hover{color:#fff;transform:scale(1.07);text-shadow:0 0 18px rgba(255,79,147,.55)}
body.theme-light .navwrap .links a:hover,body.theme-light .navwrap .svc-open:hover{color:var(--ink);text-shadow:0 0 16px rgba(255,79,147,.35)}
/* toggle de idioma con brillo */
.navwrap .lang button{transition:color .3s,background .3s,transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .3s}
.navwrap .lang button:hover{color:#fff;transform:scale(1.08)}
body.theme-light .navwrap .lang button:hover{color:var(--ink)}
.navwrap .lang button.on{box-shadow:0 0 16px rgba(255,79,147,.55)}
.navwrap .lang button.on:hover{transform:scale(1.1);box-shadow:0 0 22px rgba(255,79,147,.8)}
/* el logo también reacciona suave */
.navwrap .brand{transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.navwrap .brand:hover{transform:scale(1.04)}
/* la píldora del navbar se ilumina al pasar por encima */
.navwrap .nav{transition:background .35s,border-color .35s,box-shadow .35s}
.navwrap .nav:hover{border-color:rgba(255,79,147,.35);box-shadow:0 18px 44px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22), 0 0 26px -6px rgba(255,79,147,.28)}
body.theme-light .navwrap .nav:hover{border-color:rgba(255,79,147,.35);box-shadow:0 18px 44px -26px rgba(60,20,40,.42), inset 0 1px 0 rgba(255,255,255,.9), 0 0 26px -8px rgba(255,79,147,.3)}
/* ===================== FOOTER ===================== */
.footer{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#2A0F1C,#170A11 55%,#0d0509);color:var(--cream);padding:clamp(3.5rem,8vh,5rem) 0 2rem}
.footer a{background:none;border:0;border-radius:0;box-shadow:none}
.footer .fwrap{max-width:1100px;margin:0 auto;padding:0 2.5rem;position:relative;z-index:2}
.footer .ftop{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:start}
.footer .fbrand img{height:36px;width:auto;display:block}
.footer .fright{display:flex;flex-direction:column}
.footer .fcontact{display:flex;gap:2.6rem;flex-wrap:wrap}
.footer .fcontact a,.footer .fcontact span{display:block;color:var(--dim);font-size:.93rem;transition:color .3s}
.footer .fcontact a:hover{color:var(--rose)}
.footer .fcontact .lbl{display:block;color:rgba(244,236,230,.38);font-size:.68rem;font-family:'Space Grotesk';letter-spacing:.14em;text-transform:uppercase;margin-bottom:.3rem}
/* redes */
.footer .socials{display:flex;gap:.9rem;margin-top:2.4rem}
.footer .sbox{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
box-shadow:0 8px 24px rgba(0,0,0,.35);transition:all .35s ease}
.footer .sbox svg{width:20px;height:20px;fill:var(--cream);transition:fill .3s}
.footer .sicon:hover .sbox{transform:translateY(-7px) scale(1.08)}
.footer .sicon:hover svg{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-6deg)}40%{transform:translateX(4px) rotate(6deg)}60%{transform:translateX(-4px) rotate(-6deg)}80%{transform:translateX(4px) rotate(6deg)}}
.footer .sicon.ig:hover .sbox{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);box-shadow:0 0 26px rgba(225,48,108,.6);border-color:transparent}
.footer .sicon.fb:hover .sbox{background:#1877F2;box-shadow:0 0 26px rgba(24,119,242,.6);border-color:transparent}
.footer .sicon.tt:hover .sbox{background:#111;box-shadow:0 0 26px rgba(37,244,238,.5);border-color:rgba(37,244,238,.6)}
/* barra inferior */
.footer .fbottom{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(244,236,230,.12);
display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap}
.footer .fbottom .cr{color:rgba(244,236,230,.45);font-size:.8rem}
.footer .flegal{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer .flegal a{color:rgba(244,236,230,.5);font-size:.8rem;transition:color .3s}
.footer .flegal a:hover{color:var(--rose)}
.footer .fdisc{margin-top:2.4rem;color:rgba(244,236,230,.34);font-size:.78rem;line-height:1.7;white-space:nowrap}
@media(max-width:720px){
.footer .fwrap{padding:0 1.4rem}
.footer .ftop{grid-template-columns:1fr;gap:2rem}
.footer .fcontact{gap:1.6rem;flex-direction:column}
.footer .fdisc{white-space:normal;margin-top:1.6rem}
.footer .fbottom{flex-direction:column;align-items:flex-start}
}
/* aire bajo el navbar fijo (el padding va directo al contenido) */
.hero .topbar{padding-top:170px}
@media(max-width:860px){.hero .topbar{padding-top:135px}}
/* Opcion B: el contenedor se estrecha para que el float SI moldee el texto,
conservando el tope de 48ch por legibilidad (rodeo tipo periodico).
En movil 92vw manda, asi que no cambia nada alli. */
.historia .hwrap{max-width:min(700px,92vw)}
.historia .htxt p{max-width:none}
/* titulo de la historia: realce del acento en Instrument Serif (ocupa un 24% menos
de ancho que Space Grotesk 600, por eso se leia mas pequeno) y mas aire hasta el cuerpo */
.historia .htxt h2 em{font-size:1.12em}
.historia .htxt h2{margin-bottom:2.4rem}
@media(max-width:860px){.historia .htxt h2{margin-bottom:1.7rem}}
/* titulo: "Notary Public" en su propia linea en escritorio, y que nunca se parta
(antes "Notary" quedaba encima de "Public") */
@media(min-width:861px){.historia .htxt h2 em{display:block;white-space:nowrap}}
/* El boton Volver solo tiene sentido en movil, donde la hamburguesa abre el menu
principal y hay que poder regresar. En escritorio Servicios abre la lista
directamente, asi que sobra. 961px = mismo corte donde aparece la hamburguesa. */
@media(min-width:961px){.svc-wrap .svc-back{display:none!important}}
/* ===== SIN STICKY · la página corre entera ===== */
.hero,.historia,.cierre{position:relative!important;top:auto!important}
.hero{height:auto!important;min-height:100svh}
.cierre{min-height:auto!important}
/* más aire entre el hero y la historia */
.historia{margin-top:clamp(3rem,8vh,6rem)!important;padding-top:clamp(5rem,10vh,8rem)!important}
.cierre{margin-top:clamp(2rem,5vh,4rem)!important;padding:clamp(6rem,14vh,10rem) 0!important}
@media(max-width:860px){
.historia{margin-top:2.5rem!important;padding-top:4rem!important}
.cierre{margin-top:2rem!important;padding:5rem 0!important}
}
/* ===== quitar restos del efecto de cartas (sombras y bordes que ya no aplican) ===== */
.historia,.cierre{box-shadow:none!important;border-radius:0!important}
/* ===== botón WhatsApp del cierre (paleta de marca + shake del footer) ===== */
.cbtn{display:inline-flex!important;align-items:center;gap:.7rem;
background:var(--rose,#FF4F93)!important;color:#fff!important;
font-family:'Space Grotesk';font-weight:600;font-size:1rem;
padding:1rem 1.9rem!important;border-radius:999px!important;border:0!important;
box-shadow:0 18px 40px -14px rgba(255,79,147,.55)!important;
transition:transform .3s,box-shadow .3s;text-decoration:none}
.cbtn:hover{transform:translateY(-3px);box-shadow:0 24px 50px -14px rgba(255,79,147,.72)!important}
.cbtn .wa{width:22px;height:22px;fill:#fff;flex:0 0 auto}
/* mismo temblor del icono que en el footer */
.cbtn:hover .wa{animation:cbtnShake .5s}
@keyframes cbtnShake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-6deg)}40%{transform:translateX(4px) rotate(6deg)}60%{transform:translateX(-4px) rotate(-6deg)}80%{transform:translateX(4px) rotate(6deg)}}
@media(max-width:560px){.cbtn{font-size:.94rem;padding:.9rem 1.5rem!important}}
/* ===== centrado optico del logo =====
El logo es asimetrico: la pluma sobresale por arriba, asi que al centrarlo
por su altura total la palabra "saynotary" queda por debajo del centro.
Medido el centroide de tinta del PNG: esta 29px por debajo del centro
geometrico (de 200px de alto) -> 4,7px a 32px de alto en pantalla.
En movil el logo mide 26px, asi que la correccion es proporcionalmente menor. */
.navwrap .brand img{position:relative;top:-5px}
@media(max-width:960px){.navwrap .brand img{top:-4px}}
/* ===== simetria lateral del navbar en MOVIL =====
El boton de la hamburguesa mide 42px pero sus barras van metidas 11px por
cada lado, asi que el icono quedaba a 24,8px del borde mientras el logo
estaba a 13,8px. Se compensa desplazando el BOTON (no el logo), para no
perder los 42px de area tactil. Solo movil; en escritorio esta oculto. */
@media(max-width:960px){.navwrap .nav button.burger{margin-right:-11px}}
/* ===== CARTA FINAL · texto mas equilibrado ===== */
.cierre .cwrap{max-width:640px!important}
/* el texto de la carta va alineado a la izquierda: se leen mejor los renglones */
.cierre .letter{text-align:left!important}
.cierre .letter p{
font-size:clamp(1.06rem,1.6vw,1.32rem)!important; /* antes llegaba a 2.05rem */
line-height:1.75!important;
margin-bottom:1.15rem!important;
text-wrap:pretty; /* evita cortes feos de linea */
}
/* la firma y el rol siguen centrados, como cierre */
.cierre .sign{text-align:center;font-size:clamp(3rem,7vw,4.6rem)!important;margin-top:2rem!important}
.cierre .signrole{text-align:center}
.cierre .cbtn{margin-top:1.6rem}
/* el kicker "Un gusto conocerte" centrado */
.cierre .sc{display:block;text-align:center}
@media(max-width:560px){
.cierre .letter p{font-size:1.02rem!important;line-height:1.7!important}
.cierre .cwrap{padding:0 1.4rem!important}
}
/* ===== quitar el eyebrow de la carta final ===== */
.cierre .sc{display:none!important}
/* ===== medida de linea constante =====
El problema no era el ancho del contenedor sino la RELACION ancho/letra:
el clamp solo empieza a crecer por encima de ~1060px de ventana, asi que
entre 561 y 1024px la letra se quedaba en su minimo mientras la columna
seguia midiendo 544-589px -> hasta 99 caracteres por renglon.
Medida la densidad real de Instrument Serif: 0,35 em por caracter.
Con max-width en EM la columna escala con la letra y el numero de
caracteres queda fijo: 23em / 0,35 = ~66 caracteres en TODOS los anchos. */
.cierre .letter p{max-width:23em;margin-inline:auto}