/*
Theme Name:   Mariana De La Mora
Theme URI:    https://marianadelamora.com
Description:  Tema hijo de GeneratePress para marianadelamora.com. Paleta y tipografía del
              moodboard de marca, tipografías servidas localmente y schema server-side.
Author:       ClickToAction — Elliott Saldaña
Template:     generatepress
Version:      2.1.0
Text Domain:  mdlm
*/

/* ============================================================
   ÍNDICE
   1.  Tipografías locales
   2.  Tokens de marca
   3.  Base
   4.  Cabecera y navegación
   5.  Pie
   6.  Botones
   7.  Bandas y contenedores
   8.  Portada: hero
   9.  El método: arcos y pasos
   10. Motivos de consulta
   11. Caminos (tarjetas de servicio)
   12. Preguntas frecuentes
   13. Aviso de crisis
   14. Listas, citas y detalles de texto
   15. Responsive
   16. Fotografía
   17. Guías gratuitas
   18. Responsive de fotografía y guías
   19. Formulario de las guías
   ============================================================ */

/* ============================================================
   1. TIPOGRAFÍAS LOCALES
   Variable fonts: un archivo cubre todo el rango de pesos.
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/CormorantGaramond-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   2. TOKENS DE MARCA
   ============================================================ */

:root {
  /* Fondos. El lienzo es crema; el beige del moodboard se reserva para las
     bandas de descanso, si se usa en toda la página cansa la vista. */
  --mdlm-crema: #F7F2EA;
  --mdlm-beige: #EDE3D2;
  --mdlm-gris-calido: #FAF8F5;

  /* ---- LA PALETA VINO (sep-2026) ----------------------------------
     Tres tonos sobre la base crema/beige que el sitio ya tenía.
     Contraste medido sobre crema · beige · gris cálido:
       merlot        10.54 · 9.24 · 11.08   ✓AA en los tres
       vino oscuro   13.09 · 11.48 · 13.76  ✓AA en los tres
       vino rosado    5.70 · 4.99 · 5.99    ✓AA en los tres
     Blanco encima: 11.74 · 14.59 · 6.35 ✓AA. Es MÁS accesible que la
     terracota que sustituye, que en beige daba 4.33 y no llegaba a AA.

     ⚠️ Merlot y vino oscuro solo se diferencian 1.24:1 entre sí: a ojo son
     el mismo color. Por eso NO pueden repartirse papeles vecinos. Cada uno
     vive en su contexto: el oscuro lee, el merlot llama a la acción (y en
     los botones va sobre relleno, con texto blanco, así que nunca compiten).
     Los enlaces van subrayados, que es lo que los distingue del cuerpo. */
  --mdlm-vino: #730039;          /* Merlot — el principal */
  --mdlm-vino-oscuro: #4A1724;   /* Texto, titulares y banda de cierre */
  --mdlm-vino-rosado: #91495B;   /* Apoyo: texto secundario y filetes */

  /* Texto */
  --mdlm-marron: var(--mdlm-vino-oscuro);
  --mdlm-marron-suave: var(--mdlm-vino-rosado);
  --mdlm-linea-sutil: rgba(74, 23, 36, 0.14);

  /* Llamadas a la acción */
  --mdlm-terracota: var(--mdlm-vino);
  --mdlm-terracota-cta: var(--mdlm-vino);
  --mdlm-terracota-hover: var(--mdlm-vino-oscuro);

  /* Acentos secundarios */
  --mdlm-camel: var(--mdlm-vino-rosado);
  --mdlm-oliva: #6E7B33;

  /* El guinda del Cuaderno del Viajero ya no necesita token propio: el
     merlot ES ese color. Se conserva el nombre porque hay reglas que lo
     usan, pero apunta al principal. */
  --mdlm-guinda: var(--mdlm-vino);

  /* Los nombres «marrón», «terracota» y «camel» se conservan a propósito:
     los usan más de 60 reglas repartidas por el archivo y renombrarlas
     una a una sería arriesgarse a dejar alguna sin cambiar. Apuntan a los
     tres tonos de arriba, así que el color se cambia en un solo sitio.
     Para reglas NUEVAS, usar los nombres --mdlm-vino*. */

  /* Los cinco colores del método — gama vino (14sep2026)
     Antes eran cinco colores distintos (marrón, salmón, verde azulado, mostaza
     y dorado). Ahora son CINCO ESCALONES DE UN MISMO VINO, del borgoña más
     profundo al rosa más pálido. Como el matiz ya no distingue un paso de
     otro, lo que los separa es la LUMINOSIDAD, y por eso los escalones están
     medidos: ningún vecino baja de 1.5:1 entre sí (1.57 · 1.82 · 1.83 · 1.61),
     que es el mínimo para que a un metro se vean cinco cosas y no un degradado.

     Contraste del texto encima (todos ✓AA):
       paso 1 #3F1020  blanco 16.08
       paso 2 #7A1B3D  blanco 10.24
       paso 3 #A44A63  blanco  5.62
       paso 4 #C4808E  vino oscuro 4.74   ← los dos claros llevan texto oscuro
       paso 5 #DEB0B6  vino oscuro 7.64

     ⚠️ El paso 5 sobre el lienzo crema queda en 1.71:1. Es a propósito: es una
     forma grande de color, no texto. Aclararlo más lo borraría del fondo.
     ⚠️ El paso 2 y el merlot de los botones son casi el mismo tono. No estorba
     porque nunca comparten sitio (el arco es una forma grande con número
     dentro; el CTA es un botón), pero no meter un botón dentro de un arco 2. */
  --mdlm-paso-1: #3F1020;  /* Origen del dolor — borgoña profundo */
  --mdlm-paso-2: #7A1B3D;  /* Impacto en las relaciones — tinto */
  --mdlm-paso-3: #A44A63;  /* Comprensión y diferenciación — vino rosado */
  --mdlm-paso-4: #C4808E;  /* Transformación — rosa vino */
  --mdlm-paso-5: #DEB0B6;  /* La experiencia — rosa pálido */

  /* Tipografía */
  --mdlm-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mdlm-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala. Mínimo 17px de cuerpo: su público lee desde el celular,
     buena parte con más de 45 años. */
  --mdlm-texto: 1.0625rem;
  --mdlm-linea: 1.7;

  /* Ritmo vertical y anchos */
  --mdlm-espacio: 1.5rem;
  --mdlm-seccion: clamp(3.5rem, 8vw, 7rem);
  --mdlm-ancho: 70rem;
  --mdlm-ancho-texto: 38rem;

  /* El arco es EL gesto de la marca: sale del moodboard y se repite en
     los chips del método, en los marcos de foto y en el hero. */
  --mdlm-arco: 999px 999px 4px 4px;
}

