/* Inicio de la tienda (V3b, brief 2026-11-10 «rediseño de la vitrina»; acabado V5): encabezado, categorías, piezas, banners y confianza, con la
   estructura y el lenguaje de la referencia de Deiber (joyería editorial): títulos con la letra de títulos de la tienda, antetítulos en versalitas
   espaciadas del color de acento, texto pequeño y sobrio, filetes de 1 px, botones rectangulares (uno solo relleno por bloque), fotos protagonistas,
   sin píldoras ni sombras. Solo tokens de tienda.css y de la hoja personalizada (estilo.css), así el modo oscuro y la paleta del dueño salen
   solos; la única excepción es el velo de los banners, que va sobre una foto cualquiera y no sobre el fondo. Sin `!important`. La cuadrícula usa
   las piezas usan `.t-rejilla` (tienda-pagina.css). */
.portada { display: grid; gap: 3.5rem; }
.portada__antetitulo { margin: 0 0 .5rem; color: var(--marca); font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.portada__nombre { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 500; line-height: 1.1; letter-spacing: -.005em; }
.portada__descripcion { margin: .625rem 0 0; max-width: 60ch; color: var(--suave); font-size: .875rem; overflow-wrap: anywhere; }
.portada__encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem;
                       border-bottom: 1px solid var(--linea); }
.portada__lateral { display: grid; justify-items: end; gap: .5rem; }
.portada__sello { margin: 0; padding: .3125rem .625rem; border: 1px solid var(--linea); border-radius: var(--radio-caja); background: transparent;
                  color: var(--suave); font-size: .75rem; letter-spacing: .02em; }
/* El aviso de cobro, discreto: una línea suave con filete, no una alerta. */
.portada__nota { margin: 0; padding: .375rem .875rem; border-left: 2px solid var(--marca); color: var(--suave); font-size: .8125rem; }
/* Enlaces con «›»: texto pequeño, peso medio, área de 44 px (WCAG 2.5.8) y el subrayado de tienda.css al pasar o enfocar. */
.portada__mas, .portada__enlaces a { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; color: var(--tinta); font-size: .8125rem;
                                     font-weight: 600; letter-spacing: .02em; }
.portada__mas { font-weight: 700; text-decoration: none; text-underline-offset: .35em; }  /* subrayado solo con la opción de accesibilidad (accesibilidad.css) */
/* El botón de la sección: rectangular y con borde fino (el relleno queda para el filtro elegido). */
.portada__boton { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; padding: .5rem 1.125rem; border: 1px solid var(--tinta);
                  border-radius: var(--radio-boton); background: transparent; color: var(--tinta); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.portada__boton:hover, .portada__boton:focus-visible { background: var(--tinta); color: var(--fondo); text-decoration: none; }
.portada__seccion { display: grid; gap: 1.5rem; }
.portada__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.portada__cabeza h2, .portada__confianza h2 { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); font-weight: 500; line-height: 1.2; }
.portada__cabeza p:not(.portada__antetitulo) { margin: .375rem 0 0; color: var(--suave); font-size: .875rem; }
.portada__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: 1rem;
                border-top: 1px solid var(--linea); color: var(--suave); font-size: .8125rem; }
.portada__pie p, .portada__vacio { margin: 0; }

/* Confianza: sin caja; filete arriba, el texto a la izquierda y los enlaces en renglones con filete a la derecha (el último, con borde fino). */
.portada__confianza { display: grid; gap: 1.5rem; padding: 2.5rem 0 0; border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: transparent; }
.portada__confianza p { margin: .625rem 0 0; max-width: 62ch; color: var(--suave); font-size: .875rem; }
.portada__confianza .portada__antetitulo { margin: 0 0 .5rem; color: var(--marca); }
.portada__enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.portada__enlaces li { border-bottom: 1px solid var(--linea); }
.portada__enlaces li:last-child { margin-top: .75rem; border: 1px solid var(--tinta); border-radius: var(--radio-boton); }
.portada__enlaces a { width: 100%; justify-content: space-between; padding: 0 .25rem; }
.portada__enlaces li:last-child a { padding: 0 .875rem; }
@media (min-width: 760px) { .portada__confianza { grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); align-items: start; gap: 3rem; } }

