/* ==========================================================================
   Tema — Cosméticos V2

   Cosmética de gama alta. Frente a `cosmetics`, que es blando y redondo, este
   es lo contrario en casi todo: **serif de exhibición**, versalitas muy
   espaciadas, **geometría recta** y un rosa más apagado y más profundo. Nace
   de una referencia que fijó el cliente.

   Y NO ES SOLO EL COLOR: trae su propia portada (`plantillas/index.php`), con
   otras secciones y en otro orden —la tira de servicios en su bandeja, las
   categorías con pie descriptivo, y el anuncio DESPUÉS de los productos y no
   antes, que es donde lo pone esta referencia—.

   ------------------------------------------------------------------------
   LO QUE NO SE COPIA, dicho antes que nada porque es la parte honesta. La
   referencia lleva cosas que este catálogo no tiene como DATO, y pintarlas
   sería inventar:

     · la franja de avisos de arriba (tres mensajes rotatorios)
     · las estrellas de valoración y el número de reseñas
     · el corazón de «favoritos» y el distintivo «BEST SELLER» en la ficha
     · el segundo botón del hero («EXPLORE COLLECTION»)
     · la tira de Instagram y el formulario de suscripción del pie
     · los iconos de medios de pago

   Todas son funciones del MOTOR —piden columna en la base, endpoint y
   pantalla en el panel—, no de un tema. El día que existan, cualquier tema
   podrá enseñarlas. Tampoco se parte el titular del hero en dos colores: es
   UN campo de la base, y cortarlo pediría tocar el HTML.
   ------------------------------------------------------------------------

   ------------------------------------------------------------------------
   LA TIPOGRAFÍA DE EXHIBICIÓN ES LO ÚNICO A MEDIAS, y conviene saberlo:

   El cuerpo va con **Inter**, autoalojada en el motor (variable, 47 kB, un
   solo archivo para todos los pesos). Es de licencia libre (SIL OFL 1.1) y
   sustituye a la Poppins del otro tema a propósito: la geometría redonda de
   aquella pelea con una serif de titular.

   La SERIF va, de momento, con pila del sistema. No es lo correcto —la voz de
   exhibición de una marca no se resuelve con la fuente que cada ordenador
   tenga a mano— pero aquí no había ninguna serif autoalojada ni con qué
   convertirla. Está preparado para cambiarlo: se dejan los archivos en
   `nucleo/assets/fonts/` y se descomenta el bloque de abajo. Una de licencia
   libre y del corte de la referencia sería Playfair Display o Cormorant
   Garamond.
   ------------------------------------------------------------------------
   ========================================================================== */

/* El cuerpo: Inter variable. Un solo archivo cubre de 100 a 900, así que pesa
   menos que cuatro pesos sueltos y no falta ninguno. */
