/* ===========================================================================
   CONSTRUVIAL — la capa de detalle
   ---------------------------------------------------------------------------
   Nada de lo que hay aquí se ve al mirar una captura. Todo se nota al usar la
   página: la selección de texto, el anillo de foco, el botón que responde al
   dedo, la barra de desplazamiento. Son las partes que el navegador dibuja por
   defecto y que, sin tocarlas, pertenecen a ningún diseño.

   Va de último, después de construvial-2026.css.
   =========================================================================== */

:root {
    /* Curvas propias. Las de fábrica (`ease`, `ease-out`) son demasiado
       blandas: no tienen el arranque que hace que algo se sienta decidido. */
    --salida:  cubic-bezier(0.23, 1, 0.32, 1);      /* entra y sale */
    --ambas:   cubic-bezier(0.77, 0, 0.175, 1);     /* se mueve en pantalla */

    /* Duraciones. Nada de interfaz pasa de 300 ms: a partir de ahí se siente
       lento aunque el número diga otra cosa. */
    --pulso:   130ms;   /* respuesta al toque */
    --corto:   180ms;   /* hover, color */
    --medio:   260ms;   /* algo que aparece */
}

/* --- Lo que dibuja el navegador ------------------------------------------ */

/* Seleccionar texto con el verde del canto del vidrio, no con el azul de
   Windows. Es lo primero que hace cualquiera que va a copiar un teléfono. */
::selection {
    background: rgba(78, 122, 114, .22);
    color: var(--tinta);
}

/* El cursor de escritura dentro de los campos. */
input,
textarea,
select {
    caret-color: var(--canto);
}

/* Las casillas y los radios nativos, con el color de la marca en vez del azul
   del sistema. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--canto);
}

/* El anillo de foco: visible de verdad para quien navega con teclado, y
   ausente para quien usa el ratón. Sin esto el sitio es inusable sin mouse.
   ⚠️ `:focus-visible`, no `:focus`: el segundo dispara también al hacer clic
   y llena la pantalla de anillos que nadie pidió. */
/* ⚠️ Lleva !important y es el único del proyecto. No es un atajo: la plantilla
   y Bootstrap traen `outline: 0` en nueve reglas distintas, con selectores más
   específicos que cualquiera razonable de escribir aquí. El resultado medido
   era `outline-style: none` en TODO el sitio: quien navega con teclado no veía
   dónde estaba parado. Un reset que borra el foco se anula, no se negocia. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--canto) !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}

/* Sobre la barra oscura del hero y del pie, el verde no contrasta: ahí el
   anillo va blanco. */
.hero-item a:focus-visible,
.hero-item button:focus-visible,
.footer-section a:focus-visible {
    outline-color: var(--papel) !important;
}

/* Los enlaces dentro de texto corrido: el subrayado pegado a la letra corta
   las colas de las jotas y las ges. */
.section p a:not(.btn),
.texto-legal a,
.buscador__ayuda a {
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}

/* La barra de desplazamiento, en Firefox y en los navegadores de WebKit. */
html {
    scrollbar-color: var(--aluminio) transparent;
    scrollbar-width: thin;
}

@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
        width: 11px;
        height: 11px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--aluminio);
        border: 3px solid var(--papel);
        border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #9AA2A8;
    }
}

/* Los números de cantidades y medidas, en cifras de ancho fijo: sin esto, al
   pasar de "8 productos" a "11 productos" el texto baila. */
.paginacion__cuenta,
.buscador__conteo,
.categoria-atajo__conteo,
.sidebar-list .count {
    font-variant-numeric: tabular-nums;
}

/* --- Respuesta al toque --------------------------------------------------
   Un botón que no se hunde al presionarlo no parece haber escuchado. El
   cambio es pequeño a propósito: se siente, no se ve. */
.btn,
.buscador__boton,
.barra-producto__boton,
.paginacion__numero,
.paginacion__salto,
.categoria-atajo,
.single-grid-product .product-image a {
    transition: transform var(--pulso) var(--salida),
                background-color var(--corto) var(--salida),
                border-color var(--corto) var(--salida),
                color var(--corto) var(--salida);
}

.btn:active,
.buscador__boton:active,
.barra-producto__boton:active {
    transform: scale(0.975);
}

.paginacion__numero:active,
.paginacion__salto:active {
    transform: scale(0.96);
}

/* ⚠️ Los hover van detrás de esta consulta a propósito: en una pantalla táctil
   el navegador dispara :hover al tocar y el estado se queda pegado hasta que
   la persona toca otra cosa. */
@media (hover: hover) and (pointer: fine) {
    .categoria-atajo:hover {
        border-color: var(--canto);
    }

    .single-grid-product:hover .product-image img {
        transform: scale(1.03);
    }
}

/* La foto de la tarjeta se agranda apenas dentro de su marco. El recorte lo
   hace el contenedor, así que nada empuja al resto de la cuadrícula. */
.single-grid-product .product-image {
    overflow: hidden;
}

.single-grid-product .product-image img {
    transition: transform 420ms var(--salida);
}

/* --- Formulario ---------------------------------------------------------- */

/* Mientras se envía, el botón lo dice y deja de aceptar clics: sin esto, la
   duda hace que la gente lo presione tres veces y manden tres correos. */
.btn[aria-busy="true"],
button[disabled],
.btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.buscador__campo::placeholder,
.input-text::placeholder {
    color: #7B858E;   /* 4.6:1 sobre blanco; el gris de fábrica no llega */
}

/* --- Quien pidió menos movimiento ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .single-grid-product .product-image img,
    .btn,
    .buscador__boton,
    .barra-producto__boton {
        transition-duration: 1ms;
    }

    .single-grid-product:hover .product-image img {
        transform: none;
    }
}