/* =====================================================================
   PERFUMES RAISON — LAS LETRAS
   =====================================================================

   Las mismas dos tipografias de la tienda de siempre:
     Cormorant Garamond   los titulos (la letra con remates, elegante)
     Jost                 el texto corriente (la letra limpia)

   SE SIRVEN DESDE AQUI, no desde Google. Tres motivos: cargan mas
   rapido, la web no se cae si Google falla, y los datos de quien entra
   no se van a un tercero.

   Son fuentes VARIABLES: un solo archivo vale para varios grosores, por
   eso hay 6 archivos y no 14. Pesan 170 KB en total.

   Hay dos archivos por familia. El normal ya trae la ñ y las tildes
   (van en U+00C0-U+00FF, dentro de su tramo). El "-ext" es el juego
   ampliado para idiomas con letras raras (checo, polaco, turco): en
   espanol casi nunca hace falta. El navegador baja solo el que necesita,
   asi que en la practica se descargan unos 60 KB, no los 155.
   ===================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/cormorant-garamond-italica-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/cormorant-garamond-italica.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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/cormorant-garamond-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/cormorant-garamond.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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/cormorant-garamond-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/cormorant-garamond.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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/cormorant-garamond-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/cormorant-garamond.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;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fuentes/jost-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fuentes/jost.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;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/jost-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/jost.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;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/jost-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/jost.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;
}

/* =====================================================================
   PERFUMES RAISON — PIEL DEL DISENO
   =====================================================================

   QUE ES ESTO
   Una capa de estilo que se carga ENCIMA de /css/estilo.css y le cambia
   los colores, las tipografias y los detalles para que la web nueva se
   vea como la que esta vendiendo hoy en perfumesraison.com.co.

   DE DONDE SALE
   Es la traduccion de
     wp-content/plugins/raison-diseno/raison.css   (1791 lineas)
     wp-content/plugins/raison-diseno/raison-diseno.php
   que es como se hizo en WordPress: un plugin cuyo CSS se carga despues
   de Astra, WooCommerce y Elementor y los pisa. Aqui es lo mismo: la
   hoja base sigue mandando en la ESTRUCTURA (rejillas, tamanos, movil) y
   esta piel manda en el ASPECTO (color, letra, bordes, espacios finos).

   COMO SE QUITA
   Se borra la linea del <link> que la carga en src/plantillas.js (va
   justo despues de la de estilo.css) y la web vuelve a verse exactamente
   como estaba. No se ha tocado ni una linea de la hoja base.

   LA PALETA (los mismos valores del plugin de WordPress)
     tinta  #1c1917   texto  #57534e   suave  #8a837c
     linea  #e7e1d8   arena  #f4efe8   marfil #faf8f5
     blanco #ffffff   dorado #a8864d
     titulos: "Cormorant Garamond"      texto: "Jost"

   LAS LETRAS
   NO se piden a Google: se sirven desde este mismo servidor. Esta piel
   da por hecho que ya existen declaradas con @font-face:
     "Cormorant Garamond"  400, 500, 600 y 400 italica
     "Jost"                300, 400, 500
   ===================================================================== */

:root {
  /* --- La paleta de Raison, con sus nombres de siempre ---------------
     Se dejan tambien con el prefijo rz- porque es como se llaman en el
     plugin de WordPress: asi se puede comparar las dos hojas linea a
     linea sin traducir nada mentalmente. */
  --rz-tinta:  #1c1917;   /* el negro de la marca: titulos y botones */
  --rz-texto:  #57534e;   /* el texto que se lee de corrido */
  --rz-suave:  #8a837c;   /* lo accesorio: categorias, notas, pies */
  --rz-linea:  #e7e1d8;   /* las rayas finisimas que ordenan la pagina */
  --rz-arena:  #f4efe8;   /* el fondo calido: portada y pie */
  --rz-marfil: #faf8f5;   /* casi blanco: fondo de las fotos y cajas */
  --rz-blanco: #ffffff;
  --rz-dorado: #a8864d;   /* el acento, con cuentagotas */

  /* --- Los nombres que ya usa estilo.css ----------------------------
     Al redefinirlos aqui cambia media web sin tocar la hoja base. */
  --tinta:        var(--rz-tinta);
  --blanco:       var(--rz-blanco);
  --dorado:       var(--rz-dorado);
  --dorado-claro: #c9ab74;   /* el dorado aclarado, para fondos oscuros */
  /* El dorado de Raison sobre blanco se lee justo en texto grande. Para
     las letras pequenas que lo usan (etiquetas, avisos) se oscurece un
     poco: mismo color a la vista, pero legible. */
  --dorado-tinta: #8a6d38;
  --plata:        var(--rz-suave);
  --plata-claro:  var(--rz-linea);
  --humo:         var(--rz-marfil);
  --cobre:        var(--rz-dorado);
  --verde:        var(--rz-dorado);
  --cacao:        var(--rz-tinta);
  --cacao-suave:  var(--rz-texto);
  --nacar:        var(--rz-marfil);
  --arena:        var(--rz-arena);
  --rosa-humo:    var(--rz-linea);
  --papel:        var(--rz-marfil);
  --linea:        var(--rz-linea);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --ancho: 1240px;   /* el mismo ancho de caja que la web viva */

  /* Estas variables las usa una parte del programa que esta apagada en
     esta web (el aula). Se dejan con los colores de Raison por si algun
     dia se encienden: asi no apareceria otra marca de golpe.
     El aula y la pagina de venta de cursos: mismos colores, para que no
     parezca otra marca al entrar. */
  --aula-papel: var(--rz-marfil);
  --aula-tinta: var(--rz-tinta);
  --aula-suave: var(--rz-texto);
  --aula-linea: var(--rz-linea);
  --aula-verde: var(--rz-dorado);
  --aula-cobre: var(--dorado-tinta);

  /* El logotipo de Raison es BLANCO en su archivo original: en WordPress
     se pinta de negro con un filtro. Si el archivo que se suba a
     /marca/logotipo.svg es blanco, se cambia este valor por
     brightness(0) y el logo sale negro en toda la web. */
  --rz-logo-filtro: none;
}

/* =====================================================================
   1. BASE
   ===================================================================== */

body {
  /* En Raison el cuerpo del texto es gris topo y los titulos negros, no
     todo negro: es lo que le da el aire de perfumeria. */
  color: var(--rz-texto);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  /* Cormorant Garamond solo llega al peso 600: en 800 el navegador se
     inventa la negrilla y la letra se ensucia. Raison usa 500. */
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--rz-tinta);
}

h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.05 }
h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem) }
h3 { font-size: 1.3rem; line-height: 1.2 }

/* La palabra resaltada dentro de un titular va en italica dorada: es el
   unico adorno de toda la portada. */
em,
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--rz-dorado);
  font-weight: inherit;
}

strong, b { font-weight: 500 }

a { transition: color .2s ease, border-color .2s ease, background-color .2s ease }

::selection { background: var(--rz-arena); color: var(--rz-tinta) }

:focus-visible { outline: 1px solid var(--rz-tinta); outline-offset: 3px }

p { max-width: 62ch }

/* La etiqueta en mayusculas espaciadas: el gesto de la marca. En Raison
   va en dorado y mas separada que en la hoja base. */
.antetitulo {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--rz-dorado);
  margin: 0 0 .9rem;
}

.antetitulo a { color: inherit }
.antetitulo a:hover { color: var(--rz-tinta) }

/* La categoria encima del nombre del producto: discreta, gris. */
.etiqueta-corta {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--rz-suave);
}

.vacio, .suave { color: var(--rz-suave) }

/* =====================================================================
   2. LA FRANJA NEGRA DE ARRIBA
   En WordPress la pone el plugin con la clase rz-franja. Aqui se visten
   las dos: la barra de aviso que ya trae la plataforma (.anuncio, se
   escribe desde el panel) y la rz-franja con el enlace de WhatsApp, por
   si el chat principal anade ese trozo de HTML.
   ===================================================================== */