/* ============================================================
   3. BASE
   Lenguaje visual: sin gradientes, sin sombras. Aire y calma.
   ============================================================ */

body {
  background-color: var(--mdlm-crema);
  color: var(--mdlm-marron);
  font-family: var(--mdlm-sans);
  font-size: var(--mdlm-texto);
  line-height: var(--mdlm-linea);
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--mdlm-serif);
  color: var(--mdlm-marron);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.15rem; }

p { max-width: var(--mdlm-ancho-texto); }

/* En contenedores centrados, el texto también se centra */
.mdlm-centrado { text-align: center; }
.mdlm-centrado p,
.mdlm-centrado h1,
.mdlm-centrado h2,
.mdlm-centrado .mdlm-destacado { margin-inline: auto; }

/* Antetítulo: Montserrat en versalitas, según el moodboard */
.mdlm-subtitulo {
  font-family: var(--mdlm-sans);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--mdlm-marron-suave);
  max-width: 100%;
}

/* Entradilla: el párrafo que va justo debajo del titular */
.mdlm-entradilla {
  font-family: var(--mdlm-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  color: var(--mdlm-marron);
  max-width: 34rem;
}

/* Frases destacadas: Cormorant itálica, como marca el moodboard */
.mdlm-destacado,
.is-style-mdlm-destacado,
blockquote {
  font-family: var(--mdlm-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 1.875rem);
  line-height: 1.4;
  color: var(--mdlm-marron);
  border: 0;
  padding: 0;
  margin-block: var(--mdlm-espacio);
  max-width: 32rem;
}

a {
  color: var(--mdlm-terracota-cta);
  text-underline-offset: 0.2em;
}

a:hover,
a:focus { color: var(--mdlm-terracota-hover); }

/* Foco siempre visible: requisito de accesibilidad, no adorno */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--mdlm-terracota-cta);
  outline-offset: 3px;
}

/* Filete decorativo, para separar sin meter una línea a todo lo ancho */
.mdlm-filete,
hr.wp-block-separator.mdlm-filete {
  width: 3.5rem;
  max-width: 3.5rem;
  height: 1px;
  background-color: var(--mdlm-camel);
  border: 0;
  border-top: 0;
  border-bottom: 0;
  opacity: 1;
  margin: var(--mdlm-espacio) 0;
}

.mdlm-centrado .mdlm-filete { margin-inline: auto; }

/* Destino de los enlaces de ancla: que el título no quede pegado al borde */
[id] { scroll-margin-top: 2rem; }

/* ============================================================
   4. CABECERA Y NAVEGACIÓN
   GeneratePress trae su propio armazón; aquí solo se le pone la voz
   de la marca: crema, versalitas y una línea fina en lugar de sombra.
   ============================================================ */

.site-header {
  background-color: var(--mdlm-crema);
  border-bottom: 1px solid var(--mdlm-linea-sutil);
}

.site-header .inside-header {
  padding-block: 1.6rem;
  align-items: center;
}

