/* ============================================================
   MAKERSWED — estructura y movimiento medidos en adovasio.it (1440 / 768 / 390).
   Identidad: marca/BRAND-BOOK.md §4 · tokens en marca/tokens.json
   ============================================================ */
:root{
  --cream:#F4F3EF; --stone:#E5E2DA; --ink:#1C1C1A; --white:#fff; --olive:#717568; --olive-ink:#5E6256; --gold:#C9A66B; --gold-ink:#8A6A2F; --mute:#5E6256;
  --serif:'Cormorant Garamond','Playfair Display',Baskerville,Georgia,serif; /* Cormorant solo aporta la «&» (subconjunto de 1 glifo); el resto cae en Playfair */ --sans:Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:30px; --name:clamp(26px,2.43vw,35px); --cg:calc(var(--name) * .76); --ease:cubic-bezier(.7,0,.2,1); --out:cubic-bezier(.16,.85,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);font-size:16px;line-height:1.1;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;opacity:0;transition:opacity .3s cubic-bezier(.6,0,.3,1)}   /* entrada: .3 s (antes .5; O1-13 .8). La salida (body.leaving) sigue en .45 s */
body.in{opacity:1}
body.leaving{opacity:0;transition:opacity .45s}   /* O1-13: .45 s, igual que OUT en site.js */
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.serif{font-family:var(--serif);font-weight:300}
.u{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ---------- placeholders de foto (sin imágenes de terceros) ---------- */
.ph{position:relative;overflow:hidden;background:#cbbfae}
.ph::before{content:"";position:absolute;inset:0;background:var(--g)}
.ph::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.g1{--g:radial-gradient(60% 45% at 30% 30%,#f3e6d6 0,transparent 70%),radial-gradient(50% 60% at 75% 70%,#b7c6a8 0,transparent 70%),linear-gradient(160deg,#dcc9b1,#8f9a7a)}
.g2{--g:radial-gradient(55% 40% at 65% 25%,#fff4e8 0,transparent 70%),linear-gradient(180deg,#e9d6c3,#bd9a86)}
.g3{--g:radial-gradient(50% 50% at 40% 60%,#e8ecf0 0,transparent 70%),linear-gradient(170deg,#c9d6df,#8ea3b3)}
.g4{--g:radial-gradient(45% 40% at 60% 35%,#f7d9cf 0,transparent 70%),linear-gradient(200deg,#e7c4b6,#a5735f)}
.g5{--g:radial-gradient(50% 45% at 35% 30%,#efe4f3 0,transparent 70%),linear-gradient(165deg,#d7cbe0,#8f83a6)}
.g6{--g:radial-gradient(60% 40% at 50% 20%,#fbf1d9 0,transparent 70%),linear-gradient(180deg,#e6d3a8,#a58c5a)}
.g7{--g:radial-gradient(50% 50% at 55% 40%,#e5efe0 0,transparent 70%),linear-gradient(175deg,#bfd0b4,#6f8a63)}
.g8{--g:radial-gradient(45% 45% at 45% 35%,#f5e2c8 0,transparent 70%),linear-gradient(190deg,#e2c29a,#9c7250)}
.bw{filter:grayscale(1) contrast(1.05)}

/* ---------- cabecera ---------- */
.hdr{position:fixed;inset:0 0 auto 0;height:108px;z-index:60;color:var(--ink);pointer-events:none;transition:color .4s}
.hdr.light{color:var(--white)}
body.menu-open .hdr,body.filters-open .hdr{color:var(--ink)}
.hdr>*{pointer-events:auto}
.logo{position:absolute;left:50%;top:27px;height:44px;display:flex;align-items:center;transform:translateX(-50%);font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.22em;line-height:1;white-space:nowrap;transition:left .66s cubic-bezier(.15,.99,.41,1),transform .66s cubic-bezier(.15,.99,.41,1);}
body.menu-open .logo{left:302px;transform:none;transition-duration:.89s}
.menu-btn{position:absolute;right:var(--pad);top:27px;height:44px;display:flex;align-items:center;gap:35px}
.menu-btn span{font-size:16px;transition:opacity .35s,transform .35s}
.menu-btn.hide span{opacity:0;transform:translateX(8px);pointer-events:none}
.menu-btn i{display:block;width:50px;height:24px;position:relative}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .6s var(--ease)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}
body.menu-open .menu-btn i::before{transform:translateY(11.5px)}
body.menu-open .menu-btn i::after{transform:translateY(-11.5px)}

/* ---------- menú: panel blanco que baja desde arriba ---------- */
.veil{position:fixed;inset:0;z-index:50;background:rgba(229,226,218,.92);opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
body.menu-open .veil,body.filters-open .veil{opacity:1;visibility:visible;transition:opacity .6s}
.menu{position:fixed;top:0;right:0;width:81.8%;height:64vh;min-height:520px;z-index:55;background:var(--white);color:var(--ink);transform:translateY(-101%);visibility:hidden;transition:transform 1s cubic-bezier(.16,1,.3,1),visibility 0s 1s;padding-right:var(--pad)}   /* O1-17: cerrado = visibility:hidden (sin foco) tras la salida */
body.menu-open .menu{transform:none;visibility:visible;transition:transform .92s cubic-bezier(.2,1,.27,1),visibility 0s}
.menu-in{position:relative;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding-top:142px}
.menu-links{display:flex;flex-direction:column;align-items:center;justify-content:center;height:232px;padding-top:0}   /* centrada y del alto de las fotos laterales (232 px): primera y última línea caben entre el borde superior e inferior de las fotos */
.menu-links a{display:block;padding:3px 20px;font-family:var(--serif);font-weight:300;font-size:28px;line-height:32px;}   /* 6 enlaces × 38 px = 228 px ≤ 232 px */
.menu-links a.cur span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}@media (hover:hover){.menu-links a:hover span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}}
.menu-img{position:relative;width:182px;height:232px;justify-self:center}
.menu-img .pv{position:absolute;inset:0;opacity:0;transform:scale(.67);transition:transform .5s cubic-bezier(.16,.85,.24,1),opacity .35s}
.menu-img .pv.on{opacity:1;transform:none}
.menu-foot{position:absolute;left:var(--pad);right:0;bottom:26px;display:flex;justify-content:space-between;align-items:center;font-size:16px;line-height:1.1}
.menu-soc{display:flex;gap:24px;color:var(--mute)}
@media (hover:hover){.menu-soc a:hover{color:var(--ink)}}
.menu-soc .lang{color:var(--ink);margin-left:10px;text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:5px;text-decoration-thickness:1px}
.menu-cta{display:flex;align-items:center;gap:15px;padding-right:20px}
.dot{display:inline-grid;place-items:center;width:33px;height:33px;border-radius:50%;background:var(--ink);color:var(--cream);transition:transform .4s}
@media (hover:hover){.menu-cta:hover .dot{transform:translateX(4px)}}

/* ---------- pastilla inferior (filtros / pager) ---------- */
.pill{position:fixed;left:50%;bottom:35px;transform:translate(-50%,120%);width:350px;height:65px;background:var(--white);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1.1;z-index:58;transition:transform .47s cubic-bezier(.22,1,.36,1),background .4s,color .4s}
.pill.on{transform:translate(-50%,0)}
.pill sup{font-size:10px;margin-left:3px;position:relative;top:-5px;vertical-align:top;line-height:1}
.pill .c{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .4s,background .3s,opacity .3s}
.pill .c.r{right:15px}.pill .c.l{left:15px}
@media (hover:hover){.pill .c:hover{transform:scale(1.1)}}
.pill .c[disabled]{background:#767676;opacity:.9;pointer-events:none}
.pill .c svg{transition:transform .4s}
.pill.open{background:var(--ink);color:var(--cream)}
.pill.open .c{background:var(--cream);color:var(--ink)}
.pill.open .c svg{transform:rotate(180deg)}
.pill-label{cursor:pointer}

/* ---------- panel de filtros ---------- */
.filters{position:fixed;left:9.7%;width:79.5%;top:24vh;bottom:0;z-index:56;background:var(--white);transform:translateY(105%);visibility:hidden;transition:transform .44s cubic-bezier(.45,0,.55,1),visibility 0s .44s;text-align:center}   /* O1-17 */
body.filters-open .filters{transform:none;visibility:visible;transition:transform 1.28s cubic-bezier(.3,1,.5,1),visibility 0s}
.f-title{position:absolute;left:0;right:0;top:105px;font-size:18px}
.f-list{position:absolute;left:0;right:0;top:140px;display:flex;flex-direction:column;align-items:center}
.f-list a,.f-list button{display:inline-flex;align-items:center;gap:8px;padding:6px 20px;font-family:var(--serif);font-weight:300;font-size:35px;line-height:40px}
.f-list .cur span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}@media (hover:hover){.f-list a:hover span,.f-list button:hover span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}}
.f-list button svg{margin-top:4px}
.f-main{transition:opacity .6s cubic-bezier(0,0,.35,1)}
.f-sub{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .62s cubic-bezier(.08,0,.25,.91) .275s,visibility 0s .9s}
.filters.sub .f-main{opacity:0;pointer-events:none}
.filters.sub .f-sub{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .62s cubic-bezier(.08,0,.25,.91) .275s,visibility 0s}
.f-back{position:absolute;left:0;top:105px;right:0;font-size:18px;opacity:0;visibility:hidden;transition:opacity .4s}
.filters.sub .f-back{opacity:1;visibility:visible;transition-delay:.275s}
.f-title{transition:opacity .4s}
.filters.sub .f-title{opacity:0}
.f-sub-t{font-family:var(--serif);font-weight:300;font-size:35px;line-height:40px;padding:6px 20px}
.f-img{position:absolute;width:180px;height:230px;opacity:0;transition:opacity .5s}
.f-img.a{left:15.1%;top:268px}
.f-img.b{left:69.1%;top:148px}
body.filters-open .f-img{opacity:1;transition-delay:.4s}
.f-img .pv{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.f-img .pv.on{opacity:1}

/* ---------- fotos reales ---------- */
.pim{display:block;width:100%;height:100%;object-fit:cover;background:var(--stone)}
.im>.pim{height:auto}

/* ---------- botones / texto común ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 25px;border-radius:30px;font-size:16px;line-height:1;transition:background .35s,color .35s}
.btn.light{background:var(--cream);color:var(--ink);height:54px;font-size:18px;padding:0 30px}
@media (hover:hover){.btn.light:hover{background:var(--ink);color:var(--cream)}}
.btn.dark{background:var(--ink);color:var(--cream)}
@media (hover:hover){.btn.dark:hover{background:var(--white);color:var(--ink)}}

/* ---------- prensa + pie ---------- */
.press{background:var(--white);height:350px;display:flex;align-items:center;overflow:hidden;position:relative}
.marq{display:flex;gap:150px;padding-left:150px;white-space:nowrap;will-change:transform;font-size:40px;line-height:1}
.marq span{display:inline-block}
.marq .a{font-family:var(--serif);font-weight:400;letter-spacing:.14em}
.marq .b{font-family:var(--serif);font-style:italic;font-weight:300}
.marq .c{font-family:var(--sans);font-weight:500;letter-spacing:-.03em}
.marq .d{font-family:var(--serif);font-weight:400;text-align:center;line-height:.9;font-size:34px}
/* ---------- reseñas flotantes (bajo la cinta de vocabulario) ---------- */
.rev{background:var(--white);position:relative;overflow:hidden;height:max(820px,100vh);touch-action:pan-y}
.rev-t{position:absolute;left:var(--pad);top:56px;z-index:3;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-ink)}
.rev-strip{position:absolute;inset:0;list-style:none;cursor:grab;user-select:none;-webkit-user-select:none}
.rev-strip.drag{cursor:grabbing}
.rv-card{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:22px 20px 18px;border-radius:10px;border:1px solid rgba(28,28,26,.14);background:rgba(244,243,239,.94);color:var(--ink);overflow:hidden;will-change:transform;opacity:0;transition:border-color .5s cubic-bezier(0,0,.4,1),background-color .5s cubic-bezier(0,0,.4,1)}
@media (hover:hover){.rv-card:hover{border-color:rgba(28,28,26,.05);background:rgba(244,243,239,1)}}
.rv-card blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15.5px;line-height:1.3;letter-spacing:0}
.rv-by{display:flex;flex-direction:column;gap:5px}
.rv-by b{font:500 12px/1.1 var(--sans);color:var(--ink)}
.rv-by span{font:400 9px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-ink)}
@media (max-width:767px){.rev{height:620px}   /* cartas de 372 px con ~95 px de aire arriba y abajo (antes 92vh = 160 px en blanco) */.rev-t{top:40px}.rv-card blockquote{font-size:16px}}
.foot{background:var(--stone);height:min(1088px,120vh);min-height:640px;position:relative;padding:55px var(--pad) 30px}
.f-txt{font-family:var(--serif);font-weight:300;font-size:var(--name);line-height:1.15;max-width:340px}
.foot .btn{margin-top:36px}
.f-mark{position:absolute;left:50%;top:55px;transform:translateX(-50%);width:54px;height:auto;opacity:.85}
.f-nav{position:absolute;right:calc(var(--pad) + 5px);top:55px;display:grid;grid-template-columns:175px 130px;row-gap:0;font-size:16px;line-height:1.1}
.f-nav a{display:block;padding:12px 0;width:max-content}
.f-nav a.cur{text-decoration:underline;text-underline-offset:5px}@media (hover:hover){.f-nav a:hover{text-decoration:underline;text-underline-offset:5px}}
.f-nav .s{color:var(--mute)}
.f-bot{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;display:flex;justify-content:space-between;color:var(--mute);font-size:16px}
@media (hover:hover){.f-bot a:hover{color:var(--ink)}}

/* ---------- intro (medida en la referencia a 1440x900) ---------- */
.pre{--slot:40px;--gap:10px;position:fixed;inset:0;z-index:100;background:var(--cream);overflow:hidden}
.pre-logo{position:absolute;left:50%;top:50%;width:min(100px,22vw);transform:translate(-50%,-50%);overflow:visible}
.pre-logo .l0{fill:rgba(28,28,26,.14)}.pre-logo .l1{fill:var(--ink)}   /* logo de MAKERSWED (M + destello), relleno */
.pre-count{position:absolute;left:40px;top:45vh;height:var(--slot);display:flex;overflow:hidden;font-family:var(--serif);font-size:35px;line-height:var(--slot)}
.pre-col{width:20px}.pre-col span{display:block;height:var(--slot);margin-bottom:var(--gap)}
.pre-pct{position:absolute;right:15px;top:calc(45vh + 25px);font-family:var(--serif);font-size:35px;line-height:40px}
.pre-box{position:absolute;left:50%;top:52.3vh;width:max(24.65vw,calc(56.4vh*.62));height:56.4vh;border:1px solid rgba(28,28,26,.2);overflow:hidden}   /* foco: ancho ≥ 0,62 del alto (en tableta vertical 24,65 vw daba una tira de 0,3 que cortaba las caras) */
.pre-box .pv{position:absolute;inset:0;opacity:0}.pre-box .pv.on{opacity:1}
body.intro .hdr{opacity:0}
.wm{display:block;overflow:hidden;padding:.14em 0 .2em;margin:-.14em 0 -.2em}
.wi{display:block;will-change:transform}
@media (max-width:767px){.pre{--slot:30px;--gap:8px}.pre-count{left:16px;font-size:26px}.pre-pct{right:16px;top:calc(45vh + 20px);font-size:26px;line-height:30px}.pre-box{width:min(62vw,calc(54vh*.75));height:min(54vh,calc(62vw*1.5));top:50vh}}

/* ============================ HOME ============================ */
.hero{position:relative;height:230vh;color:var(--white)}
.hero-bg{position:sticky;top:0;height:100vh;overflow:hidden;background:#3d4a2d}
.hero-bg #heroImg{position:absolute;inset:-8% 0;will-change:transform;background:#3d4a2d}
.hero-dim{position:absolute;inset:0;background:#000;opacity:.24;pointer-events:none}
.hero-words{position:absolute;inset:0;pointer-events:none;will-change:transform}
.hero-words p{position:absolute;font-family:var(--serif);font-weight:300;font-size:clamp(56px,10vw,160px);line-height:.92;letter-spacing:-.015em;white-space:nowrap}
.hero-words .w1{left:10vw;top:11vh}.hero-words .w2{left:36vw;top:30vh}.hero-words .w3{left:4vw;top:52vh}.hero-words .w4{left:12vw;top:73vh}
/* escritorio: como la referencia (adovasio.it a 1440x900: 216 px = 15vw, interlineado 1,175, cada línea es una máscara de ancho completo que recorta a su caja;
   paso entre líneas 0,2315em menos que su altura; x=30 px, y=100 px; alineación centro / izquierda / derecha / centro) */
@media (min-width:768px){
  .hero-words{inset:11.11vh 3.125vw auto 2.0833vw}
  #heroWords p{position:relative;left:auto;top:auto;display:flex;overflow:hidden;font-size:15vw;line-height:1.175;height:1.175em;margin:0 0 0 0}
  #heroWords p+p{margin-top:-.2315em}
  #heroWords .w1,#heroWords .w4{justify-content:center}#heroWords .w2{justify-content:flex-start}#heroWords .w3{justify-content:flex-end}
  #heroWords .wm{padding:0;margin:0;overflow:visible}
}
.ch{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .18em;margin:-.14em 0 -.18em}
.ch>span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--out)}
body.ready .ch>span{transform:none}
.hero-pin{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none}
.hero-thumb{overflow:hidden;position:absolute;left:50%;top:124vh;width:min(17.4vw,250px);aspect-ratio:247/311;transform:translateX(-50%);margin-left:14px}
.hero-line{position:absolute;left:var(--pad);right:0;top:170vh;height:1px;background:rgba(255,255,255,.75)}
.hero-copy{position:absolute;left:50%;top:173vh;width:min(68vw,980px);margin-left:14px;transform:translateX(-50%);text-align:center;font-weight:300;font-size:clamp(26px,2.9vw,44.64px);line-height:1.15}
.hero-cta{position:absolute;left:50%;top:191vh;margin-left:14px;transform:translateX(-50%);pointer-events:auto}
.hero-bar{position:absolute;left:var(--pad);right:var(--pad);top:calc(230vh - 62px);display:flex;justify-content:space-between;font-size:18px;pointer-events:auto}
@media (hover:hover){.hero-bar a:hover{text-decoration:underline;text-underline-offset:5px}}
.feat{position:relative;padding-top:18vh}
.wed{position:relative;height:max(135vh,var(--wh,0px))}
.rail{position:absolute;inset:0;z-index:5;pointer-events:none}
/* nombres: una sola capa fija (como en la referencia). La «&» no se mueve; cambian los nombres de los lados. Las fotos pasan por encima. */
.names-fixed{position:fixed;inset:0;z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);font-family:var(--serif);font-weight:300;font-size:var(--name);line-height:1.15;opacity:0}
.names-fixed.on{opacity:1}
.names-fixed .nn{position:relative;display:block;width:0}
.names-fixed .nl,.names-fixed .nr{position:absolute;top:50%;overflow:hidden;white-space:nowrap;padding:.25em 0}
.names-fixed .nl{right:100%}.names-fixed .nr{left:100%}
.names-fixed .ni{display:block;will-change:transform}
.names-fixed em{display:block;width:100%;overflow:hidden;text-align:center;white-space:nowrap;font-style:normal;font-size:1.2em;line-height:1}
.names em{font-size:1.2em}
@media (min-width:768px){.rail{display:none}}
@media (max-width:767px){.names-fixed{display:none}}
.names{position:sticky;top:0;height:100vh;pointer-events:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);font-family:var(--serif);font-weight:300;font-size:var(--name);line-height:1.15}
.names span:last-child{text-align:right}
.wed .im{position:absolute;z-index:2;will-change:transform;box-shadow:0 10px 34px rgba(28,28,26,.11)}
.wed-link{position:absolute;inset:0;z-index:3}
/* halo de luz al pasar el cursor (medido en adovasio.it): banda a -45deg que cruza la foto de la esquina inf. dcha. a la sup. izda. */
@media (hover:hover) and (pointer:fine) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  .wed .im{overflow:hidden}
  .wed .im::after{content:"";position:absolute;z-index:1;pointer-events:none;width:200vw;height:calc(var(--lh,0px)*.5);top:112.5%;left:112.5%;
    background:linear-gradient(rgba(255,243,218,0) 0%,rgba(255,243,218,.12) 35%,rgba(255,243,218,.22) 50%,rgba(255,243,218,.12) 65%,rgba(255,243,218,0) 100%);
    transform:translate(0,0) translate(-50%,-50%) translate(42px,42px) rotate(-45deg)}
  .wed .im.lit::after{opacity:0;transform:translate(calc(-1*(var(--lw,0px) + 84px)),calc(-1*(var(--lh,0px) + 84px))) translate(-50%,-50%) translate(42px,42px) rotate(-45deg);
    transition:transform .6s cubic-bezier(.25,0,.25,1),opacity .4s cubic-bezier(.25,0,.25,1) .4s}
  .wed .im img{transition:transform .5s cubic-bezier(.445,.05,.55,.95)}
  .wed .im.lit img{transform:scale(1.04)}
}
.ring{position:fixed;left:352px;bottom:174px;width:104px;height:104px;z-index:30;opacity:0;transition:opacity .5s}
.ring.on{opacity:1}
.ring svg.r{position:absolute;inset:0;width:100%;height:100%;transform:rotate(90deg)}
.ring circle{fill:none;stroke:rgba(28,28,26,.22);stroke-width:1}
.ring circle.p{stroke:var(--gold-ink)}
.ring button{position:absolute;left:50%;width:22px;height:22px;margin-left:-11px;display:grid;place-items:center}
.ring .up{top:14px}.ring .dn{bottom:14px}

/* ============================ ABOUT ============================ */
.a-hero{position:relative;height:100vh;display:grid;place-items:center;text-align:center}
.a-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6.3vw,100px);line-height:1.2;letter-spacing:-.012em;padding:0 var(--pad)}
.wd{display:inline-block;white-space:nowrap}
.a-hero h1 .ln{display:block}
.a-collage{position:relative;height:100vh;margin-top:-6vh}
.a-collage .im{position:absolute;will-change:transform}
.a-label{text-align:center;font-family:var(--serif);font-size:35px;font-weight:400;line-height:40px;padding:12vh 0 8vh}
.a-gloss{text-align:center;font-size:16px;color:var(--olive-ink);margin:-4vh 0 8vh}
.a-rule{height:1px;background:var(--gold);margin:0 var(--pad)}
.a-lead{font-family:var(--serif);font-weight:375;font-size:clamp(26px,3.8vw,55px);line-height:1.1;text-align:center;padding:24px var(--pad) 0;max-width:1425px;margin:0 auto}
.legacy{position:relative;height:340vh;margin-top:18vh}
.legacy-pin{position:sticky;top:0;height:100vh;overflow:hidden;color:var(--white)}
.legacy-pin .lg-bg{position:absolute;inset:0}
.lg-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.legacy-words{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-weight:300;font-size:clamp(88px,14.6vw,211px);line-height:1.1;letter-spacing:-.02em;text-align:center;will-change:transform}
.legacy-words span{display:block}
.who{position:relative;padding:20vh 0 12vh}
.person{position:relative;display:grid;grid-template-columns:66.5% 1fr;align-items:start;gap:0;margin-bottom:24vh}
.pf{position:relative;overflow:hidden;background:var(--stone)}
.person .pf{width:79%;aspect-ratio:1/1.13}
.person .tx{padding:0 30px 0 0;position:sticky;top:26vh}
.person .author{font-weight:500;margin-top:16px}
.person h2{font-family:var(--serif);font-weight:300;font-size:35px;line-height:40px;margin-bottom:20px}
.person p{font-size:20px;line-height:25px}
.svc{position:relative;padding:14vh 0 10vh;text-align:center}
.svc .bio{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.43vw,35px);line-height:1.15;width:min(627px,86vw);margin:0 auto 24vh}
.svc h2{font-size:16px;font-weight:400;margin-bottom:38px}
.svc h3{font-size:18px;font-weight:400;line-height:26px}
.band{position:relative;height:110vh;overflow:hidden}
.band .pf{position:absolute;left:0;right:0;top:-10%;height:120%;will-change:transform}
.testi{position:relative;padding:16vh 0 14vh;overflow:hidden}
.t-track{display:grid}
.t-slide{grid-area:1/1;visibility:hidden;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:0;padding:0 var(--pad)}
.t-slide .pf{width:82%;aspect-ratio:1/.94}
.t-slide blockquote{font-size:clamp(20px,2.2vw,32px);line-height:1.15;max-width:640px}
.t-slide .qm{font-family:var(--serif);font-size:120px;line-height:.6;display:block;margin-bottom:24px}
.t-slide cite{display:block;font-style:normal;font-size:20px;line-height:25px;margin-top:40px}
.t-dots{display:flex;gap:16px;justify-content:center;margin-top:60px}
.t-dots button{width:9px;height:9px;border-radius:50%;background:rgba(28,28,26,.25);transition:background .3s}
.t-dots button.on{background:var(--gold-ink)}
.form{position:relative;text-align:center;padding:16vh var(--pad) 18vh}
.form h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.5vw,65px);line-height:1.15;max-width:780px;margin:0 auto 34px}
.form p{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.43vw,35px);line-height:1.15;max-width:760px;margin:0 auto 40px}
.form .btn{height:52px}


/* ---- About: colecciones, proceso, principios ---- */
.svc h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1.15;margin-bottom:54px}
.svc h2.sub{font-size:clamp(24px,2.43vw,35px);margin:16vh 0 26px}
.coll-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 calc(var(--pad)*2);width:min(1000px,calc(100% - 2*var(--pad)));margin:0 auto;text-align:left}
.coll{border-top:1px solid var(--gold);padding:26px 0 0}
.coll .n{font-size:14px;color:var(--olive-ink);margin-bottom:22px}
.coll h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.43vw,35px);line-height:1.15;margin-bottom:22px}
.coll p{font-size:18px;line-height:26px;max-width:380px}
.coll .incl{margin-top:22px;color:var(--olive-ink);font-size:16px;line-height:23px}
.svc .enh{font-size:18px;line-height:28px;padding:0 var(--pad)}
.svc .note{font-size:16px;line-height:23px;color:var(--olive-ink);max-width:520px;margin:30px auto 0;padding:0 var(--pad)}
.sec-t{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1.15;text-align:center;margin-bottom:70px;padding:0 var(--pad)}
.t-tx{max-width:560px}
.t-tx .t-n{font-size:14px;color:var(--olive-ink);margin-bottom:20px}
.t-tx h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.9vw,42px);line-height:1.15;margin-bottom:24px}
.t-tx p:last-child{font-size:18px;line-height:27px}
.rules{padding:10vh 0 6vh}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--pad);width:min(1365px,calc(100% - 2*var(--pad)));margin:0 auto}
.rules-grid>div{border-top:1px solid var(--gold);padding-top:26px}
.rules h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.43vw,35px);line-height:1.15;margin-bottom:26px}
.rules li{list-style:none;font-size:18px;line-height:26px;margin-bottom:18px;max-width:400px}
.rules b{font-weight:500}
.form h2{font-weight:400}
@media (max-width:1023px){.coll-list,.rules-grid{grid-template-columns:1fr;gap:44px}.coll p,.rules li{max-width:none}}