.anuncio,
.rz-franja {
  background: var(--rz-tinta);
  color: #e9e4dc;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 16px;
  line-height: 1.4;
}

.rz-franja a { color: #e9e4dc; text-decoration: none }
.rz-franja a:hover { color: #fff }

/* El punto que separa las dos frases */
.rz-punto { margin: 0 12px; opacity: .5 }

@media (max-width: 600px) {
  /* En el celular solo cabe el WhatsApp, que es lo que se pulsa. */
  .anuncio, .rz-franja { font-size: 10px; letter-spacing: .08em }
  .rz-franja > span:first-child,
  .rz-punto { display: none }
}

/* =====================================================================
   3. CABECERA Y MENU
   Fina, blanca, sin sombra: una sola raya abajo. El menu en mayusculas
   muy espaciadas y el dorado solo al pasar por encima.
   ===================================================================== */

.cabecera {
  background: var(--rz-blanco);
  border-bottom: 1px solid var(--rz-linea);
}

.cabecera-fila { height: 96px }

/* El logo se mide por el ancho, como en WordPress (150 px). El alto
   maximo es un seguro: si el archivo nuevo viene muy alto, no estira la
   cabecera. */
.logotipo {
  display: block;
  width: 150px;
  height: auto;
  max-width: 46vw;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
  filter: var(--rz-logo-filtro);
}

.cabecera-fila-minimal .logotipo { max-height: 48px }

.nav { gap: 0 }

.nav a {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--rz-tinta);
  padding: 0 18px;
  border-bottom: 0;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--rz-dorado);
  border-bottom: 0;
}

/* Los iconos de la derecha: buscar, cuenta, bolsa. Todos del mismo
   tamano y del color de la tinta. */
.cabecera-acciones { gap: 1.1rem }
.icono-enlace { color: var(--rz-tinta) }
.icono-enlace:hover { color: var(--rz-dorado) }
.icono { width: 19px; height: 19px }

/* El numerito de la bolsa: cuadrado y negro, como el de la web viva. */
.cuenta {
  background: var(--rz-tinta);
  color: #fff;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.abrir-cajon, .cerrar-cajon { color: var(--rz-tinta) }

/* El selector de idioma, con la misma letra del menu */
.selector-idioma summary {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.selector-idioma[open] summary { border-bottom-color: var(--rz-dorado) }

.lista-idiomas {
  background: var(--rz-blanco);
  border: 1px solid var(--rz-linea);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(28, 25, 23, .06);
  padding: 10px 0;
}

.lista-idiomas a {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem 1.2rem;
  color: var(--rz-texto);
}

.lista-idiomas a:hover { background: var(--rz-marfil); color: var(--rz-tinta) }
.lista-idiomas a[aria-current="true"] { color: var(--rz-dorado) }

@media (max-width: 959px) {
  .cabecera-fila { height: 64px }
  .logotipo { width: 118px; max-height: 44px; object-position: center }
}

/* =====================================================================
   4. LOS CAJONES QUE SE DESLIZAN (menu del movil y bolsa)
   ===================================================================== */

.cajon { background: var(--rz-blanco); border-color: var(--rz-linea) }
.cajon-cabeza { border-bottom-color: var(--rz-linea) }

.cajon-titulo {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rz-tinta);
}

.logotipo-cajon {
  display: block;
  width: 130px;
  height: auto;
  max-height: 44px;
  filter: var(--rz-logo-filtro);
}

/* En el menu del movil de Raison los enlaces NO van en serif grande:
   van en mayusculas finas, como el menu del computador. */
.cajon-menu a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rz-tinta);
  padding: 1rem 0;
  border-bottom-color: var(--rz-linea);
}

.cajon-menu a:hover { color: var(--rz-dorado) }
.cajon-menu a[aria-current="page"] { color: var(--rz-dorado) }

.tapa-cajon { background: rgba(28, 25, 23, .28) }

/* =====================================================================
   5. BOTONES
   Negro relleno, esquinas rectas, letra pequena muy espaciada. Al pasar
   por encima se vuelve dorado. El "fantasma" es el mismo con el fondo
   quitado.
   ===================================================================== */

.boton,
.form-comprar button,
.curso-boton,
.aula-boton,
.aula-form button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 0;
  padding: 15px 28px;
  background: var(--rz-tinta);
  color: #fff;
  border: 1px solid var(--rz-tinta);
  box-shadow: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.boton:hover,
.form-comprar button:hover:not(:disabled),
.curso-boton:hover,
.aula-boton:hover,
.aula-form button:hover {
  background: var(--rz-dorado);
  border-color: var(--rz-dorado);
  color: #fff;
  filter: none;
}

/* El de contorno: fondo transparente y letra negra */
.boton.fantasma {
  background: transparent;
  color: var(--rz-tinta);
  border-color: var(--rz-tinta);
}

.boton.fantasma:hover {
  background: var(--rz-tinta);
  border-color: var(--rz-tinta);
  color: #fff;
}

.boton.pequeno { padding: 10px 18px }
.boton.grande { padding: 17px 32px }

.form-comprar button:disabled,
.form-comprar button:disabled:hover {
  background: var(--rz-linea);
  border-color: var(--rz-linea);
  color: var(--rz-suave);
}

/* Sobre la portada con foto, el boton va blanco para que se lea */
.heroe.con-foto .boton {
  background: var(--rz-blanco);
  color: var(--rz-tinta);
  border-color: var(--rz-blanco);
}

.heroe.con-foto .boton:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* El enlace discreto: subrayado fino que se vuelve dorado */
.enlace-suave,
.rz-ver-todo {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rz-tinta);
  border-bottom: 1px solid var(--rz-tinta);
  padding-bottom: 3px;
  white-space: nowrap;
}

.enlace-suave:hover,
.rz-ver-todo:hover { color: var(--rz-dorado); border-bottom-color: var(--rz-dorado) }

button.enlace, .boton-copiar {
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rz-suave);
  border-bottom: 1px solid var(--rz-linea);
}

button.enlace:hover, .boton-copiar:hover {
  color: var(--rz-tinta);
  border-bottom-color: var(--rz-tinta);
}

/* =====================================================================
   6. FORMULARIOS
   Cajas de una raya, sin redondeos ni sombras. Al escribir, la raya se
   pone negra.
   ===================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  font-family: var(--sans);
  border-radius: 0;
  background: var(--rz-blanco);
  color: var(--rz-tinta);
  box-shadow: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--rz-tinta);
  outline: none;
}

.campo-compra input,
.campo-compra select,
.campo-cupon input,
.promo-campo input,
.aula-campo input,
.curso-campo input {
  border: 1px solid var(--rz-linea);
  border-radius: 0;
  background: var(--rz-blanco);
  color: var(--rz-tinta);
}

.campo-compra input:focus,
.campo-compra select:focus,
.campo-cupon input:focus,
.promo-campo input:focus,
.aula-campo input:focus,
.curso-campo input:focus {
  border-color: var(--rz-tinta);
  outline: none;
}

/* Las etiquetitas de los campos: mayusculas pequenas grises */
.campo-compra > span,
.campo-cupon span,
.promo-campo span,
.aula-campo span,
.curso-campo span,
.form-comprar label,
.form-checkout label,
.subtitulo-paso,
.sku,
.datos span {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rz-suave);
}

/* =====================================================================
   7. LA PORTADA
   Fondo arena, titular enorme en serif con una palabra en italica
   dorada, y la foto al otro lado.
   ===================================================================== */

.heroe.heroe-lado,
.heroe.sin-foto-heroe {
  background: var(--rz-arena);
}

.heroe.heroe-lado { padding: 0 }

.heroe-rejilla { gap: 0; align-items: stretch }

.heroe-lado .heroe-texto {
  max-width: 34rem;
  padding: 80px 3vw 80px 0;
  align-self: center;
}

