/* ==========================================================================
   Paleta de marca - Echando Raices (paleta definitiva)
   Un único sitio para tocar los colores de marca en toda la home.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  --hr-color-acento: #581f7c;          /* Vibrante Violeta - fondos sólidos (barra de anuncios, CTA) */
  --hr-color-acento-claro: #c79ce2;    /* Suave Amatista - texto/iconos/enlaces de acento sobre fondo oscuro (contraste accesible) */
  --hr-color-texto-sobre-acento: #e6dacc;

  --hr-color-fondo-oscuro: #221200;    /* Rico Ámbar - fondos tipo hero */
  --hr-color-texto-claro: #e6dacc;     /* Suave Mandarina - titulares y texto sobre fondo oscuro */

  --hr-font-base: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Neutros de UI (no son colores de marca) */
  --hr-color-superficie: #ffffff;        /* elementos claros puntuales, p.ej. el botón del CTA */
  --hr-color-borde-oscuro: rgba(230, 218, 204, 0.25); /* borde sutil de tarjetas sobre fondo oscuro (texto-claro al 25%) */

  /* Añadido 2026-07-23 (botones "Ver CBD" etc.): mismo tono oscuro que
     --hr-color-fondo-oscuro, pero como variable de TEXTO (no de fondo)
     para dejar claro el uso cuando se aplica sobre un botón claro. */
  --hr-color-texto-oscuro: #221200;

  /* Sistema de bordes redondeados — sitio completo (2026-07-29),
     validado con Victoria sobre la propuesta del carrito. */
  --hr-radius-accion: 8px;
  --hr-radius-card: 10px;
}

body {
  font-family: var(--hr-font-base);
  background: var(--hr-color-fondo-oscuro);
}

.hr-announcement-bar {
  background: var(--hr-color-acento);
  color: var(--hr-color-texto-sobre-acento);
  text-align: center;
  padding: 10px 0;
  margin: 0;
}

.hr-announcement-bar p {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--hr-color-texto-sobre-acento);
}

.hr-hero {
  background: var(--hr-color-fondo-oscuro);
  color: var(--hr-color-texto-claro);
  padding: 80px 24px;
}

.hr-hero-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.hr-hero-inner h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--hr-color-texto-claro);
}

.hr-hero-inner p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--hr-color-texto-claro);
  margin: 0;
}

/* CTA del hero (añadido 2026-07-23, textos finales de la home):
   .hr-cta-button ya existe más abajo pensado para ir sobre el bloque
   violeta de cierre, donde el espaciado de arriba lo daba el margen
   inferior del párrafo anterior (.hr-cta-inner p). Aquí, en el hero,
   ese párrafo no lleva margen inferior (ver regla justo arriba), así
   que se da el espaciado directamente al botón para no depender de
   dónde se usa. */
.hr-hero-inner .hr-cta-button {
  margin-top: 28px;
}

/* Categorías ------------------------------------------------------------ */

.hr-categories {
  background: var(--hr-color-fondo-oscuro);
  padding: 56px 24px;
}

.hr-categories-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.hr-categories-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--hr-color-texto-claro);
  text-align: center;
  margin: 0 0 32px;
}

.hr-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hr-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  background: transparent;
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-card);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.hr-category-card:hover {
  border-color: var(--hr-color-acento-claro);
  transform: translateY(-2px);
}

.hr-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--hr-color-acento-claro);
}

.hr-category-icon svg {
  width: 100%;
  height: 100%;
}

.hr-category-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--hr-color-texto-claro);
  text-align: center;
}

.hr-category-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(230, 218, 204, 0.7);
  text-align: center;
}

@media (max-width: 768px) {
  .hr-categories-grid {
    grid-template-columns: 1fr;
  }
}

