/* ============================================================
   GroupMTS — Tapiceria Nautica de Lujo
   Hoja de estilos principal · TEMA CLARO PREMIUM
   ------------------------------------------------------------
   Para cambiar TODA la paleta, edita unicamente el bloque
   :root de aqui abajo. Nada mas necesita tocarse.
   ============================================================ */

:root {
    /* ---------- Fondos ---------- */
    --paper: #FCFBF9;
    /* blanco calido: fondo principal */
    --paper-2: #F4F1EB;
    /* hueso: secciones alternas */
    --card: #FFFFFF;

    /* ---------- Tinta ---------- */
    --ink: #0A1823;
    /* azul marino exacto del logo: titulares */
    --ink-2: #44535F;
    /* texto de lectura */
    --muted: #7E8C99;
    /* etiquetas y texto secundario */

    /* ---------- Lineas ---------- */
    --line: rgba(10, 24, 35, .13);
    --line-2: rgba(10, 24, 35, .26);
    --line-soft: rgba(10, 24, 35, .08);

    /* ---------- PALETA ACTIVA: AZUL DEL LOGO ----------
     Cambiar estas 4 lineas cambia todo el acento del sitio.
     Alternativas probadas (copia y pega):
       Cobre ....... 168,95,34  | 122,66,20  | #C98B52 | #8F5320
       Turquesa .... 11,124,140 | 8,95,108   | #2BA9BC | #096F7E
       Verde jade .. 16,119,90  | 11,90,68   | #3FBF8F | #0D6B50   */
    --accent-rgb: 9, 91, 190;
    /* acento principal, en R,G,B */
    --accent-deep-rgb: 7, 72, 152;
    /* version oscura para hover */
    --accent: rgb(var(--accent-rgb));
    --accent-deep: rgb(var(--accent-deep-rgb));
    --accent-lt: #3D8BF2;
    --accent-hover: var(--accent-deep);
    --accent-wash: rgba(var(--accent-rgb), .08);

    /* ---------- COLORES VIVOS (Puerto Rico) ----------
     c1 azul del logo · c2 turquesa Caribe · c3 coral atardecer · c4 sol
     Se usan en botones, iconos, numeros y manchas de color del hero. */
    --c1: #0A5BC4;
    --c1-rgb: 10, 91, 196;
    --c2: #00BFC9;
    --c2-rgb: 0, 191, 201;
    --c3: #FF6B3D;
    --c3-rgb: 255, 107, 61;
    --c4: #FFB627;
    --c4-rgb: 255, 182, 39;
    --grad: linear-gradient(100deg, var(--c1) 0%, #0C86D6 48%, var(--c2) 100%);
    --grad-warm: linear-gradient(100deg, var(--c3), var(--c4));

    /* ---------- Sombras (suaves, tipo papel) ---------- */
    --shadow-s: 0 1px 2px rgba(10, 24, 35, .05), 0 2px 8px rgba(10, 24, 35, .04);
    --shadow-m: 0 2px 4px rgba(10, 24, 35, .04), 0 12px 28px -10px rgba(10, 24, 35, .14);
    --shadow-l: 0 4px 8px rgba(10, 24, 35, .05), 0 30px 60px -22px rgba(10, 24, 35, .28);

    --r-s: 8px;
    --r-m: 16px;
    --r-l: 24px;
    --r-pill: 999px;
    --pad: clamp(1.25rem, 5vw, 5.5rem);
    --section: clamp(5rem, 11vw, 10rem);
    --maxw: 1240px;

    --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-2);
    font-family: var(--f-body);
    font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
    line-height: 1.7;
    font-weight: 350;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px
}

::selection {
    background: rgba(var(--accent-rgb), .16);
    color: var(--ink)
}

h1,
h2,
h3 {
    font-family: var(--f-display);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--ink)
}

h1 {
    font-size: clamp(2.6rem, 7vw, 5.2rem)
}

h2 {
    font-size: clamp(2rem, 4.4vw, 3.4rem)
}

h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    letter-spacing: -.01em
}

p {
    margin: 0
}

em {
    font-style: italic;
    color: var(--accent)
}

.wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad)
}

.section {
    padding-block: var(--section);
    position: relative
}

.section--tint {
    background: linear-gradient(180deg, #F2F8FA, #F6F3EE 55%, #F2F8FA)
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.eyebrow::before {
    content: "";
    width: 2.4rem;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
    opacity: .9
}

.lede {
    color: var(--ink-2);
    max-width: 56ch;
    margin-top: 1.5rem
}

.head {
    max-width: 64ch;
    margin-bottom: clamp(3rem, 6vw, 5rem)
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
    --bg: var(--accent);
    --fg: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65em;
    padding: 1em 1.85em;
    border-radius: var(--r-pill);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .02em;
    background: var(--grad);
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    background-size: 150% 100%;
    background-position: 0% 50%;
    box-shadow: 0 1px 2px rgba(10, 24, 35, .08), 0 12px 26px -12px rgba(var(--c1-rgb), .7);
    transition: box-shadow .4s var(--ease), background .3s;
}

.btn>* {
    position: relative;
    z-index: 1
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: translateX(-110%);
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
    transition: transform .8s var(--ease);
}

.btn:hover::after {
    transform: translateX(110%)
}

.btn {
    transition: box-shadow .4s var(--ease), background-position .6s var(--ease)
}

.btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 2px 4px rgba(10, 24, 35, .1), 0 20px 38px -14px rgba(var(--c2-rgb), .8)
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-2);
    box-shadow: none
}

.btn--ghost:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    box-shadow: none
}

.btn svg {
    width: 1.15em;
    height: 1.15em;
    flex: none
}

/* ============================================================
   BARRA DE PROGRESO + CURSOR
   ============================================================ */
.progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 150;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--c1), var(--c2) 45%, var(--c4) 75%, var(--c3));
}

.cursor,
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .3s
}

.cursor {
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 1px solid rgba(var(--accent-rgb), .55);
    transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s;
}

.cursor-dot {
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--accent)
}

body.cursor-on .cursor,
body.cursor-on .cursor-dot {
    opacity: 1
}

body.cursor-hot .cursor {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    background: rgba(var(--accent-rgb), .09);
    border-color: var(--accent)
}

@media (hover:none),
(pointer:coarse) {

    .cursor,
    .cursor-dot {
        display: none
    }
}

/* ============================================================
   NAVEGACION
   ============================================================ */
.skip {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 200;
    background: var(--accent);
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: var(--r-s);
    transition: top .25s
}

.skip:focus {
    top: 1rem
}

.nav {
    position: fixed;
    inset: 2px 0 auto 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.3rem var(--pad);
    border-bottom: 1px solid transparent;
    transition: background .45s var(--ease), padding .45s var(--ease), border-color .45s, transform .45s var(--ease), box-shadow .45s;
}

.nav.is-stuck {
    background: rgba(252, 251, 249, .86);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--line);
    padding-block: .85rem;
    box-shadow: 0 1px 20px -10px rgba(10, 24, 35, .35);
}

.nav.is-hidden {
    transform: translateY(-115%)
}

.logo {
    display: block;
    line-height: 1
}

.nav .logo {
    animation: navDown .85s var(--ease) backwards .12s
}

.logo__img {
    position: relative;
    display: block;
    overflow: hidden
}

.nav .logo__img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateX(-130%);
    background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
    animation: shine 7s var(--ease) 2.6s infinite;
}

.logo-txt {
    display: block;
    font-family: var(--f-display);
    font-size: 1.55rem;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1
}

.logo-txt b {
    color: var(--c1);
    font-weight: inherit
}

.foot__logo .logo-txt {
    font-size: 2rem
}

.logo img {
    height: 1.6rem;
    width: auto;
    display: block;
    transition: filter .45s var(--ease), transform .45s var(--ease)
}

.nav .logo:hover img {
    filter: saturate(1.15);
    transform: translateX(2px)
}

.logo small {
    display: block;
    font-family: var(--f-body);
    font-size: .54rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .4rem;
    font-weight: 500;
    white-space: nowrap;
}

.logo-mark {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

@keyframes shine {
    0% {
        transform: translateX(-130%)
    }

    16% {
        transform: translateX(130%)
    }

    100% {
        transform: translateX(130%)
    }
}

@keyframes navDown {
    from {
        opacity: 0;
        transform: translateY(-16px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes navPop {
    from {
        opacity: 0;
        transform: scale(.5) rotate(-30deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.65rem;
    position: relative
}

.nav-links a {
    white-space: nowrap;
    font-size: .8rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: 500;
    position: relative;
    z-index: 1;
    padding-block: .3rem;
    transition: color .3s;
    animation: navDown .65s var(--ease) backwards;
}

.nav-links a:nth-of-type(1) {
    animation-delay: .30s
}

.nav-links a:nth-of-type(2) {
    animation-delay: .37s
}

.nav-links a:nth-of-type(3) {
    animation-delay: .44s
}

.nav-links a:nth-of-type(4) {
    animation-delay: .51s
}

.nav-links a:nth-of-type(5) {
    animation-delay: .58s
}

.nav-links a:nth-of-type(6) {
    animation-delay: .65s
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent)
}

.nav-pill {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 2.1rem;
    z-index: 0;
    opacity: 0;
    transform: translateY(-50%);
    border-radius: var(--r-pill);
    pointer-events: none;
    background: rgba(var(--accent-rgb), .09);
    border: 1px solid rgba(var(--accent-rgb), .24);
    transition: left .5s var(--ease), width .5s var(--ease), opacity .35s var(--ease);
}

.nav-links .roll {
    display: block;
    overflow: hidden;
    height: 1.15em;
    white-space: nowrap
}

.nav-links .roll span {
    display: block;
    line-height: 1.15em;
    white-space: nowrap;
    transition: transform .45s var(--ease)
}

.nav-links a:hover .roll span {
    transform: translateY(-100%)
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.05rem
}

/* ---------- Boton de idioma ES / EN ---------- */
.lang {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .45rem .8rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--card);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--muted);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
    animation: navDown .6s var(--ease) backwards .66s;
}

.lang:hover {
    border-color: var(--c1);
    box-shadow: 0 6px 16px -8px rgba(var(--c1-rgb), .6)
}

.lang__sep {
    opacity: .35
}

.lang__on {
    color: var(--c1)
}

.lang__off {
    color: var(--muted)
}

.lang.is-en .lang__on {
    color: var(--muted)
}

.lang.is-en .lang__off {
    color: var(--c1)
}

.lang--drawer {
    display: none;
    align-self: flex-start;
    margin-top: 1.8rem;
    padding: .65rem 1.2rem;
    font-size: .85rem;
    animation: none
}

.social {
    display: flex;
    gap: .5rem
}

.social a {
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--ink-2);
    transition: transform .3s var(--ease), color .3s, border-color .3s, background .3s;
}

.social a svg {
    width: .95rem;
    height: .95rem
}

.social a:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: transparent
}

.social a:nth-of-type(1):hover {
    background: linear-gradient(45deg, #F09433, #DC2743 55%, #BC1888)
}

.social a:nth-of-type(2):hover {
    background: #1877F2
}

.social a:nth-of-type(3):hover {
    background: #25D366
}

.nav .social a {
    animation: navPop .55s var(--ease) backwards
}

.nav .social a:nth-of-type(1) {
    animation-delay: .72s
}

.nav .social a:nth-of-type(2) {
    animation-delay: .79s
}

.nav .social a:nth-of-type(3) {
    animation-delay: .86s
}

.nav .btn {
    animation: navDown .7s var(--ease) backwards .90s
}

.nav .burger {
    animation: navDown .6s var(--ease) backwards .55s
}

.burger {
    display: none;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line)
}

.burger span {
    display: block;
    width: 17px;
    height: 1.5px;
    background: var(--ink);
    position: relative;
    transition: .3s var(--ease)
}

.burger span::before,
.burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 17px;
    height: 1.5px;
    background: var(--ink);
    transition: .3s var(--ease)
}