.main-title {
  font-family: var(--mdlm-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.main-title a,
.main-title a:hover {
  color: var(--mdlm-marron);
  text-decoration: none;
}

.site-description {
  font-family: var(--mdlm-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdlm-marron-suave);
  margin-top: 0.45rem;
}

.main-navigation,
.main-navigation .main-nav ul {
  background-color: transparent;
}

.main-navigation .main-nav ul li a {
  font-family: var(--mdlm-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mdlm-marron);
  padding-inline: 0.95rem;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
  color: var(--mdlm-terracota-cta);
  background-color: transparent;
}

/* Submenús: fondo sólido claro, sin sombra.
   17rem, no 15: con versalitas y 0.12em de tracking, «La Huella del Padre»
   parte en dos líneas por unos pocos píxeles. */
.main-navigation ul ul {
  background-color: var(--mdlm-gris-calido);
  border: 1px solid var(--mdlm-linea-sutil);
  width: 17rem;
}

.main-navigation ul ul li a { padding: 0.7rem 1rem; }

/* Botón de menú móvil */
.menu-toggle,
.main-navigation .menu-toggle {
  font-family: var(--mdlm-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: transparent;
  color: var(--mdlm-marron);
  padding: 0.6rem 0.9rem;
}

.menu-toggle:hover { background-color: transparent; color: var(--mdlm-terracota-cta); }

/* Último elemento del menú como llamada a la acción.
   Se activa poniéndole la clase `mdlm-menu-cta` al elemento en Apariencia → Menús. */
.main-navigation .main-nav ul li.mdlm-menu-cta a {
  color: var(--mdlm-terracota-cta);
  border: 1px solid var(--mdlm-terracota-cta);
  border-radius: 2px;
  margin-left: 0.75rem;
  padding-inline: 1.1rem;
}

.main-navigation .main-nav ul li.mdlm-menu-cta a:hover {
  background-color: var(--mdlm-terracota-cta);
  color: #FFFFFF;
}

/* ============================================================
   5. PIE
   ============================================================ */

.site-footer {
  background-color: var(--mdlm-beige);
  border-top: 1px solid var(--mdlm-linea-sutil);
}

.site-info { padding-block: 0; }

.site-info .inside-site-info {
  padding-block: 0;
  display: block;
}

/* GeneratePress centra su barra de copyright; el pie de la marca va alineado
   a la izquierda, como el resto del sitio. */
.site-info .copyright-bar,
.mdlm-pie {
  text-align: left;
}

.mdlm-pie {
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--mdlm-marron);
}

.mdlm-pie__rejilla {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(14rem, 1.2fr) repeat(2, minmax(9rem, 1fr));
  align-items: start;
}

.mdlm-pie__marca {
  font-family: var(--mdlm-serif);
  font-size: 1.35rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  max-width: 100%;
}

.mdlm-pie__lema {
  font-family: var(--mdlm-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--mdlm-marron-suave);
  max-width: 22rem;
  margin: 0;
}

.mdlm-pie__titulo {
  font-family: var(--mdlm-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mdlm-marron-suave);
  margin: 0 0 0.9rem;
}

.mdlm-pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdlm-pie li { margin-bottom: 0.5rem; }

.mdlm-pie a {
  color: var(--mdlm-marron);
  text-decoration: none;
}

.mdlm-pie a:hover,
.mdlm-pie a:focus {
  color: var(--mdlm-terracota-cta);
  text-decoration: underline;
}

.mdlm-pie__aviso {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mdlm-linea-sutil);
  font-size: 0.8125rem;
  color: var(--mdlm-marron-suave);
  max-width: 46rem;
}

.mdlm-pie__creditos {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mdlm-marron-suave);
  max-width: 100%;
}

/* ============================================================
   6. BOTONES
   ============================================================ */

/* Los selectores llevan `a.` a propósito: GeneratePress pinta sus botones
   con `a.wp-block-button__link`, y sin ese punto de especificidad su gris
   azulado gana siempre. */
a.mdlm-boton,
.mdlm-boton,
a.wp-block-button__link,
.wp-block-button__link,
.wp-block-button .wp-element-button,
a.button,
.button,
button,
input[type="submit"] {
  background-color: var(--mdlm-terracota-cta);
  color: #FFFFFF;
  font-family: var(--mdlm-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  padding: 0.95rem 2.1rem;
  border: 1px solid var(--mdlm-terracota-cta);
  border-radius: 2px;
  box-shadow: none;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.mdlm-boton:hover,
.mdlm-boton:hover,
a.wp-block-button__link:hover,
.wp-block-button__link:hover,
a.button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--mdlm-terracota-hover);
  border-color: var(--mdlm-terracota-hover);
  color: #FFFFFF;
}

a.mdlm-boton--secundario,
.mdlm-boton--secundario,
a.wp-block-button__link.mdlm-boton--secundario,
.wp-block-button__link.mdlm-boton--secundario {
  background-color: transparent;
  color: var(--mdlm-marron);
  border: 1px solid var(--mdlm-marron);
}

a.mdlm-boton--secundario:hover,
.mdlm-boton--secundario:hover,
a.wp-block-button__link.mdlm-boton--secundario:hover,
.wp-block-button__link.mdlm-boton--secundario:hover {
  background-color: var(--mdlm-marron);
  color: var(--mdlm-crema);
  border-color: var(--mdlm-marron);
}

/* Sobre banda oscura, el botón se invierte */
.mdlm-seccion--oscuro a.mdlm-boton,
.mdlm-seccion--oscuro a.wp-block-button__link {
  background-color: var(--mdlm-crema);
  color: var(--mdlm-marron);
  border-color: var(--mdlm-crema);
}

.mdlm-seccion--oscuro a.mdlm-boton:hover,
.mdlm-seccion--oscuro a.wp-block-button__link:hover {
  background-color: var(--mdlm-camel);
  border-color: var(--mdlm-camel);
  color: var(--mdlm-marron);
}

/* El botón secundario sobre banda oscura: el marrón del borde desaparece
   contra el fondo, así que se invierte a crema. */
.mdlm-seccion--oscuro a.mdlm-boton--secundario,
.mdlm-seccion--oscuro a.wp-block-button__link.mdlm-boton--secundario {
  background-color: transparent;
  color: var(--mdlm-crema);
  border-color: rgba(247, 242, 234, 0.55);
}

.mdlm-seccion--oscuro a.mdlm-boton--secundario:hover,
.mdlm-seccion--oscuro a.wp-block-button__link.mdlm-boton--secundario:hover {
  background-color: var(--mdlm-crema);
  color: var(--mdlm-marron);
  border-color: var(--mdlm-crema);
}