/* Quiénes somos + Valores (añadido 2026-07-23, textos finales de la
   home). Este bloque vive dentro de #custom-text — el módulo nativo
   "Bloque de texto personalizado" (ps_customtext), que ya estaba
   colocado en la home con contenido de muestra (Lorem Ipsum) y sin
   ningún uso definido todavía. Se reutiliza ese hueco en vez de crear
   un módulo nuevo: el contenido se ha escrito directamente en su
   campo de texto (HTML), con las clases de aquí abajo para darle
   forma. Ver la nota "Fondo oscuro en TODA la home" más abajo para
   los estilos de color heredados de #custom-text (h2/p/strong). */

.hr-about {
  padding: 56px 24px;
}

.hr-about-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

/* Especificidad: theme.css trae "#custom-text h2" / "#custom-text p"
   (selector con #id, especificidad 1-0-1), que gana a un simple
   ".hr-about-inner h2" (0-1-1) y pisaba nuestro tamaño/peso de letra
   (se veía en 24px/500 en vez de los 28px/700 de aquí, y el párrafo en
   14px en vez de 16px) — detectado el 2026-07-23 al revisar los
   tamaños de fuente reales con computed styles. Se añade el prefijo
   "#custom-text" a estos selectores (1-1-1) para ganarle sin recurrir
   a !important. */
#custom-text .hr-about-inner h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
}

#custom-text .hr-about-inner > p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}

/* "Leer más": el plan inicial era reutilizar el mismo patrón
   <details>/<summary> que las FAQ (.hr-faq-item, ver más abajo), pero
   el editor WYSIWYG de ps_customtext (TinyMCE) elimina esas etiquetas
   al guardar el HTML — no están en su lista de elementos permitidos —
   así que el contenido se quedaba siempre visible y sin poder
   plegarse. Solución: un <span class="hr-about-toggle"> + un
   <div class="hr-about-more-content"> normales, que custom-home-texts.js
   muestra/oculta por JS añadiendo la clase "is-open" al hacer clic,
   en vez de depender del comportamiento nativo de <details>.

   Orden en el HTML (2026-07-23, a petición de Victoria): el contenido
   ampliado va ANTES que el propio enlace "Leer más" / "Leer menos" en
   el marcado (ver ps_customtext), no después — así el enlace queda
   siempre justo debajo de todo el texto visible en cada momento: pegado
   al párrafo corto cuando está plegado (el contenido ampliado no ocupa
   espacio, display:none) y debajo del párrafo largo cuando está
   desplegado. El texto del propio enlace lo cambia custom-home-texts.js
   entre "Leer más" / "Leer menos" según el estado.

   Alineación (2026-07-23, a petición de Victoria: "que todos los
   textos estén a bandera en la misma línea, sin saltos hacia la
   derecha"): este bloque, el párrafo corto de arriba y la lista de
   valores de abajo tenían cada uno su propio `max-width` + `margin: 0
   auto`, así que cada uno se centraba POR SU CUENTA dentro de
   .hr-about-inner (700px) — como tienen anchos distintos (620px aquí,
   480px en la lista de valores), cada uno arrancaba en un margen
   izquierdo distinto en vez de alinearse todos con el título. Se quita
   el "auto" del margen en los tres sitios para que todos arranquen en
   el mismo borde izquierdo del contenedor. */
.hr-about-more {
  max-width: 620px;
  margin: 16px 0 32px;
}

.hr-about-toggle {
  cursor: pointer;
  display: inline-block;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--hr-color-acento-claro);
}

.hr-about-more-content {
  display: none;
}

.hr-about-more-content.is-open {
  display: block;
}

#custom-text .hr-about-more-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(230, 218, 204, 0.8);
  text-align: left;
}

.hr-values {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hr-values li {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(230, 218, 204, 0.85);
}

.hr-values li strong {
  color: var(--hr-color-texto-claro);
}

/* CTA (bloque de cierre) ------------------------------------------------- */

.hr-cta {
  background: var(--hr-color-acento);
  color: var(--hr-color-texto-sobre-acento);
  padding: 56px 24px;
  text-align: center;
}

.hr-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.hr-cta-inner h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--hr-color-texto-sobre-acento);
}

