/* ==========================================================================
   Magnus Innova — hoja de estilos única
   ==========================================================================
   Sistema tomado de la referencia que pidió el cliente (row.representclo.com),
   medido sobre su CSS:

     · Monocromo estricto: #FFFFFF, #0D0E0E y una rampa de grises. Sin color de
       marca. El color lo pone el producto, que es de lo que va una tienda de ropa.
     · A sangre total: sin contenedor centrado, sin medianiles. Las rejillas van
       de borde a borde y se separan con filetes de 1 px, no con tarjetas.
     · Tipografía diminuta: etiquetas de 10 px en versalitas, cuerpo de 13 px y
       el titular mayor en 32 px. Es lo más contraintuitivo de la referencia y
       lo que le da el aire de catálogo de moda.

   Sustitución tipográfica: STKBureau y STKBureauSerif son comerciales. En su
   lugar, Archivo —una grotesca que aguanta bien los 10 px— e Instrument Serif
   para la única línea editorial de cada página.
   ========================================================================== */

:root {
  /* Paleta de la marca, tomada de las piezas de redes del propio cliente:
     fondo casi negro con sesgo azul, y el azul eléctrico del logotipo. */
  --tinta: #F2F6FA;          /* texto sobre el fondo oscuro */
  --papel: #0A0E14;          /* el fondo del sitio */
  --superficie: #111823;     /* bloques alternos */
  --humo: #F1F4F7;           /* solo las fichas de producto: el mockup viene sobre fondo claro */
  --gris: #8FA3B5;
  --gris-claro: #63798C;
  --filete: #1E2A38;
  --filete-claro: #D8DEE5;   /* filetes dentro de las fichas claras */
  --azul: #2F9BFF;
  --azul-claro: #6FBBFF;
  --azul-oscuro: #1B7FD8;
  --sobre-azul: #05101B;

  --sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --barra-alto: 46px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--azul-claro); }

h1, h2, h3 { font-weight: 500; margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(26px, 5vw, 32px); text-wrap: balance; }
h2 { font-size: clamp(20px, 3.4vw, 26px); text-wrap: balance; }
h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
p { margin: 0 0 12px; }

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

.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 12px; top: 12px; z-index: 100; background: var(--azul); color: var(--sobre-azul); padding: 10px 14px; }

/* ---------- Etiquetas: la unidad tipográfica que sostiene el sistema ---------- */
.etiqueta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 10px;
}

.lead { font-size: 15px; line-height: 1.55; max-width: 62ch; color: var(--tinta); }
.nota { font-size: 11px; color: var(--gris); max-width: 70ch; }

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: var(--barra-alto);
  padding: 0 14px;
  background: rgba(10, 14, 20, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filete);
}
.marca { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.marca img { height: 22px; width: auto; }
.marca span { color: var(--tinta); }
.marca span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.marca:hover { text-decoration: none; }

.menu { display: none; margin-left: auto; gap: 22px; }
.menu a {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gris);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--azul-claro); text-decoration: none; }
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.menu-boton {
  margin-left: auto; background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta);
}
.barra-cta {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--azul); color: var(--azul-claro); padding: 7px 12px;
}
.barra-cta:hover { background: var(--azul); color: var(--sobre-azul); text-decoration: none; }

@media (min-width: 900px) {
  .menu { display: flex; }
  .menu-boton { display: none; }
  .barra { padding: 0 22px; gap: 28px; }
}
@media (max-width: 899px) {
  .menu.abierto {
    display: grid; position: absolute; left: 0; right: 0; top: var(--barra-alto);
    background: var(--papel); border-bottom: 1px solid var(--filete); padding: 6px 14px 14px;
  }
  .menu.abierto a { padding: 12px 0; border-bottom: 1px solid var(--filete); font-size: 12px; }
}

