/* =====================================================================
   Estilos globales de la web - 18/09/2026
   Se cargan en TODAS las páginas desde hz-fuentes-paginas.php.
   Lo específico de cada página sigue en su propio archivo o bloque.
   ===================================================================== */

:root {
  --hz-titulares: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* El bloque del curso (Customizer) toma la fuente de titulares de aquí */
  --ast-heading-font-family: var(--hz-titulares);
}

/* Desbordamiento horizontal de 4 px en todas las páginas de escritorio.
   No lo provoca ningún elemento concreto; «clip» lo corta sin crear un
   contenedor de scroll, así que la cabecera fija sigue funcionando. */
html {
  overflow-x: clip;
}

/* Fraunces en los titulares de toda la web (antes: Unna, la fuente por
   defecto del tema). Los widgets de Elementor y las fichas de producto ya
   fijan su propia fuente con más especificidad y no cambian. */
h1, h2, h3, h4, h5, h6,
.entry-content :is(h1, h2, h3, h4, h5, h6),
.entry-title,
.widget-title {
  font-family: var(--hz-titulares);
  font-weight: 400;
}

/* «Ir al contenido» (visible al navegar con teclado) iba a 2,28:1 */
.skip-link.screen-reader-text:focus {
  color: #9c5b38;
  background: #fff;
}

/* Naranja #ff9900 puesto a mano dentro de las entradas del blog: 2,1:1 */
.single-post .entry-content [style*="ff9900"],
.single-post .entry-content [style*="FF9900"] {
  color: #9c5b38 !important;
}

/* ---------- Colores puestos a mano en el contenido ----------
   Naranjas y turquesa escritos en línea (style="color: …") dentro de fichas de
   producto, del curso y del blog: entre 1,9:1 y 2,3:1. Se llevan a la terracota
   legible de la marca, que mantiene el énfasis. */
:where(.entry-content, .woocommerce-Tabs-panel, .woocommerce-product-details__short-description, .lp-course-content, .course-description, .course-summary, .entry-summary, .ast-article-post, .lp-entry-content)
  :is([style*="ff9900" i], [style*="f78f5c" i], [style*="ff6600" i], [style*="33cccc" i], [style*="339966" i], [style*="f7b045" i]) {
  color: #9c5b38 !important;
}

/* ---------- Detalles que seguían en la terracota decorativa ---------- */

/* Título del cajón del carrito (se ve al abrirlo desde cualquier página) */
.astra-cart-drawer .astra-cart-drawer-title {
  color: #9c5b38 !important;
}

/* «Responder» en los comentarios del blog */
.comment-reply-link,
.comment-reply-link:visited {
  color: #9c5b38 !important;
}

/* Estrellas de valoración: 2,3:1, por debajo del 3:1 que piden los elementos gráficos */
.star-rating,
.star-rating::before,
.star-rating span,
.star-rating span::before,
.woocommerce .star-rating span::before {
  color: #9c5b38 !important;
}

/* Asterisco de obligatorio de WooCommerce: rojo puro (3,96:1) */
.woocommerce form .required,
.woocommerce form abbr.required {
  color: #9c5b38 !important;
  text-decoration: none;
  border: 0;
}

/* Avisos de LearnPress en verde #3ab500 (2,45:1) */
.learn-press-message,
.learn-press-message a {
  color: #2d6f12 !important;
}

/* Miga de pan de WooCommerce en gris #777: 4,44:1, justo por debajo del mínimo */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  color: #6f6264 !important;
}

/* Cabecera del blog y de la búsqueda (h1 añadido por hz-contenido.php) */
.hz-cabecera-archivo {
  margin: 0 0 2rem;
}

.hz-cabecera-archivo h1 {
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.8rem);
  line-height: 1.1;
  color: #9c5b38;
  margin: 0;
}

/* ---------- Listados de cursos de LearnPress ----------
   El listado se carga por AJAX y antes pinta un esqueleto 523 px más alto que
   el resultado (hay un solo curso): el pie saltaba hacia arriba (CLS 0,15).
   Se le reserva al esqueleto la altura real del listado. */
.lp-list-courses-default .lp-skeleton-animation {
  height: 485px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .lp-list-courses-default .lp-skeleton-animation {
    height: 760px;
  }
}

/* ---------- Jerarquía de titulares en las páginas que no son de Elementor ----------
   (legales, cuenta, blog, fichas de producto). Con Unna el tema tenía el título
   de página a 30 px y los h2 del contenido a 40 px: la jerarquía salía al revés.
   Y el título de las entradas del blog, a 72 px, ocupaba tres líneas con Fraunces. */
body:not(.elementor-page) .entry-header .entry-title,
body.single-post .entry-title {
  font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3rem) !important;
  line-height: 1.12 !important;
  color: #9c5b38;
}