.hr-cta-inner p {
  font-size: 16px;
  margin: 0 0 24px;
  color: var(--hr-color-texto-sobre-acento);
}

/* Estilo de botón unificado (2026-07-23, a petición de Victoria: "el
   estilo de los botones debe ser igual siempre"): violeta claro con
   texto oscuro por defecto, se oscurece al violeta fuerte en hover con
   el texto pasando a claro (mismo par de colores que ya usa el bloque
   CTA de cierre para su fondo — contraste comprobado, no un color
   inventado). Sin bordes ni esquinas redondeadas por ahora ("de
   momento los dejamos todos sin bordes") — mismo criterio ya usado en
   las cards de producto (sin bordes redondeados). */
.hr-cta-button {
  display: inline-block;
  padding: 12px 28px;
  background: var(--hr-color-acento-claro);
  color: var(--hr-color-texto-oscuro);
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--hr-radius-accion);
  transition: background 0.15s ease, color 0.15s ease;
}

.hr-cta-button:visited {
  color: var(--hr-color-texto-oscuro);
}

.hr-cta-button:hover,
.hr-cta-button:focus {
  background: var(--hr-color-acento);
  color: var(--hr-color-texto-sobre-acento);
}

/* FAQ --------------------------------------------------------------------- */

.hr-faq {
  background: var(--hr-color-fondo-oscuro);
  padding: 56px 24px;
}

.hr-faq-inner {
  max-width: 700px;
  margin: 0 auto;
}

.hr-faq-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--hr-color-texto-claro);
  text-align: center;
  margin: 0 0 32px;
}

.hr-faq-item {
  border-bottom: 1px solid var(--hr-color-borde-oscuro);
  padding: 16px 0;
}

.hr-faq-item summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: var(--hr-color-texto-claro);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hr-faq-item summary::-webkit-details-marker {
  display: none;
}

.hr-faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: var(--hr-color-acento-claro);
  flex-shrink: 0;
}

.hr-faq-item[open] summary::after {
  content: '\2013';
}

.hr-faq-item p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(230, 218, 204, 0.75);
}

/* ==========================================================================
   Fondo oscuro en TODA la home (módulos nativos incluidos)
   Ámbito: solo body.page-index, para no afectar al resto de páginas
   (fichas de producto, listados, carrito...) hasta que se decida rediseñarlas.
   ========================================================================== */

body.page-index #wrapper {
  background: var(--hr-color-fondo-oscuro);
}

body.page-index .products-section-title,
body.page-index .product-title,
body.page-index .product-title a,
body.page-index .price {
  color: var(--hr-color-texto-claro);
}

body.page-index .product-title a:hover {
  color: var(--hr-color-acento-claro);
}

body.page-index .regular-price {
  color: rgba(230, 218, 204, 0.55);
}

body.page-index .all-product-link {
  color: var(--hr-color-acento-claro);
}

/* Estado hover añadido 2026-07-23 (a petición de Victoria: el enlace
   "Ver productos" no tenía ningún feedback visual al pasar el ratón) */
body.page-index .all-product-link:hover,
body.page-index .all-product-link:focus {
  color: var(--hr-color-texto-claro);
  text-decoration: underline;
}

body.page-index #custom-text {
  background: var(--hr-color-fondo-oscuro);
}

body.page-index #custom-text h2,
body.page-index #custom-text p,
body.page-index #custom-text strong {
  color: var(--hr-color-texto-claro);
}

/* ==========================================================================
   Cabecera / menú - oscurecida en TODA la tienda (no solo la home)
   Sin scoping a body.page-index a propósito: la cabecera es el mismo
   elemento compartido en todas las páginas, así que se oscurece a la vez
   para mantener consistencia visual mientras el resto de páginas
   (ficha de producto, listados, carrito...) siguen sin rediseñar.
   ========================================================================== */