/* ---------- Portada ---------- */
.hero { position: relative; background: var(--tinta); }
.hero img { width: 100%; height: 78svh; min-height: 460px; object-fit: cover; opacity: .92; }
.hero-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 16px 26px;
  color: #fff;
  background: linear-gradient(to top, rgba(13,14,14,.72), rgba(13,14,14,0));
}
.hero-texto .etiqueta { color: rgba(255,255,255,.7); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero-linea { font-size: 13px; color: rgba(255,255,255,.82); max-width: 46ch; margin-top: 10px; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (min-width: 900px) {
  .hero-texto { padding: 40px 22px 34px; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 20px; border: 1px solid var(--azul); background: transparent; color: var(--azul-claro);
}
.btn:hover { background: var(--azul); color: var(--sobre-azul); text-decoration: none; }
.btn-negro { background: var(--azul); color: var(--sobre-azul); border-color: var(--azul); }
.btn-negro:hover { background: var(--azul-claro); color: var(--sobre-azul); border-color: var(--azul-claro); }
.btn-vidrio {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.btn-vidrio:hover { background: #fff; color: var(--tinta); border-color: #fff; }

/* ---------- Tira de categorías ---------- */
.tira { display: grid; border-bottom: 1px solid var(--filete); }
.tira a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px 16px; border-top: 1px solid var(--filete);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
}
.tira a:first-child { border-top: 0; }
.tira .num { font-size: 10px; color: var(--gris-claro); letter-spacing: .1em; }
.tira .desde { margin-left: auto; font-size: 10px; color: var(--gris); letter-spacing: .1em; text-transform: uppercase; }
.tira a:hover { background: var(--superficie); color: var(--azul-claro); text-decoration: none; }
@media (min-width: 900px) {
  .tira { grid-template-columns: repeat(3, 1fr); }
  .tira a { border-top: 0; border-left: 1px solid var(--filete); padding: 22px; }
  .tira a:first-child { border-left: 0; }
}

/* ---------- Bloques ---------- */
.bloque { padding: 54px 0 60px; }
.bloque-humo { background: var(--superficie); }
.bloque-cab { padding: 0 16px 26px; max-width: 720px; }
@media (min-width: 900px) { .bloque { padding: 88px 0 92px; } .bloque-cab { padding: 0 22px 34px; } }

.titular { padding: 44px 16px 30px; border-bottom: 1px solid var(--filete); }
.titular .lead { margin-top: 12px; }
.titular .nota { margin-top: 14px; }
@media (min-width: 900px) { .titular { padding: 76px 22px 44px; } }

.editorial {
  padding: 60px 16px; text-align: center;
  border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete);
}
.editorial p {
  font-family: var(--serif); font-size: clamp(21px, 3.6vw, 30px); line-height: 1.25;
  max-width: 22ch; margin: 0 auto; letter-spacing: -0.01em;
}

/* ---------- Rejilla de producto ---------- */
.rejilla-4, .rejilla-3 {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--filete);
}
@media (min-width: 900px) {
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
}

.producto {
  display: block; border-right: 1px solid var(--filete); border-bottom: 1px solid var(--filete);
  background: var(--humo); color: #0D0E0E;
}
.producto:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .producto:nth-child(2n) { border-right: 1px solid var(--filete); }
  .rejilla-4 .producto:nth-child(4n) { border-right: 0; }
}
.producto:hover { text-decoration: none; }
.producto-foto { display: block; background: var(--humo); overflow: hidden; }
.producto-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 8px;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.producto:hover .producto-foto img { transform: scale(1.035); }
.producto-pie {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 10px 12px 14px;
}
.producto-nombre { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.producto-precio { font-size: 11px; color: #4A5B6D; font-variant-numeric: tabular-nums; }

.mas { padding: 22px 16px 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.mas a { border-bottom: 1px solid var(--azul); color: var(--azul-claro); }
.mas a:hover { text-decoration: none; opacity: .6; }
@media (min-width: 900px) { .mas { padding: 26px 22px 0; } }

/* ---------- Galería ---------- */
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--humo); padding: 10px;
  border-right: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }
@media (min-width: 900px) {
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .galeria-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tabla de precios ---------- */
.linea { padding: 44px 0 10px; border-top: 1px solid var(--filete); }
.linea-cab { padding: 0 16px 20px; max-width: 720px; }
@media (min-width: 900px) { .linea { padding: 64px 0 16px; } .linea-cab { padding: 0 22px 26px; } }

.tabla-precios { border-top: 1px solid var(--filete); }
.fila {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--filete); align-items: baseline;
}
.fila:hover { background: var(--superficie); }
.fila-ref { font-size: 10px; letter-spacing: .1em; color: var(--gris-claro); text-transform: uppercase; }
.fila-nombre { font-size: 13px; font-weight: 500; }
.fila-desc { grid-column: 1 / -1; font-size: 11px; color: var(--gris); max-width: 78ch; }
.fila-precio { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fila-cab { background: var(--superficie); }
.fila-cab span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
@media (min-width: 900px) {
  .fila { grid-template-columns: 92px 1fr auto; padding: 15px 22px; }
  .fila-desc { grid-column: 2 / 3; }
  .tabla-precios:not(.tabla-ancha) .fila { grid-template-columns: 1fr auto; }
  .tabla-precios:not(.tabla-ancha) .fila-desc { grid-column: 1 / 2; }
}

/* ---------- Combos ---------- */
.combo { padding: 24px 16px 28px; border-right: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }
.combo h3 { margin-bottom: 10px; }
.combo p { font-size: 12px; color: var(--gris); }
.combo-precio { font-size: 13px; color: var(--tinta); margin-top: 14px; }
.combo-precio s { color: var(--gris-claro); }
.combo-precio b { font-weight: 600; font-variant-numeric: tabular-nums; }
.combo-precio span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
@media (min-width: 900px) { .combo { padding: 30px 22px 34px; } }

/* ---------- Temas ---------- */
.temas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--filete); }
.temas li {
  padding: 16px; border-right: 1px solid var(--filete); border-bottom: 1px solid var(--filete);
  font-size: 12px; letter-spacing: .04em;
}
@media (min-width: 900px) { .temas { grid-template-columns: repeat(4, 1fr); } .temas li { padding: 20px 22px; } }

/* ---------- Contacto ---------- */
.contacto-rejilla { display: grid; border-top: 1px solid var(--filete); }
@media (min-width: 900px) { .contacto-rejilla { grid-template-columns: 1fr 1fr; } }
.contacto-datos { padding: 34px 16px 40px; border-bottom: 1px solid var(--filete); }
@media (min-width: 900px) { .contacto-datos { padding: 56px 22px; border-right: 1px solid var(--filete); border-bottom: 0; } }
.datos { list-style: none; margin: 22px 0 0; padding: 0; }
.datos li { padding: 14px 0; border-top: 1px solid var(--filete); font-size: 13px; }
.datos .etiqueta { display: block; margin-bottom: 4px; }

/* ---------- Formulario ---------- */
.formulario { padding: 34px 16px 44px; display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) { .formulario { padding: 56px 22px; } }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.campo input, .campo select, .campo textarea {
  font-family: var(--sans); font-size: 13px; padding: 11px 12px;
  border: 1px solid #2E3D4E; background: var(--superficie); color: var(--tinta); width: 100%;
  border-radius: 0;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); outline: 2px solid rgba(47,155,255,.35); outline-offset: 1px; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila-2 label { display: block; margin-bottom: 6px; }
.casilla { grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.casilla input { width: 15px; height: 15px; margin-top: 3px; }
.casilla label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; color: var(--tinta); line-height: 1.5; }
.casilla label a { border-bottom: 1px solid var(--azul); color: var(--azul-claro); }
.req { color: var(--azul); }
.aviso-form { font-size: 11px; color: var(--gris); min-height: 1.4em; }

/* ---------- Texto legal ---------- */
.texto-legal { padding: 34px 16px 60px; max-width: 74ch; }
.texto-legal h2 { font-size: 15px; margin: 30px 0 10px; }
.texto-legal ul { margin: 0 0 14px; padding-left: 18px; }
.texto-legal li { margin-bottom: 6px; }
@media (min-width: 900px) { .texto-legal { padding: 56px 22px 88px; } }

/* ---------- Cierre ---------- */
.cierre {
  padding: 60px 16px 70px; text-align: center;
  border-top: 1px solid var(--filete); background: var(--superficie);
}
.cierre h2 { margin-bottom: 12px; }
.cierre p { font-size: 13px; color: var(--gris); max-width: 52ch; margin: 0 auto 22px; }
@media (min-width: 900px) { .cierre { padding: 90px 22px 96px; } }

/* ---------- Aviso interno de maqueta ---------- */
.pendiente {
  margin: 20px 16px; padding: 12px 14px;
  border: 1px dashed #C08A00; background: #1D1704;
  font-size: 11px; line-height: 1.5; color: #F0C96A;
}
.pendiente b { letter-spacing: .1em; text-transform: uppercase; font-size: 10px; margin-right: 6px; }
@media (min-width: 900px) { .pendiente { margin: 24px 22px; } }

/* ---------- Pie ---------- */
.pie { background: var(--superficie); color: var(--gris); padding: 46px 0 0; border-top: 1px solid var(--filete); }
.pie-rejilla { display: grid; gap: 30px; padding: 0 16px 34px; }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 0 22px 46px; } }
.pie h2 { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); margin-bottom: 14px; font-weight: 600; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; font-size: 12px; }
.pie a:hover { color: var(--azul-claro); }
.pie-logo { height: 30px; width: auto; opacity: .95; }
.pie-eslogan { font-family: var(--serif); font-size: 22px; color: var(--tinta); margin: 14px 0 8px; }
.pie-nota { font-size: 12px; max-width: 40ch; }
.pie-legal {
  border-top: 1px solid var(--filete); padding: 16px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
@media (min-width: 900px) { .pie-legal { padding: 18px 22px; } }

/* ---------- WhatsApp ---------- */
.wasap {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--azul); border-radius: 50%;
}
.wasap svg { width: 22px; height: 22px; fill: var(--sobre-azul); }
.wasap:hover { background: #25D366; }
.wasap:hover svg { fill: #08331A; }

@media print {
  .barra, .wasap, .pendiente, .hero-acciones { display: none !important; }
  body { font-size: 10pt; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Apertura a pantalla completa, marquesina y bandas
   ==========================================================================
   La referencia abre con una imagen que ocupa toda la ventana y el texto
   pequeño abajo a la izquierda. Aquí igual, con el banner compuesto a partir
   de la foto de calle del propio cliente.
   ========================================================================== */

.hero img {
  height: calc(100svh - var(--barra-alto));
  min-height: 520px;
  max-height: 900px;
}
@media (max-width: 640px) {
  .hero img { height: calc(88svh - var(--barra-alto)); min-height: 460px; }
  .hero h1 { font-size: 24px; }
}

/* Marquesina: la tira que recorre el ancho. Es el único movimiento del sitio. */
.marquesina {
  overflow: hidden; border-bottom: 1px solid var(--filete);
  background: var(--superficie); padding: 11px 0;
}
.marquesina-pista {
  display: flex; gap: 22px; width: max-content;
  animation: correr 42s linear infinite;
}
.marquesina-pista span {
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris); white-space: nowrap;
}
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquesina-pista { animation: none; }
}

/* Bandas compuestas: van a sangre, sin margen ni redondeo. */
.banner { display: block; border-top: 1px solid var(--filete); }
.banner img { width: 100%; height: auto; display: block; }
.banner-baja img { max-height: 260px; object-fit: cover; }
@media (max-width: 640px) {
  .banner img { max-height: 320px; object-fit: cover; }
}

/* ---------- Filas que llevan a WhatsApp con el producto escrito ---------- */
.fila-enlace { text-decoration: none; color: inherit; }
.fila-enlace:hover { text-decoration: none; background: var(--superficie); }
.fila-cotizar {
  display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-claro); margin-top: 2px;
}
.fila-enlace:hover .fila-cotizar { color: var(--azul-claro); }

/* ---------- Pasos del proceso ---------- */
.pasos { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--filete); }
.paso {
  padding: 22px 16px 26px;
  border-bottom: 1px solid var(--filete);
}
.paso h3 { margin: 4px 0 8px; }
.paso p { font-size: 12px; color: var(--gris); max-width: 62ch; margin: 0; }
@media (min-width: 700px) { .pasos { grid-template-columns: repeat(2, 1fr); } .paso { border-right: 1px solid var(--filete); } }
@media (min-width: 1100px) { .pasos { grid-template-columns: repeat(3, 1fr); } .paso { padding: 28px 22px 34px; } }