.burger span::before {
    top: -5.5px
}

.burger span::after {
    top: 5.5px
}

body.menu-open .burger span {
    background: transparent
}

body.menu-open .burger span::before {
    top: 0;
    transform: rotate(45deg)
}

body.menu-open .burger span::after {
    top: 0;
    transform: rotate(-45deg)
}

.drawer {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(252, 251, 249, .98);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    padding: var(--pad);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
}

body.menu-open .drawer {
    opacity: 1;
    visibility: visible
}

.drawer a {
    font-family: var(--f-display);
    font-size: clamp(1.7rem, 7vw, 2.6rem);
    padding-block: .4rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transform: translateY(14px);
    opacity: 0;
    transition: .45s var(--ease);
}

body.menu-open .drawer a {
    transform: none;
    opacity: 1
}

.drawer a:nth-child(1) {
    transition-delay: .06s
}

.drawer a:nth-child(2) {
    transition-delay: .11s
}

.drawer a:nth-child(3) {
    transition-delay: .16s
}

.drawer a:nth-child(4) {
    transition-delay: .21s
}

.drawer a:nth-child(5) {
    transition-delay: .26s
}

.drawer a:nth-child(6) {
    transition-delay: .31s
}

.drawer a:hover {
    color: var(--accent)
}

/* ============================================================
   VIDEO DE FONDO
   ============================================================ */
.vbg {
    position: absolute;
    inset: -12% 0;
    z-index: -2;
    overflow: hidden;
    background: linear-gradient(160deg, #EAF0F6, #DCE5EE 45%, #CFD9E4)
}

.vbg video,
.vbg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* Capas que se mueven con el parallax: van a la GPU una sola vez */
[data-parallax] {
    will-change: transform
}

.vbg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Velo CLARO. Fuerte a la izquierda, donde va el texto; suave a la
     derecha para que el video se siga viendo. Sube o baja los valores
     segun lo oscuro que sea tu clip. */
    background: linear-gradient(90deg, rgba(252, 251, 249, .97) 0%, rgba(252, 251, 249, .90) 32%, rgba(252, 251, 249, .52) 64%, rgba(252, 251, 249, .30) 100%),
        linear-gradient(180deg, rgba(252, 251, 249, .80) 0%, rgba(252, 251, 249, .30) 30%, rgba(252, 251, 249, .45) 66%, var(--paper) 100%),
        rgba(252, 251, 249, .18);
}

.grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .28;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.hero .grain {
    opacity: .14
}

/* ============================================================
   HERO — video de fondo a pantalla completa
   ------------------------------------------------------------
   El velo blanco es fuerte a la IZQUIERDA (donde va el texto) y
   desaparece hacia la derecha, para que el video se vea limpio.
   Si tu video es oscuro y el texto no se lee, sube los valores
   del primer degradado de .hero__bg::after; si quieres ver mas
   video todavia, bajalos.
   ============================================================ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2.5rem, 5vw, 3.8rem);
    overflow: hidden;
    isolation: isolate;
    padding: clamp(8rem, 13vw, 10rem) var(--pad) clamp(3rem, 6vw, 4.5rem);
}

.hero__bg {
    position: absolute;
    inset: -8% 0;
    z-index: -2;
    overflow: hidden;
    background: linear-gradient(160deg, #DCE6F0, #C3D3E2)
}

.hero__bg video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(252, 251, 249, .95) 0%, rgba(252, 251, 249, .90) 24%, rgba(252, 251, 249, .55) 46%, rgba(252, 251, 249, .12) 66%, rgba(252, 251, 249, 0) 82%),
        linear-gradient(180deg, rgba(252, 251, 249, .55) 0%, rgba(252, 251, 249, 0) 20%, rgba(252, 251, 249, 0) 55%, rgba(252, 251, 249, .75) 85%, var(--paper) 100%);
}

@media (max-width:900px) {
    .hero__bg::after {
        background: linear-gradient(180deg, rgba(252, 251, 249, .92) 0%, rgba(252, 251, 249, .80) 42%, rgba(252, 251, 249, .60) 62%, rgba(252, 251, 249, .92) 88%, var(--paper) 100%);
    }
}

.hero__inner {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    will-change: transform, opacity
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.05rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(var(--accent-rgb), .28);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(8px);
    color: var(--accent);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1.9rem;
}

.badge .dot,
.hero__tag .dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c3);
    flex: none
}

/* El pulso anima transform/opacity (GPU) en vez de box-shadow (repinta cada cuadro) */
.badge .dot::after,
.hero__tag .dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(var(--c3-rgb), .55);
    animation: pulse 2.6s infinite
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1
    }

    70%,
    100% {
        transform: scale(4);
        opacity: 0
    }
}

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 2.2rem;
    padding: .5rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
}

.hero h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.8rem);
    max-width: 18ch;
    text-shadow: 0 1px 24px rgba(252, 251, 249, .7)
}

.hero h1 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--c2), #0C86D6 45%, var(--c1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom
}

.w>span {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 1s var(--ease)
}

.hero.ready .w>span {
    transform: none
}

.hero.ready .w:nth-child(1)>span {
    transition-delay: .05s
}

.hero.ready .w:nth-child(2)>span {
    transition-delay: .12s
}

.hero.ready .w:nth-child(3)>span {
    transition-delay: .19s
}

.hero.ready .w:nth-child(4)>span {
    transition-delay: .26s
}

.hero.ready .w:nth-child(5)>span {
    transition-delay: .33s
}

.hero.ready .w:nth-child(6)>span {
    transition-delay: .40s
}

.hero__fade {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s
}

.hero.ready .hero__fade {
    opacity: 1;
    transform: none
}

.hero__fade.d2 {
    transition-delay: .62s
}

.hero__fade.d3 {
    transition-delay: .74s
}

.hero__fade.d4 {
    transition-delay: .86s
}

.hero p.lede {
    max-width: 48ch;
    color: var(--ink-2);
    margin-top: 1.8rem;
    text-shadow: 0 1px 16px rgba(252, 251, 249, .8)
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2.4rem
}

.trust {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3.6rem);
    padding-top: 2.1rem;
    border-top: 1px solid var(--line);
}

.trust div {
    min-width: 8rem
}

.trust b {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums
}

.trust div:nth-child(1) b {
    color: var(--c1)
}

.trust div:nth-child(2) b {
    color: var(--c2)
}

.trust div:nth-child(3) b {
    color: var(--c3)
}

.trust div:nth-child(4) b {
    color: var(--c4)
}

.trust span {
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted)
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: .5rem;
    font-size: .6rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted)
}

.scroll-cue i {
    display: block;
    width: 1px;
    height: 2.6rem;
    background: linear-gradient(var(--accent), transparent);
    animation: cue 2.2s var(--ease) infinite
}

@keyframes cue {
    0% {
        transform: scaleY(0);
        transform-origin: top
    }

    45% {
        transform: scaleY(1);
        transform-origin: top
    }

    55% {
        transform: scaleY(1);
        transform-origin: bottom
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom
    }
}

/* La flecha de scroll chocaba con los numeros en pantallas altas.
   El disenio ya invita a bajar; la quitamos. */
.scroll-cue {
    display: none
}

/* ============================================================
   REVELADO
   ============================================================ */
:where(html.js) .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.reveal.in {
    opacity: 1;
    transform: none
}

.reveal[data-d="1"] {
    transition-delay: .09s
}

.reveal[data-d="2"] {
    transition-delay: .18s
}

.reveal[data-d="3"] {
    transition-delay: .27s
}

.reveal[data-d="4"] {
    transition-delay: .36s
}

:where(html.js) .mask {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.25s var(--ease)
}

.mask.in {
    clip-path: inset(0 0 0 0)
}

/* ============================================================
   MARQUESINA
   ============================================================ */
.marquee {
    position: relative;
    overflow: hidden;
    padding-block: 1.5rem;
    border-block: 1px solid var(--line);
    background: var(--paper-2);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* La velocidad real la pone script.js; esto es el respaldo si el JS no carga. */
.marquee__track {
    display: flex;
    width: max-content;
    animation: slide 22s linear infinite;
    will-change: transform
}

.marquee:hover .marquee__track {
    animation-play-state: paused
}

@keyframes slide {
    to {
        transform: translateX(-50%)
    }
}

.marquee__group {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    padding-right: 3.2rem
}

.marquee__group span {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    font-family: var(--f-display);
    font-size: clamp(1.05rem, 2.2vw, 1.5rem);
    color: var(--ink);
    white-space: nowrap
}

.marquee__group span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c1);
    flex: none
}

.marquee__group span:nth-child(4n+2)::before {
    background: var(--c2)
}

.marquee__group span:nth-child(4n+3)::before {
    background: var(--c3)
}

.marquee__group span:nth-child(4n+4)::before {
    background: var(--c4)
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.grid-3 {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr
}

@media (min-width:560px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1180px) {
    .grid-3 {
        grid-template-columns: repeat(4, 1fr)
    }
}

.card {
    position: relative;
    padding: clamp(1.9rem, 3vw, 2.6rem);
    border-radius: var(--r-m);
    background: var(--card);
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: var(--shadow-s);
    transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}

.card {
    --tone: var(--c1);
    --tone-rgb: var(--c1-rgb)
}

.card[data-tone="2"] {
    --tone: var(--c2);
    --tone-rgb: var(--c2-rgb)
}

.card[data-tone="3"] {
    --tone: var(--c3);
    --tone-rgb: var(--c3-rgb)
}

.card[data-tone="4"] {
    --tone: var(--c4);
    --tone-rgb: var(--c4-rgb)
}

.card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--tone);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .55s var(--ease)
}

.card:hover::after {
    transform: scaleX(1)
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .45s;
    pointer-events: none;
    background: radial-gradient(22rem 18rem at var(--mx, 50%) var(--my, 0%), rgba(var(--tone-rgb), .13), transparent 65%);
}

.card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--tone-rgb), .4);
    box-shadow: var(--shadow-m)
}

.card:hover::before {
    opacity: 1
}

.card__icon {
    width: 3.2rem;
    height: 3.2rem;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(var(--tone-rgb), .12);
    border: 1px solid rgba(var(--tone-rgb), .28);
    color: var(--tone);
    margin-bottom: 1.6rem;
    transition: transform .5s var(--ease), background .4s, color .4s;
}

.card:hover .card__icon {
    transform: translateY(-3px) rotate(-6deg);
    background: var(--tone);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(var(--tone-rgb), .9)
}

.card__icon svg {
    width: 1.45rem;
    height: 1.45rem
}

.card h3 {
    margin-bottom: .75rem
}

.card p {
    color: var(--ink-2);
    font-size: .94rem
}

