/*
Theme Name: Hello Child
Theme URI: https://winemad.es/
Description: Tema hijo de Hello Elementor para WINEMAD 2027. Contiene el sistema de diseño v3 "Modern Geometric".
Author: WINEMAD
Template: hello-elementor
Version: 3.0
Text Domain: hello-child
*/

/* -------------------------------------------------------------------------
   NO EDITAR ESTE FICHERO A MANO.

   Se genera desde:
       diseno web/v3-stitch/winemad-v3.css
   con:
       python diseno web/v3-stitch/sync_child_theme.py

   Si lo editas aquí, el cambio se pierde en la siguiente regeneración Y las
   previsualizaciones de verificación dejarán de coincidir con la web real.

   Generado: 07/08/2026 09:34
   ------------------------------------------------------------------------- */

/* =========================================================================
   WINEMAD 2027 — Sistema de diseño v3 "Modern Geometric"
   Tema hijo de Hello Elementor. Pegar en style.css del hijo
   (o en Elementor → Ajustes del sitio → CSS personalizado).
   Fuente: diseños Stitch aprobados. Ver SISTEMA-DISENO-v3.md
   ========================================================================= */

:root {
  /* Marca */
  --wm-burdeos-deep: #570013;
  --wm-burdeos:      #800020;
  --wm-ink:          #1e1b18;
  --wm-gray:         #5f5e5e;

  /* Superficies champagne */
  --wm-surface:        #fff8f5;
  --wm-surface-lowest: #ffffff;
  --wm-surface-low:    #fbf2ed;
  --wm-surface-mid:    #f5ece7;
  --wm-surface-high:   #efe6e2;
  --wm-surface-var:    #e9e1dc;

  /* Apoyo */
  --wm-outline:      #8c7071;
  --wm-outline-var:  #e0bfbf;
  --wm-pink:         #ffdada;
  --wm-charcoal:     #34302c;
  --wm-teal:         #002c36;
  --wm-gold:         #d4af37;

  /* Sombras tintadas — nunca negro */
  --wm-shadow-sm: 0 2px 8px rgba(87, 0, 19, .05);
  --wm-shadow-md: 0 10px 30px rgba(87, 0, 19, .08);
  --wm-shadow-lg: 0 20px 50px rgba(87, 0, 19, .12);

  /* Formas */
  --wm-r-btn:  12px;
  --wm-r-card: 24px;
  --wm-r-hero: 32px;

  /* Retícula */
  --wm-container: 1280px;
  --wm-gutter: 24px;
}

/* ---------- Base ---------------------------------------------------- */

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--wm-surface);
  color: var(--wm-ink);
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ---------- Eyebrow (etiqueta sobre el titular) ---------------------- */

.wm-eyebrow,
.wm-eyebrow .elementor-heading-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wm-burdeos-deep);
}

.wm-eyebrow--light,
.wm-eyebrow--light .elementor-heading-title { color: var(--wm-pink); }

/* Chip/pastilla del hero */
.wm-chip .elementor-button,
.wm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(87, 0, 19, .08);
  color: var(--wm-burdeos-deep);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Botones -------------------------------------------------- */

.wm-btn-primary .elementor-button {
  background-color: var(--wm-burdeos-deep);
  color: #fff;
  border-radius: var(--wm-r-btn);
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: var(--wm-shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wm-btn-primary .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--wm-shadow-lg);
  background-color: var(--wm-burdeos-deep);
  color: #fff;
}

.wm-btn-secondary .elementor-button {
  background-color: transparent;
  color: var(--wm-burdeos-deep);
  border: 2px solid var(--wm-burdeos-deep);
  border-radius: var(--wm-r-btn);
  padding: 14px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background-color .2s ease;
}
.wm-btn-secondary .elementor-button:hover {
  background-color: rgba(87, 0, 19, .05);
  color: var(--wm-burdeos-deep);
}

/* Botón de la cabecera */
.wm-btn-nav .elementor-button {
  background-color: var(--wm-burdeos);
  color: var(--wm-pink);
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
}
.wm-btn-nav .elementor-button:hover { opacity: .9; color: var(--wm-pink); }