#header,
#header .header-top,
#header .header-nav,
#header .header-banner {
  background: var(--hr-color-fondo-oscuro);
}

#header {
  color: var(--hr-color-texto-claro);
}

/* Menú principal (la especificidad extra de #header es necesaria para
   ganar a la regla del tema "#header .header-top a[data-depth='0']") */
#header #_desktop_top_menu .category > a,
#header #_desktop_top_menu .dropdown-item {
  color: var(--hr-color-texto-claro);
}

#header #_desktop_top_menu .category > a:hover,
#header #_desktop_top_menu .dropdown-item:hover {
  color: var(--hr-color-acento-claro);
}

/* Enlaces de utilidad (contacto, iniciar sesión) */
#_desktop_user_info,
#_desktop_contact_link {
  color: rgba(230, 218, 204, 0.75);
}

#_desktop_user_info a,
#_desktop_contact_link a {
  color: var(--hr-color-texto-claro);
}

#_desktop_user_info a:hover,
#_desktop_contact_link a:hover {
  color: var(--hr-color-acento-claro);
}

/* Buscador */
.search-widgets {
  color: rgba(230, 218, 204, 0.75);
}

#header .header-top .search-widgets input[name="s"] {
  background: rgba(230, 218, 204, 0.08);
  color: var(--hr-color-texto-claro);
  border-color: var(--hr-color-borde-oscuro);
}

#header .header-top .search-widgets input[name="s"]::placeholder {
  color: rgba(230, 218, 204, 0.5);
}

/* Icono de la lupa (2026-07-29, a petición de Victoria: "faltan los
   estados hover en los iconos"). El tema trae un hover nativo para
   este icono, pero apuntando a ".search-widget form button[type=
   'submit'] .search:hover" — en nuestro marcado real la lupa
   (".material-icons.search") no está envuelta en ese <button>, así
   que esa regla nunca llegaba a aplicar y el icono se quedaba sin
   ningún feedback al pasar el ratón (a diferencia de cuenta y
   carrito, que sí lo tenían). Mismo color y patrón que esos dos. */
#search_widget .search:hover {
  color: var(--hr-color-acento-claro);
  cursor: pointer;
}

/* Carrito */
#_desktop_cart {
  color: var(--hr-color-texto-claro);
}

#_desktop_cart .cart-products-count {
  color: var(--hr-color-texto-claro);
}

#header #_desktop_cart .blockcart {
  background: var(--hr-color-fondo-oscuro);
}

/* Corrección 2026-07-27: el icono, el texto "Carrito" y el contador
   dentro del enlace se veían en gris oscuro casi negro (rgb(35,35,35),
   comprobado por getComputedStyle) — el tema nativo pone ese color
   directamente en el <a> con más especificidad que nuestra regla sobre
   "#_desktop_cart", así que no se heredaba. Esto pasaba siempre
   (carrito vacío o con productos), no dependía de la sesión. */
#header #_desktop_cart .blockcart .header a,
#header #_desktop_cart .blockcart .header a .material-icons,
#header #_desktop_cart .blockcart .header a .cart-products-count {
  color: var(--hr-color-texto-claro) !important;
}
#header #_desktop_cart .blockcart .header a:hover,
#header #_desktop_cart .blockcart .header a:hover .material-icons {
  color: var(--hr-color-acento-claro) !important;
}

/* Corrección 2026-07-27 (reemplaza la de 2026-07-17): la regla anterior
   (basada en ":not(.inactive)") partía de una suposición equivocada —
   esa clase indica "el carrito tiene productos", no "el desplegable
   está abierto". Este tema no tiene ningún desplegable real enganchado
   a este icono (comprobado: solo existe el popup aparte de "añadido al
   carrito", #blockcart-modal, sin relación), así que el borde se veía
   siempre que hay algo en el carrito, es decir, casi siempre. Se quita
   el borde por completo: sin un estado de "abierto" real que
   distinguir, no aporta nada y se veía como un recuadro fijo no
   intencionado. */