.heroe-lado h1,
.heroe.sin-foto-heroe h1 {
  font-size: clamp(2.9rem, 5.6vw, 5.25rem);
  line-height: 1.02;
  font-weight: 400;
}

/* El ":not(.antetitulo)" no es un capricho: la etiqueta dorada de
   encima del titular tambien es un <p> hijo directo de .heroe-texto, y
   sin esto esta regla le ganaria y la dejaria gris y grande. */
.heroe-texto > p:not(.antetitulo) {
  font-size: 1rem;
  color: var(--rz-texto);
  max-width: 35rem;
}

.heroe-imagen img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  background: var(--rz-marfil);
}

/* El isotipo de la portada sin foto: pequeno y centrado */
.heroe-marca .estrella { width: 2rem; height: auto; opacity: .55 }

/* Los puntos del banner que cambia */
.heroe-punto { border-radius: 0 }
.heroe-punto.activo { background: var(--dorado-claro) }

@media (max-width: 879px) {
  .heroe-lado .heroe-texto { padding: 48px 0 56px }
  .heroe-imagen img { min-height: 340px }
}

/* =====================================================================
   8. LOS BLOQUES DE LA PORTADA
   ===================================================================== */

.bloque { padding: clamp(3.5rem, 8vw, 6.9rem) 0 }
.bloque.tenue { border-top: 1px solid var(--rz-linea) }

/* El unico bloque con fondo de color: arena, como en la web viva */
.bloque.franja { background: var(--rz-arena) }
.bloque.franja p { color: var(--rz-texto) }

.bloque > .contenedor > h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  margin-bottom: .5rem;
}

.bloque > .contenedor > h2 + p { color: var(--rz-texto) }

.rejilla { gap: 3rem 1.6rem }

/* El boton de "ver toda la tienda" que cierra un bloque de productos:
   en Raison es un enlace subrayado, no un boton con marco. */
.bloque .acciones { margin-top: 2.6rem }

.bloque .acciones .boton.fantasma {
  background: transparent;
  color: var(--rz-tinta);
  border: 0;
  border-bottom: 1px solid var(--rz-tinta);
  padding: 4px 0;
  font-size: 12px;
  letter-spacing: .16em;
}

.bloque .acciones .boton.fantasma:hover {
  background: transparent;
  color: var(--rz-dorado);
  border-bottom-color: var(--rz-dorado);
}

/* =====================================================================
   9. TARJETAS DE PRODUCTO
   Sin marco: la foto sobre marfil, el nombre en serif, el precio
   discreto y "Anadir" como enlace subrayado. Todo centrado.
   ===================================================================== */

.tarjeta { text-align: center }

/* Los frascos vienen fotografiados sobre blanco: se ven ENTEROS
   (contain) y en cuadrado, y el "multiply" borra el borde del fondo
   blanco contra el marfil de la caja. Con "cover" se les corta el
   tapon. */
.tarjeta-foto {
  aspect-ratio: 1 / 1;
  background: var(--rz-marfil);
}

.tarjeta-foto img {
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 6%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.tarjeta:hover .tarjeta-foto img { transform: scale(1.04) }

.tarjeta-cuerpo { padding-top: 1.1rem }
.tarjeta-cuerpo .etiqueta-corta { margin-bottom: .35rem; font-size: .66rem }

.tarjeta h3 {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .4rem;
  color: var(--rz-tinta);
}

.tarjeta h3 a:hover { color: var(--rz-dorado) }

.linea { font-size: .85rem; color: var(--rz-suave) }

/* Precio y boton, uno debajo del otro y centrados */
.tarjeta-pie {
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  margin-top: 1rem;
}

.precio {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--rz-texto);
}

.precio s { color: var(--rz-suave); font-weight: 400 }

.tarjeta-boton {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rz-tinta);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rz-tinta);
  padding: 4px 0;
}

.tarjeta-boton:hover { color: var(--rz-dorado); border-bottom-color: var(--rz-dorado) }

.tarjeta-boton.apagado {
  color: var(--rz-suave);
  border-bottom-color: transparent;
}

/* La pegatina de oferta: cuadrada, negra, arriba a la izquierda */
.insignia {
  top: 12px;
  left: 12px;
  background: var(--rz-tinta);
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 7px 10px;
  border-radius: 0;
}

.etiqueta {
  border-radius: 0;
  border-color: var(--rz-linea);
  color: var(--rz-suave);
  font-family: var(--sans);
  letter-spacing: .14em;
}

/* El producto sin foto hace de etiqueta: fondo marfil plano */
.etiqueta-producto { background: var(--rz-marfil) }
.etiqueta-nombre { font-family: var(--serif); font-weight: 500; color: var(--rz-tinta) }
.etiqueta-formato { color: var(--rz-suave); letter-spacing: .18em }
.sin-foto { background: var(--rz-marfil) }
.sin-foto .estrella { opacity: .4 }

@media (max-width: 767px) {
  .tarjeta h3 { font-size: 1.1rem }
  .tarjeta-cuerpo .etiqueta-corta { font-size: .6rem; letter-spacing: .1em }
}

/* =====================================================================
   10. LA TIENDA: BUSCADOR Y CATEGORIAS
   ===================================================================== */

.filtros { border-bottom-color: var(--rz-tinta) }

.filtros input { color: var(--rz-tinta); font-family: var(--sans) }
.filtros input::placeholder { color: var(--rz-suave) }

.filtros button {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--rz-tinta);
}

.filtros button:hover { color: var(--rz-dorado) }

.categorias { gap: 1.6rem; margin-bottom: 2.2rem }

.categorias a {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rz-suave);
}

.categorias a:hover { color: var(--rz-tinta) }

.categorias a.activa {
  color: var(--rz-tinta);
  border-bottom-color: var(--rz-tinta);
}

/* =====================================================================
   11. FICHA DE PRODUCTO
   ===================================================================== */

.ficha-fotos img {
  background: var(--rz-marfil);
  mix-blend-mode: multiply;
}

.ficha-fotos .sin-foto { background: var(--rz-marfil) }

.ficha-datos h1 {
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  font-weight: 500;
  margin-bottom: .6rem;
}

.sku { margin-bottom: 1.2rem }

/* El precio de la ficha: en sans, grande pero sin negrilla */
.precio.grande {
  font-family: var(--sans);
  font-size: 1.38rem;
  font-weight: 400;
  color: var(--rz-tinta);
  margin-bottom: 1.4rem;
}

.resumen { color: var(--rz-texto) }

.aviso-linea {
  border-left: 1px solid var(--rz-dorado);
  color: var(--rz-texto);
}

.aviso-fuerte { border-left-color: var(--rz-tinta); color: var(--rz-tinta) }

.valoracion-linea a { color: var(--rz-suave); border-bottom-color: var(--rz-linea) }
.valoracion-linea a:hover { color: var(--rz-dorado) }

.form-comprar {
  border-top: 1px solid var(--rz-linea);
  padding-top: 1.8rem;
}

.form-comprar select,
.form-comprar input[type="number"] {
  border-bottom-color: var(--rz-tinta);
  color: var(--rz-tinta);
  font-family: var(--sans);
}

.form-comprar .stock {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--rz-suave);
}

/* La cantidad: etiqueta encima y la casilla estrecha */
.form-comprar .cantidad { margin-bottom: 1.4rem }
.form-comprar .cantidad input { max-width: 5.5rem }

/* El color, si alguna vez se usa: la bolita con el aro negro al elegir */
.opcion-color legend { color: var(--rz-suave); letter-spacing: .16em }
.opcion-color legend .elegido { color: var(--rz-tinta) }
.bolita-elegir > span { border-color: var(--rz-blanco); box-shadow: 0 0 0 1px var(--rz-linea) }
.bolita-elegir input:checked + span { box-shadow: 0 0 0 1px var(--rz-tinta) }