body:not(.elementor-page) .entry-content h2,
body.single-product .woocommerce-Tabs-panel h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.05rem) !important;
  line-height: 1.2 !important;
}

body:not(.elementor-page) .entry-content h3,
body.single-product .woocommerce-Tabs-panel h3 {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem) !important;
  line-height: 1.25 !important;
}

/* ---------- Botones de WooCommerce y del blog ----------
   Heredaban el estilo del kit de Elementor (rosa y «Capitalize», que escribía
   «Añadir Al Carrito»). Mismo botón terracota que el carrito y el pago. */
.single_add_to_cart_button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button,
.woocommerce-button.button,
.woocommerce-ResetPassword .button,
#respond input#submit,
.comment-form input[type=submit] {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: #fff !important;
  background: #9c5b38 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: .8rem 1.7rem !important;
  min-height: 46px;
  transition: background-color .3s cubic-bezier(.16, 1, .3, 1);
}

.single_add_to_cart_button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-Button:hover,
.woocommerce-button.button:hover,
#respond input#submit:hover,
.comment-form input[type=submit]:hover {
  background: #864b2c !important;
  color: #fff !important;
}

/* El resto de botones de WooCommerce: sin «Capitalize» */
.woocommerce a.button,
.woocommerce button.button {
  text-transform: none !important;
}

/* ---------- Campos de formulario de WooCommerce y del blog ----------
   Cuadrados con borde gris #ddd; mismo campo que el pago y Contacto. */
.woocommerce form .input-text,
.woocommerce form input[type=text],
.woocommerce form input[type=email],
.woocommerce form input[type=password],
.woocommerce form input[type=tel],
.woocommerce form textarea,
form.cart .qty,
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  border: 1px solid rgba(22, 1, 5, .12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: .7rem .9rem;
  min-height: 44px;
}

.woocommerce form .input-text:focus,
.woocommerce form input:focus,
.woocommerce form textarea:focus,
form.cart .qty:focus,
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: #9c5b38 !important;
  box-shadow: 0 0 0 3px rgba(156, 91, 56, .18) !important;
}

/* Estado de existencias en las fichas de producto:
   «14 disponibles» en verde #77a464 (2,86:1) y «Sin existencias» en rojo puro (3,96:1) */
.woocommerce div.product .stock.in-stock,
.stock.in-stock {
  color: #3f6b2e !important;
}

.woocommerce div.product .stock.out-of-stock,
.stock.out-of-stock {
  color: #b3261e !important;
}

/* El título de las entradas del blog es un <h1> sin clase y el de la página 404
   un .page-title: les llegaba el tamaño genérico del tema para h1 (4,5rem = 72 px). */
body.single-post .site-main h1,
body.error404 .page-title {
  font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3rem) !important;
  line-height: 1.12 !important;
  color: #9c5b38;
}

/* ==========================================================
   PÁGINAS DEL MENÚ — funcionalidad y estética
   ========================================================== */

/* ---------- Botón de Elementor con el mismo estilo que el resto ----------
   Clase «hz-boton» en el widget de botón: terracota, píldora, 48 px de alto. */
.hz-boton .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .85rem 1.9rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #9c5b38 !important;
  color: #fff !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: 0 10px 24px -12px rgba(156, 91, 56, .7);
  transition: background-color .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}

.hz-boton .elementor-button:hover,
.hz-boton .elementor-button:focus {
  background: #864b2c !important;
  color: #fff !important;
}

.hz-boton .elementor-button:active {
  transform: translateY(1px) scale(.99);
}

/* ---------- Plan nutricional: los h3 quedan por debajo de los h2 ----------
   Al ordenar los niveles, dos h3 se habían quedado en 32 px, el mismo tamaño
   que los títulos de sección. */
body.page-id-1437 .elementor-widget-heading h3.elementor-heading-title,
body.page-id-1437 .elementor-widget-text-editor h3 {
  font-size: clamp(1.4rem, 1.2rem + .7vw, 1.7rem) !important;
  line-height: 1.3 !important;
}

/* ---------- Curso: el título de la página estaba por debajo de sus secciones ----------
   h1 a 28,8 px con los h2 a 32,8 px. */
h1.course-title {
  font-size: clamp(2rem, 1.4rem + 2.1vw, 2.8rem) !important;
  line-height: 1.15 !important;
}

.course-description h2 {
  font-size: clamp(1.6rem, 1.35rem + .9vw, 2rem) !important;
  line-height: 1.25 !important;
}

.course-description h3 {
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem) !important;
  line-height: 1.3 !important;
}

/* Aclaración entre paréntesis que era un h5. Va debajo de la imagen flotada,
   no en la columna estrecha que quedaba a su lado. */