/* Catálogo (V4, «Ver todos los productos»). Va en esta hoja porque `base.html` (de V3a) no tiene un bloque para hojas propias de una
   página; reutiliza `.portada__*`, `.t-rejilla` y `.t-prod`. Panel de filtros a la izquierda desde 900 px; debajo, arriba y plegable. */
.catalogo { display: grid; gap: .75rem; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: var(--suave); font-size: .8125rem; }
.migas li + li::before { content: "›"; content: "›" / ""; margin-right: .25rem; }  /* la flecha no se lee; donde no hay texto alternativo, queda la primera */
.migas a { display: inline-flex; align-items: center; min-height: 24px; color: var(--suave); font-weight: 500; }
.catalogo__encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--linea); }
/* Encabezado compacto (captura 109, 1536×790): las tarjetas deben verse en el primer pantallazo. */
.catalogo__encabezado .portada__nombre { font-size: 1.6rem; line-height: 1.2; }
.catalogo__encabezado .portada__descripcion { margin-top: .25rem; max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalogo__avisos { padding: .5rem .875rem; border-left: 2px solid var(--marca); background: transparent; font-size: .875rem; }
.catalogo__avisos p { margin: 0; }
.catalogo__cuerpo { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .catalogo__cuerpo { grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; } }
.filtros { border: 1px solid var(--linea); border-radius: var(--radio-caja); background: transparent; font-size: .875rem; }
@media (min-width: 900px) { .filtros { border-width: 0 1px 0 0; border-radius: 0; } .filtros__formulario { padding-left: 0; } .filtros__titulo { padding-left: 0; } }
.filtros__titulo { display: flex; align-items: center; min-height: 44px; padding: 0 1rem; cursor: pointer; }
.filtros__titulo h2 { display: inline; margin: 0; font-size: 1.125rem; font-weight: 500; }
/* `display: flex` quita el triángulo nativo: se repone uno propio que dice si el panel está abierto (no se lee: el estado lo anuncia `<details>`). */
.filtros__titulo { list-style: none; justify-content: space-between; gap: .5rem; }
.filtros__titulo::-webkit-details-marker { display: none; }
.filtros__titulo::after { content: "▾"; content: "▾" / ""; color: var(--suave); font-size: 1rem; line-height: 1; }
.filtros:not([open]) .filtros__titulo::after { content: "▸"; content: "▸" / ""; }
.filtros__formulario { display: grid; gap: .75rem; padding: 0 1rem 1rem; }
.filtros__limpiar { margin: 0; }
.filtros__limpiar a { display: inline-flex; align-items: center; min-height: 24px; font-size: .8125rem; }
.filtros__campo { display: grid; gap: .25rem; }
.filtros__campo label, .filtros__grupo legend, .catalogo__orden label { color: var(--marca); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.filtros__campo input, .catalogo__orden select { width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--borde); border-radius: var(--radio-boton); background: transparent; color: var(--tinta); font: inherit; font-size: .875rem; }
.filtros__grupo { display: grid; gap: .125rem; margin: 0; padding: 0; border: 0; }
.filtros__grupo legend { margin-bottom: .375rem; padding: 0; }
.filtros__opcion { display: flex; align-items: center; gap: .5rem; min-height: 44px; overflow-wrap: anywhere; }
.filtros__opcion input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--marca); }
.filtros__ayuda, .filtros__nota { margin: 0; color: var(--suave); font-size: .8125rem; }
.filtros .boton { width: 100%; }
.catalogo__resultados { display: grid; gap: 1rem; align-content: start; }
.catalogo__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linea); }
.catalogo__cuenta { margin: 0; font-size: .8125rem; color: var(--suave); }
.catalogo__orden { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.catalogo__orden select { width: auto; }
.catalogo__vacio { display: grid; gap: .5rem; padding: 1.5rem; border: 1px dashed var(--borde); border-radius: var(--radio-caja); background: transparent; }
.catalogo__vacio h3, .catalogo__vacio p { margin: 0; }
/* Paginación: la actual con relleno y `aria-current`, no solo con color; cada número es un objetivo de 44 px. */
.paginas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; }
.paginas a, .paginas__salto { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .75rem; border-radius: var(--radio-boton); font-size: .875rem; }
.paginas a { border: 1px solid var(--linea); background: transparent; color: var(--tinta); }
.paginas a[aria-current] { border-color: var(--tinta); background: var(--tinta); color: var(--fondo); }
.filtros__formulario :focus-visible, .catalogo__orden :focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }