/* ==================================================
   ESCAPARATE DE ESPECIES — productos.php
   ==================================================

   Reescrita el 2026-09-02. La version anterior tenia 1071 lineas para una
   pagina de dieciocho fotos, repartidas en cuatro puntos de corte que volvian a
   declarar las mismas doce propiedades. Lo que se corrigio de fondo:

   1. **Dejo de pisarle los estilos al buscador global del navbar.** Declaraba
      `.search-container` y `.search-input`, los mismos nombres del componente
      compartido, y como esta hoja se carga despues ganaba por orden con la
      misma especificidad. En `productos.php` —y solo ahi— la lupa del navbar
      abria un velo negro con un campo transparente de 400x21 px en vez del
      recuadro blanco de 600x68. Ahora el buscador de la pagina lleva prefijo
      propio: `.buscador-especies`.

   2. **El menu de categorias deja de salir debajo de los productos en
      celular.** Lo hacia un `order: 2` en el punto de corte de 768 px. Aqui
      pasa a ser una fila de fichas encima de la cuadricula: mismo marcado, otra
      colocacion.

   3. **Se fue el `:root` duplicado.** Repetia doce variables con los mismos
      valores que `responsive-modern.css`, que esta pagina ya carga. Dos
      declaraciones identicas no hacen daño hasta el dia que alguien cambia una.

   Los colores y la tipografia salen de `responsive-modern.css`. Lo unico que se
   declara aqui son los tokens propios del escaparate, con prefijo `--esc-`.
   ================================================== */

:root {
    /* Fondo de los paneles de foto. Un gris azulado frio: las fotos son de
       pescado sobre hielo y sobre blanco puro se pierden los bordes. */
    --esc-panel: #eef2f7;
    --esc-borde: #dae2ec;
    --esc-tinta-suave: #5a6b82;
    --esc-radio: 12px;
    --esc-radio-chico: 8px;
    /*
     * El naranja va en dos tonos porque tiene dos trabajos distintos.
     *
     * `--esc-acento` es el de la tienda, y sirve para **superficies**: el fondo
     * del boton, el aro de foco, el filo de la categoria activa. Sobre el boton
     * lleva encima tinta oscura (5.93:1) y el aro de foco va acompañado de un
     * halo oscuro, asi que se ve.
     *
     * Ese mismo naranja **como texto sobre blanco da 2.64:1** y no llega al 4.5
     * que exige un texto. Lo pillo el auditor de contraste al usarlo en el
     * antetitulo «Escaparate». `--esc-acento-texto` es el mismo tono bajado
     * hasta 6.07:1 sobre blanco y 5.40:1 sobre el panel gris.
     */
    --esc-acento: #f28123;
    --esc-acento-texto: #a34706;
}

/* ==================================================
   PORTADA
   ================================================== */
.portada-especies {
    max-width: 1400px;
    /* 100px libra la barra fija de navegacion. */
    margin: 100px auto 0;
    padding: 3rem 1.25rem 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    border-bottom: 1px solid var(--esc-borde);
}

.portada-especies__texto {
    /* 60ch: la medida a la que un parrafo se lee sin perder el renglon. */
    max-width: 60ch;
}

.portada-especies__ojo {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--texto-xs);
    font-weight: var(--peso-semi);
    color: var(--esc-acento-texto);
    margin-bottom: 0.5rem;
}

.portada-especies__titulo {
    font-size: var(--titulo-2);
    font-weight: var(--peso-fuerte);
    line-height: var(--interlineado-titulo);
    color: var(--secondary-color);
    margin-bottom: 0.75rem;
}

.portada-especies__intro {
    font-size: var(--texto-md);
    line-height: var(--interlineado-base);
    color: var(--esc-tinta-suave);
}

.portada-especies__datos {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 0;
}

.portada-especies__dato {
    /* El valor va arriba y la etiqueta abajo, pero en el marcado la etiqueta es
       el `<dt>` y va primero, que es lo que corresponde a una lista de
       definiciones. Un lector de pantalla lee «especies: 7», bien; la vista lo
       invierte solo para el ojo. */
    display: flex;
    flex-direction: column-reverse;
}

.portada-especies__valor {
    margin: 0;
    font-size: var(--titulo-3);
    font-weight: var(--peso-fuerte);
    line-height: 1;
    color: var(--secondary-color);
}

.portada-especies__etiqueta {
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--esc-tinta-suave);
    margin-top: 0.35rem;
}

