/* Componentes de las páginas de catalogo.
   Nace del refresh de 2026-09: escalas, comparadores, líneas de tiempo y
   diagramas que sustituyeron a texto corrido y a rejillas de tarjetas iguales.
   Los tokens, el ritmo, las superficies, el movimiento y los componentes
   compartidos (.secuencia, .cita) viven en css/style.css.

   Va en un archivo por grupo, no en uno solo para todo el sitio: juntarlo
   medía 113 KB de CSS render-blocking en páginas que usan 18, y subió el LCP
   en las 16 páginas medidas. */

/* ===================================================================
   css-catalogo.css - Catalogo (productos.html) y Contacto (contacto.html)
   2026-09

   OJO PARA LA INTEGRACION: este CSS esta HOY inline, en el <style> de
   productos.html y de contacto.html, porque los agentes no podiamos
   tocar css/style.css en paralelo. Si lo mueves a style.css, BORRA esos
   dos bloques <style>; si no, quedara duplicado.
   =================================================================== */

/* ---------- de productos.html ---------- */
        /* -----------------------------------------------------------
           El hero ya no lleva degradado propio: usa la banda de marca
           del sistema (data-superficie="marca"), que es la única con el
           contraste verificado en los dos temas. El degradado anterior
           dejaba el blanco en 2,5:1 sobre su extremo claro y, como la
           regla global de h1..h6 ganaba por especificidad, el titular
           salía oscuro mientras el del CTA salía blanco.
           ----------------------------------------------------------- */
        .products-hero {
            text-align: center;
        }

        .products-hero .section__description {
            margin-inline: auto;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
            gap: var(--spacing-2xl);
            margin-bottom: var(--spacing-4xl);
        }

        .product-card {
            display: flex;
            flex-direction: column;
            background: var(--white);
            border-radius: var(--border-radius-lg);
            /* --shadow-light no existe como token: la declaración era
               inválida y la tarjeta quedaba sin elevación. Sombra neutra,
               sin color de marca. */
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            overflow: hidden;
            transition: var(--transition-normal);
            border: 1px solid var(--theme-border);
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }

        /* -----------------------------------------------------------
           Marcador de producto.
           Las fotos reales están pendientes con la dueña. Hasta que
           lleguen, la ficha abre con una banda baja y un dibujo propio
           por producto en vez de un cuadrado de 400px con un emoji
           (dos fichas repetían el mismo). La banda mide 9,5rem: son
           unos 2.000px de alto menos en la página.
           El dibujo es SVG con currentColor, así que sirve en los dos
           temas sin una sola regla extra.
           ----------------------------------------------------------- */
        .product-marca {
            display: grid;
            place-items: center;
            block-size: 9.5rem;
            color: var(--primary-color);
            background:
                radial-gradient(70% 130% at 50% 118%,
                    color-mix(in srgb, var(--primary-color) 18%, transparent) 0%,
                    transparent 72%),
                color-mix(in srgb, var(--primary-color) 7%, var(--theme-surface));
            border-bottom: 1px solid var(--theme-border);
        }

        .product-marca svg {
            width: 5.25rem;
            height: 5.25rem;
        }

        @media (max-width: 768px) {
            .product-marca {
                block-size: 8rem;
            }

            .product-marca svg {
                width: 4.25rem;
                height: 4.25rem;
            }
        }

        .product-content {
            padding: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        /* Las tarjetas de una fila miden lo mismo; el precio y el botón
           se pegan abajo para que la fila tenga una sola línea de base
           en vez de tres alturas distintas. */
        .product-price {
            margin-top: auto;
        }

        .product-category {
            color: var(--primary-color);
            font-size: var(--font-size-xs);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: var(--spacing-sm);
        }

        .product-title {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: var(--spacing-md);
        }

        .product-description {
            color: var(--gray-dark);
            font-size: var(--font-size-sm);
            line-height: 1.6;
            margin-bottom: var(--spacing-lg);
        }

        .product-features {
            list-style: none;
            padding: 0;
            margin-bottom: var(--spacing-lg);
        }

        .product-features li {
            font-size: var(--font-size-xs);
            color: var(--gray-dark);
            padding: var(--spacing-xs) 0;
            border-bottom: 1px solid var(--gray-light);
        }

        .product-features li:last-child {
            border-bottom: none;
        }

        .product-features li strong {
            color: var(--primary-color);
        }

        .product-price {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--spacing-lg);
        }

        .price-amount {
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--primary-color);
        }

        .price-old {
            font-size: var(--font-size-sm);
            color: var(--gray-dark);
            text-decoration: line-through;
        }

        .product-actions {
            display: flex;
            gap: var(--spacing-sm);
        }

        .btn-whatsapp {
            flex: 1;
            font-weight: 600;
            background: #25d366;
            color: #0f172a; /* blanco sobre el verde era 1,98:1 */
            border: none;
            padding: var(--spacing-md);
            border-radius: var(--border-radius-md);
            cursor: pointer;
            transition: var(--transition-normal);
        }

        .btn-whatsapp:hover {
            background: #0f7a63; /* blanco sobre #128c7e era 4,14:1 */
            color: #fff;
        }

        .categories-filter {
            display: flex;
            justify-content: center;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-3xl);
            flex-wrap: wrap;
        }

        /* En teléfono los 5 filtros se apilaban uno por línea: unos 250px
           de escalera entre el hero y el primer producto. Ahora son una
           tira que se desplaza, con la píldora siguiente asomando para
           que se entienda que hay más. El scroll es del elemento, no de
           la página. */
        @media (max-width: 768px) {
            .categories-filter {
                flex-wrap: nowrap;
                justify-content: flex-start;
                overflow-x: auto;
                overscroll-behavior-inline: contain;
                scroll-snap-type: x proximity;
                scrollbar-width: none;
                padding-block-end: var(--spacing-xs);
                margin-bottom: var(--spacing-2xl);
            }

            .categories-filter::-webkit-scrollbar {
                display: none;
            }

            .filter-btn {
                flex: 0 0 auto;
                scroll-snap-align: start;
            }
        }

        .filter-btn {
            padding: var(--spacing-sm) var(--spacing-lg);
            border: 2px solid var(--primary-color);
            background: transparent;
            color: var(--primary-color);
            border-radius: var(--border-radius-lg);
            cursor: pointer;
            transition: var(--transition-normal);
            font-weight: 500;
        }

        .filter-btn.active,
        .filter-btn:hover {
            background: var(--primary-color);
            color: var(--white);
        }

        /* -----------------------------------------------------------
           Composición del kit.
           Es la única relación entre productos que la página tiene y no
           se veía: el kit repite tres fichas que están más arriba. Cada
           renglón lleva el mismo dibujo que la ficha suelta, así el
           vínculo se lee sin tener que comparar nombres.
           ----------------------------------------------------------- */
        .kit-composicion {
            list-style: none;
            padding: 0;
            margin: 0 0 var(--spacing-lg);
            display: grid;
            gap: var(--spacing-xs);
        }

        .kit-composicion li {
            display: grid;
            grid-template-columns: 1.75rem 1fr auto;
            align-items: center;
            gap: var(--spacing-sm);
            font-size: var(--font-size-sm);
            color: var(--theme-text-secondary);
            padding-block: var(--spacing-xs);
            border-bottom: 1px solid var(--theme-border);
        }

        .kit-composicion li:last-child {
            border-bottom: none;
        }

        .kit-composicion svg {
            width: 1.5rem;
            height: 1.5rem;
            color: var(--primary-color);
        }

        .kit-composicion .kit-medida {
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            color: var(--primary-color);
        }

        .kit-suma {
            font-size: var(--font-size-sm);
            color: var(--theme-text-secondary);
            margin-bottom: var(--spacing-lg);
            text-wrap: pretty;
        }

        /* -----------------------------------------------------------
           Envío y retiro.
           Antes eran cuatro bloques en una rejilla auto-fit que a 1440px
           dejaba el cuarto huérfano. Ahora 2x2 fijo en escritorio, una
           columna en teléfono, y los emoji de icono sustituidos por
           dibujos de trazo.
           ----------------------------------------------------------- */
        .envio {
            background: color-mix(in srgb, var(--primary-color) 8%, var(--theme-surface));
            border: 1px solid var(--theme-border);
            border-radius: var(--border-radius-lg);
            padding: var(--spacing-2xl);
            margin: var(--spacing-4xl) 0;
        }

        .envio__titulo {
            color: var(--primary-color);
            margin-bottom: var(--spacing-xl);
        }

        .envio__lista {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--spacing-xl);
        }

        .envio__item {
            display: grid;
            grid-template-columns: 2.25rem 1fr;
            gap: var(--spacing-md);
            align-items: start;
        }

        .envio__item svg {
            width: 2.25rem;
            height: 2.25rem;
            color: var(--primary-color);
        }

        .envio__item h4 {
            margin-bottom: 2px;
            font-size: var(--font-size-md);
        }

        .envio__item p {
            margin: 0;
            font-size: var(--font-size-sm);
            color: var(--theme-text-secondary);
            text-wrap: pretty;
        }

        .envio__cifra {
            font-weight: 700;
            color: var(--primary-color);
            font-variant-numeric: tabular-nums;
        }

        @media (max-width: 640px) {
            .envio__lista {
                grid-template-columns: minmax(0, 1fr);
                gap: var(--spacing-lg);
            }
        }

        /* Dark Mode Support */
        [data-theme="dark"] .product-card {
            /* --theme-card no existe: la declaración era inválida y la
               tarjeta quedaba transparente sobre el fondo de la página. */
            background: var(--theme-surface);
            border-color: var(--theme-border);
        }

        [data-theme="dark"] .product-title {
            color: var(--theme-text-primary);
        }

        [data-theme="dark"] .product-description,
        [data-theme="dark"] .product-features li {
            color: var(--theme-text-secondary);
        }

        .skip-link {
            position: absolute;
            left: -999px;
            top: 0;
            background: var(--primary-color);
            color: var(--white);
            padding: var(--spacing-sm) var(--spacing-md);
            z-index: 1000;
            border-radius: 0 0 var(--border-radius-md) 0;
        }

        .skip-link:focus {
            left: 0;
        }
    

