/* =========================================================================
   Tipografías, servidas desde el propio sitio.

   Antes venían de fonts.googleapis.com. Traerlas aquí gana cuatro cosas:
   se quita una hoja de estilos externa que bloqueaba el renderizado y dos
   preconexiones; se quitan dos orígenes de la política de contenido; deja de
   viajar la dirección IP de cada instalador a un tercero cada vez que abre la
   tienda —lo cual, con el aviso de cookies que ya hay, no es un detalle menor
   bajo la LFPDPPP—; y el sitio deja de depender de que un servicio ajeno esté
   en pie para verse como debe.

   Son fuentes variables: un archivo por familia y subconjunto cubre todos los
   pesos. Los subconjuntos son latin y latin-ext y nada más; el navegador baja
   el que necesite según lo que haya que pintar, y para un sitio en español el
   segundo casi nunca hace falta. Las tres son SIL Open Font License 1.1, cuyo
   texto está en wwwroot/tipografias/OFL.txt.

   Para actualizarlas: pedir a fonts.googleapis.com el CSS con el mismo juego
   de familias y pesos que declara App.razor, quedarse con los bloques latin y
   latin-ext, y sustituir los archivos y los unicode-range de aquí abajo.
   ========================================================================= */

/* Archivo · latin */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('tipografias/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo · latin-ext */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('tipografias/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 · latin */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('tipografias/source-sans-3-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 · latin-ext */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('tipografias/source-sans-3-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono · latin */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('tipografias/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono · latin-ext */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('tipografias/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   Tienda Diexsa · sistema visual
   Instaladores Solex que compran desde el taller, casi siempre en el móvil:
   precios grandes, claves legibles, botones que se aciertan con guantes.

   Los colores no se inventaron aquí. El acento es el azul del logotipo
   (#0066BA, medido sobre el archivo original y confirmado en diexsa.com), y
   el resto de la escala reproduce el tema del ERP nuevo
   (VisualSoftErp.Controles/Tema.cs) para que los dos sistemas de Diexsa se
   vean de la misma familia. El cian claro es el del degradado del isotipo.
   ========================================================================= */

:root {
    /* Tema claro siempre: color-scheme lo fija para que los campos, los menus
       desplegables y las barras de desplazamiento que pinta el navegador tambien
       salgan claros aunque el sistema del instalador este en oscuro. */
    color-scheme: light;

    --ground: #F4F6F8;
    --surface: #FFFFFF;
    --surface-2: #EEEFF1;
    --ink: #262C32;
    --ink-2: #464E58;
    --muted: #78808A;
    --line: #E2E6EC;
    --line-2: #C8CDD4;

    --acento: #0066BA;
    --acento-ink: #FFFFFF;
    --acento-soft: #E6F1FA;
    --acento-hondo: #014A8E;
    --cian: #81DFF4;

    --acero: #014A8E;
    --acero-soft: #C6DEF8;

    --ok: #288252;
    --ok-soft: #E2F2E9;
    --alerta: #C43D3D;
    --alerta-soft: #FAE8E5;
    --aviso: #855F12;
    --aviso-soft: #FAF0DB;

    --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", Consolas, monospace;

    --radio: 8px;
    --sombra: 0 1px 2px rgba(38, 44, 50, .06), 0 4px 14px rgba(38, 44, 50, .06);
    --cabecera: 132px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.015em;
    text-wrap: balance;
}

h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; }
h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }

p { margin: .6em 0; }

a { color: var(--acero); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

/* El enrutador de Blazor enfoca el h1 en cada navegación para que un lector de pantalla empiece
   por el título. Ese foco es del programa, no del teclado, así que no lleva marco visible: quien
   tabula si lo ve, porque entonces el elemento tiene tabindex propio. */
h1[tabindex="-1"]:focus {
    outline: none;
}

/* ---------- estructura ---------- */

/* El aire de los lados crece con la pantalla: 20 px en un teléfono, 32 en una tableta y 48 en
   escritorio. Con 20 px fijos, en un monitor el texto quedaba pegado al borde de la ventana. */
.envoltura {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

/* Solo el aire de arriba y abajo: el de los lados lo pone .envoltura, y un padding completo aquí
   lo estaba pisando con cero. Por eso el texto salía pegado al borde en pantallas anchas. */
.contenido { padding-block: 26px 80px; }

/* ---------- cabecera ---------- */

.cabecera {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40;
}

.cabecera-fila {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
}

.marca {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca span { color: var(--acento); }

.buscador { flex: 1; display: flex; max-width: 620px; }
.buscador input {
    flex: 1;
    font: inherit;
    padding: 11px 14px;
    border: 1px solid var(--line-2);
    border-right: 0;
    border-radius: var(--radio) 0 0 var(--radio);
    background: var(--ground);
    color: var(--ink);
    min-width: 0;
}
.buscador input::placeholder { color: var(--muted); }
.buscador button {
    font: inherit;
    font-weight: 600;
    padding: 11px 18px;
    border: 1px solid var(--acento);
    background: var(--acento);
    color: var(--acento-ink);
    border-radius: 0 var(--radio) var(--radio) 0;
    cursor: pointer;
}
.buscador button:hover { filter: brightness(1.06); }

.acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.usuario {
    font-size: 14px;
    color: var(--ink-2);
    text-align: right;
    line-height: 1.25;
    display: none;
}
@media (min-width: 900px) { .usuario { display: block; } }
.usuario strong { display: block; color: var(--ink); font-weight: 600; }

/* ---------- menú de categorías ---------- */

.menu {
    border-top: 1px solid var(--line);
    background: var(--surface);
    overflow-x: auto;
    scrollbar-width: thin;
}
.menu-lista {
    display: flex;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.menu-lista a {
    display: block;
    padding: 12px 14px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 15px;
    border-bottom: 3px solid transparent;
}
.menu-lista a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.menu-lista a.activo { color: var(--acento); border-bottom-color: var(--acento); }

/* ---------- botones ---------- */

.boton {
    font: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radio);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: filter .12s ease, background-color .12s ease;
}
.boton:hover { text-decoration: none; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

.boton-primario { background: var(--acento); color: var(--acento-ink); border-color: var(--acento); }
.boton-primario:hover:not(:disabled) { filter: brightness(1.07); }

.boton-secundario { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.boton-secundario:hover:not(:disabled) { background: var(--surface-2); }

.boton-plano { background: none; color: var(--acero); padding: 8px 10px; }
.boton-plano:hover:not(:disabled) { background: var(--surface-2); }

.boton-bloque { width: 100%; }
.boton-grande { padding: 14px 22px; font-size: 17px; }

/* ---------- carrito en la cabecera ---------- */

.carrito-enlace {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--radio);
    color: var(--ink);
    font-weight: 600;
}
.carrito-enlace:hover { background: var(--surface-2); text-decoration: none; }
.carrito-cuenta {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--acento);
    color: var(--acento-ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- rejillas y tarjetas ---------- */

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.tarjeta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.tarjeta:hover { box-shadow: var(--sombra); border-color: var(--line-2); }

.tarjeta-imagen {
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.tarjeta-imagen img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.tarjeta-imagen .sin-foto { color: var(--muted); font-size: 13px; }

.tarjeta-cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tarjeta-nombre { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
.tarjeta-pie { margin-top: auto; padding-top: 10px; }

.sku {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .02em;
}

/* ---------- precios ---------- */

.precio {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.precio-grande { font-size: 34px; }
.precio-antes {
    font-size: 14px;
    color: var(--muted);
    text-decoration: line-through;
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}

/* ---------- etiquetas ---------- */

.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.etiqueta-oferta { background: var(--acento-soft); color: var(--acento); }
.etiqueta-agotado { background: var(--alerta-soft); color: var(--alerta); }
.etiqueta-ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- avisos ---------- */

.aviso {
    padding: 12px 16px;
    border-radius: var(--radio);
    border-left: 3px solid var(--line-2);
    background: var(--surface);
    margin: 14px 0;
}
.aviso-ok { border-left-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.aviso-error { border-left-color: var(--alerta); background: var(--alerta-soft); color: var(--alerta); }
.aviso-info { border-left-color: var(--acero); background: var(--acero-soft); }

/* ---------- formularios ---------- */

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.campo input, .campo select, .campo textarea {
    font: inherit;
    padding: 11px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--radio);
    background: var(--surface);
    color: var(--ink);
}
.campo .error { color: var(--alerta); font-size: 13px; }

.tarjeta-formulario {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    padding: 28px;
    max-width: 420px;
    margin: 40px auto;
    box-shadow: var(--sombra);
}

/* ---------- migas ---------- */

.migas {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.migas a { color: var(--muted); }
.migas a:hover { color: var(--ink); }

/* ---------- encabezado de sección ---------- */

.seccion-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 30px 0 16px;
    flex-wrap: wrap;
}
.seccion-titulo p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- carrusel ---------- */

.carrusel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: var(--radio);
    margin-bottom: 8px;
}
.carrusel img {
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: var(--radio);
    object-fit: cover;
    max-height: 340px;
    width: 100%;
}

/* ---------- ficha de producto ---------- */

.producto {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 860px) {
    .producto { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
}

.producto-foto {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.producto-foto img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.opcion {
    font: inherit;
    font-weight: 600;
    padding: 9px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--radio);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.opcion:hover { border-color: var(--acento); }
.opcion.elegida { background: var(--acento); border-color: var(--acento); color: var(--acento-ink); }

.etiqueta-grupo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 18px;
}

.cantidad { display: flex; align-items: center; gap: 0; }
.cantidad button {
    font: inherit;
    font-size: 20px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.cantidad button:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.cantidad button:last-child { border-radius: 0 var(--radio) var(--radio) 0; }
.cantidad input {
    font: inherit;
    font-family: var(--font-mono);
    width: 64px;
    height: 46px;
    text-align: center;
    border: 1px solid var(--line-2);
    border-left: 0;
    border-right: 0;
    background: var(--surface);
    color: var(--ink);
}

/* ---------- carrito ---------- */

.linea-carrito {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.linea-carrito .foto {
    width: 84px;
    height: 84px;
    background: var(--surface-2);
    border-radius: var(--radio);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.linea-carrito .foto img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.linea-carrito .acciones-linea { display: flex; align-items: center; gap: 14px; }

.resumen {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    padding: 20px;
    position: sticky;
    top: calc(var(--cabecera) + 16px);
}
.resumen-fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-variant-numeric: tabular-nums;
}
.resumen-total {
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding-top: 14px;
    font-weight: 700;
    font-size: 18px;
}

.dos-columnas { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .dos-columnas { grid-template-columns: minmax(0, 1fr) 320px; } }

/* ---------- vacío ---------- */

.vacio {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
.vacio h2 { color: var(--ink); margin-bottom: 8px; }

/* ---------- pie ---------- */

.pie {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 28px 0;
    color: var(--muted);
    font-size: 14px;
}
.pie-fila { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- utilidades ---------- */

.silencio { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.apilado { display: flex; flex-direction: column; gap: 4px; }
.centrado { text-align: center; }

/* ---------- error de Blazor ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: #FBF1D6;
    color: #4A3A00;
    bottom: 0;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 12px 16px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; }

/* ---------- cabecera en pantallas estrechas ----------
   El instalador compra desde el taller, con el teléfono en una mano. A menos de 720 px la marca y
   los botones se quedan arriba y el buscador baja a su propia línea, a lo ancho: es lo que más se
   usa y lo que peor se acierta cuando queda estrecho. */

@media (max-width: 719px) {
    .cabecera-fila {
        flex-wrap: wrap;
        gap: 12px;
    }

    .buscador {
        order: 3;
        flex: 1 0 100%;
        max-width: none;
    }

    .marca { font-size: 20px; }

    .acciones { gap: 6px; }

    .carrito-enlace, .boton-plano { padding: 9px 11px; }
}

/* ---------- logotipo ----------
   El archivo es el original de marca, con su degradado, sobre fondo claro. */

.marca img {
    display: block;
    height: 38px;
    width: auto;
    }

@media (max-width: 719px) {
    .marca img { height: 32px; }
}

/* =========================================================================
   Páginas públicas, pie y accesorios
   Todo lo que sigue nació con la portada abierta: antes de ella el sitio
   entero vivía detrás del login y no había nada que enseñar sin sesión.
   ========================================================================= */

/* ---------- accesibilidad ---------- */

.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--acento);
    color: var(--acento-ink);
    padding: 10px 16px;
    border-radius: 0 0 var(--radio) 0;
    font-weight: 600;
}

.salto-contenido:focus { left: 0; }

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- portada ---------- */

.portada { padding: 28px 0 8px; }

.antetitulo {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--acento);
    margin: 0 0 10px;
}

.entrada {
    font-size: clamp(17px, 2.2vw, 20px);
    color: var(--ink-2);
    max-width: 62ch;
    margin: 14px 0 0;
}

.portada-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/* ---------- contenido de texto largo ---------- */

/* Ancho de lectura. Un renglón demasiado largo cansa —el ojo pierde el salto de línea—, pero 72ch
   se quedaba en media pantalla de laptop y parecía un error de maquetación. 90ch es el límite alto
   de lo cómodo y ya ocupa dos tercios. min(100%) para que nunca desborde en un teléfono. */
.prosa { max-width: min(100%, 90ch); }
.prosa h2 { margin-top: 34px; }
.prosa h3 { margin-top: 22px; }
.prosa ul, .prosa ol { padding-left: 22px; }
.prosa li { margin: 6px 0; }

.contenido h2 { margin-top: 36px; }

/* ---------- pasos numerados ---------- */

.pasos {
    list-style: none;
    counter-reset: paso;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.pasos li {
    counter-increment: paso;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    padding: 20px;
}

.pasos li::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--acento);
    color: var(--acento-ink);
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: 12px;
}

.pasos h3 { margin-bottom: 6px; }
.pasos p { color: var(--ink-2); margin: 0; }

/* ---------- preguntas ---------- */

.faq { margin: 16px 0 0; }

.faq dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    margin-top: 18px;
}

.faq dd {
    margin: 6px 0 0;
    color: var(--ink-2);
    max-width: min(100%, 90ch);
}

/* ---------- tablas ----------
   Una tabla ancha se desplaza dentro de su caja; la página nunca se mueve de lado. */

.tabla-envoltura {
    overflow-x: auto;
    margin: 18px 0;
    border: 1px solid var(--line);
    border-radius: var(--radio);
    background: var(--surface);
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
}

caption {
    text-align: left;
    padding: 12px 16px;
    color: var(--muted);
    font-size: 14px;
}

th, td {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

thead th {
    background: var(--surface-2);
    font-family: var(--font-display);
    font-size: 14px;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

/* ---------- contacto ---------- */

.rejilla-contacto {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 24px;
}

.tarjeta-contacto {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    padding: 22px;
}

.tarjeta-contacto h2 { font-size: 19px; margin-bottom: 8px; }

.lista-contacto { list-style: none; padding: 0; margin: 0; }

.lista-contacto li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.lista-contacto li:last-child { border-bottom: 0; }

address {
    font-style: normal;
    color: var(--ink-2);
    line-height: 1.7;
}

/* ---------- 404 ---------- */

.vacio-404 { text-align: left; max-width: 64ch; }
.buscador-404 { max-width: 460px; margin: 22px 0; }
.enlaces-404 { margin-top: 26px; }
.enlaces-404 h2 { font-size: 16px; margin-bottom: 8px; }

.enlaces-404 ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.enlaces-404 a {
    display: inline-block;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radio);
}

/* ---------- pie ---------- */

.pie-columnas {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 34px 0 26px;
}

.pie-columna h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
}

.pie-columna ul { list-style: none; padding: 0; margin: 0; }
.pie-columna li { margin: 7px 0; }

.pie-redes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    margin: 0;
}

/* ---------- aviso de cookies ---------- */

.aviso-cookies {
    position: fixed;
    left: clamp(20px, 4vw, 48px);
    right: clamp(20px, 4vw, 48px);
    bottom: 16px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

/* El atributo hidden lo pone el servidor y lo quita tienda.js. Sin esta regla, el display:flex
   de arriba gana al [hidden] de la hoja del navegador y el aviso sale siempre. */
.aviso-cookies[hidden] { display: none; }

.aviso-cookies p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    flex: 1 1 320px;
}

/* ---------- compartir ---------- */

.boton-compartir { font-size: 14px; }

/* ---------- barra fija en el movil ---------- */

.cta-movil { display: none; }

@media (max-width: 719px) {
    .cta-movil {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -2px 12px rgba(38, 44, 50, .08);
    }

    .cta-movil a {
        flex: 1;
        text-align: center;
        padding: 13px 10px;
        border-radius: var(--radio);
        font-weight: 700;
        font-family: var(--font-display);
    }

    .cta-movil-primario {
        background: var(--acento);
        color: var(--acento-ink);
        flex: 2;
    }

    .cta-movil-secundario {
        background: var(--surface-2);
        color: var(--ink);
    }

    .cta-movil a:hover { text-decoration: none; }

    /* Que la barra no tape el final de la página ni el aviso de cookies. */
    .contenido { padding-bottom: 100px; }

    .aviso-cookies { bottom: 78px; }

    .rejilla-contacto,
    .pasos { grid-template-columns: 1fr; }
}

/* =========================================================================
   Móvil
   El instalador compra desde el taller, con el teléfono en una mano y a
   veces con guantes en la otra. Aquí no se «adapta» el escritorio: se
   ordena lo que hace falta en una columna, con áreas de toque grandes y
   sin nada que sobresalga a lo ancho.
   ========================================================================= */

/* Nada puede empujar la página de lado. Si algo se sale, que se desplace
   dentro de su caja, no que mueva el documento entero. */
html, body { overflow-x: hidden; }

/* ---------- cabecera antes de entrar ----------
   Sin sesión no hay buscador ni menú de catálogo, así que la fila se reparte
   en tres: un hueco, la marca centrada y la entrada donde siempre. Centrar el
   logotipo con un margen automático lo dejaría descentrado respecto a la
   página, porque el botón de la derecha no mide lo mismo que el hueco. */

.cabecera-publica {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.cabecera-publica .marca { grid-column: 2; justify-self: center; }
.cabecera-publica .acciones { grid-column: 3; justify-self: end; margin-left: 0; }

/* La barra de categorías se desplaza con el dedo, sin barra a la vista. */
.menu { -webkit-overflow-scrolling: touch; }
.menu::-webkit-scrollbar { height: 0; }

@media (max-width: 719px) {
    .menu { scrollbar-width: none; }
    .menu-lista a { padding: 12px 12px; font-size: 14px; }

    /* ---------- ritmo general ---------- */

    .contenido { padding-block: 18px 100px; }
    .contenido h2 { margin-top: 28px; }

    h1 { line-height: 1.12; }
    h2 { font-size: clamp(19px, 5.5vw, 24px); }

    p, li { font-size: 16px; }

    /* ---------- portada ---------- */

    .portada { padding: 14px 0 4px; }
    .entrada { font-size: 17px; }

    /* Un botón por línea, del ancho del pulgar: en el taller se acierta a la
       primera o se sale del sitio. */
    .portada-acciones { flex-direction: column; gap: 10px; }
    .portada-acciones .boton { width: 100%; padding: 14px 18px; }

    /* ---------- listas y tarjetas ---------- */

    .rejilla { grid-template-columns: 1fr; gap: 12px; }

    .pasos { gap: 12px; }
    .pasos li { padding: 16px 18px; }

    .faq dt { font-size: 16px; margin-top: 16px; }

    /* ---------- producto ---------- */

    .producto { gap: 20px; }
    .precio-grande { font-size: 30px; }

    /* Cantidad y botón, uno debajo del otro y a lo ancho. */
    .producto form.fila { flex-wrap: wrap; }
    .producto form.fila .cantidad { flex: 0 0 96px; }
    .producto form.fila .boton { flex: 1; }

    /* ---------- pie ---------- */

    .pie-columnas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 26px 0 20px;
    }

    .pie-fila { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pie-redes { gap: 14px; }
}

/* Teléfonos estrechos de verdad: el pie pasa a una sola columna. */
@media (max-width: 419px) {
    .pie-columnas { grid-template-columns: 1fr; }
    .cabecera-fila { gap: 10px; }
    .acciones .boton { padding: 10px 12px; }
}

/* ---------- áreas de toque ----------
   Los enlaces sueltos dentro de un párrafo no cuentan; los controles, sí. */

@media (pointer: coarse) {
    .boton,
    .carrito-enlace,
    .cta-movil a,
    .menu-lista a,
    .opcion {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .buscador input,
    .buscador button,
    .campo input,
    .campo select {
        min-height: 44px;
    }
}

/* ---------- respeto por quien pide menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   Transiciones entre páginas
   La tienda navega con la navegación mejorada de Blazor: el navegador no
   recarga el documento, sino que sustituye el contenido. Es rápido, pero sin
   señales visuales el efecto es raro —se pulsa un enlace y no pasa nada
   durante medio segundo, y luego el contenido cambia de golpe—.

   Aquí se resuelve con tres piezas, todas degradables: una barra de progreso
   mientras se va a buscar la página, una entrada suave del contenido nuevo, y
   la API de transiciones de vista donde el navegador la trae (Chrome 126+ y
   Safari 18+) para las navegaciones que sí recargan el documento.
   ========================================================================= */

@view-transition { navigation: auto; }

.barra-progreso {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 90;
    background: linear-gradient(90deg, var(--acento), var(--cian));
    opacity: 0;
    pointer-events: none;
    transition: width .2s ease, opacity .2s ease;
}

/* La barra avanza rápido hasta el 80 % y espera ahí: el último tramo lo
   completa la llegada de la página. Fingir el 100 % antes de tiempo es lo que
   hace que una barra de progreso se sienta mentirosa. */
.barra-progreso.cargando {
    opacity: 1;
    width: 80%;
    transition: width 1.4s cubic-bezier(.15, .85, .35, 1), opacity .1s ease;
}

.barra-progreso.completa {
    opacity: 0;
    width: 100%;
    transition: width .18s ease, opacity .35s ease .12s;
}

/* El contenido nuevo entra desde un pelo más abajo. Ocho píxeles y 180 ms: lo
   justo para que el ojo siga el cambio sin que nadie sienta que espera. */
@keyframes entra-contenido {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.contenido.entrando {
    animation: entra-contenido .18s ease-out both;
}

/* =========================================================================
   Safari y iOS
   El instalador que pide desde el taller lo hace tanto en Android como en
   iPhone, y WebKit tiene sus propias reglas. Lo que sigue son las que se
   notan.
   ========================================================================= */

/* iOS pinta un destello gris sobre cualquier cosa que se toque. Con estados
   propios de :active molesta más de lo que ayuda. */
html { -webkit-tap-highlight-color: rgba(0, 102, 186, .12); }

/* Safari le pone forma de píldora y una lupa a los campos de búsqueda, y el
   borde redondeado no coincide con el del botón que va pegado. */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* En iOS, 100vh cuenta la barra de direcciones que aparece y desaparece: la
   unidad pequeña —svh— es la que no da saltos. Se declara después para que
   los navegadores que no la conocen se queden con la primera. */
.contenido {
    min-height: 60vh;
    min-height: 60svh;
}

/* La barra fija respeta el indicador de inicio del iPhone. Necesita
   viewport-fit=cover en la etiqueta viewport, que está en App.razor. */
.cta-movil {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* Con el teclado en pantalla, una barra fija abajo tapa justo el campo que se
   está escribiendo. tienda.js marca el cuerpo mientras hay un campo con el
   foco y la barra se aparta. */
body.teclado-abierto .cta-movil,
body.teclado-abierto .aviso-cookies {
    display: none;
}

/* Safari no admite todavía el ajuste fino de la partición de líneas en
   títulos; donde no lo entiende, simplemente se ignora y no rompe nada. */

/* El botón de salir vive dentro de un formulario —cerrar sesión no puede ser un GET— y sin esto
   el formulario introduce su propio bloque en la fila de la cabecera. */
.salir {
    display: contents;
}