@font-face {
  font-family: "InterVar";
  src: url("../../assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   EL HUECO DE LA SERIF DE VERDAD. Con los dos archivos en
   `nucleo/assets/fonts/`, se descomenta esto y se cambia `--font-titulo` de
   abajo por `"Titular", Georgia, serif`. No hay que tocar nada más.

@font-face {
  font-family: "Titular";
  src: url("../../assets/fonts/titular-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titular";
  src: url("../../assets/fonts/titular-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
--------------------------------------------------------------------------- */

:root {
  /* ------------------------------------------------------------- color
     LOS CONTRASTES ESTÁN CALCULADOS, y uno obligó a apartarse de la
     referencia: su botón rosa (#c08585) con texto blanco da 3,03:1, y ese
     botón lleva versalitas pequeñas. Se usa el rosa profundo de la misma
     familia, que da 5,08:1. El de la referencia se queda para SUPERFICIES,
     que es donde no lleva nada escrito encima.

     El gris secundario va teñido del rosa: sobre un papel cálido, un gris
     frío se ve sucio. */
  --tinta:        #241e1b;   /* 16,5:1 sobre blanco */
  --tinta-2:      #6b5e5a;   /* 6,2:1 — texto secundario */
  --tinta-3:      #9a8b86;   /* 3,3:1 — solo iconos y texto grande */

  /* LA TINTA DE LA MARCA ES EL ROSA, no un negro: en esta referencia el botón
     principal es rosa. `retail.css` la lee como PAPEL —el botón, el precio, el
     hover del título—, así que cambiarla arrastra la capa entera. */
  /* La tinta de la marca lee el color del panel, con la del tema como reserva.
     Un tema declara sus tokens DESPUÉS de la hoja del sitio, así que sin esto
     pisaba el enchufe de aquella y el color elegido volvía a no pintar nada —
     medido: 0 de 219 elementos cambiaban. El acento del tema se queda como
     está: el panel guarda un solo color, y derivar el segundo del primero
     dejaría los dos iguales. */
  --marron:       var(--marca-fondo, #a85560);   /* 5,08:1 con blanco encima */

  /* `--marron-osc` NO ES «EL ROSA UN PASO MÁS OSCURO»: es lo que el motor pone
     ENCIMA de `--ambar`. Los tres sitios que lo emparejan así son la cuenta
     atrás de la oferta, el contador del carrito y el distintivo de estado del
     pedido, y los tres son texto de 9 a 10 px.

     Escrito como el rosa profundo (#8e4450) sobre el rosa claro daba **2,24:1**
     —el peor contraste de todo el catálogo, medido en las tres páginas donde
     sale la cuenta atrás—, y no se veía como un fallo: se veía como un adorno
     rosa con algo escrito dentro. Los otros tres temas ponen ahí un tono casi
     negro y dan entre 4,66 y 8,91:1.

     Este es de la familia —un rosa muy oscuro, no un negro frío— y da 4,95:1
     sobre `--ambar`. Al tocarlo, medir contra `--ambar` y no contra el papel. */
  --marron-osc:   #3a1f24;   /* 4,95:1 sobre --ambar, que es donde va */
  --marron-claro: #c08585;

  /* El acento del panel, con el del tema como reserva. Mismo motivo que la
     tinta: un tema declara sus tokens después de la hoja del sitio, así que
     sin esto pisaba el enchufe y el pie volvía a salir del color del tema. */
  --ambar:        var(--marca-acento, #c08585);   /* el rosa de la referencia */
  --ambar-osc:    var(--marca-acento-osc, #9d4f59);   /* ya legible sobre el papel */
  --ambar-suave:  var(--marca-acento-suave, #faf2f0);

  --verde:        #2e7350;   /* 5,7:1 — el descuento */
  --rojo:         #a93a3a;   /* 6,3:1 — agotado y error */

  --papel:        #fdf8f7;
  --papel-2:      #fffdfc;
  --linea:        #efe1de;
  --linea-2:      #e0cbc7;
  --blanco:       #fff;

  /* Los alias que lee el motor. Se declaran aunque la hoja del sitio ya los
     mapee: `retail.css` los usa con valor de reserva, así que un catálogo con
     hoja mínima se vería a medias sin esto. */
  --navy:         var(--tinta);
  --turq:         var(--marron);
  --turq-dark:    var(--marron-osc);
  --ink:          var(--tinta);
  --muted:        var(--tinta-2);
  --line:         var(--linea);
  --sand:         var(--papel);

  --font: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  /* La voz de exhibición. Ver el aviso de arriba: esto es lo único provisional
     del tema. */
  --font-titulo: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* ------------------------------------------------------------ medidas
     RECTO. Es lo contrario del otro tema de cosmética y es donde más se nota:
     con las esquinas casi a cero la misma web deja de parecer una aplicación
     y empieza a parecer una marca de perfumería. No se toca `--r-pill`: ahí
     el redondeo no es decoración, es lo que distingue una etiqueta de un
     botón. */
  --r-sm:   2px;
  --r:      3px;
  --r-lg:   4px;
  --r-pill: 999px;

  --wrap: 1200px;

  /* Sombras muy contenidas y teñidas del rosa: este mundo se sostiene con
     líneas finas, no con cajas flotando. Con desplazamiento y desenfoque —un
     halo de radio cero centrado es decoración, no profundidad. */
  --sombra-sm: 0 1px 3px rgba(90, 55, 58, 0.05);
  --sombra:    0 6px 20px rgba(90, 55, 58, 0.07);
  --sombra-lg: 0 18px 44px rgba(90, 55, 58, 0.11);
}

/* ======================================================== lo estructural
   Cada selector está comprobado contra el HTML que sirve el sitio. Uno
   inventado no da error: no hace nada, y eso se lee como que el tema está a
   medias. */

/* --------------------------------------------------------- tipografía
   La serif en los titulares y en nada más. `--font` la usan también los
   campos y los botones, y ahí una serif se lee peor. */
.tema-cosmeticos-v2 h1,
.tema-cosmeticos-v2 h2,
.tema-cosmeticos-v2 h3,
.tema-cosmeticos-v2 .hero__titulo,
.tema-cosmeticos-v2 .prod-cab__titulo,
.tema-cosmeticos-v2 .oferta__titulo,
.tema-cosmeticos-v2 .ficha__titulo,
.tema-cosmeticos-v2 .marca__nombre {
  font-family: var(--font-titulo);
  font-weight: 400;
  letter-spacing: -0.012em;
}
.tema-cosmeticos-v2 .hero__titulo {
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  line-height: 1.1;
}

/* VERSALITAS ESPACIADAS en todo lo que en la referencia va en mayúsculas: la
   navegación, la categoría de la tarjeta y el nombre de una categoría. Es el
   recurso que sostiene el tono, y por eso va aquí y no en cinco reglas
   sueltas. El espaciado es generoso a propósito: unas mayúsculas apretadas se
   leen peor, no mejor. */
.tema-cosmeticos-v2 .nav__link,
.tema-cosmeticos-v2 .card__cat,
.tema-cosmeticos-v2 .catcard__titulo,
.tema-cosmeticos-v2 .footer__heading,
.tema-cosmeticos-v2 .btn {
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.tema-cosmeticos-v2 .nav__link { font-size: 0.76rem; font-weight: 500; }
.tema-cosmeticos-v2 .card__cat { font-size: 0.66rem; font-weight: 600; color: var(--ambar-osc); }

/* -------------------------------------------------------------- botones
   Rectos y en versalitas. El principal va en el rosa profundo —el de la
   referencia no aguanta texto blanco encima— y el borde del secundario es de
   1 px: por encima de eso deja de ser una marca de contorno y se convierte en
   una caja. */
.tema-cosmeticos-v2 .btn {
  border-radius: var(--r-sm);
  padding: 15px 30px;
  font-size: 0.74rem;
  font-weight: 600;
}
.tema-cosmeticos-v2 .chip {
  border-radius: var(--r-sm);
  border-width: 1px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
}

/* ------------------------------------------------------------- cabecera
   Blanca y con hilo, no del color del hero: en esta referencia la barra es
   una pieza aparte y el rubor empieza por debajo. */
.tema-cosmeticos-v2 .site-header {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

/* ----------------------------------------------------------------- hero
   El rubor cierra hacia la derecha, que es donde está la foto: así el fondo
   acompaña a la imagen en vez de pelearse con ella. */
.tema-cosmeticos-v2 .hero {
  background: linear-gradient(100deg, #fdf6f4 0%, #fbeeeb 52%, #f6e2de 100%);
}
/* Recta y a sangre: la referencia parte el hero con un canto limpio. */
.tema-cosmeticos-v2 .hero__foto { border-radius: 0; }
.tema-cosmeticos-v2 .hero__figura { align-self: stretch; }
/* El distintivo, sin píldora: un renglón de versalitas sobre el rubor, no una
   etiqueta blanca flotando.

   SOLO EN ESCRITORIO, y por lo mismo que el lead: en móvil el hero es la foto
   con el texto ENCIMA, y ahí el rosa sobre el velo oscuro se queda en 2:1. La
   hoja del sitio ya resuelve ese caso —píldora blanca, legible—, así que basta
   con no pisarla. Una media query NO suma especificidad: sin acotar, esta
   regla le ganaba dentro de la suya. */
@media (min-width: 1021px) {
  .tema-cosmeticos-v2 .hero__oferta {
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--ambar-osc);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .tema-cosmeticos-v2 .hero__oferta-icono { display: none; }
}
.tema-cosmeticos-v2 .hero__lead { max-width: 26rem; }

/* EL COLOR DEL LEAD, SOLO EN ESCRITORIO. En móvil el hero es la foto con el
   texto ENCIMA, y la hoja del sitio pone ahí `color: #fff` dentro de su media
   query — pero una media query NO SUMA ESPECIFICIDAD, así que esta regla
   (0,2,0) le ganaba a aquella (0,1,0) y dejaba el párrafo en gris sobre el
   velo oscuro: 2,01:1, ilegible. Se acota al ancho donde el fondo es claro. */
@media (min-width: 1021px) {
  .tema-cosmeticos-v2 .hero__lead { color: var(--tinta-2); }
}

/* --------------------------------------------------- la tira de servicios
   En su bandeja, con hilo y separadores entre columnas: es la pieza que la
   referencia pone justo debajo del hero, y lo que la hace legible como una
   fila de servicios —y no como tres frases sueltas— son las líneas verticales.

   El separador va con `border-left` en todas menos la primera, y de 1 px: por
   encima de eso deja de leerse como una división y empieza a leerse como el
   borde de una caja. */
.tema-cosmeticos-v2 .ventajas {
  margin: 30px 0 6px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--papel-2);
  gap: 0;
}
.tema-cosmeticos-v2 .ventaja {
  padding: 22px 26px;
  border-left: 1px solid var(--linea);
}
.tema-cosmeticos-v2 .ventaja:first-child { border-left: 0; }
.tema-cosmeticos-v2 .ventaja__icono {
  width: 38px; height: 38px;
  border-radius: 0;
  background: none;
  color: var(--ambar-osc);
}
.tema-cosmeticos-v2 .ventaja__titulo {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tema-cosmeticos-v2 .ventaja__texto { font-size: 0.8rem; }

@media (max-width: 860px) {
  /* Apiladas, el separador pasa a ser horizontal: una línea vertical entre
     filas apiladas no divide nada. */
  .tema-cosmeticos-v2 .ventaja { border-left: 0; border-top: 1px solid var(--linea); }
  .tema-cosmeticos-v2 .ventaja:first-child { border-top: 0; }
}

/* ------------------------------------------------- títulos de sección
   Con la serif y a mayor cuerpo. El aire de arriba pesa más que el de abajo:
   un titular pertenece a lo que viene después, no a lo que queda encima. */
.tema-cosmeticos-v2 .prod-cab__titulo {
  font-size: clamp(1.5rem, 2.9vw, 2.2rem);
}
/* El «ver más» de la derecha, en versalitas y con hilo debajo: en la
   referencia es un enlace, no un botón. */
.tema-cosmeticos-v2 .prod-cab__mas {
  border: 0;
  padding: 0 0 3px;
  border-bottom: 1px solid var(--linea-2);
  border-radius: 0;
  background: none;
  color: var(--tinta);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tema-cosmeticos-v2 .prod-cab__mas:hover { border-bottom-color: var(--marron); color: var(--marron); }

/* ---------------------------------------------------------- categorías
   CINCO EN FILA, con la foto arriba y un pie que describe qué hay dentro. Ese
   pie es la lista de productos de la categoría —datos de verdad— puesta en
   línea y separada por comas, que es como la enseña la referencia.

   Columnas en `minmax(180px, 1fr)`: con pocas categorías llenan la fila y con
   muchas desbordan en carril. Un porcentaje fijo dejaría el hueco de una
   tarjeta que no existe y se leería como que falta algo. */
.tema-cosmeticos-v2 .categorias--carril {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.tema-cosmeticos-v2 .categorias--carril .catcard {
  scroll-snap-align: start;
  grid-template-columns: minmax(0, 1fr);
  /* El alto de la foto va en PÍXELES. Con la fila en `1fr` cada tarjeta parte
     por un sitio distinto —el pie mide lo que mida su texto— y una categoría
     con seis productos listados empuja su foto muy por encima de otra con
     uno: cinco fotos a cinco alturas se leen como una maqueta rota. */
  grid-template-rows: 200px minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  /* El rubor detrás, para que una categoría sin foto se lea como un hueco a
     propósito y no como un agujero. */
  background: var(--ambar-suave);
}
.tema-cosmeticos-v2 .categorias--carril .catcard__foto { grid-row: 1; }
.tema-cosmeticos-v2 .categorias--carril .catcard__cuerpo {
  grid-row: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 16px 18px;
  background: var(--papel-2);
}
.tema-cosmeticos-v2 .categorias--carril .catcard__titulo {
  order: 1;
  margin: 0;
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 600;
}
/* LA LISTA, EN LÍNEA Y CON COMAS. Es el «Foundations, Primers, Concealers &
   more» de la referencia, y sale de los productos que hay de verdad en esa
   categoría — no de un texto escrito a mano.

   Recortada a dos renglones: los nombres reales son largos y sin tope una
   tarjeta acabaría midiendo el doble que la de al lado. */
.tema-cosmeticos-v2 .categorias--carril .catcard__lista {
  order: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.tema-cosmeticos-v2 .categorias--carril .catcard__lista span::after { content: ", "; }
.tema-cosmeticos-v2 .categorias--carril .catcard__lista span:last-child::after { content: ""; }
/* La cuenta y el resumen se van: el pie ya dice qué hay dentro, que es más
   útil que cuántos. */
.tema-cosmeticos-v2 .categorias--carril .catcard__items,
.tema-cosmeticos-v2 .categorias--carril .catcard__lead { display: none; }

/* --------------------------------------------------- fichas de producto
   Sin caja: la foto sobre el rubor y el texto debajo, sobre el papel. Este
   mundo se sostiene con líneas y aire, no con tarjetas flotando — poner una
   caja blanca alrededor sería el otro tema. */
.tema-cosmeticos-v2 .card__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ambar-suave);
}
.tema-cosmeticos-v2 .card__title {
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
}
.tema-cosmeticos-v2 .card__precio { font-size: 1rem; font-weight: 600; }

/* ------------------------------------------------------- anuncio de rebaja
   Después de los productos, que es donde lo pone esta referencia —y no antes,
   como el otro tema de cosmética—. Dos columnas a lo ancho de la portada, con
   la foto llenando su mitad.

   Solo cuando NO es carril: con varias en fila, dos columnas dejan el texto en
   media tarjeta peleando con la foto. A lo ancho, ese problema no existe. */
.tema-cosmeticos-v2 .oferta {
  background: linear-gradient(100deg, #fbeeeb 0%, #f6ddd9 100%);
  border: 1px solid var(--linea);
}
.tema-cosmeticos-v2 .oferta__titulo {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
}

@media (min-width: 861px) {
  .tema-cosmeticos-v2 .ofertas--grande:not(.ofertas--carril) .oferta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
  }
  .tema-cosmeticos-v2 .ofertas--grande:not(.ofertas--carril) .oferta__cuerpo {
    grid-area: 1 / 1;
    padding: 54px 26px 54px 56px;
  }
  .tema-cosmeticos-v2 .ofertas--grande:not(.ofertas--carril) .oferta__foto {
    grid-area: 1 / 2;
    height: 100%;
    min-height: 340px;
  }
}

/* --------------------------------------------------------------- carriles */
.tema-cosmeticos-v2 .coleccion__media {
  border-radius: var(--r-lg);
  background: var(--ambar-suave);
}

/* ------------------------------------------------------------------- pie
   CLARO, no oscuro. Es la diferencia más visible con el otro tema y viene de
   la referencia: un pie de rubor muy claro cierra la página sin cortarla en
   seco. Al no ser oscuro, el logotipo que toca es el de tinta y no el claro —
   pero cuál se pinta lo decide la plantilla, no la hoja, así que aquí se
   invierte el color en lugar de cambiar el archivo. */
.tema-cosmeticos-v2 .site-footer {
  background: var(--ambar-suave);
  color: var(--tinta-2);
  border-top: 1px solid var(--linea);
}
.tema-cosmeticos-v2 .site-footer a { color: var(--tinta-2); }
.tema-cosmeticos-v2 .site-footer a:hover { color: var(--marron); }
.tema-cosmeticos-v2 .footer__heading { color: var(--tinta); }
.tema-cosmeticos-v2 .footer__about { color: var(--tinta-2); }
.tema-cosmeticos-v2 .footer__bar { border-top-color: var(--linea-2); }
/* El logotipo del pie es la versión CLARA —pensada para fondo oscuro— y sobre
   este rubor desaparecería. Se invierte a tinta con un filtro en vez de pedir
   otro archivo, que sería marcado nuevo. */
.tema-cosmeticos-v2 .marca--pie .marca__logo { filter: brightness(0) saturate(100%) opacity(0.82); }
.tema-cosmeticos-v2 .marca--pie .marca__mark {
  background: var(--marron);
  color: var(--blanco);
}
.tema-cosmeticos-v2 .marca--pie .marca__nombre { color: var(--tinta); }