/* SERKASA — base de marca compartida.
   Tokens y primitivas que usan tanto el sitio público como el portal Quotely.
   Se carga antes que site.css y que portal.css: ambos parten de aquí y solo
   añaden lo propio de su superficie.

   Paleta tomada de la marca: techo rojo y base azul del logotipo. */

:root {
    --brand-red: #a92529;
    --brand-red-dark: #8a1e21;
    /* Rojo aclarado, legible sobre el azul del héroe y de la barra del portal. */
    --brand-red-light: #ff8a8a;
    --brand-red-tint: rgba(169, 37, 41, 0.1);
    --brand-navy: #112954;
    --brand-navy-deep: #0b1c3a;
    /* El verde de WhatsApp (#25d366) deja el texto blanco en 1,98:1: no llega
       ni al 3:1 que WCAG 1.4.11 pide para un icono. Estos dos son ese mismo
       tono oscurecido hasta 5,4:1; el botón se sigue leyendo como WhatsApp. */
    --brand-wa: #0f7a45;
    --brand-wa-dark: #0b6238;

    /* Componentes RGB: Bootstrap 5.3 arma varios colores con
       rgba(var(--bs-*-rgb), opacidad) y ahí no sirve un hex. */
    --brand-red-rgb: 169, 37, 41;
    --brand-navy-rgb: 17, 41, 84;
    --brand-navy-deep-rgb: 11, 28, 58;
    --ink-rgb: 22, 32, 47;

    --ink: #16202f;
    --ink-muted: #5b6879;
    --surface: #ffffff;
    --surface-alt: #f4f6fa;
    /* Separador decorativo entre bloques. A 1,29:1 sobre blanco no sirve para
       delimitar un control: para eso está --field-border. */
    --border: #dde3ec;
    /* Borde de campos y botones de contorno: 3,38:1 sobre blanco, el mínimo que
       pide WCAG 1.4.11 para elementos no textuales. */
    --field-border: #7d8da3;

    /* El anillo de foco toma el color primario de cada superficie. En el sitio
       ese primario es el rojo; el portal lo reapunta a navy porque allí el rojo
       ya significa "destructivo" (rechazar, vaciar carrito). */
    --focus-ring: var(--brand-red);

    /* Escala de espacios, base 4px. Antes el ritmo vertical salía de sumar el
       relleno de la sección con las utilidades mb-5/mt-5/mt-2 que llevaba cada
       plantilla: nueve pasos distintos usados a ojo, y huecos de 176, 96, 144 y
       112px entre secciones de la misma página sin que ninguno fuera una
       decisión. Todo espacio del sitio sale ahora de aquí. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Escala de radios. Antes convivían siete valores sueltos (6, 8, 10, 12,
       14, 50% y 999px) y dos tarjetas del mismo tipo usaban 12 y 14. --radius
       se conserva como alias porque portal.css ya lo usa. */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --radius: var(--radius-md);
    --shadow-sm: 0 2px 10px rgba(17, 41, 84, 0.06);
    --shadow-md: 0 12px 32px rgba(17, 41, 84, 0.12);

    /* ---------- Movimiento ----------
       Estaba en portal.css, que el sitio público no carga, así que el sitio se
       quedó sin sistema: cada regla suya escribía `0.18s ease` a mano y el
       mismo botón de marca se hundía de una manera en una pantalla del portal
       y de otra en la portada. El movimiento es una decisión de marca como el
       color o el espacio, y se toma una sola vez, aquí.

       Las curvas de CSS (`ease`, `ease-out`) son flojas: arrancan despacio y
       la interfaz se siente lenta aunque el número de milisegundos sea el
       mismo. Estas salen fuertes y frenan al final, que es lo que hace que un
       control parezca responder al instante.

       Lo que entra o sale usa `--ease-out`; lo que se mueve de un sitio a
       otro dentro de la pantalla —una lámina que se desliza, una figura que se
       transforma en otra— usa `--ease-in-out`, que es lo único que arranca
       despacio a propósito porque ahí el ojo tiene que seguir el recorrido.

       Casi nada pasa de 200 ms: lo que se ve cien veces al día tiene que ser
       instantáneo, y la animación se reserva para avisar de un cambio de
       estado. La excepción son los paneles que cruzan media pantalla —el menú
       lateral del teléfono, los modales—, donde 200 ms se leen como un tirón;
       van en `--dur-panel`, y con su propia curva: `--ease-drawer` sale más
       fuerte todavía y frena más largo, que es lo que hace que un panel grande
       parezca ligero.

       El reparto entre los dos tiempos cortos no es de gusto: lo que cambia de
       color al pasar por encima va en `--dur-hover`, y lo que se mueve al
       pulsarlo va en `--dur-press`, más corto, porque el hundido tiene que
       llegar antes de que el dedo se levante. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-press: 110ms;
    --dur-hover: 150ms;
    --dur-enter: 200ms;
    --dur-panel: 260ms;

    /* La excepción de la excepción: lo que tarda una figura en dibujarse la
       primera vez que se pinta. Es más del doble que los paneles, y es la
       única duración de la casa que existe para un solo tipo de elemento.

       Se sale de la regla a sabiendas. Un gráfico no es un control que
       responde a un dedo —ahí el párrafo de arriba manda y no se toca—: es una
       forma que hay que leer, y lo que la entrada añade es el orden en que se
       lee. Un pastel que aparece entero es una mancha de colores que hay que
       descifrar; un pastel que se dibuja enseña dónde empieza cada tramo
       mientras se dibuja, que es exactamente lo que después hay que buscar en
       la leyenda.

       Por debajo de 400 ms no da tiempo a leer nada y sólo queda el parpadeo;
       por encima de 500 ya se está esperando a un gráfico, que es lo que no
       puede pasar en una pantalla que se abre veinte veces al día.

       Y va con `--ease-in-out`, que es la única vez que algo del portal
       arranca despacio a propósito. No es una preferencia: `--ease-out` sale
       tan fuerte que a mitad del tiempo ya lleva el **97 %** del recorrido
       hecho, así que el arco se dibujaba entero en los primeros 200 ms y los
       otros 250 no se veían —la duración habría sido mentira—. Con
       `--ease-in-out` va por el 60 % a mitad de camino y el dibujo ocupa el
       tiempo que dice ocupar. Es además lo que el párrafo de arriba ya
       reservaba para esto: una figura que se transforma, donde el ojo tiene
       que seguir el recorrido.

       La cifra grande del bloque **nunca** espera a esto: se pinta con la
       página. */
    --dur-chart: 450ms;
}