/* ============================ CONTACT ============================ */
.c-bg{position:fixed;inset:0;z-index:0}
.c-bg #cbg{position:absolute;inset:-6% 0}
.c-bg #cbg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(28,28,26,.64),rgba(28,28,26,.64) 170px,rgba(28,28,26,.35) 270px,rgba(28,28,26,.35))}   /* O1-02: franja oscura bajo la cabecera clara (blanco ≥ 4,5:1 sobre un cielo casi blanco); #cbg sobresale 6 % por arriba y se mueve ±3 % (paralaje), de ahí los 170/270 px; el resto, el .35 de siempre */
.c-wrap{position:relative;z-index:1;padding-top:40vh}
.c-panel{position:relative;width:min(947px,calc(100% - 60px));margin:0 auto;background:var(--cream);padding:75px 125px 90px;text-align:center}
.c-panel h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,4.5vw,65px);line-height:1.15;margin-bottom:78px}
.c-intro{font-size:18px;line-height:26px;max-width:560px;margin:-44px auto 54px}
.c-form{display:block}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fld{position:relative;display:block}
.fld input,.fld select,.fld textarea{width:100%;height:67px;padding:0 20px;background:var(--white);border:1px solid transparent;border-radius:5px;font:300 16.4px/1.15 var(--sans);color:var(--ink);outline:0;appearance:none;-webkit-appearance:none;transition:border-color .3s}
.fld textarea{height:362px;padding:22px 20px;resize:vertical;font-weight:300;text-align:left}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(28,28,26,.6)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold-ink)}
.fld.err input,.fld.err select{border-color:#b3261e}
.fld select{cursor:pointer;color:rgba(28,28,26,.6)}
.fld select.has{color:var(--ink)}
.fld .chev{position:absolute;right:20px;top:50%;margin-top:-3px;pointer-events:none}
.fld .cal{position:absolute;left:20px;top:50%;margin-top:-8px;pointer-events:none}
.fld.date input{padding-left:44px}
.fld.wide{grid-column:1/-1}
.c-submit{grid-column:1/-1;margin-top:26px}
.c-submit button{height:48px;padding:0 30px;border-radius:30px;background:var(--ink);color:var(--cream);font-size:16px;transition:background .35s,color .35s,box-shadow .35s}
@media (hover:hover){.c-submit button:hover{background:var(--white);color:var(--ink)}}
.c-mail{display:inline-block;margin-top:56px;text-decoration:underline;text-underline-offset:4px}
.c-ok{display:none;padding:130px 0 120px}
.c-ok h2{font-family:var(--serif);font-weight:500;font-size:35px;line-height:40px;margin-bottom:8px}
.c-ok p{font-family:var(--serif);font-weight:300;font-size:35px;line-height:40px;margin-bottom:50px}
.c-panel.sent .c-ok{display:block}.c-panel.sent .c-form-wrap{display:none}
.c-after{position:relative;z-index:1;margin-top:0}

/* ============================ PROYECTO ============================ */
.p-hero{position:relative;height:100vh;overflow:hidden;color:var(--white)}
.p-hero #pImg{position:absolute;inset:-6% 0;will-change:transform;background:#2c2c2a}
@media (max-width:767px),(prefers-reduced-motion:reduce){.p-hero #pImg{inset:0}}   /* foco: el 6 % de sobra por arriba y por abajo es solo para el paralaje (≥ 768 px y con movimiento); sin él recortaba la cabeza de la pareja para nada */
.p-hero .dim{position:absolute;inset:0;background:#000;opacity:.3}
.p-hero h1{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-weight:300;font-size:clamp(88px,15vw,216px);line-height:1.02;letter-spacing:-.02em;text-align:center}
.p-hero h1 .amp{display:block}
.p-arr{position:fixed;top:50%;width:45px;height:45px;margin-top:-22px;border-radius:50%;background:var(--white);color:var(--ink);display:grid;place-items:center;z-index:40;transition:transform .4s,opacity .4s,background .3s,color .3s}
.p-arr.l{left:30px}.p-arr.r{right:45px}
@media (hover:hover){.p-arr:hover{transform:scale(1.1)}}
.p-arr.dk{background:var(--ink);color:var(--white)}
.p-sum{font-family:var(--serif);font-weight:300;font-size:var(--name);line-height:1.15;text-align:center;width:min(760px,86vw);margin:0 auto;padding:23vh 0 8vh}
.p-story{width:min(1000px,88vw);margin:14vh auto 0}
.p-lede{font-size:20px;line-height:30px;color:var(--olive-ink);max-width:620px;margin:0 auto 10vh;text-align:center}
.p-sec{display:grid;grid-template-columns:1fr 1.25fr;gap:0 60px;padding:34px 0;border-top:1px solid var(--gold)}
.p-sec h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.43vw,35px);line-height:1.15}
.p-sec p{font-size:18px;line-height:28px}
.p-film{width:min(1100px,92vw);margin:16vh auto 0;text-align:center}
.p-film h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.43vw,35px);line-height:1.15;margin-bottom:34px}
.p-video{position:relative;aspect-ratio:16/9;background:#111}
.p-video .fc-poster{position:absolute;inset:0;margin:0;aspect-ratio:auto}
.p-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}
.g-row{display:flex;align-items:flex-start;margin-bottom:14vh}
.g-row.end{align-items:flex-end}
.g-row .im{position:relative;will-change:transform}
.p-next{position:absolute;left:0;right:0;bottom:0;height:60vh;display:block;overflow:hidden}
.p-meta{display:grid;grid-template-columns:repeat(3,1fr);width:min(956px,90vw);margin:0 auto;text-align:center;row-gap:8px}
.p-meta dt{font-size:14px;color:var(--mute);margin-bottom:8px}
.p-meta dd{font-size:18px;line-height:22px}
.p-cred{width:min(956px,90vw);margin:60px auto 0;text-align:center}
.p-cred h3{font-size:16px;font-weight:400;color:var(--mute);margin-bottom:14px}
.p-cred button{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:inline-grid;place-items:center;transition:transform .4s}
.p-cred button svg{transition:transform .4s}
.p-cred.open button svg{transform:rotate(45deg)}
.p-cred-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));row-gap:26px;margin-top:26px}
.p-cred-l dt{font-size:14px;color:var(--mute);margin-bottom:6px}
.p-cred-l dd{font-size:18px}
.p-cred-l a{text-decoration:underline;text-underline-offset:4px}
.p-gal{position:relative;padding-top:14vh}
.g-set{position:relative}
.g-set .im{position:absolute;will-change:transform}
.p-end{position:relative;height:150vh}
.p-end .side{position:absolute;top:calc(50vh - 34px);font-family:var(--serif);font-size:22px;line-height:24px;font-weight:400}
.p-end .side.l{left:125px}.p-end .side.r{left:auto;right:115px;text-align:right}
.p-end .side i{font-style:normal;display:block;white-space:pre}

/* ============================ CATEGORÍA ============================ */
.k-wrap{position:relative;height:100vh;overflow:hidden}
.k-track{position:absolute;left:0;bottom:0;display:flex;height:540px;will-change:transform}
.k-item{position:relative;flex:0 0 auto;height:540px;overflow:hidden;margin-right:0}
.k-item .kp{position:absolute;top:0;bottom:0;left:-16px;right:-16px;will-change:transform}
.k-item .kp .pim{height:100%}
.k-item a{position:absolute;inset:0;z-index:2}

/* ============================ TABLET (<=1023) ============================ */
@media (max-width:1023px){
  .menu{width:76%;height:49.4vh;min-height:0}
  .menu-in{padding-top:120px}
  .menu-img{width:141px;height:180px}
  .menu-links{height:180px}
  .menu-links a{font-size:22px;line-height:26px;padding:2px 20px}   /* 6 × 30 px = 180 px = alto de las fotos */
  .menu-foot{bottom:52px}
  body.menu-open .logo{left:190px}
  .f-nav{grid-template-columns:auto auto;column-gap:22px;right:var(--pad)}
  .f-txt{max-width:215px}
  .f-img{width:100px;height:128px}
  .f-img.a{left:2%}.f-img.b{left:80%}
  .ring{display:none}
  .filters{left:9.7%;width:79.5%}
  .person{grid-template-columns:1fr;gap:24px}
  .person .tx{position:static;padding:0 var(--pad)}
  .person .pf{width:100%}
  .t-slide{grid-template-columns:1fr;gap:40px}
  .t-slide .pf{width:100%}
  .c-panel{padding:60px 40px 80px}
  .k-item,.k-track{height:440px}
  .p-arr.r{right:30px}
}
/* ============================ MÓVIL (<=767) ============================ */
@media (max-width:767px){
  :root{--pad:16px}
  .logo{font-size:22px;top:6px;left:8px;transform:none;justify-content:flex-start;width:160px}
  .hdr{height:56px}
  .menu-btn{top:6px;right:15px;gap:0}.menu-btn span{display:none}.menu-btn i{width:50px}
  body.menu-open .logo{left:8px}
  .menu{width:100%;height:62vh;min-height:0;padding-right:0}
  .menu-in{display:block;padding-top:110px;text-align:center}
  .menu-img{display:none}
  .menu-links{padding-top:0;height:auto}
  .menu-links a{font-size:26px;line-height:30px;padding:6px 20px}
  .menu-foot{left:0;right:0;bottom:44px;flex-direction:column-reverse;gap:26px}
  .menu-cta{padding:0;gap:0}
  .menu-cta .lbl{display:none}
  .menu-cta .m-btn{display:inline-flex}
  .menu-soc{justify-content:center}
  .pill{width:calc(100% - 32px);bottom:30px}
  .filters{left:0;width:100%;top:14vh}
  .m-btn-dot{display:none}
  .f-back{top:70px}
  .f-title{top:70px}
  .f-list{top:105px}
  .f-list a,.f-list button{font-size:26px;line-height:30px}
  .f-sub-t{font-size:26px}
  .f-img{display:none}
  .press{height:220px}.marq{font-size:28px;gap:90px}
  .foot{height:auto;min-height:0;padding-bottom:110px}
  .f-txt{max-width:none;order:3;margin-top:50px}
  .foot{display:flex;flex-direction:column}
  .f-nav{position:relative;right:auto;top:auto;grid-template-columns:1fr 1fr;order:1;margin-bottom:8px}
  .f-nav a{padding:8px 0}
  .foot .btn{order:4;align-self:flex-start}
  .f-mark{position:relative;left:auto;top:auto;transform:none;margin:56px auto 30px;order:5}
  .f-bot{position:relative;left:auto;right:auto;bottom:auto;margin-top:40px;order:6}
  .hero{height:calc(124vh + 112px)}   /* termina 58 px debajo del botón: sin colchón en blanco antes de los trabajos */
  .hero-words p{font-size:11.5vw}
  .hero-words .w1{left:6vw;top:14vh}.hero-words .w2{left:20vw;top:32vh}.hero-words .w3{left:4vw;top:50vh}.hero-words .w4{left:16vw;top:68vh}
  .hero-thumb{display:none}
  .hero-line{top:100vh;display:none}
  .hero-copy{top:104vh;width:90vw;margin-left:0;font-size:26px;color:var(--ink)}
  .hero-cta{top:124vh;margin-left:0}
  .hero-bar{display:none}
  .hero-pin{background:linear-gradient(transparent 100vh,var(--cream) 100vh)}
  .btn.light{background:var(--white)}
  .feat{padding-top:0}
  .wed{height:auto;padding:0 0 10vh;display:flex;flex-direction:column;align-items:center}
  .rail{position:static;order:2}
  .names{position:static;height:auto;display:flex;justify-content:center;gap:.35em;padding:22px 0 0;font-size:26px}
  .names span:last-child{text-align:left}
  .wed .im{position:relative!important;left:auto!important;top:auto!important;width:calc(100% - 30px)!important;transform:none!important;order:1}
  .wed .im:nth-of-type(n+3){display:none}
  .a-hero h1{font-size:10.6vw;line-height:1.12}
  .a-lead{font-size:26px}
  .legacy{height:300vh}
  .legacy-words{font-size:19vw}
  .person{margin-bottom:12vh}
  .person .tx{padding:0 16px}
  .person p{font-size:16px;line-height:20px}
  .c-panel{width:100%;padding:60px 16px 80px}
  .c-grid{grid-template-columns:1fr}
  .c-wrap{padding-top:28vh}
  .k-wrap{height:auto;overflow:visible}
  .k-track{position:relative;display:grid;grid-template-columns:1fr 1fr;height:auto;gap:8px;padding:70px 8px 110px;transform:none!important}
  .k-item{width:auto!important;height:auto!important;aspect-ratio:1/1.35}
  .p-arr{width:34px;height:34px;margin-top:-17px}
  .p-arr.l{left:14px}.p-arr.r{right:14px}
  .p-hero h1{font-size:15.5vw;justify-content:flex-start;padding-top:12vh;line-height:1.05;overflow-wrap:normal;word-break:keep-all}
  .p-meta{grid-template-columns:1fr;row-gap:28px}
  .p-cred-l{grid-template-columns:1fr}
  .g-row{display:block;margin-bottom:0}
  .g-row .im{flex:none!important;width:calc(100% - 30px)!important;margin:0 auto 16px!important;transform:none!important;opacity:1!important}
  .p-sec{grid-template-columns:1fr;gap:14px}
  .p-story{margin-top:10vh}
  .p-sum{padding:16vh 0 6vh}
  .p-meta{grid-template-columns:1fr!important}
  .p-end{height:auto;padding:14vh 0}
  .p-end .side{position:relative;left:auto!important;right:auto!important;top:auto;text-align:center!important;margin-bottom:10px}
  .t-slide{padding:0 16px}
}
@media (max-width:767px){.menu-cta .m-btn{display:inline-flex}}
@media (min-width:768px){.menu-cta .m-btn{display:none}}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01s!important}
  .ch>span{transition:none}
}