.card ul {
    margin: 1.3rem 0 0;
    padding: 1.3rem 0 0;
    list-style: none;
    display: grid;
    gap: .5rem;
    border-top: 1px solid var(--line-soft)
}

.card li {
    font-size: .85rem;
    color: var(--muted);
    display: flex;
    gap: .6rem;
    align-items: baseline
}

.card li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tone);
    flex: none;
    transform: translateY(-2px)
}

/* ============================================================
   ANTES / DESPUES
   ============================================================ */
.ba {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--r-l);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-l);
    touch-action: pan-y;
    cursor: ew-resize;
    user-select: none;
    background: var(--paper-2);
}

@media (max-width:640px) {
    .ba {
        aspect-ratio: 4/5
    }
}

.ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ba__top {
    clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0)
}

.ba__tag {
    position: absolute;
    bottom: 1.1rem;
    z-index: 3;
    padding: .45rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(252, 251, 249, .92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
}

.ba__tag--l {
    left: 1.1rem
}

.ba__tag--r {
    right: 1.1rem;
    background: var(--grad);
    color: #fff;
    border-color: transparent
}

.ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 50%);
    z-index: 4;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 12px rgba(10, 24, 35, .4);
    transform: translateX(-1px);
    pointer-events: none
}

.ba__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--accent);
    box-shadow: 0 6px 22px rgba(10, 24, 35, .28);
}

.ba__knob svg {
    width: 1.3rem;
    height: 1.3rem
}

.ba input[type=range] {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    opacity: 0;
    height: 100%;
    margin: 0;
    cursor: ew-resize
}

.ba__hint {
    margin-top: 1.2rem;
    font-size: .78rem;
    color: var(--muted);
    text-align: center;
    letter-spacing: .08em
}

/* ============================================================
   PROCESO
   ============================================================ */
.steps {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    overflow: hidden;
    grid-template-columns: 1fr
}

@media (min-width:560px) {
    .steps {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1100px) {
    .steps {
        grid-template-columns: repeat(4, 1fr)
    }
}

.step {
    background: var(--card);
    padding: clamp(1.8rem, 3vw, 2.4rem);
    transition: background .4s;
    position: relative
}

.step:hover {
    background: var(--paper-2)
}

.step b {
    font-family: var(--f-display);
    font-size: 2.7rem;
    color: transparent;
    line-height: 1;
    display: block;
    margin-bottom: 1.2rem;
    -webkit-text-stroke: 1.5px var(--c1);
    transition: color .5s var(--ease)
}

.step:nth-child(2) b {
    -webkit-text-stroke-color: var(--c2)
}

.step:nth-child(3) b {
    -webkit-text-stroke-color: var(--c3)
}

.step:nth-child(4) b {
    -webkit-text-stroke-color: var(--c4)
}

.step:hover b {
    color: rgba(var(--c1-rgb), .12)
}

.step:nth-child(2):hover b {
    color: rgba(var(--c2-rgb), .14)
}

.step:nth-child(3):hover b {
    color: rgba(var(--c3-rgb), .14)
}

.step:nth-child(4):hover b {
    color: rgba(var(--c4-rgb), .16)
}

.step h3 {
    font-size: 1.05rem;
    margin-bottom: .55rem
}

.step p {
    font-size: .87rem;
    color: var(--muted)
}

/* ============================================================
   MATERIALES
   ============================================================ */
.split {
    display: grid;
    gap: clamp(2.5rem, 5vw, 5rem);
    grid-template-columns: 1fr;
    align-items: center
}

@media (min-width:900px) {
    .split {
        grid-template-columns: 1fr 1fr
    }
}

.specs {
    display: grid;
    margin-top: 2.4rem
}

.spec {
    display: flex;
    gap: 1.15rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--line);
    transition: padding-left .4s var(--ease)
}

.spec:last-child {
    border-bottom: 1px solid var(--line)
}

.spec:hover {
    padding-left: .7rem
}

.spec svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--c1);
    flex: none;
    margin-top: .3rem
}

.spec:nth-child(2) svg {
    color: var(--c2)
}

.spec:nth-child(3) svg {
    color: var(--c3)
}

.spec:nth-child(4) svg {
    color: var(--c4)
}

.spec b {
    display: block;
    font-weight: 600;
    font-size: .97rem;
    color: var(--ink)
}

.spec p {
    font-size: .86rem;
    color: var(--muted)
}

.frame {
    position: relative;
    border-radius: var(--r-l);
    overflow: hidden;
    aspect-ratio: 4/5;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-l);
    background: var(--paper-2)
}

.frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform
}

/* ============================================================
   GALERIA + FILTROS + LIGHTBOX
   ============================================================ */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2.2rem
}

.filter {
    padding: .6rem 1.2rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--card);
    transition: .35s var(--ease);
}

.filter:hover {
    color: var(--accent);
    border-color: var(--accent)
}

.filter[aria-pressed="true"] {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px -10px rgba(var(--c1-rgb), .85)
}

.gallery {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr
}

@media (min-width:520px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1000px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr)
    }
}

.shot {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-m);
    aspect-ratio: 1;
    margin: 0;
    border: 1px solid var(--line);
    background: var(--paper-2);
    cursor: pointer;
    box-shadow: var(--shadow-s);
    transition: opacity .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}

.shot.hide {
    display: none
}

.shot.enter {
    opacity: 0;
    transform: scale(.94)
}

.shot:hover {
    box-shadow: var(--shadow-m);
    transform: translateY(-4px)
}

.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease)
}

.shot:hover img {
    transform: scale(1.07)
}

.shot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 1.1rem 1rem;
    background: linear-gradient(transparent, rgba(10, 24, 35, .86));
    color: #fff;
    font-size: .73rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    transform: translateY(8px);
    opacity: 0;
    transition: .45s var(--ease);
}

