/* Clon de laboratorio. Valores medidos: ver clone-spec.md. */
@font-face { font-family: familjen; src: url("/public/_next/static/media/FamiljenGroteskVariable_Regular-s.p.04jxz-d23sc_e.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: martianMono; src: url("/public/_next/static/media/MartianMono_Light-s.p.0htes.s6weu9-.woff2") format("woff2"); font-display: swap; }

:root {
  /* primitivos */
  --ink-950: #040508; --ink-900: #0c0c0c; --ink-850: #0a0a0a; --ink-700: #2f323b; --ink-600: #2f3135; --ink-500: #434343; --ink-400: #272727;
  --gray-300: #c3c3c3; --gray-250: #d2d2d2; --gray-200: #d8d8d8; --gray-100: #e6e4e2; --line-gray: #9e9e9e; --white: #fff;
  /* semanticos */
  --font-display: familjen, sans-serif; --font-body: "neueHaas", Arial, sans-serif; --font-mono: martianMono, monospace;
  --text-light: var(--gray-200); --text-dark: var(--ink-500); --line-dark: color-mix(in oklab, var(--ink-500) 15%, transparent);
  --bg-site: var(--ink-950);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; font-size: calc(1000vw / var(--size)); color: var(--gray-200); background: var(--ink-950); }
:root { --size: 320; }
@media (min-width: 440px) { :root { --size: 360; } }
@media (min-width: 640px) { :root { --size: 480; } }
@media (min-width: 768px) { :root { --size: 750; } }
@media (min-width: 1024px) { :root { --size: 850; } }
@media (min-width: 1280px) { :root { --size: 1000; } }
@media (min-width: 1441px) { :root { --size: 1180; } }
@media (min-width: 1536px) { :root { --size: 1280; } }
main { position: relative; z-index: 1; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { overscroll-behavior: none; background: var(--bg-site); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: var(--font-body); overflow-x: clip; }
a { color: inherit; text-decoration: inherit; }
button { font: inherit; color: inherit; background: transparent; cursor: pointer; }
img, video, canvas, svg { display: block; }
ul { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

h1, .h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.75rem, 6.614vw, 6.25rem); line-height: clamp(3.5rem, 5.952vw, 5.625rem); letter-spacing: clamp(-.06em, -.055vw, -.06em); }
h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 6.283vw, 5.938rem); line-height: clamp(2.2rem, 5.952vw, 5.625rem); letter-spacing: clamp(-.06em, -.056vw, -.06em); }
h2.big { font-size: clamp(3.5rem, 6.349vw, 6rem); line-height: clamp(3.25rem, 5.82vw, 5.5rem); letter-spacing: clamp(-.06em, -.055vw, -.06em); }
h3, .h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: -.04em; }
@media (min-width: 80rem) { h3, .h3 { font-size: 2.25rem; } }
p, .p { font-family: var(--font-body); font-size: 1.25rem; line-height: normal; }
.small { font-family: var(--font-body); font-size: 1.25rem; line-height: normal; }
@media (min-width: 64rem) { .small, p, .p { font-size: 1.125rem; } }
.title { font-family: var(--font-display); font-size: 1.125rem; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
@media (min-width: 64rem) { .title { font-size: 1.063rem; } }
@media (min-width: 96rem) { .title { font-size: 1.125rem; } }
.button-text { font-family: var(--font-mono); font-size: 1rem; line-height: normal; letter-spacing: -.06em; text-transform: uppercase; }
@media (min-width: 64rem) { .button-text { font-size: .875rem; } }
.number-small { font-family: var(--font-display); font-size: 3.5rem; line-height: 3.125rem; letter-spacing: -.06em; }
.mrquee-text { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(5rem, 9.164vw, 10rem); line-height: .672; letter-spacing: clamp(-.08em, -.073vw, -.08em); }
.marquee .mrquee-text { line-height: 1; }

.tr__container { padding-inline: 1.5rem; margin-inline: auto; width: 100%; }
@media (min-width: 48rem) { .tr__container { padding-inline: 2.5rem; } }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
.c12 { grid-column: span 12; }
.lg-only { display: none; }
@media (min-width: 64rem) { .lg-only { display: flex; } }
.md-only { display: none; }
@media (min-width: 48rem) { .md-only { display: block; } }
@media (min-width: 48rem) { .sm-only { display: none !important; } }

/* Cabecera */
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; mix-blend-mode: difference; padding-block: 1.5rem; color: #fff; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; padding-inline: 1rem; }
@media (min-width: 48rem) { .site-header .bar { padding-inline: 2rem; } }
.site-header .logo img { width: 11rem; height: auto; }
.site-header .actions { display: flex; align-items: center; gap: .5rem; }
.pill { padding: .375rem 1rem .5rem; border-radius: 999px; border: 1px solid #fff; transition: all .3s cubic-bezier(.4,0,.2,1); }
.pill.solid { background: #fff; color: #000; }
.pill.solid:hover { background: rgb(255 255 255 / .8); }
.pill.ghost { display: none; align-items: center; gap: .5rem; }
@media (min-width: 48rem) { .pill.ghost { display: flex; } }

/* Boton */
.word-shift { --pad-x: .5rem; --color: var(--ink-500); position: relative; display: inline-block; min-width: 15.75rem; color: var(--color); }
.word-shift .btn { position: relative; display: flex; align-items: center; min-height: 2.5rem; width: 100%; padding-inline: calc(var(--pad-x) * 1.2); overflow: hidden; }
/* Español: reserva el espacio de la flecha para que los textos largos no queden debajo de ella. */
.word-shift .btn { padding-right: calc(var(--pad-x) * 1.2 + 10px + .75rem); }
.word-shift .u { position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; }
.word-shift .word { display: inline-flex; padding-right: 1px; }
.word-shift .text { display: inline-block; white-space: pre; }
.word-shift .arrow { position: absolute; top: 50%; translate: 0 -50%; width: 10px; height: 9px; opacity: 0; fill: currentColor; }
.word-shift .arrow.r { right: calc(var(--pad-x) * 1.2); opacity: 1; }
.word-shift .arrow.l { left: calc(var(--pad-x) * 1.2); }

/* Franjas */
.stripes { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; width: 100%; height: 100%; z-index: 30; }
.stripes > div { flex: 1; width: 100%; transform: scaleY(0); transform-origin: bottom; will-change: transform; margin-top: -1px; padding-bottom: 1px; }
.stripes > div:first-child { margin-top: 0; }

/* Marquesina */
.marquee { display: flex; overflow: hidden; width: 100%; }
.marquee .track { display: flex; flex: none; }
.marquee .group { display: flex; align-items: center; flex: none; }
.plus-mark { width: 1.5rem; height: 1.5rem; margin: .5rem 2.5rem 0; flex: none; }
@media (min-width: 64rem) { .plus-mark { width: 2rem; height: 2rem; margin-inline: 4rem; } }

/* Divisor */
.divider { position: relative; height: 13px; }
.divider .line { position: absolute; top: 50%; left: 0; right: 0; height: 1px; translate: 0 -50%; }
.divider svg { position: absolute; top: 0; left: var(--plus-left, 50%); translate: -50% 0; overflow: visible; }

/* Alturas de pantalla en lvh, no dvh (2026-11-10, plan-fluidez-maxima.md): en el iPhone la barra de Safari cambia el alto
   hasta 40 px al bajar, y con dvh cada cambio movía las secciones y los pines. lvh es fijo (el alto con la barra recogida).
   El menú y el visor de video, que van fijos encima, siguen en dvh, y también el pie: es lo último de la página y con lvh
   quedaba más alto que la pantalla, con su primera línea escondida bajo la cabecera. */
/* Hero */
#hero-section { position: relative; background: var(--ink-900); overflow: hidden; }
#hero-symbol-canvas-wrap { position: absolute; inset: 0; width: 100%; height: 100lvh; z-index: 0; pointer-events: none; }
#hero-symbol-canvas-wrap canvas { pointer-events: auto; }
/* Teléfono: mantener el dedo hace estallar el logo; sin selección de texto ni menú de copiar o guardar imagen */
@media (hover: none) { #hero-section { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
#sticky-wrap { position: relative; color: var(--text-light); mix-blend-mode: difference; }
.main-banner { position: relative; min-height: 100lvh; padding-block: 6.25rem 3.5rem; display: flex; width: 100%; }
@media (min-width: 64rem) { .main-banner { padding-top: 7.5rem; } }
.main-banner > .tr__container { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
.banner-top { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.banner-top .grid12 { margin-bottom: 2.5rem; margin-left: -.25rem; }
#s1-headline { grid-column: span 12; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 64rem) { #s1-headline { grid-column: span 8; } }
#s1-cta { display: flex; gap: 1.5rem; flex-wrap: wrap; visibility: hidden; }
.banner-bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; width: 100%; }
#s1-scroll { grid-column: span 4; display: flex; align-items: flex-end; opacity: .5; pointer-events: none; }
#s1-stats { grid-column: span 4; flex-direction: column; text-align: center; align-items: center; justify-content: flex-end; }
.banner-right { grid-column: span 8; display: flex; justify-content: flex-end; }
@media (min-width: 64rem) { .banner-right { grid-column: 9 / span 4; } }
.banner-right > div { display: flex; flex-direction: column; max-width: 16.25rem; gap: 1.5rem; width: 100%; }
.stat-box { display: flex; border: 1px solid var(--ink-700); border-radius: .25rem; min-height: 4.5rem; overflow: hidden; }
.stat-box > div { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; gap: .5rem; text-align: center; }
.stat-box > div:first-child { min-width: 6.5rem; border-right: 1px solid var(--ink-700); }
.stat-box span { font-size: .875rem; line-height: .875rem; letter-spacing: -.02em; text-transform: uppercase; display: block; }

.home-about { position: relative; z-index: 3; padding-block: 5rem; min-height: 100lvh; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 64rem) { .home-about { padding-top: 9.375rem; } }
.about-label { grid-column: span 12; margin-top: 1rem; display: block; }
.about-h2 { grid-column: span 12; }
@media (min-width: 48rem) { .about-label { grid-column: span 1; } .about-h2 { grid-column: span 11; } }
.about-h2 .indent { display: inline-block; width: 8.333%; }
.about-sub .a { grid-column: 4 / span 9; max-width: 15rem; }
.about-sub .b { grid-column: 4 / span 9; display: flex; flex-direction: column; align-items: flex-start; }
.about-sub .b p { margin-bottom: 2.5rem; }
@media (min-width: 64rem) { .about-sub .a { grid-column: 2 / span 3; max-width: 16rem; } .about-sub .b { grid-column: 9 / span 3; } .about-sub .b p { margin-bottom: 5rem; } }
.about-divider { margin-block: 5rem; }
@media (min-width: 64rem) { .about-divider { margin-top: 6.25rem; } }

#vision-section { position: relative; min-height: 100lvh; height: 100lvh; overflow: visible; }
#s3-text { position: relative; z-index: 20; width: 100%; min-height: 100lvh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; align-items: center; padding-block: 12.5rem; color: var(--text-light); mix-blend-mode: difference; }
@media (min-width: 64rem) { #s3-text { padding-block: 9.375rem; } }
#s3-text .a { grid-column: span 12; }
@media (min-width: 64rem) { #s3-text .a { grid-column: 2 / span 11; } }

#keyfacts-section { position: relative; z-index: 20; padding-block: 6.25rem 5rem; background: linear-gradient(0deg, #fff 0%, var(--gray-250) 100%); min-height: 100lvh; }
@media (min-width: 64rem) { #keyfacts-section { padding-bottom: 10rem; } }
@media (max-width: 47.99rem) { #keyfacts-section { overflow: hidden; } }
.kf-title { display: flex; flex-direction: column; align-items: center; margin-bottom: 2.5rem; gap: 1.5rem; text-align: center; color: var(--text-dark); }
@media (min-width: 64rem) { .kf-title { margin-bottom: 5rem; } }
.key-card-list { perspective: 1400px; display: flex; gap: 1.5rem; justify-content: flex-start; transform-style: preserve-3d; }
@media (min-width: 48rem) { .key-card-list { justify-content: center; flex-wrap: wrap; } }
@media (min-width: 64rem) { .key-card-list { flex-wrap: nowrap; } }
@media (max-width: 63.99rem) { .key-card-list { padding-inline: 8.66vw; } }
.kf-card { position: relative; flex: none; width: 85vw; max-width: 24.75rem; border-radius: .5rem; overflow: hidden; backface-visibility: hidden; transform-style: preserve-3d; will-change: transform; height: 50svh; max-height: 27.5rem; min-height: 300px; }
@media (min-width: 48rem) { .kf-card { width: 380px; height: 30.5rem; max-height: none; } }
@media (min-width: 64rem) { .kf-card { width: 100%; } }
.kf-pad { position: relative; z-index: 2; height: 100%; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 64rem) { .kf-pad { padding: 2.5rem; } }
.kf-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kf-awards { background: #fff; color: var(--text-dark); }
.kf-projects { background: var(--gray-100); color: var(--text-dark); text-align: center; }
.kf-team { background: #fff; color: var(--text-dark); }
/* Fotos de Daniel a tarjeta completa con transición de franjas (kf-glitch.js). Con WebGL, el lienzo dibuja foto y letras
   juntas y el texto HTML queda invisible (sigue para lectores de pantalla y buscadores). Sin WebGL, foto y texto normales */
.kf-photo { position: absolute; inset: 0; overflow: hidden; }
.kf-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.kf-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.kf-awards .kf-photo img { object-position: 50% 0; translate: 0 -8%; }
.kf-awards .kf-photo::after { background: linear-gradient(to bottom, rgb(255 255 255 / 0) 68%, #fff 86%); }
.kf-team .kf-photo img { object-position: 50% 30%; translate: 0 7%; }
.kf-team .kf-photo::after { background: linear-gradient(to bottom, rgb(255 255 255 / 0) 72%, #fff 90%); }
.kf-photo canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; }
.kf-card.is-gl .kf-photo canvas { opacity: 1; }
.kf-card.is-gl .kf-pad { opacity: 0; }
.kf-circle { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 12.5rem; height: 12.5rem; border-radius: 50%; background: #fff; }
.logo-stack { position: relative; width: 33.33%; height: 3rem; margin-bottom: .5rem; }
.logo-stack img { position: absolute; bottom: 0; right: 0; max-width: 7.5rem; max-height: 5rem; object-fit: contain; }
.kf-row { display: flex; justify-content: space-between; align-items: center; column-gap: 1.5rem; }
.plus-sup { font-size: 2rem; line-height: 1; letter-spacing: -.06em; margin-left: -.25rem; }
.rollnum { position: relative; display: inline-flex; overflow: hidden; height: 4rem; font-variant-numeric: tabular-nums; padding-right: .5rem; }
.rollnum .col { display: flex; flex-direction: column; }
.rollnum .col span, .rollnum .st { display: inline-flex; align-items: center; justify-content: center; height: 4rem; flex-shrink: 0; }
.partners { margin-top: 5rem; display: flex; flex-direction: column; gap: 2.5rem; color: #000; text-align: center; }
@media (min-width: 64rem) { .partners { margin-top: 7.5rem; } }
.partners-list { justify-content: center; margin-inline: -2.5rem; }
.partners-list > div { padding-inline: 2.5rem; border-right: 1px solid color-mix(in oklab, #9c9c9c 15%, transparent); display: flex; justify-content: center; align-items: center; }
.partners-list > div:last-child { border: 0; }
.partners-list img { height: auto; width: 5.5rem; }

/* Proyectos + servicios */
/* Proyectos: en computador y teléfono la sección se fija y la pista corre de lado (plan-proyectos-movil-horizontal.md).
   En el teléfono cada columna ocupa la pantalla entera; desde 48rem, media pantalla. */
#work-section { position: relative; width: 100%; min-height: 100lvh; height: 100lvh; overflow: hidden; background: #fff; }
#work-layer { position: relative; z-index: 2; min-height: 100lvh; pointer-events: none; will-change: transform; }
#services-layer { position: relative; z-index: 1; will-change: transform; min-height: 100lvh; }
#work-layer, #services-layer { position: absolute; inset: 0; }
.work-wrap { position: relative; height: 100%; width: 100%; min-height: 100lvh; }
.work-pos { position: absolute; inset: 0; display: flex; align-items: center; z-index: 10; }
.work-track { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 100lvh; will-change: transform; width: 100%; container-type: inline-size; }
.work-col { position: relative; flex: none; display: flex; align-items: center; pointer-events: none; width: 100%; max-width: 100cqw; height: 100%; min-width: 0; background: linear-gradient(0deg, #d2d2d2 0%, #fff 100%); }
.work-col.first { pointer-events: auto; flex-direction: column; justify-content: center; padding: 0 1.5rem; }
@media (min-width: 48rem) { .work-col, .work-col.first { width: 50%; max-width: 50cqw; } .work-col.first { padding: 0 2.5rem; } }
.work-title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3rem; padding-top: 5rem; color: var(--text-dark); }
.work-title h2 { font-size: 3rem; line-height: 1.1; letter-spacing: -.025em; }
.js-card-line { position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 100lvh; width: 1px; background: var(--line-dark); transform-origin: top; display: none; }
@media (min-width: 48rem) { .js-card-line { display: block; } }
.js-work-card-inner { width: 100%; padding-inline: 1.5rem; will-change: transform; }
@media (min-width: 48rem) { .js-work-card-inner { padding-inline: 5rem; } }
.work-panel { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; padding-block: 5rem; color: var(--text-dark); }
@media (min-width: 64rem) { .work-panel { padding-block: 4rem; max-height: 100lvh; } }
.work-img { position: relative; width: 100%; aspect-ratio: 670 / 460; overflow: hidden; border-radius: .5rem; display: block; }
.work-img img, .work-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-viewer { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; visibility: hidden; opacity: 0; transition: opacity .4s ease, visibility 0s .4s; }
.work-viewer.is-open { visibility: visible; opacity: 1; transition: opacity .4s ease; }
.work-viewer-backdrop { position: absolute; inset: 0; background: rgb(13 13 13 / .9); }
.work-viewer-frame { position: relative; margin: 0; width: min(100%, 72rem, calc((100dvh - 7rem) * 670 / 460)); transform: scale(.96); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.work-viewer.is-open .work-viewer-frame { transform: scale(1); }
/* El montaje es vertical (3:4); se recorta igual que en la tarjeta, pero en grande. */
.work-viewer-video { display: block; width: 100%; aspect-ratio: 670 / 460; object-fit: cover; border-radius: .5rem; background: #000; }
.work-viewer-title { display: block; margin-top: 1rem; color: #d8d8d8; }
.work-viewer-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgb(255 255 255 / .3); color: #fff; cursor: pointer; transition: border-color .3s; }
.work-viewer-close:hover { border-color: rgb(255 255 255 / .8); }
.work-viewer-close svg { width: .75rem; height: .75rem; }
.work-meta { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.work-row { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
@media (min-width: 40rem) { .work-row { flex-direction: row; } }
@media (min-width: 64rem) { .work-row { gap: 1rem; } }
.work-row p { max-width: 20rem; }
.work-end { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; text-align: center; color: var(--text-dark); pointer-events: auto; }
.work-end h3 { max-width: 25rem; }
.end-line { position: absolute; right: 0; top: 0; bottom: 0; height: 100lvh; width: 1px; pointer-events: none; z-index: 20; display: none; }
@media (min-width: 48rem) { .end-line { display: block; } }
.end-line .fill { position: absolute; inset: 0; background: var(--line-dark); }
.end-line svg { position: absolute; left: 0; top: 50%; overflow: visible; }

#home-services { position: relative; min-height: 100lvh; height: 100%; width: 100%; }
.svc-stage { position: relative; width: 100%; height: 100%; min-height: 100lvh; overflow: hidden; background: #000; }
.svc-veil { position: absolute; inset: 0; z-index: 25; background: #fff; pointer-events: none; }
#c { position: absolute; top: 50%; left: 50%; translate: -50% -50%; max-width: none; object-fit: contain; }
.svc-video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; pointer-events: none; mix-blend-mode: screen; opacity: 0; transform: rotate(180deg) translateZ(0); }
.svc-cards { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; perspective: 93.75rem; }
@media (max-width: 47.99rem) { .svc-cards { z-index: 40; } }
.svc-card { position: absolute; top: 0; left: 0; z-index: 10; transform-style: preserve-3d; will-change: transform, opacity; opacity: 0; }
@media (min-width: 64rem) { .svc-card { padding: 1.5rem; } }
.card-inner { pointer-events: auto; background: rgb(0 0 0 / .6); border-radius: .5rem; padding: 2.5rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; backdrop-filter: blur(12px); }
@media (min-width: 48rem) { .card-inner { min-height: 19.75rem; } }
@media (min-width: 64rem) { .card-inner { background: rgb(0 0 0 / .2); } }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; color: #fff; }
.card-top h3 { max-width: 12.5rem; }
.card-svg { flex: none; width: 4rem; height: 4rem; }
@media (min-width: 64rem) { .card-svg { width: 6.25rem; height: 6.25rem; } }
.card-inner p { color: var(--text-light); max-width: 19.5rem; margin-top: 2.5rem; }
.svc-copy { position: relative; display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: space-between; padding-block: 10rem 5rem; z-index: 30; mix-blend-mode: difference; }
@media (min-width: 64rem) { .svc-copy { padding-top: 7.5rem; } }
.svc-words { position: relative; z-index: 20; margin-block: 5rem; display: flex; width: 100%; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.svc-words [data-line] { display: block; color: var(--text-light); }
.svc-foot { position: relative; z-index: 20; display: flex; flex-direction: column; gap: 2.5rem; width: 100%; justify-content: center; }
.svc-foot .side { display: none; width: 33.33%; }
.svc-foot .mid { width: 100%; position: relative; min-height: 2.5rem; }
.svc-foot .mid > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.svc-foot .end { display: flex; width: 100%; justify-content: center; }
@media (min-width: 48rem) { .svc-foot { flex-direction: row; } .svc-foot .mid { width: 50%; } .svc-foot .end { width: 50%; justify-content: flex-end; } }
@media (min-width: 64rem) { .svc-foot { justify-content: space-between; } .svc-foot .side { display: block; } .svc-foot .mid { width: 33.33%; text-align: center; } .svc-foot .end { width: 33.33%; } }

/* Testimonios */
#testimonials { position: relative; z-index: 20; min-height: 100lvh; background: linear-gradient(0deg, var(--gray-300) 0%, #fff 100%); overflow: hidden; color: var(--text-dark); }
#testimonials > .tr__container { min-height: 100lvh; padding-block: 5rem; }
@media (min-width: 64rem) { #testimonials > .tr__container { padding-block: 9.375rem; } }
.tm-head h2, .tm-left { grid-column: span 12; }
.tm-head .sub, .tm-right { grid-column: span 12; }
.tm-head .sub { display: flex; flex-direction: column; justify-content: flex-end; }
.tm-left { order: 2; display: flex; flex-direction: column; justify-content: space-between; }
.tm-right { order: 1; margin-bottom: 2.5rem; }
@media (min-width: 40rem) { .tm-head h2, .tm-head .sub { grid-column: span 6; } }
@media (min-width: 48rem) { .tm-left { grid-column: span 6; order: 1; } .tm-right { grid-column: span 6; order: 2; margin-bottom: 0; } }
@media (min-width: 64rem) { .tm-head h2, .tm-left { grid-column: 2 / span 5; } .tm-head .sub, .tm-right { grid-column: span 5; } }
.tm-divider { grid-column: span 12; margin-block: 2.5rem; }
@media (min-width: 64rem) { .tm-divider { grid-column: 2 / span 10; margin-block: 5rem; } }
.tm-list { flex-direction: column; gap: 1rem; display: none; }
@media (min-width: 48rem) { .tm-list { display: flex; } }
.tm-list button { display: flex; gap: 1rem; align-items: center; text-align: left; opacity: .3; transition: all .5s ease-in-out; }
.tm-list button[aria-current="true"], .tm-list button:hover { opacity: 1; }
.tm-arrows { display: flex; margin-top: 2.5rem; }
.custom-arrow { width: 5rem; height: 5rem; min-width: 5rem; border-radius: .25rem; border: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: center; }
.custom-arrow + .custom-arrow { margin-left: -1px; }
.tm-slides { position: relative; max-width: 50.75rem; }
.tm-slide { display: none; }
.tm-slide.on { display: block; }
.tm-slide h3 { margin-bottom: 2.5rem; }
@media (min-width: 48rem) { .tm-slide h3 { margin-bottom: 5rem; } }
.tm-client { display: flex; align-items: flex-end; }
.tm-photo { width: 3.5rem; height: 3.5rem; background: var(--gray-250); border-radius: .25rem; margin-right: 1rem; flex-shrink: 0; display: grid; place-items: center; }
.tm-photo svg { width: 60%; height: 60%; }
@media (min-width: 48rem) { .tm-photo { width: 5rem; height: 5rem; margin-right: 1.5rem; } }
.tm-cta { margin-top: 2.5rem; }
@media (min-width: 48rem) { .tm-cta { margin-top: 6.25rem; } }

/* Galeria */
#gallery { position: relative; z-index: 10; height: 100lvh; background: var(--gray-300); padding-block: 6.25rem 5rem; overflow: hidden; top: -2px; }
@media (min-width: 64rem) { #gallery { padding-block: 5rem; } }
#gallery canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.gallery-inner { width: 100%; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: space-between; color: var(--text-dark); }
.dribble-title { pointer-events: none; user-select: none; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; overflow: visible; white-space: nowrap; }
.dribble-title > div { display: flex; flex-direction: column; width: 100%; overflow: visible; }
.dribble-title .mrquee-text { line-height: .8; color: var(--text-dark); will-change: transform; }
.top-word { align-self: flex-start; translate: -100% 0; }
.bottom-word { align-self: flex-end; translate: 100% 0; }
.dribble-title .title { margin: .75rem auto; text-align: center; }
.gallery-foot { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2.5rem; position: relative; z-index: 5; height: 100%; }
@media (min-width: 48rem) { .gallery-foot { flex-direction: row; align-items: flex-end; height: auto; } .gallery-foot p { text-align: left; } }
.gallery-foot p { text-align: center; }
.flex1 { display: none; flex: 1; }
@media (min-width: 48rem) { .flex1 { display: block; } }

/* Pie */
#site-footer { position: relative; z-index: 2; display: flex; min-height: 100dvh; flex-direction: column; overflow: hidden; background: var(--ink-950); color: var(--text-light); }
.smoke-wrap { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.smoke-wrap canvas { width: 100%; height: 100%; }
.foot-main { position: relative; z-index: 20; display: flex; width: 100%; min-height: 0; flex: 1; }
.foot-main > .tr__container { display: flex; flex-direction: column; padding-block: 6.25rem 1.5rem; }
@media (min-width: 48rem) { .foot-main > .tr__container { padding-block: 9.375rem 5rem; } }
.foot-a, .foot-b { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; width: 100%; }
@media (min-width: 64rem) { .foot-a { margin-bottom: 5rem; column-gap: 3rem; row-gap: 0; } .foot-b { column-gap: 3rem; row-gap: 0; } }
.foot-b { margin-block: auto; }
.foot-l, .foot-r { grid-column: span 12; display: flex; flex-direction: column; justify-content: space-between; }
.foot-b .foot-l { order: 2; gap: 1.5rem; } .foot-b .foot-r { order: 1; }
@media (min-width: 48rem) { .foot-l, .foot-r { grid-column: span 6; } .foot-b .foot-l { order: 1; } .foot-b .foot-r { order: 2; } }
@media (min-width: 64rem) { .foot-l { grid-column: span 7; } .foot-r { grid-column: span 5; } }
@media (min-width: 80rem) { .foot-l { grid-column: span 8; } .foot-r { grid-column: span 4; } }
.foot-clock { display: none; margin-bottom: 2rem; justify-content: flex-end; opacity: .5; }
@media (min-width: 48rem) { .foot-clock { display: flex; } }
.btn-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; }
.foot-cols .h { display: block; margin-bottom: 1.5rem; opacity: .5; }
.foot-cols p { display: flex; gap: .5rem; margin-bottom: .5rem; }
.foot-social { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1rem; row-gap: .5rem; }
.foot-social p { width: 100%; max-width: calc(50% - 1rem); }
/* Sin mix-blend-mode: sobre el fondo liso del pie, "difference" daba #D4D3D0; ese color directo se ve igual y le ahorra
   al navegador componer la mezcla en cada cuadro (plan-fluidez-maxima.md). */
.foot-lines { position: relative; z-index: 2; display: flex; width: 100%; flex-direction: column; justify-content: flex-end; padding-bottom: 1rem; overflow-x: clip; }
.foot-lines path[stroke="#D8D8D8"] { stroke: #D4D3D0; }
.foot-lines > div { width: 101%; margin-left: -.5%; }
.foot-lines svg { display: block; width: 100%; height: auto; }

/* Pagina Servicios */
#services-orbit-scope-v2 { position: relative; min-height: 100lvh; background: var(--ink-850); color: #e8e8e8; overflow: hidden; }
#orbit-canvas-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100lvh; z-index: 0; isolation: isolate; }
#main-canvas-services-v2 { width: 100%; height: 100%; }
.sec-expertise { position: relative; z-index: 1; display: flex; min-height: 100lvh; width: 100vw; flex-direction: column; justify-content: center; padding: 3rem 1.5rem 3.5rem; color: var(--text-light); }
.exp-left { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; text-align: center; }
.exp-bottom { position: absolute; bottom: 10rem; left: 50%; translate: -50% 0; display: flex; justify-content: center; text-align: center; width: 100%; }
@media (min-width: 48rem) { .exp-bottom { bottom: 3.5rem; max-width: 40rem; } }
.srv-list { display: flex; justify-content: center; flex-wrap: wrap; column-gap: .5rem; row-gap: .25rem; }
.srv-list li { cursor: pointer; color: #666; transition: color .2s; }
.srv-list li:hover { color: #e8e8e8; }
.exp-scroll { position: absolute; bottom: 3.5rem; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; opacity: .5; pointer-events: none; }
@media (min-width: 48rem) { .exp-scroll { justify-content: flex-end; } }
.sec-focused { position: relative; z-index: 1; display: flex; min-height: 100lvh; width: 100vw; align-items: center; }
.foc-inner { color: var(--text-light); }
.foc-inner > div { grid-column: span 12; display: flex; flex-direction: column; align-items: center; gap: 5rem; text-align: center; }
.foc-cta { display: flex; gap: 2.5rem; }
@media (max-width: 767px) { .foc-inner h2 br { display: none; } }
/* Las letras del carrusel invierten lo que tienen detrás (formas 3D), como el carrusel de Daniel Díaz. */
.sec-disciplines { position: relative; z-index: 1; display: flex; min-height: 100lvh; width: 100vw; align-items: center; justify-content: center; color: #fff; mix-blend-mode: difference; }
.disc-inner { position: relative; z-index: 31; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 5rem; mix-blend-mode: difference; }
.disc-line { position: absolute; top: 50%; left: 0; margin-top: 5rem; text-align: center; }
@media (min-width: 64rem) { .disc-line { margin-top: 9.375rem; } }
.svc-list-section { position: relative; color: var(--text-dark); background: #fff; z-index: 31; }
@media (min-width: 48rem) { .svc-list-section { min-height: 100lvh; } }
.services-list { position: relative; display: flex; flex-direction: column; }
@media (min-width: 48rem) { .services-list { min-height: 100lvh; } }
.services-item { position: relative; display: flex; width: 100%; z-index: 2; background: #fff; }
@media (min-width: 48rem) { .services-item { position: absolute; min-height: 100lvh; } }
.services-item > .split { display: flex; flex-direction: column; width: 100%; }
@media (min-width: 48rem) { .services-item > .split { flex-direction: row; } }
.image-block { width: 100%; padding: 5rem 1.5rem 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--line-dark); }
.image-block.dark { background: var(--ink-950); color: var(--text-light); }
.image-block .title { margin-bottom: 3rem; display: block; }
.image-block img { width: 100%; max-width: 44rem; border-radius: .5rem; height: auto; }
@media (min-width: 48rem) { .image-block { width: 50%; padding: 5rem 2.5rem; } }
@media (min-width: 64rem) { .image-block { padding: 9.375rem 5rem; } }
.content-block { width: 100%; padding: 4rem 1.5rem 5rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1.5rem; }
@media (min-width: 48rem) { .content-block { width: 50%; padding: 5rem 2.5rem; } }
@media (min-width: 64rem) { .content-block { padding: 9.375rem 0; } }
.content-inner { grid-column: span 6; display: flex; flex-direction: column; height: 100%; justify-content: center; }
@media (min-width: 64rem) { .content-inner { grid-column: 2 / span 5; } }
@media (min-width: 80rem) { .content-inner { grid-column: 2 / span 4; } }
.service-title { font-size: 2.5rem !important; line-height: 1 !important; letter-spacing: -.04em !important; margin-bottom: 1.5rem; }
.service-title-block { margin-bottom: 4rem; }
@media (min-width: 64rem) { .service-title-block { margin-bottom: 6.25rem; } }
.service-info .title { display: block; margin-bottom: 2.5rem; opacity: .6; }
.service-info-item { color: #000; padding-block: 1rem; }
.service-info-item:first-child { padding-top: 0; }
.line-draw { position: relative; height: 1px; }
.line-draw .line { position: absolute; left: 0; top: 0; height: 1px; width: 0; }
/* Celular: la lista se fija y cada servicio ocupa una pantalla, como en el computador (plan-servicios-movil.md). Todo más
   compacto para que quepa en un iPhone (unos 700 px); si no cabe, services.js lo hace subir antes del siguiente. */
@media (max-width: 47.99rem) {
  .services-list { height: 100lvh; overflow: hidden; }
  .services-item { position: absolute; inset: 0 0 auto; min-height: 100lvh; }
  .services-item > .split { min-height: 100lvh; background: #fff; }
  .image-block { padding: 4.75rem 1.5rem 0; border-right: 0; }
  .image-block .title { margin-bottom: 1rem; }
  .image-block img { width: auto; max-width: 100%; max-height: 28lvh; object-fit: contain; }
  .image-block.dark { padding-bottom: 1.25rem; }
  .content-block { padding: 1.5rem 1.5rem 2.5rem; }
  .service-title { font-size: 2rem !important; margin-bottom: .75rem; }
  .service-title-block { margin-bottom: 1.5rem; }
  .service-info .title { margin-bottom: 1rem; }
  .service-info-item { padding-block: .6rem; }
}
.svc-list-foot { position: relative; z-index: 31; padding-bottom: 5rem; text-align: center; }
@media (min-width: 48rem) { .svc-list-foot { padding-block: 6.25rem; } }
.stack-section { padding-top: 5rem; background: #fff; }
@media (min-width: 64rem) { .stack-section { padding-block: 9.375rem; } }
.stack-head { padding-bottom: 5rem; text-align: center; color: var(--text-dark); }
.stack-head .mrquee-text { line-height: .8; }
.stack-head > * { grid-column: span 12; }
.stack-head .why { max-width: 18.75rem; margin: 2.5rem auto 0; display: block; }
@media (min-width: 64rem) { .stack-head { padding-bottom: 9.375rem; text-align: left; } .stack-head .t1 { grid-column: 3 / span 10; } .stack-head .t2 { grid-column: 8 / span 5; } .stack-head .why { grid-column: 5 / span 8; margin: 0; translate: 0 -100%; } }
.acc-title { padding-block: 2rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; width: 100%; position: relative; cursor: pointer; align-items: center; color: var(--text-dark); text-align: left; }
@media (min-width: 64rem) { .acc-title { padding-block: 2.5rem; } }
.acc-title .n { grid-column: span 1; }
.acc-title h2 { grid-column: span 11; padding-right: 5rem; }
@media (min-width: 64rem) { .acc-title h2 { grid-column: 5 / span 8; } }
.acc-icon { position: absolute; top: 50%; right: 0; translate: 0 -50%; width: .75rem; height: .75rem; display: flex; justify-content: center; align-items: center; transition: all .3s ease-in-out .2s; }
.acc-title[aria-expanded="true"] .acc-icon { rotate: 180deg; }
.acc-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; width: 100%; overflow: hidden; }
.acc-cols { grid-column: 2 / span 11; padding-bottom: 2rem; display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; row-gap: 2rem; color: var(--text-dark); }
@media (min-width: 40rem) { .acc-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .acc-cols { grid-column: 5 / span 8; padding-bottom: 3rem; padding-right: 5rem; } }
.acc-cols .title { opacity: .6; margin-bottom: 1rem; display: block; }
.acc-cols li { line-height: 1.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Carga, transicion, menu y contacto: valores leidos, ver clone-spec.md */
:root { --pl-panel-gray: #c8c8c8; --pl-line-gray: #434343; --pl-corner-plus-offset: calc(-6px - 6.5px); }
.pl-white-overlay { background: var(--pl-panel-gray); z-index: 9050; pointer-events: none; position: fixed; inset: 0; }
.pl-overlay { z-index: 9100; pointer-events: none; visibility: hidden; flex-direction: column; display: flex; position: fixed; inset: 0; }
.pl-overlay.active, .pl-trans-overlay.active { pointer-events: all; visibility: visible; }
.pl-belt { background: var(--pl-panel-gray); will-change: transform; transform-origin: 50%; background-clip: padding-box; flex: 1; width: 100%; margin-bottom: -1px; padding-bottom: 1px; transform: scaleY(0); }
.pl-belt:last-child { margin-bottom: 0; }
.pl-flying-plus { z-index: 9500; pointer-events: none; will-change: left, top, opacity, transform; width: .813rem; height: .813rem; position: fixed; transform: translate(-50%, -50%); }
.pl-flying-plus svg { display: block; }
.pl-overlay-center { z-index: 9350; contain: layout paint; pointer-events: none; visibility: hidden; perspective: 800px; flex-direction: column; justify-content: center; align-items: center; display: flex; position: fixed; inset: 0; }
.pl-overlay-logo-wrap { width: clamp(10rem, 22vw, 17.5rem); height: clamp(10.25rem, 22.3vw, 17.75rem); position: relative; }
.pl-logo-black-box { background: var(--pl-panel-gray); z-index: 0; opacity: 0; will-change: transform, opacity, left, top, width, height; border: 1.5px solid #0000000f; border-radius: 2px; position: absolute; inset: 0; }
.pl-logo-corner-plus { z-index: 10; will-change: transform, opacity; width: .813rem; height: .813rem; position: absolute; }
.pl-logo-corner-plus svg { width: .813rem; height: .813rem; position: static; }
.pl-logo-corner-plus.tl { top: var(--pl-corner-plus-offset); left: var(--pl-corner-plus-offset); }
.pl-logo-corner-plus.tr { top: var(--pl-corner-plus-offset); right: var(--pl-corner-plus-offset); }
.pl-logo-corner-plus.bl { bottom: var(--pl-corner-plus-offset); left: var(--pl-corner-plus-offset); }
.pl-logo-corner-plus.br { bottom: var(--pl-corner-plus-offset); right: var(--pl-corner-plus-offset); }
.pl-border-svg { z-index: 5; pointer-events: none; opacity: 0; width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.pl-t-path { opacity: 0; z-index: 500; will-change: transform, opacity; width: 100%; height: 100%; position: absolute; inset: 0; }
.pl-overlay-page-label { text-transform: uppercase; color: #000; opacity: 0; white-space: nowrap; z-index: 600; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pl-overlay-counter { opacity: 0; z-index: 9400; justify-content: center; align-items: center; gap: 1px; display: flex; position: fixed; bottom: 5rem; left: 50%; transform: translate(-50%); }
.pl-slot-reel { width: .75rem; height: .938rem; display: block; position: relative; overflow: hidden; }
.pl-slot-strip { will-change: transform; display: block; }
.pl-slot-digit { height: 1rem; color: var(--pl-line-gray); letter-spacing: 0; text-align: center; font-size: 1rem; line-height: 1rem; display: block; }
.pl-overlay-tagline { align-items: center; gap: .063rem; margin-top: 2.5rem; display: flex; }
.pl-tag-word { text-transform: uppercase; color: #111; opacity: 0; transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); transform: translateY(6px); }
.pl-tag-word.visible { opacity: 1; transform: translateY(0); }
.pl-tag-dot { color: #0000004d; opacity: 0; margin: 0 .5rem; font-size: 1.125rem; transition: opacity .4s .15s; }
.pl-tag-dot.visible { opacity: 1; }
.pl-trans-overlay { z-index: 9200; pointer-events: none; visibility: hidden; flex-direction: column; display: flex; position: fixed; inset: 0; }
.pl-trans-center { z-index: 9250; pointer-events: none; visibility: hidden; perspective: 800px; flex-direction: column; justify-content: center; align-items: center; display: flex; position: fixed; inset: 0; }
.pl-trans-label { font-family: var(--font-display); font-size: 1.125rem; line-height: 1; letter-spacing: -.02em; }
@media (min-width: 64rem) { .pl-trans-label { font-size: 1.063rem; } }

.main-toggle { display: none; align-items: center; }
@media (min-width: 48rem) { .main-toggle { display: inline-flex; } }
.main__humburger { position: relative; display: flex; align-items: center; justify-content: center; height: .75rem; min-width: .75rem; margin-top: .125rem; }
.main__humburger span { position: absolute; width: .75rem; height: 1px; background: currentColor; transition: all .5s; transform: translateY(-.125rem); }
.main__humburger span + span { transform: translateY(.125rem); }
.main-toggle:hover .main__humburger span { transform: translateY(.125rem); }
.main-toggle:hover .main__humburger span + span { transform: translateY(-.125rem); }
.main-toggle.is-open .main__humburger span { transform: rotate(45deg); }
.main-toggle.is-open .main__humburger span + span { transform: rotate(-45deg); }
.menu-toggle { position: relative; display: flex; align-items: center; cursor: pointer; border-radius: 9999px; border: 1px solid #fff; color: #fff; }
@media (min-width: 48rem) { .menu-toggle { display: none; } }
.nav__humburger { display: flex; height: 2rem; max-height: 2rem; min-width: 3rem; align-items: center; justify-content: center; }
.nav__humburger svg { width: 1.5rem; height: 1.5rem; }

.mobile-menu-panel { position: fixed; top: 0; right: 0; width: 100%; height: 100dvh; background: #000; z-index: 40; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); color: #d8d8d8; }
@media (min-width: 48rem) { .mobile-menu-panel { display: none; } }
.mobile-menu-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 5rem; min-height: 100%; width: 100%; padding: 10rem 1.5rem 5rem; }
.menu-wrapper { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.menu { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1.375rem; letter-spacing: -.04em; text-transform: uppercase; color: #fff; padding-block: 1rem; }
.story-pill { display: inline-block; padding: .375rem 1rem .5rem; border-radius: 9999px; border: 1px solid; transition: all .3s cubic-bezier(.4,0,.2,1); }
.story-pill.on-dark { border-color: rgb(216 216 216 / .5); }
.story-pill.on-dark:hover { border-color: #d8d8d8; }
.story-pill.on-light { border-color: #d8d8d8; }
.story-pill.on-light:hover { border-color: #434343; }
.header-menu-line { width: 100%; display: flex; justify-content: center; }
.header-menu-line .line { display: block; height: 1px; width: 100%; background: #2f323b; }
.mobile-bottom { display: flex; flex-direction: column; align-items: center; gap: 5rem; }
.enq-head { display: block; margin-bottom: 1.5rem; text-align: center; color: rgb(216 216 216 / .5); }
.enq-row { display: flex; gap: .5rem; margin-bottom: .5rem; justify-content: center; }
.enq-label { flex-shrink: 0; text-transform: uppercase; opacity: .5; }
.mobile-est { display: flex; border: 1px solid #2f323b; border-radius: .25rem; overflow: hidden; min-height: 4.5rem; font-size: .875rem; line-height: .875rem; }
.mobile-est > div { display: flex; align-items: center; justify-content: center; padding: 1rem; }
.mobile-est > div:first-child { min-width: 6.5rem; border-right: 1px solid #2f323b; }
.mobile-est .est-a { flex-direction: column; gap: .5rem; }

.desktop-menu-wrap { visibility: hidden; opacity: 0; position: fixed; top: 0; right: 0; z-index: 40; height: 100%; width: 100%; justify-content: flex-end; padding: 1rem; display: none; pointer-events: none; }
@media (min-width: 48rem) { .desktop-menu-wrap { display: flex; } }
.menu-block { position: relative; z-index: 5; display: flex; width: 100%; max-width: 27.5rem; align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; max-height: 100%; border-radius: .5rem; background: #fff; color: #434343; pointer-events: auto; border: 1px solid #e6e4e2; clip-path: circle(0% at 95% 5%); opacity: 0; visibility: hidden; }
.desktop-menu-inner { display: flex; flex-direction: column; min-height: 100%; width: 100%; justify-content: space-between; padding: 5rem 2rem 2.5rem; gap: 5rem; }
.menu-top { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-block: auto; }
.desktop-list { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; width: 100%; }
.desktop-list .menu-item { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.desktop-link { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.menu-arrow { opacity: 0; padding-top: .375rem; transition: all .3s ease-in-out .3s; will-change: transform, opacity; }
.menu-arrow svg { width: .625rem; height: .625rem; }
.desktop-link:hover .menu-arrow { opacity: 1; transform: translateX(.5rem); }
.menu-story { width: 100%; padding-top: 2.5rem; }
.menu-foot { display: flex; flex-direction: column; gap: 3.5rem; }
.menu-foot > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.foot-head { display: block; color: rgb(67 67 67 / .5); }
.foot-stack { display: flex; flex-direction: column; gap: .5rem; }
.foot-stack .enq-row { justify-content: flex-start; margin: 0; }
.foot-stack .enq-label { width: 1.5rem; }
.foot-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; row-gap: .25rem; font-size: .875rem; font-weight: 500; width: 100%; }

.contact-popup-wrapper { visibility: hidden; opacity: 0; position: fixed; inset: 0; z-index: 1100; display: flex; justify-content: flex-end; pointer-events: none; }
@media (min-width: 48rem) { .contact-popup-wrapper { padding: 1rem; } }
.contact-popup-backdrop { position: absolute; inset: 0; pointer-events: none; }
.contact-popup-wrapper.is-open .contact-popup-backdrop { pointer-events: auto; }
.contact-popup-panel { position: relative; z-index: 5; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: #434343; pointer-events: auto; scrollbar-width: none; clip-path: circle(0% at 95% 5%); opacity: 0; visibility: hidden; }
@media (min-width: 48rem) { .contact-popup-panel { max-width: 34rem; max-height: 100%; border-radius: .5rem; border: 1px solid #e6e4e2; } }
.contact-close { position: absolute; top: .75rem; right: .75rem; z-index: 20; display: flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgb(17 18 20 / .15); color: #111214; cursor: pointer; transition: border-color .3s; }
.contact-close:hover { border-color: rgb(17 18 20 / .6); }
.contact-close svg { width: .625rem; height: .625rem; }
.contact-popup-inner { display: flex; min-height: 100%; width: 100%; flex-direction: column; justify-content: space-between; padding: 1.5rem; }
@media (min-width: 48rem) { .contact-popup-inner { padding: 2.5rem; } }
.contact-top { position: relative; z-index: 3; }
.contact-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.contact-form { display: flex; flex-direction: column; gap: .75rem; }
.field { position: relative; }
.f-label, .f-error { position: absolute; top: 0; z-index: 10; display: inline-flex; align-items: center; height: 1.375rem; padding-inline: .5rem; background: #fff; font-size: .563rem; border-radius: .125rem; text-transform: uppercase; line-height: 1; pointer-events: none; transition: all .25s ease-in-out; opacity: 0; visibility: hidden; transform: translateY(.5rem); }
.f-label { left: .875rem; color: #434343; }
.f-error { right: .875rem; z-index: 20; color: #d9432b; white-space: nowrap; }
.field.is-filled .f-label, .field.has-error .f-error { opacity: 1; visibility: visible; transform: translateY(-.6875rem); }
.f-control { display: block; width: 100%; background: transparent; border: 1px solid rgb(67 67 67 / .15); border-radius: .5rem; color: #434343; padding: .75rem 1rem; outline: none; transition: all .3s; font-family: inherit; }
textarea.f-control { resize: none; }
.f-control::placeholder, .f-value.is-empty { color: rgb(67 67 67 / .6); }
.f-control:focus, .field.is-filled .f-control, .select-field.is-open .f-control { border-color: #434343; }
.field.has-error .f-control { border-color: #d9432b !important; }
.f-count { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; font-size: .75rem; color: rgb(67 67 67 / .6); }
.f-select { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; cursor: pointer; }
.f-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-chevron { flex-shrink: 0; transition: transform .3s; }
.f-chevron svg { width: .625rem; height: .625rem; }
.select-field.is-open .f-chevron { transform: rotate(180deg); }
.f-options { position: absolute; left: 0; right: 0; top: calc(100% + .25rem); z-index: 30; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgb(67 67 67 / .15); border-radius: .25rem; padding-block: .25rem; background: #fff; transform-origin: top; transition: all .3s ease-in-out; visibility: hidden; opacity: 0; transform: translateY(-.5rem); pointer-events: none; }
.select-field.is-open .f-options { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.f-option { display: block; width: 100%; text-align: left; padding: .75rem 1rem; cursor: pointer; transition: background-color .2s, color .2s; }
.f-option:hover { background: #434343; color: #fff; }
.f-option.is-active { background: rgb(67 67 67 / .08); }
.f-submit { margin-top: .5rem; width: 100%; }
.f-submit .word-shift, .f-submit .btn { width: 100%; }
.shake { animation: .42s shake; }
@keyframes shake { 0%, to { transform: translate(0); } 20% { transform: translate(-7px); } 40% { transform: translate(7px); } 60% { transform: translate(-4px); } 80% { transform: translate(4px); } }
.contact-or { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; width: 100%; position: relative; z-index: 2; }
.contact-or span:not(.title) { height: 1px; flex: 1; background: rgb(0 0 0 / .1); }
.contact-or .title { color: rgb(0 0 0 / .6); }
.contact-alt { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.contact-call { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: .5rem; border: 1px solid #000; background: #e6e4e2; padding: 1rem 2.5rem; text-transform: uppercase; color: #434343; transition: color .3s, background-color .3s; }
.contact-call:hover { background: #000; color: #d8d8d8; }
.form-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 2.5rem; color: #434343; }
.success-circle { position: relative; width: 5rem; height: 5rem; border: 1px solid #111214; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.success-particle { position: absolute; left: 50%; top: 50%; width: .25rem; height: .25rem; background: #111214; border-radius: 9999px; pointer-events: none; }
.success-check { width: 2rem; height: 1rem; border-left: 2px solid #111214; border-bottom: 2px solid #111214; rotate: -45deg; margin-top: -.25rem; }
.success-text { margin-bottom: .75rem; }
.tm-listen { margin-left: auto; }
.md-media { display: none !important; }
@media (min-width: 48rem) { .md-media { display: block !important; } .sm-media { display: none !important; } }
#sound-toggle { display: flex; width: 2rem; height: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: rgb(217 217 217 / .1); color: #fff; z-index: 30; transition: all .5s ease-in-out; }
#sound-toggle:hover { background: rgb(217 217 217 / .2); }
#sound-toggle svg { width: 1rem; height: .875rem; }
.success-circle::before, .success-circle::after { content: ""; scale: .75; border: 1px solid rgb(255 255 255 / .12); border-radius: 9999px; opacity: 0; animation: 2s infinite successPulse; position: absolute; inset: -1.5rem; }
.success-circle::after { transition-delay: .35s; inset: -3rem; }
@keyframes successPulse { 0% { opacity: 0; transform: scale(.75); } 35% { opacity: 1; } to { opacity: 0; transform: scale(1.08); } }
body { font-size: 1.25rem; }
@media (min-width: 64rem) { body { font-size: 1rem; } }
@media (min-width: 48rem) { .menu { font-size: 1.25rem; line-height: 1.375rem; } }
.exp-top-label.sm-label { position: absolute; top: 7.5rem; left: 0; width: 100%; display: flex; justify-content: center; z-index: 3; }
.exp-top-label.md-label { display: none; }
@media (min-width: 48rem) { .exp-top-label.sm-label { display: none; } .exp-top-label.md-label { display: flex; } }
.how-section { position: relative; background: linear-gradient(0deg, #c3c3c3 0%, #fff 100%); color: var(--text-dark); }
.how-inner { position: relative; height: 100lvh; padding-block: 6.25rem 5rem; overflow: hidden; }
@media (min-width: 64rem) { .how-inner { height: auto; min-height: 100lvh; padding-block: 9.375rem; overflow: visible; } }
.how-head { margin-bottom: 2.5rem; row-gap: 0; }
@media (min-width: 64rem) { .how-head { margin-bottom: 5rem; } }
.how-label { grid-column: span 2; padding-top: 1rem; display: none; }
@media (min-width: 48rem) { .how-label { display: block; } }
.how-title { grid-column: span 12; }
@media (min-width: 48rem) { .how-title { grid-column: span 10; } }
@media (min-width: 64rem) { .how-cols { margin-left: calc((100% + 1.5rem) * 2 / 12); width: calc((100% + 1.5rem) * 9 / 12 - 1.5rem); } }
.how-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); position: relative; }
.how-card { grid-column: span 12; position: relative; padding-bottom: 2.5rem; }
.how-card:not(:first-child) { margin-top: 2.5rem; }
@media (min-width: 48rem) { .how-card { grid-column: span 4; padding-bottom: 5rem; padding-right: 1.5rem; } .how-card:last-child { padding-right: 0; } .how-card:not(:first-child) { margin-top: 0; } }
.how-card-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
@media (min-width: 48rem) { .how-card-grid { align-items: baseline; column-gap: 0; } }
.how-card .step-no { grid-column: span 3; display: block; opacity: .5; margin-top: .25rem; }
.how-card-text { grid-column: span 9; }
@media (min-width: 48rem) { .how-card .step-no { grid-column: span 12; margin: 0 0 2.5rem; } .how-card-text { grid-column: span 12; } }
.how-card .work-title-h { margin: 0; }
@media (min-width: 48rem) { .how-card .work-title-h { margin-bottom: 2rem; } }
.how-card .content { margin-top: 1rem; opacity: .5; }
@media (min-width: 48rem) { .how-card .content { margin-top: 0; max-width: 23rem; } }
.fill-line { position: absolute; left: 0; bottom: 0; width: 100%; display: none; }
@media (min-width: 48rem) { .fill-line { display: block; } }
.fill-line .line { position: absolute; top: 50%; translate: 0 -50%; height: 1px; width: 100%; background: #272727; }
.fill-line svg { position: absolute; top: 50%; translate: 0 -50%; }
.fill-line .plus-follow { z-index: 2; }
.fill-line .plus { translate: -50% -50%; left: 0; }
.m-line-wrap { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; }
@media (min-width: 48rem) { .m-line-wrap { display: none; } }
.m-line { position: absolute; inset: 0; height: 1px; width: 100%; background: #272727; }

/* Formulario conectado: autorización de datos, campo trampa y estado del envío. */
.consent-field { padding-top: .25rem; }
.f-consent { display: flex; align-items: flex-start; gap: .625rem; cursor: pointer; line-height: 1.4; }
.f-check { flex: none; width: 1rem; height: 1rem; margin: .1rem 0 0; accent-color: #434343; cursor: pointer; }
.consent-field .f-error { position: static; display: inline-flex; margin-top: .375rem; transform: none; padding: 0; background: none !important; }
.consent-field.has-error .f-error { transform: none; }
.f-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-status { margin: 0; color: #d9432b; line-height: 1.5; text-wrap: pretty; }
.f-status a { text-decoration: underline; }
.contact-form.is-sending .f-submit { opacity: .5; pointer-events: none; }
.f-consent a { text-decoration: underline; }