/* ---------- revelados de texto (medidos en la referencia) ---------- */
.rv-mask{-webkit-mask-image:linear-gradient(115deg,#000 0,#000 33%,transparent 66%,transparent 100%);mask-image:linear-gradient(115deg,#000 0,#000 33%,transparent 66%,transparent 100%);-webkit-mask-size:300% 300%;mask-size:300% 300%;-webkit-mask-position:100% 100%;mask-position:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.rv-mask.done{-webkit-mask-image:none;mask-image:none}
.ln-m{display:block;overflow:hidden;padding:.12em 0;margin:-.12em 0}
.ln-i{display:block;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.rv-mask{-webkit-mask-image:none;mask-image:none}}

.t-slide.on{visibility:visible}
.t-tx .ln-m{padding:.14em 0;margin:-.14em 0}

/* ---------- cursor y sonido (≥1025 px, puntero fino) ---------- */
.cur-dot,.cur-ring,.cur-text,.cur-hint,.cur-tdot{position:fixed;left:50%;top:50%;pointer-events:none!important;opacity:0}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-dot,.cur-ring{border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:opacity .4s cubic-bezier(.64,.1,0,1)}
.cur-dot{z-index:161;width:4px;height:4px;background:#fff}
.cur-dot.slash{transform:translateY(-50%) skew(-30deg);border-radius:0;width:2px;height:10px}
.cur-dot.hide,.cur-ring.hide,.cur-dot.trailhide{opacity:0!important}
.cur-ring{z-index:160;width:36px;height:36px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.04);transition:width .4s cubic-bezier(.64,.1,0,1),height .4s cubic-bezier(.64,.1,0,1),opacity .4s cubic-bezier(.64,.1,0,1),background-color .35s cubic-bezier(.64,.1,0,1),border-color .35s cubic-bezier(.64,.1,0,1)}
.cur-ring.zero{width:0;height:0}
.cur-ring.photo{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
.cur-ring.has-text,.cur-ring.big{width:48px;height:48px}
.cur-text,.cur-hint{z-index:162;white-space:nowrap;font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;transition:opacity .3s,transform .3s}
.cur-text{transform:translate(50px,-50%) scale(0)}
.cur-text.on{opacity:1;transform:translate(50px,-50%) scale(1)}
.cur-text.left{text-align:right;transform:translate(calc(-100% - 50px),-50%) scale(0)}
.cur-text.left.on{transform:translate(calc(-100% - 50px),-50%) scale(1)}
.cur-hint{z-index:125;transform:translate(calc(24px + 12px),-50%) scale(0)}
.cur-hint.on{opacity:1;transform:translate(36px,-50%) scale(1)}
.cur-hint.l.on{transform:translate(calc(-100% - 36px),-50%) scale(1)}
.cur-trail{position:fixed;inset:0;width:100%;height:100%;z-index:158;pointer-events:none;opacity:0;transition:opacity .3s}
.cur-trail.on{opacity:1}.cur-trail.off{opacity:0}
.cur-tdot{z-index:161;left:5px;top:6px;width:4px;height:4px;border-radius:50%;background:var(--gold);will-change:transform;transition:opacity .3s}
.cur-tdot.on{opacity:1}.cur-tdot.off{opacity:0}
.snd{position:fixed;left:var(--pad);bottom:28px;z-index:40;display:flex;align-items:center;gap:10px;height:30px;font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;opacity:.7;transition:opacity .2s ease-out}
@media (hover:hover){.snd:hover{opacity:1}}
.snd i{display:block;width:2px;height:12px;background:currentColor;transform-origin:50% 50%;animation:snd 1.1s ease-in-out infinite}
.snd i:nth-child(2){animation-delay:-.3s}.snd i:nth-child(3){animation-delay:-.6s}.snd i:nth-child(4){animation-delay:-.9s}
.snd.off i{animation:none;transform:scaleY(.2)}.snd i+span{margin-left:2px}.snd span{margin-left:6px}
@keyframes snd{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@media (max-width:767px),(pointer:coarse){.cur-dot,.cur-ring,.cur-text,.cur-hint,.cur-trail,.cur-tdot{display:none!important}}
@media (prefers-reduced-motion:reduce){.snd i{animation:none;transform:scaleY(.5)}}

/* ---------- Colecciones ---------- */
.cx{position:relative;padding:14vh 0 6vh}
.cx-row{position:relative;display:grid;grid-template-columns:66.5% 1fr;align-items:start;margin-bottom:24vh}
.cx-row .pf{width:79%;aspect-ratio:1/1.13}
.cx-row .tx{padding:0 30px 0 0;position:sticky;top:26vh}
.cx-row.alt{grid-template-columns:1fr 66.5%}
.cx-row.alt .pf{grid-column:2;grid-row:1;width:79%;justify-self:end}
.cx-row.alt .tx{grid-column:1;grid-row:1;padding:0 0 0 var(--pad)}
.cx-row .n{font-size:14px;color:var(--olive-ink);margin-bottom:22px}
.cx-row h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,2.9vw,42px);line-height:1.12;margin-bottom:22px}
.cx-row .tx>p:not(.n){font-size:20px;line-height:25px;max-width:520px}
.cx-incl{list-style:none;margin-top:28px;max-width:520px}
.cx-incl li{border-top:1px solid rgba(201,166,107,.55);padding:13px 0 12px;font-size:17px;line-height:23px;color:var(--olive-ink)}
.cx-incl li:last-child{border-bottom:1px solid rgba(201,166,107,.55)}
.cx-note{margin-top:26px;font-size:16px;line-height:23px;color:var(--olive-ink);max-width:520px}.cx-note b{font-weight:500;color:var(--ink)}
.same{padding:6vh 0 18vh;text-align:center}
.same-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 calc(var(--pad)*1.4);width:min(1240px,calc(100% - 2*var(--pad)));margin:0 auto;text-align:left}
.same-grid>div{border-top:1px solid var(--gold);padding-top:24px}
.same .no,.steps .no{display:block;font-size:14px;color:var(--olive-ink);margin-bottom:34px}
.same h3,.steps h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.1vw,30px);line-height:1.15;margin-bottom:16px}
.same p,.steps li p{font-size:17px;line-height:24px;max-width:280px}
.cx-enh{padding-bottom:16vh}
.steps{padding:6vh 0 20vh;text-align:center}
.steps-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 calc(var(--pad)*2);width:min(1000px,calc(100% - 2*var(--pad)));margin:0 auto;text-align:left}
.steps-list li{border-top:1px solid var(--gold);padding-top:24px}
.steps-more{display:inline-block;margin-top:60px;font-size:16px}
.steps-more span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}
@media (max-width:1023px){.same-grid{grid-template-columns:repeat(2,1fr);gap:44px calc(var(--pad)*1.4)}.steps-list{grid-template-columns:1fr;gap:44px}}
@media (max-width:767px){
  .cx-row,.cx-row.alt{grid-template-columns:1fr;gap:24px;margin-bottom:12vh}
  .cx-row .pf,.cx-row.alt .pf{width:100%;grid-column:auto;grid-row:auto;justify-self:auto}
  .cx-row .tx,.cx-row.alt .tx{position:static;padding:0 16px;grid-column:auto;grid-row:auto}
  .cx-row .tx>p:not(.n){font-size:16px;line-height:20px}.cx-incl li{font-size:15px}
  .same-grid{grid-template-columns:1fr}.same p,.steps li p{max-width:none}
}

/* ---------- configurador de comisión ---------- */
.q-form{text-align:left}
.q-prog{font-size:14px;color:var(--olive-ink);margin-bottom:34px;text-align:center;min-height:16px}
.q-step{display:none;border:0;padding:0;margin:0;min-width:0}
.q-step.on{display:block}
.q-step legend{display:block;width:100%;text-align:center;font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.15;margin-bottom:40px}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.q-hint{text-align:center;font-size:14px;color:var(--olive-ink);margin-top:22px}
.q-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.q-opts.three{grid-template-columns:1fr}
.opt{position:relative;display:block;padding:22px 24px 22px;background:var(--white);border:1px solid transparent;border-radius:5px;cursor:pointer;transition:border-color .3s}
@media (hover:hover){.opt:hover{border-color:rgba(28,28,26,.25)}}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:checked){border-color:var(--gold-ink)}
.opt:has(input:focus-visible){outline:2px solid var(--gold-ink);outline-offset:2px}
.o-t{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin-bottom:8px}
.o-d{display:block;font-size:15px;line-height:21px;color:var(--olive-ink)}
.q-step.err .opt{border-color:#b3261e55}
.q-rec{border-top:1px solid var(--gold);padding-top:26px;margin-bottom:26px;text-align:center}
.q-rec h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,38px);line-height:1.15;margin-bottom:14px}
.q-rec p{font-size:18px;line-height:26px;max-width:560px;margin:0 auto}
.q-rec .q-sum{margin-top:18px;font-size:14px;color:var(--olive-ink)}
.q-note{font-size:15px;line-height:22px;color:var(--olive-ink);text-align:center;max-width:540px;margin:0 auto 34px}
.q-nav{display:flex;justify-content:center;gap:16px;margin-top:44px}
.q-nav button{height:48px;padding:0 30px;border-radius:30px;font-size:16px;transition:background .35s,color .35s}
.q-next,.q-send{background:var(--ink);color:var(--cream)}@media (hover:hover){.q-next:hover,.q-send:hover{background:var(--white);color:var(--ink)}}
.q-back{border:1px solid rgba(28,28,26,.25)}@media (hover:hover){.q-back:hover{background:var(--white)}}
@media (max-width:767px){.q-grid,.q-opts{grid-template-columns:1fr}.q-nav{flex-wrap:wrap}}
.form-alt{margin-top:26px;font-size:16px}.form-alt span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}

/* ---------- Guía ---------- */
.gzs{position:relative;padding:14vh 0 8vh}
.gz{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.15fr);gap:0 calc(var(--pad)*1.5);width:min(1240px,calc(100% - 2*var(--pad)));margin:0 auto 18vh;border-top:1px solid var(--gold);padding-top:28px}
.gz .no{font-size:14px;color:var(--olive-ink)}
.g-dest{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 22px;margin:22px auto 0;font-size:15px;color:var(--mute)}
.g-dest span{color:var(--olive-ink);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
@media (hover:hover){.g-dest a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:4px}}
.gz-h h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.2vw,46px);line-height:1.1;margin-bottom:22px}
.gz .crit{font-size:16px;line-height:23px;color:var(--olive-ink);max-width:340px}
.gz-b>p:first-child{font-size:19px;line-height:27px}
.gz-b .cx-incl{max-width:none;margin-top:30px}
.gz-light{margin-top:26px;font-size:15px;line-height:22px;color:var(--olive-ink);padding-left:18px;border-left:1px solid var(--gold)}
.gq{padding:16vh 0 12vh;text-align:center}
.gq-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px calc(var(--pad)*2);width:min(1000px,calc(100% - 2*var(--pad)));margin:0 auto;text-align:left}
.gq-grid>div{border-top:1px solid var(--gold);padding-top:24px}
.gq h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.2;margin-bottom:14px}
.gq-grid p{font-size:17px;line-height:25px;max-width:420px}
.gq-light{max-width:620px;margin:70px auto 0;padding:0 var(--pad);font-size:17px;line-height:25px;color:var(--olive-ink)}
.gq-light a span{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}
@media (max-width:1023px){.gz{grid-template-columns:1fr;gap:18px}.gz .crit{max-width:none}.gq-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- La luz (cuaderno y artículos) ---------- */
.lt{position:relative;padding:14vh 0 10vh;width:min(1100px,calc(100% - 2*var(--pad)));margin:0 auto}
.lt-row{position:relative;display:grid;grid-template-columns:70px 130px minmax(0,1fr) 140px;gap:0 24px;align-items:baseline;border-top:1px solid var(--gold);padding:34px 0 38px;transition:padding .45s cubic-bezier(.16,.85,.24,1)}
.lt-row:last-child{border-bottom:1px solid var(--gold)}
.lt-row .no,.lt-tag,.lt-read{font-size:14px;color:var(--olive-ink)}
.lt-row h2{grid-column:3;font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.8vw,40px);line-height:1.12;margin-bottom:12px}
.lt-row p{grid-column:3;font-size:17px;line-height:25px;max-width:560px}
.lt-read{grid-column:4;grid-row:1;text-align:right}.lt-tag{grid-column:2;grid-row:1}.lt-row .no{grid-column:1;grid-row:1}
@media (hover:hover){.lt-row:hover h2{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:8px;text-decoration-thickness:1px}}
.ar{position:relative;padding:22vh 0 8vh}
.ar-head{width:min(820px,calc(100% - 2*var(--pad)));margin:0 auto 9vh;text-align:left}
.ar-back{display:inline-block;font-size:15px;margin-bottom:56px}.ar-back span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}
.ar-head .a-label{margin:0 0 22px;text-align:left}
.ar-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,66px);line-height:1.1;letter-spacing:-.012em;margin-bottom:30px}
.ar-head h1 .ln{display:block}
.ar-dek{font-family:var(--serif);font-weight:375;font-size:clamp(22px,2vw,28px);line-height:1.25;color:var(--olive-ink);max-width:680px}
.ar-body{width:min(680px,calc(100% - 2*var(--pad)));margin:0 auto}
.ar-body p{font-size:19px;line-height:29px;margin-bottom:22px}
.ar-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.15;margin:54px 0 18px}
.ar-body ul{list-style:none;margin:6px 0 26px}
.ar-body li{border-top:1px solid rgba(201,166,107,.55);padding:12px 0 11px;font-size:17px;line-height:25px}
.ar-body li:last-child{border-bottom:1px solid rgba(201,166,107,.55)}
.ar-table{margin:30px 0 34px;overflow-x:auto}
.ar-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:22px}
.ar-table th{text-align:left;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--olive-ink);padding:0 14px 12px 0;border-bottom:1px solid var(--gold)}
.ar-table td{padding:13px 14px 12px 0;border-bottom:1px solid rgba(201,166,107,.35);white-space:nowrap}
.ar-nav{display:flex;justify-content:space-between;gap:30px;width:min(820px,calc(100% - 2*var(--pad)));margin:12vh auto 0;border-top:1px solid var(--gold);padding-top:28px}
.ar-pn{display:block;max-width:44%}.ar-pn.r{text-align:right;margin-left:auto}
.ar-pn small{display:block;font-size:13px;color:var(--olive-ink);margin-bottom:10px}
.ar-pn span{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.2}
@media (hover:hover){.ar-pn:hover span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}}
@media (max-width:767px){
  .lt-row{grid-template-columns:44px 1fr auto;gap:6px 14px;padding:26px 0 30px}
  .lt-row .no{grid-column:1}.lt-tag{grid-column:2}.lt-read{grid-column:3}.lt-row h2,.lt-row p{grid-column:1/-1}
  .ar{padding-top:18vh}.ar-body p{font-size:17px;line-height:26px}.ar-nav{flex-direction:column}.ar-pn{max-width:none}.ar-pn.r{text-align:left;margin-left:0}
}

/* ---------- cuaderno: cuadrícula con portadas, filtros, portada y figuras de artículo ---------- */
.lt{width:min(1240px,calc(100% - 2*var(--pad)))}
.lt-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:46px}
.lt-chips .chip{height:38px;padding:0 18px;border:1px solid rgba(28,28,26,.2);border-radius:30px;font-size:15px;transition:background .3s,color .3s,border-color .3s}
@media (hover:hover){.lt-chips .chip:hover{border-color:var(--ink)}}.lt-chips .chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
/* buscador y chips de lugar del listado (Site.ltFilter) */
.lt-find{margin-bottom:46px}.lt-find .lt-chips{margin-bottom:22px}
.lt-q{display:block;position:relative;max-width:520px;margin-bottom:26px}
.lt-q input{width:100%;height:48px;padding:0 20px;border:1px solid rgba(28,28,26,.2);border-radius:30px;background:transparent;font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.lt-q input::placeholder{color:var(--olive-ink)}.lt-q input:focus-visible,.lt-chips .chip:focus-visible,.lt-none button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lt-q input::-webkit-search-cancel-button{-webkit-appearance:none}
.lt-q .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lt-count{font-size:14px;color:var(--olive-ink);letter-spacing:.04em;min-height:20px}
.lt-none{max-width:520px;padding:10px 0 60px;font-size:17px;line-height:25px}.lt-none[hidden]{display:none}
.lt-none button{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px;font:inherit}
.lt-intro{padding-bottom:0}
.lt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:72px calc(var(--pad)*1.6)}
.lt-card{display:block;transition:opacity .35s}
.lt-card.off{display:none}
.lt-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--stone);margin-bottom:22px;border-bottom:1px solid var(--gold)}
.lt-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,.85,.24,1)}
@media (hover:hover){.lt-card:hover .lt-img img{transform:scale(1.035)}}
.lt-meta{display:block;font-size:14px;color:var(--olive-ink);margin-bottom:12px}
.lt-card h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.6vw,38px);line-height:1.12;margin-bottom:14px}
@media (hover:hover){.lt-card:hover h2{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:7px;text-decoration-thickness:1px}}
.lt-card p{font-size:17px;line-height:25px;max-width:520px}
.lt-more{padding:6vh 0 14vh}.lt-more .sec-t{margin-bottom:56px}
.ar-cover{width:min(1180px,calc(100% - 2*var(--pad)));margin:0 auto 9vh;aspect-ratio:16/8;overflow:hidden;background:var(--stone)}
.ar-cover img{width:100%;height:100%;object-fit:cover}
.ar-fig{margin:38px -60px 38px;background:var(--stone)}
.ar-fig img{width:100%;height:auto;display:block}
.ar-body blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.3;border-left:1px solid var(--gold);padding-left:22px;margin:30px 0}
.ar-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.8vw,26px);line-height:1.2;margin:34px 0 12px}
@media (max-width:1023px){.lt-grid{grid-template-columns:1fr 1fr;gap:56px calc(var(--pad)*1.3)}.ar-fig{margin-left:0;margin-right:0}}
.ar-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:38px -60px}.ar-duo .ar-fig{margin:0}.ar-duo .ar-fig img{height:100%;object-fit:cover}
@media (max-width:1023px){.ar-duo{display:block;margin:0}.ar-duo .ar-fig{margin:38px 0}.ar-duo .ar-fig img{height:auto}}
@media (max-width:767px){.lt-grid{grid-template-columns:1fr}.ar-cover{aspect-ratio:4/3}}

