/* =====================================================
   CCONOR Soluciones Tecnológicas
   Hoja de estilos principal
   - Tokens de color por tema (claro #FFFFFF / oscuro #000000)
   - --brand (#004A99) es fijo; --brand-ink es la versión legible como texto en cada tema
   - Escala de z-index: header 30 · botón WhatsApp 40 · skip link 50
   ===================================================== */

/* Jost variable (eje wght), alternativa libre a Futura elegida por el cliente; subconjunto latino.
   Licencia: assets/fonts/Jost-OFL.txt */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../assets/fonts/jost-latin-var.woff2") format("woff2");
}

:root {
    --bg: #FFFFFF;
    --fg: #0A0A0A;
    --muted: #555A62;
    --line: #E3E6EA;
    --line-strong: #C9CED5;
    --surface: #F3F5F8;
    --brand: #004A99;
    --brand-hover: #003B7A;
    --brand-ink: #004A99;
    --on-brand: #FFFFFF;
    --orn-opacity: 0.12;

    --font: "Jost", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;

    --container: 1240px;
    --gutter: clamp(16px, 4vw, 40px);
    --radius-panel: 20px;
    --radius-pill: 999px;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    --header-h: 72px;
    color-scheme: light;
}

/* Tema oscuro: selector manual (data-theme) */
:root[data-theme="dark"] {
    --bg: #000000;
    --fg: #F4F5F7;
    --muted: #A4A9B1;
    --line: #24272C;
    --line-strong: #3A3E45;
    --surface: #0E1014;
    --brand-hover: #0A5BB5;
    --brand-ink: #4D94E6;
    --orn-opacity: 0.22;
    color-scheme: dark;
}

/* Respaldo si el script de tema no se ejecuta: respeta la preferencia del sistema */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #000000;
        --fg: #F4F5F7;
        --muted: #A4A9B1;
        --line: #24272C;
        --line-strong: #3A3E45;
        --surface: #0E1014;
        --brand-hover: #0A5BB5;
        --brand-ink: #4D94E6;
        --orn-opacity: 0.22;
        color-scheme: dark;
    }
}

/* ================= Base ================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-optical-sizing: auto;
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, dl, dd, figure, address {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

address {
    font-style: normal;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

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

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Texto solo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: currentColor;
}

.icon--sm {
    width: 16px;
    height: 16px;
}

.skip-link {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 50;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
}

.skip-link:focus-visible {
    transform: none;
}

/* ================= Vistas ================= */
.js .view {
    display: none;
}

.js[data-view="inicio"] #view-inicio,
.js[data-view="servicios"] #view-servicios,
.js[data-view="nosotros"] #view-nosotros,
.js[data-view="contacto"] #view-contacto,
.js[data-view="tienda"] #view-tienda {
    display: block;
}

/* Movimiento reducido: sin hoja, la vista nueva solo se funde */
.view.is-entering {
    animation: vt-fade-in 160ms ease;
}

/* ---------- Hoja que barre entre pestañas ----------
   Capa de color sólido (negra de día, blanca de noche) que cubre el contenido bajo el header,
   deja cambiar la vista y sigue su camino. main.js la anima con WAAPI (solo transform).
   Mientras está activa captura los clics para que nadie toque contenido oculto; el menú queda encima. */
:root {
    --sheet: #000000;
    --sheet-edge: rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] {
    --sheet: #FFFFFF;
    --sheet-edge: rgba(255, 255, 255, 0.18);
}

.page-sheet {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    background: var(--sheet);
    transform: translateX(100%);
    visibility: hidden;
}

.page-sheet.is-active {
    visibility: visible;
}

/* Sombra suave en el borde que avanza, para que se lea como una hoja y no como un bloque */
.page-sheet[data-dir="forward"] {
    box-shadow: -24px 0 48px var(--sheet-edge);
}

.page-sheet[data-dir="back"] {
    box-shadow: 24px 0 48px var(--sheet-edge);
}

/* ---------- View Transitions: solo para el cambio de tema ----------
   El círculo lo anima main.js sobre ::view-transition-new(root). */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html[data-vt="theme-fade"]::view-transition-new(root) {
    animation: vt-fade-in 160ms ease both;
}

@keyframes vt-fade-in {
    from {
        opacity: 0;
    }
}