/* =====================================================================
   12. LAS OPCIONES QUE SUMAN AL PRECIO  *** LO MAS IMPORTANTE ***
   En WordPress esto son los "productos compuestos": el envase, los
   gramos de esencia y las feromonas. Es donde la clienta decide cuanto
   paga, asi que tiene que leerse de un golpe: cada opcion en su propia
   fila, el precio que suma en dorado a la derecha, y la fila elegida
   con el marco negro.
   Clases reales del HTML de la plataforma:
     fieldset.opcion-extra > legend
     label.extra-una       (radio: elegir una)
     label.extra-cantidad  (numero: cuantos gramos)
     label.extra-casilla   (si/no)

   POR QUE SE ESCRIBE ".opcion-extra .extra-una" Y NO SOLO ".extra-una"
   Porque estas filas SON etiquetas (<label>) y estan dentro del
   formulario de compra, donde la hoja base dice:
     .form-comprar label { text-transform: uppercase; font-size: .66rem }
   Esa regla nombra dos cosas (una clase y una etiqueta) y por eso pesa
   mas que ".extra-una" sola: el nombre del envase salia en mayusculas
   diminutas y el precio pegado detras. Al poner el fieldset por delante
   se nombran dos clases y ya manda esta hoja.
   ===================================================================== */

.opcion-extra {
  border: 0;
  padding: 1.5rem 0 0;
  margin: 0 0 1.4rem;
  border-top: 1px solid var(--rz-linea);
}

.opcion-extra:first-of-type { border-top: 0; padding-top: 0 }

.opcion-extra legend {
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: .9rem;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rz-tinta);
}

/* El "(opcional)" que va dentro del titulo: ni dorado ni en italica,
   que es una aclaracion, no un adorno. */
.opcion-extra legend em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--rz-suave);
}

/* --- Cada fila ----------------------------------------------------- */
.opcion-extra .extra-una,
.opcion-extra .extra-casilla,
.opcion-extra .extra-cantidad {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 .5rem;
  padding: .85rem 1rem;
  border: 1px solid var(--rz-linea);
  background: var(--rz-blanco);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rz-tinta);
  transition: border-color .2s ease, background-color .2s ease;
}

.opcion-extra .extra-una:hover,
.opcion-extra .extra-casilla:hover,
.opcion-extra .extra-cantidad:hover { border-color: var(--rz-suave) }

/* La elegida se marca con el marco negro y fondo marfil: se ve sin
   tener que buscar el circulito. */
.opcion-extra .extra-una:has(input:checked),
.opcion-extra .extra-casilla:has(input:checked) {
  border-color: var(--rz-tinta);
  background: var(--rz-marfil);
}

.opcion-extra .extra-una input[type="radio"],
.opcion-extra .extra-casilla input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--rz-tinta);
}

/* El nombre de la opcion ocupa todo el hueco y empuja el precio a la
   derecha. */
.opcion-extra .extra-una > span,
.opcion-extra .extra-casilla > span,
.opcion-extra .extra-cantidad > span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}

/* Lo que suma al precio: en dorado y sin negrilla gorda */
.opcion-extra .extra-una > b,
.opcion-extra .extra-casilla > b,
.opcion-extra .extra-cantidad > b {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--dorado-tinta);
  white-space: nowrap;
}

/* Cuando se elige, el precio pasa a negro: ya esta contado en el total */
.opcion-extra .extra-una:has(input:checked) > b,
.opcion-extra .extra-casilla:has(input:checked) > b { color: var(--rz-tinta) }

/* --- La fila de cantidad (los gramos de esencia) -------------------- */
.opcion-extra .extra-cantidad { flex-wrap: wrap }

.opcion-extra .extra-cantidad input[type="number"] {
  flex: 0 0 auto;
  order: 2;
  width: 4.6rem;
  margin: 0;
  padding: .4rem .5rem;
  font: inherit;
  font-size: .95rem;
  text-align: center;
  color: var(--rz-tinta);
  background: var(--rz-blanco);
  border: 1px solid var(--rz-linea);
  border-radius: 0;
}

.opcion-extra .extra-cantidad input[type="number"]:focus { border-color: var(--rz-tinta); outline: none }
.opcion-extra .extra-cantidad > b { order: 3 }

/* El "maximo 10 g" va debajo, en toda la fila */
.opcion-extra .extra-cantidad > small {
  order: 4;
  flex: 1 0 100%;
  margin-top: .35rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--rz-suave);
}

@media (max-width: 560px) {
  /* En el celular el nombre se lleva la fila entera y el precio baja
     debajo: asi no se parte la palabra en tres lineas. */
  .opcion-extra .extra-una,
  .opcion-extra .extra-casilla { flex-wrap: wrap }
  .opcion-extra .extra-una > span,
  .opcion-extra .extra-casilla > span { flex: 1 1 60% }
  .opcion-extra .extra-una > b,
  .opcion-extra .extra-casilla > b { flex: 0 0 100%; padding-left: 2rem }
  .opcion-extra .extra-cantidad > span { flex: 1 1 100% }
  .opcion-extra .extra-cantidad input[type="number"] { order: 2 }
}

/* =====================================================================
   13. LO QUE VA DEBAJO DE LA COMPRA (detalle del producto)
   ===================================================================== */

.detalle-producto {
  border-top: 1px solid var(--rz-linea);
  margin-top: 5rem;
  padding-top: 3.5rem;
}

.detalle-producto h2 { font-size: clamp(1.8rem, 3vw, 2.4rem) }

.detalle-producto h3,
.subtitulo-paso {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rz-suave);
}

.descripcion-larga p, .detalle-columnas p, .editorial p { color: var(--rz-texto) }

.advertencias { border-top-color: var(--rz-linea) }
.advertencias p { color: var(--rz-suave) }

/* La tira de garantias: rayas finas, sin redondeos, titulo en
   mayusculas pequenas. Es la "franja de ventajas" de la web viva. */
.tira-confianza {
  border: 1px solid var(--rz-linea);
  border-radius: 0;
  background: var(--rz-linea);
  gap: 1px;
}

.tira-confianza li { background: var(--rz-marfil); padding: 1.1rem 1.2rem }

.tira-confianza strong {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rz-tinta);
}

.tira-confianza span { color: var(--rz-texto); font-size: .84rem }

/* Las pastillas de datos */
.ficha-pastillas li { border-color: var(--rz-linea); border-radius: 0; background: var(--rz-marfil) }
.ficha-pastillas span { color: var(--rz-suave); font-weight: 500; letter-spacing: .14em }
.ficha-pastillas strong { font-family: var(--serif); font-weight: 500; font-size: 1.05rem }

/* Las preguntas */
.preguntas { border-top-color: var(--rz-tinta) }
.preguntas details { border-bottom-color: var(--rz-linea) }
.preguntas summary { font-family: var(--sans); font-size: .95rem; color: var(--rz-tinta) }
.preguntas summary::after { border-color: var(--rz-tinta) }
.respuesta p { color: var(--rz-texto) }

.curso-preguntas { gap: 0 }

.curso-pregunta {
  border: 0;
  border-bottom: 1px solid var(--rz-linea);
  border-radius: 0;
  background: transparent;
}

.curso-pregunta:first-child { border-top: 1px solid var(--rz-linea) }

.curso-pregunta summary {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 400;
  color: var(--rz-tinta);
  padding: 1.25rem 0;
}

/* La flecha del navegador (el triangulito negro) se quita y se dibuja
   una propia, fina, que gira al abrir. La hoja base ya lo hace, pero
   solo en el celular: aqui vale para cualquier pantalla. */
.curso-pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}

.curso-pregunta summary::marker,
.curso-pregunta summary::-webkit-details-marker { display: none; content: "" }

.curso-pregunta summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-bottom: .2rem;
  border-right: 1px solid var(--rz-tinta);
  border-bottom: 1px solid var(--rz-tinta);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.curso-pregunta[open] summary::after { transform: rotate(-135deg); margin-bottom: -.15rem }