/* ---------- películas: tarjetas, miniaturas con play y reproductor en ventana ---------- */
.films{padding:12vh 0 14vh;text-align:center}
.films-lead{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.1vw,30px);line-height:1.2;max-width:760px;margin:-18px auto 64px;padding:0 var(--pad)}
.films-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px calc(var(--pad)*1.3);width:min(1240px,calc(100% - 2*var(--pad)));margin:0 auto;text-align:left}
.fc{display:block;text-align:left}
.fc-img,.fc-poster{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.fc-img img,.fc-poster img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,.85,.24,1),opacity .4s}
@media (hover:hover){.fc:hover .fc-img img,.fc-poster:hover img{transform:scale(1.04);opacity:.86}}
.fc-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(244,243,239,.92);color:var(--ink);display:grid;place-items:center;padding-left:3px;transition:transform .45s cubic-bezier(.16,.85,.24,1),background .3s}
.fc-play.big{width:78px;height:78px;margin:-39px 0 0 -39px}
@media (hover:hover){.fc:hover .fc-play,.fc-poster:hover .fc-play{transform:scale(1.1);background:#fff}}
.fc-meta{display:block;font-size:14px;color:var(--olive-ink);margin:16px 0 8px}
.fc-t{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(22px,1.9vw,28px);line-height:1.15}
.fc-poster{width:100%;cursor:pointer;margin:30px 0}
.cx-film{margin-top:26px}
.cx-film button{display:inline-flex;align-items:center;gap:12px;font-size:16px}
.cx-film button i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--cream);padding-left:2px;transition:transform .4s}
@media (hover:hover){.cx-film button:hover i{transform:scale(1.1)}}
.cx-film button span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}
.film-lb{position:fixed;inset:0;z-index:300;background:rgba(20,20,18,.92);display:grid;place-items:center;opacity:0;transition:opacity .35s}
.film-lb.on{opacity:1}
.film-in{width:min(1280px,92vw);aspect-ratio:16/9;background:#000}
.film-in iframe{width:100%;height:100%;border:0;display:block}
.film-x{position:absolute;top:22px;right:var(--pad);width:44px;height:44px;border-radius:50%;background:rgba(244,243,239,.14);transition:background .3s}
@media (hover:hover){.film-x:hover{background:rgba(244,243,239,.3)}}
.film-x i{position:absolute;left:12px;top:21px;width:20px;height:1px;background:#fff;transform:rotate(45deg)}.film-x i+i{transform:rotate(-45deg)}
body.film-open{overflow:hidden}
@media (max-width:1023px){.films-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.films-grid{grid-template-columns:1fr;gap:40px}.film-in{width:100vw}}

.yt-fig{background:none}.yt-fig .fc-poster{margin:0}.yt-fig figcaption{font-size:14px;color:var(--olive-ink);margin-top:12px}

.ar-fig figcaption,.ar-cover figcaption{font-size:12px;color:var(--olive-ink);padding:8px 0 0;background:var(--cream)}.ar-cover{position:relative}.ar-cover figcaption{position:absolute;right:0;bottom:0;padding:6px 10px;background:rgba(244,243,239,.85)}

.lt-g{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.15;margin:84px 0 34px;padding-top:22px;border-top:1px solid var(--gold)}.lt-g:first-of-type{margin-top:0}

.pre-fl{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}.pre-flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}

.pre-dim{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}

/* ---------- enfoque de títulos ---------- */
.fx .fw{display:inline-block;transition:filter .34s cubic-bezier(.25,.46,.45,.94),opacity .34s cubic-bezier(.25,.46,.45,.94)}
.fx.has-on .fw:not(.on){filter:blur(.05em);opacity:.5}   /* el desenfoque va en em: proporcional al tamaño del texto, mismo resultado en todos los tamaños */
@media (pointer:coarse),(max-width:767px){.fx.has-on .fw:not(.on){filter:none;opacity:1}}

.menu-soc{align-items:center}
.menu-soc a.ico{display:inline-grid;place-items:center;width:34px;height:34px;color:var(--ink);transition:color .25s,transform .35s cubic-bezier(.16,.85,.24,1)}
@media (hover:hover){.menu-soc a.ico:hover{color:var(--gold-ink);transform:translateY(-2px)}}
.menu-soc{gap:10px}

/* idiomas: centrados bajo los enlaces, los dos visibles */
.menu-mid{display:flex;flex-direction:column;align-items:center}
.menu-lang{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:16px;line-height:1}
.menu-lang i{font-style:normal;color:var(--mute)}
.menu-lang .cur,.menu-lang a{color:var(--mute);transition:color .25s}
.menu-lang .cur{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:5px;text-decoration-thickness:1px}
@media (hover:hover){.menu-lang a:hover{color:var(--ink)}}

/* solicitar acceso: pasos del formulario */
.c-form .q-step{text-align:left}
.q-center{max-width:520px;margin:0 auto;text-align:center}
.q-zone{font-size:15px;line-height:22px;color:var(--olive-ink);margin-top:20px;min-height:44px}
.q-lead{text-align:center;font-size:17px;line-height:25px;color:var(--olive-ink);max-width:560px;margin:-18px auto 34px}
.q-inc{display:grid;grid-template-columns:1fr 1fr;gap:34px 30px}
.q-inc>div{border-top:1px solid var(--gold);padding-top:18px}
.q-inc h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin-bottom:10px}.q-inc p{font-size:16px;line-height:23px}
.q-grp{font-family:var(--serif);font-weight:400;font-size:22px;margin:30px 0 14px;text-align:left}
.q-opts.sm{grid-template-columns:1fr 1fr 1fr;gap:12px}
.opt.sm{padding:14px 16px}.opt.sm .o-t{font-size:17px;margin:0}
.q-sum2{display:grid;grid-template-columns:140px 1fr;gap:10px 18px;margin:0 0 30px;font-size:16px;line-height:23px}
.q-sum2 dt{color:var(--olive-ink)}.q-sum2 dd{margin:0}
.chk{display:flex;align-items:flex-start;gap:12px;margin:14px 0;font-size:16px;line-height:22px;cursor:pointer}
.chk input{margin-top:4px;accent-color:var(--ink)}
.chk.err span{color:#b3261e}
@media (max-width:767px){.q-inc{grid-template-columns:1fr}.q-opts.sm{grid-template-columns:1fr}.q-sum2{grid-template-columns:1fr}}

/* botón de inicio de la intro */
.pre-go{position:absolute;left:50%;top:calc(50% + 170px);transform:translateX(-50%);z-index:4;height:40px;padding:0 28px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .6s cubic-bezier(.1,0,.3,1),background .35s,color .35s}
.pre-go.on{opacity:1;pointer-events:auto}
@media (max-width:767px){.pre-go{top:calc(50% + 130px)}}

/* ── Foto instantánea al abrir un álbum (js/polaroid.js) ── */
.plr{position:fixed;inset:0;z-index:10000;pointer-events:auto;cursor:progress}
.plr-dim{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 46%,rgba(24,21,18,.46),rgba(28,28,26,.9))}   /* O1-14: velo a la tinta de la paleta */
.plr-flash{position:absolute;inset:0;background:#F4F3EF;opacity:0}   /* O1-14: flash final en crema (--cream), no blanco */
.plr-slot{position:absolute;left:50%;width:calc(var(--cw) * 1.07);height:9px;margin-left:calc(var(--cw) * -.535);border-radius:5px;opacity:0;--glow:0;
  background:linear-gradient(#050505,#1c1b19 60%,#0a0a0a);box-shadow:0 0 calc(30px * var(--glow)) calc(6px * var(--glow)) rgba(255,248,230,calc(.85 * var(--glow))),0 2px 0 rgba(255,255,255,.14),0 -1px 0 rgba(255,255,255,.08)}
.plr-clip{position:absolute;left:0;right:0;bottom:0;overflow:hidden}
.plr-card{position:absolute;left:50%;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) * -.5);padding:var(--pad) var(--pad) 0;box-sizing:border-box;border-radius:3px;will-change:transform;
  background:linear-gradient(172deg,#f7f4ec,#ece7da);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 22px 44px -14px rgba(0,0,0,.55),0 6px 14px -6px rgba(0,0,0,.4)}
.plr-win{position:relative;width:var(--win);height:var(--win);overflow:hidden;background:#101a1c;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.plr-win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.plr-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 35%,#2f4749,#17282b 70%)}
.plr-grain{position:absolute;inset:0;mix-blend-mode:multiply;opacity:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .55  0 0 0 0 .55  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.plr-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%)}
@media (prefers-reduced-motion:reduce){.plr{display:none}}
.plr-arrive{position:fixed;inset:0;z-index:10000;background:#F4F3EF;pointer-events:none;animation:plrArrive .9s cubic-bezier(.2,.1,.3,1) .12s forwards}
@keyframes plrArrive{to{opacity:0}}

/* ── Filtros: misma estructura y medidas que el menú (fotos 182×232 a ambos lados, lista centrada del alto de las fotos) ── */
.f-in{position:absolute;left:0;right:0;top:140px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.f-mid{position:relative;width:340px;height:232px}
.f-in .f-list{top:0;height:232px;justify-content:center}
.f-in .f-list a,.f-in .f-list button{padding:3px 20px;font-size:26px;line-height:27px}   /* 7 filas × 33 px = 231 px ≤ 232 px */
.f-in .f-list button svg{margin-top:3px}
.f-in .f-sub-t{font-size:26px;line-height:27px;padding:3px 20px}
.f-in .f-img{position:relative;left:auto;top:auto;width:182px;height:232px;justify-self:center}
@media (max-width:1023px){.f-in .f-img{width:141px;height:180px}.f-mid,.f-in .f-list{height:180px}.f-mid{width:260px}.f-in .f-list a,.f-in .f-list button{font-size:20px;line-height:21px;padding:2px 12px}.f-in .f-sub-t{font-size:20px;line-height:21px;padding:2px 12px}}   /* 7 × 25 px = 175 px ≤ 180 px */
@media (max-width:767px){.f-in{top:105px;display:block}.f-mid{margin:0 auto;width:min(300px,86vw);height:auto;min-height:180px}.f-in .f-list{position:relative;height:auto}.f-in .f-sub{position:absolute;inset:0 0 auto 0}.f-in .f-list a,.f-in .f-list button{font-size:24px;line-height:28px}}

/* ── Móvil: menos aire en blanco entre bloques (los vh de escritorio, ~18 % de pantalla, dejaban huecos de 150 px sin contenido) ── */
@media (max-width:767px){
  .a-label{padding:8vh 0 5vh}.a-gloss{margin:-2vh 0 5vh}
  .legacy{margin-top:8vh}
  .who{padding:10vh 0 7vh}
  .svc{padding:8vh 0 6vh}.svc .bio{margin-bottom:12vh}.svc h2.sub{margin:9vh 0 22px}
  .testi{padding:9vh 0 8vh}
  .form{padding:9vh var(--pad) 10vh}
  .rules{padding:6vh 0 4vh}
  .p-film{margin-top:9vh}.p-gal{padding-top:8vh}.g-row{margin-bottom:7vh}.p-lede{margin-bottom:6vh}
  .cx{padding:8vh 0 4vh}.same{padding:4vh 0 10vh}.cx-enh{padding-bottom:9vh}.steps{padding:4vh 0 12vh}
  .gzs{padding:8vh 0 5vh}.gz{margin-bottom:10vh}.gq{padding:9vh 0 7vh}
  .lt{padding:8vh 0 6vh}.lt-more{padding:4vh 0 8vh}
  .ar{padding-top:12vh}.ar-head{margin-bottom:6vh}.ar-nav{margin-top:8vh}.ar-cover{margin-bottom:6vh}
  .films{padding:8vh 0 9vh}
}

/* ── Menú: seis puertas planas ── */
.menu-stack{position:relative;width:340px;max-width:86vw;height:232px}
.menu-stack .menu-links{height:100%;transition:opacity .35s,visibility 0s}
.ml{display:flex;align-items:center;justify-content:center}
@media (max-width:1023px){.menu-stack{height:180px;width:300px}}
@media (max-width:767px){.menu-stack{height:252px}.menu-stack .menu-links{height:252px}}
@media (max-width:767px){.menu{height:max(62vh,610px)}}

/* ── Menú móvil a pantalla completa: lista arriba, idiomas centrados entre la lista y el botón (mismo aire arriba y abajo), redes más grandes ── */
@media (max-width:767px){
  .menu{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;padding:92px 0 max(34px,env(safe-area-inset-bottom))}
  .menu-in{flex:1;display:flex;flex-direction:column;padding-top:0;height:auto;min-height:0}
  .menu-mid{flex:1;display:flex;flex-direction:column;align-items:center}
  .menu-stack,.menu-stack .menu-links{height:auto;min-height:252px}
  .menu-lang{flex:1;display:flex;align-items:center;margin-top:0;font-size:17px}
  .menu-foot{position:static;flex:none;gap:22px;padding-bottom:4px}
  .menu-soc{gap:14px}
  .menu-soc a.ico{width:46px;height:46px}.menu-soc a.ico svg{width:24px;height:24px}
}
body.menu-open .pill{opacity:0;pointer-events:none;transition:opacity .25s}
@media (max-width:767px){.menu-links a{padding:9px 20px}.menu-stack,.menu-stack .menu-links{min-height:288px}}

/* ── Móvil: la lista del menú ocupa todo el ancho de su bloque ── */
@media (max-width:767px){
  .menu-stack{display:grid;width:100%;max-width:none}
  .menu-stack .menu-links{grid-area:1/1}
}

/* ── Móvil: idiomas pegados a la parte baja (encima del botón); todo el espacio sobrante es para la lista ── */
@media (max-width:767px){
  .menu-stack{flex:1;min-height:288px;max-height:520px;align-self:stretch}
  .menu-stack .menu-links{justify-content:space-evenly}
  .menu-lang{flex:none;margin:0 0 26px;display:flex;align-items:center}
}
/* Móvil: idioma → botón y botón → redes a la misma distancia visual (34 px; la caja de cada icono tiene 11 px de aire interior, por eso el hueco real hasta las redes es de 23 px) */
@media (max-width:767px){.menu-lang{margin-bottom:0}.menu-foot{margin-top:34px;gap:23px}}
@media (max-width:767px){.menu-lang{margin-top:auto}}

/* Móvil: el bloque del menú ocupa todo el ancho (centrado real); títulos juntos y centrados en su zona, lejos de los idiomas */
@media (max-width:767px){
  .menu-in{align-items:stretch}
  .menu-mid{align-self:stretch;width:100%}
  .menu-stack .menu-links{justify-content:center}
  .menu-links a{padding:8px 20px}
}


/* ── Portada móvil: bajo la foto de cada pareja, una tira con las mejores fotos de su álbum ── */
.wed-strip{display:none}
@media (max-width:767px){
  .wed-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:calc(100% - 30px);order:2;margin-top:5px}
  .wed-strip .pim{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;display:block}
  .wed .rail{order:3}
}
@media (max-width:767px){.wed-strip{position:relative;z-index:4}.wed-strip img{cursor:pointer;-webkit-tap-highlight-color:transparent}}


/* ── Luz al pasar el cursor (js/glow.js): anillo de borde + foco sobre la superficie ── */
.glow-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:var(--li,0);transition:opacity .3s}
.glow-fx::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--lx,50%) var(--ly,50%),rgba(201,166,107,.17) 0%,rgba(201,166,107,.07) 40%,transparent 70%)}
.glow-fx.on-img::before{mix-blend-mode:screen;background:radial-gradient(340px circle at var(--lx,50%) var(--ly,50%),rgba(255,240,208,.26) 0%,rgba(255,240,208,.09) 42%,transparent 72%)}
.glow-fx::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:radial-gradient(220px circle at var(--lx,50%) var(--ly,50%),rgba(238,204,142,1) 0%,rgba(222,184,118,.55) 30%,transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 5px rgba(222,184,118,.6))}
.wed .im.lit::after{display:none}   /* la banda diagonal de la portada cede ante la luz de borde común a toda la web */

/* ── Portada: titular «Vive el instante, nosotros lo hacemos eterno.» — doble tipografía (decisión de diseño): mayúscula = sentido, cursiva = hilo gramatical ── */
#heroWords p{font-family:'Cormorant Garamond',var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.004em;white-space:nowrap;text-shadow:0 1px 24px rgba(0,0,0,.18)}
#heroWords em{font-style:italic;font-weight:400;text-transform:none;font-size:1.2em;letter-spacing:0;padding:0 .06em}
@media (min-width:768px){
  .hero-words{inset:15vh 4vw auto 4vw}
  #heroWords p{font-size:min(7.8vw,124px);line-height:.94;height:.94em;overflow:hidden}
  #heroWords p+p{margin-top:.02em}
  #heroWords .w1,#heroWords .w3{justify-content:flex-start}#heroWords .w2{justify-content:flex-end}
  #heroWords .w3{padding-left:1.4em}
}
@media (max-width:767px){
  .hero-words{position:absolute;inset:auto;left:16px;right:16px;top:15vh}
  #heroWords p{position:relative;left:auto;top:auto;display:flex;font-size:8vw;line-height:1;height:1em;overflow:hidden}
  #heroWords p+p{margin-top:.1em}
  #heroWords .w1,#heroWords .w3{justify-content:flex-start}#heroWords .w2{justify-content:flex-end}
  #heroWords .w3{padding-left:0}
}