/* Grupos de botones: en fila y con aire, no apilados uno debajo del otro */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block: var(--mdlm-espacio);
}

.mdlm-centrado .wp-block-buttons { justify-content: center; }

/* Enlace de texto con flecha, para acciones secundarias */
.mdlm-enlace {
  font-family: var(--mdlm-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
}

/* ============================================================
   7. BANDAS Y CONTENEDORES
   La maquetación manda sobre la caja de GeneratePress: en las páginas
   maquetadas el contenido va a sangre y cada banda pone su propio ancho.
   Se activa con la clase `mdlm-maquetado` en el body (functions.php),
   así el blog y la tienda conservan el diseño estándar del tema.
   ============================================================ */

.mdlm-maquetado #page {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.mdlm-maquetado .site-content { padding: 0; }

.mdlm-maquetado #primary,
.mdlm-maquetado .site-main,
.mdlm-maquetado .inside-article,
.mdlm-maquetado .entry-content {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.mdlm-maquetado .site-main > article { margin-bottom: 0; }

/* Sin márgenes entre bandas: el ritmo lo dan sus paddings */
.mdlm-maquetado .entry-content > * { margin-block: 0; }

/* ⚠️ WordPress envuelve el interior de cada bloque Grupo en un div extra
   (`wp-block-group__inner-container`) cuando el tema no declara theme.json.
   Ese div se comía todas las rejillas: la clase quedaba en el padre y los
   hijos reales colgaban del envoltorio. Con `display: contents` el envoltorio
   desaparece del cálculo de la maqueta y los hijos vuelven a ser los ítems
   de la rejilla. Funciona igual si WordPress deja de meterlo. */
.wp-block-group__inner-container { display: contents; }

.mdlm-seccion {
  padding-block: var(--mdlm-seccion);
  background-color: var(--mdlm-crema);
}

.mdlm-seccion--beige,
.is-style-mdlm-beige { background-color: var(--mdlm-beige); }

.mdlm-seccion--claro,
.is-style-mdlm-claro { background-color: var(--mdlm-gris-calido); }

.mdlm-seccion--oscuro {
  background-color: var(--mdlm-marron);
  color: var(--mdlm-crema);
}

.mdlm-seccion--oscuro h1,
.mdlm-seccion--oscuro h2,
.mdlm-seccion--oscuro h3,
.mdlm-seccion--oscuro .mdlm-destacado { color: var(--mdlm-crema); }

.mdlm-seccion--oscuro .mdlm-subtitulo { color: var(--mdlm-camel); }

.mdlm-seccion--ajustada { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.mdlm-contenedor {
  width: min(100% - 2.5rem, var(--mdlm-ancho));
  margin-inline: auto;
}

.mdlm-contenedor--texto { --mdlm-ancho: 44rem; }

/* Dos columnas: el titular a la izquierda, el cuerpo a la derecha.
   Es el patrón que da aire a las páginas largas sin necesitar fotos. */
.mdlm-dos-columnas {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.mdlm-dos-columnas > *,
.mdlm-dos-columnas > .wp-block-group__inner-container > * { min-width: 0; }

.mdlm-dos-columnas h2 { margin-top: 0; }

/* Varias secciones seguidas dentro de una misma banda necesitan su propio
   respiro, si no se leen como un solo bloque interminable. */
.mdlm-dos-columnas + .mdlm-dos-columnas,
.mdlm-dos-columnas + .mdlm-caminos,
.mdlm-caminos + .mdlm-dos-columnas,
.mdlm-expectativas + .mdlm-expectativas { margin-top: clamp(2.75rem, 6vw, 5rem); }

/* Encabezado de sección */
.mdlm-encabezado { margin-bottom: clamp(2rem, 4vw, 3rem); }
.mdlm-encabezado h2 { margin: 0.5rem 0 0.75rem; }
.mdlm-encabezado p { margin-bottom: 0; }

/* Marco de foto en arco. Mientras no haya fotografías queda como
   superficie de color: el hueco se ve intencionado, no roto. */
.mdlm-arco-foto {
  border-radius: var(--mdlm-arco);
  background-color: var(--mdlm-beige);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.mdlm-arco-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   8. PORTADA: HERO
   Sin fotografía: tipografía, color y aire. El arco de la marca
   aparece como marco del bloque de texto.
   ============================================================ */

.mdlm-hero {
  background-color: var(--mdlm-beige);
  padding-block: clamp(4rem, 11vw, 8.5rem);
  text-align: center;
}

.mdlm-hero .mdlm-contenedor { max-width: 54rem; }

.mdlm-hero h1 {
  font-size: clamp(2.35rem, 6vw, 4.25rem);
  line-height: 1.08;
  margin: 1.25rem auto 0;
  max-width: 26ch;
}

.mdlm-hero .mdlm-subtitulo { margin-bottom: 0; }

.mdlm-hero p {
  margin-inline: auto;
  max-width: 36rem;
}

.mdlm-hero .mdlm-entradilla {
  margin-top: 1.75rem;
  max-width: 34rem;
  margin-inline: auto;
}

.mdlm-hero .wp-block-buttons {
  justify-content: center;
  margin-top: 2.25rem;
}

/* ============================================================
   9. EL MÉTODO — las cinco secciones del moodboard
   Los arcos de colores son el índice del recorrido; cada paso
   después se desarrolla en su propia sección.
   ============================================================ */

.mdlm-arcos {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdlm-arcos li { margin: 0; }

.mdlm-arcos a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 13.5rem;
  height: 100%;
  padding: 1.5rem 1.15rem 1.35rem;
  border-radius: var(--mdlm-arco);
  color: #FFFFFF;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.mdlm-arcos a:hover,
.mdlm-arcos a:focus { transform: translateY(-4px); }

.mdlm-arcos__numero {
  font-family: var(--mdlm-serif);
  font-size: 2.25rem;
  line-height: 1;
  opacity: 0.9;
}

.mdlm-arcos__titulo {
  font-family: var(--mdlm-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin-top: 0.65rem;
}

.mdlm-arco--1 { background-color: var(--mdlm-paso-1); }
.mdlm-arco--2 { background-color: var(--mdlm-paso-2); }
.mdlm-arco--3 { background-color: var(--mdlm-paso-3); }

/* Los dos últimos escalones de la gama vino son claros: con blanco encima no
   llegan al contraste mínimo, así que llevan texto oscuro (4.74 y 7.64 ✓AA).
   Va con `a.` porque si no gana el blanco de `.mdlm-arcos a` y los dos últimos
   arcos quedan ilegibles. */
a.mdlm-arco--4,
a.mdlm-arco--5 { color: var(--mdlm-marron); }
.mdlm-arco--4 { background-color: var(--mdlm-paso-4); }
.mdlm-arco--5 { background-color: var(--mdlm-paso-5); }

/* --- Cada paso desarrollado --- */

.mdlm-paso {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
}

.mdlm-paso > *,
.mdlm-paso > .wp-block-group__inner-container > * { min-width: 0; }

.mdlm-paso__marca { position: sticky; top: 2rem; }

/* El chip de color: el arco de la marca en pequeño. Nunca lleva texto
   encima, así que ningún paso vuelve a quedar ilegible. */
.mdlm-paso__chip {
  width: 4.5rem;
  height: 6rem;
  border-radius: var(--mdlm-arco);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.75rem;
  font-family: var(--mdlm-serif);
  font-size: 1.75rem;
  line-height: 1;
  color: #FFFFFF;
}

.mdlm-paso--1 .mdlm-paso__chip { background-color: var(--mdlm-paso-1); }
.mdlm-paso--2 .mdlm-paso__chip { background-color: var(--mdlm-paso-2); }
.mdlm-paso--3 .mdlm-paso__chip { background-color: var(--mdlm-paso-3); }
.mdlm-paso--4 .mdlm-paso__chip { background-color: var(--mdlm-paso-4); color: var(--mdlm-marron); }
.mdlm-paso--5 .mdlm-paso__chip { background-color: var(--mdlm-paso-5); color: var(--mdlm-marron); }

.mdlm-paso__titulo {
  font-family: var(--mdlm-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1.15;
  color: var(--mdlm-marron);
  margin: 1.25rem 0 0;
}

.mdlm-paso__cuerpo p:first-child {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--mdlm-marron);
}

.mdlm-paso__cuerpo p + p { margin-top: 1.15rem; }

/* ============================================================
   10. MOTIVOS DE CONSULTA
   17 tarjetas. Sobrias, sin iconos: la contención es parte de la marca.
   Las que todavía no tienen artículo van sin enlace, nunca a un 404.
   ============================================================ */

.mdlm-motivos {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdlm-motivos li { margin: 0; }

.mdlm-motivos a,
.mdlm-motivos .mdlm-motivo {
  display: block;
  height: 100%;
  padding: 1.25rem 1.35rem;
  background-color: var(--mdlm-gris-calido);
  border: 1px solid var(--mdlm-linea-sutil);
  border-radius: 3px;
  color: var(--mdlm-marron);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mdlm-motivos a:hover,
.mdlm-motivos a:focus {
  border-color: var(--mdlm-terracota-cta);
  color: var(--mdlm-marron);
}

.mdlm-motivos__titulo {
  display: block;
  font-family: var(--mdlm-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.mdlm-motivos__apoyo {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mdlm-marron-suave);
}

/* ============================================================
   11. CAMINOS — tarjetas de servicio
   ============================================================ */

.mdlm-caminos {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.mdlm-carta {
  background-color: var(--mdlm-gris-calido);
  border: 1px solid var(--mdlm-linea-sutil);
  border-radius: 4px;
  /* Mismo valor de siempre, solo nombrado: así .mdlm-carta__media puede
     sangrarse con un margen negativo exacto sin repetir el clamp. */
  --mdlm-carta-aire: clamp(1.75rem, 3vw, 2.5rem);
  padding: var(--mdlm-carta-aire);
  display: flex;
  flex-direction: column;
}

.mdlm-carta__marca {
  width: 2.25rem;
  height: 3rem;
  border-radius: var(--mdlm-arco);
  background-color: var(--mdlm-camel);
  margin-bottom: 1.25rem;
}

.mdlm-carta--formacion .mdlm-carta__marca { background-color: var(--mdlm-paso-3); }

.mdlm-carta h3 { margin: 0 0 0.85rem; }

.mdlm-carta p { max-width: 100%; }

.mdlm-carta__dato {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mdlm-marron-suave);
  margin-block: 1.15rem;
}

.mdlm-carta .wp-block-buttons,
.mdlm-carta .mdlm-boton { margin-top: auto; }

/* ============================================================
   11 bis. TESTIMONIOS
   Solo de talleres, grupos y formación: los procesos de terapia
   individual no se publican nunca (lo pidió ella y es lo correcto).
   El estilo está listo; la sección se publica cuando haya material
   real y autorizado por escrito.
   ============================================================ */

.mdlm-testimonios {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdlm-testimonios li { margin: 0; }

.mdlm-testimonio {
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background-color: var(--mdlm-gris-calido);
  border: 1px solid var(--mdlm-linea-sutil);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.mdlm-testimonio::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2.35rem;
  border-radius: var(--mdlm-arco);
  background-color: var(--mdlm-camel);
  margin-bottom: 1.25rem;
}

.mdlm-testimonio blockquote,
.mdlm-testimonio p {
  font-family: var(--mdlm-serif);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  max-width: 100%;
}

.mdlm-testimonio cite {
  margin-top: auto;
  font-family: var(--mdlm-sans);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--mdlm-marron-suave);
}

.mdlm-testimonio cite strong {
  display: block;
  font-weight: 600;
  color: var(--mdlm-marron);
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}

/* ============================================================
   12. PREGUNTAS FRECUENTES
   ============================================================ */

.mdlm-faq {
  border-top: 1px solid var(--mdlm-linea-sutil);
  max-width: 46rem;
}

.mdlm-faq details {
  border-bottom: 1px solid var(--mdlm-linea-sutil);
}

.mdlm-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--mdlm-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.375rem);
  line-height: 1.35;
  color: var(--mdlm-marron);
}

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

.mdlm-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mdlm-sans);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--mdlm-terracota-cta);
}

.mdlm-faq details[open] summary::after { content: "–"; }

.mdlm-faq details > *:not(summary) {
  margin: 0 0 1.35rem;
  max-width: 40rem;
  color: var(--mdlm-marron-suave);
}

/* ============================================================
   13. AVISO DE CRISIS
   Va junto a cada llamada a WhatsApp. Sobrio pero visible: quien
   lo necesita debe encontrarlo sin que compita con el resto.
   ============================================================ */

.mdlm-crisis {
  border-left: 3px solid var(--mdlm-terracota-cta);
  background-color: var(--mdlm-gris-calido);
  padding: 1.1rem 1.35rem;
  margin-block: var(--mdlm-espacio);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 40rem;
  color: var(--mdlm-marron);
  text-align: left;
}

.mdlm-centrado .mdlm-crisis { margin-inline: auto; }

.mdlm-seccion--oscuro .mdlm-crisis {
  background-color: rgba(247, 242, 234, 0.08);
  border-left-color: var(--mdlm-camel);
  color: var(--mdlm-crema);
}

.mdlm-crisis strong { font-weight: 600; }

/* ============================================================
   14. LISTAS, CITAS Y DETALLES DE TEXTO
   ============================================================ */

.entry-content ul:not([class]),
.entry-content ol:not([class]) {
  max-width: var(--mdlm-ancho-texto);
  padding-left: 1.1rem;
  margin-block: var(--mdlm-espacio);
}

.entry-content li { margin-bottom: 0.6rem; }

.entry-content ul:not([class]) { list-style: none; padding-left: 0; }

.entry-content ul:not([class]) > li {
  position: relative;
  padding-left: 1.5rem;
}

.entry-content ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--mdlm-camel);
}

/* Lista de dos columnas para enumeraciones cortas (formación, expectativas) */
.mdlm-lista-doble {
  display: grid;
  gap: 0.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  max-width: var(--mdlm-ancho);
}

/* Pasos numerados de "cómo empezamos" */
.mdlm-pasos-numerados {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
}

.mdlm-pasos-numerados li {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--mdlm-linea-sutil);
  counter-increment: paso;
}

.mdlm-pasos-numerados li::before {
  content: counter(paso);
  display: block;
  font-family: var(--mdlm-serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--mdlm-camel);
  margin-bottom: 0.5rem;
}

.mdlm-pasos-numerados strong {
  display: block;
  font-family: var(--mdlm-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.mdlm-pasos-numerados span {
  font-size: 0.9375rem;
  color: var(--mdlm-marron-suave);
  line-height: 1.55;
}

/* Bloque de expectativas: lo que sí y lo que no */
.mdlm-expectativas {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.mdlm-expectativas__caja {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 4px;
  background-color: var(--mdlm-gris-calido);
  border: 1px solid var(--mdlm-linea-sutil);
}

.mdlm-expectativas__caja--no { background-color: transparent; }

.mdlm-expectativas h3 { margin: 0 0 1rem; }

.mdlm-expectativas ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdlm-expectativas li {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* El selector va con `.entry-content` porque si no gana el punto redondo
   de las listas genéricas de más arriba, que es más específico. */
.entry-content .mdlm-expectativas ul > li::before,
.mdlm-expectativas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.65rem;
  height: 1px;
  border-radius: 0;
  background-color: var(--mdlm-camel);
}

.mdlm-expectativas strong { font-weight: 600; }

/* ============================================================
   15. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .mdlm-arcos { grid-template-columns: repeat(3, 1fr); }
  .mdlm-arcos a { min-height: 11rem; }
}

@media (max-width: 768px) {
  :root {
    --mdlm-seccion: 3.25rem;
    --mdlm-texto: 1.0625rem;
  }

  .mdlm-dos-columnas,
  .mdlm-paso { grid-template-columns: 1fr; }

  .mdlm-paso__marca { position: static; }

  .mdlm-paso__chip {
    width: 3.25rem;
    height: 4.25rem;
    font-size: 1.35rem;
  }

  .mdlm-paso__titulo { margin-top: 0.9rem; }

  .mdlm-arcos {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .mdlm-arcos a {
    min-height: 8.5rem;
    padding: 1.1rem 0.95rem;
  }

  .mdlm-arcos__numero { font-size: 1.75rem; }

  .mdlm-pie__rejilla { grid-template-columns: 1fr; gap: 2rem; }

  .site-header .inside-header { padding-block: 1.1rem; }
}

@media (max-width: 420px) {
  .mdlm-arcos { grid-template-columns: 1fr; }

  .mdlm-arcos a {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    border-radius: 60px 4px 4px 60px;
  }

  .mdlm-arcos__titulo { margin-top: 0; }
}

/* ============================================================
   16. FOTOGRAFÍA
   Regla de dirección de arte: el ARCO es solo para personas.
   El producto (guías, cuadernos, libros) va en rectángulo de 4px.
   Si el arco encuadra objetos deja de leerse como gesto de marca
   y pasa a ser un adorno.
   ============================================================ */

/* WordPress envuelve toda imagen en <figure class="wp-block-image">.
   Ese figure trae margen propio y GeneratePress a veces redondea la
   <img> directamente: aquí se neutraliza para que el radio y el
   recorte vivan en el marco, que es donde se controlan. */
figure.wp-block-image.mdlm-arco-foto,
figure.wp-block-image.mdlm-guia__media {
  margin: 0;
  padding: 0;
}

figure.wp-block-image.mdlm-arco-foto img,
figure.wp-block-image.mdlm-guia__media img {
  max-width: 100%;
  border-radius: 0;
}

/* .mdlm-arco-foto ya existe (sección 7). Solo se le añade el
   comportamiento del encuadre, que se decide foto por foto con
   object-position en el atributo style de cada <img>. */
.mdlm-arco-foto img { object-position: 50% 25%; }

/* Retrato: el contenedor que le pone ancho y pie al arco.
   Sin él, dentro de .mdlm-dos-columnas la foto se estira a toda la
   columna y en móvil, al colapsar la rejilla, ocupa la pantalla entera. */
.mdlm-retrato {
  max-width: 22rem;
  margin: var(--mdlm-espacio) 0 0;
}

.mdlm-retrato--estrecho { max-width: 20rem; }

.mdlm-retrato .mdlm-arco-foto { margin: 0; }

.mdlm-retrato figcaption,
.mdlm-retrato__pie {
  font-family: var(--mdlm-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mdlm-marron-suave);
  margin-top: 0.85rem;
  max-width: 100%;
  text-align: left;
}


/* ============================================================
   17. GUÍAS GRATUITAS
   Dos lead magnets. Nunca compiten con el CTA de terapia: son el
   escalón anterior, y por eso viven en beige (banda de descanso),
   no en la banda oscura de cierre.
   ============================================================ */

.mdlm-guia {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
}

/* Mismo remedio que en .mdlm-paso: sin esto, el min-width:auto de las
   rejillas y el envoltorio que mete WordPress desbordan en móvil. */
.mdlm-guia > *,
.mdlm-guia > .wp-block-group__inner-container > * { min-width: 0; }

/* En el HTML la imagen va SIEMPRE primero, para que en móvil quede
   arriba. --invertida solo la manda a la derecha en escritorio. */
.mdlm-guia--invertida .mdlm-guia__media { order: 2; }

.mdlm-guia h1,
.mdlm-guia h2 { margin-top: 0; }

.mdlm-guia__media {
  background-color: var(--mdlm-beige);
  border-radius: 4px;
  overflow: hidden;
  max-width: 34rem;
}

.mdlm-guia__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* El guinda del Cuaderno del Viajero NO entra a la interfaz: vive
   dentro del pixel de la foto y asoma únicamente en este filete.
   Nunca en un botón, nunca en un fondo de banda. Terracota y guinda
   a menos de un módulo de distancia se ensucian entre sí. */
.mdlm-guia__media--guinda { border-bottom: 3px solid var(--mdlm-guinda); }

/* Sustituye a la franja de cuatro iconos quemada en el banner de Canva.
   Mismo contenido, en HTML real: lo lee Google, lo lee un lector de
   pantalla y no se vuelve ilegible a 360 px. */
.mdlm-guia__incluye {
  display: grid;
  gap: 0.85rem 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  list-style: none;
  margin: var(--mdlm-espacio) 0;
  padding: 0;
  max-width: 34rem;
}

.entry-content .mdlm-guia__incluye > li,
.mdlm-guia__incluye li {
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--mdlm-linea-sutil);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mdlm-marron);
}

/* El punto camel de las listas genéricas (sección 14) es más
   específico: aquí se apaga a propósito. */
.entry-content .mdlm-guia__incluye > li::before { content: none; }

/* Etiqueta de contexto: «Guía gratuita», «Continuación de la serie». */
.mdlm-etiqueta {
  display: inline-block;
  font-family: var(--mdlm-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdlm-marron-suave);
  border: 1px solid var(--mdlm-linea-sutil);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin: 0 0 1rem;
  max-width: 100%;
}

.mdlm-etiqueta--serie {
  color: var(--mdlm-guinda);
  border-color: rgba(115, 0, 57, 0.28);
}

/* --- Tarjetas de guía en la portada ---
   Reutilizan .mdlm-caminos + .mdlm-carta. Lo único nuevo es la
   miniatura sangrada a los bordes de la tarjeta. */
.mdlm-carta__media {
  margin: calc(var(--mdlm-carta-aire) * -1) calc(var(--mdlm-carta-aire) * -1) 1.5rem;
  background-color: var(--mdlm-beige);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--mdlm-linea-sutil);
}

.mdlm-carta__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cuando hay miniatura, el chip de color sobra. */
.mdlm-carta--guia .mdlm-carta__marca { display: none; }

.mdlm-carta--guia .mdlm-etiqueta { margin-bottom: 0.75rem; }


/* ============================================================
   18. RESPONSIVE DE FOTOGRAFÍA Y GUÍAS
   ============================================================ */

@media (max-width: 900px) {
  .mdlm-guia { grid-template-columns: 1fr; }

  /* En una sola columna el order estorba: la imagen vuelve a ir arriba. */
  .mdlm-guia--invertida .mdlm-guia__media { order: 0; }

  .mdlm-guia__media { max-width: 100%; }
}

@media (max-width: 768px) {
  /* Al colapsar .mdlm-dos-columnas el retrato quedaría a ancho completo
     y un 3/4 a 360 px mide 480 px de alto: se come la pantalla antes de
     que se lea una sola línea de texto. Se acota. */
  .mdlm-retrato,
  .mdlm-retrato--estrecho { max-width: 15rem; }

  .mdlm-guia__incluye { grid-template-columns: 1fr; }
}


/* ============================================================
   19. FORMULARIO DE LAS GUÍAS
   Nombre + correo antes de la descarga. Mismo lenguaje que el resto:
   sin sombras, sin gradientes, 1 px de línea y aire.

   Dos decisiones que no son estéticas:
   · Los campos van a 1rem (16 px) como mínimo. Por debajo de 16 px,
     Safari en iPhone hace zoom automático al enfocar el campo y
     descoloca la página. Su público entra sobre todo desde el celular.
   · El área táctil de cada campo pasa de 44 px de alto, que es el
     mínimo de las guías de accesibilidad de Apple y de WCAG 2.5.5.
   ============================================================ */

.mdlm-form {
  max-width: 30rem;
  margin-block: var(--mdlm-espacio);
}

.mdlm-centrado .mdlm-form { margin-inline: auto; text-align: left; }

.mdlm-form__campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  max-width: 100%;
}

.mdlm-form__campo label {
  font-family: var(--mdlm-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdlm-vino-rosado);
}

.mdlm-form input[type="text"],
.mdlm-form input[type="email"] {
  font-family: var(--mdlm-sans);
  font-size: 1rem;          /* nunca menos: iOS hace zoom */
  line-height: 1.4;
  color: var(--mdlm-vino-oscuro);
  background-color: var(--mdlm-gris-calido);
  border: 1px solid var(--mdlm-linea-sutil);
  border-radius: 4px;
  padding: 0.8rem 0.9rem;   /* ~46 px de alto con el texto */
  width: 100%;
  max-width: 100%;
}

.mdlm-form input[type="text"]:focus,
.mdlm-form input[type="email"]:focus {
  border-color: var(--mdlm-vino);
  background-color: #FFFFFF;
}

/* Consentimiento: la casilla nunca se encoge y el texto respira al lado. */
.mdlm-form__consentimiento {
  margin: 1.25rem 0;
  max-width: 100%;
}

.mdlm-form__consentimiento label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mdlm-vino-oscuro);
}