.curso-pregunta p { color: var(--rz-texto); padding: 0 0 1.3rem }
.bloque-dudas h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.3rem) }

/* El cierre oscuro del final de la ficha */
.cierre-producto {
  background: var(--rz-tinta);
  border-radius: 0;
  padding: 3rem 1.5rem;
}

.cierre-producto h2 { color: #fff; font-weight: 500 }

.cierre-producto .precio {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--dorado-claro);
}

.cierre-producto s { color: #8a837c }

.cierre-producto .boton {
  background: var(--rz-blanco);
  border-color: var(--rz-blanco);
  color: var(--rz-tinta);
}

.cierre-producto .boton:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.caja-aviso, .caja-curso {
  background: var(--rz-marfil);
  border: 1px solid var(--rz-linea);
  border-radius: 0;
}

.caja-curso h2 { font-family: var(--serif); font-weight: 500 }

/* =====================================================================
   14. OTROS BLOQUES: PASOS, VALORES, GALERIA, CITA, DOS COLUMNAS
   ===================================================================== */

/* Los pasos numerados: el numero en dorado, serif */
.pasos li { border-top-color: var(--rz-linea) }
.paso-numero { font-family: var(--serif); color: var(--rz-dorado); font-weight: 500 }
.pasos p { color: var(--rz-texto) }
.pasos-lista li, .pasos-lista li:last-child { border-color: var(--rz-linea) }

.paso-foto { background: var(--rz-marfil) }
.paso-foto img { object-fit: contain; mix-blend-mode: multiply; padding: 6% }

.paso-sin-producto { background: var(--rz-marfil) }
.paso-sin-producto span { font-family: var(--serif); color: var(--rz-dorado) }

/* Los valores / ventajas: titulo en mayusculas pequenas sobre su raya */
.valor { border-top-color: var(--rz-linea) }
.valor .estrella { width: 1.1rem; opacity: .5 }

.valor h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rz-tinta);
}

.valor p { color: var(--rz-texto); font-size: .88rem }

/* La galeria y las fotos anchas */
.foto-lado, .figura-ancha img, .pasos-imagen img { background: var(--rz-marfil) }
.figura-ancha figcaption, .rejilla.galeria figcaption { color: var(--rz-suave); font-size: .78rem }

/* La cita: serif en italica, grande */
.cita-bloque blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rz-tinta);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.35;
}

/* La lista de ventajas de mayoristas: una rayita dorada por delante */
.lista-texto {
  list-style: none;
  padding-left: 0;
  margin: 1.6rem 0 2rem;
}

.lista-texto li {
  position: relative;
  padding-left: 22px;
  font-size: .95rem;
  color: var(--rz-tinta);
  margin-bottom: .45rem;
}

.lista-texto li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 10px;
  height: 1px;
  background: var(--rz-dorado);
}

.lista-texto li::marker { content: "" }

/* Los datos de contacto */
.datos { border-top-color: var(--rz-tinta) }
.datos li { border-bottom-color: var(--rz-linea) }
.datos a:hover { color: var(--rz-dorado) }
.mapa iframe { filter: grayscale(1) }

/* El banner oscuro con foto al lado */
.banner-curso { background: var(--rz-tinta) }
.banner-curso-texto .antetitulo { color: var(--dorado-claro) }
.banner-curso-texto h2 { color: #fff; font-weight: 500 }
.banner-curso-foto { border-radius: 0 }

.banner-curso .boton {
  background: var(--rz-blanco);
  border-color: var(--rz-blanco);
  color: var(--rz-tinta);
}

.banner-curso .boton:hover { background: transparent; color: #fff; border-color: #fff }

/* =====================================================================
   15. OPINIONES / TESTIMONIOS
   En la web viva son tres citas centradas, en serif italica, con cinco
   estrellas doradas encima y el nombre en mayusculas pequenas. Sin caja
   ni fondo.
   ===================================================================== */

.bloque-resenas { border-top-color: var(--rz-linea) }
.resenas-cabeza h2 { font-weight: 500 }
.resenas-cabeza p { color: var(--rz-texto) }
.resenas-media strong { color: var(--rz-tinta); font-weight: 500 }
.resenas-media span { color: var(--rz-suave) }

.flecha {
  border-color: var(--rz-linea);
  border-radius: 0;
  color: var(--rz-tinta);
  background: var(--rz-blanco);
}

.flecha:hover { border-color: var(--rz-tinta); color: var(--rz-tinta) }

.resena {
  background: transparent;
  text-align: center;
  padding: 0 1.2rem;
  gap: 1rem;
}

.resena-cabeza { flex-direction: column; align-items: center; gap: .4rem }

.resena-avatar {
  background: var(--rz-arena);
  color: var(--rz-tinta);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 500;
}

.resena-quien {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rz-suave);
}

.resena-cuando { color: var(--rz-suave); font-size: .72rem }

/* La opinion, en serif italica: es la cita del cliente */
.resena-texto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--rz-tinta);
}

.resena-sello { color: var(--rz-suave); letter-spacing: .18em; font-size: .64rem }

.estrellas { justify-content: center }
.estrellita { fill: var(--rz-dorado) }
.estrellita.vacia { fill: var(--rz-linea) }

@media (max-width: 759px) {
  .resena { text-align: center }
}

/* =====================================================================
   16. LA BOLSA (cajon lateral) Y EL CARRITO
   ===================================================================== */

.bolsa-lineas li { border-bottom-color: var(--rz-linea) }

.bolsa-foto img,
.bolsa-foto .sin-foto-mini,
.linea-foto, .linea-foto img, .linea-foto .sin-foto,
.mini-foto, .mini-foto img, .mini-foto .sin-foto {
  background: var(--rz-marfil);
  object-fit: contain;
}

.bolsa-datos a { font-family: var(--sans); font-weight: 400; color: var(--rz-tinta) }
.bolsa-datos a:hover { color: var(--rz-dorado) }
.bolsa-datos small, .bolsa-pie small { color: var(--rz-suave) }

.bolsa-total span {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rz-tinta);
}

.bolsa-vacia p, .bolsa-vacia-pagina p {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--rz-tinta);
}

.bolsa-vacia .estrella, .bolsa-vacia-pagina .estrella { opacity: .45 }

.bolsa-pagina { border-top-color: var(--rz-tinta) }
.bolsa-pagina li { border-bottom-color: var(--rz-linea) }
.linea-nombre { font-family: var(--sans); font-weight: 400; color: var(--rz-tinta) }
.linea-nombre:hover { color: var(--rz-dorado) }
.linea-datos small { color: var(--rz-suave) }
.linea-precio strong { font-weight: 400 }

/* El mas y el menos de la cantidad: cuadrados, de una raya */
.cantidad-linea { border-color: var(--rz-linea); border-radius: 0 }
.cantidad-linea button { color: var(--rz-tinta) }
.cantidad-linea button:hover { background: var(--rz-marfil) }
.cantidad-linea span { font-family: var(--sans) }

.tabla-carrito { border-top-color: var(--rz-tinta) }
.tabla-carrito td { border-bottom-color: var(--rz-linea) }
.tabla-carrito tfoot td { font-weight: 400 }
.fila-suma td { color: var(--rz-suave) }
.en-linea input { border-bottom-color: var(--rz-tinta); color: var(--rz-tinta) }

/* =====================================================================
   17. FINALIZAR LA COMPRA
   ===================================================================== */

.aviso-previa { background: var(--rz-arena); color: var(--rz-texto) }
.aviso-previa strong { color: var(--rz-tinta); font-weight: 500 }

.titulo-compra { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 500 }