/* Las clases .h1-.h6 van en la lista a propósito: Bootstrap las declara junto a
   los elementos con `color: var(--bs-heading-color)`, y un selector de clase
   gana al de elemento. Sin ellas, cada `<h1 class="h3">` del portal se quedaba
   con el color del cuerpo en vez del navy de marca. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Sora", system-ui, sans-serif;
    font-weight: 700;
    color: var(--brand-navy);
}

/* El interletraje depende del tamaño: a 46px las letras se ven separadas y hay
   que cerrarlas, a 17px cerrarlas las empasta. Un único -0,02em para los seis
   niveles estaba mal en los pequeños, que son la mayoría de los títulos del
   sitio (tarjetas, filas de servicio, encabezados del pie). */
h1, .h1 { letter-spacing: -0.022em; }
h2, .h2 { letter-spacing: -0.018em; }
h3, .h3 { letter-spacing: -0.01em; }
h4, .h4 { letter-spacing: -0.005em; }
h5, .h5,
h6, .h6 { letter-spacing: 0; }

/* Un solo anillo de foco para sitio y portal, visible sobre claro y sobre azul.
   Cada superficie oscura lo pasa a blanco por su cuenta.

   .btn entra en la lista porque Bootstrap hace `outline: 0` en `.btn:focus-visible`
   y lo cambia por un halo sin desplazamiento: con un selector más específico que
   el nuestro, los botones se quedaban con un anillo distinto al del resto de los
   controles. El contorno no toca el border-radius del elemento; ya lo sigue solo. */
:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn:focus-visible {
    box-shadow: none;
}

/* El enlace que salta la navegación. Vive aquí y no en la hoja de cada
   superficie porque las dos lo necesitan igual: en el sitio son el encabezado
   y su menú, y en el portal son las quince entradas de la barra lateral, que
   hay que tabular enteras en **cada** pantalla antes de llegar al contenido.
   Escrito dos veces se habría separado con el primer retoque.

   Se dibuja con `.visually-hidden-focusable` de Bootstrap, que lo esconde
   hasta que recibe el foco; esto sólo lo coloca y le da color. El z-index lo
   pone por encima de la barra de progreso del portal (2000) y del encabezado
   pegajoso del sitio (1030): un enlace de salto tapado no sirve de nada. */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2001;
    background: var(--brand-navy);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
}

/* La hoja impresa de la cotización es monocroma a propósito. La regla de arriba
   es más específica que el `body { color: #111 }` de esa hoja, así que sin este
   bloque el navy de marca se filtraría a los títulos que no fijan color propio. */
@media print {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        color: #111;
    }
}

/* Reducir movimiento no es quitar toda respuesta. Lo que marea es el
   desplazamiento; que un botón cambie de color al pulsarlo sigue haciendo
   falta para saber que se pulsó.

   Se acorta la duración en vez de anularla con `animation: none`: esa regla
   dejaba a medias cualquier elemento que empiece en `opacity: 0` y se muestre
   animándose, porque la animación que lo hacía visible no llegaba a correr.
   Con una duración mínima la animación termina de inmediato y el elemento
   acaba en su estado final. Lo que necesite seguir moviéndose —un indicador
   de carga, que si se congela parece una interfaz rota— lo reactiva su propia
   hoja. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}