/* ---------- Mosaico de campañas ---------- */
.campanas { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--filete); }
.campanas img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-right: 1px solid var(--filete); border-bottom: 1px solid var(--filete);
}
@media (min-width: 700px) { .campanas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .campanas { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Feed de Instagram (lo pinta el plugin) ---------- */
.feed-instagram { border-top: 1px solid var(--filete); }
.feed-instagram:empty { display: none; border: 0; }
.feed-instagram #sb_instagram { padding-bottom: 0 !important; }

/* ==========================================================================
   Temas de estampado — cada uno con su propio aire
   ==========================================================================
   El cliente pidió que se notara el matiz: que rock no se viera como comics ni
   comics como bebés. Sin logotipos ni personajes de terceros —eso exige
   licencia—, así que la diferencia la ponen la tipografía y la textura, hechas
   en CSS. Cuando haya ilustración propia de cada tema, entra encima sin tocar
   esta estructura.
   ========================================================================== */

.temas {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--filete); list-style: none; margin: 0; padding: 0;
}
@media (min-width: 760px) { .temas { grid-template-columns: repeat(3, 1fr); } }

.tema {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-right: 1px solid var(--filete); border-bottom: 1px solid var(--filete);
  background: var(--papel);
}
.tema:hover { text-decoration: none; }
.tema-marco {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 4 / 3; padding: 16px; isolation: isolate;
}
.tema-nombre {
  position: relative; z-index: 2; text-align: center;
  font-size: clamp(19px, 3vw, 26px); line-height: 1.05; color: #fff;
}
.tema-pie {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px 16px; border-top: 1px solid var(--filete);
}
.tema-que { font-size: 11px; color: var(--gris); line-height: 1.5; }
.tema-cta {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-claro);
}
.tema:hover .tema-cta { color: var(--azul-claro); }
.tema:hover .tema-marco { filter: brightness(1.12); }
.tema-marco { transition: filter .25s ease; }