.volver-bolsa, .compra-segura {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.volver-bolsa { color: var(--rz-tinta) }
.volver-bolsa:hover { color: var(--rz-dorado) }
.compra-segura { color: var(--rz-suave) }

/* El resumen de la derecha: caja marfil con una raya alrededor */
.resumen-compra {
  background: var(--rz-marfil);
  border: 1px solid var(--rz-linea);
  padding: 1.9rem;
}

.resumen-compra h2 { font-size: 1.6rem; font-weight: 500 }

.lineas-resumen li { border-bottom-color: var(--rz-linea) }
.mini-nombre { font-family: var(--sans); color: var(--rz-tinta) }
.mini-nombre small { color: var(--rz-suave) }

.mini-cantidad {
  background: var(--rz-tinta);
  color: #fff;
  border-radius: 2px;
  font-family: var(--sans);
}

.cifras dt { color: var(--rz-texto) }
.cifras dd.suave { color: var(--rz-suave) }
.cifra-total { border-top-color: var(--rz-linea) }
.cifra-total dt { color: var(--rz-tinta); font-weight: 500 }

.cifra-total dd {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--rz-tinta);
}

.cifra-total dd small { color: var(--rz-suave); letter-spacing: .14em }
.cifra-descuento dd { color: var(--rz-dorado) }
.nota-envio { color: var(--rz-suave) }
.nota-envio strong { color: var(--rz-tinta); font-weight: 500 }

/* Los pasos del formulario: el numero en un cuadrado, no en un circulo */
.paso-compra legend {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--rz-tinta);
}

.paso-compra legend .n {
  border: 1px solid var(--rz-tinta);
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--rz-tinta);
}

/* Las formas de envio y de pago: filas con una raya, la elegida en
   marfil con el marco negro */
.opciones-compra { border-color: var(--rz-linea) }
.opcion-compra { border-bottom-color: var(--rz-linea) }

.opcion-compra:has(input:checked) {
  background: var(--rz-marfil);
  box-shadow: inset 0 0 0 1px var(--rz-tinta);
}

.opcion-compra input { accent-color: var(--rz-tinta) }
.opcion-texto-compra strong { color: var(--rz-tinta); font-weight: 500 }
.opcion-texto-compra small { color: var(--rz-suave) }
.opcion-precio { color: var(--rz-tinta); font-weight: 500 }

.medios-pago i {
  border-color: var(--rz-linea);
  background: var(--rz-blanco);
  color: var(--rz-suave);
  font-family: var(--sans);
  letter-spacing: .1em;
}

.form-checkout .metodo { border-color: var(--rz-linea); border-radius: 0 }
.form-checkout .metodo:has(input:checked) { border-color: var(--rz-tinta) }
.form-checkout input, .form-checkout textarea { border-bottom-color: var(--rz-linea); color: var(--rz-tinta) }
.form-checkout input:focus, .form-checkout textarea:focus { border-bottom-color: var(--rz-tinta) }

.boton-pagar { font-size: 12px; letter-spacing: .16em }
.letra-pequena { color: var(--rz-suave) }
.letra-pequena a { border-bottom-color: var(--rz-linea) }

.resumen-movil { background: var(--rz-marfil); border: 1px solid var(--rz-linea) }
.resumen-movil summary strong { font-weight: 500; color: var(--rz-tinta) }

.caja-cupon { border-top-color: var(--rz-linea) }
.campo-cupon input { letter-spacing: .14em }
.cupon-puesto { color: var(--rz-texto) }

.paso-cuenta .cuenta-correo {
  background: var(--rz-marfil);
  border: 1px solid var(--rz-linea);
  border-radius: 0;
}

.paso-cuenta .cuenta-correo span { color: var(--rz-suave); font-weight: 500 }
.paso-cuenta .cuenta-correo strong { color: var(--rz-tinta); font-weight: 500 }

/* La pantalla de "gracias por tu pedido" */
.confirmacion-cabeza { border-bottom-color: var(--rz-linea) }
.confirmacion-cabeza h1 { font-weight: 500 }
.confirmacion-cabeza p { color: var(--rz-texto) }
.confirmacion-cabeza .estrella { opacity: .5 }
.confirmacion-rejilla h2 { font-size: 1.5rem; font-weight: 500 }
.confirmacion-datos p { color: var(--rz-texto) }
.descargas { gap: .6rem }

/* =====================================================================
   18. LA VENTANITA DEL DESCUENTO DE BIENVENIDA
   ===================================================================== */

.promo-fondo { background: rgba(28, 25, 23, .42) }
.promo-caja { background: var(--rz-blanco); border: 1px solid var(--rz-linea) }
.promo-caja h2 { font-weight: 500 }
.promo-texto, .promo-legal { color: var(--rz-texto) }
.promo-cerrar { color: var(--rz-suave) }
.promo-cerrar:hover { color: var(--rz-tinta) }
.promo-estrella .estrella { opacity: .5 }

.promo-codigo code {
  font-family: var(--sans);
  background: var(--rz-marfil);
  border: 1px dashed var(--rz-linea);
  color: var(--rz-tinta);
  letter-spacing: .16em;
}

.promo-no { color: var(--rz-suave); letter-spacing: .16em }
.promo-no:hover { color: var(--rz-tinta); border-bottom-color: var(--rz-linea) }

/* =====================================================================
   19. EL PIE DE PAGINA
   Fondo arena, enlaces en mayusculas pequenas, una raya separando el
   aviso legal.
   ===================================================================== */

.pie {
  background: var(--rz-arena);
  border-top: 0;
  padding: 4.5rem 0 0;
  color: var(--rz-texto);
  font-size: .88rem;
}

.pie-rejilla { padding-bottom: 2.8rem; gap: 2rem }

.logotipo-pie {
  display: block;
  width: 130px;
  height: auto;
  max-height: 48px;
  margin-bottom: .5rem;
  filter: var(--rz-logo-filtro);
}

.pie-marca .estrella { width: 1.4rem; opacity: .5 }

.pie a {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rz-texto);
}

.pie a:hover { color: var(--rz-tinta) }

.pie-legal { border-top: 1px solid var(--rz-linea); padding: 1.4rem 0 }
.pie-legal p { color: var(--rz-suave); font-size: .72rem; letter-spacing: .06em }

.credito-geo a {
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--rz-suave);
}

.pie-ayuda { color: var(--rz-suave) }

.idiomas-pie a, .idiomas-cajon a { color: var(--rz-suave); letter-spacing: .16em }
.idiomas-pie a[aria-current="true"],
.idiomas-cajon a[aria-current="true"] {
  color: var(--rz-tinta);
  border-bottom-color: var(--rz-dorado);
}

/* =====================================================================
   20. EL BOTON FLOTANTE DE WHATSAPP
   En la web viva es una pastilla verde que, al pulsarla, abre un panel
   con dos opciones: comprar al detal o al por mayor. Aqui se viste:
     - lo que YA existe: .wasap (el enlace redondo)
     - lo que el chat principal puede anadir: .rz-whatsapp-wrap con su
       panel (el marcado exacto esta en las NOTAS)
   ===================================================================== */

.wasap {
  width: auto;
  height: 58px;
  padding: 0 15px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 30px rgba(28, 25, 23, .18);
}

.wasap:hover { box-shadow: 0 14px 34px rgba(28, 25, 23, .24) }
.wasap svg { width: 28px; height: 28px; flex: 0 0 auto }
.wasap:focus-visible { outline: 3px solid var(--rz-dorado); outline-offset: 3px }

/* El texto que asoma al pasar por encima.
   OJO: ".wasap-texto" todavia NO existe en el HTML; hoy el enlace de
   WhatsApp solo lleva el dibujo. Esta regla espera que el chat principal
   anada dentro del enlace un <span class="wasap-texto">. Mientras no lo
   anada, no pasa nada: el boton se queda redondo, como ahora. */
.wasap .wasap-texto,
.rz-whatsapp-texto {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  margin-right: -10px;
  transition: max-width .35s ease, margin .35s ease;
}

.wasap:hover .wasap-texto,
.rz-whatsapp:hover .rz-whatsapp-texto { max-width: 170px; margin-right: 4px }

@media (max-width: 560px) {
  .wasap { height: 54px; padding: 0 13px }
  .wasap svg { width: 26px; height: 26px }
  .wasap .wasap-texto { display: none }
}