.hz-nota {
  clear: both;
  font-size: .95rem !important;
  color: #6f6264 !important;
}

/* «8 minutos» de cada lección: gris #8a8a8a sobre blanco (3,45:1) */
.course-item .duration,
.lp-course-curriculum .duration,
.course-item__right .duration {
  color: #6f6264 !important;
}

/* ---------- Objetivos táctiles ----------
   WCAG 2.5.8 pide 24 × 24 px como mínimo; el móvil agradece 44. */

/* Flechas de los carruseles de Elementor: 25 × 25 px.
   El relleno crece el área sensible y el margen negativo deja la flecha donde estaba. */
.elementor-swiper-button {
  padding: 10px !important;
  margin: -10px !important;
}

/* Puntos de paginación: 6 px de diámetro. Se agrandan un poco y se les da
   un área sensible de 24 px sin cambiar el círculo. */
.swiper-pagination-bullet {
  position: relative;
  width: 10px !important;
  height: 10px !important;
  margin: 0 8px !important;
}

.swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: -7px;
}


@media (max-width: 921px) {
  /* Enlaces «Ver …» de las tarjetas de la portada: 26 px de alto */
  .hz-ts .ts-enlace {
    padding-block: .55rem;
    margin-block: -.55rem;
  }

  /* Título de cada producto en la tienda y en la portada */
  .ast-loop-product__link {
    display: inline-block;
    padding-block: .35rem;
    margin-block: -.35rem;
  }

  /* «Responder» de los comentarios del curso y del blog */
  .comment-reply-link {
    display: inline-block;
    padding-block: .4rem;
    margin-block: -.4rem;
  }
}

/* Etiquetas de la ficha del curso («Requisitos», «Características»…) */
.course-extra-box__title {
  font-size: 1.05rem !important;
}

/* ---------- Aviso de cookies ----------
   Es lo primero que ve cualquiera que entra. Venía con la tipografía del
   sistema, botones de 40 px y texto gris #54595f sobre el salmón del tema
   (4,15:1, por debajo del 4,5:1 exigido). «Aceptar todo» y «Rechazar» se
   dejan idénticos: misma forma, mismo tamaño y mismo peso visual. */
.cdp-cookies-banner,
.cdp-cookies-panel {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  border-radius: 16px !important;
}

.cdp-cookies-banner__text p,
.cdp-cookies-panel p {
  color: #453437 !important;
}

.cdp-cookies-banner__text a,
.cdp-cookies-panel a {
  color: #9c5b38 !important;
  text-underline-offset: 2px;
}

.cdp-cookies-banner__actions .cdp-cookies-button,
.cdp-cookies-panel .cdp-cookies-button {
  min-height: 44px !important;
  border-radius: 999px !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: background-color .3s cubic-bezier(.16, 1, .3, 1);
}

/* Aceptar y rechazar, exactamente igual de visibles */
.cdp-cookies-button[data-cdp-cookies-accept-all],
.cdp-cookies-button[data-cdp-cookies-reject],
.cdp-cookies-button--primary {
  background: #9c5b38 !important;
  border: 1px solid #9c5b38 !important;
  color: #fff !important;
}

.cdp-cookies-button[data-cdp-cookies-accept-all]:hover,
.cdp-cookies-button[data-cdp-cookies-reject]:hover,
.cdp-cookies-button--primary:hover {
  background: #864b2c !important;
  border-color: #864b2c !important;
}

/* Configurar: mismo tamaño, menos peso */
.cdp-cookies-button[data-cdp-cookies-configure],
.cdp-cookies-button[data-cdp-cookies-save] {
  background: #fff !important;
  border: 1px solid #9c5b38 !important;
  color: #9c5b38 !important;
}

.cdp-cookies-button[data-cdp-cookies-configure]:hover,
.cdp-cookies-button[data-cdp-cookies-save]:hover {
  background: #fff3e8 !important;
}

.cdp-cookies-button--link {
  background: none !important;
  border: 0 !important;
  color: #9c5b38 !important;
  min-height: 44px !important;
}

/* ---------- Botones de compra del curso ----------
   Marrón casi negro #301407 y «Capitalize», que escribía «Comprar Ahora».
   Mismo botón terracota que la tienda, el carrito y el pago. */
.lp-button,
.course-sidebar .lp-button,
button.button-purchase-course,
.lp_course_buttons .lp-button {
  background: #9c5b38 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  min-height: 48px;
  transition: background-color .3s cubic-bezier(.16, 1, .3, 1);
}

.lp-button:hover,
.course-sidebar .lp-button:hover,
button.button-purchase-course:hover,
.lp_course_buttons .lp-button:hover {
  background: #864b2c !important;
  color: #fff !important;
}