/* Botón blanco sobre fondo burdeos */
.wm-btn-invert .elementor-button {
  background-color: #fff;
  color: var(--wm-burdeos-deep);
  border-radius: var(--wm-r-btn);
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
}
.wm-btn-invert .elementor-button:hover { background-color: var(--wm-surface-mid); color: var(--wm-burdeos-deep); }

/* Enlace-flecha subrayado */
.wm-link-arrow .elementor-button {
  background: transparent;
  color: var(--wm-burdeos-deep);
  border-bottom: 2px solid var(--wm-burdeos-deep);
  border-radius: 0;
  padding: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.wm-link-arrow .elementor-button:hover { gap: 16px; color: var(--wm-burdeos-deep); }

/* Sobre fondo burdeos u oscuro el enlace-flecha se invierte, si no es ilegible */
.wm-card--dark .wm-link-arrow .elementor-button,
.wm-burdeos .wm-link-arrow .elementor-button,
.wm-dark .wm-link-arrow .elementor-button {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .5);
}
.wm-card--dark .wm-link-arrow .elementor-button:hover,
.wm-burdeos .wm-link-arrow .elementor-button:hover,
.wm-dark .wm-link-arrow .elementor-button:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.wm-link-arrow .elementor-button-content-wrapper { gap: 8px; transition: gap .2s ease; }

/* ---------- Tarjetas -------------------------------------------------- */

.wm-card {
  background: var(--wm-surface-lowest);
  border: 1px solid rgba(224, 191, 191, .3);
  border-radius: var(--wm-r-card);
  transition: box-shadow .25s ease, transform .25s ease;
}
.wm-card:hover { box-shadow: var(--wm-shadow-md); }

.wm-card--dark {
  background: var(--wm-burdeos-deep);
  border-color: transparent;
  box-shadow: var(--wm-shadow-lg);
  color: #fff;
}
.wm-card--dark h1, .wm-card--dark h2, .wm-card--dark h3,
.wm-card--dark h4, .wm-card--dark p, .wm-card--dark .elementor-heading-title { color: #fff; }

.wm-card--muted { background: var(--wm-surface-high); border-color: transparent; }

/* Cuadro de icono de tarjeta */
.wm-icobox .elementor-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(87, 0, 19, .05);
  border-radius: 8px;
  color: var(--wm-burdeos-deep);
  transition: transform .25s ease;
}
.wm-card:hover .wm-icobox .elementor-icon { transform: scale(1.1); }
.wm-card--dark .wm-icobox .elementor-icon { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- Estadística (borde izquierdo) ----------------------------- */

.wm-stat {
  border-left: 4px solid var(--wm-burdeos-deep);
  background: rgba(245, 236, 231, .4);
  border-radius: 0 12px 12px 0;
  padding: 32px;
}
.wm-stat .wm-stat-num,
.wm-stat .wm-stat-num .elementor-heading-title {
  font-size: 48px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--wm-burdeos-deep);
}
.wm-stat .wm-stat-lbl,
.wm-stat .wm-stat-lbl .elementor-heading-title {
  font-size: 14px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wm-gray);
}
/* Variante sobre fondo oscuro */
.wm-stat--onDark .wm-stat-num .elementor-heading-title { color: var(--wm-pink); }
.wm-stat--onDark .wm-stat-lbl .elementor-heading-title { color: rgba(255, 255, 255, .75); }

/* ---------- Tarjeta de programa (imagen + degradado) ------------------ */

.wm-program {
  position: relative;
  border-radius: var(--wm-r-hero);
  overflow: hidden;
  min-height: 500px;
}
.wm-program::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(87, 0, 19, .92) 0%,
              rgba(87, 0, 19, .35) 45%,
              rgba(87, 0, 19, 0) 100%);
  pointer-events: none;
}
/* Todo el contenido de la tarjeta va por encima del degradado */
.wm-program > .e-con-inner,
.wm-program > .elementor-widget-wrap,
.wm-program > .elementor-widget,
.wm-program > .e-con { position: relative; z-index: 2; }
.wm-program img { transition: transform .7s ease; }
.wm-program:hover img { transform: scale(1.05); }