/* Cita final del titular: «— El día vuela, los recuerdos no.» bajo el titular, pegada a la derecha, como una firma */
#heroWords p.hq{font-family:'Cormorant Garamond',var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:.01em;text-shadow:0 1px 18px rgba(0,0,0,.2)}
@media (min-width:768px){#heroWords p.hq{font-size:min(2.5vw,38px);line-height:1.2;height:auto;justify-content:flex-end;margin-top:.9em;padding:.1em 0 .2em}}
@media (max-width:767px){#heroWords p.hq{font-size:5vw;line-height:1.25;height:auto;justify-content:flex-end;margin-top:.7em}}
/* El titular no recorta nada: las ascendentes de la cursiva y las mayúsculas se salen de la caja de línea, así que la línea no corta (el hero ya recorta lo que entra desde fuera de pantalla) */
#heroWords p{overflow:visible!important}
#heroWords .wm{padding:.06em 0 .12em;margin:-.06em 0 -.12em}
#heroWords .wm{overflow:visible!important}
/* tableta (768–1023): la línea más larga («nosotros lo HACEMOS») ocupa ~10,7 em; 7,4 vw la deja dentro del margen del bloque */
@media (min-width:768px) and (max-width:1023px){#heroWords p{font-size:7.4vw}#heroWords p.hq{font-size:3vw}}
/* Escritorio (≥1024): la cita final baja a la esquina inferior derecha, como una firma, y es algo mayor */
@media (min-width:1024px){#heroWords p.hq{position:absolute!important;right:0;top:57vh;width:auto;font-size:min(3.1vw,50px);margin:0}}
/* Interlineado uniforme: la cursiva (1,2 em) no ensancha su línea, así que las tres líneas tienen la misma línea base a intervalos iguales */
#heroWords em{line-height:.783}
#heroWords .w3 .wi::before{content:"\200b";font-style:italic;font-size:1.2em;line-height:.783}   /* misma altura de línea que las líneas con cursiva */
/* Menú (escritorio y tableta): idiomas en la misma fila que las redes y el botón, centrados entre ambos */
@media (min-width:768px){
  .menu-lang{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);height:34px;margin:0;display:flex;align-items:center}   /* por encima de .menu-foot (ocupa todo el ancho y va después en el DOM: tapaba el enlace) */
}
@media (min-width:768px) and (max-width:1023px){.menu-lang{bottom:52px}}
/* cita: más arriba (60 % de la pantalla) y a la izquierda del borde derecho de la «S» de HACEMOS */
@media (min-width:1024px){#heroWords p.hq{top:45vh;right:1.6vw}}

/* ── «Explorar el trabajo» (filtros) con la misma estructura que el menú: 2 entradas con su descripción + hojas «Por tipo de foto» y «Por lugar» ── */
.f-in .f-main a,.f-in .f-main button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 20px;line-height:1.1;width:100%}
.f-in .f-main a span,.f-in .f-main button span{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:300;font-size:26px;line-height:30px}
.f-in .f-main small{font:400 13px/1.2 var(--sans);color:var(--mute);letter-spacing:.01em}
.f-in .f-main svg{margin-top:0;color:var(--mute)}
.filters.sub .f-sub{opacity:0;visibility:hidden;pointer-events:none}
.filters.sub[data-sub="t"] #fSubT,.filters.sub[data-sub="l"] #fSubL{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .62s cubic-bezier(.08,0,.25,.91) .275s,visibility 0s}
@media (max-width:1023px){.f-in .f-main a span,.f-in .f-main button span{font-size:21px;line-height:24px}.f-in .f-main small{font-size:12px}.f-in .f-main a,.f-in .f-main button{padding:5px 12px}}
@media (max-width:767px){.f-in .f-main a span,.f-in .f-main button span{font-size:24px;line-height:28px}.f-in .f-main a,.f-in .f-main button{padding:10px 12px}}


/* ═══ SISTEMA DE TÍTULOS — mayúscula = sentido, cursiva = hilo ═══ */
:root{--tf:'Cormorant Garamond',Baskerville,Georgia,serif}

/* base compartida N1 / N2 / artículo */
body .t-h1,body .t-h2,body .t-art{font-family:var(--tf);font-weight:500;letter-spacing:.004em;text-wrap:balance;overflow-wrap:break-word}
body .t-h1,body .t-h2,body .t-art .k{text-transform:uppercase}
body .t-h1 em,body .t-h2 em,body .t-art .k em{font-style:italic;font-weight:400;text-transform:lowercase;font-size:1.2em;letter-spacing:0;padding:0 .06em;line-height:calc(var(--t-lh,1) / 1.2)}
body .t-h1 .ln,body .t-h2 .ln,body .t-art .ln{display:block}

/* N1 — héroe de página */
body .t-h1{--t-lh:1.02;font-size:clamp(30px,5.6vw,88px);line-height:var(--t-lh);width:100%;padding:0 var(--pad);text-align:center}
@media (min-width:768px){
  body .t-h1{--t-lh:.94;padding:0 4vw}
  body .t-h1 .ln:nth-child(odd){text-align:left}
  body .t-h1 .ln:nth-child(even){text-align:right}
  body .t-h1 .ln:nth-child(3){padding-left:1.4em}
}
@media (max-width:767px){body .t-h1{--t-lh:1.1;font-size:8.2vw}}
/* N1 pequeño (formularios): sin zigzag */
body .t-h1--s{font-size:clamp(38px,4.5vw,65px);padding:0;text-align:left;margin-bottom:78px}
body .t-h1--s .ln:nth-child(n){text-align:left;padding-left:0}
@media (max-width:767px){body .t-h1--s{font-size:10.5vw;margin-bottom:44px}}
/* N1 nombre (proyecto): la & es la cursiva */
body .t-h1--name{font-size:clamp(72px,15vw,216px);line-height:.95;text-align:center;padding:0}
body .t-h1--name .amp{font-family:var(--tf);font-style:italic;font-weight:400;text-transform:none;font-size:1.2em}

/* N2 — sección (≤7 palabras, centrado) */
body .t-h2{--t-lh:1.08;font-size:clamp(30px,3.9vw,56px);line-height:var(--t-lh);text-align:center;padding:0 var(--pad);margin-bottom:70px}
@media (max-width:767px){body .t-h2{font-size:8vw;margin-bottom:40px}}
/* N2 ficha (≤4 palabras, en columna) */
body .t-h2--item{font-size:clamp(28px,2.9vw,42px);text-align:left;padding:0;margin-bottom:22px}
@media (max-width:767px){body .t-h2--item{font-size:8vw}}

/* N3 — título de ficha / paso / tarjeta / cuerpo de artículo: caja baja, romana */
body .t-h3,body .t-h3--s{font-family:var(--tf);font-weight:500;font-style:normal;text-transform:none;letter-spacing:0;text-wrap:balance}
body .t-h3{font-size:clamp(24px,2.43vw,35px);line-height:1.12}
body .t-h3--s{font-size:clamp(21px,1.8vw,26px);line-height:1.2}

/* Artículo — tema (mezcla) + cola (romana) */
body .t-art{--t-lh:1.04;font-size:clamp(32px,4.6vw,66px);line-height:var(--t-lh);text-align:left;margin-bottom:30px}
body .t-art .t-tail{font-weight:400;font-size:.5em;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--olive-ink);margin-top:.55em}
@media (max-width:767px){body .t-art{font-size:8.4vw}body .t-art .t-tail{font-size:.58em}}

/* Entradilla, kicker, micro, cita */
body .t-dek{font-family:var(--tf);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.25;text-transform:none;color:var(--olive-ink);max-width:680px}
body .t-dek--lg{font-size:clamp(26px,3.8vw,55px);line-height:1.1;color:var(--ink);text-align:center;max-width:1425px}
body .t-kicker{font-family:var(--tf);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.2;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:12vh 0 8vh}
body .ar-head .t-kicker{padding:0;margin:0 0 22px;text-align:left}
body .t-micro{font:500 12px/1.1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-ink)}
body .t-quote{font-family:var(--tf);font-style:italic;font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.3;text-transform:none}

/* Zigzag/apertura: la máscara no recorta las ascendentes de la cursiva */
body .t-h1 .wm,body .t-h2 .wm{padding:.14em 0 .2em;margin:-.14em 0 -.2em}
body .t-h2.in .wi,body .t-h2 .wi{will-change:transform,opacity}

/* Menú y pie: Cormorant real, peso 400 (el 300 queda fino) */
.menu-links a,.f-list a,.f-list button,.f-sub-t,.f-txt{font-weight:400}

@media (prefers-reduced-motion:reduce){body .t-h1 .wi,body .t-h2 .wi{transform:none!important}}

/* N3 por selector (sin tocar el HTML): títulos de ficha, paso, tarjeta y cuerpo de artículo en Cormorant 500, caja baja, romana */
.ar-body h2,.ar-body h3,.lt-card h2,.coll h3,.rules h3,.same h3,.steps h3,.cx-row h2,.svc h2.sub,.gz-h h2,.t-tx h3,.person h3,.q-grp,.legacy h2,.who h2,.testi h2{font-family:var(--tf);font-weight:500;font-style:normal;text-transform:none;letter-spacing:0;text-wrap:balance}
.form h2{font-family:var(--tf);font-weight:400;text-transform:none;letter-spacing:0;text-wrap:balance}
@media (max-width:767px){.t-kicker{font-size:17px;padding:8vh 0 5vh}}
/* Cormorant tiene menos altura de x que Playfair: menú, submenús y filtros suben ~12 % para conservar la presencia (alto de fila intacto) */
.menu-links a{font-size:31px}
.f-in .f-list a,.f-in .f-list button{font-size:29px}
.f-in .f-main a span,.f-in .f-main button span{font-size:29px}
@media (max-width:1023px){.menu-links a{font-size:25px}.f-in .f-main a span,.f-in .f-main button span{font-size:24px}.f-in .f-list a{font-size:22px}}
@media (max-width:767px){.menu-links a{font-size:30px}.f-in .f-main a span,.f-in .f-main button span{font-size:27px}.f-in .f-list a{font-size:27px}}

/* ── Efectos de letra de maisonboursier.com ── */
.ow{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .2em;margin:-.14em 0 -.2em}
.owi{display:inline-block;will-change:transform}
/* menú: cada entrada sube desde su máscara (yPercent 100→0, 1,2 s, curva .6,0,.3,1) con retardo escalonado, como los header-overflow-item */
.menu-links a{overflow:hidden}
.menu-links a span{display:inline-block;transform:translateY(105%);transition:transform .5s cubic-bezier(.6,0,.3,1)}
body.menu-open .menu-links a span{transform:none;transition:transform 1.2s cubic-bezier(.6,0,.3,1)}
body.menu-open .menu-links .ml:nth-child(2) a span{transition-delay:.07s}body.menu-open .menu-links .ml:nth-child(3) a span{transition-delay:.14s}body.menu-open .menu-links .ml:nth-child(4) a span{transition-delay:.21s}body.menu-open .menu-links .ml:nth-child(5) a span{transition-delay:.28s}body.menu-open .menu-links .ml:nth-child(6) a span{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.menu-links a span{transform:none!important;transition:none!important}}

.ar-cover img{position:absolute;left:0;bottom:0;width:100%;height:120%;object-fit:cover}   /* marco con overflow: la imagen (120 %) se desliza dentro con el scroll */

/* ── Cuaderno como «journal» de Maison Boursier: imágenes fijas a la izquierda + filas a la derecha (≥1024 px) ── */
@media (min-width:1024px){
  .lt-wrap{display:grid;grid-template-columns:28% 1fr;gap:0 4%;align-items:start}
  .lt-stage{position:sticky;top:20vh;height:min(56vh,520px);overflow:hidden;background:var(--stone)}
  .lt-si{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .lt-grid.lt-rows{display:block}
  .lt-rows .lt-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 24px;align-items:baseline;border-top:1px solid rgba(28,28,26,.14);padding:34px 0 40px;min-height:clamp(170px,30vh,270px)}
  .lt-rows .lt-card:last-child{border-bottom:1px solid rgba(28,28,26,.14)}
  .lt-rows .lt-img{display:none}
  .lt-rows .lt-meta{grid-column:1;grid-row:1;margin:0;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
  .lt-rows .lt-card h2{grid-column:2;grid-row:1;margin:0 0 12px;font-family:var(--tf)}
  .lt-rows .lt-card p{grid-column:2;grid-row:2}
}
.cr-g{position:absolute;inset:0;will-change:transform}

/* Regla de la casa: ningún efecto de imagen tapa texto. Los marcos recortan lo que escalan o desplazan y el texto va siempre por encima */
.a-hero,.a-label,.a-gloss,.a-rule,.a-lead{position:relative;z-index:3}
.a-collage{overflow:hidden;isolation:isolate;z-index:1}
.glow-fx:not(.on-img)::before{display:none}   /* en tarjetas y paneles con texto, solo el anillo del borde: sin velo sobre las letras */

/* ============================================================
   Lote A · Oleada 1 (Maverick, 2026-10-02)
   ============================================================ */

/* O1-01 · velo crema bajo la cabecera. Ajustado a la spec: 112 px con .94 hasta el 68 % (≈76 px) para que logo y «Menú» (y 27-71) queden con alfa ≥ .9; en móvil 76 px (cabecera de 56). Apagado con .hdr.light y con menú o filtros abiertos. */
.hdr::before{content:"";position:absolute;inset:0 0 auto 0;height:112px;z-index:-1;pointer-events:none;background:linear-gradient(var(--cream),rgba(244,243,239,.94) 68%,rgba(244,243,239,0));opacity:0;transition:opacity .35s}
.hdr:not(.light)::before{opacity:1}
body.menu-open .hdr::before,body.filters-open .hdr::before{opacity:0}
@media (max-width:767px){.hdr::before{height:76px}}

/* O1-03 · foco visible en dorado oscuro (blanco solo sobre foto) y hover de botón oscuro con contorno. `.pre` no va en la lista blanca: su fondo es crema. */
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:4px}
.hdr.light :focus-visible,.hero :focus-visible,.p-hero :focus-visible{outline-color:#fff}
@media (max-width:767px){.hero .hero-cta:focus-visible{outline-color:var(--gold-ink)}}   /* en móvil el botón de portada cae sobre crema, no sobre foto */
@media (hover:hover){.btn.dark:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}}
@media (max-width:767px){.btn.light{background:var(--white);box-shadow:inset 0 0 0 1px rgba(28,28,26,.18)}}

/* O1-04 · nada por debajo de 11 px */
.rv-by span{font-size:11px;letter-spacing:.12em}
.pill sup{font-size:11px}

/* O1-05 · puntos del slider táctiles: zona de 25×45 (a paso de 25 px no cabe más ancho sin solaparse), el aspecto no cambia */
.t-dots button{position:relative}
.t-dots button::after{content:"";position:absolute;inset:-18px -8px}

/* O1-06 · «El legado iluminado» legible. Se suma al velo .42 de `.lg-bg::after` (ya existente); va debajo del texto. `.legacy-words` conserva position:absolute (con relative se colapsaba). */
.legacy-pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(28,28,26,.08),rgba(28,28,26,.18))}
.legacy-words{z-index:2;font-weight:400}

/* ============================================================
   Lote B · Oleada 1 (Maverick, 2026-10-02)
   ============================================================ */

/* O1-15 · píldora: en reposo vive 44 px por debajo del borde (antes asomaba 22 px); `.idle` (2,2 s sin actividad) y `.at-foot` la retiran; zona táctil de 44 px en sus botones. */
.pill{transform:translate(-50%,calc(100% + 44px))}
.pill.on{transform:translate(-50%,0)}
.pill.on.idle:not(.open),.pill.at-foot{transform:translate(-50%,calc(100% + 44px));pointer-events:none}
@media (max-width:767px){.pill{width:min(350px,calc(100% - 28px));height:52px;bottom:14px}}
.pill .c::after{content:"";position:absolute;inset:-5px}

/* O1-16 · el botón de sonido sale del lienzo: en cabecera (≥768 px) o dentro del menú (móvil). Nada con position:fixed. */
.hdr .snd{position:absolute;left:var(--pad);top:27px;height:44px;font:500 11px/1 var(--sans);color:inherit;mix-blend-mode:normal;opacity:.8}
.menu-foot .snd{position:static;height:44px;font:500 11px/1 var(--sans);color:var(--ink);mix-blend-mode:normal;opacity:.8}
@media (hover:hover){.hdr .snd:hover,.menu-foot .snd:hover{opacity:1}}
.hdr.light .snd{opacity:1}   /* con cabecera clara (sobre foto) opacidad plena: blanco sobre foto, como el logo y «Menú» */

/* O1-17 · «saltar al contenido» (visible solo con foco) */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:8px;z-index:200;background:var(--ink);color:var(--cream);padding:12px 18px}
#main:focus{outline:0}

/* ============================================================
   Lote C · Oleada 1 (Maverick, 2026-10-02)
   ============================================================ */

/* O1-11 · H1 de categoría (nombre del filtro + nº de fotos): ocupa el hueco sobre la tira de fotos en escritorio y abre la rejilla en móvil. Va debajo de la cabecera (108 px) y de su velo. */
.k-wrap #kTitle{position:absolute;z-index:1;left:var(--pad);right:var(--pad);top:clamp(120px,calc((100vh - 540px) / 2 + 36px),230px);width:auto;margin:0;padding:0;
  font-size:min(clamp(38px,4.5vw,65px),max(30px,calc((100vh - 700px) * .55)))}
.k-wrap #kTitle .t-micro{margin-left:1em;vertical-align:top;position:relative;top:.55em}
@media (max-width:1023px){.k-wrap #kTitle{top:clamp(120px,calc((100vh - 440px) / 2 + 36px),230px)}}
@media (max-width:767px){
  .k-wrap #kTitle{position:static;padding:96px var(--pad) 0;font-size:10.5vw;margin:0}
  .k-wrap #kTitle + .k-track{padding-top:30px}
}

/* O1-14 · el flash y la llegada son crema (--cream) y el velo de la instantánea usa la tinta: ver `.plr-dim`, `.plr-flash`, `.plr-arrive` arriba. */

/* O1-18 · errores de formulario con texto, icono «!» (no solo el rojo) y resumen. Los iconos del campo (flecha del <select>, calendario) se anclan al alto del input (67 px), no al del <label>,
   que crece cuando aparece el mensaje. */
.fld .chev{top:33.5px}.fld .cal{top:33.5px;margin-top:-8px}
.f-err,.f-sum{display:flex;align-items:flex-start;gap:8px;font:400 14px/1.35 var(--sans);color:#b3261e;text-align:left}
.f-err::before,.f-sum::before{content:"!";flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:50%;background:#b3261e;color:#fff;font:600 11px/16px var(--sans);text-align:center}
.f-err{margin-top:8px}
.f-sum{margin:0 0 20px;font-weight:500}
#qProg:focus{outline:0}

/* O1-19 · aviso de envío fallido: sin servidor (o con error) nunca se da por enviado; mailto con el resumen y «Reintentar». */
.f-fail{margin-top:34px;padding:22px 24px;border:1px solid #b3261e;border-radius:5px;background:var(--white);text-align:left;font-size:16px;line-height:1.4;outline:0}
.f-fail p{margin-bottom:18px}
.f-fail div{display:flex;flex-wrap:wrap;gap:12px}
.f-fail a,.f-fail button{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:30px;font-size:16px;line-height:1;transition:background .35s,color .35s}
.f-fail a{background:var(--ink);color:var(--cream)}
@media (hover:hover){.f-fail a:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}}
.f-fail button{border:1px solid rgba(28,28,26,.35)}
@media (hover:hover){.f-fail button:hover{background:var(--cream)}}
/* arrastre entre fases de «Quiénes somos» (about.js): el scroll vertical sigue siendo del navegador, el horizontal es del gesto */
.t-track{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.t-track.drag{cursor:grabbing}
.t-track img{-webkit-user-drag:none}
.t-track:focus-visible{outline-offset:-8px}

/* ═══ RESP-P · páginas interiores (lote P, 2026-10-02): proyecto, cuaderno, quiénes somos, colecciones, guía, contacto, comisión, FAQ, reseñas, películas ═══ */

/* RESP-P · proyecto · flechas: zona táctil de 44 px (el círculo sigue de 34 en móvil) y se apartan del texto (project.js pone .away mientras un bloque de texto cruza su franja y en el final) */
.p-arr::after{content:"";position:absolute;inset:-5px}
.p-arr.away{opacity:0;pointer-events:none}
@media (min-width:768px){.p-arr::after{inset:0}}
/* RESP-P · sin capas permanentes (will-change) en proyecto: GSAP ya promueve a 3D mientras anima (R-MOV-16) */
.p-hero #pImg,.g-row .im,.g-set .im,.p-hero h1 .wi{will-change:auto}
/* RESP-P · la cabecera mide lo que se ve (svh descuenta la barra del navegador móvil): con 100vh los nombres, anclados abajo, quedaban ~90 px bajo la barra de Safari (R-TAB-17) */
@media (max-width:1023px),(orientation:landscape) and (max-width:1399px) and (pointer:coarse){.p-hero{height:100svh}}

/* RESP-P · proyecto · cabecera: en móvil y tableta vertical los nombres se anclan abajo, sobre un velo en degradado; las caras (tercio superior de la foto) quedan libres */
@media (max-width:1023px) and (orientation:portrait),(max-width:767px){
  .p-hero h1{justify-content:flex-end;padding:0 var(--pad) 10vh;padding-bottom:10svh;line-height:1.02}
  .p-hero .dim{background:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.1) 38%,rgba(0,0,0,.52) 100%);opacity:1}
}
/* RESP-P · proyecto · cabecera apaisada (móvil y tableta táctil): una sola línea abajo; al hacer scroll cada nombre va hacia su borde (project.js detecta la fila) */
@media (orientation:landscape) and (max-width:1399px) and (pointer:coarse),(orientation:landscape) and (max-height:520px){
  .p-hero h1{flex-direction:row;align-items:flex-end;justify-content:center;gap:0 .3em;padding:0 var(--pad) 8vh;padding-bottom:8svh;font-size:min(8.4vw,24vh);font-size:min(8.4vw,24svh);line-height:1.04;white-space:nowrap}
  .p-hero .dim{background:linear-gradient(rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 45%,rgba(0,0,0,.5) 100%);opacity:1}
}

/* RESP-P · proyecto · final: anterior / siguiente y nombres de la pareja (antes con estilos en línea; la foto del siguiente ya no los tapa en móvil) */
.p-end .p-names{position:absolute;inset:0;height:auto;pointer-events:none;grid-template-columns:1fr auto 1fr;padding:0 calc(50% - 130px)}
.p-end .p-names span:first-child{text-align:right}
.p-end .p-names span:last-child{text-align:left}
.p-end .p-names em{font-style:normal;padding:0 18px}
@media (max-width:767px){
  .p-end{display:grid;grid-template-columns:1fr 1fr;align-content:start;padding:12vh 0 0}
  .p-end .p-names{position:static;order:-1;grid-column:1/-1;display:flex;justify-content:center;gap:.35em;padding:0 var(--pad);margin-bottom:6vh}
  .p-end .p-names em{padding:0}
  .p-end .side{position:static;text-align:left!important;padding:0 var(--pad);margin:0 0 8vh}
  .p-end .side.r{text-align:right!important}
  .p-end .p-next{position:relative;left:auto;right:auto;bottom:auto;grid-column:1/-1;height:60vh}
}

/* RESP-P · visor de películas: el vídeo cabe siempre en la pantalla (en apaisado medía 437 px en 390 de alto y los controles de YouTube salían por abajo) y el cierre queda fuera del vídeo */
.film-in{width:min(1280px,92vw,calc((100vh - 24px) * 16 / 9));width:min(1280px,92vw,calc((100dvh - 24px) * 16 / 9))}
@media (max-width:767px){.film-in{width:min(100vw,calc((100vh - 24px) * 16 / 9));width:min(100vw,calc((100dvh - 24px) * 16 / 9))}}
@media (orientation:landscape) and (max-height:520px){
  .film-in{width:min(calc(100vw - 112px),calc((100vh - 24px) * 16 / 9));width:min(calc(100vw - 112px),calc((100dvh - 24px) * 16 / 9))}
  .film-x{top:8px;right:max(8px,env(safe-area-inset-right))}
}

/* RESP-P · Quiénes somos · collage: la caja medía 100vh aunque las fotos (posiciones en vh, anchos en vw) solo ocupan el 65-77 % de ella en vertical: el resto era blanco (R-MOVIL-25, R-TAB-13).
   Solo en vertical: en apaisado las fotos miden más que la caja corta y se recortarían. */
@media (orientation:portrait) and (max-width:767px){.a-collage{height:72vh}}   /* «orientation» primero: el criterio unificado de móvil (breakpoint-unificado.py) sustituye «@media (max-width:767px)» y lo rompería */
@media (orientation:portrait) and (min-width:768px){.a-collage{height:82vh}}
/* RESP-P · sin capas permanentes en Quiénes somos (R-MOV-16): el collage, el legado y la banda las promueve GSAP mientras animan */
.a-collage .im,.legacy-words,.band .pf,.ln-i{will-change:auto}

/* RESP-P · anclas (#s-cx, #s-q…): el navegador salta ya 20 px por encima del destino, como hace site.js a los 1,4 s; antes había un segundo salto de 20 px (R-MOV-19) */
section[id^="s-"],div[id^="s-"]{scroll-margin-top:20px}

/* RESP-P · tablas de artículo: pista de scroll horizontal (sombra en el borde con más contenido), primera columna fija y la última puede partirse (R-MOVIL-25) */
.ar-table{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  background:linear-gradient(to right,var(--cream) 30%,rgba(244,243,239,0)) left center/44px 100% no-repeat local,linear-gradient(to left,var(--cream) 30%,rgba(244,243,239,0)) right center/44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(28,28,26,.2),rgba(28,28,26,0)) left center/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(28,28,26,.2),rgba(28,28,26,0)) right center/12px 100% no-repeat scroll}
@media (max-width:767px){
  .ar-table th,.ar-table td{padding-right:12px}
  .ar-table th:first-child,.ar-table td:first-child{position:sticky;left:0;z-index:1;background:var(--cream)}
  .ar-table td:last-child{white-space:normal;min-width:9.5em}
  .person p,.cx-row .tx>p:not(.n){line-height:23px}   /* 16 px con 20 px de interlineado (1,25) → 1,45 */
}