/* --- El selector detal / mayorista (marcado nuevo) ------------------ */
.rz-whatsapp-wrap {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: calc(clamp(1rem, 3vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.rz-whatsapp-wrap .rz-whatsapp {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: 0 10px 30px rgba(28, 25, 23, .18);
  transition: background-color .25s ease, transform .25s ease;
}

.rz-whatsapp-wrap .rz-whatsapp:hover,
.rz-whatsapp-wrap .rz-whatsapp:focus-visible {
  background: #1fbe5b;
  color: #fff;
  transform: translateY(-2px);
}

.rz-whatsapp svg { flex: 0 0 auto; width: 28px; height: 28px }

/* Con el panel abierto el texto se esconde: ya se sabe de que va */
.rz-whatsapp-wrap.rz-abierto .rz-whatsapp-texto { max-width: 0; margin-right: -10px }

.rz-whatsapp-panel {
  width: 300px;
  background: var(--rz-blanco);
  border: 1px solid var(--rz-linea);
  box-shadow: 0 24px 60px rgba(28, 25, 23, .16);
  animation: rz-panel .25s ease;
}

@keyframes rz-panel {
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: none }
}

.rz-whatsapp-cabecera {
  position: relative;
  padding: 20px 48px 18px 22px;
  background: var(--rz-tinta);
  color: #fff;
}

.rz-whatsapp-cabecera strong {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
}

.rz-whatsapp-cabecera span {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .06em;
  color: #d6d0c7;
}

.rz-whatsapp-wrap .rz-whatsapp-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.rz-whatsapp-wrap .rz-whatsapp-cerrar:hover { opacity: .7 }

.rz-whatsapp-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  text-decoration: none;
  color: var(--rz-tinta);
  border-top: 1px solid var(--rz-linea);
  transition: background-color .2s ease;
}

.rz-whatsapp-cabecera + .rz-whatsapp-opcion { border-top: 0 }
.rz-whatsapp-opcion:hover { background: var(--rz-marfil) }

.rz-whatsapp-opcion-texto strong {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--rz-tinta);
}

.rz-whatsapp-opcion-texto small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--rz-suave);
}

.rz-whatsapp-flecha { font-size: 18px; color: #25a35a; transition: transform .2s ease }
.rz-whatsapp-opcion:hover .rz-whatsapp-flecha { transform: translateX(4px) }

@media (max-width: 767px) {
  .rz-whatsapp-wrap { right: .9rem }
  .rz-whatsapp-wrap .rz-whatsapp { height: 54px; padding: 0 13px }
  .rz-whatsapp-texto { display: none }
  .rz-whatsapp-panel { width: min(300px, calc(100vw - 32px)) }
}

/* =====================================================================
   21. PIEZAS DE LA PORTADA DE RAISON QUE NECESITAN MARCADO NUEVO
   Estas clases NO existen todavia en el HTML de la plataforma: son las
   mismas de la web viva, copiadas tal cual. El marcado exacto que
   esperan esta en raison-piel-NOTAS.md. Mientras no se anadan, estas
   reglas no hacen nada: no estorban.
   ===================================================================== */

/* --- Cabecera de bloque: antetitulo y titulo a la izquierda,
       "ver toda la tienda" a la derecha ----------------------------- */
.rz-cabecera-bloque {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 2.8rem;
  flex-wrap: wrap;
}

.rz-cabecera-bloque h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  margin: 6px 0 8px;
}

.rz-cabecera-bloque p { margin: 0; color: var(--rz-texto) }

.rz-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rz-dorado);
}

/* --- Las cuatro categorias de la portada --------------------------- */
.rz-categorias {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.rz-categoria { display: block; text-decoration: none; color: var(--rz-tinta) }

.rz-categoria figure {
  margin: 0 0 16px;
  background: var(--rz-marfil);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rz-categoria img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.rz-categoria:hover img { transform: scale(1.05) }

.rz-categoria strong {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

.rz-categoria span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rz-suave);
}

.rz-categoria:hover strong { color: var(--rz-dorado) }

/* --- Mayoristas: el titulillo y la lista a dos columnas ------------ */
.rz-lista-titulo { margin: 8px 0 0 }

.rz-lista-titulo strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--rz-tinta);
}

.rz-lista {
  list-style: none;
  margin: 1.6rem 0 2.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}

.rz-lista li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--rz-tinta);
}

.rz-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 10px;
  height: 1px;
  background: var(--rz-dorado);
}

/* --- Los botones sueltos de un bloque de texto --------------------- */
.rz-botones { display: flex; flex-wrap: wrap; gap: 14px }

.rz-botones a {
  display: inline-block;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid var(--rz-tinta);
  background: var(--rz-tinta);
  color: #fff;
}

.rz-botones a:hover { background: var(--rz-dorado); border-color: var(--rz-dorado); color: #fff }
.rz-botones a.rz-claro { background: transparent; color: var(--rz-tinta) }
.rz-botones a.rz-claro:hover { background: var(--rz-tinta); color: #fff }

/* --- Testimonios con estrellas ------------------------------------- */
.rz-testimonios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 56px;
}

.rz-testimonio { text-align: center; margin: 0 }

.rz-estrellas {
  color: var(--rz-dorado);
  letter-spacing: .3em;
  font-size: 13px;
  margin-bottom: 18px;
}

.rz-testimonio blockquote {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.35;
  font-style: italic;
  color: var(--rz-tinta);
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.rz-testimonio figcaption {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rz-suave);
}

/* --- "Suscribete": el correo y el boton pegados, centrados --------- */
.rz-suscribete {
  border-top: 1px solid var(--rz-linea);
  background: var(--rz-blanco);
  padding: 5.5rem 1.5rem;
  text-align: center;
}

.rz-suscribete h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: .5rem }
.rz-suscribete p { color: var(--rz-texto); margin: 0 auto 1.8rem; max-width: 46ch }

.rz-suscribete form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
}

.rz-suscribete input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid var(--rz-linea);
  border-right: 0;
  border-radius: 0;
  font: inherit;
  color: var(--rz-tinta);
}

.rz-suscribete button {
  flex: 0 0 auto;
  min-height: 50px;
  border-radius: 0;
}

/* --- La franja de ventajas antes del pie --------------------------- */
.rz-ventajas {
  background: var(--rz-marfil);
  border-top: 1px solid var(--rz-linea);
  padding: 3.5rem 1.5rem;
}

.rz-ventajas-caja {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: var(--ancho);
  margin: 0 auto;
  text-align: center;
}

.rz-ventaja svg,
.rz-ventaja img {
  width: 26px;
  height: 26px;
  margin: 0 auto .9rem;
  color: var(--rz-tinta);
}

.rz-ventaja strong {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rz-tinta);
  margin-bottom: .4rem;
}

.rz-ventaja span { color: var(--rz-texto); font-size: .85rem; line-height: 1.6 }

@media (max-width: 1024px) {
  .rz-categorias { grid-template-columns: repeat(2, 1fr) }
  .rz-testimonios { gap: 32px }
}

@media (max-width: 767px) {
  .rz-cabecera-bloque { margin-bottom: 1.8rem }
  .rz-categorias { gap: 14px }
  .rz-categoria strong { font-size: 21px }
  .rz-lista { grid-template-columns: 1fr }
  .rz-testimonios { grid-template-columns: 1fr; gap: 44px; margin-top: 2.2rem }
  .rz-ventajas-caja { grid-template-columns: 1fr; gap: 2rem }
  .rz-suscribete { padding: 3.5rem 1.2rem }
  .rz-suscribete form { flex-wrap: wrap }
  .rz-suscribete input[type="email"] { flex: 1 0 100%; border-right: 1px solid var(--rz-linea) }
  .rz-suscribete button { flex: 1 0 100%; margin-top: 10px }
  .rz-botones a { width: 100%; text-align: center }
}

