/* Vida: capa de movimiento y secciones nuevas de la web de Both Company (nov-2026).
   Idea: nada aparece, todo se cose. Las líneas entran puntada por puntada, los textos suben de su renglón, los logos se
   unen con un hilo, la galería se mira por un bastidor y el catálogo es un libro que se abre de verdad.
   Regla de oro: el estilo base es el estado final. Lo oculto solo existe bajo html.vivo y mientras falte .visto, así que
   sin JavaScript, para los buscadores y en movimiento reducido todo está en su sitio. */
:root{
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-io:cubic-bezier(.77,0,.175,1);
  --puntada:7px; --hueco:5px;
}

/* ---------- lo que se aplica a todos los grupos ---------- */
html.sin-transicion *, html.sin-transicion *::before, html.sin-transicion *::after{ transition:none !important; }
/* Quien pide menos movimiento (o tiene apagados los efectos de Windows) ve la página viva, sin lo que puede marear:
   paralaje, giros y flotación los quita vida.js; aquí lo que corre solo sin que nadie lo pida. */
html.calma .forma--mancha, html.calma .parche--tuyo a{ animation:none; }
html.calma .thread-rail{ display:block; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* palabras que suben de su renglón */
.pal{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .07em .2em; margin:0 -.07em -.2em; }
.pal > span{ display:inline-block; }
html.vivo [data-entra]:not(.listo) .pal > span{ transition:transform .85s var(--e-out) calc(var(--i, 0) * 60ms + var(--espera, 0ms)); }
html.vivo [data-entra]:not(.visto) .pal > span{ transform:translateY(112%); }

/* la raya del título de cada sección crece */
html.vivo [data-entra="eyebrow"]:not(.listo)::before{ transition:transform .7s var(--e-out); transform-origin:left; }
html.vivo [data-entra="eyebrow"]:not(.visto)::before{ transform:scaleX(0); }

/* respuesta al tocar: la web escucha */
.btn, .craft__link, .hero__link{ transition-property:transform, color, background-color, border-color; }
.btn:active{ transform:scale(.97); transition:transform .12s var(--e-out); }

/* ---------- el hilo del costado: la página se va cosiendo ---------- */
html.vivo .thread-rail{ overflow:visible; background:repeating-linear-gradient(180deg, rgba(22,19,15,.13) 0 var(--puntada), transparent var(--puntada) 12px); }
html.vivo .thread-rail span{ background:repeating-linear-gradient(180deg, var(--gold) 0 var(--puntada), transparent var(--puntada) 12px); }
html.vivo .thread-rail span::after{ content:""; position:absolute; left:50%; bottom:-20px; width:2px; height:22px; transform:translateX(-50%); background:linear-gradient(#b9b4a9, #6e6a63); clip-path:polygon(0 0, 100% 0, 50% 100%); }

/* ---------- líneas cosidas ---------- */
.craft__numbers, .craft__footnote{ position:relative; }
html.vivo .craft__numbers, html.vivo .craft__footnote{ border-top-color:transparent; }
html.vivo .craft__numbers::before, html.vivo .craft__footnote::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1.5px;
  background:repeating-linear-gradient(90deg, rgba(148,108,32,.6) 0 var(--puntada), transparent var(--puntada) 12px);
  clip-path:inset(0); transition:clip-path 1.5s steps(56, end) .5s;
}
html.vivo [data-entra]:not(.visto).craft__footnote::before,
html.vivo .craft__story[data-entra]:not(.visto) .craft__numbers::before{ clip-path:inset(0 100% 0 0); }

/* ---------- Tu marca, bien puesta ---------- */
.craft__title em{ position:relative; }
.subrayado, .aguja{ position:absolute; left:0; bottom:-.15em; width:100%; height:.27em; overflow:visible; pointer-events:none; }
.subrayado .hilo{ fill:none; stroke:var(--gold); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:8 6; vector-effect:non-scaling-stroke; }
.trazo{ fill:none; stroke:#fff; stroke-width:12; stroke-dasharray:1 1; stroke-dashoffset:0; vector-effect:non-scaling-stroke; }
html.vivo [data-entra]:not(.visto) .subrayado .trazo{ stroke-dashoffset:1; }
.aguja{ opacity:0; }
.aguja line{ stroke:#6f6a60; stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.aguja circle{ fill:none; stroke:#8d887e; stroke-width:.8; vector-effect:non-scaling-stroke; }

html.vivo .craft__story[data-entra]:not(.listo) > :not(.craft__title):not(.craft__numbers){ transition:opacity .8s var(--e-out) .35s, transform .9s var(--e-out) .35s; }
html.vivo .craft__story[data-entra]:not(.visto) > :not(.craft__title):not(.craft__numbers){ opacity:0; transform:translateY(16px); }
html.vivo .craft__story[data-entra]:not(.listo) .craft__numbers > div{ transition:opacity .7s var(--e-out) calc(.6s + var(--i, 0) * 100ms), transform .8s var(--e-out) calc(.6s + var(--i, 0) * 100ms); }
html.vivo .craft__story[data-entra]:not(.visto) .craft__numbers > div{ opacity:0; transform:translateY(14px); }

/* la foto llega torcida y se acomoda: bien puesta */
html.vivo .craft__figure[data-entra]:not(.listo){ transition:transform 1.5s var(--e-out); }
html.vivo .craft__figure[data-entra]:not(.visto){ transform:rotate(8deg) translateY(44px); }
.craft__marco{ position:absolute; inset:0; display:block; overflow:hidden; }
html.vivo .craft__photo{ background:none; }
.craft__marco img, .craft__marco video{ position:absolute; left:0; top:-4%; width:100%; height:108%; object-fit:cover; object-position:50% 40%; }
.craft__marco video{ opacity:0; transition:opacity .5s ease; }
.craft__marco video.corre{ opacity:1; }
html.vivo .craft__marco{ clip-path:inset(0); }
html.vivo .craft__figure[data-entra]:not(.listo) .craft__marco{ transition:clip-path 1.25s var(--e-io); }
html.vivo .craft__figure[data-entra]:not(.visto) .craft__marco{ clip-path:inset(100% 0 0 0); }
.craft__pausa{ position:absolute; z-index:3; left:12px; top:12px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(22,19,15,.62); color:#fff; transition:background-color .2s ease, transform .12s var(--e-out); }
.craft__pausa[hidden]{ display:none; }
.craft__pausa::before{ content:""; position:absolute; inset:-6px; }  /* área de toque más grande que el botón */
.craft__pausa:hover{ background:rgba(22,19,15,.84); }
.craft__pausa:active{ transform:scale(.95); }
.craft__pausa:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; }
.craft__pausa svg{ width:14px; height:14px; fill:currentColor; }
.craft__pausa .i-play, .craft__pausa[aria-pressed="true"] .i-pausa{ display:none; }
.craft__pausa[aria-pressed="true"] .i-play{ display:block; }
.craft__photo-note::after{ content:""; position:absolute; inset:6px; border:1.2px dashed rgba(148,108,32,.55); pointer-events:none; }
html.vivo .craft__figure[data-entra]:not(.listo) .craft__photo-note{ transition:transform .7s var(--e-out) 1s, opacity .35s ease 1s; }
html.vivo .craft__figure[data-entra]:not(.visto) .craft__photo-note{ opacity:0; transform:rotate(-16deg) translateY(22px) scale(.92); }
html.vivo .craft__photo-note::after{ clip-path:inset(0); }
html.vivo .craft__figure[data-entra]:not(.listo) .craft__photo-note::after{ transition:clip-path .9s steps(22, end) 1.5s; }
html.vivo .craft__figure[data-entra]:not(.visto) .craft__photo-note::after{ clip-path:inset(0 100% 0 0); }
html.vivo .craft__figure[data-entra]:not(.listo) figcaption{ transition:opacity .6s ease 1.1s; }
html.vivo .craft__figure[data-entra]:not(.visto) figcaption{ opacity:0; }

/* ---------- marcas: un hilo que las une ---------- */
.marcas2{ background:var(--cream); padding-block:clamp(48px,5vw,72px); scroll-margin-top:90px; overflow:hidden; }
.marcas2__in{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.7fr); gap:clamp(24px,3vw,48px); align-items:center; }
.marcas2__head h2{ font-size:clamp(27px,2.7vw,37px); font-weight:500; line-height:1.08; letter-spacing:-.01em; }
.marcas2__head .brands__number{ margin-top:6px; }
.marcas2__head .brands__intro{ margin-top:16px; font-size:14px; line-height:1.6; color:#6b6256; }
.marcas2__head .craft__link{ margin-top:16px; }
html.vivo .marcas2__head[data-entra]:not(.listo) > :not(h2):not(.brands__number){ transition:opacity .8s var(--e-out) .3s, transform .9s var(--e-out) .3s; }
html.vivo .marcas2__head[data-entra]:not(.visto) > :not(h2):not(.brands__number){ opacity:0; transform:translateY(14px); }
.brands__number span{ display:inline-block; }
html.vivo .marcas2__head[data-entra]:not(.listo) .brands__number span{ transition:transform .55s cubic-bezier(.34,1.56,.64,1) 1.25s, opacity .2s ease 1.25s; }
html.vivo .marcas2__head[data-entra]:not(.visto) .brands__number span{ opacity:0; transform:scale(.5) rotate(-30deg); }

.constelacion{ position:relative; height:clamp(390px,30vw,440px); }
.constelacion > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.constelacion ul{ list-style:none; position:absolute; inset:0; }
.hilo-c{ fill:none; stroke:var(--gold-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:7 5; opacity:.72; }
.perla-c{ fill:var(--gold); opacity:0; transition:opacity .4s ease; }
.perla-c.on{ opacity:1; }
.aguja-c{ opacity:0; }
.aguja-c line{ stroke:#6f6a60; stroke-width:2; stroke-linecap:round; }
.aguja-c.on{ opacity:1; }

.parche{ --k:1; position:absolute; left:var(--x); top:var(--y); width:calc(var(--pw) * var(--k)); height:calc(var(--ph) * var(--k)); translate:-50% -50%; display:grid; place-items:center; background:#fffdf8; border-radius:50%; box-shadow:0 1px 0 rgba(22,19,15,.05), 0 10px 22px -14px rgba(22,19,15,.38); user-select:none; will-change:transform; }
.parche--pastilla{ border-radius:999px; }
.parche::before{ content:""; position:absolute; inset:4px; border-radius:inherit; border:1.2px dashed rgba(148,108,32,.42); pointer-events:none; }
.parche img{ width:calc(var(--iw) * var(--k)); height:calc(var(--ih) * var(--k)); object-fit:contain; filter:grayscale(1) contrast(1.2) brightness(.78); transition:filter .5s ease; -webkit-user-drag:none; }
.parche.brillo img{ filter:none; }
@media (hover:hover) and (pointer:fine){
  .parche:not(.parche--tuyo){ cursor:grab; }
  .parche:not(.parche--tuyo):active{ cursor:grabbing; }
  .parche:hover img{ filter:none; }
}
html.vivo .parche{ transition:opacity .3s ease, scale .55s cubic-bezier(.34,1.4,.64,1); }
html.vivo .constelacion[data-entra] .parche:not(.cosido){ opacity:0; scale:.8; }
.parche--tuyo{ background:none; box-shadow:none; }
.parche--tuyo::before{ display:none; }
.parche--tuyo a{ position:relative; display:grid; place-items:center; width:100%; height:100%; padding:10px; border-radius:50%; background:var(--cream); text-align:center; color:var(--gold-deep); font-size:13px; font-weight:600; line-height:1.2; border:1.6px dashed var(--gold); transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.parche--tuyo i{ font-style:normal; }
@media (hover:hover) and (pointer:fine){ .parche--tuyo a:hover{ background:var(--gold); color:var(--ink); border-color:var(--ink); } }
html.vivo .parche--tuyo a{ animation:latido 2.8s ease-in-out infinite; }
@keyframes latido{ 50%{ scale:1.05; } }

.sectores2{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 0; margin-top:14px; font-size:11.5px; color:#71685b; }
.sectores2 b{ margin-right:18px; font-family:Georgia,'Times New Roman',serif; font-size:15px; font-style:italic; font-weight:400; color:#6b5b43; }
.sectores2 span:not(:last-child)::after{ content:' / '; margin-inline:9px; color:#a99b88; }
html.vivo .sectores2[data-entra]:not(.listo){ transition:opacity .9s ease .3s; }
html.vivo .sectores2[data-entra]:not(.visto){ opacity:0; }

/* ---------- galería: blanco y negro, el color lo pone el bastidor ---------- */
.obras2{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); padding-block:clamp(34px,3.5vw,52px) clamp(26px,3vw,40px); scroll-margin-top:80px; }
.obras2__lienzo{ position:relative; width:min(100%,1560px); margin:0 auto; aspect-ratio:1440/790; }
.obras2__hilo{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.obras2__hilo .hilo{ fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-dasharray:9 7; opacity:.62; vector-effect:non-scaling-stroke; }
.obras2__hilo .trazo{ stroke-width:16; }
.obras2__titulo{ position:absolute; left:5%; top:3%; width:32%; z-index:2; }
.obras2__titulo h2{ margin-top:14px; font-family:var(--display); font-weight:700; font-size:clamp(46px,5.5vw,84px); line-height:.94; }
.obras2__titulo h2 em{ display:block; margin-top:.05em; font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:.8em; letter-spacing:-.03em; color:var(--gold-soft); }
.obras2__lead{ margin-top:12px; font-size:14.5px; line-height:1.5; color:rgba(244,239,229,.68); }
.obras2__titulo .obras__todos{ display:inline-block; margin-top:10px; font-size:13.5px; font-weight:500; border-bottom:1px solid currentColor; padding-bottom:2px; }
.solo-dedo{ display:none; }
@media (hover:none), (pointer:coarse){ .solo-mouse{ display:none; } .solo-dedo{ display:inline; } }
html.vivo .obras2__titulo[data-entra]:not(.listo) > :not(h2){ transition:opacity .8s var(--e-out) .35s, transform .9s var(--e-out) .35s; }
html.vivo .obras2__titulo[data-entra]:not(.visto) > :not(h2){ opacity:0; transform:translateY(14px); }

.arte{ position:absolute; left:var(--l); top:var(--t); width:var(--w); margin:0; z-index:1; }
.arte__marco{ position:relative; display:block; aspect-ratio:var(--p); overflow:hidden; background:#221d17; border-radius:var(--forma, 3px); }
.arte--arco{ --forma:999px 999px 4px 4px; }
.arte--circulo{ --forma:50%; }
.arte--rendija{ --forma:999px; }
.arte img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.arte__gris{ filter:grayscale(1) contrast(1.14) brightness(.8); }
.arte__color{ transform:scale(1.42); clip-path:circle(0 at 50% 50%); will-change:clip-path; }
.aro{ position:absolute; left:0; top:0; border-radius:50%; opacity:0; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 0 0 5px #c9913d, 0 0 0 6px rgba(0,0,0,.34), 0 12px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.2); }
.aro::before{ content:""; position:absolute; left:50%; top:-11px; width:13px; height:8px; translate:-50% 0; border-radius:2px; background:linear-gradient(#e2bd80,#946c20); }
.arte figcaption{ margin-top:9px; font-size:12px; color:rgba(244,239,229,.56); }
.arte figcaption b{ display:block; font-family:Georgia,'Times New Roman',serif; font-size:15px; font-style:italic; font-weight:400; color:rgba(251,248,242,.94); }
.arte--circulo figcaption, .arte--rendija figcaption{ text-align:center; }
html.vivo .arte__marco{ clip-path:circle(76% at 50% 50%); }
html.vivo .arte[data-entra]:not(.listo) .arte__marco{ transition:clip-path 1.2s var(--e-io); }
html.vivo .arte[data-entra]:not(.visto) .arte__marco{ clip-path:circle(0 at 50% 50%); }
html.vivo .arte[data-entra]:not(.listo) figcaption{ transition:opacity .7s ease .7s; }
html.vivo .arte[data-entra]:not(.visto) figcaption{ opacity:0; }

.obras2__pie{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; padding:14px 5% 0; font-size:12.5px; color:rgba(244,239,229,.5); }
.obras2__pie a{ font-size:14px; font-weight:500; color:var(--paper); border-bottom:1px solid var(--gold-soft); padding-bottom:2px; }

/* ---------- portada del catálogo: un libro de verdad ---------- */
.portada{ position:relative; overflow:hidden; background:radial-gradient(70% 90% at 72% 46%, #33291b 0%, #1d1812 52%, var(--ink) 100%); color:var(--paper); padding-block:clamp(56px,5.6vw,84px); scroll-margin-top:80px; }
.portada::before{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg, rgba(244,239,229,.016) 0 2px, transparent 2px 8px); }
.portada::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(52% 74% at 50% 48%, rgba(226,189,128,.17), transparent 74%); opacity:0; transition:opacity 1.1s ease; }
.portada.abierta::after{ opacity:1; }
.portada__in{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,5vw,80px); align-items:center; }
.portada__texto{ position:relative; z-index:3; transition:opacity .6s ease .55s, transform .8s var(--e-out) .55s; }  /* al cerrar, el texto espera a que el libro vuelva */
.portada.abierta .portada__texto{ opacity:0; transform:translateX(-36px); pointer-events:none; transition-delay:0s; }
.portada h2{ margin-top:16px; font-family:var(--display); font-weight:700; font-size:clamp(44px,5.6vw,80px); line-height:.96; }
.portada h2 em{ display:block; font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:.86em; letter-spacing:-.03em; color:var(--gold-soft); }
.portada__lead{ max-width:44ch; margin:20px 0 26px; font-size:16.5px; line-height:1.6; color:rgba(244,239,229,.74); }
.portada__acciones{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; }
.portada__directo{ font-size:14px; color:rgba(244,239,229,.74); border-bottom:1px solid rgba(244,239,229,.3); padding-bottom:2px; transition:color .2s ease, border-color .2s ease; }
.portada__directo:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }
html.vivo .portada[data-entra]:not(.listo) .portada__texto > :not(h2){ transition:opacity .8s var(--e-out) .35s, transform .9s var(--e-out) .35s; }
html.vivo .portada[data-entra]:not(.visto) .portada__texto > :not(h2){ opacity:0; transform:translateY(16px); }

.portada__escena{ position:relative; z-index:4; display:flex; justify-content:center; perspective:1800px; perspective-origin:50% 42%; }
.libro{ --w:clamp(226px,28vw,404px); --t:34px; position:relative; display:block; width:var(--w); aspect-ratio:3/4; }
.libro__sombra{ position:absolute; left:6%; right:-10%; bottom:-8%; height:14%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter:blur(10px); }
.libro__cuerpo{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(6deg) rotateY(-20deg); will-change:transform; }
html.vivo .portada[data-entra]:not(.listo) .libro{ transition:transform 1.2s var(--e-out), opacity .7s ease; }
html.vivo .portada[data-entra]:not(.visto) .libro{ opacity:0; transform:translateY(64px) scale(.95); }

.libro__contra, .libro__tapa, .folio, .hojita{ position:absolute; inset:0; }
.libro__contra{ background:#141c2e; transform:translateZ(calc(var(--t) / -2)); box-shadow:0 30px 60px rgba(0,0,0,.45); }
.libro__lomo{ position:absolute; left:0; top:0; width:var(--t); height:100%; background:linear-gradient(90deg, #0d1320, #1d2740 55%, #10182a); transform-origin:left center; transform:translateZ(calc(var(--t) / 2)) rotateY(90deg); }
.libro__canto{ position:absolute; right:0; top:1%; width:var(--t); height:98%; background:repeating-linear-gradient(90deg, #efe7d8 0 1px, #cfc5b1 1px 2px); transform-origin:right center; transform:translateZ(calc(var(--t) / 2)) rotateY(-90deg); }
.libro__canto--abajo{ left:0; right:auto; top:auto; bottom:0; width:98.6%; height:var(--t); background:repeating-linear-gradient(0deg, #efe7d8 0 1px, #cfc5b1 1px 2px); transform-origin:center bottom; transform:translateZ(calc(var(--t) / 2)) rotateX(90deg); }
.libro__canto--arriba{ left:0; right:auto; top:0; width:98.6%; height:var(--t); background:repeating-linear-gradient(0deg, #f6efe2 0 1px, #dcd2bf 1px 2px); transform-origin:center top; transform:translateZ(calc(var(--t) / 2)) rotateX(-90deg); }
.libro__cinta{ position:absolute; left:72%; bottom:-26px; width:11px; height:44px; background:linear-gradient(#c9913d,#e2bd80); clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); transform:translateZ(calc(var(--t) / 2 - 14px)); }

.folio{ inset:1% 1.4% 1% 0; display:block; overflow:hidden; background:#f4efe5; color:var(--ink); transform:translateZ(calc(var(--t) / 2 - 10px)); }
.folio img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; scale:1.03; transition:opacity .42s ease, scale .8s var(--e-out); }
.folio img.on{ opacity:1; scale:1; }
.folio::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.3), transparent 9%); }
.folio__pie{ position:absolute; z-index:2; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr auto; gap:0 12px; align-items:end; padding:calc(var(--w) * .16) 7% 6%; background:linear-gradient(transparent, rgba(22,19,15,.74)); color:var(--paper); opacity:0; transition:opacity .4s ease; }
.portada.abierta .folio__pie{ opacity:1; }
.folio__pie b{ grid-column:1; font-family:var(--display); font-size:calc(var(--w) * .085); font-weight:600; line-height:1; }
.folio__pie i{ grid-column:1; margin-top:3px; font-size:13px; font-style:normal; opacity:.8; }
.folio__pie em{ grid-column:2; grid-row:1 / span 2; padding:8px 14px; border-radius:99px; background:var(--gold); color:var(--ink); font-size:13px; font-style:normal; font-weight:600; transition:background-color .2s ease; }
.folio:hover .folio__pie em{ background:var(--gold-soft); }
.folio__sombra{ position:absolute; z-index:3; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.22) 62%, transparent); opacity:0; }

.hojita{ inset:1% 1.4% 1% 0; transform-style:preserve-3d; transform-origin:left center; }
.hojita--1{ transform:translateZ(calc(var(--t) / 2 - 3px)); }
.hojita--2{ transform:translateZ(calc(var(--t) / 2 - 6px)); }
.hojita__cara, .hojita__dorso{ position:absolute; inset:0; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; background:#f4efe5; }
/* Solo el frente de la tapa y el índice reciben clics. Las cajas giradas también los atrapan, y Safari además las pone por
   encima del índice aunque en 3D estén debajo. */
.hojita, .libro__tapa, .tapa__dentro, .hojita__cara{ pointer-events:none; }
.tapa__frente, .indice{ pointer-events:auto; }
.portada.abierta .tapa__frente{ pointer-events:none; }
.portada:not(.abierta) .folio{ pointer-events:none; }  /* con la tapa entreabierta, el clic abre el libro */
.hojita__cara img{ width:100%; height:100%; object-fit:cover; }
.hojita__cara::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(0,0,0,.26), transparent 10%); }
.hojita__dorso{ transform:rotateY(180deg); background:linear-gradient(270deg, #d9d0bf, #f4efe5 16%); }

.libro__tapa{ transform-style:preserve-3d; transform-origin:left center; transform:translateZ(calc(var(--t) / 2)); }
.tapa__frente, .tapa__dentro{ position:absolute; inset:0; display:block; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.tapa__frente{ background:#141c2e; box-shadow:inset 7px 0 9px -4px rgba(0,0,0,.6), inset 15px 0 0 -13px rgba(255,255,255,.07); }
.tapa__frente:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:-5px; }
.tapa__frente img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tapa__txt{ position:absolute; left:0; right:0; bottom:13%; display:flex; flex-direction:column; align-items:center; text-align:center; color:#e0b878; }
.tapa__txt b{ font-family:var(--display); font-size:calc(var(--w) * .135); font-weight:600; letter-spacing:.015em; line-height:1; text-shadow:0 1px 0 rgba(0,0,0,.5); }
.tapa__txt i{ margin-top:6px; font-family:Georgia,'Times New Roman',serif; font-size:calc(var(--w) * .05); font-weight:400; color:#d2a968; }
.tapa__txt small{ margin-top:calc(var(--w) * .05); max-width:80%; font-size:calc(var(--w) * .034); letter-spacing:.14em; text-transform:uppercase; color:rgba(226,189,128,.76); }
.tapa__brillo{ position:absolute; inset:-30%; background:linear-gradient(115deg, transparent 42%, rgba(255,240,210,.13) 50%, transparent 58%); transform:translateX(var(--brillo, -40%)); pointer-events:none; }
.tapa__sombra{ position:absolute; inset:0; z-index:5; pointer-events:none; background:#000; opacity:0; }
.tapa__dentro{ background:#1a2338; transform:rotateY(180deg); box-shadow:inset -16px 0 20px -14px rgba(0,0,0,.5); }

.indice{ display:flex; flex-direction:column; padding:9% 10% 7%; background:linear-gradient(270deg, #dcd3c2, #f4efe5 13%); color:var(--ink); }
.indice > b{ margin-bottom:calc(var(--w) * .03); font-family:var(--display); font-size:calc(var(--w) * .105); font-weight:700; line-height:1; }
.indice a{ position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-block:calc(var(--w) * .0195); border-bottom:1px dotted rgba(22,19,15,.28); font-size:calc(var(--w) * .0425); color:var(--ink-soft); transition:color .18s ease, padding-left .28s var(--e-out); }
.indice a i{ font-style:normal; font-size:.86em; color:var(--muted); font-variant-numeric:tabular-nums; }
.indice a:hover, .indice a:focus-visible{ color:var(--gold-deep); padding-left:7px; outline:none; }
.indice .indice__todo{ margin-top:auto; border-bottom:0; padding-block:calc(var(--w) * .03) 0; font-weight:600; color:var(--ink); }
.indice .indice__todo em{ font-style:normal; color:var(--gold-deep); }

.portada.asentado .libro__tapa, .portada.asentado .hojita--1{ visibility:hidden; }
.portada.asentado .hojita--1 *, .portada.asentado .tapa__frente, .portada.asentado .tapa__dentro{ visibility:hidden !important; }
.portada.asentado .indice{ transform:none; -webkit-backface-visibility:visible; backface-visibility:visible; box-shadow:-5px 0 0 #1a2338, -5px -5px 0 #1a2338, -5px 5px 0 #1a2338, 0 -5px 0 #1a2338, 0 5px 0 #1a2338; }
.portada.asentado .indice .tapa__sombra{ display:none; }

.portada__cerrar{ position:absolute; z-index:6; right:var(--gutter); top:24px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid rgba(244,239,229,.26); border-radius:99px; color:rgba(244,239,229,.84); font-size:13px; opacity:0; transition:opacity .4s ease .4s, background-color .2s ease, color .2s ease; }
.portada__cerrar span{ font-size:17px; line-height:1; }
.portada.abierta .portada__cerrar{ opacity:1; }
.portada__cerrar:hover{ background:var(--paper); color:var(--ink); }
.portada__cerrar:active{ transform:scale(.97); }

/* entrar: la página crece hasta ser el catálogo */
.portal{ position:fixed; inset:0; z-index:990; background:var(--paper); }
.portal__foto{ position:fixed; z-index:991; object-fit:cover; will-change:transform, opacity; }

/* ---------- confianza + cotizar: una sola banda ---------- */
.cierre{ position:relative; overflow:hidden; background:var(--gold); color:var(--ink); padding-block:clamp(46px,4.6vw,66px); }
html.vivo .cierre::before, html.vivo .cierre::after{ content:""; position:absolute; z-index:1; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg, rgba(22,19,15,.5) 0 9px, transparent 9px 15px); clip-path:inset(0); transition:clip-path 1.7s steps(80, end) .2s; }
html.vivo .cierre::before{ top:11px; }
html.vivo .cierre::after{ bottom:11px; }
html.vivo .cierre[data-entra]:not(.visto)::before{ clip-path:inset(0 100% 0 0); }
html.vivo .cierre[data-entra]:not(.visto)::after{ clip-path:inset(0 0 0 100%); }
.forma{ position:absolute; pointer-events:none; }
.forma--mancha{ left:-7%; top:-68%; width:min(46vw,660px); aspect-ratio:1; background:#b98233; border-radius:58% 42% 55% 45% / 46% 56% 44% 54%; }
html.vivo .forma--mancha{ animation:mancha 15s ease-in-out infinite alternate; }
@keyframes mancha{ 50%{ border-radius:44% 56% 42% 58% / 58% 42% 58% 42%; } 100%{ border-radius:52% 48% 62% 38% / 40% 60% 40% 60%; } }
.forma--aro{ right:-7%; top:-52%; width:min(36vw,520px); aspect-ratio:1; border-radius:50%; border:2px dashed rgba(22,19,15,.26); }
.forma--aro2{ right:21%; bottom:-78%; width:min(26vw,370px); aspect-ratio:1; border-radius:50%; border:1.5px dashed rgba(251,248,242,.5); }
.cierre__in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.24fr); gap:clamp(30px,5vw,76px); align-items:center; }
.cierre h2{ margin-bottom:22px; font-family:var(--display); font-weight:700; font-size:clamp(34px,4vw,56px); line-height:1; }
.cierre h2 em{ font-style:normal; }
.cierre__puntos{ list-style:none; display:grid; gap:15px; }
.cierre__puntos li{ display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px; align-items:center; }
.cierre__puntos svg{ width:42px; height:42px; padding:10px; border-radius:50%; background:rgba(22,19,15,.09); }
.cierre__puntos h3{ font-size:20px; line-height:1.1; }
.cierre__puntos p{ margin-top:2px; font-size:14px; line-height:1.4; color:rgba(22,19,15,.78); }
html.vivo .cierre[data-entra]:not(.listo) .btn{ transition:opacity .6s var(--e-out) .5s, transform .7s var(--e-out) .5s; }
html.vivo .cierre[data-entra]:not(.visto) .btn{ opacity:0; transform:translateY(14px); }
html.vivo .cierre[data-entra]:not(.listo) .cierre__puntos li{ transition:opacity .6s var(--e-out) calc(.3s + var(--n, 0) * 110ms), transform .7s var(--e-out) calc(.3s + var(--n, 0) * 110ms); }
html.vivo .cierre[data-entra]:not(.visto) .cierre__puntos li{ opacity:0; transform:translateX(20px); }
html.vivo .cierre[data-entra]:not(.listo) .cierre__puntos svg *{ transition:stroke-dashoffset 1s var(--e-io) calc(.45s + var(--n, 0) * 110ms); }
html.vivo .cierre[data-entra] .cierre__puntos svg *{ stroke-dasharray:1; stroke-dashoffset:0; }
html.vivo .cierre[data-entra]:not(.visto) .cierre__puntos svg *{ stroke-dashoffset:1; }

/* ---------- el taller + quiénes somos ---------- */
.taller2{ position:relative; background:var(--paper); padding-block:clamp(52px,5.4vw,78px); scroll-margin-top:90px; overflow:hidden; }
.ancla{ position:absolute; top:0; }
.taller2__top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:clamp(28px,5vw,76px); align-items:center; }
.taller2 .h-sec{ margin:14px 0 16px; font-size:clamp(34px,4.2vw,58px); line-height:1; }
.taller2__texto p{ max-width:54ch; margin-bottom:12px; font-size:15.5px; line-height:1.62; color:var(--ink-soft); }
html.vivo .taller2__texto[data-entra]:not(.listo) > p{ transition:opacity .8s var(--e-out) .4s, transform .9s var(--e-out) .4s; }
html.vivo .taller2__texto[data-entra]:not(.visto) > p{ opacity:0; transform:translateY(14px); }

.formas{ position:relative; height:clamp(320px,29vw,412px); }
.formas__pieza{ position:absolute; margin:0; overflow:hidden; }
.formas__pieza img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.formas__grande{ left:15%; top:0; height:100%; aspect-ratio:1; border-radius:50%; }
.formas__aro{ position:absolute; left:15%; top:0; height:100%; aspect-ratio:1; scale:1.09; border-radius:50%; border:2px dashed rgba(148,108,32,.5); }
.formas__arco{ right:0; top:0; width:25%; aspect-ratio:3/4.3; border-radius:999px 999px 5px 5px; border:6px solid var(--paper); }
.formas__arco figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 8px 8px; background:linear-gradient(transparent, rgba(22,19,15,.72)); color:var(--gold-soft); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-align:center; }
.formas__bola{ left:0; bottom:0; width:29%; aspect-ratio:1; border-radius:50%; border:6px solid var(--paper); }
.sello{ right:15%; bottom:0; width:clamp(96px,9.4vw,132px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--gold-soft); overflow:visible; }
.sello svg{ position:absolute; inset:0; width:100%; height:100%; }
.sello text{ fill:rgba(244,239,229,.84); font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.09em; }
.sello b{ font-family:var(--display); font-size:clamp(36px,3.6vw,50px); font-weight:600; line-height:1; }
html.vivo .formas__pieza[data-entra]:not(.listo){ transition:clip-path 1.15s var(--e-io) calc(var(--i, 0) * 120ms); }
html.vivo .formas__pieza{ clip-path:circle(76% at 50% 50%); }
html.vivo .formas__pieza[data-entra]:not(.visto){ clip-path:circle(0 at 50% 50%); }

.pasos__cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 24px; margin-top:clamp(26px,3vw,40px); padding-top:clamp(16px,1.6vw,22px); border-top:1px solid var(--line-soft); }
.pasos__cab h3{ font-size:clamp(22px,2.2vw,30px); line-height:1.1; }
.pasos__cab p{ font-size:14px; color:#6b6256; }
.pasos{ position:relative; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,34px); margin-top:18px; }
.pasos::before{ content:""; position:absolute; left:18px; right:0; top:17px; height:2px; background:repeating-linear-gradient(90deg, var(--gold) 0 var(--puntada), transparent var(--puntada) 12px); clip-path:inset(0); }
html.vivo .pasos[data-entra]:not(.listo)::before{ transition:clip-path 2.2s steps(90, end) .15s; }
html.vivo .pasos[data-entra]:not(.visto)::before{ clip-path:inset(0 100% 0 0); }
.pasos li{ position:relative; }
.pasos i{ position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--gold-soft); font-family:var(--display); font-size:15px; font-style:normal; font-weight:600; }
.pasos h4{ margin-top:10px; font-size:20px; line-height:1.1; }
.pasos p{ margin-top:3px; font-size:13.5px; line-height:1.45; color:#625b51; }
html.vivo .pasos[data-entra]:not(.listo) li{ transition:opacity .6s var(--e-out) calc(.2s + var(--i) * 460ms), transform .7s var(--e-out) calc(.2s + var(--i) * 460ms); }
html.vivo .pasos[data-entra]:not(.visto) li{ opacity:0; transform:translateY(14px); }

/* ---------- cotizador en la portada ---------- */
.cz--portada{ padding-top:clamp(52px,5.4vw,78px); scroll-margin-top:70px; }

/* ---------- preguntas en dos columnas ---------- */
.section.faq{ padding-block:clamp(50px,5vw,72px); }
.faq__grid{ grid-template-columns:minmax(0,1fr); gap:clamp(18px,2.2vw,28px); }
.faq__aside{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:4px 40px; align-items:end; }
.faq__aside .eyebrow{ grid-column:1 / -1; }
.faq__aside h2{ margin:8px 0 0; font-size:clamp(32px,3.8vw,52px); }
.faq__aside p{ grid-column:2; grid-row:2; max-width:36ch; margin:0 0 6px; font-size:14px; }
.faq__aside .link-u{ grid-column:2; grid-row:3; justify-self:start; }
.faq__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,56px); align-items:start; border-top:0; }
.faq-item{ border-top:1px solid var(--line); border-bottom:0; }
.faq-q{ padding:15px 2px; gap:14px; }
.faq-q .qt{ font-size:clamp(17px,1.5vw,20px); }
.faq-q .ico{ width:14px; height:14px; }

/* ---------- contacto: el mapa junto a los datos ---------- */
.section.contact{ padding-block:clamp(52px,5.4vw,78px); }
.contact__channels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; margin-top:20px; }
.contact__channels .cchan{ padding-block:13px; }
.contact__channels .cchan:nth-child(2){ grid-column:1 / -1; grid-row:2; }
.contact__aside .lead{ font-size:16px; }
.contact__aside .mapwrap{ margin-top:16px; }
.contact__aside .mapwrap__frame{ height:clamp(150px,13vw,186px); }
.contact__aside .mapwrap__cta{ font-size:10.5px; }

/* ---------- pantallas medianas y móvil ---------- */
@media (min-width:1101px) and (max-width:1300px){ .parche{ --k:.84; } }  /* en esta medida la tela de logos es más angosta */
@media (max-width:1100px){
  .marcas2__in{ grid-template-columns:minmax(0,1fr); }
  .marcas2__head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 28px; align-items:center; }
  .marcas2__head .craft__eyebrow{ grid-column:1 / -1; }
  .marcas2__head .brands__number{ grid-row:2 / span 3; }
  .marcas2__head .craft__link{ justify-self:start; }
}
@media (max-width:900px){
  .obras2__hilo{ display:none; }
  .obras2__lienzo{ aspect-ratio:auto; display:flex; flex-wrap:nowrap; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter); padding-inline:var(--gutter); padding-bottom:6px; scrollbar-width:none; align-items:flex-start; }
  .obras2__lienzo::-webkit-scrollbar{ display:none; }
  .obras2__titulo{ position:static; flex:0 0 76vw; width:auto; scroll-snap-align:start; align-self:center; }
  .arte{ position:relative; left:auto; top:auto; flex:0 0 auto; width:auto; scroll-snap-align:center; }
  .arte__marco{ height:min(82vw,340px); }
  .arte--rect .arte__marco{ height:min(62vw,250px); margin-top:40px; }
  .arte figcaption{ max-width:64vw; }

  .portada__in, .cierre__in, .taller2__top{ grid-template-columns:minmax(0,1fr); }
  .portada__escena{ margin-top:12px; }
  .libro{ --w:min(58vw,280px); --t:26px; }
  .portada__cerrar{ display:none; }

  .pasos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .pasos::before{ display:none; }
  .formas{ height:min(74vw,340px); margin-top:8px; }
  .faq__aside{ grid-template-columns:minmax(0,1fr); }
  .faq__aside p, .faq__aside .link-u{ grid-column:1; grid-row:auto; }
  .faq__list{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .constelacion{ height:560px; }
  .parche{ --k:.74; left:var(--mx); top:var(--my); }
  .parche--tuyo{ --k:.8; }
  .sectores2 b{ display:block; width:100%; margin-bottom:4px; }
}
@media (max-width:360px){
  .parche{ --k:.64; }
  .parche--tuyo{ --k:.7; }
}