/* RESP-P · zonas táctiles de 44 px en los enlaces sueltos de las páginas interiores (medían 17-38 px; R-MOVIL-18). Los márgenes se compensan para que el ritmo vertical no cambie. */
@media (pointer:coarse){
  .ar-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:42px}
  .steps-more,.form-alt a,.c-mail{display:inline-flex;align-items:center;min-height:44px}
  .steps-more{margin-top:44px}.c-mail{margin-top:42px}
  .lt-chips .chip{height:44px}
  .lt-q input{height:52px}
  .cx-film button{min-height:44px}
  dd a.u{display:inline-block;padding:11px 0;margin:-11px 0}
}

/* RESP-P · hover pegajoso: resuelto en origen (G2): toda regla :hover va dentro de `@media (hover:hover)`; en táctil no hay nada que devolver a su estado base (R-TAB-16 / R-MOV-11) */

/* RESP-P · formularios (contacto y comisión) */
.fld input::placeholder,.fld textarea::placeholder{color:rgba(28,28,26,.68)}   /* 4,48:1 → 5,9:1 (R-MOVIL-25) */
.fld select{color:rgba(28,28,26,.68)}.fld select.has{color:var(--ink)}
.fld input,.fld select,.fld textarea{scroll-margin:110px 0 150px}   /* con el teclado abierto, el navegador deja el campo (y el botón de debajo) a la vista */
/* fecha: <input type="date"> nativo en todos los navegadores (iOS no admite cambiar el tipo en el foco). La etiqueta de antes (placeholder) la pinta el label desde data-ph mientras esté vacía y sin foco */
.fld.date input{display:block;min-height:67px;text-align:left}
.fld.date input::-webkit-date-and-time-value{text-align:left;min-height:1.2em;margin:0}
.fld.date::after{content:attr(data-ph);position:absolute;left:44px;top:33.5px;transform:translateY(-50%);max-width:calc(100% - 64px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:300 16.4px/1.15 var(--sans);color:rgba(28,28,26,.68);pointer-events:none;transition:opacity .2s}
.fld.date:focus-within::after,.fld.date.has::after{opacity:0}
.fld.date:not(.has) input:not(:focus){color:transparent}
@media (pointer:coarse){.fld.date input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset:0;width:100%;height:100%}}   /* en táctil toda la caja abre el selector */
@media (max-width:1023px){.fld input{padding-left:16px;padding-right:16px}.fld.date input{padding-left:44px}}   /* «Wedding planner (if you have one)» cabía justo a 768 px (R-TAB-09) */
@media (max-width:767px),(orientation:landscape) and (max-height:520px){.fld textarea{height:clamp(150px,30vh,362px)}}   /* con el teclado abierto no cabía un campo de 362 px */

/* ═══ RESP-H · portada (lote H, 2026-10-02): titular bajo las caras, foto, intro apaisada, tira de miniaturas ═══
   Hallazgos: R-MOVIL-01/04/05/07/08/14/23 · R-TAB-01/02 · R-MOV-01/03/08/09/16 */

/* RESP-H · el documento nunca se ensancha: el titular sale de .hero-bg en ≥768 y se desplaza ±16 % con el scroll (±60 % en la intro); en Chrome móvil eso agrandaba el layout viewport
   (innerWidth 768 → 860; 1198 en la intro) y el botón «Menú» y la píldora quedaban fuera de pantalla. El recorte va en la causa (.hero), no en `html,body`: con `html{overflow-x:clip}` el
   `overflow:hidden` de `body.no-scroll` / `body.film-open` deja de propagarse al viewport y, sin Lenis (movimiento reducido), esos bloqueos de scroll dejan de funcionar (medido).
   `clip` no crea contenedor de scroll: el `position:sticky` de .hero-bg sigue igual. Verificado en 6 tamaños × con y sin intro: scrollWidth = innerWidth. */
.hero{overflow-x:clip}

/* RESP-H · foto de portada (Lorena y Christophe, fijada por dirección). Las dos cabezas ocupan el 34-54 % del ancho y el 16-39 % del alto de la foto: en vertical se centra la pareja
   (antes 50 %: la novia salía cortada por el borde izquierdo); en apaisado de poca altura se ancla arriba para que la cabeza del novio quede bajo el logo centrado. */
#heroImg img{object-position:50% 38%}
@media (orientation:portrait){#heroImg img{object-position:41% 38%}}
@media (orientation:landscape) and (max-height:520px) and (min-width:768px){#heroImg img{object-position:50% 0}}

/* RESP-H · titular anclado ABAJO: las caras quedan siempre libres (margen ≥ 24 px en 17 tamaños de pantalla). Bloque de 100vh con las líneas pegadas al pie (10 vh de colchón;
   `svh` descuenta la barra del navegador móvil). El zigzag de ≥768 (izquierda / derecha / izquierda con sangría) no cambia: solo la altura a la que cae. */
.hero-words{position:absolute;left:var(--hw-x,4vw);right:var(--hw-x,4vw);top:0;bottom:auto;height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:10vh;padding-bottom:calc(100vh - 100svh + 10vh)}
@media (max-width:767px){.hero-words{--hw-x:16px}}
#heroWords p{flex:none}
@media (min-width:768px) and (max-width:1023px){#heroWords p{font-size:min(7.4vw,12.6vh)}#heroWords p.hq{font-size:min(3vw,5.4vh)}}
@media (min-width:1024px){
  #heroWords p{font-size:min(7.8vw,124px,12.6vh)}
  #heroWords p.hq{position:relative!important;top:auto;right:auto;margin:.7em 1.6vw 0 0;font-size:min(3.1vw,50px,5.4vh)}   /* firma bajo la última línea (EN: dos líneas)… */
  #heroWords .w3~.hq{position:absolute!important;right:1.6vw;bottom:calc(100vh - 100svh + 10vh - .22em);margin:0}   /* …y con tres líneas (ES), a la altura de «ETERNO.», a su derecha */
}
/* móviles apaisados y pantallas bajas (≤ 520 px de alto): titular más pequeño, cita en su fila, todo bajo las caras */
@media (orientation:landscape) and (max-height:520px){
  .hero-words{--hw-x:4vw;padding-bottom:5vh;padding-bottom:calc(100vh - 100svh + 5vh)}
  #heroWords p{font-size:min(7.8vw,9vh)}
  #heroWords p.hq,#heroWords .w3~.hq{position:relative!important;bottom:auto;right:auto;font-size:min(3vw,5.6vh);margin:.6em 0 0;line-height:1.2}
}
/* RESP-H · velo en degradado bajo el titular: transparente sobre las caras y más oscuro hacia el pie. El blanco del titular y de la cita queda a ≥ 3:1 (medido: el 95 % de los píxeles de
   tinta ≥ 3,7:1 sin sombra de texto) sin oscurecer el mar. Se pinta sobre la foto y su velo uniforme, bajo el titular. */
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 40%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.42) 100%)}
.hero-bg #heroWords{z-index:2}

/* RESP-H · intro en apaisado (844×390, 932×430…): el logo y «Iniciar» eran de escritorio (277 px de ancho = 383 de alto; el botón caía en y=365-417 de 390) */
@media (orientation:landscape) and (max-height:520px){.pre-logo{width:min(100px,22vh)}.pre-go{top:calc(50% + 29vh)}}

/* RESP-H · portada móvil: foto principal con marco de proporción fija (`--ar`, la de la portada del álbum): al intercambiarla con una miniatura ya no salta la página (+299 px) ni se mueve la
   miniatura que se iba a tocar después. Se muestra la portada del álbum (data-k=0); antes dos álbumes enseñaban la misma foto en la principal y en la tira. */
.wed .im{will-change:auto}   /* GSAP promueve la capa mientras anima; home.js pone will-change solo con la boda en pantalla (antes 58 capas permanentes) */
@media (max-width:767px){
  .wed .im:not([data-k="0"]){display:none}
  .wed .im[data-k="0"]{display:block}
  .wed .im{aspect-ratio:var(--ar,2/3);overflow:hidden}
  .wed .im .pim{height:100%;object-fit:cover;object-position:50% 35%}
  .wed-strip{touch-action:manipulation}
  .wed-strip .ws{display:block;width:100%;padding:0;line-height:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
  .wed-strip .ws.ld{opacity:.55}
  .wed-strip .ws:focus-visible{outline-offset:-3px}
}

/* ═══ RESP-G · shell: menú, filtros, píldora, pie, instantánea (lote G1, 2026-10-02) ═══
   Hallazgos: R-MOVIL-02/03/11/12/16/18/21/22 · R-TAB-03/07/08/12/17 · R-MOV-02/13/17/21.
   Criterio de «pantalla baja»: orientación apaisada y ≤ 520 px de alto (iPhone/Pixel girados), da igual el ancho (667×375, 844×390, 932×430 ya no caen en reglas de tableta ni de escritorio).
   Zonas táctiles de 44 px en menú, filtros, píldora y pie. `env(safe-area-inset-*)` con respaldo 0: sin `viewport-fit=cover` no hacen nada. */
:root{--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px)}

/* cabecera: márgenes seguros (muesca / isla dinámica / modo pantalla de inicio) */
.hdr .snd{left:calc(var(--pad) + var(--sal));top:calc(27px + var(--sat))}
.menu-btn,.logo{top:calc(27px + var(--sat))}
.menu-btn{right:calc(var(--pad) + var(--sar))}
@media (max-width:767px){
  .logo{top:calc(6px + var(--sat));left:calc(8px + var(--sal))}
  body.menu-open .logo{left:calc(8px + var(--sal))}
  .menu-btn{top:calc(6px + var(--sat));right:calc(15px + var(--sar))}
  .hdr{height:calc(56px + var(--sat))}
}