.mdlm-form__consentimiento input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--mdlm-vino);
  flex: none;
}

.mdlm-form__envio { margin: 1.25rem 0 0.75rem; max-width: 100%; }

/* GeneratePress pinta los botones con a.wp-block-button__link y gana por
   especificidad. Aquí el botón es un <button> de verdad, así que hay que
   repetirle el aspecto de .mdlm-boton en vez de heredarlo. */
.mdlm-form button.mdlm-boton {
  font-family: var(--mdlm-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background-color: var(--mdlm-vino);
  border: 1px solid var(--mdlm-vino);
  border-radius: 4px;
  padding: 0.95rem 1.8rem;
  cursor: pointer;
  width: auto;
}

.mdlm-form button.mdlm-boton:hover,
.mdlm-form button.mdlm-boton:focus {
  background-color: var(--mdlm-vino-oscuro);
  border-color: var(--mdlm-vino-oscuro);
  color: #FFFFFF;
}

.mdlm-form__nota {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mdlm-vino-rosado);
  margin: 0;
  max-width: 100%;
}

/* Mensaje de error: se anuncia con role="alert", el color solo acompaña.
   Nunca es lo único que comunica el problema. */
.mdlm-form__error {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mdlm-vino);
  background-color: var(--mdlm-beige);
  border-left: 3px solid var(--mdlm-vino);
  padding: 0.8rem 1rem;
  margin: 0 0 1.25rem;
  border-radius: 0 4px 4px 0;
  max-width: 100%;
}

/* La trampa para robots. No se usa display:none: hay robots que lo
   detectan y saltan el campo a propósito. Así queda fuera de la
   pantalla pero sigue existiendo para ellos, y los lectores de
   pantalla lo ignoran por el aria-hidden del contenedor. */
.mdlm-form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .mdlm-form { max-width: 100%; }
  .mdlm-form button.mdlm-boton { width: 100%; }
}


/* Respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}