.view-heading:focus {
    outline: none;
}

.view-heading:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 6px;
}

/* ================= Botones ================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn--primary {
    background: var(--brand);
    color: var(--on-brand);
}

.btn--ghost {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--fg);
}

.btn.is-disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn.is-disabled:active,
.btn[aria-disabled="true"]:active {
    transform: none;
}

@media (hover: hover) {
    .btn--primary:not([aria-disabled="true"]):hover {
        background: var(--brand-hover);
    }

    .btn--ghost:hover {
        border-color: var(--fg);
    }
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 160ms var(--ease-out), border-color 160ms ease;
}

.icon-btn:active {
    transform: scale(0.95);
}

@media (hover: hover) {
    .icon-btn:hover {
        border-color: var(--line-strong);
    }
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-ink);
    font-weight: 600;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Iconos dentro de botones y enlaces: responden al hover solo con puntero (el toque dispara hovers falsos) */
.btn .icon,
.wa-float .icon,
.text-link .icon {
    transition: transform 200ms var(--ease-out);
}

.text-link .icon {
    transition-duration: 160ms;
}

@media (hover: hover) and (pointer: fine) {
    .btn--wa:hover .icon,
    .wa-float:hover .icon {
        transform: rotate(-12deg) scale(1.08);
    }

    .text-link:hover .icon {
        transform: translate(2px, -2px);
    }
}

/* ================= Header ================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.nav {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--header-h);
}

.nav-brand {
    flex: none;
    display: block;
    border-radius: 6px;
}

.nav-logo {
    width: auto;
    height: 40px;
}

.nav-logo--dark,
[data-theme="dark"] .nav-logo--light {
    display: none;
}

[data-theme="dark"] .nav-logo--dark {
    display: block;
}

.nav-panel {
    position: relative;
    margin-left: auto;
}

/* Línea del menú: un solo elemento de 1px que main.js coloca con translateX + scaleX
   bajo la pestaña activa, para deslizarse sin animar el ancho real */
.nav-indicator {
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 1px;
    height: 2px;
    background: var(--brand-ink);
    transform-origin: left;
    opacity: 0;
    pointer-events: none;
}

.nav-indicator.is-animated {
    transition: transform 240ms var(--ease-in-out), opacity 160ms ease;
}

@media (min-width: 900px) {
    .js .nav-link::after {
        display: none;
    }
}

.nav-links {
    display: flex;
    gap: 4px;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 160ms ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms var(--ease-out);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
    color: var(--fg);
}

/* Tienda abre la tienda en línea en otra pestaña: la flecha lo anticipa */
.nav-link--store {
    gap: 4px;
}

.nav-external {
    flex: none;
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-actions {
    display: flex;
    gap: 8px;
}

/* Sol y luna apilados en la misma celda: el cambio gira y funde en lugar de saltar.
   Transición (no keyframes) para que un doble clic la redirija sin reiniciarla. */
.theme-toggle .icon {
    grid-area: 1 / 1;
    transition: opacity 200ms var(--ease-out), transform 300ms var(--ease-out);
}

.theme-toggle .icon--sun,
[data-theme="dark"] .theme-toggle .icon--moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

[data-theme="dark"] .theme-toggle .icon--sun {
    opacity: 1;
    transform: none;
}

.menu-toggle {
    display: none;
}

.menu-toggle .icon--close,
.menu-toggle[aria-expanded="true"] .icon--open {
    display: none;
}

.menu-toggle[aria-expanded="true"] .icon--close {
    display: block;
}

@media (max-width: 899px) {
    .nav {
        justify-content: space-between;
        gap: 16px;
    }

    .nav-logo {
        height: 34px;
    }

    .js .menu-toggle {
        display: inline-grid;
    }

    .js .nav-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 8px var(--gutter) 20px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        opacity: 0;
        transform: translateY(-6px);
        visibility: hidden;
        transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
    }

    .js .nav-panel.is-open {
        opacity: 1;
        transform: none;
        visibility: visible;
        transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
    }

    .js .nav-links {
        flex-direction: column;
        gap: 0;
    }

    .js .nav-link {
        width: 100%;
        min-height: 52px;
        padding: 0;
        font-size: 1.125rem;
        border-bottom: 1px solid var(--line);
    }

    .js .nav-link::after {
        left: 0;
        right: auto;
        width: 24px;
        bottom: 10px;
    }

    html:not(.js) .nav {
        flex-wrap: wrap;
        height: auto;
        padding-block: 12px;
    }

    html:not(.js) .nav-links {
        flex-wrap: wrap;
    }
}