/* =====================================================================
   22. EL AULA Y LA PAGINA DE VENTA DE CURSOS
   Perfumes Raison no vende cursos, pero estas pantallas vienen con la
   plataforma. Se visten con la misma paleta y sin redondeos para que,
   si alguien entra, no parezca otra marca.
   ===================================================================== */

.curso-portada { background: var(--rz-marfil) }
.curso-etiqueta { font-family: var(--sans); color: var(--dorado-tinta); font-weight: 500; letter-spacing: .16em }
.curso-portada h1, .curso-seccion h2, .curso-cierre h2 { font-weight: 500 }
.curso-bajada, .curso-nota, .curso-prosa p, .curso-pagos { color: var(--rz-texto) }
.curso-precio strong { font-family: var(--sans); font-weight: 400; letter-spacing: 0 }
.curso-antes { color: var(--rz-suave) }
.curso-boton { border-radius: 0 }
.curso-media video, .curso-media img, .curso-adelanto, .curso-tarjeta, .curso-tarjeta img { border-radius: 0 }
.curso-seccion { border-top-color: var(--rz-linea) }
.curso-datos li::before, .curso-lista-check li::before, .aula-check { color: var(--rz-dorado) }
.curso-modulo, .curso-pregunta, .curso-si, .curso-no, .curso-testimonio,
.curso-pasos li, .curso-ficha, .curso-garantia, .caja-curso,
.aula-tarjeta, .aula-clases, .aula-ficha, .tira-confianza, .ficha-pastillas li { border-radius: 0 }
.curso-modulo summary { font-family: var(--serif); font-weight: 500 }
.curso-num { color: var(--rz-dorado) }
.curso-cierre { background: var(--rz-tinta) }
.curso-cierre .curso-precio strong { color: var(--dorado-claro) }
.curso-paso-n, .curso-garantia-sello { background: var(--rz-tinta); border-radius: 50% }
.curso-garantia { border-color: var(--rz-linea) }
.curso-garantia-puntos strong { color: var(--dorado-tinta) }
.curso-barra-fija { background: var(--rz-blanco); border-top-color: var(--rz-linea) }
.curso-barra-precio strong { font-family: var(--sans); font-weight: 400 }
.ficha-curso-seccion h3 { font-family: var(--serif); font-weight: 500; border-bottom-color: var(--rz-dorado) }
.ficha-curso-seccion li::before { background: var(--rz-dorado) }
.ficha-curso-datos { border-color: var(--rz-linea); border-radius: 0; background: var(--rz-linea) }
.ficha-curso-datos dt { color: var(--rz-suave); font-weight: 500; letter-spacing: .14em }
.ficha-curso-datos dd { color: var(--rz-tinta); font-weight: 400 }

.aula-nav a.activo { border-bottom-color: var(--rz-dorado) }
.aula-barra span, .aula-progreso { background: var(--rz-dorado) }
.aula-aviso.bien { background: rgba(168, 134, 77, .1); color: var(--dorado-tinta) }
.aula-form input, .aula-salir, .aula-visto button, .aula-boton, .aula-form button,
.aula-campo input, .aula-aviso, .aula-error, .aula-ok { border-radius: 0 }
.aula-etiqueta-pdf { background: var(--rz-arena); border-color: var(--rz-linea); color: var(--dorado-tinta); border-radius: 0 }
.aula-marco-video, .aula-ficha-clase, .curso-inscribir-caja { border-radius: 0 }
.curso-inscribir-caja h2 { font-family: var(--serif); font-weight: 500 }
.curso-campo input, .curso-inscribir-cuenta, .curso-inscribir-error { border-radius: 0 }
.curso-inscribir-cuenta { background: var(--rz-marfil) }
.curso-inscribir-cuenta-tit { color: var(--dorado-tinta) }
.enlace-aula .texto-aula { font-family: var(--sans); font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase }

/* Los ultimos sitios donde la hoja base pide serif en peso 700 u 800.
   Cormorant Garamond no tiene esos pesos: el navegador se la inventa y
   la letra sale manchada. Se bajan a 500, que es el que si existe. */
.curso-pasos strong,
.curso-ficha-datitos strong,
.nombre-marca,
.curso-tarjeta h2,
.aula-tarjeta h2,
.aula-ficha h2,
.aula-modulo h2 { font-weight: 500; letter-spacing: 0 }

/* =====================================================================
   23. ULTIMOS AJUSTES DE MOVIL
   La estructura y los cortes de pantalla los sigue mandando estilo.css;
   aqui solo se afinan los tamanos de letra de Raison.
   ===================================================================== */

@media (max-width: 767px) {
  .cabecera-fila { height: 64px }
  .bloque { padding: 3.2rem 0 }

  .heroe-lado h1,
  .heroe.sin-foto-heroe h1 { font-size: clamp(2.3rem, 9vw, 3.1rem) }
  .heroe-texto > p { font-size: .95rem }

  .bloque > .contenedor > h2 { font-size: clamp(1.8rem, 7vw, 2.2rem) }

  .ficha-datos h1 { font-size: 2rem }
  .precio.grande { font-size: 1.25rem }

  /* La compra, de una pieza: el boton a lo ancho */
  .form-comprar button { width: 100%; padding: 16px 18px }

  .resena-texto { font-size: 1.2rem }
  .cita-bloque blockquote { font-size: 1.6rem }

  .detalle-producto { margin-top: 2.5rem; padding-top: 2.2rem }
  .tira-confianza li { text-align: center }

  .pie { padding-top: 3rem }
  .logotipo-pie { margin-inline: auto }
}

@media (max-width: 400px) {
  .logotipo { width: 104px; max-height: 38px }
}

/* =====================================================================
   22. PIEZAS QUE SE ANADIERON AL TRAER LA TIENDA
   Clases nuevas del programa (no venian del plugin de WordPress) que
   necesitaban su estilo: la rejilla de cuatro, las paginas de la tienda
   y el aviso de los perfumes que se consultan.
   ===================================================================== */

/* --- Rejilla de cuatro columnas -------------------------------------
   Los bloques de la portada ("Lo Mas Amado por Ellas") van de cuatro en
   cuatro, como en la tienda de siempre. En tableta bajan a tres y en el
   movil a dos: tres bien puestas se leen mejor que cuatro apretadas. */
.rejilla.cuatro { grid-template-columns: repeat(4, 1fr) }

@media (max-width: 1100px) { .rejilla.cuatro { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 820px)  { .rejilla.cuatro { grid-template-columns: repeat(2, 1fr) } }

/* --- Cuantos productos hay ------------------------------------------
   "1-12 de 312": la misma informacion que daba WooCommerce arriba de la
   tienda, para saber donde esta uno. */
.cuantos-hay {
  margin: 0 0 1.6rem;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rz-suave);
}

/* --- Las paginas de la tienda --------------------------------------- */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4rem 0 1rem;
}

.paginacion a,
.paginacion .hueco {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--rz-texto);
  text-decoration: none;
  border: 1px solid var(--rz-linea);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.paginacion .hueco { border-color: transparent; color: var(--rz-suave) }

.paginacion a:hover {
  border-color: var(--rz-tinta);
  color: var(--rz-tinta);
}

.paginacion a.activa {
  background: var(--rz-tinta);
  border-color: var(--rz-tinta);
  color: #fff;
}

.paginacion .paso { font-size: 1.05rem }

@media (max-width: 520px) {
  .paginacion a, .paginacion .hueco { min-width: 36px; height: 36px; padding: 0 6px }
}

/* --- Perfumes que se consultan, no se compran -----------------------
   Los "Originales": en la tienda de siempre salen sin precio y con un
   boton de "Leer mas". Aqui, con un boton para escribir por WhatsApp. */
.aviso-consultar {
  margin: 0 0 1.2rem;
  padding: 14px 16px;
  background: var(--rz-marfil);
  border-left: 2px solid var(--rz-dorado);
  font-size: .92rem;
  color: var(--rz-texto);
}