/* ---------- de contacto.html ---------- */
        /* -----------------------------------------------------------
           Canales de contacto sobre un eje de rapidez.
           Antes eran tres tarjetas casi iguales y el dato que de verdad
           las diferencia (cuándo te respondo) iba en letra pequeña al
           pie. Ahora los tres están sobre el mismo eje: al instante,
           en horario de atención, hasta 24 horas.
           ----------------------------------------------------------- */
        .canales {
            list-style: none;
            margin: var(--spacing-3xl) 0 0;
            padding: 0;
            display: grid;
            gap: var(--spacing-2xl);
        }

        .canal {
            position: relative;
            padding-inline-start: 4.25rem;
        }

        .canal__marca {
            position: absolute;
            inset-inline-start: 0;
            top: 0;
            width: 3rem;
            height: 3rem;
            display: grid;
            place-items: center;
            border-radius: var(--border-radius-full);
            border: 2px solid var(--primary-color);
            background: var(--theme-surface);
            color: var(--primary-color);
        }

        .canal__marca svg {
            width: 1.6rem;
            height: 1.6rem;
        }

        .canal--destacado .canal__marca {
            background: var(--primary-color);
            color: #ffffff;
        }

        [data-theme="dark"] .canal--destacado .canal__marca {
            background: #5b2d61;
            border-color: #5b2d61;
        }

        /* El eje: une los tres canales. Crece con scaleX/scaleY, así que
           no provoca layout. Sin JS está entero. */
        .canal:not(:last-child)::after {
            content: '';
            position: absolute;
            inset-inline-start: 1.4rem;
            top: 3rem;
            bottom: calc(var(--spacing-2xl) * -1);
            width: 2px;
            background: color-mix(in srgb, var(--primary-color) 32%, transparent);
        }

        .canal__nombre {
            font-size: var(--font-size-lg);
            margin-bottom: 2px;
        }

        .canal__tiempo {
            margin: 0 0 var(--spacing-sm);
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--primary-color);
            line-height: 1.2;
        }

        .canal__detalle {
            margin: 0 0 var(--spacing-md);
            color: var(--theme-text-secondary);
            font-size: var(--font-size-sm);
            max-width: 38ch;
            text-wrap: pretty;
        }

        .canal__dato {
            display: block;
            font-weight: 600;
            margin-bottom: var(--spacing-md);
            overflow-wrap: anywhere;
        }

        @media (min-width: 900px) {
            .canales {
                grid-auto-flow: column;
                grid-auto-columns: 1fr;
                gap: var(--spacing-2xl);
            }

            .canal {
                padding-inline-start: 0;
                padding-block-start: 4.25rem;
            }

            .canal:not(:last-child)::after {
                inset-inline-start: 3rem;
                inset-inline-end: calc(var(--spacing-2xl) * -1);
                top: 1.4rem;
                bottom: auto;
                width: auto;
                height: 2px;
            }
        }

        /* -----------------------------------------------------------
           Semana de atención.
           Los mismos horarios que la lista de tres líneas, dibujados:
           se ve de un vistazo que el sábado es más corto y que el
           domingo está cerrado. Los datos son los publicados, nada más.
           ----------------------------------------------------------- */
        .horario {
            display: block;
            width: 100%;
            max-width: 26rem;
            height: auto;
            color: var(--primary-color);
            margin-block: var(--spacing-xs) var(--spacing-sm);
        }

        .horario__texto {
            fill: var(--theme-text-secondary);
            font-size: 10px;
            font-weight: 500;
        }

        .horario__pie {
            font-size: var(--font-size-sm);
            color: var(--theme-text-secondary);
            margin: 0;
        }

        /* -----------------------------------------------------------
           Datos del servicio a domicilio: eran tres viñetas falsas
           hechas con <br>. Las cifras son las que mandan.
           ----------------------------------------------------------- */
        .datos {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-lg) var(--spacing-2xl);
        }

        .datos__cifra {
            display: block;
            font-size: var(--font-size-lg);
            font-weight: 700;
            color: var(--primary-color);
            line-height: 1.2;
            font-variant-numeric: tabular-nums;
        }

        .datos__pie {
            display: block;
            font-size: var(--font-size-xs);
            color: var(--theme-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .lista-simple {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: var(--spacing-xs);
            color: var(--theme-text-secondary);
        }

        .lista-simple li {
            padding-inline-start: 1rem;
            position: relative;
        }

        .lista-simple li::before {
            content: '';
            position: absolute;
            inset-inline-start: 0;
            top: 0.65em;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--primary-color);
        }

        .info-icon svg {
            display: block;
            width: 1.85rem;
            height: 1.85rem;
        }

        /* -----------------------------------------------------------
           Ubicación.
           El cuadro con borde punteado y un emoji parecía un elemento
           que no cargó. Ahora es un esquema dibujado: un área con el
           punto aproximado, sin calles ni sectores que el sitio no
           tenga confirmados.
           ----------------------------------------------------------- */
        .ubicacion {
            margin: 0;
        }

        .ubicacion__dibujo {
            display: block;
            width: 100%;
            height: auto;
            color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 8%, var(--theme-surface));
            border-radius: var(--border-radius-md);
        }

        .ubicacion__pie {
            text-align: start;
            margin-top: var(--spacing-xl);
        }

        .ubicacion__pie h3 {
            margin-bottom: var(--spacing-xs);
        }

        .ubicacion__nota {
            margin-block: var(--spacing-md) var(--spacing-lg);
            padding-inline-start: var(--spacing-md);
            border-inline-start: 1px solid var(--primary-color);
            color: var(--theme-text-secondary);
            font-size: var(--font-size-sm);
            text-wrap: pretty;
        }

        /* -----------------------------------------------------------
           Línea de tiempo de la reserva.
           Cuatro momentos que hoy viven sueltos en dos respuestas del
           acordeón. Va sobre la banda de marca: es el único color
           fuerte de la página aparte del cierre.
           ----------------------------------------------------------- */
        .crono {
            list-style: none;
            margin: var(--spacing-3xl) 0 0;
            padding: 0;
            display: grid;
            gap: var(--spacing-xl);
        }

        .crono__hito {
            position: relative;
            padding-inline-start: 2.5rem;
        }

        .crono__hito::before {
            content: '';
            position: absolute;
            inset-inline-start: 0.4rem;
            top: 0.4rem;
            width: 0.85rem;
            height: 0.85rem;
            border-radius: 50%;
            background: currentColor;
        }

        .crono__hito:not(:last-child)::after {
            content: '';
            position: absolute;
            inset-inline-start: 0.79rem;
            top: 1.25rem;
            bottom: calc(var(--spacing-xl) * -1);
            width: 2px;
            background: currentColor;
            opacity: 0.45;
        }

        .crono__cuando {
            display: block;
            font-size: var(--font-size-lg);
            font-weight: 700;
            line-height: 1.25;
        }

        .crono__que {
            display: block;
            margin-top: 2px;
            font-size: var(--font-size-sm);
            color: #e4cfeb;
            max-width: 30ch;
            text-wrap: pretty;
        }

        @media (min-width: 900px) {
            .crono {
                grid-auto-flow: column;
                grid-auto-columns: 1fr;
                gap: var(--spacing-lg);
            }

            .crono__hito {
                padding-inline-start: 0;
                padding-block-start: 2.5rem;
            }

            .crono__hito::before {
                inset-inline-start: 0;
                top: 0.4rem;
            }

            .crono__hito:not(:last-child)::after {
                inset-inline-start: 1.25rem;
                inset-inline-end: calc(var(--spacing-lg) * -1);
                top: 0.79rem;
                bottom: auto;
                width: auto;
                height: 2px;
            }
        }