/* ================= Inicio: hero ================= */
.hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: 32px;
    padding-top: clamp(40px, 7vw, 88px);
    padding-bottom: clamp(48px, 7vw, 88px);
}

.hero-copy {
    grid-column: 1 / span 8;
}

.hero-title {
    max-width: 21ch;
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.625rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.hero-lede {
    max-width: 44ch;
    margin-top: 24px;
    color: var(--muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.hero-mark {
    grid-column: 9 / span 4;
    justify-self: end;
    width: 100%;
    max-width: 380px;
}

.mark {
    width: 100%;
    height: auto;
    overflow: visible;
}

.mark-arc {
    fill: none;
    stroke-linecap: butt;
}

.mark-arc--blue { stroke: #004A99; }
.mark-arc--sky { stroke: #38ADE3; }
.mark-arc--green { stroke: #2EA866; }
.mark-arc--teal { stroke: #00A19A; }

/* Mitad derecha de la C: azul en el logo a color, blanca en la versión oficial para fondo oscuro */
.mark-arc--c-right { display: none; }

[data-theme="dark"] .mark-arc--c-right {
    display: inline;
    stroke: #FFFFFF;
}

/* Animación de entrada: los arcos se trazan del centro hacia afuera, como una señal */
.mark.is-drawing .mark-arc {
    stroke-dasharray: 1;
    animation: arc-draw 900ms var(--ease-out) both;
}

.mark.is-drawing .mark-ring-1 { animation-delay: 110ms; }
.mark.is-drawing .mark-ring-2 { animation-delay: 220ms; }
.mark.is-drawing .mark-ring-3 { animation-delay: 330ms; }

@keyframes arc-draw {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 899px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .hero-copy {
        grid-column: 1 / -1;
    }

    .hero-mark {
        grid-row: 1;
        grid-column: 1 / -1;
        justify-self: start;
        max-width: 132px;
    }
}

/* ================= Inicio: partners =================
   Franja sobria entre el hero y la barra de marcas: logo monocromo + sello en el color de marca.
   El sello es el único acento de color, para que "partner verificado" se lea de un vistazo. */
/* Centrada en todos los tamaños: la frase arriba y los logos en una fila debajo */
.certs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 26px;
    padding-bottom: 26px;
    text-align: center;
    /* Línea superior alineada con el contenido, no con el borde del contenedor */
    background-image: linear-gradient(var(--line), var(--line));
    background-size: calc(100% - 2 * var(--gutter)) 1px;
    background-position: center top;
    background-repeat: no-repeat;
}

.certs-title {
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.certs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 12px;
}

.cert {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 28px;
    color: var(--fg);
}

.cert + .cert {
    border-left: 1px solid var(--line);
}

.cert-logo--fortinet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.cert-mark {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Logo entregado en imagen: monocromo con el color del texto de cada tema */
.cert-logo--img {
    width: auto;
    height: 20px;
    filter: brightness(0);
}

[data-theme="dark"] .cert-logo--img {
    filter: brightness(0) invert(1);
}

/* Kenwood: logotipo de texto (proporción 6.3:1) en monocromo, a la altura óptica de Hikvision */
.cert-logo--kenwood {
    width: 114px;
    height: 18px;
    fill: currentColor;
}

.cert-seal {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--brand-ink);
    fill: currentColor;
}

@media (max-width: 719px) {
    .cert {
        padding: 6px 14px;
    }

    .cert + .cert {
        border-left: 0;
    }
}

/* ================= Inicio: barra de marcas ================= */
.brands {
    --origin: 50%;
    padding: 40px 0 48px;
    background: var(--surface);
    color: var(--fg);
}

/* La barra nace desde la posición horizontal del símbolo (--origin la calcula main.js) */
.brands.is-revealing {
    animation: band-reveal 800ms var(--ease-in-out) 420ms both;
}

@keyframes band-reveal {
    from {
        clip-path: inset(0 calc(100% - var(--origin)) 0 var(--origin));
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

.brands-title {
    margin-bottom: 24px;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Logo wall: mosaicos blancos con cada logo en sus colores. Los logos del cliente
   traen fondo blanco, por eso el mosaico es blanco también en modo oscuro.
   Flex con columnas fijas (--cols) para centrar la última fila incompleta */
.brands-list {
    --cols: 3;
    --gap: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}

.brand {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 68px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #FFFFFF;
    color: #1B1F24;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
}

[data-theme="dark"] .brand {
    border-color: transparent;
}

/* Logos en imagen: tamaño natural (width/height del HTML) para no ampliarlos,
   nunca más grandes que el mosaico */
.brand-img {
    max-width: 100%;
    max-height: 48px;
    height: auto;
    object-fit: contain;
}

.brand-mark {
    flex: none;
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Marcas con icono vectorial + nombre: en su color de marca (Simple Icons) */
.brand--fortinet { color: #EE3124; }
.brand--mikrotik { color: #293239; }
.brand--westerndigital { color: #995DFF; }
.brand--seagate { color: #6EBE49; }
.brand--vmware { color: #607078; }
.brand--veeam { color: #00B336; }

@media (min-width: 560px) {
    .brands-list {
        --cols: 4;
        --gap: 10px;
    }
}

@media (min-width: 900px) {
    .brands-list {
        --cols: 6;
        --gap: 12px;
    }

    .brand {
        height: 84px;
        font-size: 1.0625rem;
    }

    .brand-img {
        max-height: 60px;
    }
}

@media (min-width: 1080px) {
    .brands-list {
        --cols: 7;
    }
}

/* ================= Inicio: métricas ================= */
.metrics {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(64px, 8vw, 112px);
}

.metrics-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 24px;
    border-left: 1px solid var(--line);
}

.metric:first-child {
    padding-left: 0;
    border-left: 0;
}

.metric-value {
    font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.metric-label {
    color: var(--muted);
    font-size: 1.0625rem;
}

@media (max-width: 639px) {
    .metrics-list {
        grid-template-columns: 1fr;
    }

    .metric,
    .metric:first-child {
        padding: 20px 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

/* ================= Secciones internas ================= */
.section {
    padding-top: clamp(48px, 7vw, 104px);
    padding-bottom: clamp(72px, 9vw, 128px);
}

.section-head {
    max-width: 60ch;
    margin-bottom: clamp(36px, 5vw, 64px);
}

.section-title {
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.section-lede {
    max-width: 52ch;
    margin-top: 18px;
    color: var(--muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    text-wrap: pretty;
}

/* Ornamento compartido: arcos del símbolo CCONOR */
.orn {
    position: absolute;
    color: var(--brand-ink);
    opacity: var(--orn-opacity);
    pointer-events: none;
}

/* ================= Servicios ================= */
.services {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.service {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--bg);
}

.service--wide {
    grid-column: span 4;
    flex-direction: row;
}

.service--narrow {
    grid-column: span 2;
}

.service--half {
    grid-column: span 3;
    flex-direction: row;
}

.service-media {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--surface);
}

.service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service--wide .service-media,
.service--half .service-media {
    flex: 0 0 46%;
    aspect-ratio: auto;
    min-height: 260px;
}

.service-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    color: var(--brand-ink);
    fill: currentColor;
}

.service-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 28px 30px;
}

.service--wide .service-body,
.service--half .service-body {
    justify-content: center;
}

.service-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.service-body p {
    color: var(--muted);
    font-size: 1rem;
    text-wrap: pretty;
}

@media (max-width: 1023px) {
    .services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service--wide,
    .service--half {
        grid-column: span 2;
    }

    .service--narrow {
        grid-column: span 1;
    }
}

@media (max-width: 719px) {
    .services {
        grid-template-columns: 1fr;
    }

    .service--wide,
    .service--half,
    .service--narrow {
        grid-column: auto;
        flex-direction: column;
    }

    .service--wide .service-media,
    .service--half .service-media {
        flex: none;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

/* ---------- Servicios: tarjetas en cascada (la primera vez que se abre la pestaña) ----------
   Principios aplicados: puesta en escena (orden de lectura), entrada suave (--ease-out),
   acción superpuesta (la foto se asienta y el texto llega 50ms después que la tarjeta).
   main.js marca .reveal-pending y luego .is-in con --i (posición en el lote, máx. 5 = 250ms).
   Transiciones, no keyframes: si el usuario se va a mitad, se redirigen sin reiniciar. */
.js .service.reveal-pending {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 320ms var(--ease-out),
        transform 320ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 50ms);
}

.js .service.reveal-pending .service-body {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 320ms var(--ease-out),
        transform 320ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 50ms + 50ms);
}

.js .service.reveal-pending .service-media img {
    transform: scale(1.06);
    transition:
        opacity 300ms ease 0s,
        transform 560ms var(--ease-out) calc(var(--i, 0) * 50ms + 50ms);
}

.js .service.reveal-pending.is-in,
.js .service.reveal-pending.is-in .service-body {
    opacity: 1;
    transform: none;
}

.js .service.reveal-pending.is-in .service-media img {
    transform: none;
}

/* La foto se funde al terminar de cargar en lugar de aparecer de golpe */
.js .service-media img {
    opacity: 0;
    transition: opacity 300ms ease;
}

.js .service-media img.is-loaded {
    opacity: 1;
}

/* ---------- Entradas suaves de Nosotros (una vez por visita) ---------- */
.js [data-reveal].reveal-pending {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 380ms var(--ease-out),
        transform 450ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
}

.js [data-reveal].reveal-pending.is-in {
    opacity: 1;
    transform: none;
}

/* ================= Nosotros =================
   Cada bloque es su propia sección con mucho aire (referencia: spiinoff.es/conocenos).
   Separación vertical entre bloques: --about-gap. */
.about {
    --about-gap: clamp(88px, 11vw, 160px);
    padding-top: clamp(48px, 7vw, 104px);
    padding-bottom: var(--about-gap);
}

/* Apertura: frase principal a la izquierda, acompañamiento desplazado hacia abajo a la derecha */
.about-intro {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
}

.about-intro-main {
    grid-column: 1 / span 7;
}

.about-lead {
    max-width: 22ch;
    margin-top: clamp(24px, 3vw, 40px);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.about-intro-aside {
    grid-column: 9 / span 4;
    align-self: end;
    padding-top: 120px;
}

.about-kicker {
    color: var(--muted);
}

.about-statement {
    margin-top: 12px;
    font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

/* Misión y visión: una fila cada una, etiqueta grande centrada en su columna y declaración a la derecha */
.about-identity {
    margin-top: var(--about-gap);
}

.about-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    padding: clamp(32px, 4vw, 56px) 0;
    border-top: 1px solid var(--line-strong);
}

.about-row:last-child {
    border-bottom: 1px solid var(--line-strong);
}

.about-row-label {
    grid-column: 1 / span 3;
    align-self: center;
    justify-self: center;
    color: var(--brand-ink);
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: center;
}

.about-row-text {
    grid-column: 4 / span 9;
    max-width: 30ch;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

/* Valores: encabezado centrado y cuadrícula 2x2 con separación amplia */
.values {
    margin-top: var(--about-gap);
}

.values-head {
    max-width: 40ch;
    margin: 0 auto;
    text-align: center;
}

.values-title {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.values-lede {
    margin-top: 14px;
    color: var(--muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

.values-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px clamp(40px, 7vw, 96px);
    max-width: 1000px;
    margin: clamp(48px, 6vw, 80px) auto 0;
}

/* Línea corta de marca sobre cada valor: estructura, no decoración de iconos */
.value::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-bottom: 20px;
    background: var(--brand-ink);
}

.value-title {
    font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.value p {
    max-width: 44ch;
    margin-top: 10px;
    color: var(--muted);
}

/* Cierre centrado */
.about-cta {
    margin-top: var(--about-gap);
    padding-top: var(--about-gap);
    border-top: 1px solid var(--line);
    text-align: center;
}

.about-cta-title {
    max-width: 20ch;
    margin: 0 auto;
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

@media (max-width: 899px) {
    /* Una sola columna: 12 columnas con 32px de separación no caben en 360px */
    .about-intro,
    .about-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-intro-main,
    .about-intro-aside {
        grid-column: 1 / -1;
    }

    .about-intro-aside {
        padding-top: 40px;
    }

    .about-row-label,
    .about-row-text {
        grid-column: 1 / -1;
    }

    .about-row-label {
        justify-self: start;
        margin-bottom: 16px;
        text-align: left;
    }
}

@media (max-width: 719px) {
    .values-list {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ================= Contacto ================= */
.contact {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(32px, 5vw, 64px);
}

.channel {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.channel:first-child {
    padding-top: 0;
}

.channel-icon {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    color: var(--brand-ink);
}

.channel-label {
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
}

.channel-value {
    display: inline-block;
    margin-top: 2px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.channel-value:hover {
    color: var(--brand-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.channel-text {
    margin-top: 2px;
    font-size: 1.0625rem;
}

.hours {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 20px;
    margin-top: 4px;
}

.hours-row {
    display: contents;
}

.hours dt {
    font-weight: 500;
}

.hours dd {
    color: var(--muted);
}

.map-frame {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-caption {
    margin-top: 14px;
}

@media (max-width: 899px) {
    .contact {
        grid-template-columns: 1fr;
    }
}

/* ================= Tienda ================= */
.store {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.store-status {
    max-width: 48ch;
    margin-top: 28px;
    padding-left: 16px;
    border-left: 2px solid var(--brand-ink);
}

/* Movimiento reducido: en lugar de sacudir el botón, el aviso cambia de color un momento */
.store-status.is-flash {
    animation: status-flash 700ms ease;
}

@keyframes status-flash {
    30% {
        color: var(--brand-ink);
    }
}

.store-art {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 24px;
    background: var(--surface);
}

.store-art .orn {
    inset: 8%;
    width: 84%;
    height: 84%;
}

.store-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    color: var(--brand-ink);
    fill: currentColor;
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .store {
        grid-template-columns: 1fr;
    }

    .store-art {
        max-width: 280px;
    }
}

/* ================= Footer ================= */
.site-footer {
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: start;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 40px;
}

.footer-logo {
    width: auto;
    height: 40px;
}

.footer-brand p {
    max-width: 36ch;
    margin-top: 16px;
    color: var(--muted);
}

.footer-nav ul,
.footer-contact {
    display: grid;
    gap: 10px;
}

.footer-nav a,
.footer-contact a {
    color: var(--muted);
    text-decoration: none;
}

.footer-nav a:hover,
.footer-contact a:hover {
    color: var(--fg);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-contact span {
    color: var(--muted);
}

.footer-legal {
    padding-top: 24px;
    padding-bottom: 32px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.875rem;
}

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-legal {
        padding-bottom: 96px;
    }
}

/* ================= Botón flotante de WhatsApp ================= */
.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 8px 24px rgba(0, 38, 82, 0.22);
    transition: transform 160ms var(--ease-out), background-color 160ms ease;
    /* Entrada al cargar. fill "backwards": al terminar suelta el transform para que :active siga funcionando */
    animation: wa-in 320ms var(--ease-out) 1.2s backwards;
}

@keyframes wa-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.9);
    }
}

/* Pulso único por visita: un anillo que se expande y desaparece (main.js agrega la clase una sola vez) */
.wa-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--brand-ink);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.wa-float--ring::after {
    animation: wa-ring 1200ms var(--ease-out) 3s 1 both;
}

@keyframes wa-ring {
    from {
        opacity: 0.45;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.7);
    }
}

.wa-float .icon {
    width: 28px;
    height: 28px;
}

.wa-float:active {
    transform: scale(0.95);
}

@media (hover: hover) {
    .wa-float:hover {
        background: var(--brand-hover);
    }
}

.wa-float:focus-visible {
    border-radius: var(--radius-pill);
}

/* ================= Movimiento reducido ================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Menos movimiento, no cero: se conservan los fundidos y se quitan los desplazamientos */
    .wa-float {
        animation: vt-fade-in 200ms ease 1.2s backwards !important;
    }

    .wa-float::after {
        display: none;
    }

    .store-status.is-flash {
        animation-duration: 700ms !important;
    }

    .view.is-entering {
        animation: vt-fade-in 160ms ease !important;
    }

    /* Entradas de Servicios y Nosotros: solo fundido, sin desplazamiento ni cascada */
    .js .service.reveal-pending,
    .js .service.reveal-pending .service-body,
    .js [data-reveal].reveal-pending {
        transform: none !important;
        transition: opacity 200ms ease !important;
    }

    .js .service.reveal-pending .service-media img {
        transform: none !important;
    }
}