/* ==================================================
   MAQUETA
   ================================================== */
.escaparate {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    display: grid;
    /* `minmax(0, 1fr)` y no `1fr`: en una reja, el minimo de una pista es
       `auto`, o sea el `min-content` de lo que lleva dentro, y una tarjeta con
       un nombre largo empujaba la columna hasta desbordar la pagina. */
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

/* ==================================================
   MENU DE CATEGORIAS
   ==================================================

   En escritorio es la columna de la izquierda, fija al hacer scroll. En celular
   es una fila de fichas encima de la cuadricula (ver el punto de corte).
   ================================================== */
.menu-especies {
    position: sticky;
    /* 100px de barra fija mas un respiro. */
    top: 110px;
}

.menu-especies__titulo {
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--esc-tinta-suave);
    font-weight: var(--peso-semi);
    margin-bottom: 0.75rem;
}

.menu-especies__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu-especies__enlace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--esc-radio-chico);
    text-decoration: none;
    color: var(--text-color);
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.menu-especies__enlace:hover {
    background: var(--esc-panel);
}

.menu-especies__enlace.es-activa {
    background: var(--esc-panel);
    border-left-color: var(--esc-acento);
}

.menu-especies__nombre {
    font-weight: var(--peso-medio);
}

.menu-especies__enlace.es-activa .menu-especies__nombre {
    font-weight: var(--peso-semi);
}

.menu-especies__cuantas {
    font-size: var(--texto-xs);
    color: var(--esc-tinta-suave);
    font-variant-numeric: tabular-nums;
}

.menu-especies__ayuda {
    grid-column: 1 / -1;
    font-size: var(--texto-xs);
    color: var(--esc-tinta-suave);
    line-height: var(--interlineado-medio);
}

/* ==================================================
   BARRA DE BUSQUEDA
   ================================================== */
.barra-especies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.buscador-especies {
    position: relative;
    display: flex;
    align-items: center;
    width: min(22rem, 100%);
}

.buscador-especies__lupa {
    position: absolute;
    left: 0.9rem;
    color: var(--esc-tinta-suave);
    pointer-events: none;
}

.buscador-especies__campo {
    width: 100%;
    /* 2.6rem de sangria a la izquierda para que el texto no pise la lupa. */
    padding: 0.7rem 1rem 0.7rem 2.6rem;
    min-height: 44px;
    font-size: var(--texto-sm);
    color: var(--text-color);
    background: var(--white);
    border: 1px solid var(--esc-borde);
    border-radius: 999px;
}

.buscador-especies__campo::placeholder {
    color: var(--esc-tinta-suave);
}

.barra-especies__conteo {
    font-size: var(--texto-sm);
    color: var(--esc-tinta-suave);
    font-variant-numeric: tabular-nums;
}

/* ==================================================
   CUADRICULA DE ESPECIES
   ================================================== */
.rejilla-especies {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.especie {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--esc-borde);
    border-radius: var(--esc-radio);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Sin esto la tarjeta no se oculta: el `display: flex` de arriba es una regla
   de autor y gana al `[hidden] { display: none }` de la hoja del navegador. Es
   el mismo defecto que aparecio en las tarjetas de la tienda. */
.especie[hidden] {
    display: none;
}

.especie:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.especie__foto {
    /* Las diecinueve fotos del catalogo son de 500x600. Fijar la proporcion en
       5/6 hace que `cover` no recorte nada y que la cuadricula no baile
       mientras cargan. */
    aspect-ratio: 5 / 6;
    background: var(--esc-panel);
    overflow: hidden;
}

.especie__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.especie:hover .especie__foto img {
    transform: scale(1.04);
}

.especie__datos {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.especie__nombre {
    font-size: var(--texto-md);
    font-weight: var(--peso-semi);
    line-height: var(--interlineado-titulo);
    color: var(--secondary-color);
}

.especie__cientifico {
    font-size: var(--texto-sm);
    color: var(--esc-tinta-suave);
}

.especie__temporada {
    font-size: var(--texto-sm);
    color: var(--text-color);
}

.especie__etiqueta {
    display: inline-block;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--esc-tinta-suave);
    margin-right: 0.35rem;
}

.especie__nota {
    font-size: var(--texto-sm);
    line-height: var(--interlineado-medio);
    color: var(--esc-tinta-suave);
}

.rejilla-especies__vacio {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--esc-tinta-suave);
}