/* ---------- Tarjeta "glass" del contador ------------------------------ */

.wm-glass {
  background: rgba(255, 248, 245, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(224, 191, 191, .35);
  border-radius: var(--wm-r-card);
  box-shadow: var(--wm-shadow-lg);
}
.wm-glass .elementor-countdown-item { padding: 0; background: transparent; }
.wm-glass .elementor-countdown-digits {
  font-size: 24px; font-weight: 600; line-height: 1.3;
  color: var(--wm-burdeos-deep);
}
.wm-glass .elementor-countdown-label {
  font-size: 12px; font-weight: 400; line-height: 1.4;
  text-transform: uppercase; color: var(--wm-gray);
}

/* ---------- Imagen del hero ------------------------------------------- */

.wm-hero-img img {
  border-radius: var(--wm-r-hero);
  box-shadow: var(--wm-shadow-lg);
  object-fit: cover;
  width: 100%;
}

/* ---------- Tira de logos (carrusel horizontal) ----------------------- */

.wm-logostrip { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.wm-logostrip::-webkit-scrollbar { display: none; }
.wm-logostrip .wm-logo {
  flex: 0 0 192px;
  height: 192px;
  background: var(--wm-surface-lowest);
  border: 1px solid rgba(224, 191, 191, .35);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  filter: grayscale(1);
  transition: filter .25s ease;
}
.wm-logostrip .wm-logo:hover { filter: grayscale(0); }

/* ---------- Formularios ----------------------------------------------- */

.wm-form .elementor-field-group > label,
.wm-form label {
  font-size: 14px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wm-gray);
  margin-bottom: 8px;
}
.wm-form input[type="text"],
.wm-form input[type="email"],
.wm-form input[type="tel"],
.wm-form select,
.wm-form textarea {
  background: var(--wm-surface-low);
  border: 1px solid rgba(224, 191, 191, .5);
  border-radius: var(--wm-r-btn);
  padding: 12px 16px;
  font-size: 16px;
  color: var(--wm-ink);
  width: 100%;
}
.wm-form input:focus, .wm-form select:focus, .wm-form textarea:focus {
  outline: none;
  border-color: var(--wm-burdeos-deep);
  box-shadow: 0 0 0 3px rgba(87, 0, 19, .08);
}
.wm-form ::placeholder { color: rgba(95, 94, 94, .55); }
.wm-form button[type="submit"],
.wm-form .elementor-button[type="submit"] {
  width: 100%;
  background: var(--wm-burdeos-deep);
  color: #fff;
  border-radius: var(--wm-r-btn);
  padding: 16px;
  font-size: 14px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase;
}

/* Tarjeta que envuelve el formulario */
.wm-formcard {
  background: var(--wm-surface-lowest);
  border-radius: var(--wm-r-card);
  box-shadow: var(--wm-shadow-lg);
  padding: 40px;
}

/* ---------- Acordeón / FAQ -------------------------------------------- */

.wm-faq .e-n-accordion-item,
.wm-faq .elementor-accordion-item {
  background: var(--wm-surface-lowest);
  border: 1px solid rgba(224, 191, 191, .35);
  border-radius: var(--wm-r-btn);
  margin-bottom: 12px;
  overflow: hidden;
}
.wm-faq summary,
.wm-faq .elementor-tab-title {
  font-size: 16px; font-weight: 500; color: var(--wm-ink);
  padding: 18px 20px;
}

/* ---------- Bloques oscuros a sangre ---------------------------------- */

.wm-dark { background: var(--wm-charcoal); color: #fff; }
.wm-dark h1, .wm-dark h2, .wm-dark h3, .wm-dark h4,
.wm-dark .elementor-heading-title { color: #fff; }
.wm-dark p, .wm-dark .elementor-widget-text-editor { color: rgba(255, 255, 255, .8); }

.wm-burdeos { background: var(--wm-burdeos-deep); color: #fff; }
.wm-burdeos h1, .wm-burdeos h2, .wm-burdeos h3, .wm-burdeos h4,
.wm-burdeos .elementor-heading-title { color: #fff; }
.wm-burdeos p, .wm-burdeos .elementor-widget-text-editor { color: rgba(255, 255, 255, .8); }

/* ---------- Cabecera --------------------------------------------------- */

.wm-header {
  position: sticky; top: 0; z-index: 99;
  background: var(--wm-surface);
  border-bottom: 1px solid rgba(224, 191, 191, .25);
  box-shadow: var(--wm-shadow-sm);
}
/*
   SUBRAYADO DEL MENÚ
   -------------------------------------------------------------------------
   Se hace con `border-bottom` y NO con un pseudo-elemento ni con el "Puntero"
   de Elementor. Motivo: Elementor ya usa ::before y ::after de .elementor-item
   para dibujar sus punteros, y su caja no es la que uno espera; un ::after
   propio acababa saliendo a media altura, como un tachado.

   El borde está SIEMPRE presente, solo cambia de color. Así ocupa su sitio
   desde el principio y el menú no se descoloca al pasar el cursor.
*/

/*
   Se engancha a `.wm-nav`, la clase del PROPIO widget de menú, y no a
   `.wm-header` (el contenedor). Si alguna vez se rehace la cabecera y se
   pierde la clase del contenedor, el menú sigue estilándose igual.
   `.wm-header` se mantiene como respaldo.

   Los `!important` no son por pereza: Elementor genera CSS por widget con
   selectores del tipo `.elementor-1234 .elementor-item` que siempre ganan
   por especificidad a cualquier regla del tema.
*/

/* Ningún subrayado heredado ni puntero de Elementor por debajo */
.wm-nav .elementor-item,
.wm-nav .elementor-item:hover,
.wm-nav .elementor-item:focus,
.wm-header .elementor-nav-menu .elementor-item,
.wm-header .elementor-nav-menu .elementor-item:hover,
.wm-header .elementor-nav-menu .elementor-item:focus {
  text-decoration: none !important;
  box-shadow: none !important;
}
.wm-nav .elementor-item::before,
.wm-nav .elementor-item::after,
.wm-header .elementor-nav-menu .elementor-item::before,
.wm-header .elementor-nav-menu .elementor-item::after {
  content: none !important;
}

/*
   La línea se pinta como FONDO degradado y no como border-bottom.
   Un borde mide siempre lo mismo que la caja del enlace; el fondo permite
   controlar largo, grosor y posición, y además se puede animar.

   Al estar centrada (background-position 50%), la línea se abre desde el
   centro hacia los dos lados en lugar de crecer de izquierda a derecha.

   Mandos, por si hay que reajustarlo:
     --wm-nav-largo    ancho de la línea (% de la caja del enlace, o px)
     --wm-nav-grosor   alto de la línea
     --wm-nav-hueco    separación entre el texto y la línea
   Valores aprobados el 22-jul-2026 tras probarlos en el sitio.
*/
.wm-nav .elementor-item,
.wm-header .elementor-nav-menu .elementor-item {
  --wm-nav-largo: 70%;
  --wm-nav-grosor: 4px;
  --wm-nav-hueco: 14px;

  font-size: 16px;
  font-weight: 400;
  color: var(--wm-gray);

  /* Solo el relleno VERTICAL. Nunca usar el atajo `padding` aquí: el relleno
     horizontal es lo que separa unos elementos de otros en el menú, y se
     controla desde el widget (Estilo -> Menú principal -> Espaciado
     horizontal). Con el atajo + !important quedaba a 0 y el menú salía todo
     pegado. */
  padding-top: 4px !important;
  padding-bottom: var(--wm-nav-hueco) !important;

  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;   /* Elementor pinta fondo en hover */
  background-image: linear-gradient(var(--wm-burdeos-deep),
                                    var(--wm-burdeos-deep)) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 100% !important;   /* abajo, centrada */
  background-size: 0 2px !important;          /* en reposo, sin línea */
  transition: background-size .25s ease, color .2s ease;
}

.wm-nav .elementor-item:hover,
.wm-nav .elementor-item:focus-visible,
.wm-nav .elementor-item.elementor-item-active,
.wm-header .elementor-nav-menu .elementor-item:hover,
.wm-header .elementor-nav-menu .elementor-item:focus-visible,
.wm-header .elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--wm-burdeos-deep) !important;
  background-size: var(--wm-nav-largo) var(--wm-nav-grosor) !important;
}

/* La negrita se reserva a la página activa: en hover ensancharía el texto y
   descolocaría el menú entero a cada paso del cursor. */
.wm-nav .elementor-item.elementor-item-active,
.wm-header .elementor-nav-menu .elementor-item.elementor-item-active {
  font-weight: 700;
}

/* En el desplegable de móvil el subrayado sobra: ahí los enlaces van apilados
   y a ancho completo. */
.elementor-nav-menu--dropdown .elementor-item,
.wm-nav-mobile .elementor-item {
  background-image: none !important;
  border-bottom-color: transparent !important;
}

/* ---------- Pie -------------------------------------------------------- */

.wm-footer { background: var(--wm-surface-lowest); border-top: 1px solid rgba(224, 191, 191, .4); }
.wm-footer .wm-foot-head .elementor-heading-title {
  font-size: 14px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wm-burdeos-deep);
}
.wm-footer a { color: var(--wm-outline); transition: color .2s ease; }
.wm-footer a:hover { color: var(--wm-burdeos-deep); }
.wm-footer .wm-foot-legal { border-top: 1px solid rgba(224, 191, 191, .3); }

/* ---------- Marcadores de dato pendiente ------------------------------- */
/* Cualquier texto que empiece por ⚠ es un dato SIN confirmar. Ver DATOS-OFICIALES.md */

/* ---------- Responsive ------------------------------------------------- */

@media (max-width: 1024px) {
  .wm-program { min-height: 420px; }
}

@media (max-width: 767px) {
  .wm-stat { padding: 20px; }
  .wm-stat .wm-stat-num,
  .wm-stat .wm-stat-num .elementor-heading-title { font-size: 32px; }
  .wm-program { min-height: 360px; }
  .wm-formcard { padding: 24px; border-radius: 16px; }
  .wm-logostrip .wm-logo { flex-basis: 140px; height: 140px; padding: 20px; }
  .wm-glass { position: static !important; width: 100%; }
  .wm-btn-primary .elementor-button,
  .wm-btn-secondary .elementor-button { width: 100%; justify-content: center; }
}

/* ---------- Composiciones específicas ---------------------------------- */

/* Hero: la tarjeta del contador se superpone a la foto por abajo-izquierda */
.wm-hero-media { position: relative; }
.wm-hero-media .wm-hero-img img { aspect-ratio: 1 / 1; }
.wm-countdown-float {
  position: absolute;
  bottom: -40px;
  left: -40px;
  z-index: 20;
  min-width: 320px;
}
.wm-countdown-float .elementor-countdown-wrapper { display: flex; gap: 16px; }
.wm-countdown-float .elementor-countdown-item { flex: 1; text-align: center; }

@media (max-width: 1024px) {
  .wm-countdown-float { left: 0; bottom: -32px; min-width: 0; width: 100%; }
}
@media (max-width: 767px) {
  .wm-countdown-float { position: static; margin-top: 16px; width: 100%; }
  .wm-hero-media .wm-hero-img img { aspect-ratio: 4 / 3; }
}

/* Mockup de la app en el bloque burdeos */
.wm-appmock img {
  max-width: 300px;
  border-radius: 40px;
  border: 8px solid #34302c;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

/* Chip del hero */
.wm-chip { align-self: flex-start; }

/* =========================================================================
   INTEGRACIÓN CON HELLO ELEMENTOR Y ELEMENTOR PRO
   Correcciones para que el sistema mande sobre los estilos por defecto.
   ========================================================================= */

/* Hello Elementor no fija la familia en titulares; sin esto los H heredan
   la fuente del tema y no Poppins. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Poppins', sans-serif;
}

/* Elementor Pro impone su propio padding y radio a los botones. Nuestras
   reglas .wm-btn-* ya son más específicas, pero el reset de sombra y borde
   hay que hacerlo aquí para que no quede el contorno gris por defecto. */
.elementor-button { border: 0; box-shadow: none; }
.wm-btn-secondary .elementor-button { border: 2px solid var(--wm-burdeos-deep); }

/* El widget HTML añade un margen inferior heredado del tema */
.elementor-widget-html > * { margin: 0; }

/* Las imágenes dentro de contenedores con overflow oculto deben llenar la caja */
.wm-program img,
.wm-hero-img img { width: 100%; }

/* ---------- Accesibilidad ---------------------------------------------- */

/* Foco visible propio: el burdeos sobre champagne pasa contraste AA.
   Nunca quitar el foco sin sustituirlo — se navega con teclado. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--wm-burdeos);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Salto al contenido para lectores de pantalla */
.wm-skip-link {
  position: absolute; left: -9999px;
  background: var(--wm-burdeos-deep); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--wm-r-btn) 0;
  font-size: 14px; font-weight: 600; z-index: 999;
}
.wm-skip-link:focus { left: 0; top: 0; }

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .wm-btn-primary .elementor-button:hover { transform: none; }
  .wm-program:hover img { transform: none; }
}

/* ---------- Impresión --------------------------------------------------- */

@media print {
  .wm-header, .wm-footer, .wm-countdown-float { display: none !important; }
  .wm-burdeos, .wm-dark { background: #fff !important; color: #000 !important; }
  .wm-burdeos *, .wm-dark * { color: #000 !important; }
}

/* =========================================================================
   COMPONENTES DE LA PÁGINA EXPONER
   ========================================================================= */

/* Filete corto bajo el H2 (patrón de encabezado de Exponer) */
.wm-rule {
  width: 96px; height: 4px; background: var(--wm-burdeos-deep);
  border: 0; margin: 0;   /* sin el margin:0 el <hr> se autocentra */
}

/* Icono decorativo enorme y translúcido en la esquina de una tarjeta */
.wm-ghost {
  position: absolute; top: 24px; right: 24px;
  font-size: 120px; line-height: 1;
  color: var(--wm-burdeos-deep); opacity: .08;
  pointer-events: none; user-select: none;
}
.wm-ghost--inline {
  position: static; font-size: 80px; opacity: .18; display: block;
}

/* Icono circular centrado (tarjetas de perfil de visitante) */
.wm-round-icon {
  width: 64px; height: 64px; border-radius: 9999px;
  background: rgba(87, 0, 19, .05);
  display: flex; align-items: center; justify-content: center;
  color: var(--wm-burdeos-deep);
  margin: 0 auto;
}
.wm-card--center { text-align: center; }
.wm-card--center .elementor-widget { width: 100%; }

/* ---------- Tarjeta de tarifa ------------------------------------------ */

.wm-price {
  background: var(--wm-surface-lowest);
  border: 1px solid rgba(224, 191, 191, .6);
  border-radius: var(--wm-r-card);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.wm-price:hover { border-color: var(--wm-burdeos-deep); box-shadow: var(--wm-shadow-md); }
.wm-price img { width: 100%; height: 192px; object-fit: cover; }

/* La destacada: borde burdeos, elevada y ligeramente mayor */
.wm-price--featured {
  border: 2px solid var(--wm-burdeos-deep);
  box-shadow: var(--wm-shadow-lg);
  position: relative;
  z-index: 2;
}
.wm-price--featured img { height: 224px; }

@media (min-width: 1025px) {
  /* El diseño aprobado sube y agranda la tarjeta recomendada */
  .wm-price--featured { margin-top: -32px; transform: scale(1.04); }
}

/* Etiqueta "Recomendado" */
.wm-badge {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  background: var(--wm-burdeos-deep); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px; border-radius: 9999px;
}

/* Pie de precio, separado por un filete */
.wm-price-foot { border-top: 1px solid rgba(224, 191, 191, .5); padding-top: 24px; }
.wm-price-foot .wm-price-label {
  font-size: 12px; text-transform: uppercase; color: var(--wm-gray);
  letter-spacing: .05em; display: block; margin-bottom: 4px;
}
.wm-price-foot .wm-price-amount {
  font-size: 24px; font-weight: 700; color: var(--wm-burdeos-deep);
}
.wm-price-foot .wm-price-note {
  font-size: 12px; color: var(--wm-gray); display: block; margin-top: 6px;
}

/* Franja informativa bajo las tarifas (Suelo Libre, descuentos) */
.wm-note-strip {
  background: rgba(245, 236, 231, .6);
  border-left: 4px solid var(--wm-burdeos-deep);
  border-radius: 0 12px 12px 0;
  padding: 24px 32px;
  font-size: 15px; line-height: 1.6; color: var(--wm-gray);
}
.wm-note-strip strong { color: var(--wm-burdeos-deep); }
.wm-note-strip p { margin: 0 0 8px; }
.wm-note-strip p:last-child { margin-bottom: 0; }

/* ---------- Dato con icono (bloque lateral del formulario) ------------- */

.wm-infoitem { display: flex; gap: 16px; align-items: flex-start; }
.wm-infoitem .wm-infoitem-ico {
  flex: 0 0 auto;
  background: rgba(87, 0, 19, .08); color: var(--wm-burdeos-deep);
  padding: 12px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.wm-infoitem h6 {
  font-size: 16px; font-weight: 600; color: var(--wm-burdeos-deep);
  margin: 0 0 2px;
}
.wm-infoitem p { font-size: 13px; line-height: 1.5; color: var(--wm-gray); margin: 0; }

@media (max-width: 767px) {
  .wm-ghost { font-size: 72px; top: 12px; right: 12px; }
  .wm-price--featured { margin-top: 0; transform: none; }
  .wm-price img, .wm-price--featured img { height: 180px; }
  .wm-note-strip { padding: 20px; }
}

/* Foto con degradado y pie de texto (bento de Hosted Buyer) */
.wm-photocard { position: relative; }
.wm-photocard::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(87, 0, 19, .75) 0%, rgba(87, 0, 19, 0) 60%);
  pointer-events: none;
}
.wm-photocard > .e-con,
.wm-photocard > .elementor-widget { position: relative; z-index: 2; }

/* ---------- Placa "2027 · Madrid" del hero de La Feria ------------------ */

.wm-plate {
  position: absolute; bottom: -28px; left: -28px; z-index: 3;
  background: var(--wm-burdeos-deep); color: #fff;
  border-radius: 16px; padding: 20px 28px;
  box-shadow: var(--wm-shadow-lg);
  display: flex; flex-direction: column; align-items: center;
}
.wm-plate-year { font-size: 32px; font-weight: 700; line-height: 1; }
.wm-plate-city {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--wm-pink); margin-top: 4px;
}

/* Variante del bloque de foto con el texto a la izquierda y no abajo del todo */
.wm-photocard--left::after {
  background: linear-gradient(to right, rgba(87, 0, 19, .88) 0%,
                                        rgba(87, 0, 19, .55) 55%,
                                        rgba(87, 0, 19, .1) 100%);
}

/* Dato con icono sobre fondo oscuro */
.wm-infoitem--onDark .wm-infoitem-ico {
  background: rgba(255, 255, 255, .12); color: var(--wm-pink);
}
.wm-infoitem--onDark h6 { color: #fff; }
.wm-infoitem--onDark p { color: rgba(255, 255, 255, .72); }

/* Icono decorativo sobre fondo oscuro */
.wm-dark .wm-ghost, .wm-ghostwrap .wm-ghost {
  color: #fff; opacity: .07; font-size: 200px;
}

@media (max-width: 767px) {
  .wm-plate { position: static; margin-top: 16px; align-self: flex-start; }
}

/* ---------- Texto largo (páginas legales, notas, artículos) ------------- */

.wm-prose { font-size: 16px; line-height: 1.7; color: var(--wm-gray); }
.wm-prose h2 {
  font-size: 24px; font-weight: 600; line-height: 1.3;
  color: var(--wm-burdeos-deep);
  margin: 40px 0 12px;
}
.wm-prose h2:first-child { margin-top: 0; }
.wm-prose h3 {
  font-size: 18px; font-weight: 600; line-height: 1.4;
  color: var(--wm-ink);
  margin: 28px 0 8px;
}
.wm-prose p { margin: 0 0 16px; }
.wm-prose ul, .wm-prose ol { margin: 0 0 16px; padding-left: 22px; }
.wm-prose li { margin-bottom: 8px; }
.wm-prose strong { color: var(--wm-ink); }
.wm-prose a { color: var(--wm-burdeos-deep); text-decoration: underline; }
.wm-prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px;
}
.wm-prose th, .wm-prose td {
  border-bottom: 1px solid rgba(224, 191, 191, .5);
  padding: 12px 8px; text-align: left;
}
.wm-prose th { color: var(--wm-burdeos-deep); font-weight: 600; }

/* Caja de mapa pendiente de incrustar */
.wm-mapbox {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  min-height: 260px; padding: 32px;
  border: 2px dashed rgba(255, 255, 255, .25);
  border-radius: var(--wm-r-card);
  color: rgba(255, 255, 255, .8); font-size: 15px;
}
.wm-mapbox .material-symbols-outlined { font-size: 40px; opacity: .7; }
.wm-mapbox small { font-size: 12px; color: rgba(255, 255, 255, .5); }

/* =========================================================================
   REJILLA DE NOTICIAS  (widget "Entradas" / Loop Grid de Elementor Pro)
   Poner la clase `wm-newsgrid` en el widget (Avanzado -> Clases CSS).
   Reproduce el estilo de tarjeta del sistema y aplica a la FOTO el mismo
   degradado que las tarjetas de programa (.wm-program).
   ========================================================================= */

.wm-newsgrid .elementor-post,
.wm-newsgrid .e-loop-item {
  background: var(--wm-surface-lowest);
  border: 1px solid rgba(224, 191, 191, .3);
  border-radius: var(--wm-r-card);
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.wm-newsgrid .elementor-post:hover,
.wm-newsgrid .e-loop-item:hover { box-shadow: var(--wm-shadow-md); }

/* ---- Foto con el MISMO degradado que las tarjetas de programa --------- */
.wm-newsgrid .elementor-post__thumbnail,
.wm-newsgrid .e-loop-item .elementor-widget-image,
.wm-newsgrid .e-loop-item .elementor-widget-theme-post-featured-image {
  position: relative;
  overflow: hidden;
}
.wm-newsgrid .elementor-post__thumbnail::after,
.wm-newsgrid .e-loop-item .elementor-widget-image::after,
.wm-newsgrid .e-loop-item .elementor-widget-theme-post-featured-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(87, 0, 19, .92) 0%,
              rgba(87, 0, 19, .35) 45%,
              rgba(87, 0, 19, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.wm-newsgrid .elementor-post__thumbnail img,
.wm-newsgrid .e-loop-item .elementor-widget-image img {
  transition: transform .5s ease;
  display: block;
}
.wm-newsgrid .elementor-post:hover .elementor-post__thumbnail img,
.wm-newsgrid .e-loop-item:hover .elementor-widget-image img {
  transform: scale(1.05);
}

/* ---- Fecha / meta: pequeña y en mayúsculas ---------------------------- */
.wm-newsgrid .elementor-post__meta-data {
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wm-gray);
}

/* ---- Título en burdeos ------------------------------------------------ */
.wm-newsgrid .elementor-post__title,
.wm-newsgrid .elementor-post__title a {
  font-family: 'Poppins', sans-serif;
  font-size: 24px; font-weight: 600; line-height: 1.3;
  color: var(--wm-burdeos-deep);
}
.wm-newsgrid .elementor-post__title a:hover { color: var(--wm-burdeos); }

/* ---- Extracto --------------------------------------------------------- */
.wm-newsgrid .elementor-post__excerpt p {
  font-size: 15px; line-height: 1.6; color: var(--wm-gray);
}

/* ---- "Leer más" como enlace-flecha del sistema ------------------------ */
.wm-newsgrid .elementor-post__read-more {
  font-size: 14px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wm-burdeos-deep);
  border-bottom: 2px solid var(--wm-burdeos-deep);
  padding-bottom: 2px; text-decoration: none;
}