.shot:hover figcaption {
    transform: none;
    opacity: 1
}

.shot__zoom {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    color: var(--accent);
    opacity: 0;
    transform: scale(.7);
    transition: .4s var(--ease);
}

.shot:hover .shot__zoom {
    opacity: 1;
    transform: none
}

.shot__zoom svg {
    width: .95rem;
    height: .95rem
}

.ph {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
    background: var(--paper-2);
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase
}

.lb {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(10, 24, 35, .96);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s
}

.lb.open {
    opacity: 1;
    visibility: visible
}

.lb figure {
    margin: 0;
    max-width: min(1100px, 92vw);
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 1.1rem
}

.lb img {
    max-height: 78svh;
    width: auto;
    border-radius: var(--r-m);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
    transform: scale(.96);
    transition: transform .5s var(--ease)
}

.lb.open img {
    transform: none
}

.lb figcaption {
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7)
}

.lb__x,
.lb__nav {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: .3s var(--ease)
}

.lb__x:hover,
.lb__nav:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

.lb__x {
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem)
}

.lb__nav {
    top: 50%;
    transform: translateY(-50%)
}

.lb__nav.prev {
    left: clamp(.6rem, 2vw, 2rem)
}

.lb__nav.next {
    right: clamp(.6rem, 2vw, 2rem)
}

.lb__nav:hover {
    transform: translateY(-50%) scale(1.06)
}

.lb svg {
    width: 1.2rem;
    height: 1.2rem
}

.lb__count {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: .73rem;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .55)
}

/* ============================================================
   BANDA DE VIDEO (bloque oscuro, da respiro al blanco)
   ============================================================ */
.videoband {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(26rem, 60vh, 38rem);
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--section) var(--pad);
    background: var(--ink)
}

.videoband .vbg {
    background: linear-gradient(160deg, #122636, #0A1823)
}

.videoband .vbg::after {
    background: linear-gradient(180deg, var(--ink), rgba(10, 24, 35, .72) 30%, rgba(10, 24, 35, .72) 70%, var(--ink)),
        radial-gradient(50% 60% at 20% 30%, rgba(var(--c2-rgb), .28), transparent 65%),
        radial-gradient(45% 55% at 85% 75%, rgba(var(--c3-rgb), .22), transparent 65%),
        rgba(10, 24, 35, .25)
}

.videoband .grain {
    opacity: .4
}

.videoband h2 {
    max-width: 20ch;
    margin-inline: auto;
    color: #fff
}

.videoband h2 em {
    background: none;
    color: var(--c2);
    -webkit-text-fill-color: var(--c2)
}

.videoband .eyebrow {
    color: var(--c2)
}

.videoband .eyebrow::before {
    background: var(--c2)
}

.videoband .lede {
    margin-inline: auto;
    color: rgba(255, 255, 255, .72)
}

.play {
    margin-top: 2.3rem;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
    transition: .4s var(--ease)
}

.play:hover {
    background: #fff;
    color: var(--ink);
    transform: scale(1.07);
    border-color: #fff
}

.play svg {
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 3px
}

/* ============================================================
   TESTIMONIOS — banda oscura con video de fondo
   ▸ El video va en VIDEO/clientes.mp4 (opcional; hay respaldo).
   Las tarjetas son de "vidrio" y desfilan solas de forma continua.
   ============================================================ */
.quotes-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: var(--section) 0;
    background: var(--ink);
}

.quotes-band .vbg {
    background: linear-gradient(160deg, #122636, #0A1823)
}

.quotes-band .vbg::after {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(10, 24, 35, .68) 22%, rgba(10, 24, 35, .68) 78%, var(--ink) 100%),
        radial-gradient(50% 60% at 15% 25%, rgba(var(--c2-rgb), .25), transparent 65%),
        radial-gradient(45% 55% at 88% 80%, rgba(var(--c3-rgb), .20), transparent 65%),
        rgba(10, 24, 35, .30);
}

.quotes-band .grain {
    opacity: .4
}

.head--light {
    margin-bottom: clamp(2.2rem, 4vw, 3.2rem)
}

.head--light h2 {
    color: #fff
}

.head--light h2 em {
    background: none;
    -webkit-text-fill-color: var(--c2);
    color: var(--c2)
}

.head--light .eyebrow {
    color: var(--c2)
}

.head--light .eyebrow::before {
    background: var(--c2)
}

.carousel {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    padding: 0 var(--pad) 1.4rem;
    scrollbar-width: none;
    cursor: grab;
    /* difumina las tarjetas en los bordes de la pantalla */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.carousel::-webkit-scrollbar {
    display: none
}

.carousel.dragging {
    cursor: grabbing
}

.carousel.dragging * {
    pointer-events: none
}

.quote {
    flex: 0 0 min(86vw, 24rem);
    padding: clamp(1.9rem, 3vw, 2.5rem);
    border-radius: var(--r-m);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    color: #fff;
    transition: transform .5s var(--ease), background .4s, border-color .4s;
}

.quote:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .3)
}

.quote::before {
    content: "\201C";
    position: absolute;
    top: .2rem;
    right: 1.4rem;
    font-family: var(--f-display);
    font-size: 5.5rem;
    color: rgba(255, 255, 255, .14);
    line-height: 1
}

.stars {
    display: flex;
    gap: .2rem;
    color: var(--c4);
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4))
}

.stars svg {
    width: .95rem;
    height: .95rem
}

.quote p {
    font-size: .97rem;
    color: rgba(255, 255, 255, .92)
}

.quote cite {
    display: block;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-style: normal;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55)
}