/* ---------- menú ---------- */
/* nunca más alto que la pantalla; si el contenido no cabe, el panel se desplaza por dentro (antes quedaba cortado y sin salida: R-MOVIL-03) */
.menu{max-height:100vh;max-height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu-lang{z-index:2;gap:2px;height:44px}   /* z-index: por encima de .menu-foot (va después en el DOM y tapaba el enlace) */
.menu-lang a,.menu-lang .cur{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.menu-soc{gap:0}
.menu-soc a.ico{width:44px;height:44px}
.menu-cta{min-height:44px}
.menu-links a{display:block}
@media (min-width:1024px) and (orientation:portrait){.menu{height:min(64vh,640px)}}   /* iPad Pro vertical: 874 px de panel con 200 de contenido (R-TAB-12) */

/* táctil ≥ 1024 (iPad apaisado): filas de 44 px; las fotos laterales se centran frente a la lista */
@media (min-width:1024px) and (min-height:521px) and (pointer:coarse){
  .menu-in{align-items:center;align-content:start}
  .menu-stack,.menu-stack .menu-links{height:264px}
  .menu-links a{padding:0 20px;line-height:44px}
}
/* tableta (768–1023): filas de 44 px, idiomas en su propia fila sobre el pie (pisaban «Calcula vuestro presupuesto»: R-TAB-03) y panel con el alto que pide el contenido */
@media (min-width:768px) and (max-width:1023px) and (min-height:521px){
  .menu{height:max(49.4vh,560px)}
  .menu-in{align-items:center;align-content:start}
  .menu-stack,.menu-stack .menu-links{height:264px}
  .menu-links a{padding:0 20px;line-height:44px}
  .menu-foot{bottom:max(28px,var(--sab))}
  .menu-lang{bottom:calc(max(28px,var(--sab)) + 60px)}
}
/* móvil vertical: el contenido manda (no se encoge por debajo de su alto) y, si no cabe, el panel se desplaza */
@media (max-width:767px){
  .menu{padding:calc(clamp(60px,10.5dvh,92px) + var(--sat)) var(--sar) max(18px,var(--sab)) var(--sal)}
  .menu-in{flex:1 0 auto;min-height:0}
  .menu-mid{flex:1 0 auto}
  .menu-stack{flex:1 0 auto}
  .menu-foot{padding-bottom:0}
}
@media (max-width:767px) and (max-height:620px){   /* iPhone con barras de Safari (375×553), Android pequeños (360×560, 360×640 con barras): todo cabe sin scroll */
  .menu-stack,.menu-stack .menu-links{min-height:264px}
  .menu-foot{margin-top:6px;gap:6px}
  .menu-lang{margin-top:0}
  .menu-soc a.ico{width:44px;height:44px}
}
/* pantalla baja y apaisada: panel a pantalla completa en dos columnas (enlaces | idiomas, música, botón y redes); sin fotos laterales (en táctil no hay barajado y no se piden) */
@media (orientation:landscape) and (max-height:520px){
  .menu{--mt:60px;width:100%;height:100vh;height:100dvh;min-height:0;padding:var(--mt) max(24px,var(--sar)) max(8px,var(--sab)) max(24px,var(--sal));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(16px,4vw,48px);align-items:center}
  .menu-in,.menu-mid{display:contents}
  .menu-img{display:none}
  .menu-stack{display:block;grid-column:1;grid-row:1/-1;align-self:center;width:100%;max-width:none;height:auto;min-height:0;max-height:none}
  .menu-stack .menu-links{height:auto;min-height:0;justify-content:center}
  .menu-links a{padding:0 20px;font-size:clamp(23px,7.2vh,30px);line-height:44px}
  .menu-lang{position:relative;left:auto;bottom:auto;transform:none;grid-column:2;grid-row:2;justify-self:center;margin:0}
  .menu-foot{position:static;grid-column:2;grid-row:3;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:10px;margin:10px 0 0;padding:0}
  .menu-cta{padding:0;gap:0}
  .menu-cta .lbl,.menu-cta .dot{display:none}
  .menu-cta .m-btn{display:inline-flex}
  .menu-soc{justify-content:center}
  body.menu-open .logo{left:50%;transform:translateX(-50%)}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:768px){.menu{--mt:78px}}   /* ≥ 768 la cabecera (logo, «Menú», música) mide 71 px */
@media (orientation:landscape) and (max-height:520px) and (max-width:767px){body.menu-open .logo{left:calc(8px + var(--sal));transform:none}}

/* ---------- píldora ---------- */
.pill{bottom:max(35px,var(--sab))}
@media (max-width:767px){.pill{bottom:max(14px,var(--sab));width:min(350px,calc(100% - 28px - var(--sal) - var(--sar)))}}
@media (orientation:landscape) and (max-height:520px){.pill{height:52px;bottom:max(10px,var(--sab))}}
.pill-label{padding:14px 20px;margin:-14px -20px}   /* el rótulo también abre el panel: zona de 44 px sin mover el texto */
/* la regla de la casa también vale para ella: site.js la retira (`.yield`) mientras haya texto bajo su caja */
.pill.on.yield:not(.open){transform:translate(-50%,calc(100% + 44px));pointer-events:none;transition:transform .2s ease-in,background .4s,color .4s}

/* ---------- panel de filtros ---------- */
.filters{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
/* táctil ≥ 1024: filas de 44 px */
@media (min-width:1024px) and (min-height:521px) and (pointer:coarse){
  .f-mid,.f-in .f-list{height:264px}
  .f-in .f-list a,.f-in .f-list button,.f-in .f-sub-t{padding:8px 20px;line-height:28px}
  .f-in .f-main a,.f-in .f-main button{padding:8px 20px}
}
/* tableta (768–1023): filas de 44 px y panel con el alto de su contenido (en 1024×1366 dejaba ~350 px en blanco; R-TAB-12) */
@media (min-width:768px) and (max-width:1023px) and (min-height:521px){
  .f-mid{width:300px;height:264px}
  .f-in .f-list{height:264px}
  .f-in .f-list a,.f-in .f-list button,.f-in .f-sub-t{padding:8px 12px;line-height:28px}
  .f-in .f-main a,.f-in .f-main button{padding:8px 12px}
}
@media (min-width:768px) and (orientation:portrait) and (min-height:521px){.filters{bottom:auto;height:min(76vh,540px)}}
/* móvil: filas de 44 px */
@media (max-width:767px){
  .f-in .f-list a,.f-in .f-list button,.f-in .f-sub-t{padding:8px 12px;line-height:28px}
  .filters{top:calc(14vh + var(--sat))}
}
@media (max-width:767px) and (max-height:600px){   /* 375×553, 360×560: panel desde la cabecera y lista más arriba; la píldora (52 px + 14) queda libre debajo */
  .filters{top:calc(56px + var(--sat))}
  .f-back,.f-title{top:14px}
  .f-in{top:56px}
}
/* pantalla baja y apaisada: sin fotos, «Por tipo / Por lugar» en dos columnas y las hojas en rejilla de dos; el panel termina sobre la píldora (nunca la toca) */
@media (orientation:landscape) and (max-height:520px){
  .filters{left:0;width:100%;top:calc(var(--mt-f,60px) + var(--sat));bottom:calc(max(10px,var(--sab)) + 52px + 8px)}
  .f-back,.f-title{top:12px}
  .f-img{display:none}
  .f-in{top:56px;display:block}
  .f-mid{margin:0 auto;width:min(640px,88vw);height:auto;min-height:0}
  .f-in .f-list{height:auto}
  .f-in .f-main{position:relative;flex-direction:row;align-items:flex-start;justify-content:center;gap:16px}
  .f-in .f-main a,.f-in .f-main button{flex:1;width:auto}
  .f-in .f-sub{position:absolute;inset:0 0 auto 0;display:grid;grid-template-columns:1fr 1fr;justify-items:center}
  .f-in .f-sub .f-sub-t{grid-column:1/-1}
  .f-in .f-main span{font-size:clamp(22px,6.4vh,27px)}
  .f-in .f-list a,.f-in .f-list button,.f-in .f-sub-t{padding:8px 12px;line-height:28px;font-size:clamp(21px,6vh,26px)}
  .f-in .f-main a,.f-in .f-main button{padding:6px 12px}
}
/* «‹ Menú» del panel: botón de 44 px (el texto, de 18, no se mueve) */
.f-back{height:44px;line-height:44px;margin-top:-12px}
@media (orientation:landscape) and (max-height:520px) and (min-width:768px){:root{--mt-f:78px}}

/* ---------- pie ---------- */
.f-nav a{display:flex;align-items:center;min-height:44px;padding:0}
.f-bot{align-items:center}
.f-bot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
@media (max-width:767px){.foot{padding-bottom:calc(110px + var(--sab))}}

/* ---------- instantánea: pista de salto solo en táctil (R-MOV-21) ---------- */
.plr-hint{position:absolute;left:0;right:0;bottom:max(22px,calc(var(--sab) + 14px));text-align:center;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,243,239,.8);opacity:0;pointer-events:none;animation:plrHint .5s ease 1s forwards}
@keyframes plrHint{to{opacity:1}}

/* ---------- hover pegajoso (R-MOVIL-22): las reglas :hover van en `@media (hover:hover)` (G2), así que en táctil nada se queda «pulsado»; aquí, la respuesta al pulsar ---------- */
@media (hover:none){
  .menu-links a:active span,.f-list a:active span,.f-list button:active span{opacity:.55}
  .menu-soc a.ico:active,.pill .c:active{transform:scale(.94)}
}

/* ═══ RESP-G2 · pasada global táctil (lote G2, 2026-10-02) ═══
   R-MOVIL-21 (meta + zonas seguras) · R-MOV-11/R-MOVIL-22 (el grueso está arriba: cada regla :hover va dentro de `@media (hover:hover)`; aquí el :active) · R-MOV-12 / R-TAB-19 (gestos)
   R-MOV-16 (will-change) · R-MOV-10 / R-TAB-06 (movimiento reducido: categoría) · R-MOVIL-18 (enlaces sueltos de 44 px). Sin tocar colores, tipografía ni los efectos. */

/* ---------- R-MOVIL-21 · con `viewport-fit=cover` la página ocupa también la muesca y las esquinas redondeadas del iPhone apaisado (márgenes laterales de ≈ 47-59 px).
   El contenido en flujo vuelve a la zona segura (lo mismo que hacía Safari sin `cover`); lo fijo se aparta por su cuenta. Con los márgenes en 0 (escritorio, vertical) nada cambia. ---------- */
body{padding-left:var(--sal);padding-right:var(--sar)}
.names-fixed{padding-left:calc(var(--pad) + var(--sal));padding-right:calc(var(--pad) + var(--sar))}
.p-arr.l{left:calc(30px + var(--sal))}.p-arr.r{right:calc(45px + var(--sar))}
@media (max-width:1023px){.p-arr.r{right:calc(30px + var(--sar))}}
@media (max-width:767px){.p-arr.l{left:calc(14px + var(--sal))}.p-arr.r{right:calc(14px + var(--sar))}}
.pre-count{left:calc(40px + var(--sal))}.pre-pct{right:calc(15px + var(--sar))}
@media (max-width:767px){.pre-count{left:calc(16px + var(--sal))}.pre-pct{right:calc(16px + var(--sar))}}

/* ---------- R-MOV-12 / R-TAB-19 · gestos: sin el destello azul/gris del navegador al tocar y sin zoom por doble toque en lo pulsable.
   El deslizador de fases de Quiénes somos y las reseñas conservan su `touch-action:pan-y` (no son enlaces ni botones). ---------- */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,[role=button],.wed-link,.wed-strip,.wed-strip *{touch-action:manipulation}

/* ---------- R-MOV-11 / R-MOVIL-22 · acuse al pulsar: en táctil no hay hover, así que el `:active` da el mismo gesto sutil que el cursor da en escritorio ---------- */
@media (hover:none){
  .btn.light:active{background:var(--ink);color:var(--cream)}
  .btn.dark:active,.c-submit button:active,.f-fail a:active{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .q-next:active,.q-send:active{background:var(--white);color:var(--ink)}
  .q-back:active{background:var(--white)}
  .f-fail button:active{background:var(--cream)}
  .opt:active{border-color:rgba(28,28,26,.25)}
  .lt-chips .chip:not(.on):active{border-color:var(--ink)}
  .p-arr:active{transform:scale(.94)}
  .film-x:active{background:rgba(244,243,239,.3)}
  .cx-film button:active i{transform:scale(1.1)}
  .menu-cta:active .dot{transform:translateX(4px)}
  .f-nav a:active,.hero-bar a:active{text-decoration:underline;text-underline-offset:5px}
  .f-bot a:active,.menu-lang a:active{color:var(--ink)}
  .g-dest a:active{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:4px}
  .lt-row:active h2{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:8px;text-decoration-thickness:1px}
  .ar-pn:active span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px}
  .lt-card:active .lt-img img{transform:scale(1.035)}
  .lt-card:active h2{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:7px;text-decoration-thickness:1px}
  .fc:active .fc-img img,.fc-poster:active img{transform:scale(1.04);opacity:.86}
  .fc:active .fc-play,.fc-poster:active .fc-play{transform:scale(1.1);background:#fff}
  .fq-idx a:active{color:var(--ink)}
  .fq-more a:active span{text-decoration-color:var(--ink)}
  .fq summary:active::before,.fq summary:active::after{background:var(--gold-ink)}
}

/* ---------- R-MOV-16 · sin capas compuestas permanentes: GSAP ya promueve a 3D mientras anima y vuelve a 2D al terminar. Palabras de los títulos (una vez al entrar), grupos del collage y nombres fijos
   pasan a `auto`; las reseñas y las fotos de la categoría lo llevan solo mientras están en pantalla (reviews.js y category.js). Se dejan, justificados, la foto y el titular de la portada, la pista de
   la categoría y la marquesina, que se mueven en toda su vida en pantalla, y el cursor. ---------- */
.wi,body .t-h2 .wi,body .t-h2.in .wi,.owi,.cr-g,.names-fixed .ni,.rv-card,.k-item .kp{will-change:auto}

/* ---------- R-MOV-10 / R-TAB-06 · categoría con movimiento reducido (≥ 768): sin pin ni recorrido horizontal ligado al scroll. Las fotos pasan a filas justificadas con su proporción exacta
   (cada una crece en proporción a su ancho `--w`, que pone category.js; la última fila no se estira) y se recorren con el scroll normal ---------- */
@media (min-width:768px) and (prefers-reduced-motion:reduce){
  .k-wrap{height:auto;overflow:visible}
  .k-wrap #kTitle{position:static;padding:clamp(120px,16vh,170px) var(--pad) 0}
  .k-track{position:relative;display:flex;flex-wrap:wrap;gap:10px;height:auto;padding:36px var(--pad) 120px;transform:none;will-change:auto}
  .k-item{flex:var(--w) 1 calc(var(--w) * 1px);height:auto;aspect-ratio:var(--w) / 540;max-width:100%}
  .k-track::after{content:"";flex:1000000 1 0;height:0}
}

/* ---------- R-MOVIL-18 · enlaces sueltos que seguían en 17-23 px de alto: el relleno amplía la zona de toque y el margen negativo lo compensa (ni el aspecto ni el ritmo vertical cambian) ---------- */
@media (pointer:coarse){
  .g-dest a{padding:14px 6px;margin:-14px -6px}
  .hero-bar a{padding:12px 0;margin:-12px 0}
  .ar-body .fq-more a{display:inline-block;padding:12px 0;margin:-12px 0}
  .gq-light a{padding:12px 0}
  .t-dots{gap:35px}.t-dots button::after{inset:-18px -17.5px}   /* puntos del deslizador de fases: 9 px a la vista, 44 × 45 de zona (paso de 44 px: antes 25 × 45) */
}
/* nombres de las bodas: capa gemela por encima de las fotos (home.js la recorta a las fotos): el nombre es oscuro sobre el crema y blanco donde pasa una foto; nunca queda tapado */
.names-over{z-index:3;color:#fff;-webkit-text-stroke:.6px rgba(10,16,30,.55);paint-order:stroke fill;text-shadow:0 0 5px rgba(10,16,30,.6),0 1px 18px rgba(10,16,30,.5)}   /* contorno fino + halo: se lee también sobre fotos muy claras (cielo, vestido) */

/* ═══ RESP-F1 · ronda final: píldora, giro, FAQ, formularios (2026-10-02) ═══ */
/* RESP-F1 · píldora en la ficha de proyecto: site.js pone `.live` desde el resumen hasta el final (project.js solo la encendía mientras #pSum estaba en pantalla y nunca salía en la galería);
   `.idle`, `.yield` (regla de la casa) y `.at-foot` siguen retirándola */
body[data-page="project"] .pill.live:not(.idle):not(.yield):not(.at-foot){transform:translate(-50%,0)}
/* RESP-F1 · Cuaderno al girar de ≥1024 a <1024: durante unos milisegundos sigue montada la columna de fotos fijas (JS) pero sus reglas solo existen ≥1024, así que las 43 `.lt-si` se pintaban a tamaño natural,
   la página medía 43.000 px, el navegador reanclaba el scroll al final y ScrollTrigger lo restauraba al máximo: todas las entradas se revelaban de golpe y morían 47 triggers (de 56 a 9). Sin capa transitoria no hay reanclaje. */
@media (max-width:1023px){.lt-stage{display:none}}

/* RESP-F1 · gestos nativos (R-MOV-12): sin zoom por doble toque sobre el texto y sin «tirar para recargar» ni rebote al estirar desde arriba (la pista de fases lleva su `pan-y` propio: la intersección con `manipulation` sigue siendo `pan-y`;
   el menú y los paneles ya llevan `overscroll-behavior:contain`). El pellizco para ampliar se conserva (accesibilidad). */
html{touch-action:manipulation;overscroll-behavior-y:none}

/* RESP-F1 · portada: logo y «Menú» blancos sobre la foto (R-MOVIL-14, 2,4-2,7:1). Un velo en degradado, solo en la cabecera clara de la portada, que se apaga con el menú o los filtros abiertos; el resto de páginas no cambia.
   (Se pinta con ::after: ::before es el velo crema de la cabecera oscura.) */
.hdr::after{content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:linear-gradient(rgba(14,14,12,.55),rgba(14,14,12,.42) 42%,rgba(14,14,12,0))}
body[data-page="home"] .hdr.light::after,body[data-page="project"] .hdr.light::after{opacity:1}   /* también en la ficha de proyecto: su cabecera blanca va sobre fotos claras */
body.menu-open .hdr::after,body.filters-open .hdr::after,body[data-page="home"].menu-open .hdr.light::after,body[data-page="home"].filters-open .hdr.light::after,body[data-page="project"].menu-open .hdr.light::after,body[data-page="project"].filters-open .hdr.light::after{opacity:0}   /* más especificidad que la regla de la portada: el menú blanco no lleva velo oscuro */
@media (max-width:767px){.hdr::after{height:104px}}

/* RESP-F1 · tablas de artículo en móvil (R-MOVIL-25): cinco columnas no caben en 358 px y la cabecera quedaba cortada tras el scroll lateral. Hasta 640 px cada fila pasa a ficha: el nombre arriba y, debajo, cada dato con su
   rótulo de columna (light.js pone `data-l`); sin scroll horizontal. */
@media (max-width:640px){
  .ar-table{overflow:visible;background:none}
  .ar-table table,.ar-table tbody,.ar-table tr{display:block;width:100%}
  .ar-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ar-table tr{padding:16px 0 12px;border-bottom:1px solid rgba(201,166,107,.35)}
  .ar-table tr:first-child{border-top:1px solid var(--gold)}
  .ar-table td,.ar-table td:first-child,.ar-table td:last-child{display:grid;grid-template-columns:6.6em minmax(0,1fr);gap:0 14px;position:static;min-width:0;padding:3px 0;border:0;background:none;white-space:normal;line-height:22px}
  .ar-table td::before{content:attr(data-l);font:500 11px/22px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--olive-ink)}
  .ar-table td:first-child{display:block;font-weight:500;font-size:17px;line-height:24px;padding-bottom:4px}
  .ar-table td:first-child::before{content:none}
}

/* RESP-F1 · alturas de pantalla que descuentan la barra del navegador móvil (R-TAB-17): cabecera de Quiénes somos, su collage fuera del móvil vertical y las reseñas. `.legacy-pin` (sticky) se queda en 100vh a propósito:
   con `svh` dejaría una franja de crema bajo la foto al esconderse la barra. */
.a-hero{height:100vh;height:100svh}
.rev{height:max(820px,100vh);height:max(820px,100svh)}
@media (orientation:landscape){.a-collage{height:100vh;height:100svh}}
@media (orientation:portrait) and (min-width:768px){.a-collage{height:82vh;height:82svh}}

/* RESP-F1 · pie de página en táctil ≥768 (N-01): `min(1088px,120vh)` rebasaba la pantalla de los iPad de ≤1087 px de alto y, al llegar al final, su primera línea quedaba bajo «Música» y «Menú» (o fuera de pantalla en apaisado).
   Ahora nunca es más alto que lo que queda bajo la cabecera de 108 px (más la muesca); la altura mínima de 640 px sigue mandando en pantallas más bajas. El ratón no cambia. */
@media (pointer:coarse) and (min-width:768px){.foot{height:min(1088px,120vh,calc(100vh - 108px - var(--sat,0px)));height:min(1088px,120vh,calc(100svh - 108px - var(--sat,0px)))}}

/* RESP-F1 · Quiénes somos · collage en móvil vertical (R-MOVIL-25): seis fotos de 2:3 en un marco proporcional al ancho (154 vw), dos columnas escalonadas y las dos pequeñas encajadas entre ellas. Antes eran 26-30 vw de ancho
   sobre una caja de 72 vh y quedaba ≈ 40 % en blanco. Las posiciones inline que pone about.js (vw/vh pensadas para escritorio) se sustituyen aquí; ≥ 768 no cambia. */
@media (orientation:portrait) and (max-width:767px){
  .a-collage{height:154vw}
  .a-collage .im:nth-child(1){left:3vw!important;top:2vw!important;width:45vw!important}
  .a-collage .im:nth-child(2){left:55vw!important;top:12vw!important;width:38vw!important}
  .a-collage .im:nth-child(3){left:8vw!important;top:74vw!important;width:38vw!important}
  .a-collage .im:nth-child(4){left:50vw!important;top:72vw!important;width:34vw!important}
  .a-collage .im:nth-child(5){left:40vw!important;top:62vw!important;width:18vw!important}
  .a-collage .im:nth-child(6){left:72vw!important;top:114vw!important;width:26vw!important}
}
/* /RESP-F1 */

/* ═══ RESP-F2 · ronda final: portada, nombres de las bodas, categoría y ficha de proyecto (2026-10-02) ═══ */

/* R-MOV-26 · capa gemela de nombres (#namesOver): solo la franja vertical de los nombres, centrada al 50 % (1,8 em: el texto ocupa 1,65 con su relleno y `.nl`/`.nr` recortan el resto), en lugar de un
   viewport entero que el compositor repintaba y enmascaraba con `clip-path` en cada fotograma (home.js recorta además cada foto a esa banda). */
.names-over{inset:auto;left:0;right:0;top:calc(50% - .9em);height:1.8em}
/* N-02 · legibilidad sobre foto clara: el nombre blanco con contorno oscuro de .6 px se perdía sobre cielo, vestido y piedra (medido con la letra contra su entorno inmediato en 4 dispositivos y 13 posiciones:
   el 77 % de los píxeles de letra ≥ 3:1, mediana 4,3). Letra de tinta con contorno blanco de 1,4 px y halo de 6 px: el 100 % ≥ 3:1 (mediana 9,4) sobre fotos claras, medias y oscuras, y el nombre conserva
   el mismo color al pasar del crema a la foto. Sin contorno (solo halo) la medida bajaba al 80 % (24-71 % sobre fotos oscuras): el contorno se queda. */
.names-over{color:var(--ink);-webkit-text-stroke:1.4px rgba(255,255,255,.95);paint-order:stroke fill;text-shadow:0 0 6px rgba(255,255,255,.85)}

/* R-TAB-11 / R-MOVIL-NEW-02 · en táctil (tabletas y móviles apaisados) la miniatura de la portada sube sobre la foto fija y tapaba el 44-87 % de las caras: se aparta a la derecha de la pareja
   (caras en el 34-54 % del ancho; la miniatura ocupa ahora el 73-91 %). Con ratón (escritorio) se conserva la composición centrada de la referencia. */
@media (min-width:768px) and (pointer:coarse){.hero-thumb{left:82%;margin-left:0}}
/* móviles apaisados bajos (≤ 520 px): la miniatura no pasa de 40 vh de alto, para no rozar la frase de debajo (a 360 px de alto medía 189 px y entraba 12 px en ella) */
@media (orientation:landscape) and (max-height:520px) and (min-width:768px){.hero-thumb{width:min(17.4vw,250px,31.8vh)}}

/* R-MOV-32 · movimiento reducido: sin scrub, el titular se apaga con un fundido corto al pasar el primer tramo de scroll (home.js pone `.gone`) */
@media (prefers-reduced-motion:reduce){#heroWords{transition:opacity .4s}#heroWords.gone{opacity:0}}

/* R-TAB-07 · anillo de la portada (≥ 1024, táctil): los botones de 22 px pasan a 44 × 44 (centros a 54 px: no se solapan) */
@media (pointer:coarse){.ring button{width:44px;height:44px;margin-left:-22px}.ring .up{top:3px}.ring .dn{bottom:3px}}

/* Categoría ≥ 768 (R-TAB-05, R-MOVIL-NEW-03): el alto de la pista es una variable (--kh) y el ancho de cada foto sale de ella (--r = ancho/alto, category.js): al girar o cambiar de alto las fotos conservan
   su proporción (antes el ancho se fijaba en JS con 540 px y a ≤ 1023 la caja medía 440: recorte lateral del 18 %). */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .k-wrap{--kh:540px}
  .k-track,.k-item{height:var(--kh)}
  .k-item{width:calc(var(--kh) * var(--r))}
}
@media (min-width:768px) and (max-width:1023px) and (prefers-reduced-motion:no-preference){.k-wrap{--kh:440px}}
/* tabletas y pantallas verticales: la pista sube a ≈ 62 % de la pantalla y el título queda 150 px sobre ella (antes la pista medía 440 abajo y quedaba un hueco de ≈ 340 px bajo el título) */
@media (min-width:768px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
  .k-wrap{--kh:min(62vh,680px)}
  .k-wrap #kTitle{top:max(120px,calc(100vh - var(--kh) - 150px))}
}
/* móviles apaisados (≥ 768 de ancho, ≤ 520 de alto): título sobre crema y la pista justo debajo, entera (antes 440 px en 390 de alto: el título oscuro caía sobre las fotos a 3,1-4,1:1 y entraba
   17 px en la zona de la muesca) */
@media (min-width:768px) and (orientation:landscape) and (max-height:520px) and (prefers-reduced-motion:no-preference){
  .k-wrap{--kh:calc(100vh - 128px);--kh:calc(100svh - 128px);height:100vh;height:100svh}
  .k-wrap #kTitle{top:76px}
}
.k-wrap #kTitle{left:max(var(--pad),calc(var(--sal) + 16px))}
/* móvil vertical: rejilla de dos columnas con las fotos ya recortadas 1:1,35 (media/tile/): sin los 16 px laterales de paralaje, que solo existen en la pista de ≥ 768 */
.k-item .kp picture{display:contents}
@media (max-width:767px){.k-item .kp{left:0;right:0}}

/* R-MOVIL-NEW-06 · el encuadre de la foto de la cabecera y del siguiente proyecto (la pareja en móvil vertical) lo decide el sistema de foco (js/focus.js) */
/* /RESP-F2 */

/* MAKERSWED en texto corrido: fuente del logo de la cabecera (site.js lo envuelve en .mk) */
.mk{font-family:var(--serif);font-weight:400;font-style:normal;letter-spacing:.14em;white-space:nowrap}
/* logo centrado sobre «Nuestro trabajo» con el menú abierto (site.js fija --mlx = centro de .menu-links) */
body.menu-open .logo{left:var(--mlx,50%);transform:translateX(-50%)}
/* el «&» de los nombres va siempre por debajo de las fotos: la capa de nombres sobre las fotos (.names-over) no lo pinta; el de la capa de fondo queda tapado por la foto */
.names-over em{visibility:hidden}

/* texto del home en el HTML (indexable sin JS): fuera de la vista, sin tocar el diseño */
.seo-txt{padding:40px var(--pad)}   /* solo se pinta sin JavaScript (va dentro de <noscript>): texto real para buscadores y lectores sin JS, nunca oculto */
/* pie en móvil: copyright en su propia fila y enlaces legales sin solaparse */
@media (max-width:767px){.f-bot{flex-wrap:wrap;gap:0 24px}.f-bot p{flex:0 0 100%;margin:0 0 4px}}
/* contraste del título de proyecto sobre fotos claras */
.p-hero h1{text-shadow:0 1px 28px rgba(0,0,0,.4)}
/* portada: la foto de fondo y la pequeña del centro abren el álbum con la foto instantánea */
.hero-open{display:block;width:100%;height:100%;cursor:pointer}

/* ── Móvil: tira de miniaturas en marquee (js/movil.js) ── */
@media (max-width:767px){
  .wed-strip.mq{display:block;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .wed-strip .mq-track{display:flex;gap:5px;width:100%;will-change:transform}
  .wed-strip .mq-track .ws{flex:0 0 calc((100% - 20px) / 5);width:auto}
  .wed-strip.mq .ws,.wed-strip.mq .ws *{touch-action:pan-y}
  .wed-strip.mq.drag .ws{pointer-events:none}
}
/* sin movimiento: la tira queda estática y se desliza a mano, con snap */
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .wed-strip{display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .wed-strip .ws{flex:0 0 26%;width:auto;scroll-snap-align:start}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA MÓVIL (≤ 767 px) — auditoría 2026-10-03
   Solo tamaños, interlineados y el color de la entradilla. Familias, pesos, HTML y efectos (.wi/.ln/.ni, rv-mask) intactos; ≥ 768 px no cambia.
   Escala (Cormorant tiene poca altura de x: lo que va en Cormorant sube ~2 px sobre lo que iría en Inter):
     H1 34-44 (clamp) · H2 27-32 · H3 22-24 (24 en tarjetas/fichas, 22 en artículo) · entradilla 20-24 · cuerpo 16-17 · kicker 14-17 · etiqueta/nota ≥ 12-13
   Jerarquía: ningún H2/etiqueta ≥ H1 (antes: kicker de artículo 35 px > H1 31,5; H2 de formulario 40 px > H1 30,75).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* títulos de página / artículo / sección */
  body .t-h1{font-size:clamp(34px,10.2vw,44px)}
  body .t-h1--s{font-size:clamp(36px,10.5vw,44px)}
  body .t-art{font-size:clamp(36px,11vw,46px);--t-lh:1.06}
  body .t-art .t-tail{font-size:.56em;line-height:1.25}
  body .t-h2,body .t-h2--item{font-size:clamp(27px,7.8vw,32px)}
  .form h2{font-size:clamp(30px,8.4vw,34px);line-height:1.15}   /* era 40: más grande que el H1 */
  .form p{font-size:22px;line-height:1.3}
  .svc h2{font-size:30px}.svc h2.sub{font-size:26px}
  .person h2{font-size:30px;line-height:1.15}
  .cx-row h2{font-size:30px}
  .coll h3{font-size:24px}

  /* artículo: cabecera */
  .ar-back{font-size:16px;margin-bottom:32px}
  .ar-head .a-label{font-size:15px;line-height:1.3;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:0;margin:0 0 18px}   /* etiqueta ≪ título (era 35 px, más grande que el H1) */
  .ar-dek{font-size:21px;line-height:1.4;color:#3f4239}   /* #3f4239 sobre crema ≈ 9:1; el gris olivo con peso 375 se perdía */
  /* artículo: cuerpo */
  .ar-body p{font-size:17px;line-height:27px;margin-bottom:20px}
  .ar-body h2{font-size:28px;line-height:1.18;margin:44px 0 14px}
  .ar-body h3{font-size:22px;line-height:1.22;margin:30px 0 10px}
  .ar-body blockquote{font-size:21px;line-height:1.35}
  .lt-g{font-size:26px}
  .ar-fig figcaption,.ar-cover figcaption{font-size:13px;line-height:1.4}
  .ar-pn small{font-size:13px}.ar-pn span{font-size:22px}
  .ar-table td::before{font-size:12px}

  /* listados (cuaderno, guía) */
  .lt-card h2,.lt-row h2{font-size:28px}

  /* entradillas y textos largos en Cormorant: más aire de interlínea */
  .a-lead{font-size:24px;line-height:1.25}
  .a-gloss{line-height:1.4}
  .svc .bio{font-size:24px;line-height:1.28}
  .films-lead{line-height:1.3}
  .f-txt{font-size:24px;line-height:1.25}
  .hero-copy{line-height:1.22}

  /* cuerpo y notas pequeñas */
  .cx-incl li,.cx-incl{font-size:16px}
  .rv-card blockquote{font-size:17px;line-height:1.35}
  .rev-t{font-size:13px}
  .rv-by span{font-size:12px}
  .pill sup{font-size:12px}
  .g-dest span{font-size:12px}
  body .t-micro{font-size:13px}
  .f-in .f-main small{font-size:13px}
  /* sin viudas de una palabra en párrafos largos */
  .ar-body p,.ar-dek,.lt-card p,.lt-row p,.a-lead,.svc .bio,.fq-a p{text-wrap:pretty}
}

/* ============ MESA DE CONTACTOS · instantáneas en la cabecera .a-hero (js/mesa.js) ============
   Cada .pq-p es una instantánea en 4 capas: .pq-p (posición, paralaje de scroll, salida) › .pq-m (paralaje de ratón) › .pq-f (flotación + sombra ambiente) › .pq-r (marco, giro, asentamiento).
   Nunca tapan texto: el texto de la cabecera va por encima, y la capa no recibe el puntero. */
.a-hero>:not(.pq){position:relative;z-index:2}
.pq{position:absolute;inset:0;pointer-events:none;overflow:clip;z-index:1}
.pq-p{position:absolute;width:var(--w);height:calc(var(--w)*1.216);margin:0;will-change:transform}
.pq-m,.pq-f,.pq-r{position:absolute;inset:0}
.pq-f::before{content:"";position:absolute;inset:2%;transform:rotate(calc(var(--r)*.55));transition:box-shadow .7s cubic-bezier(.2,.7,.2,1);box-shadow:0 calc(var(--w)*.1) calc(var(--w)*.18) calc(var(--w)*-.07) rgba(28,28,26,.34),0 calc(var(--w)*.2) calc(var(--w)*.36) calc(var(--w)*-.17) rgba(28,28,26,.17)}
.is-up .pq-f::before{box-shadow:0 calc(var(--w)*.17) calc(var(--w)*.26) calc(var(--w)*-.08) rgba(28,28,26,.36),0 calc(var(--w)*.3) calc(var(--w)*.5) calc(var(--w)*-.18) rgba(28,28,26,.2)}
.pq-r{box-sizing:border-box;padding:calc(var(--w)*.055) calc(var(--w)*.055) 0;background:linear-gradient(162deg,#FDFBF6,#F7F2E7);transform-origin:50% 55%;translate:0 0;transition:translate .6s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 0 .5px rgba(28,28,26,.07),0 1px 1px rgba(28,28,26,.16),0 2px 4px -1px rgba(28,28,26,.1)}
.is-up .pq-r{translate:0 -6px}
.pq-r::before{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.4;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .22 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.pq-w{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#cfcabd}
.pq-w img{width:100%;height:100%;display:block;object-fit:cover}
.pq-w::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(28,28,26,.08),inset 0 0 calc(var(--w)*.14) rgba(28,28,26,.12)}
.pq-v{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 35%,#2f4749,#17282b 70%)}
.pq-t{position:absolute;z-index:2;top:calc(var(--w)*-.035);left:50%;width:calc(var(--w)*.36);height:calc(var(--w)*.1);margin-left:calc(var(--w)*-.3);transform:rotate(-7deg);filter:drop-shadow(0 1px 1px rgba(28,28,26,.2))}
.pq-t::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px),linear-gradient(rgba(232,215,176,.62),rgba(214,190,138,.55));clip-path:polygon(0 0,100% 0,97.5% 25%,100% 50%,97.5% 75%,100% 100%,0 100%,2.5% 75%,0 50%,2.5% 25%)}
.pq-c{position:absolute;z-index:2;top:calc(var(--w)*-.075);right:calc(var(--w)*.17);width:calc(var(--w)*.075);height:calc(var(--w)*.21);border-radius:1px 1px calc(var(--w)*.03) calc(var(--w)*.03);background:linear-gradient(90deg,var(--gold-ink),#E6CF9C 38%,var(--gold) 62%,var(--gold-ink));box-shadow:0 1px 2px rgba(28,28,26,.3),0 calc(var(--w)*.03) calc(var(--w)*.05) rgba(28,28,26,.14)}
.pq-c::after{content:"";position:absolute;left:18%;right:18%;top:calc(var(--w)*.045);bottom:calc(var(--w)*.04);border-left:1px solid rgba(28,28,26,.22);border-right:1px solid rgba(255,255,255,.35)}
@media (max-width:767px){.a-hero{height:62vh;height:62svh;align-content:end;padding-bottom:7vh;padding-bottom:7svh}}
@media (prefers-reduced-motion:reduce){.pq-r,.pq-f::before{transition:none}.pq-p{will-change:auto}}

/* instantáneas de las cabeceras: clicables (abren su álbum con la foto instantánea) */
.pq-a{position:absolute;inset:0;z-index:4;display:block;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* portada en móvil: el lema va centrado y por debajo de los rostros de la pareja (no los tapa) */
@media (max-width:767px){
  .hero-words{align-items:center;text-align:center}
  .hero-words p{position:relative;left:auto!important;top:auto!important;margin-left:auto;margin-right:auto;text-align:center;white-space:normal;max-width:100%}
  .hero-words .hq{margin-top:.5em}
}
/* tira de miniaturas en móvil: altura fija y ancho según la proporción real de cada foto (cubre todo el recuadro, sin bandas) */
@media (max-width:767px){
  .wed-strip .mq-track{align-items:flex-start}
  .wed-strip .mq-track .ws{flex:0 0 auto;height:calc((100vw - 30px - 20px) / 5 * 1.333);width:calc((100vw - 30px - 20px) / 5 * 1.333 * var(--ar,.75))}
  .wed-strip .mq-track .ws .pim{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}
@media (max-width:767px){.wed-strip .ws .pim{object-fit:cover!important;object-position:50% 50%!important}}   /* la caja ya tiene la proporción de la foto: cubre sin bandas ni recortes */
/* títulos: cada renglón (.ln) es su propio bloque de formato (flow-root) para que los márgenes negativos de la máscara (.wm) no se fusionen entre renglones: así la distancia arriba y abajo de cada línea es la misma (la del interlineado) en todos los títulos */
.t-h1 .ln,.t-h2 .ln,.t-art .ln,.a-hero h1 .ln,.ar-head h1 .ln,body .t-h1 .ln,body .t-h2 .ln,body .t-art .ln{display:flow-root}

/* Extras a su medida: rejilla de tarjetas con icono */
.enh-grid{list-style:none;margin:clamp(28px,4vw,48px) auto 0;padding:0 var(--pad);max-width:1180px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.enh-grid li{border-top:1px solid var(--gold,#c9a66b);padding:20px 4px 6px;text-align:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.enh-grid svg{display:block;color:var(--gold,#c9a66b);margin-bottom:14px}
.enh-grid h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.15;margin:0 0 6px}
.enh-grid p{font-size:14px;line-height:1.45;color:var(--mute);margin:0;max-width:24ch}
@media (hover:hover){.enh-grid li:hover{transform:translateY(-4px)}}
@media (max-width:1023px){.enh-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.enh-grid{gap:10px 14px}.enh-grid li{padding-top:16px}.enh-grid h3{font-size:19px}.enh-grid p{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.enh-grid li{transition:none}}
/* etiqueta del artículo («Servicio · 3 min de lectura»): pequeña y en versalitas en todos los tamaños (en escritorio medía 35 px, más grande que su título) */
body .ar-head .a-label,body .ar-head .t-kicker{font-family:var(--sans);font-size:14px;line-height:1.3;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:0;margin:0 0 20px;color:var(--mute)}
/* saltos de línea armoniosos: títulos y entradillas equilibrados (sin palabras sueltas o inicios de frase al final de una línea), párrafos sin viudas */
h1,h2,h3,.t-h1,.t-h2,.a-lead,.ar-dek,.films-lead,.c-intro,.q-lead,.lead,.crit,.hq,.sub,.t-tx h2,.t-tx .big{text-wrap:balance}
.ar-body p,.ar-body li,.fq-a p,.a-body p,.gz-b p,.q-lead,.note,.sum,p{text-wrap:pretty}
/* enlace secundario bajo el botón del cierre de página: separado del botón y en tamaño de texto normal */
body .form .form-alt{margin-top:30px;font-family:var(--sans);font-size:16px;line-height:1.3}
body .form .form-alt a{font-size:inherit;font-family:inherit}

/* Quiénes somos · «Belleza que perdura»: tres renglones más pequeños, juntos, con el mismo interlineado y centrados en la pantalla */
.legacy-words{font-size:clamp(64px,11vw,168px)!important;line-height:1.02!important;gap:0}
.legacy-words span{display:block;line-height:1.02}
@media (max-width:767px){.legacy-words{font-size:17vw!important}}

/* Portada · cierre sobre la foto: miniatura con marco fino, filete corto, titular equilibrado en dos renglones y botón de cristal */
@media (min-width:768px){
  .hero-thumb{width:min(18.5vw,270px);top:121vh;outline:1px solid rgba(255,255,255,.7);outline-offset:8px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
  .hero-thumb img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .hero-pin:hover .hero-thumb img{transform:scale(1.045)}
  .hero-line{left:50%;right:auto;width:64px;margin-left:14px;transform:translateX(-50%);top:166vh;background:rgba(255,255,255,.85)}
  .hero-copy{top:169vh;width:min(60vw,820px);font-size:clamp(24px,2.5vw,40px);line-height:1.22;letter-spacing:.005em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .hero-cta{top:187vh;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .35s,color .35s}
  .hero-cta:hover{background:#fff;color:var(--ink)}
}

/* Portada · versión mínima: sin marco, sin sombra, sin filete ni cristal; solo foto, un titular sobrio y el botón blanco de siempre */
@media (min-width:768px){
  .hero-thumb{outline:0;box-shadow:none;width:min(15vw,220px);top:124vh}
  .hero-pin:hover .hero-thumb img{transform:none}
  .hero-line{display:none}
  .hero-copy{top:168vh;width:min(46vw,640px);font-size:clamp(20px,1.9vw,30px);line-height:1.3;font-weight:300;text-shadow:none}
  .hero-cta{top:182vh;background:var(--cream);color:var(--ink);border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-cta:hover{background:#fff}
}

/* Nombres sobre las fotos: letra limpia, sin borde ni halo blanco */
.names-over{-webkit-text-stroke:0!important;paint-order:normal!important;text-shadow:none!important}

/* Titulares grandes con dos letras: serif en cursiva para el ritmo y versalitas finas para las palabras clave */
.a-lead em{font-style:italic;font-weight:400;font-size:1.08em}
.a-lead b{font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.92em}

/* vista previa de películas al pasar el ratón */
.fc-img,.fc-poster{position:relative}
.fc-pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s;pointer-events:none;z-index:1}
.fc-pv.on{opacity:1}
.fc-play{z-index:2}
.ar-dek em,.films-lead em,.c-intro em,.form h2 em,.tx h2 em{font-style:italic;font-weight:400;font-size:1.08em}
.ar-dek b,.films-lead b,.c-intro b,.form h2 b,.tx h2 b{font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.92em}
.svc .bio em,.svc h2 em,.form p em,.c-ok h2 em,.c-ok p em,.f-txt em{font-style:italic;font-weight:400;font-size:1.08em}
.svc .bio b,.svc h2 b,.form p b,.c-ok h2 b,.c-ok p b,.f-txt b{font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.92em}
/* tablas de artículo: a partir de 641 px las celdas se parten en lugar de salirse de la caja (la última columna quedaba cortada en el borde) */
@media (min-width:641px){.ar-table td{white-space:normal}.ar-table td:last-child{min-width:12em}}
/* filtros del cuaderno en pantallas anchas: .lt-rows .lt-card (display:grid) ganaba a .lt-card.off y las tarjetas filtradas seguían visibles */
.lt-rows .lt-card.off{display:none}
.hero-copy em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em}
.hero-copy b{font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:.88em}
/* táctil: enlaces de «También le puede interesar» con 44 px de alto */
@media (pointer:coarse){.ar-body .ar-rel li a{padding:10px 0}}

/* Quiénes somos · collage en tableta vertical: dos filas de tres fotos grandes en lugar de una fila diminuta con el resto en blanco */
@media (min-width:768px) and (orientation:portrait){
  .a-collage{height:112vw}
  .a-collage .im{width:29vw!important}
  .a-collage .im:nth-child(1){left:3vw!important;top:4vw!important}
  .a-collage .im:nth-child(2){left:35.5vw!important;top:11vw!important}
  .a-collage .im:nth-child(3){left:68vw!important;top:4vw!important}
  .a-collage .im:nth-child(4){left:3vw!important;top:58vw!important}
  .a-collage .im:nth-child(5){left:35.5vw!important;top:65vw!important}
  .a-collage .im:nth-child(6){left:68vw!important;top:58vw!important}
}

/* Páginas legales: columna de lectura estrecha, títulos de sección en serif y texto en sans */
.lg-wrap{max-width:760px;margin:0 auto;padding:40px var(--pad) 120px}
.lg-s{margin-top:44px}
.lg-s h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.15;margin:0 0 14px}
.lg-s p{font-family:var(--sans);font-size:17px;line-height:1.65;margin:0 0 14px;text-wrap:pretty}
.lg-s a{text-decoration:underline;text-underline-offset:3px}

/* Portada · cierre en tableta vertical: titular algo mayor y el botón más cerca */
@media (min-width:768px) and (orientation:portrait){
  .hero-copy{font-size:clamp(26px,3.4vw,34px);width:min(64vw,560px)}
  .hero-cta{top:177vh}
}

/* La marquesina de cifras no ensancha el documento (EN a 390 px sumaba 24 px de scroll horizontal). La cinta de vocabulario (.press) NO se recorta a sí misma: se desplaza con GSAP y su caja con overflow:hidden cortaba las palabras de la derecha («Atemporal (»); la recorta su sección .press */
.marq{max-width:100%;overflow:hidden}
.press .marq{max-width:none;overflow:visible}

/* Cifras de los artículos: la cifra larga («a month and a half») pasa a dos renglones en vez de ensanchar la página */
.ar-body .ar-facts dd{white-space:normal!important;overflow-wrap:break-word;min-width:0}
.ar-facts>div{min-width:0}

/* ============ Interlineado compacto en titulares y leads grandes + pie (2026-10-05) ============
   Causa del hueco: `em` (1,08-1,2 em), `b` (.92 em, otra fuente en mayúscula) y `.mk` (nombre de marca con letter-spacing) heredan el interlineado SIN unidad del bloque, así que su caja en línea mide más que
   la línea y la empuja (≈ 1,4 en vez de 1,15 en «Su historia merece…»). `line-height:0` en esos inline hace que la altura de línea la fije solo el bloque. */
:is(h1,h2,h3,.a-lead,.ar-dek,.films-lead,.c-intro,.q-lead,.lead,.hq,.hero-copy,.svc .bio,.form p,.c-ok p,.f-txt,.t-tx .big) :is(em,b,strong,i,.mk){line-height:0;vertical-align:baseline;padding-top:0;padding-bottom:0}
.form h2{line-height:1.12}
.hero-copy{line-height:1.25}

/* Pie: el bloque «Su historia merece…» pasa de una columna de 340 px (11 líneas) a ≈ 520 px (4-5 líneas), con el tamaño y el interlineado de un titular compacto; nunca llega al logo central (50 % − 56 px). */
@media (min-width:768px){
  .f-txt{font-size:clamp(21px,1.75vw,28px);line-height:1.18;max-width:min(520px,calc(50% - var(--pad) - 56px));text-wrap:balance}
  .foot .btn{margin-top:30px}
}
@media (max-width:767px){.f-txt{font-size:24px;line-height:1.2}}

/* Alemán (palabras largas): en titulares y leads solo se parte en los guiones suaves y, como último recurso, por palabra (nunca desborda); en párrafos corridos, partición automática */
html[lang=de] :is(h1,h2,h3,.a-lead,.ar-dek,.c-intro,.f-txt,.hq,.hero-copy,.films-lead){hyphens:manual;overflow-wrap:break-word}
html[lang=de] :is(.ar-body p,.lt-card p,.lt-row p,.svc .bio,.fq-a p,.c-intro){hyphens:auto}

/* fotos del menú y de «Bodas y sesiones»: pulsables (foto instantánea + álbum); solo la capa visible recibe el clic */
.pv-open{display:block;position:absolute;inset:0;cursor:pointer}
.menu-img .pv:not(.on),.f-img .pv:not(.on){pointer-events:none}

/* sugerencia de idioma (barra discreta, abajo; no tapa texto: ocupa su propia franja y se puede cerrar) */
.lang-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;gap:14px;max-width:560px;margin:0 auto;padding:12px 14px 12px 18px;background:var(--cream);color:var(--ink);border:1px solid var(--stone);font:400 14px/1.35 Inter,system-ui,sans-serif}
.lang-bar p{flex:1;margin:0}
.lang-bar a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;font-weight:500}
.lang-bar button{border:0;background:none;color:var(--olive-ink);font-size:22px;line-height:1;padding:4px 8px;cursor:pointer}
@media (max-width:480px){.lang-bar{flex-wrap:wrap;gap:6px 12px}.lang-bar p{flex-basis:100%}}