/* ---- Rock: peso, mayúsculas apretadas y grano ---- */
.tema-rock .tema-marco { background: #0B0B0C; }
.tema-rock .tema-marco::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .5;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
.tema-rock .tema-nombre {
  font-weight: 600; text-transform: uppercase; letter-spacing: -.04em;
  transform: scaleY(1.25); font-size: clamp(22px, 3.4vw, 30px);
}

/* ---- Anime: líneas de velocidad y degradado ---- */
.tema-anime .tema-marco {
  background: linear-gradient(135deg, #0F1D3D 0%, #1B3A8A 55%, #6C2BD9 100%);
}
.tema-anime .tema-marco::before {
  content: ""; position: absolute; inset: -20%; z-index: 1; opacity: .45;
  background: repeating-linear-gradient(72deg, rgba(255,255,255,.55) 0 1px, transparent 1px 9px);
}
.tema-anime .tema-nombre { font-style: italic; font-weight: 600; letter-spacing: .02em; }

/* ---- Comics: trama de puntos y sombra dura ---- */
.tema-comics .tema-marco { background: #12304F; }
.tema-comics .tema-marco::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.5) 1.4px, transparent 1.5px);
  background-size: 8px 8px;
}
.tema-comics .tema-nombre {
  font-weight: 600; text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 3px 3px 0 #05101B;
}