.quote cite b {
    display: block;
    color: #fff;
    letter-spacing: .01em;
    text-transform: none;
    font-family: var(--f-display);
    font-size: 1.08rem;
    font-weight: 400;
    margin-bottom: .2rem
}

.car-ctrl {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-top: 1.6rem
}

.car-ctrl button {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transition: .3s var(--ease)
}

.car-ctrl button:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

.car-ctrl svg {
    width: 1.05rem;
    height: 1.05rem
}

.car-ctrl .hint {
    margin-left: .6rem;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45)
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
    max-width: 52rem;
    margin-inline: auto
}

.faq details {
    border-bottom: 1px solid var(--line)
}

.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 1.5rem 3rem 1.5rem 0;
    position: relative;
    font-family: var(--f-display);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--ink);
    transition: color .3s
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary::after {
    content: "";
    position: absolute;
    right: .4rem;
    top: 50%;
    width: 11px;
    height: 11px;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .35s var(--ease)
}

.faq summary:hover,
.faq details[open] summary {
    color: var(--accent)
}

.faq details[open] summary::after {
    transform: translateY(-20%) rotate(-135deg)
}

.faq .a {
    padding: 0 2rem 1.7rem 0;
    color: var(--ink-2);
    font-size: .94rem
}

/* ============================================================
   ASOCIACION (miembros de textiles.org)
   ============================================================ */
.member {
    padding-block: clamp(2rem, 4vw, 3.25rem);
    position: relative
}

.member__card {
    max-width: 46rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 1.75rem);
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-m)
}

.member__icon {
    width: 2.8rem;
    height: 2.8rem;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-wash);
    color: var(--accent);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    animation: memberPulse 3.2s ease-out infinite
}

.member__icon svg {
    width: 1.25rem;
    height: 1.25rem
}

.member__card:hover .member__icon {
    transform: scale(1.08) rotate(-6deg);
    animation-play-state: paused
}

@keyframes memberPulse {
    0%, 60%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35)
    }
    30% {
        box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0)
    }
}

.member .eyebrow {
    margin-bottom: .4rem;
    font-size: .68rem
}

.member h3 {
    font-size: clamp(1.05rem, 1.8vw, 1.3rem)
}

.member p {
    margin-top: .35rem;
    font-size: .84rem;
    max-width: 42ch
}

.member__btn {
    padding-block: .6rem;
    font-size: .82rem
}

@media (max-width:760px) {
    .member__card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center
    }

    .member__icon {
        width: 2.3rem;
        height: 2.3rem
    }

    .member__icon svg {
        width: 1.05rem;
        height: 1.05rem
    }

    .member .eyebrow {
        justify-content: center
    }

    .member p {
        margin-inline: auto
    }
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-l);
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    background: linear-gradient(145deg, #071B2C 0%, #0A2E5C 52%, #06485E 100%);
    border: 0;
    text-align: center;
}

.cta::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto;
    height: 90%;
    background: radial-gradient(45% 60% at 28% 0%, rgba(var(--c2-rgb), .42), transparent 68%), radial-gradient(40% 55% at 82% 10%, rgba(var(--c3-rgb), .28), transparent 68%)
}

.cta .btn:not(.btn--ghost) {
    background: #fff;
    background-image: none;
    color: var(--ink);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6)
}

.cta .btn:not(.btn--ghost):hover {
    background: var(--c2);
    color: #04252B
}

.cta>* {
    position: relative
}

.cta .eyebrow {
    color: var(--c2)
}

.cta .eyebrow::before {
    background: var(--c2)
}

.cta h2 {
    color: #fff
}

.cta h2 em {
    color: var(--c2)
}

.cta .lede {
    margin-inline: auto;
    color: rgba(255, 255, 255, .72)
}

.cta .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .3)
}

.cta .btn--ghost:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    margin-top: 2.5rem
}

.contact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 1.7rem;
    justify-content: center;
    margin-top: 2.8rem;
    padding-top: 2.1rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .85rem;
    color: rgba(255, 255, 255, .72)
}

.contact-line a,
.contact-line span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    transition: color .3s
}

.contact-line a:hover {
    color: #fff
}

.contact-line svg {
    width: 1rem;
    height: 1rem;
    color: var(--c2)
}

/* ============================================================
   FOOTER + WHATSAPP
   ============================================================ */
footer {
    border-top: 1px solid var(--line);
    padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.2rem, 4vw, 3rem);
    background: var(--paper-2);
    position: relative;
    overflow: hidden
}

footer::before {
    content: "";
    position: absolute;
    inset: auto 0 -60% 0;
    height: 120%;
    pointer-events: none;
    background: radial-gradient(40% 60% at 50% 100%, rgba(var(--c2-rgb), .16), transparent 70%);
}

.foot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem
}

.foot p {
    font-size: .78rem;
    color: var(--muted);
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    width: min(100%, 32rem)
}

.foot__logo {
    align-items: center;
    text-align: center;
    transition: transform .5s var(--ease)
}

.foot__logo:hover {
    transform: translateY(-3px) scale(1.03)
}

.foot__logo img {
    height: 2.5rem
}

.foot__logo small {
    letter-spacing: .36em;
    margin-top: .6rem
}

/* el destello tambien recorre el logo del pie */
.foot__logo .logo__img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateX(-130%);
    background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%);
    animation: shine 8s var(--ease) 4s infinite;
}

.foot .social a {
    width: 2.6rem;
    height: 2.6rem
}

.foot__mail {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--ink);
    padding: .55rem 1.15rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--card);
    transition: .35s var(--ease);
}

.foot__mail svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--c1)
}

.foot__mail:hover {
    border-color: var(--c1);
    color: var(--c1);
    box-shadow: 0 10px 24px -12px rgba(var(--c1-rgb), .7);
    transform: translateY(-2px)
}

@media (max-width:420px) {
    .foot__mail {
        font-size: .8rem;
        padding: .5rem .9rem
    }
}

.wa {
    position: fixed;
    right: clamp(1rem, 3vw, 2.2rem);
    bottom: clamp(1rem, 3vw, 2.2rem);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 4.4rem;
    padding: 0 1.2rem;
    border-radius: var(--r-pill);
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .85), 0 2px 6px rgba(10, 24, 35, .18);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}

.wa:hover {
    transform: scale(1.05) translateY(-3px);
    background: #1FBE5B;
    box-shadow: 0 18px 40px -10px rgba(37, 211, 102, .95)
}

.wa:active {
    transform: scale(.98)
}

.wa svg {
    width: 2rem;
    height: 2rem;
    flex: none;
    animation: waNudge 5s ease-in-out infinite
}

@keyframes waNudge {

    0%,
    86%,
    100% {
        transform: rotate(0) scale(1)
    }

    89% {
        transform: rotate(-14deg) scale(1.08)
    }

    92% {
        transform: rotate(12deg) scale(1.08)
    }

    95% {
        transform: rotate(-7deg) scale(1.04)
    }
}

.wa__txt {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .55s var(--ease), opacity .35s var(--ease);
}

.wa:hover .wa__txt,
.wa:focus-visible .wa__txt {
    max-width: 12rem;
    opacity: 1
}

.wa::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-pill);
    border: 2px solid #25D366;
    animation: ring 2.8s ease-out infinite;
    pointer-events: none;
}

@keyframes ring {
    0% {
        transform: scale(1);
        opacity: .65
    }

    100% {
        transform: scale(1.35);
        opacity: 0
    }
}

@media (max-width:620px) {
    .wa {
        height: 4rem;
        padding: 0 1.05rem
    }

    .wa svg {
        width: 1.85rem;
        height: 1.85rem
    }
}

/* ============================================================
   RESPONSIVE + PREFERENCIAS
   ============================================================ */
/* --- Barra superior ---
   Debajo de 1360px se esconden los iconos sociales (el pie los tiene).
   Debajo de 1180px se pasa al menu hamburguesa: con seis enlaces, el
   selector de idioma y el boton, antes de eso no cabe todo. */
@media (max-width:1360px) {
    .nav .social {
        display: none
    }
}

@media (max-width:1180px) {
    .nav-links {
        display: none
    }

    .burger {
        display: grid
    }

    .nav .lang {
        display: none
    }

    .lang--drawer {
        display: inline-flex
    }
}

@media (max-width:620px) {
    .nav .btn {
        display: none
    }

    .logo small {
        font-size: .5rem;
        letter-spacing: .24em
    }

    .hero {
        padding-bottom: 6rem
    }

    .trust {
        gap: 1.3rem 1.7rem
    }

    .trust div {
        min-width: 6.5rem
    }

    .foot {
        justify-content: center;
        text-align: center
    }

    .lb__nav {
        width: 2.6rem;
        height: 2.6rem
    }
}

/* --- Celulares y tabletas: el desenfoque de fondo (backdrop-filter) es de
       lo mas pesado para la GPU, sobre todo encima de videos y tarjetas que
       se mueven. Se cambia por fondos casi solidos que se ven igual. --- */
@media (max-width:900px),
(hover:none) {
    .quote {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255, 255, 255, .12)
    }

    .badge,
    .hero__tag,
    .ba__tag,
    .shot__zoom,
    .play {
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }

    .nav.is-stuck {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(252, 251, 249, .97)
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    html {
        scroll-behavior: auto
    }

    .reveal,
    .hero__fade {
        opacity: 1;
        transform: none
    }

    .mask {
        clip-path: none
    }

    .w>span {
        transform: none
    }

    /* La marquesina sigue andando, mas lenta: es un desplazamiento suave,
     no un efecto brusco. Todo lo demas si se detiene. */
    .marquee__track {
        animation-duration: 55s !important
    }

    .nav .logo,
    .nav-links a,
    .nav .social a,
    .nav .btn,
    .nav .burger {
        animation: none
    }

    .nav .logo__img::after {
        display: none
    }

    .nav-pill {
        display: none
    }

    .nav-links a:hover .roll span {
        transform: none
    }
}

/* --- Pantallas muy grandes: mas ancho util, para que el contenido no
       quede como una columnita perdida en el centro --- */
@media (min-width:1600px) {
    :root {
        --maxw: 1380px
    }
}

@media (min-width:2000px) {
    :root {
        --maxw: 1500px
    }

    .hero h1 {
        font-size: 5.4rem
    }
}

/* --- Celular en horizontal: el hero no puede pedir toda la altura --- */
@media (max-height:560px) and (orientation:landscape) {
    .hero {
        min-height: auto;
        padding-top: 6.5rem;
        padding-bottom: 2.5rem
    }

    .drawer {
        justify-content: flex-start;
        padding-top: 5rem;
        overflow-y: auto
    }

    .drawer a {
        font-size: 1.4rem;
        padding-block: .2rem
    }

    .videoband {
        min-height: auto
    }
}

/* --- Pantallas muy angostas (320 px) --- */
@media (max-width:360px) {
    .hero h1 {
        font-size: 2.1rem
    }

    .btn {
        padding: .9em 1.4em;
        font-size: .85rem
    }

    .filter {
        padding: .5rem .9rem;
        font-size: .7rem
    }

    .wa {
        height: 3.6rem;
        padding: 0 .95rem
    }

    .wa svg {
        width: 1.7rem;
        height: 1.7rem
    }

    .trust div {
        min-width: 5.5rem
    }

    .foot__logo img {
        height: 2rem
    }
}

@media print {

    .nav,
    .wa,
    .drawer,
    .lb,
    .progress {
        display: none
    }
}