/* ==================================================
   BANDA QUE LLEVA A LA TIENDA
   ==================================================

   Es la respuesta a la pregunta que deja la pagina cuando se le quitan las
   latas: «y esto donde lo compro».
   ================================================== */
.banda-tienda {
    margin-top: 3rem;
    padding: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: var(--secondary-color);
    color: var(--white);
    border-radius: var(--esc-radio);
}

.banda-tienda__titulo {
    font-size: var(--texto-lg);
    font-weight: var(--peso-semi);
    margin-bottom: 0.35rem;
}

.banda-tienda__texto {
    font-size: var(--texto-sm);
    line-height: var(--interlineado-medio);
    max-width: 56ch;
    /* Sobre el azul oscuro, blanco al 82 % compone #d6d8de y da 10.15:1. */
    color: rgba(255, 255, 255, 0.82);
}

.banda-tienda__boton {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--esc-radio-chico);
    background: var(--esc-acento);
    /* Tinta oscura sobre el naranja: 5.93:1. Blanco sobre el mismo naranja da
       2.6:1 y no pasa el minimo. */
    color: #17233a;
    font-weight: var(--peso-semi);
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.2s ease;
}

.banda-tienda__boton:hover {
    filter: brightness(1.08);
}

/* ==================================================
   FOCO
   ==================================================

   El mismo anillo de dos tonos de la tienda: el naranja se ve sobre los fondos
   claros y el aro oscuro por fuera lo salva sobre el naranja del boton, donde
   el naranja solo seria invisible.
   ================================================== */
.menu-especies__enlace:focus-visible,
.buscador-especies__campo:focus-visible,
.banda-tienda__boton:focus-visible {
    outline: 3px solid var(--esc-acento);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(23, 35, 58, 0.9);
}

/* ==================================================
   PANTALLAS ANGOSTAS
   ==================================================

   Un solo punto de corte. La cuadricula de especies ya se adapta sola con
   `auto-fill`, asi que lo unico que necesita cambiar es la maqueta de dos
   columnas y la forma del menu.
   ================================================== */
@media (max-width: 900px) {
    .portada-especies {
        margin-top: 84px;
        padding: 2rem 1rem 1.5rem;
        gap: 1.5rem;
    }

    .portada-especies__titulo {
        font-size: var(--titulo-3);
    }

    .portada-especies__datos {
        gap: 1.5rem;
    }

    /* A tamaño de escritorio, «La Bocana» no cabe con los otros dos y se caia
       sola a un segundo renglon, separada de la fila de datos a la que
       pertenece. */
    .portada-especies__valor {
        font-size: var(--texto-lg);
    }

    .escaparate {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 1.5rem 1rem 3rem;
    }

    /* De columna a fila de fichas, encima de la cuadricula. Deja de estar
       pegada: una barra fija se come media pantalla de un telefono. */
    .menu-especies {
        position: static;
    }

    .menu-especies__lista {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .menu-especies__enlace {
        border: 1px solid var(--esc-borde);
        border-left-width: 1px;
        border-radius: 999px;
        padding: 0.55rem 0.95rem;
        gap: 0.4rem;
        /* La ficha se mide por su contenido, no por el ancho de la fila. */
        grid-template-columns: auto auto;
    }

    .menu-especies__enlace.es-activa {
        border-color: var(--esc-acento);
        background: var(--esc-panel);
    }

    /* La descripcion de la categoria no cabe en una ficha. Se queda en el
       marcado para quien use lector de pantalla. */
    .menu-especies__ayuda {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .barra-especies {
        margin-bottom: 1.25rem;
    }

    .buscador-especies {
        width: 100%;
    }

    .rejilla-especies {
        grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
        gap: 1rem;
    }

    .especie__datos {
        padding: 0.85rem 0.9rem 1rem;
    }

    .especie__nombre {
        font-size: var(--texto-base);
    }

    .banda-tienda {
        margin-top: 2rem;
        padding: 1.5rem 1.25rem;
    }

    .banda-tienda__boton {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .especie,
    .especie__foto img,
    .menu-especies__enlace,
    .banda-tienda__boton {
        transition: none;
    }

    .especie:hover {
        transform: none;
    }

    .especie:hover .especie__foto img {
        transform: none;
    }
}

@media print {
    .menu-especies,
    .barra-especies,
    .banda-tienda {
        display: none;
    }

    .escaparate {
        grid-template-columns: minmax(0, 1fr);
    }

    .especie {
        break-inside: avoid;
    }
}