/* ---- Series animadas: bloques de color ---- */
.tema-series .tema-marco {
  background:
    conic-gradient(from 210deg at 20% 25%, #2F9BFF 0 25%, transparent 0 100%),
    conic-gradient(from 30deg at 80% 78%, #17C7A6 0 25%, transparent 0 100%),
    #101A26;
}
.tema-series .tema-nombre { font-weight: 600; letter-spacing: -.01em; }

/* ---- Películas: formato cine, tipografía fina ---- */
.tema-peliculas .tema-marco { background: #0B0F14; }
.tema-peliculas .tema-marco::before,
.tema-peliculas .tema-marco::after {
  content: ""; position: absolute; left: 0; right: 0; height: 17%; background: #000; z-index: 1;
}
.tema-peliculas .tema-marco::before { top: 0; }
.tema-peliculas .tema-marco::after { bottom: 0; }
.tema-peliculas .tema-nombre {
  font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  font-size: clamp(13px, 1.8vw, 17px); color: #E8EDF2;
}

/* ---- Deportivas: dorsal de camiseta ---- */
.tema-deportivas .tema-marco { background: #0E2438; }
.tema-deportivas .tema-marco::before {
  content: "10"; position: absolute; z-index: 1; inset: 0;
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 600; font-size: 140px; line-height: 1;
  color: rgba(47,155,255,.22); letter-spacing: -.06em;
}
.tema-deportivas .tema-nombre { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(15px, 2.2vw, 20px); }

/* ---- Temporadas: de frío a cálido ---- */
.tema-temporadas .tema-marco { background: linear-gradient(160deg, #123A63 0%, #1F6F8B 45%, #C1743A 100%); }
.tema-temporadas .tema-marco::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .55;
  background-image: radial-gradient(rgba(255,255,255,.85) 1px, transparent 1.2px);
  background-size: 26px 26px;
}
.tema-temporadas .tema-nombre { font-weight: 500; }

/* ---- Bebés: el único claro, y a propósito ---- */
.tema-bebes .tema-marco { background: linear-gradient(150deg, #EAF3FB 0%, #F7F1EC 100%); }
.tema-bebes .tema-nombre { color: #2A4A63; font-weight: 500; letter-spacing: .01em; }

/* ---- Empresariales: sobrio, sin textura ---- */
.tema-empresariales .tema-marco { background: #0F1620; }
.tema-empresariales .tema-marco::before {
  content: ""; position: absolute; z-index: 1; inset: 18px; border: 1px solid rgba(255,255,255,.22);
}
.tema-empresariales .tema-nombre {
  font-weight: 500; text-transform: uppercase; letter-spacing: .18em;
  font-size: clamp(12px, 1.7vw, 15px);
}

/* ---------- Portada de cada tema ---------- */
.tema-portada { display: grid; border-bottom: 1px solid var(--filete); }
.tema-portada .tema-marco { aspect-ratio: 16 / 9; }
.tema-portada .tema-nombre { font-size: clamp(30px, 7vw, 64px); }
.tema-portada-texto { padding: 26px 16px 34px; }
.tema-portada-texto h1 { margin-bottom: 10px; }
.tema-portada-texto .etiqueta a { color: var(--azul-claro); }
.tema-portada .hero-acciones { margin-top: 18px; }
@media (min-width: 900px) {
  .tema-portada { grid-template-columns: 1.1fr .9fr; align-items: stretch; }
  .tema-portada .tema-marco { aspect-ratio: auto; height: 100%; min-height: 380px; }
  .tema-portada-texto { padding: 56px 22px; align-self: center; }
}

/* Tabla de tres columnas: prenda, adulto, niño */
.fila-tres { grid-template-columns: 1fr auto auto; }
@media (min-width: 900px) { .tabla-precios .fila-tres { grid-template-columns: 1fr 120px 120px; } }
.fila-tres .fila-precio + .fila-precio { color: var(--gris); }

/* ---------- Portada de tema con fotografía propia ---------- */
.tema-foto { display: block; background: var(--superficie); }
.tema-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
@media (min-width: 900px) { .tema-foto img { height: 100%; min-height: 420px; aspect-ratio: auto; } }

/* ---------- Ficha de tema con foto: el nombre pasa al pie ---------- */
.tema-foto img { aspect-ratio: 1 / 1; }
.tema-nombre-pie {
  font-size: 13px; font-weight: 500; color: var(--tinta); display: block; margin-bottom: 2px;
}
.tema:hover .tema-nombre-pie { color: var(--azul-claro); }
.producto-ref { display: block; font-size: 10px; color: #4A5B6D; margin-top: 3px; font-weight: 400; line-height: 1.4; }