/*
 Theme Name:   dermaMER Instituto Médico Dermatológico
 Theme URI:    https://dermamer.es
 Description:  Tema hijo de GeneratePress para dermaMER Instituto Médico Dermatológico — Valencia. Paleta y tipografía del manual de marca Edición 2026 (ADR-015, ADR-016).
 Author:       Alex
 Author URI:   https://dermamer.es
 Template:     generatepress
 Version:      2.64.0
 Text Domain:  dermamer
*/

/* ==========================================================================
   dermaMER — Variables CSS globales (manual de marca Edición 2026)
   - Paleta: ADR-015 (azul pizarra #4D5D6A + marfil + nogal + neutros cálidos)
   - Tipografía: ADR-016 (DM Serif Display + Manrope, Google Fonts OFL)
   ========================================================================== */

:root {
    /* Colores principales — Primario azul pizarra dermaMER */
    --dm-primary: #4D5D6A;          /* RGB 77·93·106 · Pantone Cool Gray 10 C */
    --dm-primary-dark: #3A4751;     /* Shade -25%: hover/foco/énfasis */
    --dm-primary-light: #7A8590;    /* Tint +25%: microcopia */
    --dm-primary-deep: #262E36;     /* Shade -50%: texto alternativa */
    --dm-primary-tint: #A6AEB4;     /* Tint +50%: texto secundario sobre marfil */

    /* Acentos materialidad */
    --dm-accent: #6A5A4F;           /* Nogal (madera cálida, acento principal/CTA) */
    --dm-accent-light: #E0D5C7;     /* Crema lino (acento suave) */
    --dm-warm: #6A5A4F;             /* Alias del Nogal para CTAs */
    --dm-warm-light: #C8BAAF;       /* Arena */
    --dm-warm-dark: #443C3A;        /* Charcoal cálido (mármol oscuro, énfasis) */

    /* Fondos — Neutros cálidos arquitectónicos */
    --dm-bg: #F6F1E8;               /* Marfil (fondo principal) */
    --dm-bg-alt: #E0D5C7;           /* Crema lino (tapizado, fondo cálido) */
    --dm-bg-dark: #443C3A;          /* Charcoal cálido (secciones oscuras) */
    --dm-white: #FFFFFF;

    /* Texto */
    --dm-text: #262E36;             /* Shade -50% del primario */
    --dm-text-secondary: #5E5246;   /* 6,8:1 sobre marfil y 5,2:1 sobre el beige --dm-bg-alt; antes #6B5D4F, que sobre el beige de la portada se quedaba en 4,39:1 (revisión externa, hallazgo 08) */
    --dm-text-light: #A6AEB4;       /* Tint +50% del primario */
    --dm-text-muted: #5F6B78;       /* Gris frío de las notas pequeñas: 5,4:1 sobre blanco y 4,8:1 sobre marfil. Hasta 2.39.0 no estaba definido y valía su reserva #8B98A6, 2,9:1 (repaso de diseño 27/09/2026) */
    --dm-text-on-dark: #F6F1E8;     /* Marfil sobre fondo oscuro */
    --dm-link-on-dark: #F3D9A4;     /* Champán: enlaces sobre banda oscura con foto (5,1:1 medido) */

    /* Alias con los que se escribieron bloques antiguos. Vivían solo de su
       valor de reserva, repetido en cada uso (y en dos sitios ni eso: el
       fondo no se pintaba). Definidos aquí con el mismo valor que ya
       mostraban, para que haya un único sitio que cambiar (issue #55). */
    --dm-base-2: var(--dm-bg);            /* marfil */
    --dm-bg-soft: var(--dm-bg);           /* marfil */
    --dm-arena: #C8BAAF;                  /* = --dm-warm-light y --dm-border */
    --dm-accent-deep: #6A5A4F;            /* = --dm-warm, nogal */
    --dm-border-soft: #EFEAE1;

    /* Bordes y sombras — basadas en el primario nuevo (rgb 77,93,106) */
    --dm-border: #C8BAAF;           /* Arena (filetes, separadores) */
    --dm-border-light: #E0D5C7;     /* Crema lino */
    --dm-shadow-sm: 0 1px 3px rgba(77, 93, 106, 0.08);
    --dm-shadow-md: 0 4px 12px rgba(77, 93, 106, 0.12);
    --dm-shadow-lg: 0 8px 30px rgba(77, 93, 106, 0.16);

    /* Tipografía — ADR-016 */
    --dm-font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --dm-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Escala de texto (issue #39, 27/09/2026). Todo tamaño por debajo de los
       titulares sale de aquí; antes convivían treinta, casi todos decimales
       sueltos. 2xs solo para etiquetas en mayúsculas con espaciado; md es el
       cuerpo de lectura de los pilares. Los titulares grandes siguen con sus
       clamp() de la escala de #28. Familias: DM Serif para H1, H2 de sección
       y títulos de tarjeta que nombran algo (médicos, áreas, tratamientos);
       Manrope para todo lo demás (subtítulos dentro del texto, rótulos,
       etiquetas, interfaz). */
    --dm-text-2xs: 0.6875rem;   /* 11 px */
    --dm-text-xs: 0.8125rem;    /* 13 px */
    --dm-text-sm: 0.875rem;     /* 14 px */
    --dm-text-base: 1rem;       /* 16 px */
    --dm-text-md: 1.0625rem;    /* 17 px */
    --dm-text-lg: 1.125rem;     /* 18 px */
    --dm-text-xl: 1.25rem;      /* 20 px */

    /* Espaciado */
    --dm-space-xs: 0.5rem;
    --dm-space-sm: 1rem;
    --dm-space-md: 1.5rem;
    --dm-space-lg: 2.5rem;
    --dm-space-xl: 4rem;
    --dm-space-2xl: 6rem;

    /* Border radius */
    --dm-radius-sm: 4px;
    --dm-radius-md: 8px;
    --dm-radius-lg: 16px;
    --dm-radius-full: 9999px;

    /* Transiciones */
    --dm-transition: 0.3s ease;

    /* Movimiento (repaso de diseño 27/09/2026): dos curvas y cuatro tiempos
       para todo lo nuevo, sin rebotes. «out» para lo que entra o responde,
       «in-out» para lo que se dibuja o recorre la pantalla. */
    --dm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --dm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dm-t-press: 140ms;
    --dm-t-ui: 200ms;
    --dm-t-panel: 260ms;
    --dm-t-reveal: 420ms;

    /* Deja animar alturas hasta «auto» (pliegues de los pilares). */
    interpolate-size: allow-keywords;
}

/* ==========================================================================
   FUENTES SELF-HOSTED (v1.3.0) — antes Google Fonts remoto (render-blocking
   + riesgo RGPD por cesión de IP a Google; resoluciones UE al respecto).
   2 ficheros woff2 subset latin (~49 KB total, cubre el español completo):
   - DM Serif Display Regular (los titulares solo usan 400, ver ADR-016).
   - Manrope VARIABLE 400-700 (un solo fichero para todos los pesos usados;
     el peso 300 del enqueue antiguo no se usaba en ningún selector).
   font-display: swap = texto visible desde el primer paint.
   ========================================================================== */

@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/dm-serif-display-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/manrope-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TIPOGRAFÍA BASE
   ========================================================================== */

body {
    font-family: var(--dm-font-body);
    color: var(--dm-text);
    background-color: var(--dm-bg);
    font-size: var(--dm-text-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dm-primary-dark);
    line-height: 1.3;
}

/* Titulares display en DM Serif Display. La familia solo trae Regular (400):
   forzar 700 generaba faux-bold del navegador, feo en una serif de alto
   contraste. ADR-016. */
h1, h2 {
    font-family: var(--dm-font-heading);
    font-weight: 400;
}

/* H3-H6 y etiquetas en Manrope (DM Serif sería demasiado dramático a tamaño
   pequeño; ADR-016 permite Manrope en titulares secundarios). */
h3, h4, h5, h6 {
    font-family: var(--dm-font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.35rem); }

p {
    color: var(--dm-text);
    margin-bottom: var(--dm-space-sm);
}

/* ==========================================================================
   ENLACES Y BOTONES
   ========================================================================== */

a {
    color: var(--dm-primary);
    text-decoration: none;
    transition: color var(--dm-transition);
}

a:hover {
    color: var(--dm-primary-dark);
}

/* Botón primario */
.dm-btn,
.wp-block-button__link {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--dm-primary);
    color: var(--dm-white) !important;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    border-radius: var(--dm-radius-sm);
    cursor: pointer;
    transition: all var(--dm-transition);
    text-transform: none;
}

.dm-btn:hover,
.wp-block-button__link:hover {
    background-color: var(--dm-primary-dark);
    color: var(--dm-white) !important;
    box-shadow: var(--dm-shadow-md);
    transform: translateY(-1px);
}

/* Botón secundario (outline) */
.dm-btn-outline {
    background-color: transparent;
    color: var(--dm-primary) !important;
    border: 2px solid var(--dm-primary);
}

.dm-btn-outline:hover {
    background-color: var(--dm-primary);
    color: var(--dm-white) !important;
}

/* Botón cálido (CTA destacado). La clase vive en DOS sitios distintos:
   en enlaces sueltos (.dm-btn.dm-btn-warm, hero de bios) y en el DIV
   envoltorio de los botones de Gutenberg (wp-block-button dm-btn-warm).
   Pintar el fondo sin distinguir teñía también el envoltorio: un rectángulo
   detrás del pill, visible en las esquinas (el "Pedir Cita" del hero de la
   home). El envoltorio queda transparente y el color va siempre al enlace. */
.dm-btn-warm {
    background-color: var(--dm-warm);
    color: var(--dm-white) !important;
}

.dm-btn-warm:hover {
    background-color: var(--dm-warm-dark);
}

.wp-block-button.dm-btn-warm {
    background-color: transparent !important;
}

.wp-block-button.dm-btn-warm .wp-block-button__link {
    background-color: var(--dm-warm) !important;
    color: var(--dm-white) !important;
}

.wp-block-button.dm-btn-warm .wp-block-button__link:hover {
    background-color: var(--dm-warm-dark) !important;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
    background-color: rgba(246, 241, 232, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-navigation a {
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-sm);
    font-weight: 500;
    color: var(--dm-text);
    letter-spacing: 0.01em;
    transition: color var(--dm-transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--dm-primary);
}

/* Navegación: subrayado animado en hover */
.main-navigation .main-nav > ul > li > a {
    position: relative;
}

.main-navigation .main-nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--dm-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after {
    width: 70%;
}

/* CTA "Pedir Cita" en navegación */
/* Selector con especificidad alta (incluye .main-nav ul li) para ganar a la
   regla de color de nav `.main-navigation .main-nav ul li a {color:...!important}`,
   que si no dejaba el texto del CTA en oscuro (ilegible sobre el botón). */
/* El <li> del CTA hereda la altura completa de la barra de GP (line-height 60px),
   con lo que el botón se pintaba como una PESTAÑA pegada al borde superior.
   li en flex + line-height propio → pill compacto centrado verticalmente. */
.main-navigation .main-nav ul li.dm-menu-cta {
    display: flex;
    align-items: center;
}

.main-navigation .main-nav ul li.dm-menu-cta > a {
    background-color: var(--dm-primary) !important;
    color: var(--dm-white) !important;
    padding: 11px 26px !important;
    line-height: 1.3 !important;
    border-radius: var(--dm-radius-full);
    font-weight: 600 !important;
    font-size: var(--dm-text-sm) !important;
    letter-spacing: 0.02em;
    transition: transform var(--dm-t-press) var(--dm-ease-out), box-shadow var(--dm-t-ui) ease, background-color var(--dm-t-ui) ease;
    margin-left: 10px;
    /* Profundidad sutil: sombra de marca + filo claro superior, para que el
       pill no se lea como un rectángulo plano sobre la barra. */
    box-shadow: 0 2px 10px rgba(77, 93, 106, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.main-navigation .main-nav ul li.dm-menu-cta > a:hover {
    background-color: var(--dm-primary-dark) !important;
    color: var(--dm-white) !important;
    box-shadow: 0 6px 18px rgba(77, 93, 106, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Al pulsar se hunde; al pasar el ratón solo cambia de tono (sin rebote,
   repaso de diseño 27/09/2026). */
.main-navigation .main-nav ul li.dm-menu-cta > a:active {
    transform: scale(0.97);
}

.main-navigation .dm-menu-cta > a::after {
    display: none !important;
}

/* Polylang language switcher in nav */


/* ==========================================================================
   SECCIONES GENERALES
   ========================================================================== */

.dm-section {
    padding: var(--dm-space-2xl) 0;
}

.dm-section-alt {
    background-color: var(--dm-bg-alt);
}

.dm-section-dark {
    background-color: var(--dm-bg-dark);
    color: var(--dm-text-on-dark);
}

.dm-section-dark h2,
.dm-section-dark h3 {
    color: var(--dm-white);
}

.dm-section-dark p {
    color: var(--dm-text-on-dark);
}

/* Enlaces sobre banda oscura ("Cómo llegar", el email de contacto).
   Heredaban el azul pizarra de marca (#4D5D6A), que sobre el scrim de la foto
   quedaba en 1,04:1 — invisible. Champán: cálido, así que se distingue del
   azul frío del texto estático (#B5D4F0) en vez de confundirse con él, y muy
   luminoso, que es lo que hace que resalte. Medido sobre el píxel más claro
   del fondo tras los enlaces: 5,1:1 (AA). El subrayado acompaña al color
   porque el color por sí solo no debe ser la única señal de que hay un
   enlace (WCAG 1.4.1). */
.dm-section-dark a:not(.wp-block-button__link) {
    color: var(--dm-link-on-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(243, 217, 164, 0.45);
    transition: color var(--dm-transition), text-decoration-color var(--dm-transition);
}

.dm-section-dark a:not(.wp-block-button__link):hover,
.dm-section-dark a:not(.wp-block-button__link):focus-visible {
    color: var(--dm-white);
    text-decoration-color: var(--dm-white);
}

/* ==========================================================================
   CARDS (servicios, doctores, blog)
   ========================================================================== */

.dm-card {
    background: var(--dm-white);
    border-radius: var(--dm-radius-md);
    padding: var(--dm-space-lg);
    box-shadow: var(--dm-shadow-sm);
    transition: all var(--dm-transition);
    border: 1px solid var(--dm-border-light);
}

.dm-card:hover {
    box-shadow: var(--dm-shadow-lg);
    transform: translateY(-4px);
}

.dm-card h3 {
    font-size: var(--dm-text-xl);
    margin-bottom: var(--dm-space-xs);
}

.dm-card p {
    font-size: var(--dm-text-base);
}

/* Card de doctor */
.dm-doctor-card {
    text-align: center;
}

.dm-doctor-card img {
    width: 180px;
    height: 180px;
    border-radius: var(--dm-radius-full);
    object-fit: cover;
    margin-bottom: var(--dm-space-md);
    border: 4px solid var(--dm-accent-light);
}


/* "Nombres en tarjetas" en DM Serif Display (ADR-016), peso 400. */
.dm-doctor-card h3 {
    font-family: var(--dm-font-heading);
    font-weight: 400;
    letter-spacing: 0;
}

/* Imagen de cabecera en tarjetas de servicio (.dm-card): sangra a los bordes del card
   (el card tiene overflow:hidden + border-radius, así que recorta las esquinas). */
.dm-card .dm-card-photo { margin: -2rem -2rem 1.5rem; }
.dm-card .dm-card-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Mapa embebido (Google Maps) en la sección de contacto. */
.dm-map { margin-top: 2.5rem; }
.dm-map iframe { display: block; width: 100%; height: 360px; border: 0; border-radius: var(--dm-radius-md); }

/* Fotos de instalaciones (galería de La clínica): uniformes 4:3, redondeadas. */
.dm-clinic-photo { margin: 0; }
.dm-clinic-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--dm-radius-md);
    box-shadow: var(--dm-shadow-sm);
}

/* Grid de tarjetas de tratamiento (Cover blocks) en los hubs.
   El scrim del Cover (primary-deep @ dim 60) garantiza AA del título blanco. */
.dm-treatments .dm-treatment-card {
    border-radius: var(--dm-radius-md);
    overflow: hidden;
    box-shadow: var(--dm-shadow-sm);
    transition: transform var(--dm-transition), box-shadow var(--dm-transition);
}
.dm-treatments .dm-treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dm-shadow-lg);
}
.dm-treatments .dm-treatment-card h3 { margin: 0; }
.dm-treatments .dm-treatment-card a {
    color: #fff;
    text-decoration: none;
}
.dm-treatments .dm-treatment-card .wp-block-cover__image-background {
    transition: transform 0.5s ease;
}
.dm-treatments .dm-treatment-card:hover .wp-block-cover__image-background {
    transform: scale(1.05);
}

/* ==========================================================================
   BARRA DE CONFIANZA
   ========================================================================== */

.dm-trust-bar {
    display: flex;
    justify-content: center;
    gap: var(--dm-space-xl);
    flex-wrap: wrap;
    padding: var(--dm-space-lg) 0;
    border-bottom: 1px solid var(--dm-border);
}

.dm-trust-item {
    text-align: center;
}


/* ==========================================================================
   GRID DE SERVICIOS
   ========================================================================== */


/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */

.dm-testimonial {
    background: var(--dm-white);
    border-radius: var(--dm-radius-md);
    padding: var(--dm-space-lg);
    border-left: 4px solid var(--dm-primary);
    box-shadow: var(--dm-shadow-sm);
}

.dm-testimonial p {
    font-style: italic;
    font-size: var(--dm-text-md);
    color: var(--dm-text);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background-color: var(--dm-bg-dark);
    color: var(--dm-text-on-dark);
    padding: var(--dm-space-2xl) 0 var(--dm-space-lg);
}

.site-footer h3,
.site-footer h4 {
    color: var(--dm-white);
    font-size: var(--dm-text-lg);
}

.site-footer a {
    color: var(--dm-warm-light);
    transition: color var(--dm-transition);
}

.site-footer a:hover {
    color: var(--dm-white);
}

.site-footer p,
.site-footer li {
    color: var(--dm-text-on-dark);
    opacity: 0.85;
}

/* ==========================================================================
   FORMULARIO DE CONTACTO
   ========================================================================== */

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea,
.wpforms-form select {
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-sm);
    padding: 12px 16px;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-base);
    transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}

.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
    border-color: var(--dm-primary);
    /* Anillo de foco sólido = 6.8:1 (WCAG 2.4.7 / 1.4.11). Antes rgba(...,0.15) daba 1.24:1 (invisible).
       El outline transparente reaparece en modo alto contraste (forced-colors), donde el box-shadow se descarta. */
    box-shadow: 0 0 0 3px var(--dm-primary);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.wpforms-form button[type="submit"] {
    background-color: var(--dm-primary);
    color: var(--dm-white);
    padding: 14px 40px;
    border: none;
    border-radius: var(--dm-radius-sm);
    font-family: var(--dm-font-body);
    font-weight: 600;
    font-size: var(--dm-text-base);
    cursor: pointer;
    transition: all var(--dm-transition);
}

.wpforms-form button[type="submit"]:hover {
    background-color: var(--dm-primary-dark);
    box-shadow: var(--dm-shadow-md);
}

/* ==========================================================================
   ACCESIBILIDAD — Foco visible de teclado (WCAG 2.4.7 / 1.4.11)
   El diseño solo definía estados :hover; el teclado dependía del outline por
   defecto del navegador. Añade un anillo de marca (#3A4751 = 8.5:1 sobre marfil)
   con :focus-visible (no afecta al clic de ratón) y refleja el subrayado del
   nav también en foco. outline-offset separa el anillo del componente.
   ========================================================================== */
a:focus-visible,
.dm-btn:focus-visible,
.wp-block-button__link:focus-visible,
.main-navigation a:focus-visible,
.menu-toggle:focus-visible,
.dm-dock-btn:focus-visible,
.dm-dock-cta:focus-visible,
.dm-up-corner:focus-visible,
.wpforms-form button:focus-visible {
    outline: 3px solid var(--dm-primary-dark);
    outline-offset: 2px;
    border-radius: var(--dm-radius-sm);
}

/* Sobre superficies oscuras el anillo usa marfil para mantener el contraste */
.dm-hero a:focus-visible,
.site-footer a:focus-visible,
.footer-widgets a:focus-visible,
.site-info a:focus-visible,
.dm-section-dark a:focus-visible,
.page:not(.home) .entry-header a:focus-visible {
    outline-color: var(--dm-text-on-dark);
}

/* Espejo del subrayado animado del nav en foco de teclado (no solo :hover) */
.main-navigation .main-nav > ul > li > a:focus-visible::after {
    width: 70%;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .dm-trust-bar {
        gap: var(--dm-space-md);
    }


    .dm-hero {
        min-height: 60vh;
    }

    .dm-section {
        padding: var(--dm-space-xl) 0;
    }
}

/* ==========================================================================
   HEADER — Refinado
   ========================================================================== */

.site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 2rem;
}

/* El logo es un SVG sin atributos width/height (solo viewBox 671.78×278.79):
   con width:auto el navegador lo colapsaba a 0. Dimensiones explícitas a
   ratio ~2.41 — vector nítido en cualquier DPI. */
.site-header .site-logo img,
.site-header .custom-logo {
    width: 116px;
    height: 48px;
    max-height: none;
}

/* Menú de navegación refinado */
.main-navigation .main-nav > ul > li > a {
    padding: 10px 16px;
    font-size: var(--dm-text-sm);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    position: relative;
    white-space: nowrap; /* evita que "Medicina estética y láser" rompa en 2 líneas */
}

.main-navigation .main-nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--dm-primary);
    transition: width var(--dm-transition);
}

.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after {
    width: 70%;
}

/* Submenú dropdown */
.main-navigation ul ul {
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-top: 3px solid var(--dm-primary); /* filete de acento de marca (consolidado: antes se perdía por un bloque duplicado posterior) */
    border-radius: 0 0 var(--dm-radius-md) var(--dm-radius-md);
    box-shadow: var(--dm-shadow-lg);
    padding: 8px 0;
    min-width: 220px;
}

.main-navigation ul ul li a {
    padding: 8px 20px;
    font-size: var(--dm-text-sm);
    border-bottom: none;
}

.main-navigation ul ul li a:hover {
    background-color: var(--dm-bg-alt);
    color: var(--dm-primary);
}

/* ==========================================================================
   HERO — Más impactante
   ========================================================================== */

.dm-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* TOGGLE Receta 1 (foto sobre hero). Sin --dm-hero-bg → fallback = gradiente de marca
       actual (cero cambio visual, cero edición de contenido). Activar foto = definir
       --dm-hero-bg con `<scrim>, url('assets/img/...')` (ver "RECETAS TEXTO SOBRE IMAGEN").
       El hero NUNCA debe ir lazy; su preload va en functions.php (paso coordinado, ver MOC). */
    background: var(--dm-hero-bg, linear-gradient(135deg, var(--dm-primary-deep) 0%, var(--dm-primary-dark) 45%, var(--dm-primary) 100%));
    background-size: cover;
    background-position: center;
}

.dm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(166, 174, 180, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(200, 186, 175, 0.12) 0%, transparent 50%);
    z-index: 1;
}

.dm-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--dm-bg) 0%, transparent 100%);
    z-index: 2;
}

.dm-hero-content {
    position: relative;
    z-index: 3;
    max-width: 700px;
    color: var(--dm-white);
    /* 14/09/2026: todos los títulos de la web centrados, también el de la
       portada. El bloque entero (titular, entradilla y botones) se centra en
       la caja; los botones se alinean con él. */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.dm-hero .dm-hero-content .wp-block-buttons {
    justify-content: center;
}

.dm-hero h1 {
    color: var(--dm-white);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    margin-bottom: var(--dm-space-md);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    line-height: 1.15;
}

.dm-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--dm-text-xl);
    margin-bottom: var(--dm-space-lg);
    line-height: 1.7;
}

/* ==========================================================================
   CARDS — Más elegantes
   ========================================================================== */

.dm-card {
    background: var(--dm-white);
    border-radius: var(--dm-radius-lg);
    padding: 2rem;
    box-shadow: var(--dm-shadow-sm);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid var(--dm-border-light);
    position: relative;
    overflow: hidden;
}

.dm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dm-primary), var(--dm-accent));
    opacity: 0;
    transition: opacity var(--dm-transition);
}

.dm-card:hover {
    box-shadow: var(--dm-shadow-lg);
    transform: translateY(-6px);
    border-color: transparent;
}

.dm-card:hover::before {
    opacity: 1;
}

/* Doctor cards */
.dm-doctor-card {
    text-align: center;
    padding: 2.5rem 2rem;
}

/* ==========================================================================
   SECCIÓN "SOBRE" — Decoración
   ========================================================================== */

.dm-section h2 {
    position: relative;
    display: inline-block;
}

/* Los encabezados marcados como centrados en el editor lo estaban solo por
   dentro: el `inline-block` de arriba hace que la caja del h2 se encoja hasta
   el ancho del texto, así que centrar el texto dentro de esa caja estrecha no
   movía nada y el título quedaba pegado a la izquierda (con su filete debajo).
   Con caja al ancho del texto y márgenes automáticos, el bloque se centra de
   verdad y el filete sigue quedando bajo el título. */
.dm-section h2.has-text-align-center {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.has-text-align-center.wp-block-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--dm-warm), var(--dm-primary));
    margin: 12px auto 0;
    border-radius: 2px;
}

/* ==========================================================================
   BARRA DE CONFIANZA — Más visual
   ========================================================================== */

.dm-trust-bar .wp-block-columns {
    border-bottom: 1px solid var(--dm-border);
    padding-bottom: 2rem;
}

.dm-trust-item .wp-block-column {
    position: relative;
}

/* ==========================================================================
   BOTONES — Más refinados
   ========================================================================== */

.wp-block-button__link {
    padding: 15px 36px;
    font-size: var(--dm-text-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--dm-radius-full);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Botones en pill por toda la web. Va con !important porque el contenido
   arrastra `border-radius:4px` en línea desde el diseño anterior, y el estilo
   en línea gana a cualquier regla. Mismo criterio que la máscara CSS de la
   paleta vieja: se corrige en la hoja de estilos y no tocando 87 páginas. */
.entry-content .wp-block-button__link,
.entry-content .wp-block-button .wp-block-button__link,
.dm-btn,
.dm-bio-cta {
    border-radius: var(--dm-radius-full) !important;
}

/* Colocación en móvil: los grupos de botones se alineaban a la izquierda
   heredando la justificación pensada para escritorio, y quedaban pequeños y
   descolgados en una columna estrecha. En pantallas pequeñas se centran, se
   les da aire entre ellos y altura de dedo; por debajo de 480px pasan a
   ocupar el ancho y apilarse, que es donde mejor se pulsan. */
@media (max-width: 768px) {
    .entry-content .wp-block-buttons {
        justify-content: center;
        gap: 0.85rem;
    }

    .entry-content .wp-block-button__link {
        min-height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 30px;
    }
}

@media (max-width: 480px) {
    .entry-content .wp-block-buttons .wp-block-button {
        width: 100%;
        max-width: 21rem;
    }

    .entry-content .wp-block-buttons .wp-block-button__link {
        width: 100%;
        /* Con padding lateral de 30px y caja content-box, el 100% se salía
           60px del viewport (medido a 390px). */
        box-sizing: border-box;
    }
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 93, 106, 0.3);
}

.dm-btn-warm .wp-block-button__link:hover {
    box-shadow: 0 6px 20px rgba(106, 90, 79, 0.4);
}

/* Outline buttons */
.is-style-outline .wp-block-button__link {
    background: transparent !important;
}

.is-style-outline .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* FIX contraste: `a.wp-block-button__link:not(.has-background) { color:#fff !important }`
   (0,2,1) forzaba el texto de los botones OUTLINE a blanco → invisible sobre fondo claro
   (p. ej. "Llamar Ahora" en la home). Se sube la especificidad (0,3,1) para ganarle:
   outline usa color de marca por defecto (visible sobre marfil); en hero / secciones
   oscuras vuelve a blanco. */
.wp-block-button.is-style-outline a.wp-block-button__link {
    color: var(--dm-primary) !important;
    border-color: var(--dm-primary) !important;
}
.dm-hero .wp-block-button.is-style-outline a.wp-block-button__link,
.dm-section-dark .wp-block-button.is-style-outline a.wp-block-button__link {
    color: #fff !important;
    border-color: #fff !important;
}
.wp-block-button.is-style-outline a.wp-block-button__link:hover {
    background: var(--dm-primary) !important;
    color: #fff !important;
}
.dm-hero .wp-block-button.is-style-outline a.wp-block-button__link:hover,
.dm-section-dark .wp-block-button.is-style-outline a.wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Botón Gutenberg sin color propio → primario de marca (no el gris #55555e de GP) */
a.wp-block-button__link:not(.has-background) {
    background-color: var(--dm-primary);
    color: var(--dm-white) !important;
}

a.wp-block-button__link:not(.has-background):hover {
    background-color: var(--dm-primary-dark);
}

/* ==========================================================================
   SECCIÓN OSCURA — Más sofisticada
   ========================================================================== */

.dm-section-dark,
.wp-block-group.has-background[style*="background-color:#262E36"] {
    position: relative;
}

.wp-block-group.has-background[style*="background-color:#262E36"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 90%, rgba(166, 174, 180, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 10%, rgba(200, 186, 175, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* ==========================================================================
   PÁGINA INTERIOR — Breadcrumb-like header
   ========================================================================== */

.page:not(.home) .entry-header {
    /* TOGGLE foto de cabecera por página (hub heroes). Sin --dm-page-hero-bg → gradiente de marca. */
    background: var(--dm-page-hero-bg, linear-gradient(135deg, var(--dm-primary-deep) 0%, var(--dm-primary) 100%));
    background-size: cover;
    /* Anclada ARRIBA, no al centro (19/09/2026). Las fotos de cabecera son
       16:9 y la banda que se ve es menos de la mitad de ese alto: con el
       anclaje al centro el recorte caía a la altura del pecho y dejaba las
       caras fuera. Las fotos están compuestas con el sujeto en el tercio
       superior y la franja inferior despejada para el titular, así que el
       recorte tiene que empezar por arriba. En las páginas sin foto el fondo
       es un degradado y la posición da igual. */
    background-position: center top;
    padding: 3rem 2rem;
    margin-bottom: 0;
    text-align: center;
}

.page:not(.home) .entry-header h1 {
    color: var(--dm-white);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin: 0;
}

/* Page heroes con foto. Scrim vertical primary-deep .62→.72 (título blanco CENTRADO = AA
   sobre cualquier foto: ≥4.6:1 incluso sobre foto clara; ~5.3:1 donde cae el título).
   page-id: Dermatología 11, Med. capilar 13, Med. estética y láser 14,
   Equipo médico 6 (foto de equipo), La clínica 36 (interior). */
.page-id-11 .entry-header {
    --dm-page-hero-bg:
        linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)),
        url('assets/img/hub-dermatologia-cabecera.webp');
}
.page-id-13 .entry-header {
    --dm-page-hero-bg:
        linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)),
        url('assets/img/hub-medicina-capilar-cabecera.webp');
}
.page-id-14 .entry-header {
    --dm-page-hero-bg:
        linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)),
        url('assets/img/hub-estetica-laser-cabecera.webp');
}
.page-id-6 .entry-header {
    --dm-page-hero-bg:
        linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)),
        url('assets/img/equipo-medico-cabecera.webp');
}
.page-id-36 .entry-header {
    --dm-page-hero-bg:
        linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)),
        url('assets/img/reception.webp');
}

/* Excepción al anclaje superior de las cabeceras: esta foto de recepción no
   está compuesta para la banda —arriba solo tiene techo— y lo que interesa,
   el mostrador y el rótulo, está en su mitad inferior. El selector repite
   `.page:not(.home)` porque si no, la regla general de las cabeceras gana por
   especificidad y el anclaje superior se queda. */
.page:not(.home).page-id-36 .entry-header {
    background-position: center 68%;
}

/* Hero más grande (antes era una banda corta de ~150px → la foto apenas se veía).
   min-height + centrado vertical para que la imagen luzca. Solo en páginas con foto. */
.page-id-11 .entry-header,
.page-id-13 .entry-header,
.page-id-14 .entry-header,
.page-id-6 .entry-header,
.page-id-36 .entry-header {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Heros de páginas de TRATAMIENTO (reutilizan fotos; placeholder hasta las reales).
   Mismo toggle + scrim .62/.72; min-height 40vh (algo menor que los hubs, jerarquía). */
.page-id-17 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-acne-valencia-cabecera.webp'); }
.page-id-18 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-psoriasis-valencia-cabecera.webp'); }
.page-id-19 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-melasma-manchas-valencia-cabecera.webp'); }
.page-id-20 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-cancer-de-piel-melanoma-valencia-cabecera.webp'); }
.page-id-21 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-cirugia-de-mohs-valencia-cabecera.webp'); }
.page-id-22 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-cirugia-menor-extirpaciones-valencia-cabecera.webp'); }
.page-id-23 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-caida-del-cabello-valencia-cabecera.webp'); }
.page-id-24 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-mesoterapia-capilar-valencia-cabecera.webp'); }
.page-id-25 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-prp-capilar-valencia-cabecera.webp'); }
.page-id-26 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-tricoscopia-digital-valencia-cabecera.webp'); }
.page-id-27 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-acido-hialuronico-rellenos-valencia-cabecera.webp'); }
.page-id-28 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-toxina-botulinica-valencia-cabecera.webp'); }
.page-id-29 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-bioestimuladores-colageno-valencia-cabecera.webp'); }
.page-id-30 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-peelings-medicos-valencia-cabecera.webp'); }
.page-id-33 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-laser-co2-valencia-cabecera.webp'); }
.page-id-34 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-laser-vascular-valencia-cabecera.webp'); }
/* Pilares que salen del degradado de marca: imagen propia, con el firmante de
   la página dentro del encuadre (el mismo que nombran la línea de autoría y el
   `reviewedBy` del dato estructurado). Enrico: 275 y 271. Manuel: 276 y 26.
   Román: 277. */
/* --- Láminas ilustradas: los siete pilares restantes -----------------------
   No llevan foto sino ilustración del mecanismo de la enfermedad. Están
   dibujadas sobre fondo oscuro a propósito, pero la cabecera recorta muy
   apaisado y hay que anclarlas abajo para que el motivo entre (ver más
   abajo). El velo no es uniforme como en las fotográficas, sino un degradado
   de tres paradas: denso arriba, donde cae el titular, y suave en el último
   tramo, donde vive el dibujo. Con velo plano había que elegir entre leer el
   texto o ver la lámina. Medido sobre los píxeles servidos, no sobre el
   fichero. */
.page-id-272 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.80) 0%, rgba(38,46,54,.76) 58%, rgba(38,46,54,.40) 100%), url('assets/img/pilar-rosacea-valencia-cabecera.webp'); }
.page-id-273 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.80) 0%, rgba(38,46,54,.76) 58%, rgba(38,46,54,.40) 100%), url('assets/img/pilar-dermatitis-atopica-valencia-cabecera.webp'); }
.page-id-274 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.80) 0%, rgba(38,46,54,.76) 58%, rgba(38,46,54,.40) 100%), url('assets/img/pilar-verrugas-papilomas-valencia-cabecera.webp'); }
.page-id-278 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.80) 0%, rgba(38,46,54,.76) 58%, rgba(38,46,54,.40) 100%), url('assets/img/pilar-alopecia-frontal-fibrosante-valencia-cabecera.webp'); }
.page-id-279 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.80) 0%, rgba(38,46,54,.76) 58%, rgba(38,46,54,.40) 100%), url('assets/img/pilar-microneedling-valencia-cabecera.webp'); }
.page-id-280 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.80) 0%, rgba(38,46,54,.76) 58%, rgba(38,46,54,.40) 100%), url('assets/img/pilar-mesoterapia-facial-valencia-cabecera.webp'); }
.page-id-281 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.80) 0%, rgba(38,46,54,.76) 58%, rgba(38,46,54,.40) 100%), url('assets/img/pilar-manchas-rejuvenecimiento-valencia-cabecera.webp'); }

.page-id-275 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-alopecia-androgenetica-valencia-cabecera.webp'); }
.page-id-276 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-alopecia-femenina-valencia-cabecera.webp'); }
.page-id-277 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-alopecia-areata-valencia-cabecera.webp'); }
.page-id-271 .entry-header { --dm-page-hero-bg: linear-gradient(rgba(38,46,54,.62), rgba(38,46,54,.72)), url('assets/img/pilar-revision-de-lunares-valencia-cabecera.webp'); }
.page-id-17 .entry-header,
.page-id-18 .entry-header,
.page-id-19 .entry-header,
.page-id-20 .entry-header,
.page-id-21 .entry-header,
.page-id-22 .entry-header,
.page-id-23 .entry-header,
.page-id-24 .entry-header,
.page-id-25 .entry-header,
.page-id-26 .entry-header,
.page-id-27 .entry-header,
.page-id-28 .entry-header,
.page-id-29 .entry-header,
.page-id-30 .entry-header,
.page-id-33 .entry-header,
.page-id-34 .entry-header,
.page-id-271 .entry-header,
.page-id-272 .entry-header,
.page-id-273 .entry-header,
.page-id-274 .entry-header,
.page-id-275 .entry-header,
.page-id-276 .entry-header,
.page-id-277 .entry-header,
.page-id-278 .entry-header,
.page-id-279 .entry-header,
.page-id-280 .entry-header,
.page-id-281 .entry-header {
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/* ==========================================================================
   LINKS "SABER MÁS"  (utilidad .dm-readmore — antes dependía de la URL vieja
   /servicios/, que ya no existe tras la reestructuración -valencia)
   ========================================================================== */


/* ==========================================================================
   SCROLL SUAVE
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Guard anti scroll horizontal por secciones full-bleed (calc(-50vw + 50%) +
   max-width:100vw, que incluye el ancho del scrollbar en Windows).
   overflow-x: clip NO crea contenedor de scroll → no rompe position: sticky. */
html,
body {
    overflow-x: clip;
}

/* ==========================================================================
   ANIMACIÓN DE ENTRADA (sutil)
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dm-hero-content {
    animation: fadeInUp 0.8s ease-out;
}

/* ==========================================================================
   ACCESIBILIDAD — complementos
   ========================================================================== */

/* Respetar "reduce motion": anula la animación de entrada, el scroll suave y
   acorta transiciones/transforms al mínimo. WCAG 2.3.3 / buenas prácticas. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Tap targets ≥44px en desktop: ítems de submenú y switcher de idioma
   (en móvil ya tienen padding amplio). WCAG 2.5.5 / 2.5.8.
   Corte del menú de escritorio: 1181px (ver «MENÚ MÓVIL», issue #7). */
@media (min-width: 1181px) {
    .main-navigation ul ul li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ==========================================================================
   FOOTER — Más completo
   ========================================================================== */

.site-footer {
    background: linear-gradient(180deg, var(--dm-bg-dark) 0%, var(--dm-primary-deep) 100%);
    padding: 4rem 0 2rem;
}

.site-info {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--dm-text-sm);
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   RESPONSIVE — Mejorado
   ========================================================================== */

@media (max-width: 1180px) {
    /* Mobile menu: compact items */
    .main-navigation .main-nav ul li a {
        padding: 10px 20px !important;
        font-size: var(--dm-text-sm) !important;
    }

    .main-navigation .main-nav ul ul li a {
        padding: 8px 20px 8px 35px !important;
        font-size: var(--dm-text-xs) !important;
    }

    /* CTA button smaller on mobile */
    .main-navigation .dm-menu-cta > a {
        padding: 8px 18px !important;
        font-size: var(--dm-text-sm) !important;
        margin: 5px 20px !important;
        text-align: center;
        display: block !important;
    }

    /* Language switcher compact on mobile */

}

@media (max-width: 768px) {
    .dm-hero {
        min-height: 70vh;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .dm-hero h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .dm-card {
        padding: 1.5rem;
    }

    .dm-doctor-card {
        padding: 2rem 1.5rem;
    }

    .page:not(.home) .entry-header {
        padding: 2rem 1rem;
    }

    .wp-block-columns {
        gap: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .wp-block-button__link {
        padding: 12px 24px;
        font-size: var(--dm-text-sm);
        width: 100%;
        text-align: center;
    }

    .wp-block-buttons {
        flex-direction: column;
    }
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.dm-text-center { text-align: center; }
.dm-text-primary { color: var(--dm-primary); }
.dm-text-warm { color: var(--dm-warm); }
.dm-bg-alt { background-color: var(--dm-bg-alt); }
.dm-mt-sm { margin-top: var(--dm-space-sm); }
.dm-mt-md { margin-top: var(--dm-space-md); }
.dm-mt-lg { margin-top: var(--dm-space-lg); }
.dm-mb-sm { margin-bottom: var(--dm-space-sm); }
.dm-mb-md { margin-bottom: var(--dm-space-md); }
.dm-mb-lg { margin-bottom: var(--dm-space-lg); }

/* ==========================================================================
   GENERATEPRESS OVERRIDES — Integración completa
   ========================================================================== */

/* Override GP global colors with paleta dermaMER (manual Edición 2026, ADR-015) */
:root {
    --contrast: #262E36;        /* Shade -50% del primario — texto principal */
    --contrast-2: #4D5D6A;      /* Primario azul pizarra */
    --contrast-3: #6B5D4F;      /* Topo oscurecido a 5.65:1 (WCAG AA 1.4.3; antes #918475 = 3.24:1) */
    --base: #E0D5C7;            /* Crema lino — fondos secundarios */
    --base-2: #F6F1E8;          /* Marfil — fondo principal */
    --base-3: #FFFFFF;
    --accent: #6A5A4F;          /* Nogal — acento principal (CTAs) */
}

/* GP site-header integration */
.site-header {
    background-color: rgba(246, 241, 232, 0.85) !important; /* marfil translúcido — header "frosted" estilo Ricart */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(200, 186, 175, 0.6); /* arena */
}

/* GP custom logo */
.site-header .custom-logo-link img {
    max-height: 48px;
    width: auto;
    transition: opacity var(--dm-transition);
}

.site-header .custom-logo-link:hover img {
    opacity: 0.85;
}

/* Hide site title when logo is present */
.custom-logo-link + .site-branding-container .main-title {
    display: none;
}

/* GP navigation colors override */
.main-navigation {
    background-color: transparent !important; /* deja ver la barra frosted del header */
}

.main-navigation ul ul {
    background-color: var(--dm-white) !important;
}

/* Switcher de idioma (Polylang "dropdown"): clases reales .pll-parent-menu-item /
   .lang-item (las .menu-item-language de más arriba NO existen en el markup; por eso
   iba sin estilo y en EN —nav más ancho— el <ul> lo tiraba abajo a la izquierda).
   El breakpoint a 1024 + nowrap evitan el wrap; aquí lo dejamos compacto. */
.main-navigation .main-nav > ul { flex-wrap: nowrap; }

.main-navigation .lang-item img { width: 18px; height: auto; border-radius: 2px; vertical-align: middle; }


/* El hero debe quedar pegado al header: quita el padding-top de 40px que GP pone en
   #content. Solo en home y páginas (todas con hero a sangre); blog/archivo conservan
   el aire superior. */
.home #content.site-content,
.page #content.site-content {
    padding-top: 0;
}

.main-navigation .main-nav ul li a {
    color: var(--dm-text) !important;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--dm-primary) !important;
}

/* GP one-container layout - remove default backgrounds */
.one-container .site-content {
    background: transparent;
}

.one-container .inside-article {
    padding: 0;
    background: transparent;
}

/* GP entry header for interior pages */
.one-container .entry-header {
    margin-bottom: 0;
}

/* GP footer widgets area */
.footer-widgets {
    background: linear-gradient(180deg, var(--dm-bg-dark) 0%, var(--dm-primary-deep) 100%) !important;
    color: var(--dm-text-on-dark);
    padding: 3rem 0;
}

.footer-widgets .widget-title {
    color: var(--dm-white) !important;
    font-family: var(--dm-font-body);
    font-weight: 600;
    font-size: var(--dm-text-md);
    letter-spacing: 0.02em;
    margin-bottom: 1.2rem;
}

.footer-widgets a {
    color: var(--dm-warm-light) !important;
}

.footer-widgets a:hover {
    color: var(--dm-white) !important;
}

.footer-widgets p,
.footer-widgets li {
    color: rgba(246, 241, 232, 0.85);
}

/* GP site-info (copyright bar) */
.site-info {
    background: var(--dm-primary-deep) !important;
    color: rgba(246, 241, 232, 0.7) !important;
    border-top: 1px solid rgba(246, 241, 232, 0.12);
    padding: 1.2rem 0;
    font-size: var(--dm-text-sm);
    text-align: center;
}

.site-info a {
    color: rgba(246, 241, 232, 0.85) !important;
}

.site-info a:hover {
    color: var(--dm-white) !important;
}

/* Remove GP default separators */
.one-container .inside-article > *:last-child,
.one-container .page-header {
    margin-bottom: 0;
}

/* GP back-to-top — hidden (replaced by custom) */
a.generate-back-to-top {
    display: none !important;
}

/* El botón "volver arriba" es ahora parte del dock flotante (ver más abajo). */

/* GP search modal override */
:root {
    --gp-search-modal-bg-color: var(--dm-white);
    --gp-search-modal-text-color: var(--dm-text);
}

/* Home page - remove content padding */
.home .inside-article,
.home .entry-content {
    padding: 0;
    max-width: 100%;
}

.home .site-main > .inside-article {
    max-width: 100%;
}

/* Home page - full-width Gutenberg blocks */
.home .entry-content > .wp-block-group {
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.home .entry-content > .wp-block-group > .wp-block-group__inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Interior pages entry-content */
.page:not(.home) .entry-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Interior page full-width sections */
.page:not(.home) .entry-content > .wp-block-group.has-background {
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.page:not(.home) .entry-content > .wp-block-group.has-background > .wp-block-group__inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ==========================================================================
   MOBILE MENU — GP mobile toggle
   ========================================================================== */

.menu-toggle {
    background: transparent !important;
    color: var(--dm-primary-dark) !important;
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-sm);
    padding: 8px 16px;
    font-size: var(--dm-text-sm);
    font-weight: 500;
}

.menu-toggle:hover {
    border-color: var(--dm-primary);
    color: var(--dm-primary) !important;
}

/* Menú móvil v1.10.0 — el panel pasa de caja blanca a sangre a una tarjeta
   con esquinas redondeadas, aire y jerarquía: ítems más altos y separados,
   filetes suaves, chevrones alineados a la derecha, CTA centrado como pill
   ancho y selector de idioma discreto al final.
   ⚠️ Corte: 1180px (issue #7, 15/09/2026). La navegación de escritorio mide
   895 px en español y 970 en inglés: por debajo de ~1180 px no cabe junto
   al logo, se partía en dos filas (el `nav_drop_point` de GP) y al 200 % de
   zoom desbordaba la cabecera (WCAG 1.4.10). El corte de GP se sube con los
   filtros `generate_mobile_menu_media_query` y
   `generate_not_mobile_menu_media_query` en functions.php, y este bloque va
   al MISMO valor: si no coinciden, entre los dos cortes el menú de
   escritorio recibe los estilos del panel móvil (tarjeta blanca, filas de
   54 px, chevrones fuera de sitio). */
@media (max-width: 1180px) {
    /* GP toggled menu — make the whole nav scrollable */
    .main-navigation.toggled {
        max-height: 85vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: transparent !important;
    }

    .main-navigation.toggled .main-nav > ul {
        max-height: none !important;
        overflow: visible !important;
    }

    .main-navigation .main-nav > ul {
        background: var(--dm-white);
        margin: 0.5rem 0.75rem 1rem;
        padding: 0.4rem 0;
        border-radius: 16px;
        box-shadow: 0 18px 44px rgba(38, 46, 54, 0.18);
        overflow: hidden;
    }

    .main-navigation .main-nav ul li a {
        padding: 15px 22px;
        font-size: var(--dm-text-base);
        /* GeneratePress da a los enlaces del menú la altura de la barra de
           escritorio (line-height ~60px): en el panel móvil eso convertía cada
           ítem en una fila de 81px. */
        line-height: 1.35;
        /* Altura de dedo garantizada (≥44px, WCAG 2.5.5) sea cual sea el
           line-height que acabe heredando el enlace. */
        min-height: 54px;
        border-bottom: 1px solid var(--dm-border-light);
    }

    /* El último ítem no arrastra filete: cerraba la tarjeta con una línea suelta */
    .main-navigation .main-nav > ul > li:last-child > a {
        border-bottom: none;
    }

    /* Submenús: fondo crema para distinguirlos del primer nivel, sin recuadro
       propio (ya está el de la tarjeta) */
    .main-navigation .main-nav ul ul {
        background: var(--dm-base-2, #F6F1E8) !important;
        box-shadow: none !important;
        border: none !important;
    }

    .main-navigation .main-nav ul ul li a {
        padding-left: 38px;
        font-size: var(--dm-text-sm);
    }

    /* Flecha de desplegar: a la derecha del todo y girando al abrir.
       Con `float` se salía de su línea y aparecía en la fila de al lado,
       dejando un ítem sin flecha y una fila fantasma. Con el enlace en flex
       cada flecha se queda en su fila. */
    .main-navigation .main-nav ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .main-navigation .main-nav .dropdown-menu-toggle {
        padding: 0 !important;
        flex-shrink: 0;
        transition: transform 0.25s ease;
    }

    .main-navigation .main-nav li.sfHover > a > .dropdown-menu-toggle,
    .main-navigation .main-nav li[class*="toggled"] > a > .dropdown-menu-toggle {
        transform: rotate(180deg);
    }

    /* CTA: pill ancho y centrado en su fila, no pegado a la izquierda */
    .main-navigation .main-nav ul li.dm-menu-cta {
        justify-content: center;
        padding: 0.9rem 1.25rem 0.4rem;
    }

    .main-navigation .main-nav ul li.dm-menu-cta > a {
        margin-left: 0;
        width: 100%;
        max-width: 20rem;
        text-align: center;
        padding: 14px 26px !important;
        font-size: var(--dm-text-base) !important;
    }

    /* Selector de idioma: al final, centrado y discreto */


    .main-navigation ul ul {
        box-shadow: none;
        border: none;
        border-radius: 0;
    }

    .main-navigation ul ul li a {
        padding-left: 36px;
        font-size: var(--dm-text-xs);
        color: var(--dm-text-secondary) !important;
    }

}

@media (max-width: 768px) {
    /* Full-width blocks on mobile */
    .home .entry-content > .wp-block-group {
        margin-left: -1rem;
        margin-right: -1rem;
    }

    .home .entry-content > .wp-block-group > .wp-block-group__inner-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Los ajustes móviles del dock flotante van junto a su bloque, más abajo:
       aquí quedarían por delante de las reglas base y no ganarían. */
}

/* ==========================================================================
   CLÚSTER FLOTANTE v2.0.0 — configuración definitiva (doc landing, punto 8)
   Móvil/tablet (≤1180px): Llamar · WhatsApp · Pedir cita (pill con texto).
   Desktop (≥1181px): solo WhatsApp — el CTA vive en la cabecera sticky.
   El corte es el del menú móvil: por debajo, «Pedir cita» de la cabecera
   queda dentro del menú plegado y el del dock lo sustituye.
   Sin ocultarse al hacer scroll: el "Pedir cita" móvil debe estar visible
   SIEMPRE. "Volver arriba" fuera del clúster, en la esquina opuesta.
   ========================================================================== */

.dm-dock {
    position: fixed;
    right: 20px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 998;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Los elementos solo-móvil desaparecen donde la cabecera ya hace su trabajo */
@media (min-width: 1181px) {
    .dm-dock-mobile { display: none !important; }
}

/* Pill "Pedir cita" del clúster móvil: texto, no icono — el CTA se lee */
.dm-dock-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    background-color: var(--dm-primary, #4D5D6A);
    color: var(--dm-white, #fff) !important;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: var(--dm-radius-full, 999px);
    box-shadow: 0 4px 14px rgba(38, 46, 54, 0.28);
    transition: transform var(--dm-t-press) var(--dm-ease-out), background-color var(--dm-t-ui) ease, box-shadow var(--dm-t-ui) ease;
}

/* Sin rebote ni crecimiento (repaso de diseño 27/09/2026): al pasar, tono y
   sombra; al pulsar, se hunde. */
.dm-dock-cta:hover,
.dm-dock-cta:focus-visible {
    background-color: var(--dm-primary-dark, #3B4854);
    box-shadow: 0 8px 22px rgba(38, 46, 54, 0.34);
}

.dm-dock-cta:active { transform: scale(0.97); }

.dm-dock-btn {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(38, 46, 54, 0.22);
    transition: transform var(--dm-t-ui) var(--dm-ease-out), background-color var(--dm-t-ui) ease, box-shadow var(--dm-t-ui) ease;
}

/* Crecen un poco al pasar el ratón, sin rebote, y solo con ratón: en táctil
   el :hover se quedaba pegado después del toque con el botón agrandado. Al
   pulsar se hunden (repaso de diseño 27/09/2026). */
@media (hover: hover) and (pointer: fine) {
    .dm-dock-btn:hover {
        transform: scale(1.06);
        box-shadow: 0 8px 22px rgba(38, 46, 54, 0.3);
    }
}

.dm-dock-btn:focus-visible {
    box-shadow: 0 8px 22px rgba(38, 46, 54, 0.3);
}

.dm-dock-btn:active {
    transform: scale(0.94);
}

.dm-dock-wa {
    background-color: #25D366;
    color: #0A2E14 !important; /* glifo verde muy oscuro: 6.9:1 sobre el verde de marca */
}

.dm-dock-wa:hover {
    background-color: #1EBE5A;
    color: #0A2E14 !important;
}

/* Llamar (enlace tel: directo; solo aparece con número real en Ajustes) */
.dm-dock-tel {
    background-color: var(--dm-primary, #4D5D6A);
    color: var(--dm-white, #fff) !important;
}

.dm-dock-tel:hover {
    background-color: var(--dm-primary-dark, #3B4854);
    color: var(--dm-white, #fff) !important;
}

/* Volver arriba: FUERA del clúster (competía con los CTA y restaba clics).
   Esquina opuesta, menor tamaño y atenuado; aparece a partir de 400px. */
.dm-up-corner {
    position: fixed;
    left: 16px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 997;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--dm-base-2, #F6F1E8);
    color: var(--dm-text, #262E36);
    border: 1px solid var(--dm-arena, #C8BAAF);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, background-color 0.2s ease;
}

.dm-up-corner.is-on {
    opacity: 0.55;
    visibility: visible;
}

.dm-up-corner.is-on:hover,
.dm-up-corner.is-on:focus-visible {
    opacity: 1;
    background-color: var(--dm-white, #fff);
}

/* Etiqueta en globo, encima del botón (solo con ratón/teclado; en táctil se
   oculta). Va arriba y no al lado para no taparle el sitio al botón vecino. */
.dm-dock-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    white-space: nowrap;
    background: var(--dm-text, #262E36);
    color: #fff;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dm-dock-btn:hover .dm-dock-tip,
.dm-dock-btn:focus-visible .dm-dock-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (hover: none) {
    .dm-dock-tip { display: none; }
}

@media (max-width: 768px) {
    /* Más pegado al borde y botones algo menores (siguen por encima del
       mínimo táctil de 44 px, WCAG 2.5.5). */
    .dm-dock {
        right: 12px;
        gap: 8px;
    }

    .dm-dock-btn {
        width: 48px;
        height: 48px;
    }

    .dm-dock-cta {
        min-height: 48px;
        padding: 0 18px;
        font-size: var(--dm-text-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-dock-btn,
    .dm-dock-cta,
    .dm-up-corner,
    .dm-dock-tip { transition: none; }
}

/* (El CSS del formulario "Te llamamos" se retiró con el formulario — doc
   landing definitivo, punto 8. Historial: commit 24df62fe.) */

/* ==========================================================================
   MEGA-MENÚ — submenús largos a 2 columnas (solo desktop)
   Los submenús de ~8+ ítems (Dermatología 10, M. capilar 8, M. estética y
   láser 9) se reparten en 2 columnas; los cortos (Conócenos 4) quedan en 1.
   flex column-wrap con max-height = umbral; independiente del id del ítem
   (robusto si la otra sesión reconstruye el menú). En móvil el submenú es
   acordeón vertical, así que se limita al menú de escritorio (≥1181px).
   ========================================================================== */
@media (min-width: 1181px) {
    .main-navigation .main-nav ul.sub-menu:has(> li:nth-child(8)) {
        columns: 2;
        column-gap: 0;
        width: 480px;
    }

    .main-navigation .main-nav ul.sub-menu:has(> li:nth-child(8)) > li {
        break-inside: avoid;
    }
}

/* Objetivos táctiles del mega-menú (issue #8, WCAG 2.5.5 / 2.5.8). Los ítems
   de los submenús medían 19 px de alto —solo la caja del texto— y son
   veintisiete por página: con ratón se falla y con dedo en una tableta grande
   no hay manera. La fila pasa a 44 px de alto sin tocar la tipografía: el
   enlace es flex y crece por dentro. El panel de Dermatología pasa de ~110 a
   ~240 px de alto, que sigue cabiendo de sobra bajo la barra. */
@media (min-width: 1181px) {
    .main-navigation .main-nav ul.sub-menu li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* El desplegable del selector de idioma es el último ítem de la barra: se
   abría hacia la derecha desde su borde izquierdo y se salía de la pantalla
   (terminaba en 1267 px con la ventana a 1181, medido 15/09/2026). Se ancla
   a la derecha del ítem, solo al abrirse: cerrado, GP lo aparca fuera de
   pantalla con `left: -99999px` y eso no se toca. */


/* ==========================================================================
   RECETAS "TEXTO SOBRE IMAGEN" — sistema reutilizable (teardown Ricart → ADR-015)
   --------------------------------------------------------------------------
   3 tratamientos verificados. Texto BLANCO PURO (el marfil cae a ~4.18:1 sobre foto
   clara). Cada receta es un TOGGLE por una variable CSS CON FALLBACK de marca: sin la
   variable, cero cambio visual; al definirla con `<scrim>, url(...)` aparece la foto.
   No hace falta tocar markup/post_content: el hero es background por CSS (mi ámbito).

   Contraste verificado (texto blanco, brillo de foto P=40 oscura .. 230 clara):
     Receta 1 — hero @.62:        14.1 / 7.9 / 4.7  → AA sobre CUALQUIER foto.
     Receta 2 — banda @.45:       14.3 / 6.2 / 3.1  → exige foto media-oscura (≤~P170).
     Receta 3 — wash dual-stop:   zona baja 14.1 / 8.7 / 5.6 → AA sobre cualquiera;
                                  zona alta (nogal) 9.5 / 4.8 / 2.8 → solo media-oscura
                                  (por eso el texto va en la MITAD INFERIOR).
   ========================================================================== */

/* Texto blanco puro sobre cualquier foto-receta (no marfil). */
.dm-hero .dm-hero-content,
.dm-hero .dm-hero-content h1,
.dm-hero .dm-hero-content h2,
.dm-hero .dm-hero-content h3,
.dm-hero .dm-hero-content p {
    color: #fff;
}

/* RECETA 2 — banda/tarjeta de sección (exige foto media-oscura).
   Fallback sin foto = primary-deep sólido (on-brand). */


/* RECETA 3 — wash editorial de marca (gradiente dual-stop, robusto).
   Coloca el texto en la MITAD INFERIOR (zona primary-deep@.68 = AA sobre cualquier foto).
   Fallback sin foto = nogal→primary-deep sólido (on-brand). */


/* ==========================================================================
   ACTIVACIÓN DE FOTOS
   ACTIVAS (CSS, ámbito diseño): hero home (abajo) + hub heroes capilar/estética-láser
   (en el bloque .entry-header de arriba, vía .page-id-13 / .page-id-14).
   PENDIENTES (sesión de CONTENIDO): banda "por qué", tarjetas y galería viven en bloques
   de post_content → hay que añadir la clase de receta AL BLOQUE (no es mi ámbito).
   Plantillas listas abajo con los nombres de archivo reales.
   Recordatorio LCP: hero-home NUNCA debe ir lazy; su <link rel="preload" as="image"> se
   añade en functions.php (paso coordinado pendiente — ver MOC-Web-y-SEO § Implementación).
   ========================================================================== */

/* ACTIVA · Hero home (Receta 1) */
.dermamer-home .dm-hero {
    --dm-hero-bg:
        linear-gradient(36.75deg, rgba(38,46,54,.62), rgba(38,46,54,.62) 45%, transparent),
        url('assets/img/hero-home.webp');
}

/* ---- PENDIENTE sesión de CONTENIDO: añadir la clase al bloque Gutenberg y descomentar ----
   BANDA "POR QUÉ DERMAMER" (Receta 2) — añadir al grupo  class="dm-banner-photo is-why":
   .dm-banner-photo.is-why {
       --dm-banner-bg:
           linear-gradient(61deg, rgba(38,46,54,.45) 31%, transparent 80%),
           url('assets/img/banda-why.webp');
   }

   TARJETAS DE TRATAMIENTO (Receta 2) — class="dm-banner-photo is-<slug>" por tarjeta
   (foto media-oscura; el scrim 61deg @.45 lo exige):
   .dm-banner-photo.is-acne     { --dm-banner-bg: linear-gradient(61deg, rgba(38,46,54,.45) 31%, transparent 80%), url('assets/img/tratamiento-acne-dermatologo-dermamer-valencia.webp'); }
   .dm-banner-photo.is-mole     { --dm-banner-bg: linear-gradient(61deg, rgba(38,46,54,.45) 31%, transparent 80%), url('assets/img/card-mole-check.webp'); }
   .dm-banner-photo.is-botox    { --dm-banner-bg: linear-gradient(61deg, rgba(38,46,54,.45) 31%, transparent 80%), url('assets/img/card-botulinum-injection.webp'); }
   .dm-banner-photo.is-meso     { --dm-banner-bg: linear-gradient(61deg, rgba(38,46,54,.45) 31%, transparent 80%), url('assets/img/card-hair-mesotherapy.webp'); }
   .dm-banner-photo.is-vascular { --dm-banner-bg: linear-gradient(61deg, rgba(38,46,54,.45) 31%, transparent 80%), url('assets/img/card-laser-vascular-treatment.webp'); }

   RETRATOS DE EQUIPO — <img> simples en tarjetas de doctor (sin texto encima, sin receta):
   equipo-manuel.webp · equipo-enrico.webp · equipo-roman.webp
   GALERÍA INTERIOR — <img> simples (sin texto encima): reception.webp · waitroom.webp ·
   corridor-waitroom.webp · consultation-room.webp · laser-treatment-room.webp
   ========================================================================== */

/* ==========================================================================
   COMPATIBILIDAD DE CONTENIDO — neutraliza la paleta VIEJA incrustada inline
   en los bloques (post_content lo gestiona la sesión de contenido). Esto es un
   stopgap CSS dentro del ámbito de diseño hasta que se corrija en origen
   (idealmente con slugs de paleta, no hex inline). Flag "i" = case-insensitive.
   Mapa: #476085→primario · #2C3E5A/#1A2332→oscuro · #D4A574→nogal · #F0F4F8/#E2E8F0→crema
   ========================================================================== */
/* Los botones del contenido llevan el primario inline (tanda «paleta de
   marca»), y un fondo inline gana al :hover: el oscurecido va aquí, anclado al
   hex de marca. Las veinte reglas `[style*="…#D4A574"] { … !important }` que
   tapaban la paleta anterior se retiraron con esa tanda (tema 2.11.0). */
.wp-block-button__link[style*="background-color:#4D5D6A" i]:hover,
.wp-block-button__link[style*="background-color:#4D5D6A" i]:focus-visible {
    background-color: var(--dm-primary-dark) !important;
}

/* ==========================================================================
   REFINADO v1.3.0 — crítica de diseño (sesión de DISEÑO, 2026-07-21)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) LIENZO UNIFICADO. El sitio entero iba en una caja blanca de 1200px
   (.site.grid-container con bg #FFF de GP) sobre el body marfil: en interiores
   se leía como "página enmarcada", distinta de la home full-bleed. El lienzo
   pasa a marfil (ADR-015: fondo principal) y las cards blancas ganan
   contraste real sobre él (antes: blanco sobre blanco).
   -------------------------------------------------------------------------- */
.site.grid-container.container {
    background-color: var(--dm-bg) !important;
}

/* --------------------------------------------------------------------------
   2) HEROS INTERIORES A SANGRE. El entry-header (gradiente o foto) quedaba
   encajonado en la columna de 1120px; sale a sangre con la misma técnica de
   negative margins que usa la home. El overflow lateral del scrollbar lo
   absorbe el overflow-x: clip global.
   -------------------------------------------------------------------------- */
.page:not(.home) .entry-header {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   3) GRID DE TRATAMIENTOS UNIFORME. El grid nativo de Gutenberg (auto-fill)
   repartía las 6 covers en 4+2 con anchos desiguales. Se fuerza 3×2 en
   desktop, 2 columnas en tablet y 1 en móvil, con altura mínima común.
   -------------------------------------------------------------------------- */
.dm-treatments.wp-block-group-is-layout-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
}

.dm-treatments .dm-treatment-card {
    width: 100% !important;
    min-height: 220px;
}

@media (max-width: 1024px) {
    .dm-treatments.wp-block-group-is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .dm-treatments.wp-block-group-is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --------------------------------------------------------------------------
   4) MEDIDA DE LÍNEA EDITORIAL. El texto de páginas interiores corría a
   1120px (~100+ caracteres/línea). Los bloques de texto directos del
   entry-content se limitan a 46rem (~72ch) y se centran como columna
   editorial; imágenes, grids, covers y grupos con fondo conservan el ancho
   completo (contraste editorial texto estrecho / visual ancho).
   -------------------------------------------------------------------------- */
.page:not(.home) .entry-content > p,
.page:not(.home) .entry-content > h2,
.page:not(.home) .entry-content > h3,
.page:not(.home) .entry-content > h4,
.page:not(.home) .entry-content > ul,
.page:not(.home) .entry-content > ol,
.page:not(.home) .entry-content > blockquote,
.page:not(.home) .entry-content > .wp-block-buttons,
.page:not(.home) .entry-content > .dm-medical-disclaimer {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

/* Misma medida DENTRO de los grupos de los pilares. La regla de arriba solo
   alcanza a los hijos directos del entry-content, así que los pilares que se
   maquetaron con el texto dentro de `wp:group` corrían a 1040px mientras el
   breadcrumb, el índice y la tarjeta "Lo esencial" iban a 736px: la ruta
   quedaba desalineada con el texto y el ancho cambiaba de una página a otra.
   Se unifica a la medida editorial, que es la decisión de v1.3.0. */
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > p,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > h2,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > h3,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > h4,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > ul,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > ol,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > blockquote,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > .wp-block-buttons {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

/* Los H2/H3 de sección van en inline-block por la decoración del filete, y a
   una caja inline-block los márgenes automáticos NO la centran: el texto
   obedecía la columna de 46rem pero los encabezados se quedaban pegados al
   borde izquierdo del contenedor ancho. En bloque, la caja se alinea con la
   columna y el texto dentro sigue a la izquierda, como en los pilares
   reescritos. */
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > h2,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > h3,
body.dm-pillar .entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > h4 {
    display: block;
}

/* Los diagramas conservan su ancho: son la pieza visual ancha frente a la
   columna de texto estrecha. */
body.dm-pillar .entry-content .dm-patho {
    max-width: 64rem;
}

/* Aire entre secciones de los pilares: los grupos traen en línea 2-3rem de
   relleno arriba y abajo, y al encadenarse dejaban huecos de casi 200px
   entre el final de un bloque y el siguiente. */
body.dm-pillar .entry-content > .wp-block-group.dm-section {
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
}

/* El contenedor interior de GeneratePress añade otros 40px arriba y abajo:
   sumados a los del grupo daban ~150px de vacío entre bloques. Solo se toca
   el eje vertical; el relleno lateral se conserva para el móvil. */
body.dm-pillar .entry-content > .wp-block-group.dm-section > .wp-block-group__inner-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   5) CARDS DE EQUIPO. Con nombres a 1 o 2 líneas, los botones "Ver perfil"
   quedaban a alturas distintas. Card en columna flex y CTA anclado abajo
   (las wp-block-columns ya estiran a la misma altura).
   -------------------------------------------------------------------------- */
.dm-doctor-card.wp-block-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dm-doctor-card.wp-block-column > .wp-block-buttons {
    margin-top: auto;
    padding-top: var(--dm-space-sm);
}

/* --------------------------------------------------------------------------
   6) WPFORMS EN PALETA DE MARCA. El CSS moderno de WPForms pinta el submit
   con sus propias variables (--wpforms-button-background-color: #066aab,
   azul ajeno a la paleta) que ganan a los selectores clásicos. Se
   sobrescriben las variables en el contenedor y se refuerza el botón.
   Los campos "medium" (max-width 60%) pasan a ancho completo de su columna.
   -------------------------------------------------------------------------- */
.wpforms-container {
    --wpforms-button-background-color: var(--dm-primary);
    --wpforms-button-background-color-alt: var(--dm-primary-dark);
    --wpforms-button-text-color: #FFFFFF;
    --wpforms-button-border-radius: 4px;
    --wpforms-field-border-radius: 4px;
    --wpforms-field-background-color: #FFFFFF;
    --wpforms-field-border-color: var(--dm-border);
    --wpforms-field-text-color: var(--dm-text);
    --wpforms-label-color: var(--dm-text);
    --wpforms-label-sub-color: var(--dm-text-secondary);
}

.wpforms-container button[type="submit"].wpforms-submit {
    background-color: var(--dm-primary) !important;
    border-color: var(--dm-primary) !important;
    color: #FFFFFF !important;
    font-family: var(--dm-font-body);
    font-weight: 600;
    padding: 14px 40px;
    border-radius: var(--dm-radius-sm);
    transition: all var(--dm-transition);
}

.wpforms-container button[type="submit"].wpforms-submit:hover {
    background-color: var(--dm-primary-dark) !important;
    border-color: var(--dm-primary-dark) !important;
    box-shadow: var(--dm-shadow-md);
}

.wpforms-container .wpforms-field-medium,
.wpforms-container .wpforms-field-row.wpforms-field-medium,
.wpforms-container .wpforms-field input.wpforms-field-medium,
.wpforms-container .wpforms-field select.wpforms-field-medium,
.wpforms-container .wpforms-field .wpforms-field-row.wpforms-field-medium {
    max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   7) SWITCHER DE IDIOMA SIN BANDERAS. Banderas ≠ idiomas (mala práctica
   i18n) y la bandera-emoji/img desentona con la sobriedad de la paleta.
   Queda el nombre del idioma en texto; se ahorra además la petición de
   la imagen.
   -------------------------------------------------------------------------- */
.main-navigation .lang-item img {
    display: none !important;
}

/* --------------------------------------------------------------------------
   8) BACKDROP-FILTER SOLO EN DESKTOP. El blur del header sticky tiene coste
   de repintado en scroll móvil; bajo 768px se sube la opacidad del marfil
   y se elimina el blur (visualmente casi idéntico, scroll más fluido).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(246, 241, 232, 0.97) !important;
    }
}

/* ==========================================================================
   CAPA DE MOTION Y ACENTOS v1.4.0 (sesión de DISEÑO, 2026-07-21)
   4 bloques aprobados por el usuario: reveal on scroll, header transparente
   sobre el hero de la home, acentos nogal, y microdetalle (underline animado,
   contadores, zooms). El JS acompañante vive en functions.php
   (dermamer_motion_scripts). Todo respeta prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) REVEAL ON SCROLL. El JS marca los elementos con .dm-reveal y les añade
   .dm-in al entrar en viewport (IntersectionObserver + stagger por hermanos).
   El estado oculto vive en :not(.dm-in) para que, una vez revelado, el
   elemento no declare transform y los hovers con translateY sigan intactos.
   Sin JS no se añade .dm-reveal → nada queda oculto (fallback seguro).
   -------------------------------------------------------------------------- */
.dm-reveal {
    /* 420 ms y 12 px desde el 27/09/2026 (antes 650 ms y 26 px): la web se lee,
       y cada tarjeta que tarda en llegar es una espera. */
    transition:
        opacity var(--dm-t-reveal) var(--dm-ease-out),
        transform var(--dm-t-reveal) var(--dm-ease-out);
}

.dm-reveal:not(.dm-in) {
    opacity: 0;
    transform: translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
    .dm-reveal:not(.dm-in) {
        opacity: 1;
        transform: none;
    }
}

/* Microdetalle: el filete de los H2 centrados crece al revelarse */
.has-text-align-center.wp-block-heading.dm-reveal::after {
    width: 0;
    transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
}

.has-text-align-center.wp-block-heading.dm-reveal.dm-in::after {
    width: 60px;
}

/* --------------------------------------------------------------------------
   2a) BANDA OSCURA DE LA HOME CON FOTO (Receta 2 adaptada, CSS-only).
   El único .dm-section-dark de la home actual es "Contacto y Ubicación";
   se le añade la foto por background-image SIN tocar el bloque (el inline
   background-color:#2C3E5A queda debajo como fallback). Foto ARQUITECTÓNICA
   (pasillo de la clínica), no de personas: textura calmada que no compite
   con el texto. Scrim vertical .82→.66 = AA del texto blanco en toda la
   banda (más conservador que la Receta 2 pura porque el texto la ocupa
   entera).
   -------------------------------------------------------------------------- */
.dermamer-home .entry-content > .dm-section-dark.has-background {
    background-image:
        /* Tramo claro a .70 (antes .66): sobre una zona blanca de la foto, el
           blend da L≈0.155 → 5.1:1 con texto blanco. AA garantizado en TODA
           la superficie, no solo el centro (doc landing, punto 20). */
        linear-gradient(180deg, rgba(38, 46, 54, 0.82), rgba(38, 46, 54, 0.70)),
        url('assets/img/corridor-waitroom.webp');
    background-size: cover;
    background-position: center;
}

/* --------------------------------------------------------------------------
   2b) HEADER TRANSPARENTE SOBRE EL HERO (solo home). El header pasa a fixed
   (sticky reserva hueco y dejaría una franja marfil sobre el hero); arranca
   transparente con el logo en negativo (filter invert — mismo SVG, cero
   peticiones extra) y nav en marfil, y recupera el frosted al hacer scroll
   (clase .dm-scrolled puesta por JS a partir de 40px).
   -------------------------------------------------------------------------- */
.dermamer-home .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color 0.35s ease, border-color 0.35s ease;
}

.dermamer-home .site-header:not(.dm-scrolled) {
    background-color: transparent !important;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dermamer-home .site-header:not(.dm-scrolled) .site-logo img {
    filter: brightness(0) invert(1);
}

/* Solo los ítems de PRIMER NIVEL van en crema sobre el hero (combinador hijo
   `> ul > li > a`): así el texto del submenú desplegado NO se recolorea y
   conserva su oscuro-sobre-blanco. Antes esta regla usaba el descendiente
   `ul li a` y, con más clases, le ganaba al parche del submenú → ítems del
   dropdown en crema, invisibles sobre la caja blanca. */
.dermamer-home .site-header:not(.dm-scrolled) .main-navigation .main-nav > ul > li > a {
    color: #F6F1E8 !important;
}

.dermamer-home .site-header:not(.dm-scrolled) .main-navigation .main-nav > ul > li:hover > a,
.dermamer-home .site-header:not(.dm-scrolled) .main-navigation .main-nav > ul > li.current-menu-item > a {
    color: #FFFFFF !important;
}

.dermamer-home .site-header:not(.dm-scrolled) .main-navigation .main-nav > ul > li > a::after {
    background-color: #FFFFFF;
}

.dermamer-home .site-header:not(.dm-scrolled) .menu-toggle {
    color: #F6F1E8 !important;
    border-color: rgba(246, 241, 232, 0.5);
}

/* CTA en negativo mientras el header es transparente (pill marfil, texto
   oscuro): más contraste sobre la foto que el slate. Al scrollear vuelve al
   pill primario estándar. */
.dermamer-home .site-header:not(.dm-scrolled) .main-navigation .main-nav ul li.dm-menu-cta > a {
    background-color: #F6F1E8 !important;
    color: var(--dm-primary-deep) !important;
}

/* Los submenús desplegados conservan su fondo blanco y texto oscuro propios
   (no heredan el marfil del estado transparente). */
.dermamer-home .site-header:not(.dm-scrolled) .main-navigation ul ul li a {
    color: var(--dm-text) !important;
}

/* Y lo mismo con el MENÚ MÓVIL desplegado. El crema de arriba es para los
   ítems de primer nivel cuando flotan sobre la foto del hero; al abrir el
   menú en móvil esos mismos ítems pasan a un panel blanco y quedaban en
   crema sobre blanco (1.13:1, ilegible). Con el menú abierto GeneratePress
   marca la navegación con la clase `toggled`: ahí el texto vuelve a oscuro.
   Es el mismo choque que ya arregló el submenú de escritorio (2026-07-21). */
.dermamer-home .site-header:not(.dm-scrolled) .main-navigation.toggled .main-nav > ul > li > a,
.dermamer-home .site-header:not(.dm-scrolled) .main-navigation.toggled .main-nav > ul > li:hover > a,
.dermamer-home .site-header:not(.dm-scrolled) .main-navigation.toggled .main-nav > ul > li.current-menu-item > a {
    color: var(--dm-text) !important;
}

.dermamer-home .site-header:not(.dm-scrolled) .main-navigation.toggled .main-nav > ul > li > a::after {
    background-color: var(--dm-primary);
}

/* El CTA en negativo (pill marfil) es para verse sobre la foto del hero; en el
   panel blanco del móvil se apagaba. Con el menú abierto recupera el pill
   primario, que es el que manda como llamada a la acción. */
.dermamer-home .site-header:not(.dm-scrolled) .main-navigation.toggled .main-nav ul li.dm-menu-cta > a {
    background-color: var(--dm-primary) !important;
    color: var(--dm-white) !important;
}

/* El CTA sí conserva su pill: sobre el panel blanco es marfil con texto
   oscuro, que se lee bien y mantiene el énfasis. */

/* Aire para el título bajo el header fixed + scrim superior extra en el hero
   (banda 180px) para que logo/nav en negativo sean legibles sobre la foto. */
.dermamer-home .dm-hero {
    padding-top: 90px;
}

.dermamer-home .dm-hero {
    /* El velo va concentrado detrás del texto, no extendido por toda la foto
       (issue #31). Antes era una diagonal que cubría el 45 % del hero con un
       62 % de opacidad plana: el titular se leía, pero la clínica y los tres
       médicos quedaban igual de apagados a los lados. Ahora es una elipse
       centrada en el bloque de texto, con la misma densidad justo debajo de
       las letras —ahí no se pierde contraste— y transparencia creciente hacia
       los bordes. Se conserva la banda superior de 180 px, que es la que hace
       legibles el logo y el menú en negativo. */
    --dm-hero-bg:
        linear-gradient(180deg, rgba(38, 46, 54, 0.55) 0%, rgba(38, 46, 54, 0) 180px),
        radial-gradient(ellipse 72% 66% at 50% 52%,
            rgba(38, 46, 54, 0.66) 0%,
            rgba(38, 46, 54, 0.60) 42%,
            rgba(38, 46, 54, 0.30) 72%,
            rgba(38, 46, 54, 0.14) 100%),
        url('assets/img/hero-home.webp');
}

/* La foto apaisada de los tres médicos es 2,33:1 y la cabecera en móvil es
   estrecha y muy alta (unos 390×1000). Con `cover` el navegador recorta el
   84 % del ancho y solo quedaba el médico del centro: los otros dos
   desaparecían. Por debajo del corte se sirve la versión vertical, con los
   tres agrupados y de cuerpo entero.

   La vertical se ancla ARRIBA, no abajo (19/09/2026): en la foto nueva los
   tres están de pie en el pasillo con medio encuadre de suelo por delante,
   así que anclar abajo dejaba fuera de cuadro todo lo que está por encima de
   la cintura. Anclado arriba entran las tres caras y lo que se recorta es el
   suelo, que no aporta nada.

   Tampoco se rellena ya el hueco con color de marca: la vertical cubre toda
   la cabecera a `cover` en las dos franjas, y el recorte lateral (queda algo
   más de la mitad del ancho) respeta al grupo, que está centrado. */
@media (max-width: 768px) {
    .dermamer-home .dm-hero {
        --dm-hero-bg:
            linear-gradient(180deg, rgba(38, 46, 54, 0.55) 0%, rgba(38, 46, 54, 0) 180px),
            /* Densidad subida el 19/09/2026: con la foto vertical nueva, que
               es clara, el párrafo del hero medía 4,29:1 contra el fondo, por
               debajo del 4,5 que pide AA para texto normal (WCAG 1.4.3). */
            linear-gradient(180deg, rgba(38, 46, 54, 0.80) 0%, rgba(38, 46, 54, 0.68) 46%, rgba(38, 46, 54, 0.38) 100%),
            url('assets/img/hero-home-vertical.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }
}

/* --------------------------------------------------------------------------
   3) ACENTOS NOGAL (ADR-015: el nogal es el acento de materialidad; estaba
   infrautilizado). Detalles cálidos sin tocar los CTA primarios.
   -------------------------------------------------------------------------- */
/* Los números del trust bar de la home son <p> con estilo inline
   (color:#476085 + font-size 2/2.5rem), no .dm-trust-number: se cubren
   ambos casos. !important para ganar al inline y a la máscara de compat. */
.page:not(.home) .entry-content ul li::marker,
.page:not(.home) .entry-content ol li::marker {
    color: var(--dm-accent);
}


.dm-testimonial {
    border-left-color: var(--dm-accent);
}

/* --------------------------------------------------------------------------
   4) MICRODETALLE: zooms más cinematográficos.
   -------------------------------------------------------------------------- */
.dm-treatments .dm-treatment-card .wp-block-cover__image-background {
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dm-treatments .dm-treatment-card:hover .wp-block-cover__image-background {
    transform: scale(1.06);
}

.dm-card .dm-card-photo img {
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dm-card:hover .dm-card-photo img {
    transform: scale(1.04);
}

/* ==========================================================================
   DIAGRAMA DE PATOLOGÍA ILUSTRADO (.dm-patho) v1.5.0
   Figura de N pasos (SVGs planos on-brand en assets/img/patho/) con flechas
   entre pasos y número en badge nogal. Los pasos entran escalonados con el
   sistema de reveal (selector añadido en functions.php). Desktop: fila con
   flechas →; móvil: columna con flechas ↓.
   Color semántico de ilustración: clay #B4604C SOLO para inflamación
   (la paleta ADR-015 no tiene rojo; documentado como excepción ilustrativa).
   ========================================================================== */
.entry-content .dm-patho {
    max-width: 64rem;
    margin: var(--dm-space-lg) auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.2rem;
    counter-reset: dm-patho;
}

.dm-patho-step {
    position: relative;
    text-align: center;
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-radius: var(--dm-radius-lg);
    padding: 1.4rem 1.1rem 1.2rem;
    box-shadow: var(--dm-shadow-sm);
    counter-increment: dm-patho;
}

.dm-patho-step img,
.dm-patho-step .dm-patho-svg {
    display: block;
    width: 100%;
    max-width: 170px;
    height: auto;
    margin: 0 auto 0.6rem;
}

.dm-patho-step h3,
.dm-patho-step h4 {
    font-size: var(--dm-text-base);
    margin: 0 0 0.35rem;
}

.dm-patho-step h3::before,
.dm-patho-step h4::before {
    content: counter(dm-patho);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--dm-accent);
    color: var(--dm-white);
    font-size: var(--dm-text-xs);
    font-weight: 700;
    vertical-align: 2px;
}

.dm-patho-step p {
    font-size: var(--dm-text-sm);
    line-height: 1.55;
    color: var(--dm-text-secondary);
    margin: 0;
}

/* Flecha → entre pasos (chevron nogal en el hueco del gap) */
.dm-patho-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 78px;
    right: calc(-1.1rem - 7px);
    width: 14px;
    height: 14px;
    border-top: 3px solid var(--dm-accent);
    border-right: 3px solid var(--dm-accent);
    transform: rotate(45deg);
}

/* La flecha se traza justo después de que aparezca su tarjeta (el reveal
   añade .dm-in con retraso escalonado): primero el paso, luego el enlace. */
.dm-patho-step.dm-reveal::after {
    transition: clip-path 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.dm-patho-step.dm-reveal:not(.dm-in)::after {
    clip-path: inset(0 0 100% 100%);
}

@media (max-width: 900px) {
    .entry-content .dm-patho {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* En rejilla 2×2 las flechas laterales solo tienen sentido dentro de
       cada fila; la del salto de fila apunta hacia abajo. */
    .dm-patho-step:nth-child(2)::after {
        top: auto;
        bottom: calc(-1rem - 8px);
        right: calc(50% - 7px);
        transform: rotate(135deg);
    }
}

@media (max-width: 560px) {
    .entry-content .dm-patho {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        max-width: 20rem;
    }

    .dm-patho-step:not(:last-child)::after {
        top: auto;
        bottom: calc(-0.9rem - 8px);
        right: calc(50% - 7px);
        transform: rotate(135deg);
    }
}

/* --------------------------------------------------------------------------
   Capa de animación de las figuras cuando van INLINE (inc/figuras.php). Es la
   misma que _svg-anim.php mete en cada fichero, acotada a .dm-svg-anim para
   no salir de las figuras. Clay = inflamación/lesión (late); dm-drift,
   dm-diffuse y dm-beam se ponen a mano en el SVG.
   .dm-wait / .dm-go: la figura de una L2 espera quieta hasta entrar en
   pantalla y cada paso arranca desde cero, escalonado (JS en figuras.php).
   -------------------------------------------------------------------------- */
@keyframes dmPulse   { 0%,100% { opacity:.45; transform:scale(1) }   50% { opacity:1;  transform:scale(1.12) } }
@keyframes dmDrift   { 0%,100% { transform:translate(0,0) }          50% { transform:translate(-9px,-11px) } }
@keyframes dmDiffuse { 0%,100% { opacity:.22; transform:scale(.86) } 50% { opacity:.9; transform:scale(1.16) } }
@keyframes dmBeam    { 0%,100% { opacity:.12 }                       50% { opacity:.95 } }

.dm-svg-anim [fill="#B4604C"], .dm-svg-anim [fill="#9C4A3C"],
.dm-svg-anim [stroke="#B4604C"], .dm-svg-anim [stroke="#9C4A3C"] {
    animation: dmPulse 2.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center;
}
.dm-svg-anim .dm-drift   { animation: dmDrift 2.8s ease-in-out infinite; }
.dm-svg-anim .dm-diffuse { animation: dmDiffuse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dm-svg-anim .dm-beam    { animation: dmBeam 1.5s ease-in-out infinite; }

.dm-patho.dm-wait .dm-patho-svg:not(.dm-go) * { animation-play-state: paused; }
.dm-svg-anim.dm-restart * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .dm-svg-anim * { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Pictograma de servicio en las tarjetas de los hubs (.dm-treatment-card):
   el paso más reconocible de la familia, como sello marfil en la esquina.
   Quieto en reposo; anima al pasar el ratón o con el foco dentro.
   -------------------------------------------------------------------------- */
.dm-treatment-card .dm-card-picto {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    width: 88px;
    aspect-ratio: 204 / 152;   /* la escena del SVG, recortada por viewBox en figuras.php */
    border-radius: 6px;
    overflow: hidden;
    background: #F6F1E8;
    box-shadow: 0 2px 10px rgba(32, 39, 45, 0.28);
    opacity: 0.94;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
    pointer-events: none;
}
.dm-treatment-card .dm-card-picto svg {
    display: block;
    width: 100%;
    height: 100%;
}
.dm-treatment-card .dm-card-picto .dm-svg-anim * { animation-play-state: paused; }
.dm-treatment-card:hover .dm-card-picto,
.dm-treatment-card:focus-within .dm-card-picto { opacity: 1; transform: translateY(-2px); }
.dm-treatment-card:hover .dm-card-picto .dm-svg-anim *,
.dm-treatment-card:focus-within .dm-card-picto .dm-svg-anim * { animation-play-state: running; }

@media (max-width: 560px) {
    .dm-treatment-card .dm-card-picto { width: 68px; top: 10px; left: 10px; }
}

/* ==========================================================================
   DIVULGACIÓN PROGRESIVA EN PILARES v1.6.0
   El paciente ve una página compacta; el contenido completo sigue en el DOM
   (los <details> cerrados se indexan — NO es texto oculto). Componentes:
   .dm-essentials (resumen "Lo esencial"), .dm-toc (índice), .dm-fold
   (secciones plegables generadas en functions.php) y .dm-faq (preguntas
   frecuentes con schema FAQPage automático).
   ========================================================================== */

/* Resumen "Lo esencial" */
.entry-content .dm-essentials {
    max-width: 46rem;
    margin: 2rem auto;
    background: var(--dm-white);
    border-top: 3px solid var(--dm-accent);
    border-radius: var(--dm-radius-md);
    padding: 1.5rem 1.75rem 1.4rem;
    box-shadow: var(--dm-shadow-sm);
}

/* El titular del bloque es un H2 desde 2.19.0 (era H3: salto de nivel bajo el
   H1, issue #8). Se conservan los dos selectores porque el contenido guardado
   sigue trayendo H3 y quien lo promociona es el filtro del acordeón. */
.dm-essentials h3,
.dm-essentials h2 {
    font-size: var(--dm-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--dm-accent);
    margin: 0 0 0.8rem;
}

.dm-essentials ul {
    margin: 0;
    padding-left: 1.2rem;
}

.dm-essentials li {
    margin-bottom: 0.5rem;
}

.dm-essentials li::marker {
    color: var(--dm-accent);
}

/* Índice "En esta página" (chips) */
.entry-content .dm-toc {
    max-width: 46rem;
    margin: 1.75rem auto 2.5rem;
}

.dm-toc-label {
    display: block;
    font-size: var(--dm-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dm-text-secondary);
    margin-bottom: 0.6rem;
}

.dm-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dm-toc a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-full);
    font-size: var(--dm-text-sm);
    font-weight: 500;
    color: var(--dm-primary-dark);
    background: var(--dm-white);
    transition: all var(--dm-transition);
}

.dm-toc a:hover {
    border-color: var(--dm-accent);
    color: var(--dm-accent);
}

/* Secciones plegables (details generados por dermamer_pillar_enhance) */
.entry-content .dm-fold {
    max-width: 46rem;
    margin: 0 auto;
    border-top: 1px solid var(--dm-border);
}

.entry-content .dm-fold + :not(.dm-fold) {
    margin-top: 2rem;
}

.dm-fold > summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 2.4rem 1.15rem 0;
    position: relative;
}

.dm-fold > summary::-webkit-details-marker {
    display: none;
}

.dm-fold > summary::after {
    content: '';
    position: absolute;
    right: 8px;
    top: calc(50% - 9px);
    width: 11px;
    height: 11px;
    border-right: 2.5px solid var(--dm-accent);
    border-bottom: 2.5px solid var(--dm-accent);
    transform: rotate(45deg);
    transition: transform var(--dm-transition);
}

.dm-fold[open] > summary::after {
    transform: rotate(225deg);
    top: calc(50% - 3px);
}

.dm-fold > summary h2 {
    display: inline-block;
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    transition: color var(--dm-transition);
}

.dm-fold > summary:hover h2 {
    color: var(--dm-primary);
}

.dm-fold > .dm-fold-body {
    padding: 0.25rem 0 1.5rem;
}

/* Subtítulos de sección dentro de un pliegue ("Carcinoma basocelular",
   "Cicatrices atróficas"…). Heredaban el H3 global —clamp(1.3rem, 2.5vw,
   1.75rem) = 28px— y salían MÁS GRANDES que el H2 del propio desplegable
   (24,8px), invirtiendo la jerarquía visual. Además el H3 va en Manrope
   negrita frente a la serif del H2, lo que exageraba el efecto.
   Aquí: por encima del cuerpo (16px) y por debajo del titular del pliegue en
   todos los anchos. El `>` los distingue de los H3 de componente que también
   viven dentro del pliegue (Lo esencial, diagrama, FAQ, relacionado), que
   conservan su tamaño propio. */
.entry-content .dm-fold-body > h3 {
    font-size: clamp(1.1rem, 1.6vw, 1.25rem);
    line-height: 1.35;
    margin: 1.9rem 0 0.5rem;
    color: var(--dm-primary-dark);
}

.entry-content .dm-fold-body > h3:first-child {
    margin-top: 0.5rem;
}

/* Preguntas frecuentes */
.entry-content .dm-faq,
.entry-content .dm-faq {
    max-width: 46rem;
    margin: 0 auto;
}

.dm-faq-item {
    border-top: 1px solid var(--dm-border-light);
}

.dm-faq-item:last-of-type {
    border-bottom: 1px solid var(--dm-border-light);
}

.dm-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 2.4rem 1rem 0;
    font-weight: 600;
    color: var(--dm-primary-dark);
    position: relative;
    transition: color var(--dm-transition);
}

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

.dm-faq-item > summary:hover {
    color: var(--dm-primary);
}

/* Indicador: flecha que gira. Antes era un "+" rotado 45°, que abierto se
   leía como una "×" — el signo de "cerrar/eliminar", no el de "plegar". */
.dm-faq-item > summary::after {
    content: '';
    position: absolute;
    right: 10px;
    top: calc(50% - 7px);
    width: 9px;
    height: 9px;
    border-right: 2.5px solid var(--dm-accent);
    border-bottom: 2.5px solid var(--dm-accent);
    transform: rotate(45deg);
    transition: transform var(--dm-transition);
}

.dm-faq-item[open] > summary::after {
    transform: rotate(225deg);
    top: calc(50% - 2px);
}

/* La pregunta es un H3 real (jerarquía de encabezados), pero dentro del
   summary conserva el aspecto de fila del acordeón, no el de un titular. */
.dm-faq-item > summary h3 {
    display: inline;
    margin: 0;
    font-family: inherit;
    font-size: var(--dm-text-base);
    font-weight: 600;
    line-height: 1.5;
    color: inherit;
}

.dm-faq-a {
    padding: 0 0 1.15rem;
}

.dm-faq-a p {
    font-size: var(--dm-text-base);
    color: var(--dm-text-secondary);
    margin: 0 0 0.6rem;
}

/* ==========================================================================
   BYLINE MÉDICO (E-E-A-T) v1.6.1 — firma del especialista al pie del pilar
   ========================================================================== */
.entry-content .dm-byline {
    max-width: 46rem;
    margin: 3rem auto 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-left: 4px solid var(--dm-accent);
    border-radius: var(--dm-radius-md);
    box-shadow: var(--dm-shadow-sm);
}

.dm-byline-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    /* Mismo encuadre que el círculo de la tarjeta de equipo: centrado, el
       recorte se comía el pelo (21/09). */
    object-position: 50% 12%;
    border: 3px solid var(--dm-accent-light);
    flex-shrink: 0;
}

.dm-byline-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-byline-lead {
    font-size: var(--dm-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dm-text-secondary);
}

.dm-byline-name {
    font-family: var(--dm-font-heading);
    font-size: var(--dm-text-xl);
    color: var(--dm-primary-dark);
    line-height: 1.2;
}

.dm-byline-name:hover {
    color: var(--dm-primary);
}

.dm-byline-meta {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-secondary);
}

.dm-byline-cta {
    font-size: var(--dm-text-sm);
    font-weight: 600;
    color: var(--dm-accent);
    margin-top: 4px;
}

.dm-byline-cta:hover {
    color: var(--dm-warm-dark);
}

@media (max-width: 480px) {
    .entry-content .dm-byline {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .dm-byline-body {
        align-items: center;
    }
}

/* ==========================================================================
   BIOS DE MÉDICOS v1.7.0 — hero + trayectoria + áreas + idiomas + filosofía
   Hero renderizado por functions.php (dermamer_bio_hero); cuerpo rediseñado
   en post_content. Se oculta la cabecera-banda por defecto de las 3 bios.
   ========================================================================== */

/* Ocultar el entry-header genérico (el H1 vive ahora en el hero de la bio) */
.page-id-7 .entry-header,
.page-id-8 .entry-header,
.page-id-9 .entry-header {
    display: none;
}

/* --- HERO --- */
.dm-bio-hero {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background:
        radial-gradient(ellipse at 15% 20%, rgba(122, 133, 144, 0.18), transparent 55%),
        linear-gradient(135deg, var(--dm-primary-deep) 0%, var(--dm-primary-dark) 60%, var(--dm-primary) 100%);
    color: var(--dm-white);
}

.dm-bio-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3.5rem 2rem;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: center;
}

.dm-bio-portrait img {
    width: 100%;
    height: auto;
    border-radius: var(--dm-radius-lg);
    object-fit: cover;
    aspect-ratio: 4 / 5;
    box-shadow: var(--dm-shadow-lg);
    border: 1px solid rgba(246, 241, 232, 0.15);
}

.dm-bio-role {
    display: inline-block;
    font-size: var(--dm-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dm-warm-light);
    margin-bottom: 0.6rem;
}

/* 14/09/2026: el nombre del médico y su columna van centrados también en
   escritorio (en móvil ya lo estaban); el retrato queda a la izquierda. */
.dm-bio-intro { text-align: center; }
.dm-bio-intro .dm-bio-chips,
.dm-bio-intro .dm-bio-facts { justify-content: center; }

.dm-bio-name.dm-bio-name {
    font-family: var(--dm-font-heading);
    font-weight: 400;
    color: var(--dm-white);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0 0 1.25rem;
}

.dm-bio-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.dm-bio-chip {
    font-size: var(--dm-text-xs);
    font-weight: 500;
    padding: 5px 14px;
    border-radius: var(--dm-radius-full);
    background: rgba(246, 241, 232, 0.12);
    border: 1px solid rgba(246, 241, 232, 0.22);
    color: var(--dm-white);
}

.dm-bio-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    margin-bottom: 1.75rem;
    font-size: var(--dm-text-sm);
    color: rgba(246, 241, 232, 0.9);
}

.dm-bio-fact strong {
    display: block;
    font-size: var(--dm-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dm-warm-light);
    font-weight: 600;
    margin-bottom: 2px;
}

.dm-bio-hero .dm-bio-cta {
    margin-top: 0;
}

@media (max-width: 782px) {
    .dm-bio-hero-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 2.5rem 1.5rem;
        text-align: center;
    }

    .dm-bio-portrait {
        max-width: 240px;
        margin: 0 auto;
    }

    .dm-bio-chips,
    .dm-bio-facts {
        justify-content: center;
    }
}

/* --- CUERPO de la bio: lead + secciones --- */
.page-id-7 .entry-content,
.page-id-8 .entry-content,
.page-id-9 .entry-content {
    max-width: 100%;
}

.dm-bio-body {
    max-width: 52rem;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
}

.dm-bio-lead {
    font-size: var(--dm-text-xl);
    line-height: 1.7;
    color: var(--dm-text);
}

.dm-bio-section-title {
    font-family: var(--dm-font-body);
    font-weight: 700;
    font-size: var(--dm-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--dm-accent);
    margin: 2.5rem 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--dm-border);
}

/* Timeline de formación */
.dm-bio-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dm-bio-timeline li {
    position: relative;
    padding: 0 0 1.5rem 2rem;
    border-left: 2px solid var(--dm-border);
    margin-left: 6px;
}

.dm-bio-timeline li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.dm-bio-timeline li::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dm-accent);
    border: 3px solid var(--dm-bg);
}

.dm-bio-tl-year {
    display: block;
    font-size: var(--dm-text-xs);
    font-weight: 700;
    color: var(--dm-primary);
    letter-spacing: 0.03em;
}

.dm-bio-tl-title {
    font-weight: 600;
    color: var(--dm-text);
}

.dm-bio-tl-place {
    display: block;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-secondary);
}

/* Áreas de dedicación: grid de tarjetas con icono */
.dm-bio-areas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.dm-bio-area {
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-radius: var(--dm-radius-md);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--dm-shadow-sm);
    transition: transform var(--dm-transition), box-shadow var(--dm-transition);
}

.dm-bio-area:hover {
    transform: translateY(-3px);
    box-shadow: var(--dm-shadow-md);
}

.dm-bio-area-icon {
    width: 40px;
    height: 40px;
    color: var(--dm-accent);
    margin-bottom: 0.75rem;
}

.dm-bio-area-icon svg {
    width: 100%;
    height: 100%;
}

.dm-bio-area h3 {
    font-size: var(--dm-text-md);
    margin: 0 0 0.4rem;
}

.dm-bio-area p {
    font-size: var(--dm-text-sm);
    line-height: 1.55;
    color: var(--dm-text-secondary);
    margin: 0;
}

@media (max-width: 560px) {
    .dm-bio-areas {
        grid-template-columns: 1fr;
    }
}

/* Idiomas */
.dm-bio-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dm-bio-lang {
    font-size: var(--dm-text-sm);
    font-weight: 500;
    padding: 8px 18px;
    border-radius: var(--dm-radius-full);
    background: var(--dm-bg-alt);
    color: var(--dm-primary-dark);
}

/* Filosofía / cita del médico */
.dm-bio-quote {
    margin: 2.5rem 0 0;
    padding: 2rem 2.25rem;
    background: var(--dm-white);
    border-left: 4px solid var(--dm-accent);
    border-radius: var(--dm-radius-md);
    box-shadow: var(--dm-shadow-sm);
}

.dm-bio-quote p {
    font-family: var(--dm-font-heading);
    font-size: var(--dm-text-xl);
    line-height: 1.5;
    color: var(--dm-primary-dark);
    margin: 0 0 0.75rem;
}

.dm-bio-quote cite {
    font-style: normal;
    font-weight: 600;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-secondary);
}

/* CTA final de la bio */
.dm-bio-cta-band {
    max-width: 52rem;
    margin: 3rem auto 0;
    padding: 2rem;
    text-align: center;
    background: var(--dm-bg-alt);
    border-radius: var(--dm-radius-lg);
}

.dm-bio-cta-band p {
    font-family: var(--dm-font-heading);
    font-size: 1.35rem;
    color: var(--dm-primary-dark);
    margin: 0 0 1.25rem;
}

/* ==========================================================================
   SEO H2 v1.8.0 (instrucciones 2026-07-24) — breadcrumb visible, bloque
   local NAP y fecha de revisión del byline. Los tres se generan en
   functions.php; aquí solo la presentación.
   ========================================================================== */

/* Breadcrumb visible (Inicio › Hub › Página) */


/* Bloque local NAP al pie del pilar */
.entry-content .dm-local {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    padding: 1.75rem 2rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-radius: var(--dm-radius-lg);
    box-shadow: var(--dm-shadow-sm);
    text-align: center;
}

.dm-local h2 {
    font-size: 1.35rem;
    margin: 0 0 1rem;
}

.dm-local .dm-local-nap {
    font-size: var(--dm-text-base);
    line-height: 1.8;
    color: var(--dm-text-secondary);
    margin: 0 0 1.25rem;
}

.dm-local .dm-local-nap strong {
    color: var(--dm-text);
}

.dm-local .dm-local-nap a {
    color: var(--dm-accent);
    font-weight: 500;
}

.dm-local .wp-block-buttons {
    justify-content: center;
}

/* Fecha de revisión del byline (solo se pinta si hay meta) */
.dm-byline-date {
    font-style: italic;
}

/* ==========================================================================
   FICHAS DE LOS DERMATÓLOGOS v1.11.0
   Currículum completo servido desde datos estructurados (inc/medicos.php).
   Estructura: entradilla → cifras → índice pegajoso + secciones → colegiación.
   Las listas largas van plegadas: la ficha se lee de un vistazo y el detalle
   está a un clic, sin ocultarle nada a los buscadores.
   ========================================================================== */

.dm-med-cv {
    max-width: 68rem;
    /* El hero de la bio es una banda a sangre: sin este aire la entradilla
       arrancaba pegada al borde del área oscura. */
    margin: 3.5rem auto 0;
}

.dm-med-lead {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    font-size: var(--dm-text-lg);
    line-height: 1.75;
    color: var(--dm-text);
    text-align: center;
}

.dm-med-lead p { margin: 0 0 1em; }
.dm-med-lead p:last-child { margin-bottom: 0; }

/* --- Cifras -------------------------------------------------------------- */
.dm-med-figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0 0 3.5rem;
    background: var(--dm-arena, #C8BAAF);
    border-radius: 14px;
    overflow: hidden;
}

.dm-med-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    background: var(--dm-base-2, #F6F1E8);
    text-align: center;
}

.dm-med-figure-n {
    font-family: var(--dm-font-heading);   /* apuntaba a un --dm-font-display que no existe y caía en Manrope */
    font-size: 1.9rem;
    line-height: 1;
    color: var(--dm-warm, #6A5A4F);
}

.dm-med-figure-l {
    font-size: var(--dm-text-xs);
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dm-text-secondary);
}

/* --- Rejilla: índice pegajoso + contenido -------------------------------- */
.dm-med-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}

.dm-med-toc {
    position: sticky;
    top: 100px;
}

.dm-med-toc ul {
    margin: 0;
    padding: 0 0 0 1rem;
    list-style: none;
    border-left: 2px solid var(--dm-arena, #C8BAAF);
}

.dm-med-toc li + li { margin-top: 0.15rem; }

.dm-med-toc a {
    display: block;
    padding: 0.4rem 0;
    font-size: var(--dm-text-sm);
    line-height: 1.35;
    color: var(--dm-text-secondary);
    border-left: 2px solid transparent;
    margin-left: -1.05rem;
    padding-left: 1.05rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.dm-med-toc a:hover { color: var(--dm-primary); }

.dm-med-toc a.is-current {
    color: var(--dm-primary-dark);
    font-weight: 600;
    border-left-color: var(--dm-warm, #6A5A4F);
}

/* --- Secciones ----------------------------------------------------------- */
.dm-med-section + .dm-med-section { margin-top: 3.25rem; }

/* El navegador se ahorra calcular los bloques largos hasta que se acercan */
.dm-med-heavy {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

.entry-content .dm-med-h2 {
    margin: 0 0 1.5rem;
    font-size: 1.55rem;
    line-height: 1.25;
    scroll-margin-top: 110px;
}

.entry-content .dm-med-h2::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 0.7rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--dm-warm, #6A5A4F), var(--dm-primary));
}

.entry-content .dm-med-h3 {
    margin: 0 0 0.8rem;
    font-size: var(--dm-text-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dm-text-secondary);
}

.dm-med-intro {
    margin: 0 0 1.5rem;
    color: var(--dm-text);
    line-height: 1.7;
}

/* --- Línea de tiempo ----------------------------------------------------- */
.dm-med-timeline {
    margin: 0;
    padding: 0 0 0 1.6rem;
    list-style: none;
    border-left: 2px solid var(--dm-border-light, #E6DFD5);
}

.dm-med-tl-item {
    position: relative;
    padding-bottom: 1.9rem;
}

.dm-med-tl-item:last-child { padding-bottom: 0; }

/* Nudo de la línea */
.dm-med-tl-item::before {
    content: '';
    position: absolute;
    left: calc(-1.6rem - 6px);
    top: 0.45rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dm-white);
    border: 2px solid var(--dm-warm, #6A5A4F);
}

.dm-med-tl-when {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--dm-text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dm-warm, #6A5A4F);
}

.entry-content .dm-med-tl-title {
    margin: 0 0 0.2rem;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-base);
    font-weight: 600;
    line-height: 1.4;
    color: var(--dm-text);
    text-transform: none;
    letter-spacing: 0;
}

.dm-med-tl-desc {
    margin: 0;
    font-size: var(--dm-text-sm);
    line-height: 1.6;
    color: var(--dm-text-secondary);
}

/* --- Listas -------------------------------------------------------------- */
.entry-content .dm-med-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.entry-content .dm-med-list li {
    position: relative;
    padding: 0 0 0 1.35rem;
    margin-bottom: 0.7rem;
    font-size: var(--dm-text-base);
    line-height: 1.6;
    color: var(--dm-text);
}

.entry-content .dm-med-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dm-arena, #C8BAAF);
}

/* Citas enlazadas (DOI del artículo, ficha del libro en la editorial):
   subrayado fino en arena para que se reconozcan como enlace sin romper el
   tono de la lista; en hover toman el color primario. */
.entry-content .dm-med-list a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--dm-arena, #C8BAAF);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.entry-content .dm-med-list a:hover {
    color: var(--dm-primary);
    text-decoration-color: var(--dm-primary);
}

.entry-content .dm-med-awards li::before {
    content: '★';
    top: 0;
    width: auto;
    height: auto;
    background: none;
    color: var(--dm-warm, #6A5A4F);
    font-size: var(--dm-text-xs);
}

/* --- Plegables ----------------------------------------------------------- */
.dm-med-fold {
    border: 1px solid var(--dm-border-light, #E6DFD5);
    border-radius: 12px;
    background: var(--dm-white);
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.dm-med-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    min-height: 54px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: var(--dm-text-base);
    color: var(--dm-text);
    transition: background-color 0.2s ease;
}

.dm-med-fold > summary::-webkit-details-marker { display: none; }
.dm-med-fold > summary:hover { background: var(--dm-base-2, #F6F1E8); }

.dm-med-count {
    flex-shrink: 0;
    /* Empuja el contador y el chevron juntos al extremo derecho: con
       space-between a tres bandas el número se quedaba flotando en medio. */
    margin-left: auto;
    min-width: 1.9rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--dm-radius-full, 999px);
    background: var(--dm-base-2, #F6F1E8);
    color: var(--dm-warm, #6A5A4F);
    font-size: var(--dm-text-xs);
    font-weight: 700;
    text-align: center;
}

/* Chevron dibujado en CSS, gira al abrir */
.dm-med-fold > summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-left: -0.35rem;
    border-right: 2px solid var(--dm-text-secondary);
    border-bottom: 2px solid var(--dm-text-secondary);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
}

.dm-med-fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.dm-med-fold[open] > summary { background: var(--dm-base-2, #F6F1E8); }

.dm-med-fold-body {
    padding: 1.1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--dm-border-light, #E6DFD5);
}

/* --- Dos columnas: idiomas y sociedades ---------------------------------- */
.dm-med-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
}

.entry-content .dm-med-langs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.entry-content .dm-med-langs li {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--dm-border-light, #E6DFD5);
    font-size: var(--dm-text-base);
}

.entry-content .dm-med-langs li span { color: var(--dm-text-secondary); }

/* --- Colegiación y cierre ------------------------------------------------ */
.dm-med-colegio {
    margin: 3.5rem 0 2rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--dm-warm, #6A5A4F);
    background: var(--dm-base-2, #F6F1E8);
    border-radius: 0 12px 12px 0;
}

.dm-med-colegio p { margin: 0; font-size: var(--dm-text-base); line-height: 1.6; }

.dm-med-colegio-note {
    margin-top: 0.35rem !important;
    font-size: var(--dm-text-sm) !important;
    color: var(--dm-text-secondary);
}

.dm-med-cta {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* --- Adaptación a pantallas pequeñas ------------------------------------- */
@media (max-width: 900px) {
    .dm-med-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    /* El índice deja de ser columna y pasa a una fila de chips desplazable:
       ocupa una línea en vez de media pantalla. */
    .dm-med-toc {
        position: static;
        margin: 0 -1rem;
        padding: 0 1rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .dm-med-toc::-webkit-scrollbar { display: none; }

    .dm-med-toc ul {
        display: flex;
        gap: 0.5rem;
        padding: 0;
        border-left: none;
    }

    .dm-med-toc li + li { margin-top: 0; }

    .dm-med-toc a {
        white-space: nowrap;
        margin: 0;
        padding: 0.5rem 0.9rem;
        border: 1px solid var(--dm-border-light, #E6DFD5);
        border-radius: var(--dm-radius-full, 999px);
        background: var(--dm-white);
        font-size: var(--dm-text-xs);
    }

    .dm-med-toc a.is-current {
        border-color: var(--dm-warm, #6A5A4F);
        background: var(--dm-base-2, #F6F1E8);
    }

    .dm-med-figures { grid-template-columns: repeat(2, 1fr); }
    .dm-med-cols { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 480px) {
    .dm-med-lead { font-size: var(--dm-text-md); text-align: left; }
    .dm-med-figure { padding: 1.15rem 0.75rem; }
    .dm-med-figure-n { font-size: 1.6rem; }
    .entry-content .dm-med-h2 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dm-med-fold > summary::after,
    .dm-med-toc a { transition: none; }
}

/* ==========================================================================
   LANDING DEFINITIVA v2.0.0 (doc 2026-08-07)
   Chips L2 de las tarjetas de servicio, tarjetas de equipo enriquecidas y
   sección de cierre "Cómo pedir cita" a dos columnas.
   ========================================================================== */

/* --- Chips L2 (puntos 2, 4, 5): fila de enlaces internos bajo el texto de
   cada tarjeta. Solo texto: sin píldora ni borde; menor que el cuerpo; sin
   subrayado en reposo y subrayado en hover. El separador "·" no es enlace. */
.dm-chips {
    margin: 0.75rem 0 1rem;
    font-size: var(--dm-text-sm);
    line-height: 1.9;
    color: var(--dm-text-secondary, #6B5D4F);
}

.dm-chips a {
    color: var(--dm-primary, #4D5D6A);
    text-decoration: none;
    white-space: nowrap;
}

.dm-chips a:hover,
.dm-chips a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--dm-primary-dark, #3B4854);
}

/* Enlace "Ver [área] →" de cierre de tarjeta (sustituye a "Saber más →") */
.dm-card-more {
    display: inline-block;
    font-weight: 600;
    font-size: var(--dm-text-sm);
}

/* --- Tarjetas de equipo (punto 10): jerarquía nombre → rol → áreas →
   idiomas → nº colegiado (menor y atenuado). Altura igualada por flex (las
   columnas ya estiran); el enlace de perfil anclado abajo. */
.dm-doctor-card .dm-doc-role {
    margin: 0.1rem 0 0.5rem;
    font-size: var(--dm-text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dm-warm, #6A5A4F);
}

.dm-doctor-card .dm-doc-langs {
    margin: 0 0 0.45rem;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-secondary, #6B5D4F);
}

.dm-doctor-card .dm-doc-col {
    margin: 0 0 0.9rem;
    font-size: var(--dm-text-xs);
    letter-spacing: 0.03em;
    color: var(--dm-text-secondary, #6B5D4F);
    opacity: 0.85;
}

/* El enlace de perfil, empujado al pie para igualar tarjetas de altura */
.dm-doctor-card .dm-doc-perfil {
    margin-top: auto;
    font-weight: 600;
    font-size: var(--dm-text-sm);
}

/* Enlace centrado al equipo completo (punto 11): texto, no botón */
.dm-team-more {
    text-align: center;
    margin-top: 1.5rem;
}

.dm-team-more a {
    font-weight: 600;
}

/* --- Cierre "Cómo pedir cita" (punto 21): dos columnas en escritorio
   (≥1024px), apiladas en móvil en el mismo orden. */
.dm-booking-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 56rem;
    margin: 2rem auto 0;
    text-align: left;
}

@media (min-width: 1024px) {
    .dm-booking-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }
}

.dm-booking-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.75rem 1.6rem;
    background: var(--dm-white, #fff);
    border: 1px solid var(--dm-border-light, #E6DFD5);
    border-radius: 14px;
}

.entry-content .dm-booking-col h3 {
    margin: 0 0 0.6rem;
    font-size: var(--dm-text-lg);
}

.dm-booking-col p {
    margin: 0 0 1.1rem;
    font-size: var(--dm-text-base);
    line-height: 1.65;
    color: var(--dm-text-secondary, #6B5D4F);
}

/* Acciones ancladas abajo para igualar alturas: el bloque entero baja al
   pie de la tarjeta y el botón "Pedir cita" es SIEMPRE lo último — así los
   dos botones quedan a la misma altura en las dos tarjetas. En la de
   aseguradora, "Ver compañías concertadas" va justo encima del botón. */
.dm-booking-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}

.dm-booking-actions .wp-block-buttons,
.dm-booking-actions .dm-booking-link {
    margin: 0;
}

.dm-booking-link {
    font-weight: 600;
}

/* ==========================================================================
   SELLOS DE TOP DOCTORS — pie, sobre la barra de enlaces legales.
   Al 50% del tamaño original (245×88 → 122×44): con el PNG de 245px que
   sirve Top Doctors (sin @2x ni SVG), es el único tamaño que una pantalla
   retina pinta píxel a píxel sin estirar. La imagen del widget se escala al
   ancho del contenedor. Alto reservado para que la carga del script externo
   no produzca saltos. En móvil se apilan centrados.
   ========================================================================== */
.dm-seals {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 1.75rem 1rem 0.5rem;
}

.dm-seals > div {
    width: 122px;
    max-width: 100%;
    min-height: 44px;
}

.dm-seals img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* ============================================================
   PILARES L2 — acordeón, autoría e impresión
   (documento "Edición de https://dermamer.es/dermatologia/acne-valencia/",
   puntos 3, 6, 7 y 12; patrón replicado en las 27 páginas pilar)
   ============================================================ */

/* Línea corta de autoría bajo el hero: quién firma, antes de leer.
   El margen superior era negativo (-0.4rem) de cuando la línea colgaba del
   breadcrumb; con el hero justo encima —posicionado, y pintado por encima—
   los primeros píxeles de la línea quedaban tapados. Un margen positivo la
   despega del hero. */
.entry-content .dm-review-line {
    max-width: 46rem;
    margin: 1.25rem auto 1.6rem;
    font-size: var(--dm-text-xs);
    line-height: 1.5;
    color: var(--dm-text-secondary);
}

.dm-review-line a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dm-review-line a:hover {
    color: var(--dm-primary);
}

/* Control "Abrir todo / Cerrar todo", sobre el índice */
.entry-content .dm-fold-controls {
    max-width: 46rem;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

.dm-fold-toggle {
    background: none;
    border: 1px solid var(--dm-border);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-family: inherit;
    font-size: var(--dm-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--dm-text-secondary);
    cursor: pointer;
    transition: color var(--dm-transition), border-color var(--dm-transition), background var(--dm-transition);
}

.dm-fold-toggle:hover,
.dm-fold-toggle:focus-visible {
    color: var(--dm-primary);
    border-color: var(--dm-primary);
    background: var(--dm-base-2);
}

/* El titular no debe quedar bajo la cabecera fija al saltar desde el índice */
.entry-content .dm-fold,
.entry-content h2[id] {
    scroll-margin-top: 110px;
}

/* Área de pulsación de 44×44 px en las cabeceras de los desplegables (móvil) */
.dm-fold > summary,
.dm-faq-item > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.dm-fold > summary {
    padding-right: 2.6rem;
}

/* Bloque "Contenido relacionado" al cierre del pilar */
.entry-content .dm-related {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    padding: 1.35rem 1.5rem;
    background: var(--dm-base-2);
    border-left: 3px solid var(--dm-accent);
}

.dm-related h3 {
    margin: 0 0 0.75rem;
    font-size: var(--dm-text-md);
}

.dm-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-related li {
    font-size: var(--dm-text-sm);
    line-height: 1.6;
    color: var(--dm-text-secondary);
}

.dm-related li + li {
    margin-top: 0.55rem;
}

.dm-related a {
    font-weight: 600;
    color: var(--dm-primary);
}

/* Impresión y "guardar como PDF": nada plegado se queda fuera del papel.
   El JS abre los <details> en beforeprint (mecanismo principal); esto es el
   respaldo en navegadores que ya soportan ::details-content. */
@media print {
    details:not([open])::details-content {
        content-visibility: visible;
        display: block;
        block-size: auto;
    }

    .dm-fold > summary::after,
    .dm-faq-item > summary::after,
    .dm-fold-controls,
    .dm-toc,
    .dm-dock,
    .dm-up-corner,
    .dm-seals {
        display: none !important;
    }

    .entry-content .dm-fold {
        border-top: none;
        page-break-inside: avoid;
    }
}

/* Bloque de urgencia (D13 de las Directrices L2): un cuadro potencialmente
   grave no puede ser una viñeta más — bloque destacado propio que remite a
   urgencias, no a pedir cita. */
.entry-content .dm-urgent {
    max-width: 46rem;
    margin: 1.75rem auto;
    padding: 1.1rem 1.4rem;
    background: #FBF1EE;
    border-left: 4px solid #B4552D;
    border-radius: 0 6px 6px 0;
}

.dm-urgent p {
    margin: 0;
    font-size: var(--dm-text-base);
    line-height: 1.65;
    font-weight: 600;
    color: #7A3A1E;
}

@media print {
    .entry-content .dm-urgent {
        border: 2px solid #B4552D;
    }
}

/* ============================================================
   TABLA COMPARATIVA DE LOS PILARES (bisturí o láser, y futuras)
   D5 de las Directrices L2: las comparativas son <table> con <th>
   reales, no imágenes ni cuadrículas de cajas. En móvil la tabla no se
   encoge: se desplaza dentro de su propio contenedor, con foco de teclado
   para que también se pueda recorrer sin ratón. La fuente nunca baja de
   14px, como pide el documento de cirugía menor.
   ============================================================ */
.entry-content .dm-table-wrap {
    max-width: 46rem;
    margin: 2rem auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-content .dm-table-wrap:focus-visible {
    outline: 2px solid var(--dm-primary);
    outline-offset: 3px;
}

.dm-table-title {
    margin: 0 0 0.75rem;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-md);
    font-weight: 700;
    color: var(--dm-primary-dark);
}

table.dm-compare {
    width: 100%;
    min-width: 34rem;          /* por debajo de esto, se desplaza */
    border-collapse: collapse;
    font-size: var(--dm-text-sm);        /* 14px: mínimo fijado en el documento */
    line-height: 1.55;
}

table.dm-compare th,
table.dm-compare td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--dm-border-light);
}

table.dm-compare thead th {
    background: var(--dm-bg-alt);
    color: var(--dm-primary-dark);
    font-weight: 700;
    border-bottom: 2px solid var(--dm-border);
}

table.dm-compare tbody th {
    width: 12rem;
    font-weight: 600;
    color: var(--dm-primary-dark);
    background: var(--dm-base-2, #F6F1E8);
}

table.dm-compare tbody td {
    color: var(--dm-text-secondary);
}

table.dm-compare tbody tr:last-child th,
table.dm-compare tbody tr:last-child td {
    border-bottom: none;
}

/* Etiqueta solo para lectores de pantalla (celda de esquina de la tabla) */
.dm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Pista de que la tabla se desliza: un degradado en el borde derecho que
   desaparece al llegar al final del scroll. Sin él, en móvil la tabla parece
   simplemente cortada. */
.entry-content .dm-table-wrap {
    background:
        linear-gradient(to right, var(--dm-bg) 30%, rgba(246, 241, 232, 0)) left center / 2.5rem 100% no-repeat,
        linear-gradient(to left, var(--dm-bg) 30%, rgba(246, 241, 232, 0)) right center / 2.5rem 100% no-repeat,
        linear-gradient(to right, rgba(106, 90, 79, .18), rgba(106, 90, 79, 0)) left center / 1rem 100% no-repeat,
        linear-gradient(to left, rgba(106, 90, 79, .18), rgba(106, 90, 79, 0)) right center / 1rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

@media (max-width: 600px) {
    /* Más sitio para el contenido: la columna de etiquetas se estrecha y la
       tabla pide menos ancho total, así el deslizamiento es más corto. */
    table.dm-compare { min-width: 30rem; }
    table.dm-compare tbody th { width: 7.5rem; }
    table.dm-compare th,
    table.dm-compare td { padding: 0.6rem 0.7rem; }
}

@media print {
    .entry-content .dm-table-wrap { overflow-x: visible; background: none; }
    table.dm-compare { min-width: 0; font-size: var(--dm-text-xs); }
}

/* ==========================================================================
   FOTOGRAFÍA CLÍNICA (.dm-clinic-*) v1.0.0
   Capa distinta de las figuras SVG (.dm-patho): aquellas explican el
   mecanismo, estas son la prueba. Conviven en la misma página — el SVG arriba,
   la fotografía en la sección de diagnóstico — y no comparten estilos.
   Cuatro disposiciones sobre una base común:
     · relación de aspecto fija, para que la página no salte al cargar
     · aparición al entrar en pantalla (la clase la pone clinica.js)
     · ampliación al pulsar, con <dialog> nativo
     · todo el movimiento se apaga con prefers-reduced-motion
   ========================================================================== */

.dm-clinic {
    margin: 2.5rem 0;
    --dm-clinic-radius: 6px;
}

.dm-clinic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--dm-clinic-radius);
    background: var(--dm-bg-soft, #F6F1E8);
}

.dm-clinic figure { margin: 0; }

/* Pie: es texto médico, no decoración. El filete lo separa del cuerpo del
   artículo para que se lea como una nota del especialista. */
.dm-clinic figcaption {
    margin-top: 0.7rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--dm-border, #E4DED3);
    font-size: var(--dm-text-sm);
    line-height: 1.6;
    color: var(--dm-text-secondary, #6B7B8D);
}

.dm-clinic-credit {
    display: block;
    margin-top: 0.45rem;
    font-size: var(--dm-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dm-text-muted, #8B98A6);
}

/* ---- ampliar: botón común a los cuatro ---- */
.dm-clinic-zoom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: var(--dm-clinic-radius);
}

.dm-clinic-zoom::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--dm-clinic-radius);
    box-shadow: inset 0 0 0 1px rgba(44, 62, 90, 0.08);
    transition: box-shadow 0.25s ease;
}

.dm-clinic-zoom:hover::after,
.dm-clinic-zoom:focus-visible::after {
    box-shadow: inset 0 0 0 2px var(--dm-accent, #B98A55);
}

/* ---- aparición al entrar en pantalla ---- */
.dm-clinic[data-reveal] figure,
.dm-clinic[data-reveal] .dm-clinic-strip-track > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.dm-clinic[data-reveal].is-in figure,
.dm-clinic[data-reveal].is-in .dm-clinic-strip-track > * {
    opacity: 1;
    transform: none;
}

.dm-clinic[data-reveal].is-in .dm-clinic-strip-track > *:nth-child(2) { transition-delay: 0.09s; }
.dm-clinic[data-reveal].is-in .dm-clinic-strip-track > *:nth-child(3) { transition-delay: 0.18s; }

/* ==========================================================================
   A · TIRA COMPARATIVA — variaciones del mismo hallazgo, que hay que ver a la
   vez. En móvil pasa a fila deslizable con anclaje: ocupa lo mismo que una
   sola foto en vez de obligar a bajar por tres.
   ========================================================================== */

.dm-clinic-strip-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(210px, 70%), 1fr);
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
}

.dm-clinic-strip-track > figure { scroll-snap-align: start; }

.dm-clinic-strip-track .dm-clinic-zoom { aspect-ratio: 3 / 4; }

.dm-clinic-strip-track figcaption {
    margin-top: 0.5rem;
    padding-left: 0;
    border-left: 0;
    font-size: var(--dm-text-xs);
    letter-spacing: 0.03em;
    color: var(--dm-text-muted, #8B98A6);
}

@media (min-width: 782px) {
    .dm-clinic-strip-track {
        grid-auto-columns: 1fr;
        overflow: visible;
    }
}

/* ==========================================================================
   B · FIGURA SIMPLE — una lesión que se reconoce a simple vista. Sin
   envoltorio: la foto a ancho de columna y su pie.
   ========================================================================== */

/* La fotografía clínica llega en vertical (viene del dermatoscopio o del
   móvil). El marco sigue al material —3:4, la proporción exacta del original—
   en vez de recortarlo a apaisado, y se limita el ancho para que no ocupe una
   pantalla entera de alto. */
.dm-clinic-figure figure {
    max-width: 460px;
    margin-inline: auto;
}

.dm-clinic-figure .dm-clinic-zoom { aspect-ratio: 3 / 4; }

/* ==========================================================================
   C · CARRUSEL ROTULADO — casos distintos, cada uno con su hallazgo. Turnarlos
   es el mensaje. Sin JS sigue siendo una fila deslizable: ningún caso queda
   inaccesible.
   ========================================================================== */

.dm-clinic-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: var(--dm-clinic-radius);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.dm-clinic-carousel-track::-webkit-scrollbar { display: none; }

.dm-clinic-carousel-track > figure {
    position: relative;
    scroll-snap-align: center;
}

/* Cuadrado y no apaisado: las tricoscopias son verticales y un marco 16:10
   recortaba una franja estrecha del centro, que deja de ser un campo
   tricoscópico legible y pasa a ser una textura. */
.dm-clinic-carousel-track .dm-clinic-zoom { aspect-ratio: 1 / 1; }

@media (min-width: 900px) {
    .dm-clinic-carousel-track .dm-clinic-zoom { aspect-ratio: 5 / 4; }
}

.dm-clinic-carousel-track figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 3rem 1.1rem 0.95rem;
    border-left: 0;
    border-radius: 0 0 var(--dm-clinic-radius) var(--dm-clinic-radius);
    background: linear-gradient(transparent, rgba(32, 39, 45, 0.86));
    color: #F1EBE1;
    font-size: var(--dm-text-sm);
    pointer-events: none;
}

.dm-clinic-carousel-track figcaption b {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #DFC9A9;
}

.dm-clinic-nav {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.85rem;
}

.dm-clinic-nav button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--dm-border, #E4DED3);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dm-clinic-nav button[aria-current="true"] {
    background: var(--dm-accent-deep, #6A5A4F);
    transform: scale(1.5);
}

/* Flechas laterales del carrusel (las crea clinica.js). Van sobre la imagen,
   a media altura, y son lo bastante grandes para tocarlas en móvil. */
.dm-clinic-carousel { position: relative; }

.dm-clinic-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(246, 241, 232, 0.86);
    color: var(--dm-accent-deep, #6A5A4F);
    box-shadow: 0 2px 8px rgba(32, 39, 45, 0.18);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dm-clinic-arrow:hover,
.dm-clinic-arrow:focus-visible { background: #F6F1E8; transform: scale(1.06); }


/* ==========================================================================
   D · MAPA CUTÁNEO — la panorámica del mapeo con las lesiones registradas y,
   al lado, la imagen dermatoscópica que se archiva de cada una. Es la única
   página cuyo material permite enseñar el servicio en vez de describirlo.
   Sin JS se degrada a la panorámica más las dermatoscopias en columna.
   ========================================================================== */

.dm-clinic-map {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 782px) {
    .dm-clinic-map { grid-template-columns: 1.05fr 0.95fr; }
}

.dm-clinic-map-pano {
    position: relative;
    border-radius: var(--dm-clinic-radius);
    overflow: hidden;
}

/* El punto es un aro, no un disco: si se rellena tapa justo la lesión que
   está señalando, que es lo único que hay que ver. */
.dm-clinic-hot {
    position: absolute;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    padding: 0;
    border: 2px solid rgba(246, 241, 232, 0.9);
    border-radius: 50%;
    background: none;
    box-shadow: 0 0 0 1px rgba(32, 39, 45, 0.35), inset 0 0 0 1px rgba(32, 39, 45, 0.2);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.25s ease;
}

.dm-clinic-hot::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1.5px solid rgba(246, 241, 232, 0.6);
    animation: dm-clinic-pulse 2.1s ease-in-out infinite;
}

.dm-clinic-hot[aria-pressed="true"] {
    border-color: var(--dm-accent, #B98A55);
    border-width: 3px;
    transform: scale(1.28);
}

.dm-clinic-hot[aria-pressed="true"]::before {
    animation: none;
    border-color: rgba(185, 138, 85, 0.55);
}

@keyframes dm-clinic-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 0.9;  transform: scale(1.12); }
}

.dm-clinic-map-detail .dm-clinic-zoom { aspect-ratio: 1 / 1; }

.dm-clinic-map-detail .dm-clinic-lbl {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--dm-accent-deep, #6A5A4F);
}

/* Con JS solo se ve la dermatoscopia activa; sin JS se ven las tres. */
.dm-clinic-map.is-live .dm-clinic-map-detail figure[hidden] { display: none; }
.dm-clinic-map.is-live .dm-clinic-map-detail img { animation: dm-clinic-zoomin 0.38s cubic-bezier(0.2, 0.8, 0.3, 1); }

@keyframes dm-clinic-zoomin {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
}


/* ---- acercamiento a la lesión dentro del mapa cutáneo -------------------
   Es lo que haría un vídeo, sin vídeo: las imágenes ya están descargadas y
   esto solo las mueve, así que no añade ni un byte de red. Se anima únicamente
   `transform`, que va en la GPU y no obliga al navegador a recalcular la
   maquetación. La proporción del marco se fija para que al acercar no cambie
   la altura de la página. */

/* El valor por defecto vive en .dm-clinic-map, que es donde el JS lo sobrescribe:
   declararlo en el contenedor de la panorámica pisaba el heredado y la escena
   se quedaba siempre en 1. */
.dm-clinic-map { --dm-zoom: 1; }

.dm-clinic-map-pano { aspect-ratio: 700 / 652; }

.dm-clinic-map-stage {
    position: absolute;
    inset: 0;
    transform: scale(var(--dm-zoom, 1));
    transform-origin: 50% 50%;
    transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

/* Los aros viven dentro de la escena, así que crecerían con ella. Se
   contraescalan para que mantengan su tamaño real sobre la piel ampliada. */
.dm-clinic-hot {
    transform: scale(calc(1 / var(--dm-zoom, 1)));
}

.dm-clinic-hot[aria-pressed="true"] {
    transform: scale(calc(1.28 / var(--dm-zoom, 1)));
}

/* Acercado, los otros dos puntos quedan fuera de cuadro o estorbando: se
   apagan y el aro activo se afina, porque a 2,6× un borde de 3 px tapa la
   lesión igual que antes la tapaba el relleno. */
.dm-clinic-map.is-zoomed .dm-clinic-hot[aria-pressed="false"] {
    opacity: 0;
    pointer-events: none;
}

.dm-clinic-map.is-zoomed .dm-clinic-hot[aria-pressed="true"] {
    border-width: 1.5px;
}

/* Acercado se pierde nitidez de todas formas (el original da 700 px): un
   pelín de contraste y de nitidez lo compensan sin inventar detalle. */
.dm-clinic-map.is-zoomed .dm-clinic-map-stage img {
    filter: contrast(1.06) saturate(1.04);
}

.dm-clinic-map-reset {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    transform: translateX(-50%);
    padding: 0.4rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: rgba(24, 30, 36, 0.78);
    color: #F1EBE1;
    font: inherit;
    font-size: var(--dm-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    backdrop-filter: blur(3px);
    transition: background 0.2s ease;
}

.dm-clinic-map-reset:hover { background: rgba(24, 30, 36, 0.94); }

@media (prefers-reduced-motion: reduce) {
    .dm-clinic-map-stage { transition: none; }
}


/* ---- lupa sobre la tira comparativa ------------------------------------
   Con el ratón encima, el campo se amplía dentro de su propio marco siguiendo
   al cursor. Es la interacción que pide el material: lo que hay que comparar
   es el grosor de pelos vecinos, y a tamaño de tira no se aprecia. La versión
   de detalle (-2x) se descarga al pasar por encima, nunca antes.
   Solo con ratón: en táctil el gesto es pulsar y abrir la ampliación. */

.dm-clinic-loupe { overflow: hidden; cursor: zoom-in; }

.dm-clinic-loupe img {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform-origin: 50% 50%;
}

.dm-clinic-loupe.is-loupe img { transform: scale(2.1); }

/* Al ampliar hay que compensar el propio zoom para que el aro no crezca. */
.dm-clinic-loupe.is-loupe::after {
    box-shadow: inset 0 0 0 2px var(--dm-accent, #B98A55);
}

@media (prefers-reduced-motion: reduce) {
    .dm-clinic-loupe img { transition: none; }
    .dm-clinic-loupe.is-loupe img { transform: none; }
}

/* ==========================================================================
   AMPLIACIÓN — <dialog> nativo: sin dependencias, con Esc y el foco atrapado
   por el propio navegador. Donde no haya soporte, el botón no hace nada y la
   imagen se sigue viendo en su sitio.
   ========================================================================== */

.dm-clinic-dialog {
    width: min(94vw, 1100px);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--dm-bg, #fff);
    color: var(--dm-text-secondary, #6B7B8D);
}

.dm-clinic-dialog::backdrop { background: rgba(24, 30, 36, 0.86); }

.dm-clinic-dialog img {
    display: block;
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    background: #181E24;
}

.dm-clinic-dialog figcaption {
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    border: 0;
    font-size: var(--dm-text-sm);
    line-height: 1.6;
}

.dm-clinic-dialog-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    /* Todo explícito: los estilos globales de botón (padding, min-width,
       line-height) lo deformaban en elipse y descentraban la equis. */
    box-sizing: border-box;
    width: 40px;
    min-width: 0;
    height: 40px;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(24, 30, 36, 0.7);
    color: #F1EBE1;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
}

.dm-clinic-dialog-close svg { display: block; width: 18px; height: 18px; }

.dm-clinic-dialog-close:hover { background: rgba(24, 30, 36, 0.92); }

@media (prefers-reduced-motion: reduce) {
    .dm-clinic *,
    .dm-clinic *::before,
    .dm-clinic *::after {
        animation: none !important;
        transition: none !important;
    }
    .dm-clinic[data-reveal] figure,
    .dm-clinic[data-reveal] .dm-clinic-strip-track > * {
        opacity: 1;
        transform: none;
    }
    .dm-clinic-strip-track,
    .dm-clinic-carousel-track { scroll-behavior: auto; }
}

/* ==========================================================================
   PÁGINA DE PEDIR CITA (.dm-cita-*) v1.0.0
   Dos vías de contacto arriba y la secuencia de cuatro pasos abajo. Los pasos
   reutilizan .dm-patho tal cual: misma retícula, mismo numerado y misma capa
   de animación que las figuras de los pilares, sin una sola regla nueva.
   ========================================================================== */

.dm-cita-vias {
    display: grid;
    gap: 1rem;
    /* minmax(0, …): el widget de Top Doctors (360px fijos) obligaba a la
       columna a crecer hasta 413px en un móvil de 390 y las tres tarjetas
       salían cortadas por la derecha. */
    grid-template-columns: minmax(0, 1fr);
    max-width: 58rem;
    margin: 0 auto 2.75rem;
}

@media (min-width: 700px) {
    .dm-cita-vias { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.dm-cita-via {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.45rem 1.6rem;
    background: var(--dm-white, #fff);
    border: 1px solid var(--dm-border, #E4DED3);
    border-radius: var(--dm-radius-md, 8px);
    box-shadow: var(--dm-shadow-sm);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dm-cita-via:hover,
.dm-cita-via:focus-visible {
    transform: translateY(-2px);
    border-color: var(--dm-accent, #B98A55);
    box-shadow: var(--dm-shadow-md, 0 8px 24px -14px rgba(44, 62, 90, 0.35));
}

.dm-cita-via-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--dm-bg-soft, #F6F1E8);
    color: var(--dm-primary, #4D5D6A);
}

/* WhatsApp lleva su verde solo en el icono: es el color de un tercero y no
   entra en la paleta de marca, así que se queda contenido en el disco. */
.dm-cita-via.is-wa .dm-cita-via-ico {
    background: #25D366;
    color: #fff;
}

.dm-cita-via-txt {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.dm-cita-via-txt strong {
    color: var(--dm-primary-dark, #2C3E5A);
    font-size: var(--dm-text-base);
    font-weight: 650;
    line-height: 1.3;
}

.dm-cita-via-txt span {
    color: var(--dm-text-secondary, #6B7B8D);
    font-size: var(--dm-text-sm);
    line-height: 1.5;
}

/* ---- Qué pasa después ---- */


/* ---- El botón de enviar ----
   Es el único punto de conversión de la página y medía 100 px. Se le da
   cuerpo sin cambiarle el color, que ya es el de marca. */
.dm-cita-vias ~ .wpforms-container .wpforms-submit,
.page-id-39 .wpforms-submit,
.page-id-194 .wpforms-submit {
    min-width: 14rem;
    padding: 0.85rem 2rem;
    font-size: var(--dm-text-base);
    font-weight: 650;
    letter-spacing: 0.01em;
    border-radius: var(--dm-radius-sm, 4px);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.page-id-39 .wpforms-submit:hover,
.page-id-194 .wpforms-submit:hover {
    transform: translateY(-1px);
    box-shadow: var(--dm-shadow-md, 0 8px 24px -14px rgba(44, 62, 90, 0.4));
}

@media (prefers-reduced-motion: reduce) {
    .dm-cita-via,
    .page-id-39 .wpforms-submit,
    .page-id-194 .wpforms-submit { transition: none; }
    .dm-cita-via:hover,
    .page-id-39 .wpforms-submit:hover { transform: none; }
}

/* ---- Quién te va a atender (columna derecha de PEDIR CITA) --------------
   Sustituye a una lista de tres enlaces que repetía el menú. En la página
   donde el paciente decide si se fía, ese hueco lo ocupan mejor las caras y
   los números de colegiado. */

.dm-cita-equipo {
    background: var(--dm-white, #fff);
    border: 1px solid var(--dm-border, #E4DED3);
    border-radius: var(--dm-radius-md, 8px);
    box-shadow: var(--dm-shadow-sm);
    padding: 1.6rem 1.5rem 1.4rem;
}

.dm-cita-equipo h3 {
    margin: 0 0 1.1rem;
    color: var(--dm-primary-dark, #2C3E5A);
    font-size: var(--dm-text-lg);
}

.dm-cita-equipo ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dm-cita-equipo a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    border-radius: var(--dm-radius-sm, 4px);
    transition: opacity 0.2s ease;
}

.dm-cita-equipo a:hover { opacity: 0.82; }

/* Aviso que ocupa el sitio de los sellos de Top Doctors mientras no hay
   consentimiento de marketing: su script manda la IP a cinco dominios. */
.dm-seals-aviso {
    margin: 0;
    max-width: 30ch;
    font-size: var(--dm-text-xs);
    line-height: 1.45;
    color: var(--dm-text-secondary, #6B7B8D);
}

.dm-seals-boton {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    /* Vive en el pie oscuro: el pizarra se quedaba en 1,8:1. Mismo tono que
       «Revisar las cookies» de la línea legal (repaso de diseño 27/09/2026). */
    color: rgba(246, 241, 232, 0.85);
    text-decoration: underline;
    cursor: pointer;
}

.dm-seals-boton:hover,
.dm-seals-boton:focus-visible {
    color: var(--dm-white, #fff);
}

.dm-cita-equipo img {
    flex: 0 0 auto;
    width: 52px;
    height: 62px;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 5px;
    background: var(--dm-bg-soft, #F6F1E8);
}

.dm-cita-equipo span {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.dm-cita-equipo strong {
    color: var(--dm-primary-dark, #2C3E5A);
    font-size: var(--dm-text-base);
    font-weight: 650;
    line-height: 1.3;
}

.dm-cita-equipo em {
    color: var(--dm-text-muted, #8B98A6);
    font-size: var(--dm-text-xs);
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.dm-cita-equipo-nota {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--dm-border-soft, #EFEAE1);
    color: var(--dm-text-secondary, #6B7B8D);
    font-size: var(--dm-text-xs);
    line-height: 1.55;
}

/* Las preguntas cierran la página y llenan el hueco que quedaba bajo el
   formulario. Reutilizan .dm-faq, así que entran solas en el FAQPage. */
.dm-cita-faq {
    max-width: 46rem;
    margin: 3.5rem auto 0;
}

/* ---- El CTA de la cabecera, cuando ESTÁS en la página que enlaza ---------
   La regla de «página actual» pinta el enlace del color primario:

     .main-navigation .main-nav ul li.current-menu-item > a { color: var(--dm-primary) !important }

   Tiene la misma especificidad (0,3,3) que la del pill y está más abajo en el
   fichero, así que ganaba. Como el fondo del pill ES el primario, en /pedir-cita/
   y en /en/book-appointment/ el botón se quedaba en una píldora sin texto:
   texto y fondo del mismo color.

   No se toca la regla de página actual —vale para el resto del menú—; se le
   añade peso al caso del pill, que sube a (0,4,3). */

.main-navigation .main-nav ul li.dm-menu-cta.current-menu-item > a,
.main-navigation .main-nav ul li.dm-menu-cta[class*="current-menu-"] > a,
.main-navigation .main-nav ul li.dm-menu-cta.current_page_item > a {
    color: var(--dm-white) !important;
}

/* El subrayado animado de «estás aquí» tampoco pinta nada dentro del pill. */
.main-navigation .main-nav > ul > li.dm-menu-cta.current-menu-item > a::after {
    display: none !important;
}

/* ---- «o», y el formulario como tercera opción --------------------------
   Arriba están las dos vías que el equipo prefiere (WhatsApp y Top Doctors).
   La raya con la «o» dice sin explicarlo que el formulario es la alternativa
   de después, no la principal. */


/* Las vías dejan de traer su propio margen inferior: ahora lo pone el bloque
   de la «o», que va justo detrás. */
.dm-cita-vias { margin-bottom: 1.5rem; }

/* ---- Separación entre los pasos y las preguntas ------------------------
   `.dm-cita-faq` declaraba `margin: 3.5rem auto 0`, pero una regla de .dm-faq
   con más peso lo dejaba en 0 y el titular «Antes de pedir cita» quedaba
   pegado a la nota de arriba. Se añade .entry-content para ganar
   especificidad, y la nota se alinea al mismo ancho que las preguntas para
   que los filetes de la izquierda caigan en la misma vertical. */
.entry-content .dm-faq.dm-cita-faq {
    margin-top: 4rem;
}


/* ---- Pedir cita: la rejilla de las vías está en «PEDIR CITA v3», al final. */

/* Enlace extendido: la tarjeta entera se pulsa sin meterla dentro de un <a>
   (la de WhatsApp lleva el aviso de datos de salud, y la de Top Doctors su
   widget, que tiene sus propios enlaces). El ::before del enlace tapa la
   tarjeta; el widget sube por encima para seguir recibiendo sus clics. */
.dm-cita-via-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.dm-cita-via:focus-within {
    border-color: var(--dm-accent, #B98A55);
    box-shadow: var(--dm-shadow-md, 0 8px 24px -14px rgba(44, 62, 90, 0.35));
}

/* En WhatsApp «Pulsa aquí…» es un <a> y no un <span>: se le da la letra de
   las demás líneas de la tarjeta, como en la de teléfono. */
.dm-cita-via-txt a.dm-cita-accion {
    font-size: var(--dm-text-sm);
    line-height: 1.5;
}

.dm-cita-via-link:focus-visible {
    outline: 2px solid var(--dm-primary);
    outline-offset: 3px;
}

.dm-cita-reserva-widget {
    position: relative;
    z-index: 2;
    /* El botón «Pide cita ahora» del widget, al pie de la tarjeta. */
    margin-top: auto;
}

/* Sin número real no es pulsable, así que tampoco se comporta como si lo fuera. */
.dm-cita-via.is-pendiente {
    cursor: default;
}

.dm-cita-via.is-pendiente:hover {
    transform: none;
    border-color: var(--dm-border, #E4DED3);
    box-shadow: var(--dm-shadow-sm);
}

.dm-cita-tel {
    color: var(--dm-primary-dark, #2C3E5A) !important;
    font-size: var(--dm-text-md) !important;
    font-weight: 650;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.dm-cita-via.is-pendiente .dm-cita-tel {
    color: var(--dm-text-muted, #8B98A6) !important;
}

.dm-cita-via-cab {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    text-decoration: none;
}

.dm-cita-reserva-widget:empty { display: none; }

.dm-cita-reserva-widget {
    max-width: 100%;
}
.dm-cita-reserva-widget iframe { max-width: 100% !important; }

/* El teléfono del bloque de contacto, mientras sea un marcador. */
.dm-tel-pendiente { color: var(--dm-text-muted, #8B98A6); }

/* Las dos tarjetas que quedan —quién te atiende y contacto— van una al lado
   de la otra ahora que el formulario ya no ocupa la columna izquierda. */
@media (min-width: 782px) {
    .page-id-39 .wp-block-columns,
    .page-id-194 .wp-block-columns {
        gap: 1.5rem;
    }
    .page-id-39 .wp-block-column,
    .page-id-194 .wp-block-column {
        flex-basis: 50% !important;
    }
}

/* ---- Retratos del equipo: encuadre del círculo -------------------------
   El retrato es vertical (1122x1402) dentro de un círculo cuadrado de 180 px,
   así que `cover` recorta 45 px de alto. Centrado, se los repartía arriba y
   abajo y el pelo llegaba a tocar el borde superior. Desplazando el encuadre
   hacia arriba, el óvalo facial entra entero y queda aire sobre el pelo. */
.dm-doctor-card img {
    object-position: 50% 12%;
}

/* Especialidad y nº de colegiado bajo el nombre, en la tarjeta de equipo. */
.dm-doctor-sub {
    margin: -0.35rem 0 0.9rem;
    text-align: center;
    color: var(--dm-text-secondary, #6B7B8D);
    font-size: var(--dm-text-xs);
    line-height: 1.5;
    max-width: 20rem;
}

.dm-doctor-sub span {
    display: block;
    margin-top: 0.2rem;
    color: var(--dm-text-muted, #8B98A6);
    font-size: var(--dm-text-xs);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TARIFAS (.dm-tarifas) v1.0.0
   Listado de precios de /conocenos/tarifas/. Cada categoría es un <details
   class="dm-fold"> —el mismo acordeón de los pilares, activado en esta página
   por el meta _dermamer_fold— y dentro va una tabla de dos columnas.
   Decisiones:
   · <table> real con <th> de cabecera, no una lista de "Concepto: 100 €":
     un precio es un dato tabular y los lectores de pantalla deben poder
     asociar cada importe a su concepto.
   · La cabecera se ve pequeña y en versalitas: se repite catorce veces y no
     debe competir con el titular de la categoría.
   · Los importes van en cifras tabulares y alineados a la derecha, para que
     las unidades queden en columna y la lista se recorra de un vistazo.
   · En móvil la tabla NO se desliza (a diferencia de .dm-compare): son solo
     dos columnas, así que el concepto pasa a ocupar su propia línea y el
     importe queda debajo, a la derecha.
   ========================================================================== */
.entry-content .dm-tarifas {
    max-width: 46rem;
    margin: 0.25rem auto 1.5rem;
    overflow-x: visible;
}

.entry-content .dm-tarifas table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dm-text-base);
    line-height: 1.5;
}

.entry-content .dm-tarifas th,
.entry-content .dm-tarifas td {
    padding: 0.7rem 0.25rem;
    text-align: left;
    vertical-align: baseline;
    /* El bloque wp:table trae recuadro en cada celda; aqui solo separa la
       linea de base de cada concepto, como una lista de precios impresa. */
    border: 0;
    border-bottom: 1px solid var(--dm-border-light);
    word-break: normal;
    overflow-wrap: anywhere;
}

.entry-content .dm-tarifas thead th {
    padding-top: 0;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--dm-text-secondary);
    border-bottom: 1px solid var(--dm-border);
}

.entry-content .dm-tarifas thead th:last-child,
.entry-content .dm-tarifas tbody td:last-child {
    text-align: right;
    white-space: nowrap;
    width: 8.5rem;
}

.entry-content .dm-tarifas tbody td:first-child {
    color: var(--dm-text);
}

.entry-content .dm-tarifas tbody td:last-child {
    font-weight: 600;
    color: var(--dm-primary-dark);
    font-variant-numeric: tabular-nums;
}

.entry-content .dm-tarifas tbody tr:last-child td {
    border-bottom: none;
}

.entry-content .dm-tarifas tbody tr:hover td {
    background: var(--dm-white);
}

/* Nota al pie de una categoría (importes por confirmar, matices de la tarifa) */
.entry-content .dm-tarifas-nota {
    max-width: 46rem;
    margin: 0 auto 1.75rem;
    font-size: var(--dm-text-sm);
    line-height: 1.6;
    color: var(--dm-text-secondary);
}

/* Aviso legal de cierre: el presupuesto se cierra tras la valoración médica.
   Va fuera de los pliegues, siempre visible. */
.entry-content .dm-tarifas-aviso {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    padding: 1.35rem 1.5rem;
    background: var(--dm-white);
    border-left: 3px solid var(--dm-accent);
    font-size: var(--dm-text-sm);
    line-height: 1.7;
    color: var(--dm-text-secondary);
}

.entry-content .dm-tarifas-aviso p {
    margin: 0 0 0.6rem;
}

.entry-content .dm-tarifas-aviso p:last-child {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    /* Dos columnas en 320px dejan el concepto en cuatro palabras por línea.
       Se apilan: concepto arriba, importe debajo alineado a la derecha. */
    .entry-content .dm-tarifas thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .entry-content .dm-tarifas tbody tr {
        display: block;
        border-bottom: 1px solid var(--dm-border-light);
        padding: 0.6rem 0;
    }

    .entry-content .dm-tarifas tbody tr:last-child {
        border-bottom: none;
    }

    .entry-content .dm-tarifas tbody td {
        display: block;
        border-bottom: none;
        padding: 0;
    }

    .entry-content .dm-tarifas tbody td:last-child {
        width: auto;
        margin-top: 0.15rem;
    }
}

@media print {
    .entry-content .dm-tarifas tbody tr:hover td { background: none; }
}

/* --------------------------------------------------------------------------
   Tarjetas de los hubs (.dm-hub-cards) — «Conócenos» / «About Us».
   Con la quinta tarjeta (Tarifas) el bloque wp:columns reparte a partes
   iguales y no envuelve: cinco columnas dejaban el texto en 130 px. Se pasa a
   rejilla de tres, que envuelve sola a 3+2 y baja a 2 y a 1 en pantallas
   menores. Marcado por className en el contenido, no por page-id: los IDs no
   coinciden entre local y producción.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   BANDA DE ASEGURADORAS (home) — marquesina de logos
   Ocupa la franja en degradado entre el hero y la primera sección: el hero
   se funde a marfil con su ::after y la banda continúa de marfil al
   #F0F4F8 de la sección siguiente (color inline del contenido, sin var).
   Marcado inyectado desde functions.php (dermamer_aseguradoras_banda).
   ========================================================================== */

/* El hero se funde a marfil con un ::after de 120 px pensado para morir en la
   sección siguiente. Con la banda debajo esos 120 px, más el margen superior
   de la propia banda, dejaban ~160 px (4 cm) de blanco vacío entre los
   botones y los logos. Aquí basta un velo corto para matar el canto duro de
   la foto: 38 px, 1 cm justo, y la banda arranca pegada sin margen propio.
   El velo muere en var(--dm-bg), que es exactamente el color con el que
   empieza el fondo de la banda, así que la costura no se ve. Solo en la home,
   que es donde va la banda; el resto de páginas conserva su degradado largo. */
.dermamer-home .dm-hero::after {
    height: 38px;
}

.dm-insurers {
    position: relative;
    z-index: 3;
    padding: 0 0 2.75rem;
    background: linear-gradient(180deg, var(--dm-bg) 0%, var(--dm-bg) 62%, #F0F4F8 100%);
    overflow: hidden;
}

/* La banda no es un .wp-block-group, así que no hereda el full-bleed de la
   home: se replica aquí (ver «Home page - full-width Gutenberg blocks»). */
.dermamer-home .entry-content > .dm-insurers {
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.dm-insurers-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dm-insurers-title {
    margin: 0 0 1.25rem;
    text-align: center;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dm-text-secondary);
}

/* La máscara difumina los dos extremos para que los logos entren y salgan
   sin corte seco. Va en el viewport, no en la pista: una máscara sobre el
   elemento animado se desplazaría con él. */
.dm-insurers-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.dm-insurers-track {
    display: flex;
    width: max-content;
    /* Las dos variables las escribe el PHP según cuántas compañías haya
       (ver inc/aseguradoras.php): el número de tiras que caben y la duración
       que mantiene la velocidad constante. Los valores por defecto son los de
       once compañías, que es como nació la marquesina. */
    animation: dm-insurers-scroll var(--dm-insurers-dur, 48s) linear infinite;
}

.dm-insurers-set {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4.5vw, 4rem);
    margin: 0;
    padding: 0 clamp(1rem, 2.25vw, 2rem);
    list-style: none;
}

.dm-insurers-set li {
    margin: 0;
    display: flex;
    align-items: center;
}

/* Cada logo enlaza al directorio (solo en ES: la página no existe traducida).
   El enlace no pinta nada, solo amplía el área de pulsación al logo entero. */
.dm-insurers-set a {
    display: flex;
    align-items: center;
    text-decoration: none;
    border: 0;
}

.dm-insurers-set a:focus-visible {
    outline: 2px solid var(--dm-primary);
    outline-offset: 6px;
    border-radius: 4px;
}

/* Gris y atenuados de partida: las nueve marcas llegan con tratamientos muy
   distintos (tres traen fondo corporativo rojo o amarillo) y a todo color la
   franja competía con el hero. Recuperan su color al pasar por encima. */
.dm-insurer-logo {
    display: block;
    width: auto;
    height: 52px;
    /* Tope de seguridad, no medida de trabajo: con las marcas actuales la más
       apaisada (DKV, 4,2:1) mide 218 px a 52 px de alto. Por debajo de eso el
       tope recortaría la altura de un tercio de la fila y rompería la línea. */
    max-width: 220px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.68;
    transition: filter var(--dm-transition), opacity var(--dm-transition);
}

/* Las que no tienen fondo transparente se leen como recuadro: se redondea
   la esquina para que parezca una pastilla y no un recorte. */
.dm-insurer-tile {
    border-radius: 6px;
}

/* Los logotipos cuadrados, a la altura de fila, ocupan un tercio del ancho de
   un apaisado y quedan diminutos: crecen hasta igualar la mancha óptica. */
.dm-insurer-square {
    height: 68px;
}

/* Los logotipos macizos (letra muy negra a todo el alto, como DKV) pesan el
   doble que un apaisado de trazo fino a la misma altura: bajan un quinto. */
.dm-insurer-macizo {
    height: 42px;
}

.dm-insurers-set li:hover .dm-insurer-logo,
.dm-insurers-set li:focus-within .dm-insurer-logo {
    filter: none;
    opacity: 1;
}

/* La marquesina se para al pasar por encima, así que para cuando el visitante
   va a pulsar el logo ya está quieto: no hay que perseguir un blanco móvil. */

.dm-insurers-viewport:hover .dm-insurers-track,
.dm-insurers-viewport:focus-within .dm-insurers-track {
    animation-play-state: paused;
}

/* En táctil (móvil y tableta) la banda también se mueve sola, pero no con la
   animación CSS: la desplaza el script de inc/aseguradoras.php moviendo el
   scroll de la tira, así que el dedo la arrastra de forma nativa, con su
   inercia. Al tocarla se para; al soltarla, retoma sola a los pocos
   segundos. Las tiras duplicadas se quedan: son las que dejan dar la vuelta
   sin salto. Sin imán de desplazamiento, que pelearía con el avance.
   (Hasta 2.39.0 la banda estaba quieta en táctil; cambio pedido el
   27/09/2026.) */
@media (hover: none) and (pointer: coarse) {
    .dm-insurers-viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .dm-insurers-viewport::-webkit-scrollbar {
        display: none;
    }

    .dm-insurers-track {
        animation: none;
        transform: none;
    }
}

/* Tiras iguales: desplazar 1/n de la pista equivale a una tira exacta, y el
   salto al reiniciar cae en un fotograma idéntico. */
@keyframes dm-insurers-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% / var(--dm-insurers-tiras, 4))); }
}

/* Compañía sin logotipo: el nombre compuesto ocupa el sitio del logo, con la
   misma altura de fila y el mismo gris que el resto de la marquesina, para
   que no cante al lado de cuatro logotipos. */
.dm-insurer-texto {
    display: inline-flex;
    align-items: center;
    font-family: var(--dm-font-body, 'Manrope', sans-serif);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--dm-primary);
    white-space: nowrap;
}

.dm-insurer-logo.dm-insurer-texto {
    height: 40px;
    font-size: var(--dm-text-lg);
    opacity: .78;
}

.dm-aseg-img.dm-insurer-texto {
    font-size: var(--dm-text-md);
    max-width: 100%;
}

@media (max-width: 768px) {
    /* El full-bleed de calc(-50vw + 50%) ya sale exacto en móvil (el
       .entry-content va sangrado por el padding del artículo): copiar aquí el
       -1rem de los wp-block-group dejaba la banda 14 px corta por cada lado. */
    .dm-insurers {
        padding: 0 0 2.25rem;
    }

    .dm-insurers-inner {
        padding: 0 1.25rem;
    }

    .dm-insurer-logo {
        height: 40px;
        max-width: 175px;
    }

    .dm-insurer-square {
        height: 52px;
    }

    .dm-insurer-macizo {
        height: 32px;
    }
}

/* Sin animación cuando el sistema la desaconseja: se deja una sola tira,
   desplazable a mano. */
@media (prefers-reduced-motion: reduce) {
    .dm-insurers-track {
        animation: none;
        width: auto;
    }

    .dm-insurers-viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .dm-insurers-set[aria-hidden="true"] {
        display: none;
    }

    .dm-insurers-set {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.75rem;
    }
}

/* ==========================================================================
   DIRECTORIO DE ASEGURADORAS — /conocenos/aseguradoras/
   Shortcode [dermamer_aseguradoras] (inc/aseguradoras.php). Comparte listado
   con la marquesina de la portada, pero aquí los logos van a todo color: en
   la banda son un rumor de fondo y en esta página son el dato.
   ========================================================================== */

.dm-aseg {
    margin: 2rem 0 2.5rem;
}

/* --- Buscador ------------------------------------------------------------ */

.dm-aseg-search {
    margin-bottom: 2rem;
}

.dm-aseg-label {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-sm);
    font-weight: 600;
    color: var(--dm-text);
}

.dm-aseg-field {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 30rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-full);
    transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}

.dm-aseg-field:focus-within {
    border-color: var(--dm-primary);
    box-shadow: 0 0 0 3px rgba(77, 93, 106, 0.15);
}

.dm-aseg-icon {
    flex: none;
    margin-left: 1.1rem;
    color: var(--dm-text-light);
}

/* Sin fondo ni borde propios: el marco es .dm-aseg-field, que así puede
   reaccionar al foco del input sin anillos concéntricos. */
.dm-aseg-input,
.dm-aseg-input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.85rem 0.9rem;
    border: 0;
    background: transparent;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-base);
    color: var(--dm-text);
}

.dm-aseg-input:focus {
    outline: none;
    background: transparent;
    border: 0;
}

.dm-aseg-input::-webkit-search-cancel-button {
    display: none;
}

.dm-aseg-clear {
    flex: none;
    margin-right: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: var(--dm-radius-full);
    background: transparent;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-xs);
    color: var(--dm-text-secondary);
    cursor: pointer;
}

.dm-aseg-clear:hover,
.dm-aseg-clear:focus-visible {
    background: var(--dm-bg);
    color: var(--dm-text);
}

/* El aviso no se distingue solo por el color: lo que dice ya diferencia el
   caso (WCAG 1.4.1). El filete es refuerzo, no el mensaje. */
.dm-aseg-status:empty {
    display: none;
}

.dm-aseg-status {
    max-width: 44rem;
    margin: 1rem 0 0;
    padding: 0.85rem 1.1rem;
    border-left: 3px solid var(--dm-border);
    background: var(--dm-bg);
    border-radius: 0 var(--dm-radius-sm) var(--dm-radius-sm) 0;
    font-size: var(--dm-text-base);
    line-height: 1.6;
    color: var(--dm-text);
}

.dm-aseg-status.is-si  { border-left-color: var(--dm-primary); }
.dm-aseg-status.is-no  { border-left-color: var(--dm-warm-light); }

/* --- Rejilla de compañías ------------------------------------------------ */

/* Cuatro columnas reparten las once en 4+4+3, que es el reparto menos
   descompensado; con auto-fill quedaba una tarjeta sola en la última fila. */
.dm-aseg-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-aseg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 9.5rem;
    margin: 0;
    padding: 1.5rem 1.25rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-radius: var(--dm-radius-md);
    transition: border-color var(--dm-transition), box-shadow var(--dm-transition), transform var(--dm-transition);
}

.dm-aseg-card:hover {
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow-md);
    transform: translateY(-2px);
}

/* Caja de altura fija para que el nombre caiga a la misma cota en las once
   tarjetas, sea el logotipo apaisado o cuadrado. */
.dm-aseg-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
}

.dm-aseg-img {
    display: block;
    width: auto;
    height: auto;
    max-height: 3rem;
    max-width: 100%;
    object-fit: contain;
}

/* Un cuadrado a la altura de un apaisado pesa la mitad en pantalla: sube a
   los 4 rem de la caja para que la fila no se descompense. */

/* Las marcas que traen fondo corporativo propio son cuadradas y con la altura
   de un apaisado se leen diminutas; además se redondean para que parezcan
   pastilla y no recorte. */
.dm-aseg-img.dm-insurer-square {
    max-height: 4rem;
}

.dm-aseg-img.dm-insurer-macizo {
    max-height: 2.4rem;
}

.dm-aseg-img.dm-insurer-tile {
    border-radius: 6px;
}

.dm-aseg-nombre {
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-sm);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: var(--dm-text-secondary);
}

.dm-aseg-card[hidden] {
    display: none;
}

@media (max-width: 900px) {
    .dm-aseg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .dm-aseg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .dm-aseg-card {
        min-height: 8.5rem;
        padding: 1.25rem 0.9rem;
    }

    .dm-aseg-field {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-aseg-card {
        transition: none;
    }

    .dm-aseg-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   GANCHOS DE SECCIÓN (.dm-railnav) — inc/nav-seccion.php
   Se AÑADEN al menú de cabecera, no lo sustituyen.
   Un solo marcado con dos presentaciones:
   · por defecto, bloque al final del contenido (móvil y portátiles estrechos);
   · desde 1440 px, los dos ganchos saltan a los márgenes que deja la columna
     central y se quedan fijos mientras se baja por la página.
   ========================================================================== */

.dm-railnav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--dm-border-light);
}

.dm-rail-caption {
    margin: 0 0 0.9rem;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-xs); /* 12px: mínimo legible en móvil */
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dm-text-secondary);
}

.dm-rail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-rail-list li {
    margin: 0;
}

/* 0.9rem arriba y abajo + 22 px de icono = 60 px de alto: por encima de los
   44 px que pide WCAG 2.5.5, que es deuda abierta en otras partes del tema. */
.dm-rail-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.9rem 1rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-radius: var(--dm-radius-md);
    color: var(--dm-text);
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-sm);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color var(--dm-transition), box-shadow var(--dm-transition),
                transform var(--dm-transition), background-color var(--dm-transition);
}

.dm-rail-link:hover,
.dm-rail-link:focus-visible {
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow-md);
    transform: translateY(-2px);
    color: var(--dm-text);
}

.dm-rail-ico {
    flex: none;
    color: var(--dm-primary);
}

.dm-rail-txt {
    min-width: 0;
}

/* La cita es la única acción rellena de las dos columnas: el resto son
   desvíos laterales y esta es la que cierra. */
.dm-rail-primary {
    background: var(--dm-accent);
    border-color: var(--dm-accent);
    color: var(--dm-white);
}

.dm-rail-primary:hover,
.dm-rail-primary:focus-visible {
    background: var(--dm-warm-dark);
    border-color: var(--dm-warm-dark);
    color: var(--dm-white);
}

.dm-rail-primary .dm-rail-ico {
    color: currentColor;
}

/* WhatsApp con su verde: en gris se perdía entre los demás y es la vía que más
   se usa. El icono va en un verde oscurecido (#0F7A3D, 4,9:1 sobre el marfil)
   en vez del #25D366 de marca, que sobre fondo claro se queda en 2,2:1; el
   verde de marca sí aparece en el fondo de la pastilla, donde no tiene que
   leerse nada encima. */
.dm-rail-wa .dm-rail-ico {
    color: #0F7A3D;
}

.dm-rail-wa {
    background: rgba(37, 211, 102, 0.10);
    border-color: rgba(37, 211, 102, 0.38);
}

.dm-rail-wa:hover,
.dm-rail-wa:focus-visible {
    background: rgba(37, 211, 102, 0.20);
    border-color: rgba(37, 211, 102, 0.6);
}

@media (max-width: 520px) {
    .dm-rail-list {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Desde 1440 px: a los márgenes.
   La columna de contenido mide 1120 px, así que el margen libre es
   (100vw - 1120px) / 2 = 160 px a 1440. Con un gancho de 132 px y 20 px de
   aire caben justos; por debajo de ese ancho no caben y por eso el bloque
   inferior es el modo por defecto y no un parche para móvil.
   La altura mínima evita que los ganchos aparezcan en pantallas apaisadas
   bajas, donde taparían el contenido en vez de acompañarlo.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Desde 1440 px: a los márgenes.
   La columna de contenido mide 1120 px, así que el margen libre es
   (100vw - 1120px) / 2 = 160 px a 1440. Con un gancho de 132 px y 20 px de
   aire caben justos; por debajo de ese ancho no caben, y por eso el bloque
   al final del contenido es el modo por defecto y no un parche para móvil.
   La altura mínima los quita en pantallas apaisadas bajas, donde taparían el
   contenido en vez de acompañarlo.

   Tres estados: fantasma fuera del tramo de las secciones, claros dentro, y
   con panel al pasar el puntero. El .dm-rail exterior es una banda alta que
   no pinta nada: existe para que el gancho reaccione al acercar el ratón por
   su zona, sin obligar a acertarle al enlace.
   -------------------------------------------------------------------------- */
@media (min-width: 1460px) and (min-height: 620px) {
    .dm-railnav {
        display: contents;   /* cada gancho se posiciona por su cuenta */
    }

    .dm-rail {
        position: fixed;
        top: 16%;
        bottom: 16%;
        width: 132px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Por debajo del clúster flotante (998) y de la cabecera pegajosa:
           acompañan la lectura, no compiten con ella. */
        z-index: 90;
        transition: opacity 0.35s ease;
    }

    /* Anclados a la caja del sitio (1200 px), no a la columna de texto
       (1120): pegados a la columna se montaban sobre el fondo de esa caja, que
       es ligeramente más oscuro que el del margen. 24 px de aire por fuera.
       Por eso el corte subió de 1440 a 1540 (31/08); el 27/09 bajó a 1460 con un gancho más estrecho (ver más abajo). Por debajo no hay margen donde
       ponerlos sin pisarla, y ahí manda el bloque del final del contenido. */
    .dm-rail-info  { left:  calc(50% - 600px - 156px); }
    .dm-rail-cta   { right: calc(50% - 600px - 156px); }

    .dm-rail-inner {
        padding: 0.85rem 0.5rem;
        border: 1px solid transparent;
        border-radius: var(--dm-radius-lg);
        transition: background-color var(--dm-transition), border-color var(--dm-transition),
                    box-shadow var(--dm-transition), transform var(--dm-transition);
    }

    /* Fuera del tramo que ocupan las secciones no se van del todo: se quedan
       insinuados, y basta acercar el ratón para recuperarlos. */
    .dm-rails-ghost .dm-rail {
        opacity: 0.3;
    }

    /* El puntero por la banda manda sobre el scroll: si lo buscas, aparece. */
    .dm-rail:hover,
    .dm-rail:focus-within,
    .dm-rails-ghost .dm-rail:hover,
    .dm-rails-ghost .dm-rail:focus-within {
        opacity: 1;
    }

    .dm-rail:hover .dm-rail-inner,
    .dm-rail:focus-within .dm-rail-inner {
        background: var(--dm-white);
        border-color: var(--dm-border-light);
        box-shadow: var(--dm-shadow-lg);
        transform: scale(1.035);
    }

    .dm-rail-list {
        /* minmax(0, …): con 1fr la columna crecía hasta la etiqueta más
           larga (150 px en inglés) y se salía del gancho de 134 (1920 px,
           barrido del 15/09/2026). */
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    /* En columna estrecha el icono va encima de la etiqueta, no al lado. */
    .dm-rail-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.8rem 0.85rem;
        font-size: var(--dm-text-xs);
        line-height: 1.3;
        background: transparent;
        border-color: transparent;
    }

    .dm-rail-link:hover,
    .dm-rail-link:focus-visible {
        background: var(--dm-bg);
        border-color: var(--dm-border-light);
        box-shadow: none;
        transform: none;
    }

    /* El resto de enlaces van sin fondo en la columna estrecha; WhatsApp
       conserva el suyo, que es lo que lo hace distinguible de un vistazo. */
    .dm-rail-wa,
    .dm-rail-wa:hover,
    .dm-rail-wa:focus-visible {
        background: rgba(37, 211, 102, 0.12);
        border-color: rgba(37, 211, 102, 0.4);
    }

    .dm-rail-wa:hover,
    .dm-rail-wa:focus-visible {
        background: rgba(37, 211, 102, 0.22);
    }

    .dm-rail-oscuro .dm-rail-wa {
        background: rgba(37, 211, 102, 0.2);
        border-color: rgba(37, 211, 102, 0.5);
    }

    .dm-rail-oscuro .dm-rail-wa .dm-rail-ico {
        color: #4AE07F;
    }

    .dm-rail-primary,
    .dm-rail-primary:hover,
    .dm-rail-primary:focus-visible {
        background: var(--dm-accent);
        border-color: var(--dm-accent);
        color: var(--dm-white);
    }

    .dm-rail-primary:hover,
    .dm-rail-primary:focus-visible {
        background: var(--dm-warm-dark);
        border-color: var(--dm-warm-dark);
    }

    .dm-rail-caption {
        font-size: var(--dm-text-2xs);
        letter-spacing: 0.11em;
        margin-bottom: 0.7rem;
        padding-left: 0.85rem;
    }

    /* ----------------------------------------------------------------------
       Sobre fondo oscuro. La clase la pone el JS midiendo el color realmente
       pintado bajo el gancho, no por una lista de selectores: la banda oscura
       de estas páginas es un `dm-section` con el color en línea y el pie no
       comparte clase con ella.
       ---------------------------------------------------------------------- */
    .dm-rail-oscuro .dm-rail-caption {
        color: rgba(246, 241, 232, 0.72);
    }

    .dm-rail-oscuro .dm-rail-link {
        color: var(--dm-text-on-dark);
    }

    .dm-rail-oscuro .dm-rail-ico {
        color: var(--dm-link-on-dark);   /* champán, 5,1:1 medido sobre banda oscura */
    }

    .dm-rail-oscuro .dm-rail-link:hover,
    .dm-rail-oscuro .dm-rail-link:focus-visible {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(246, 241, 232, 0.4);
        color: var(--dm-white);
    }

    /* El nogal del CTA sobre el charcoal del pie es marrón sobre marrón: la
       cita pasa a marfil con tinta oscura, que es el par de más contraste que
       tiene la marca. */
    .dm-rail-oscuro .dm-rail-primary,
    .dm-rail-oscuro .dm-rail-primary:hover,
    .dm-rail-oscuro .dm-rail-primary:focus-visible {
        background: var(--dm-bg);
        border-color: var(--dm-bg);
        color: var(--dm-text);
    }

    .dm-rail-oscuro .dm-rail-primary .dm-rail-ico {
        color: var(--dm-accent);
    }

    .dm-rail-oscuro:hover .dm-rail-inner,
    .dm-rail-oscuro:focus-within .dm-rail-inner {
        background: rgba(38, 46, 54, 0.82);
        border-color: rgba(246, 241, 232, 0.22);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    }
}

/* Entre 1460 y 1539 px (27/09/2026). Hasta entonces el corte estaba en 1540
   y los portátiles más comunes se quedaban justo debajo, con los ganchos al
   final de la página: 1536 (Full HD con escalado al 125 %), 1512 (MacBook
   Pro 14") y 1470 (MacBook Air). Aquí el gancho adelgaza a 120 px y se
   arrima al borde de la ventana, con 8 px de mínimo, sin llegar a la caja
   del sitio. */
@media (min-width: 1460px) and (max-width: 1539px) and (min-height: 620px) {
    .dm-rail {
        width: 120px;
    }

    .dm-rail-info { left:  max(8px, calc(50% - 600px - 132px)); }
    .dm-rail-cta  { right: max(8px, calc(50% - 600px - 132px)); }

    .dm-rail-link {
        padding: 0.75rem 0.7rem;
        font-size: var(--dm-text-xs);
    }

    .dm-rail-caption {
        padding-left: 0.7rem;
    }
}

/* Desde 1680 px sobra margen: los ganchos respiran sin acercarse al texto. */
@media (min-width: 1760px) and (min-height: 620px) {
    .dm-rail {
        width: 152px;
    }

    .dm-rail-info { left:  calc(50% - 600px - 184px); }
    .dm-rail-cta  { right: calc(50% - 600px - 184px); }

    .dm-rail-link {
        font-size: var(--dm-text-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-rail,
    .dm-rail-inner,
    .dm-rail-link {
        transition: none;
    }

    .dm-rail-link:hover,
    .dm-rail-link:focus-visible {
        transform: none;
    }

    .dm-rail:hover .dm-rail-inner,
    .dm-rail:focus-within .dm-rail-inner {
        transform: none;
    }
}

/* ==========================================================================
   MATRIZ DE LOS HUBS L1 (.dm-matriz) — inc/matriz.php
   Sustituye a la rejilla de bloques `cover` escrita a mano, que se había
   quedado corta. Mismo aspecto: foto, velo oscuro y titular centrado; el velo
   es un elemento propio y no la capa del bloque cover, porque el marcado ya no
   sale del editor.
   ========================================================================== */

.dm-matriz {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-matriz li {
    margin: 0;
}

.dm-matriz-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    overflow: hidden;
    border-radius: var(--dm-radius-md);
    box-shadow: var(--dm-shadow-sm);
    text-decoration: none;
    transition: transform var(--dm-transition), box-shadow var(--dm-transition);
}

.dm-matriz-card:hover,
.dm-matriz-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--dm-shadow-lg);
}

.dm-matriz-card:focus-visible {
    outline: 2px solid var(--dm-primary);
    outline-offset: 3px;
}

.dm-matriz-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dm-matriz-card:hover img {
    transform: scale(1.05);
}

/* Mismo velo que tenía el bloque cover: #262E36 al 60 %. */
.dm-matriz-velo {
    position: absolute;
    inset: 0;
    background: rgba(38, 46, 54, 0.6);
}

/* Las once L2 que aún no tienen foto propia (issue #4) llevan el degradado de
   marca, igual que su propia cabecera. Antes que repetir la foto de otra. */
.dm-matriz-sin-foto {
    background: linear-gradient(135deg, var(--dm-primary-deep) 0%, var(--dm-primary-dark) 45%, var(--dm-primary) 100%);
}

.dm-matriz-sin-foto .dm-matriz-velo {
    background: rgba(38, 46, 54, 0.28);
}

.dm-matriz-titulo {
    position: relative;
    margin: 0;
    padding: 1rem 1.15rem;
    text-align: center;
    color: var(--dm-white);
    font-family: var(--dm-font-heading);
    font-size: var(--dm-text-xl);
    font-weight: 400;
    line-height: 1.25;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 480px) {
    .dm-matriz {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dm-matriz-card {
        min-height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-matriz-card,
    .dm-matriz-card img {
        transition: none;
    }

    .dm-matriz-card:hover {
        transform: none;
    }

    .dm-matriz-card:hover img {
        transform: none;
    }
}

/* ==========================================================================
   TARJETAS DE LOS HUBS DE SECCIÓN (.dm-hub) — inc/matriz.php
   «Conócenos» / «About Us». Sustituyen a cinco cajas blancas con un enlace de
   texto al pie. Lo que distingue una tarjeta de otra es el icono —el mismo
   juego que usan los ganchos laterales—, porque aquí no hay foto que poner.
   ========================================================================== */

.dm-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.dm-hub li {
    margin: 0;
}

/* Toda la tarjeta es el enlace: en móvil, apuntar a un enlace de texto de
   14 px al pie de la caja es innecesariamente fino. */
.dm-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.9rem 1.6rem 1.6rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-radius: var(--dm-radius-lg);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--dm-transition), box-shadow var(--dm-transition),
                border-color var(--dm-transition);
}

/* Filete superior que se despliega al pasar por encima: da el acento de marca
   sin pintar de color una tarjeta que debe seguir siendo sobria. */
.dm-hub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dm-primary), var(--dm-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.dm-hub-card:hover,
.dm-hub-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow-lg);
}

.dm-hub-card:hover::before,
.dm-hub-card:focus-visible::before {
    transform: scaleX(1);
}

.dm-hub-card:focus-visible {
    outline: 2px solid var(--dm-primary);
    outline-offset: 3px;
}

.dm-hub-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.15rem;
    border-radius: var(--dm-radius-full);
    background: var(--dm-bg);
    color: var(--dm-primary);
    transition: background-color var(--dm-transition), color var(--dm-transition);
}

.dm-hub-card:hover .dm-hub-ico,
.dm-hub-card:focus-visible .dm-hub-ico {
    background: var(--dm-primary);
    color: var(--dm-white);
}

.dm-hub-titulo {
    margin: 0 0 0.5rem;
    font-family: var(--dm-font-heading);
    font-size: var(--dm-text-xl);
    font-weight: 400;
    line-height: 1.25;
    color: var(--dm-text);
}

.dm-hub-desc {
    margin: 0 0 1.35rem;
    font-size: var(--dm-text-base);
    line-height: 1.6;
    color: var(--dm-text-secondary);
}

/* `margin-top:auto` alinea la llamada al pie en las cinco tarjetas aunque las
   descripciones tengan distinto número de líneas. */
.dm-hub-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-sm);
    font-weight: 600;
    color: var(--dm-primary);
}

.dm-hub-flecha {
    transition: transform var(--dm-transition);
}

.dm-hub-card:hover .dm-hub-flecha,
.dm-hub-card:focus-visible .dm-hub-flecha {
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .dm-hub {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2rem;
    }

    .dm-hub-card {
        padding: 1.5rem 1.35rem 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-hub-card,
    .dm-hub-card::before,
    .dm-hub-ico,
    .dm-hub-flecha {
        transition: none;
    }

    .dm-hub-card:hover {
        transform: none;
    }

    .dm-hub-card:hover .dm-hub-flecha {
        transform: none;
    }

    .dm-hub-card::before {
        transform: scaleX(1);
    }
}

/* ==========================================================================
   PULIDO VISUAL (rama pulido-visual, sep. 2026)
   ========================================================================== */

/* --- Hero de portada: el titular baja al tercio inferior -------------------
   Con el texto centrado en vertical, «Dermatólogos en Valencia» caía sobre la
   cara del médico del centro. Anclado abajo cae sobre los uniformes oscuros:
   las caras quedan libres y el contraste sube. Solo en escritorio: en móvil la
   receta ya pone la foto abajo y el titular arriba. */
@media (min-width: 769px) {
    /* Medido antes de tocar nada: el hero medía 769 px y su contenido, con
       los paddings, 769 px. `min-height: 85vh` era exactamente la altura del
       texto, así que anclar abajo no movía un píxel (el H1 seguía a 200 px).
       La holgura hay que crearla: hero a pantalla completa y sin el padding
       inferior del contenedor, y ENTONCES el flex-end tiene dónde empujar. A
       1440×900 el titular baja de 200 a ~370 px: sobre los uniformes, no
       sobre la cara del médico del centro. */
    .dermamer-home .dm-hero {
        min-height: 100vh;
        /* El bloque trae padding-bottom:120px inline; con 56 px el texto baja
           otros 64 y el velo de 38 px sigue cabiendo debajo de los botones. */
        padding-bottom: 56px !important;
    }

    .dermamer-home .dm-hero > .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 0;
    }
}

/* --- Heros interiores: titular centrado, abajo, con velo por abajo ---
   Decisión del 14/09/2026: todos los títulos de la web van centrados. El H1
   se queda en la franja baja del hero (donde el velo es más denso y la foto
   respira arriba), pero centrado en el ancho. Antes iba abajo a la izquierda
   porque centrado cruzaba la cara de la modelo en algunos pilares: las
   láminas de esos pilares están ancladas abajo, así que el titular cae sobre
   la zona oscura. Va después de las reglas por page-id y con más
   especificidad, así que manda sobre su `justify-content: center`. */
.page:not(.home) .entry-header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    padding-bottom: 2.75rem;
}

.page:not(.home) .entry-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(38, 46, 54, 0.55) 0%, rgba(38, 46, 54, 0) 60%);
    pointer-events: none;
}

.page:not(.home) .entry-header h1 {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* En los pilares la prosa corre a 46rem (la medida editorial de
   .dm-review-line y el índice): el H1 se alinea con ESA columna, no con la
   caja de 1120, o queda colgando a la izquierda del texto. */
.page:not(.home).dm-pillar .entry-header h1 {
    /* Con las mismas clases que la regla general más .dm-pillar: (0,4,1)
       frente a (0,3,1). Con menos peso no ganaba y el H1 seguía a 1120. */
    max-width: 46rem;
    padding: 0;
}

/* --- Detalles ------------------------------------------------------------- */

/* Los precios de la tabla de tarifas alinean sus cifras. */
.entry-content table {
    font-variant-numeric: tabular-nums;
}

/* Selección de texto en crema lino, no en el azul del sistema. */
::selection {
    background: var(--dm-accent-light);
    color: var(--dm-text);
}

/* Filete corto en nogal bajo los titulares centrados de los hubs, el mismo
   gesto que llevan las tarjetas de Conócenos. */
.dm-pagina-dermatologia .entry-content h2.has-text-align-center::after,
.dm-pagina-medicina-capilar .entry-content h2.has-text-align-center::after,
.dm-pagina-medicina-estetica-laser .entry-content h2.has-text-align-center::after,
.dm-pagina-dermatology .entry-content h2.has-text-align-center::after,
.dm-pagina-hair-medicine .entry-content h2.has-text-align-center::after,
.dm-pagina-aesthetic-laser .entry-content h2.has-text-align-center::after {
    content: '';
    display: block;
    width: 3rem;
    height: 2px;
    margin: 0.85rem auto 0;
    background: var(--dm-accent);
    border-radius: 1px;
}

/* ==========================================================================
   BANNER DE COOKIES (Complianz) — a la paleta de marca (ADR-015)
   Complianz declara sus colores como variables en :root desde un CSS
   generado en uploads/ (azul #1E73BE por defecto, ajeno a la marca). Se
   redefinen sobre el propio banner, que gana a lo heredado de :root sea cual
   sea el orden de carga: aceptar en pizarra, denegar y preferencias en
   marfil con filete arena, enlaces en pizarra, tipografía del sitio.
   ========================================================================== */
.cmplz-cookiebanner {
    --cmplz_banner_background_color: var(--dm-white);
    --cmplz_banner_border_color: var(--dm-border-light);
    --cmplz_banner_border_radius: var(--dm-radius-lg);
    --cmplz_text_color: var(--dm-text);
    --cmplz_hyperlink_color: var(--dm-primary);
    --cmplz_button_accept_background_color: var(--dm-primary);
    --cmplz_button_accept_border_color: var(--dm-primary);
    --cmplz_button_accept_text_color: var(--dm-white);
    --cmplz_button_deny_background_color: var(--dm-bg);
    --cmplz_button_deny_border_color: var(--dm-border);
    --cmplz_button_deny_text_color: var(--dm-text);
    --cmplz_button_settings_background_color: var(--dm-bg);
    --cmplz_button_settings_border_color: var(--dm-border);
    --cmplz_button_settings_text_color: var(--dm-text);
    --cmplz_button_border_radius: var(--dm-radius-full);
    font-family: var(--dm-font-body);
    box-shadow: var(--dm-shadow-lg);
}
.cmplz-cookiebanner .cmplz-title { font-family: var(--dm-font-heading); font-weight: 400; }
.cmplz-cookiebanner .cmplz-btn { font-family: var(--dm-font-body); font-weight: 600; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background-color: var(--dm-primary-dark); border-color: var(--dm-primary-dark); }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover { background-color: var(--dm-bg-alt); }

/* Pantallas bajas y anchas (móvil apaisado, portátil al 200 % de zoom):
   por debajo de 768 px Complianz apila los tres botones y el banner tapaba
   el 91 % de una pantalla de 640×400 (medido 15/09/2026). En fila, con el
   mismo peso visual para Aceptar y Denegar. Clase doble para ganar a su
   regla de 768 px sin depender del orden de carga. */
@media (max-height: 480px) and (min-width: 560px) {
    .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons {
        flex-direction: row;
    }
    .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ==========================================================================
   MÓVIL — áreas de toque (WCAG 2.5.8, 24×24 mínimo; objetivo 44 px)
   Los enlaces del pie medían 19 px de alto: el `line-height: 2.2` del widget
   los separa, pero la caja pulsable era solo el texto. Padding vertical con
   margen negativo equivalente: misma composición, el doble de área de toque.
   La casilla de consentimiento de WPForms pasa de 16 a 22 px.
   ========================================================================== */
.footer-widgets .widget_custom_html li a,
.footer-widgets .widget_custom_html p a,
.footer-bar .widget_custom_html a {
    display: inline-block;
    padding: 0.6rem 0;
    margin: -0.6rem 0;
}
div.wpforms-container-full .wpforms-form input[type="checkbox"],
div.wpforms-container-full .wpforms-form input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    flex: 0 0 22px;
}

/* ==========================================================================
   BARRIDO DE RESPONSIVIDAD — 15/09/2026
   90 páginas (ES y EN) a 15 tamaños, de 320 px a 1920 y dos apaisados
   (844×390 y 640×400, el 200 % de zoom de un portátil), midiendo geometría
   con puppeteer. Cada regla dice qué se midió.
   ========================================================================== */

/* Tablas de contenido (política de cookies): la tabla de cinco columnas
   medía 658 px y se salía de la pantalla hasta 640 px de ancho. Desplazable
   dentro de su figura; las tablas que caben no cambian. */
.entry-content figure.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Áreas de toque de enlaces sueltos (no dentro de una frase): medían entre
   19 y 23 px de alto, por debajo de los 24 de WCAG 2.5.8. Relleno vertical
   con margen negativo equivalente: el área crece y la maqueta no se mueve.
   Los de correo y teléfono, solo si no llevan clase: con clase son botones
   propios (el «Llamar» de los ganchos laterales perdía su caja). */
.dm-byline-name,
.dm-byline-cta,
.dm-local .dm-local-nap a,
.dm-team-more a,
.dm-booking-link a,
.dm-doctor-card .dm-doc-perfil a,
.entry-content .dm-tarifas-aviso a,
.entry-content .dm-card p > a[href^="mailto:"]:not([class]),
.entry-content .dm-card p > a[href^="tel:"]:not([class]),
.entry-content li > a[href^="mailto:"]:only-child:not([class]),
.entry-content li > a[href^="tel:"]:only-child:not([class]),
.entry-content p > a[href^="mailto:"]:only-child:not([class]),
.entry-content p > a[href^="tel:"]:only-child:not([class]) {
    display: inline-block;
    padding-block: 0.5rem;
    margin-block: -0.5rem;
}

/* El enlace del logo medía 22 px de alto (la línea de texto, no la imagen de
   48): en bloque, ocupa lo que la imagen. */
.site-header .site-logo a {
    display: block;
    line-height: 0;
}

/* Casilla de consentimiento de los formularios: 22 → 24 px (WCAG 2.5.8). */
div.wpforms-container-full .wpforms-form input[type="checkbox"],
div.wpforms-container-full .wpforms-form input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex: 0 0 24px;
}

/* Puntos del carrusel de casos (tricoscopia): 8 px de botón. El punto se
   sigue viendo de 8 px, pero el botón que lo lleva mide 24. */
.dm-clinic-nav {
    gap: 0;
}
.dm-clinic-nav button,
.dm-clinic-nav button[aria-current="true"] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transform: none;
}
.dm-clinic-nav button::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dm-border, #E4DED3);
    transition: background 0.2s ease, transform 0.2s ease;
}
.dm-clinic-nav button[aria-current="true"]::before {
    background: var(--dm-accent-deep, #6A5A4F);
    transform: scale(1.5);
}

/* Texto mínimo de 12 px: rótulos de los ganchos en los márgenes (9,9 px) y
   etiquetas del hero de las fichas de médico (11,5 px). */
.dm-rail-caption {
    font-size: var(--dm-text-xs);
}
.dm-bio-fact strong {
    font-size: var(--dm-text-xs);
}

/* Titulares de página muy largos en pantallas de 320–380 px: el de «Láser
   vascular e IPL» ocupaba cinco líneas a 28,8 px. */
@media (max-width: 380px) {
    .page:not(.home) .entry-header h1 {
        font-size: 1.6rem;
    }
}

/* Final de página con el dock (≤1180 px): los botones flotantes tapaban el
   copyright y los enlaces legales al llegar abajo. Aire bajo el pie con la
   altura del dock. */
@media (max-width: 1180px) {
    .site-footer {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.75rem);
    }
}

/* Volver arriba y dock en pantallas estrechas: en inglés, con «Book an
   appointment», el dock mide 300 px a 320 de ancho y pisaba el botón de
   volver arriba. Sube encima de la fila del dock. */
@media (max-width: 420px) {
    .dm-up-corner {
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 60px);
    }
}

/* Pantallas bajas y apaisadas (móvil girado, 200 % de zoom): cabecera fija
   de 101 px + dock = 31 % de la pantalla. Cabecera compacta. */
@media (max-height: 480px) and (orientation: landscape) {
    .site-header .inside-header {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .site-header .site-logo img,
    .site-header .custom-logo {
        width: 87px;
        height: 36px;
    }
}

/* Aviso de contenido bloqueado de Complianz (el mapa de la portada antes de
   aceptar cookies de marketing): salía como una caja gris translúcida sobre
   un marco blanco, ajena a la marca. Mismo lenguaje que el banner. */
.cmplz-blocked-content-notice {
    background-color: rgba(38, 46, 54, 0.9) !important;
    color: var(--dm-white) !important;
    font-family: var(--dm-font-body) !important;
    font-size: var(--dm-text-sm) !important;
    line-height: 1.5 !important;
    padding: 0.9rem 1.15rem !important;
    border-radius: var(--dm-radius-md);
    box-shadow: var(--dm-shadow-md);
    max-width: min(320px, 88%) !important;
}
.cmplz-placeholder-parent .cmplz-placeholder-element {
    background-color: var(--dm-bg-alt);
    background-size: cover;
    background-position: center;
    border-radius: var(--dm-radius-md);
}

/* Relleno doble en móvil: GeneratePress da 30 px laterales a TODO contenedor
   interior de grupo, que se suman a los 30 del contenido. En «Pedir cita» las
   tarjetas quedaban en 270 px de una pantalla de 390. Los grupos sin fondo
   son solo envoltorios: sin relleno lateral. Las bandas con fondo (a sangre)
   y las tarjetas lo conservan; la portada, cuyos grupos van a sangre, no se
   toca. */
@media (max-width: 600px) {
    body:not(.home) .site-main .wp-block-group:not(.has-background):not(.dm-card) > .wp-block-group__inner-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Índice «En esta página»: las píldoras de más de una línea (títulos largos
   de Tarifas) salían como óvalos. Radio acotado: una línea sigue siendo
   píldora, varias líneas son un rectángulo redondeado. */
.dm-toc a {
    border-radius: 1.1rem;
}

/* Páginas interiores que empiezan con un párrafo (Tarifas, Fees): el texto
   quedaba pegado al borde inferior de la cabecera. */
.page:not(.home) .entry-content > p:first-child:not(.dm-review-line) {
    margin-top: 2rem;
}

/* Medida de línea en escritorio: los párrafos de las secciones de portada,
   hubs, la clínica y pedir cita llegaban a 118–142 caracteres por línea a
   1280 px. Tope de ~80; los centrados se mantienen centrados. */
.entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > p {
    max-width: 48rem;
}
.entry-content .wp-block-group.dm-section > .wp-block-group__inner-container > p.has-text-align-center {
    margin-left: auto;
    margin-right: auto;
}
.dm-med-tl-desc,
.dm-med-list li {
    max-width: 44rem;
}

/* Titulares con palabras largas en pantallas de 320–360 px: «Contacta con
   dermaMER Instituto Médico Dermatológico» se salía 59 px de la pantalla.
   Corte de palabra solo como último recurso, cuando una palabra no cabe ni
   sola en la línea. Sin partición silábica (23/09/2026): hyphens:auto partía
   «Dermató-logos» en el hero de algunos móviles aunque la palabra cupiera
   con un poco más de ancho; lo que se arregla es el ancho, no la palabra. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-header h1 {
    overflow-wrap: break-word;
}

/* Botones del hero en pantallas estrechas: en inglés «Book an appointment»
   compartía fila con «About us» y se partía en tres líneas a 320 px. */
.dm-hero .wp-block-buttons {
    flex-wrap: wrap;
}

/* Nota del bloque «Quién te va a atender»: a 1280 px llegaba a 126
   caracteres por línea. */
.dm-cita-equipo-nota {
    max-width: 48rem;
}


/* ==========================================================================
   ACCESIBILIDAD — remates de la auditoría WCAG AA (issue #8, 19/09/2026)
   ========================================================================== */

/* El botón de enviar de WPForms medía 41 px de alto: por debajo del objetivo
   táctil, y es el último paso de una solicitud de cita. */
.wpforms-container .wpforms-submit {
    min-height: 44px;
}

/* Movimiento reducido: red de seguridad para todo lo que no esté cubierto
   por su propio bloque —animaciones de aparición, marquesina, transformaciones
   de tarjetas y botones— (WCAG 2.3.3). No se apaga el cambio de color ni el
   contorno de foco, que son señales, no movimiento: se limita la duración a un
   valor imperceptible en lugar de anular la propiedad, y se deja quieto el
   desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Las apariciones se quedan visibles, no a medio camino: sin esto, un
       bloque que nace con opacity 0 y sube con transform se queda invisible
       cuando se apaga su animación. */
    .dm-reveal,
    .dm-reveal.dm-in {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==========================================================================
   PIE EN MÓVIL — compactación (issue #30, 19/09/2026)
   Medido a 390 px: el pie ocupaba 1325 px, un 13 % de la página. El reparto
   era 854 de widgets y 331 de la barra de copyright, que es UNA línea de
   texto. Se recorta el aire, no la información: siguen los tres widgets, sus
   enlaces con su área de toque de 44 px (el padding vertical no se toca, solo
   el interlineado que los separa) y los sellos, que bajan de tamaño porque
   son un aval, no un argumento.
   ========================================================================== */
@media (max-width: 768px) {
    .footer-widgets {
        padding: 2rem 0 1.25rem;
    }

    /* El aire de los widgets no está en .widget sino en los contenedores de
       GeneratePress: 30 px arriba y abajo en el grid, y 40 entre widget y
       widget. Sumados al padding de la sección daban 110 px de vacío antes
       del primer titular. */
    .footer-widgets .footer-widgets-container {
        padding: 0 20px;
    }

    .footer-widgets .inside-footer-widgets > div {
        margin-bottom: 1.5rem;
    }

    .footer-widgets .inside-footer-widgets > div:last-child {
        margin-bottom: 0;
    }

    .footer-widgets .widget-title {
        font-size: var(--dm-text-base);
        margin-bottom: 0.6rem;
    }

    /* El interlineado 2.2 lo trae el widget en línea, lo edita el cliente y
       separa de más en una columna estrecha: se baja aquí con !important
       porque un estilo en línea no se gana de otra manera. El área de toque
       la sigue dando el padding de más abajo. */
    .footer-widgets .widget_custom_html li,
    .footer-widgets .widget_custom_html p {
        line-height: 1.9 !important;
        margin-bottom: 0;
    }

    .site-info {
        padding: 0.75rem 0 1rem;
        font-size: var(--dm-text-xs);
        line-height: 1.5;
    }

    /* GP mete 20/30 px dentro del contenedor de la barra, encima del padding
       de la propia barra: dos aires sumados para una línea de texto. */
    .site-info .inside-site-info {
        padding: 0.5rem 1.25rem;
    }

    /* El aviso de las imágenes generadas con IA, en su línea: pegado al
       copyright hacía un párrafo de cuatro líneas. */
    .dm-pie-ia {
        display: block;
        margin-top: 0.3rem;
        opacity: 0.9;
    }

    .dm-seals {
        padding: 1rem 1rem 0.25rem;
        gap: 0.75rem 1rem;
    }

    .dm-seals > div {
        width: 104px;
    }
}


/* ==========================================================================
   ESCALA TIPOGRÁFICA — jerarquía más marcada (issue #28, 19/09/2026)
   La familia no cambia (ADR-016: DM Serif Display en titulares, Manrope en lo
   funcional); cambia el tamaño. Medido antes en un pilar: H1 28,8/40 px,
   titular de sección 20/24,8, cuerpo 16 en los dos anchos y textos
   secundarios de 13,1 a 15,5. La escala que pedía la revisión es H1 42–52 en
   escritorio y 32–38 en móvil, H2 30–36 y 26–30, cuerpo 17–18 y 16–17.
   ========================================================================== */

/* H1 de páginas interiores: de 28,8/40 a 32/48. */
.page:not(.home) .entry-header h1 {
    font-size: clamp(2rem, 1.55rem + 1.9vw, 3rem);
}

/* H1 de la portada: el clamp lo trae el bloque en línea (hasta 3,5rem = 56 px,
   por encima del tope de 52 que pedía la revisión) y solo se gana con
   !important. Queda en 34,4 → 52. */
.dm-hero h1 {
    font-size: clamp(2.15rem, 4.4vw, 3.25rem) !important;
}

/* Titular de sección del acordeón: de 20/24,8 a 24/31. No se lleva al 30–36
   de un H2 normal porque aquí hay ocho o diez seguidos y plegados: a ese
   tamaño la página parece un índice de titulares. */
.entry-content .dm-fold > summary h2 {
    font-size: clamp(1.5rem, 1.3rem + 0.85vw, 1.95rem);
}

/* Cuerpo: 16 px en móvil, 17 en escritorio. El interlineado ya estaba en 1,7,
   por encima del 1,6 que pedía la revisión, y se queda. */
@media (min-width: 769px) {
    .entry-content p,
    .entry-content li,
    .dm-fold-body p,
    .dm-fold-body li {
        font-size: var(--dm-text-md);
    }
}

/* Textos secundarios que se quedaban finos: los pasos del esquema, las
   respuestas de las preguntas frecuentes, el índice lateral y la línea de
   revisión médica. */
.dm-patho-step p {
    font-size: var(--dm-text-base);
}

.dm-faq-a p,
.dm-faq-a li {
    font-size: var(--dm-text-base);
}

.dm-toc a {
    font-size: var(--dm-text-sm);
}

.entry-content .dm-review-line {
    font-size: var(--dm-text-sm);
}


/* ==========================================================================
   REMATES DE LA REVISIÓN EXTERNA — 19/09/2026
   Hallazgos 02, 08, 13, 14, 16 y 21 del informe de revisión de diseño. Los
   que dependen de una decisión (dock, doble destino de «Pedir cita», patrón
   del acordeón, ritmo de la portada) quedan en sus issues.
   ========================================================================== */

/* 02 · La cabecera fija se quedaba en 0,85 de opacidad y sin sombra: el texto
   que pasaba por detrás se transparentaba bajo el logo y nada separaba la
   cabecera del contenido. El desenfoque se mantiene, que es lo que le da el
   aire de cristal, pero con fondo casi opaco y la sombra que ya estaba
   definida como token y no se usaba en ningún sitio. */
.site-header.dm-scrolled {
    /* !important porque la cabecera «esmerilada» fija su marfil translúcido
       con !important desde el bloque de cabecera (línea ~1434). */
    background-color: rgba(246, 241, 232, 0.96) !important;
    box-shadow: 0 1px 3px rgba(77, 93, 106, 0.10);
}

/* 21 · «Volver arriba» medía 40 px, con el mismo marfil del fondo de página y
   un borde de 1,71:1 contra él: literalmente no se veía (WCAG 1.4.11 pide
   3:1 en controles). Pasa a 44 px y a los colores de marca. */
.dm-up-corner {
    width: 44px;
    height: 44px;
    background-color: var(--dm-primary-deep);
    border-color: var(--dm-primary-deep);
    color: var(--dm-text-on-dark);
}

.dm-up-corner:hover,
.dm-up-corner:focus-visible {
    background-color: var(--dm-primary-dark);
    border-color: var(--dm-primary-dark);
}

/* 21 · El logo es un SVG de 300×125 servido en una caja de 116×48: con
   `object-fit: fill` se estiraba un 0,7 % en horizontal. */
.site-logo img,
.site-header .header-image {
    object-fit: contain;
}

/* 08 · El número de colegiado de las tarjetas de médico bajaba a 4,47:1 por
   una opacidad decorativa. El dato importa: se lee entero. */
.dm-doc-col {
    opacity: 1;
    color: var(--dm-text-secondary);
}

/* 14 · Los plegables y «Abrir todo» eran los únicos controles del sitio con
   el foco por defecto del navegador —un anillo naranja— en vez del de marca. */
.entry-content summary:focus-visible,
.dm-fold-toggle:focus-visible {
    outline: 2.4px solid var(--dm-primary-dark);
    outline-offset: 1.6px;
    border-radius: 4px;
}

/* 16 · Dos campos de WPForms van ocultos con `visibility`, pero su
   contenedor seguía ocupando 43 px cada uno: dos huecos vacíos en mitad del
   formulario, uno justo encima de «Nombre». */
.wpforms-container .wpforms-field:has(> input[style*="visibility: hidden"]),
.wpforms-container .wpforms-field:has(> input[style*="visibility:hidden"]),
.wpforms-container .wpforms-field-hp {
    display: none;
}

/* 13 · Bordes de fracción de píxel (0,8 y 1,6 px, heredados de valores en em)
   que a 1x se renderizan como un gris difuso. */
.dm-card,
.dm-fold,
.dm-faq-item,
.dm-related,
.dm-toc {
    border-width: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .dm-insurers-track {
        animation: none;
    }

    .dm-insurers-viewport {
        overflow-x: auto;
    }

    .dm-insurers-set[aria-hidden="true"] {
        display: none;
    }
}

/* 15 · Velo del menú móvil: sin él, la portada entera se ve por detrás del
   panel y el dock queda flotando encima, con tres «Pedir cita» a la vez. */
.dm-menu-velo {
    position: fixed;
    inset: 0;
    background: rgba(38, 46, 54, 0.45);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.dm-menu-abierto .dm-menu-velo {
    opacity: 1;
    pointer-events: auto;
}

body.dm-menu-abierto {
    overflow: hidden;
}


/* ==========================================================================
   PEDIR CITA — el formulario, escondido a la espera de Ofimedic (issue #13)
   La página pasa a ser teléfono, WhatsApp, Top Doctors y la información de
   la clínica. El formulario que pudiera quedar en su contenido no se borra
   —el día que llegue la API de Ofimedic se retoma— pero deja de verse y de
   ser alcanzable con el tabulador o por un lector de pantalla.
   La gemela inglesa hereda la clase page-id de su española, así que basta
   con nombrar la 39.
   ========================================================================== */
.page-id-39 .entry-content .wpforms-container {
    display: none !important;
}

/* En producción el formulario vive dentro de una tarjeta con su propio título
   («Formulario de cita»), así que esconder solo el formulario dejaba una caja
   vacía de 200 px en mitad de la página. Se esconde la tarjeta entera. El
   contenido sigue intacto: el día que llegue Ofimedic se retira esta regla. */
.page-id-39 .entry-content .dm-card:has(.wpforms-container),
.page-id-39 .entry-content .wp-block-column:has(> .dm-card > .wpforms-container) {
    display: none !important;
}

/* El aviso de «esta no es la página para pedir cita», en Contacto: tiene que
   verse antes que el formulario, no leerse como un párrafo más. */
.dm-aviso-cita {
    max-width: 46rem;
    margin-inline: auto;
    padding: 0.9rem 1.25rem;
    border-left: 3px solid var(--dm-accent);
    background: var(--dm-bg-alt);
    border-radius: var(--dm-radius-md, 8px);
}


/* ==========================================================================
   PEDIR CITA — que se vea qué es pulsable y qué no (19/09/2026)
   Las tarjetas de «Llámanos» y «Escríbenos por WhatsApp» son enlaces enteros,
   pero se leían como texto suelto en una caja: sin nada que dijera «esto se
   pulsa». Se les pone la flecha que ya usan las tarjetas del resto del sitio,
   el rótulo en color de enlace y un realce al pasar por encima.
   ========================================================================== */
.dm-cita-via {
    position: relative;
    padding-right: 2.75rem;
    cursor: pointer;
}

/* La flecha, el gesto que dice «lleva a algún sitio». */
.dm-cita-via::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 1.6rem;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--dm-accent);
    border-bottom: 2px solid var(--dm-accent);
    transform: rotate(-45deg);
    transition: transform 0.2s ease, right 0.2s ease;
}

.dm-cita-via:hover::after,
.dm-cita-via:focus-visible::after {
    right: 1rem;
}

/* El titular de cada vía, con el color y el subrayado de un enlace: es lo
   primero que mira el ojo cuando busca dónde pulsar. */
.dm-cita-via h3,
.dm-cita-via strong {
    color: var(--dm-primary-deep);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--dm-accent) 55%, transparent);
    text-underline-offset: 3px;
}

.dm-cita-via:hover h3,
.dm-cita-via:hover strong {
    text-decoration-color: var(--dm-accent);
}

/* El icono, en pastilla, como en el dock: refuerza que es un control. */


/* --------------------------------------------------------------------------
   La página deja de ser una matriz: arriba las tres vías en fila, y de ahí
   para abajo cada bloque debajo del anterior. En dos columnas, la ficha de
   contacto y el mapa quedaban en una columna estrecha y el conjunto se leía
   como una cuadrícula de cajas sueltas.
   -------------------------------------------------------------------------- */
.page-id-39 .entry-content > .wp-block-group .wp-block-columns:not(.dm-cita-vias) {
    display: block;
}

.page-id-39 .entry-content .wp-block-columns:not(.dm-cita-vias) > .wp-block-column {
    flex-basis: auto !important;
    width: 100%;
    margin-bottom: 2rem;
}

.page-id-39 .entry-content .wp-block-columns:not(.dm-cita-vias) > .wp-block-column:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   La ficha de contacto: rótulo y dato en dos alturas, con icono y separadores.
   Antes era un párrafo con <br> y se leía como un bloque de texto plano.
   -------------------------------------------------------------------------- */
.dm-info {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dm-info li {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 0.85rem;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--dm-border);
    margin: 0;
}

.dm-info li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dm-info li:first-child {
    padding-top: 0;
}

.dm-info li::before {
    content: '';
    grid-row: span 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--dm-bg-alt);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}

.dm-info-dir::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5246' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.dm-info-tel::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235E5246'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.85 21 3 13.15 3 3.5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); }
.dm-info-wa::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235E5246'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21c5.46 0 9.91-4.45 9.91-9.92C21.95 6.45 17.5 2 12.04 2zm0 18.03c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24s8.24 3.7 8.24 8.24c0 4.55-3.7 8.24-8.24 8.24z'/%3E%3C/svg%3E"); }
.dm-info-mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5246' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); }
.dm-info-hora::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5246' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

.dm-info-rot {
    grid-column: 2;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dm-accent);
    line-height: 1.4;
}

.dm-info-dato {
    grid-column: 2;
    color: var(--dm-text-secondary);
    line-height: 1.55;
}

.dm-info-dato a {
    color: var(--dm-primary-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* La ficha, con algo más de presencia que una caja blanca cualquiera. */
.page-id-39 .entry-content .dm-card:has(.dm-info) {
    border-top: 3px solid var(--dm-accent);
    box-shadow: var(--dm-shadow-md, 0 8px 24px -14px rgba(44, 62, 90, 0.35));
}


/* ==========================================================================
   CAMBIOS DEL DOCUMENTO DEL CLIENTE — 19/09/2026 (cambios 03 y arreglo móvil)
   ========================================================================== */

/* Cambio 03 · «Conoce al equipo médico completo» se veía desplazado a la
   izquierda en escritorio. El motivo: el párrafo es un bloque wp:html y
   recibe el ancho de contenido de Gutenberg (768 px), mientras que la rejilla
   de las tarjetas usa el ancho amplio (1136 px). Los dos empiezan en el mismo
   punto, así que el texto centrado del párrafo caía 184 px a la izquierda del
   centro de las tarjetas. Medido a 1440; a 768 y 375 ya coincidía. */
.entry-content .dm-team-more {
    /* No se ensancha el párrafo —768 px es buena medida de línea—: se centra
       dentro del contenedor, que es el que comparte centro con la rejilla de
       tarjetas. Va con !important porque el ancho y los márgenes los fija la
       propia hoja de bloques de WordPress. */
    margin-inline: auto !important;
}

/* El desplegable de idioma en el menú móvil: se abría fuera del panel y se
   salía de la pantalla por la derecha (empezaba en x=128 con 302 px de ancho
   en una pantalla de 390). Ahora el ítem ocupa la fila entera, como los demás,
   y su desplegable cae debajo con el mismo ancho. */
@media (max-width: 1180px) {
    /* El ítem del idioma es `display: flex`, así que su desplegable se
       colocaba COMO ÍTEM FLEX al lado del rótulo —140 px empezando en x=206 de
       una pantalla de 390— en vez de debajo. Pasa a bloque: rótulo arriba,
       opciones debajo, como el resto de apartados del menú. */


}


/* Cambio 08 · las tarjetas de «Pedir cita» dicen qué pasa al pulsarlas, y el
   número queda a la vista en las dos. El aviso de WhatsApp va debajo, en letra
   pequeña: es una advertencia, no un reclamo. */
.dm-cita-accion {
    color: var(--dm-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Aviso de WhatsApp, dentro de su tarjeta (documento del 22/09): letra del
   texto secundario, gris suave y separado de lo de arriba. 14 px y no menos:
   es la única línea de la tarjeta con peso legal. */
.dm-cita-via-txt .dm-cita-aviso {
    margin-top: 0.45rem;
    font-size: var(--dm-text-sm);
    line-height: 1.45;
    color: var(--dm-text-secondary);
}

/* ==========================================================================
   ENTRADILLA DE LOS HUBS — Dermatología, Medicina capilar, Medicina estética
   y láser, y sus gemelas inglesas (documento del 22/09/2026, cambio 4).
   El párrafo arrancaba en el borde de la rejilla y acababa mucho antes del
   derecho, con el título de la página, «Tratamientos» y la matriz centrados.
   Una sola clase para las seis: la pone inc/matriz.php al primer párrafo de
   toda página con [dermamer_matriz].
   ========================================================================== */
.entry-content .dm-hub-intro {
    /* La medida de línea del sitio (ver «Medida de línea en escritorio»): ese
       tope ya se aplicaba, pero sin márgenes automáticos, y de ahí que el
       párrafo quedara pegado a la izquierda. */
    max-width: 48rem;
    /* 4rem: el mismo aire que el padding de .dm-section entre secciones. */
    margin: 0 auto 4rem !important;
    text-align: center;
}

/* En móvil, centrado se lee mal: a la izquierda, con menos aire y el
   interlineado del cuerpo. El !important es contra el line-height en línea
   que trae el bloque del editor. El H2 suma por su cuenta unos 26 px de
   aire en móvil, así que el hueco final ronda los 46. */
@media (max-width: 767px) {
    .entry-content .dm-hub-intro {
        margin-bottom: 1.25rem !important;
        text-align: left;
        line-height: 1.6 !important;
    }
}

/* ==========================================================================
   HERO EN MÓVIL: un solo margen lateral (23/09/2026)
   El texto del hero de la portada heredaba tres rellenos anidados —el del
   hero (24 px), el de su contenedor (32) y el del bloque de texto (30)— y a
   360 px le quedaban 188 px de ancho: «Dermatólogos» no cabía y se partía.
   En móvil se queda el margen de 20 px del hero y los contenedores de dentro
   van sin relleno. Va con !important porque la regla de bandas interiores
   «.page:not(.home) … .has-background > …__inner-container» (0,6,0) también
   entra aquí: el <article> de la portada lleva la clase «page».
   ========================================================================== */
@media (max-width: 767px) {
    body .entry-content .wp-block-group.dm-hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    body .entry-content .wp-block-group.dm-hero > .wp-block-group__inner-container,
    body .entry-content .dm-hero .dm-hero-content > .wp-block-group__inner-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   MÓVIL: margen de página de 20 px y tarjetas sin relleno doble (23/09/2026)
   GeneratePress da 30 px de margen lateral en móvil y una regla genérica
   (.site-main .wp-block-group__inner-container) mete otros 30 dentro de cada
   grupo. En una tarjeta .dm-card, que ya trae su propio relleno de 32, a
   320 px quedaban 92 px para el texto: el teléfono de «Pedir cita» se partía
   en dos líneas. Margen de página a 20 px (el documento del 22/09 pide 16–20)
   y la tarjeta se queda con un solo relleno, el suyo, a 20 px. Los bloques a
   sangre van con calc(50% - 50vw) y no dependen de este margen.
   ========================================================================== */
@media (max-width: 767px) {
    body #content.site-content,
    body .site-header .inside-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* !important: las tarjetas traen padding:2rem en línea desde el editor. */
    body .site-main .wp-block-group.dm-card {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body .site-main .wp-block-group.dm-card > .wp-block-group__inner-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* WPForms trae word-break: break-word y hyphens: auto en las descripciones de
   campo (el texto de protección de datos del formulario de contacto): partía
   «infor-mación» o «rectifica-ción» incluso a 768 px, con sitio de sobra. */
.wpforms-container .wpforms-field-description,
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-label-inline {
    word-break: normal;
    /* !important: la hoja de WPForms lo declara con más especificidad. */
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    overflow-wrap: break-word;
}

/* H1 de página en pantallas de 320–380 px: la regla de 1.6rem que ya había
   para este ancho quedaba anulada por el clamp() posterior (mínimo 2rem), y
   «fotorrejuvenecimiento» no cabía en una línea a 320 px. */
@media (max-width: 380px) {
    .page:not(.home) .entry-header h1 {
        font-size: 1.625rem;
    }
}

/* «Ver perfil del Dr. Manuel Ballesteros →» no cabe en una línea de la
   tarjeta y la flecha se quedaba sola en la segunda. Líneas equilibradas. */
.dm-doctor-card .dm-doc-perfil a {
    text-wrap: balance;
}

/* ==========================================================================
   COOKIES: fuera la pestaña flotante de Complianz (25/09/2026)
   «Gestionar consentimiento» se quedaba fija abajo a la derecha después de
   aceptar o rechazar, montada encima del dock (llamar, WhatsApp, Pedir cita).
   La vía para cambiar o retirar el consentimiento pasa al pie, en la línea
   del copyright: «Configurar cookies» (functions.php, dermamer_custom_copyright).
   Solo se oculta la pestaña flotante: el botón del pie y el de los sellos de
   Top Doctors llevan la misma clase y siguen visibles.
   ========================================================================== */
#cmplz-manage-consent .cmplz-manage-consent {
    display: none !important;
}

/* El botón del pie se lee como un enlace más de la línea legal. */
.site-info .dm-pie-cookies {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    font: inherit;
    color: rgba(246, 241, 232, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.site-info .dm-pie-cookies:hover,
.site-info .dm-pie-cookies:focus-visible {
    color: var(--dm-white, #fff);
}

/* ==========================================================================
   MAPAS DE GOOGLE (portada, Pedir cita, Contacto, La clínica)
   A ancho completo y con proporción fija en vez del alto en píxeles del
   bloque: el hueco queda reservado antes de cargar (sin salto de maquetación)
   y en móvil no se queda en una tira alargada. Vale también para el mapa ya
   bloqueado por Complianz, que lleva la URL en data-src-cmplz.
   ========================================================================== */
.entry-content iframe[src*="google.com/maps"],
.entry-content iframe[data-src-cmplz*="google.com/maps"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
}

@media (max-width: 767px) {
    .entry-content iframe[src*="google.com/maps"],
    .entry-content iframe[data-src-cmplz*="google.com/maps"] {
        aspect-ratio: 4 / 3;
    }
}

/* «Dónde estamos» (Contacto y La clínica): la dirección y «Cómo llegar». */
.dm-donde {
    margin: 0 0 1rem;
}

/* En La clínica el mapa es sección propia a ancho de página: a 16:9 medía
   casi 600 px de alto en escritorio. Más apaisado y con tope de ancho. */
@media (min-width: 768px) {
    .dm-donde-seccion iframe[src*="google.com/maps"],
    .dm-donde-seccion iframe[data-src-cmplz*="google.com/maps"] {
        max-width: 60rem;
        margin: 0 auto;
        aspect-ratio: 21 / 9;
    }
}

/* ==========================================================================
   TEXTO NOGAL SOBRE LINO (repaso de diseño 27/09/2026)
   El contenido de la portada, «La clínica» y sus gemelas pinta los párrafos
   con #6B5D4F escrito en el bloque. Sobre el lino #E0D5C7 eso da 4,39:1, por
   debajo de AA. El token ya se oscureció a #5E5246 (5,2:1), pero el color va
   en línea y el token no lo alcanza. Se corrige aquí, en un solo punto, en
   vez de reescribir el contenido que edita el cliente: vale también para lo
   que copie mañana con el mismo bloque. Sobre blanco o marfil el #6B5D4F
   cumple y se deja como está.
   ========================================================================== */
.has-background[style*="background-color:#E0D5C7" i] .has-text-color[style*="color:#6B5D4F" i] {
    color: var(--dm-text-secondary, #5E5246) !important;
}

/* Los dos botones de cookies del pie medían 18-19 px de alto (WCAG 2.5.8
   pide 24). Relleno vertical en línea: agranda la zona que se puede pulsar
   sin mover el texto de alrededor (repaso de diseño 27/09/2026). */
.dm-seals-boton,
.site-info .dm-pie-cookies {
    padding-block: 0.25rem;
}

/* Franja horaria entera («15:00 – 19:00»): la pone functions.php,
   dermamer_horas_sin_partir(). */
.dm-franja {
    white-space: nowrap;
}

/* ==========================================================================
   REPASO DE DISEÑO 27/09/2026 — movimiento y detalles de bajo riesgo
   ========================================================================== */

/* Los pliegues de los pilares y las preguntas frecuentes se despliegan hasta
   su altura real en vez de aparecer de golpe. Mejora progresiva: donde no hay
   ::details-content (Firefox, Safari antiguos) abren al instante como antes.
   .dm-sin-anim lo apaga para los saltos a un ancla, que tienen que calcular
   el destino con el pliegue ya abierto. */
.dm-fold::details-content,
.dm-faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
        block-size var(--dm-t-panel) var(--dm-ease-out),
        content-visibility var(--dm-t-panel) allow-discrete;
}

.dm-fold[open]::details-content,
.dm-faq-item[open]::details-content {
    block-size: auto;
}

.dm-sin-anim::details-content {
    transition: none !important;
}

.dm-fold > summary::after,
.dm-faq-item > summary::after {
    transition: transform var(--dm-t-panel) var(--dm-ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .dm-fold::details-content,
    .dm-faq-item::details-content {
        transition: none;
    }
}

/* «Pedir cita» sobre fondo oscuro (héroe de la portada y banda de
   contacto): la misma pastilla marfil que la cabecera encima del héroe, en
   vez de un nogal que solo salía aquí. Dos variantes en toda la web: pizarra
   sobre claro, marfil sobre oscuro (comentario en el issue #27). */
.dm-hero .wp-block-button.dm-btn-warm .wp-block-button__link,
.dm-section-dark .wp-block-button.dm-btn-warm .wp-block-button__link {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

.dm-hero .wp-block-button.dm-btn-warm .wp-block-button__link:hover,
.dm-section-dark .wp-block-button.dm-btn-warm .wp-block-button__link:hover {
    background-color: var(--dm-white) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.wp-block-button__link:active,
.dm-btn:active {
    transform: scale(0.97);
    transition-duration: var(--dm-t-press);
}

/* Zonas de pulsación (WCAG 2.5.8, issue #55). Relleno en línea o margen
   negativo: crecen sin mover nada de alrededor. */
.dm-chips a {
    padding-block: 0.3rem;
}

.dm-info-dato a {
    display: inline-block;
    padding-block: 0.2rem;
}

@media (max-width: 1180px) {
    .main-navigation .main-nav .dropdown-menu-toggle {
        padding: 13px !important;
        margin: -13px !important;
    }
}

/* El anillo de foco de los formularios lo pisaba la CSS «modern» de WPForms,
   más específica: quedaba un borde de 1 px (issue #55). */
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form textarea:focus,
div.wpforms-container-full .wpforms-form select:focus {
    border-color: var(--dm-primary);
    box-shadow: 0 0 0 3px var(--dm-primary);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* ==========================================================================
   MENÚ: GRUPOS EN MÓVIL E IDIOMA EN LA BARRA (tema 2.40.0; 2.50.0) — inc/menu-mega.php
   Cada sección agrupada trae dos listas: la de siempre (li.dm-mm-plano) y
   los grupos con «Ver toda la sección» (li.dm-mm-grupo, li.dm-mm-todo).
   Escritorio (≥1181): el desplegable de siempre —caja blanca, a dos
   columnas las secciones largas («MEGA-MENÚ»)— con la lista de siempre; el
   panel a todo lo ancho de 2.40–2.49 se retiró (30/09/2026). Móvil (≤1180):
   la tarjeta de siempre («MENÚ MÓVIL»), con la foto velada alrededor, y
   dentro las secciones en DM Serif y los grupos rotulados. El corte es el de
   siempre (issue #7).
   ========================================================================== */

/* ---------- Escritorio ---------- */
@media (min-width: 1181px) {
    .main-navigation .main-nav li.dm-mm-grupo,
    .main-navigation .main-nav li.dm-mm-todo {
        display: none;
    }

    /* Idioma: ES y EN como conmutador en la barra, no como desplegable. */
    .main-navigation .main-nav > ul > li.dm-idioma > a {
        min-height: 0;
        padding: 0 0.6rem !important;
        line-height: 30px;
        font-size: var(--dm-text-2xs) !important;
        font-weight: 700;
        letter-spacing: 0.08em;
        border-radius: 999px;
        color: var(--dm-text-secondary);
    }

    .main-navigation .main-nav > ul > li.dm-idioma > a::after {
        display: none;
    }

    .main-navigation .main-nav > ul > li.dm-menu-cta + li.dm-idioma {
        margin-left: 0.75rem;
    }

    .main-navigation .main-nav > ul > li.dm-idioma.current-lang > a {
        background: var(--dm-text);
        color: var(--dm-bg) !important;
    }

    .main-navigation .main-nav > ul > li.dm-idioma:not(.current-lang) > a:hover {
        color: var(--dm-text);
    }

    /* Sobre la foto de la portada, antes de desplazarse. */
    .dermamer-home .site-header:not(.dm-scrolled) .main-navigation .main-nav > ul > li.dm-idioma > a {
        color: rgba(246, 241, 232, 0.85) !important;
    }

    .dermamer-home .site-header:not(.dm-scrolled) .main-navigation .main-nav > ul > li.dm-idioma.current-lang > a {
        background: var(--dm-bg);
        color: var(--dm-text) !important;
    }
}

/* ---------- Móvil y tableta: la tarjeta ---------- */
@media (max-width: 1180px) {
    .main-navigation .main-nav li.dm-mm-plano {
        display: none;
    }

    /* Fondo, margen, esquinas y sombra: los de la tarjeta de siempre. Por
       dentro, una rejilla para poner ES | EN en la misma fila, arriba. */
    .main-navigation.toggled .main-nav > ul {
        display: grid !important;
        grid-template-columns: auto auto 1fr;
        align-content: start;
        padding: 0.75rem 1.25rem 0.5rem;
        /* Al final del desplazamiento, la tarjeta acaba por encima del dock. */
        margin-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }

    .main-navigation.toggled .main-nav > ul > li {
        grid-column: 1 / -1;
    }

    /* Secciones: en serif, como un índice */
    .main-navigation.toggled .main-nav > ul > li.dm-mm > a {
        min-height: 58px;
        padding: 0.5rem 0 !important;
        font-family: var(--dm-font-heading);
        font-size: 1.3rem !important;
        font-weight: 400;
        line-height: 1.2;
        /* «Aesthetic medicine and laser» no cabe en una línea a 320 px */
        white-space: normal;
        color: var(--dm-text) !important;
        border-bottom: 1px solid var(--dm-border-light);
    }

    /* Sin el subrayado de la barra de escritorio bajo la sección abierta */
    .main-navigation.toggled .main-nav > ul > li.dm-mm > a::after {
        display: none;
    }

    /* Conócenos es la última: no arrastra filete al pie de la tarjeta */
    .main-navigation.toggled .main-nav > ul > li.dm-mm-conocenos > a,
    .main-navigation.toggled .main-nav > ul > li.dm-mm-conocenos > ul.sub-menu.toggled-on {
        border-bottom: 0;
    }

    .main-navigation.toggled .main-nav > ul > li.dm-mm > ul.sub-menu.toggled-on {
        display: flex;
        flex-direction: column;
        padding: 0.35rem 0 1rem;
        background: transparent !important;
        border-bottom: 1px solid var(--dm-border-light);
    }

    /* «Ver toda la sección» delante de todo */
    .main-navigation.toggled .main-nav li.dm-mm-todo {
        order: -1;
    }

    .main-navigation.toggled .main-nav li.dm-mm-todo > a {
        min-height: 48px;
        padding: 0 !important;
        font-size: var(--dm-text-base) !important;
        font-weight: 700;
        color: var(--dm-primary) !important;
        border-bottom: 0;
    }

    .main-navigation.toggled .dm-mm-h {
        display: block;
        padding: 0.85rem 0 0.2rem;
        font-size: var(--dm-text-2xs);
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--dm-warm, #6A5A4F);
    }

    /* La lista de cada grupo, siempre abierta dentro de su sección. Hereda la
       visibilidad de la sección: cerrada ella, nada de aquí se enfoca. */
    .main-navigation.toggled .main-nav li.dm-mm-grupo > ul.sub-menu {
        visibility: inherit;
        position: static;
        left: auto !important;
        width: 100%;
        height: auto;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        float: none;
        background: transparent !important;
        border: 0;
    }

    .main-navigation.toggled .main-nav li.dm-mm li:not(.dm-mm-todo) > a {
        min-height: 46px;
        padding: 0 !important;
        font-size: var(--dm-text-base) !important;
        color: var(--dm-text) !important;
        border-bottom: 0;
    }

    .main-navigation.toggled .main-nav li.dm-mm li.current-menu-item > a {
        color: var(--dm-primary) !important;
        font-weight: 600;
    }

    /* Idioma: arriba, ES | EN en la misma fila */
    .main-navigation.toggled .main-nav > ul > li.dm-idioma {
        grid-column: auto;
        order: -1;
        width: auto;
        margin: 0 0.35rem 0.5rem 0;
    }

    .main-navigation.toggled .main-nav > ul > li.dm-idioma > a {
        min-height: 40px;
        padding: 0 1rem !important;
        font-size: var(--dm-text-xs) !important;
        font-weight: 700;
        letter-spacing: 0.08em;
        border: 1px solid var(--dm-border);
        border-radius: 999px;
        color: var(--dm-text-secondary) !important;
        justify-content: center;
    }

    .main-navigation.toggled .main-nav > ul > li.dm-idioma.current-lang > a,
    .dermamer-home .site-header:not(.dm-scrolled) .main-navigation.toggled .main-nav > ul > li.dm-idioma.current-lang > a {
        background: var(--dm-text);
        border-color: var(--dm-text);
        color: var(--dm-bg) !important;
    }

    /* «Pedir cita», llamar y WhatsApp: el dock de siempre, encima del velo,
       en lugar de un botón más dentro de la lista. */
    .main-navigation.toggled .main-nav > ul > li.dm-menu-cta {
        display: none;
    }

    body.dm-menu-abierto .dm-dock {
        z-index: 1001;
    }
}

/* ==========================================================================
   DEL HUB AL PILAR (View Transitions entre páginas, 27/09/2026)
   Al abrir un pilar desde la matriz de su hub, la foto de la tarjeta crece
   hasta ser la cabecera del pilar; al volver, encoge a su tarjeta. Los nombres
   los ponen inc/matriz.php (tarjeta) y dermamer_vt_cabecera() (cabecera).
   El resto de la página cambia al instante, como siempre: solo se mueve lo
   que tiene pareja. Navegadores sin la API (Firefox hoy) navegan igual que
   antes, y con «reducir movimiento» no se activa.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-group(*) {
    animation-duration: 340ms;
    animation-timing-function: var(--dm-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* La tarjeta es casi cuadrada y la cabecera muy apaisada: las dos imágenes
   llenan la caja que se transforma, recortadas como una foto, sin estirarse. */
::view-transition-old(*),
::view-transition-new(*) {
    height: 100%;
    object-fit: cover;
    overflow: clip;
}

/* ==========================================================================
   TRAZO DE LAS FIGURAS (27/09/2026)
   Las figuras de cuatro pasos de los pilares esperan quietas hasta entrar en
   pantalla (.dm-wait) y arrancan paso a paso (.dm-go, inc/figuras.php). Ahora,
   al arrancar, cada contorno se dibuja de punta a punta antes de quedarse:
   se entiende la secuencia sin leer. Los rellenos están desde el principio;
   las lesiones que laten y las piezas que se mueven siguen con su animación
   de siempre y no se trazan. Sin JS o con «reducir movimiento» no hay
   .dm-wait y no se oculta nada.
   ========================================================================== */
.dm-patho.dm-wait .dm-patho-svg:not(.dm-go) [pathLength]:not([stroke="#B4604C"]):not([stroke="#9C4A3C"]):not([fill="#B4604C"]):not([fill="#9C4A3C"]):not(.dm-drift):not(.dm-diffuse):not(.dm-beam) {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.dm-patho .dm-patho-svg.dm-go [pathLength]:not([stroke="#B4604C"]):not([stroke="#9C4A3C"]):not([fill="#B4604C"]):not([fill="#9C4A3C"]):not(.dm-drift):not(.dm-diffuse):not(.dm-beam) {
    stroke-dasharray: 1;
    animation: dmTrazo 1100ms var(--dm-ease-in-out, cubic-bezier(0.77, 0, 0.175, 1)) both;
}

@keyframes dmTrazo {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dm-patho .dm-patho-svg [pathLength] {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }
}

/* Ganchos laterales: ocultos del todo mientras pisan la cabecera de la
   página o el pie (clase .dm-rails-fuera, inc/nav-seccion.php). Atenuados
   sobre la foto oscura se leían como una mancha. Fuera de ahí sigue el modo
   atenuado de siempre, que se recupera al acercar el ratón. */
@media (min-width: 1460px) and (min-height: 620px) {
    .dm-rails-fuera .dm-rail,
    .dm-rails-fuera .dm-rail:hover,
    .dm-rails-fuera .dm-rail:focus-within {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }
}

/* ==========================================================================
   CABECERA COMPACTA — páginas de consulta (Aseguradoras, Tarifas; 27/09/2026)
   Sin franja oscura: la sección a la que pertenecen como enlace y el H1,
   alineados con la columna de su contenido (functions.php,
   dermamer_cabecera_compacta). Cada página tiene su propia columna: la de
   Aseguradoras es la del grupo del contenido (65 rem) y la de Tarifas, la de
   texto (46 rem).
   ========================================================================== */
.page:not(.home).dm-cabecera-compacta .entry-header {
    background: none;
    width: auto;
    max-width: 46rem;
    margin: 0 auto !important;
    padding: 2.75rem 0 0;
    text-align: left;
}

.page:not(.home).dm-cabecera-aseguradoras .entry-header,
.page:not(.home).dm-cabecera-pedir-cita .entry-header {
    max-width: 65rem;
}

.dm-cabecera-seccion {
    margin: 0 0 0.6rem;
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dm-cabecera-seccion a {
    color: var(--dm-warm, #6A5A4F);
    text-decoration: none;
}

.dm-cabecera-seccion a:hover,
.dm-cabecera-seccion a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page:not(.home).dm-cabecera-compacta .entry-header h1 {
    color: var(--dm-text);
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.12;
    text-wrap: balance;
}

@media (max-width: 768px) {
    .page:not(.home).dm-cabecera-compacta .entry-header {
        padding: 2rem 0 0;
    }
}

/* El velo inferior (::after) y el relleno del H1 son de las cabeceras con
   foto; en la compacta sobran. */
.page:not(.home).dm-cabecera-compacta .entry-header::after {
    display: none;
}

.page:not(.home).dm-cabecera-compacta .entry-header h1 {
    padding: 0;
}

/* ==========================================================================
   HUBS AGRUPADOS (tema 2.41.0, 27/09/2026) — inc/matriz.php
   Los mismos grupos que el menú (inc/menu-mega.php), cada uno con su rótulo
   y su rejilla. En móvil las tarjetas pasan de mosaicos de 180 px a una
   lista con miniatura: diez fotos de lesiones a ancho completo eran unos
   2.000 px de desplazamiento sin texto que orientara.
   ========================================================================== */
.dm-matriz-grupos {
    display: grid;
    gap: 2.75rem;
}

.entry-content .dm-matriz-grupo-t {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.1rem;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--dm-warm, #6A5A4F);
}

.entry-content .dm-matriz-grupo-t::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dm-border-light);
}

@media (max-width: 640px) {
    .dm-matriz-grupos {
        gap: 2rem;
    }

    .dm-matriz-grupo .dm-matriz {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .dm-matriz-grupo .dm-matriz-card {
        min-height: 76px;
        justify-content: flex-start;
        gap: 0.9rem;
        padding: 0.5rem 1rem 0.5rem 0.5rem;
        background: var(--dm-white);
        border: 1px solid var(--dm-border-light);
        box-shadow: none;
    }

    .dm-matriz-grupo .dm-matriz-card img {
        position: static;
        flex: none;
        width: 60px;
        height: 60px;
        border-radius: 8px;
    }

    .dm-matriz-grupo .dm-matriz-card:hover img {
        transform: none;
    }

    .dm-matriz-grupo .dm-matriz-velo {
        display: none;
    }

    /* Sin foto propia (issue #4): el degradado de marca pasa a la miniatura. */
    .dm-matriz-grupo .dm-matriz-sin-foto::before {
        content: "";
        flex: none;
        width: 60px;
        height: 60px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--dm-primary-deep) 0%, var(--dm-primary) 100%);
    }

    .dm-matriz-grupo .dm-matriz-titulo {
        padding: 0;
        text-align: left;
        color: var(--dm-text);
        font-size: var(--dm-text-md);
        text-shadow: none;
    }

    .dm-matriz-grupo .dm-matriz-card::after {
        content: "→";
        margin-left: auto;
        padding-left: 0.5rem;
        color: var(--dm-primary);
        font-weight: 700;
    }
}

/* ==========================================================================
   PÁGINA 404 (tema 2.41.0, 27/09/2026) — 404.php
   ========================================================================== */
.dm-404 {
    max-width: 46rem;
    margin: 0 auto;
    padding: 4rem 0 5rem;
}

.dm-404-k {
    margin: 0 0 0.6rem;
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dm-warm, #6A5A4F);
}

.dm-404-h1 {
    margin: 0 0 1rem;
    font-family: var(--dm-font-heading);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    color: var(--dm-text);
    text-wrap: balance;
}

.dm-404-p {
    margin: 0 0 2rem;
    font-size: var(--dm-text-md);
    color: var(--dm-text-secondary);
    max-width: 36rem;
}

.dm-404-secciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

.dm-404-secciones li {
    margin: 0;
}

.dm-404-secciones a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 64px;
    padding: 0.75rem 1rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-radius: 12px;
    color: var(--dm-text);
    font-family: var(--dm-font-heading);
    font-size: var(--dm-text-lg);
    line-height: 1.25;
    text-decoration: none;
    transition: border-color var(--dm-t-ui) ease, box-shadow var(--dm-t-ui) ease;
}

.dm-404-secciones a:hover,
.dm-404-secciones a:focus-visible {
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow-md);
}

.dm-404-secciones .dm-rail-ico {
    flex: none;
    color: var(--dm-warm, #6A5A4F);
}

.dm-404-cita {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 0;
    color: var(--dm-text-secondary);
}

.dm-404-cita a[href^="tel:"] {
    color: var(--dm-primary);
    font-weight: 700;
    white-space: nowrap;
}

.dm-404-boton {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1.6rem;
    border-radius: 999px;
    background: var(--dm-primary);
    color: var(--dm-white) !important;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--dm-t-ui) ease, transform var(--dm-t-press) var(--dm-ease-out);
}

.dm-404-boton:hover,
.dm-404-boton:focus-visible {
    background: var(--dm-primary-dark);
}

.dm-404-boton:active {
    transform: scale(0.97);
}

@media (max-width: 768px) {
    .dm-404 {
        padding: 2.5rem 0 4rem;
    }
}

/* ==========================================================================
   EQUIPO MÉDICO — fichas horizontales (tema 2.42.0, 27/09/2026)
   inc/medicos-equipo.php. Foto a la izquierda y, al lado, especialidad,
   residencia, idiomas, áreas y las páginas que revisa cada médico.
   ========================================================================== */
.dm-equipo {
    display: grid;
    gap: 1.5rem;
    max-width: 65rem;
    margin: 0 auto;
}

.dm-equipo-ficha {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
    padding: 1.5rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-border-light);
    border-radius: var(--dm-radius-lg);
}

.dm-equipo-foto {
    display: block;
}

.dm-equipo-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 12%;
    border-radius: 12px;
}

.entry-content .dm-equipo-nombre {
    margin: 0.25rem 0 0;
    font-family: var(--dm-font-heading);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 400;
    line-height: 1.15;
}

.dm-equipo-nombre a {
    color: var(--dm-text);
    text-decoration: none;
}

.dm-equipo-nombre a:hover,
.dm-equipo-nombre a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.entry-content .dm-equipo-rol {
    margin: 0.35rem 0 1.25rem;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-secondary);
}

.dm-equipo-num {
    font-variant-numeric: tabular-nums;
}

.dm-equipo-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.9rem 1.75rem;
    margin: 0;
    padding: 1rem 0;
    border-block: 1px solid var(--dm-border-light);
}

.dm-equipo-datos dt,
.entry-content .dm-equipo-sub {
    margin: 0 0 0.3rem;
    font-family: var(--dm-font-body);
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--dm-warm, #6A5A4F);
}

.dm-equipo-datos dd {
    margin: 0;
    font-size: var(--dm-text-sm);
    line-height: 1.45;
    color: var(--dm-text);
}

.dm-equipo-anos {
    color: var(--dm-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.entry-content .dm-equipo-sub {
    margin-top: 1.25rem;
    margin-bottom: 0.55rem;
}

.dm-equipo-areas,
.dm-equipo-firma {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-equipo-areas {
    gap: 0.4rem;
}

.dm-equipo-areas li {
    margin: 0;
    padding: 0.3rem 0.75rem;
    background: var(--dm-bg);
    border: 1px solid var(--dm-border-light);
    border-radius: 999px;
    font-size: var(--dm-text-xs);
    line-height: 1.35;
    color: var(--dm-text);
}

.dm-equipo-firma {
    gap: 0.15rem 1.1rem;
}

.dm-equipo-firma li {
    margin: 0;
}

.dm-equipo-firma a {
    display: inline-block;
    padding-block: 0.3rem;
    font-size: var(--dm-text-sm);
    color: var(--dm-primary);
    text-decoration: underline;
    text-decoration-color: var(--dm-border);
    text-underline-offset: 3px;
}

.dm-equipo-firma a:hover,
.dm-equipo-firma a:focus-visible {
    text-decoration-color: currentColor;
}

.entry-content .dm-equipo-perfil {
    margin: 1.4rem 0 0;
}

.dm-equipo-perfil a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--dm-primary);
    text-decoration: none;
}

.dm-equipo-perfil a:hover,
.dm-equipo-perfil a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 760px) {
    .dm-equipo-ficha {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1rem;
    }

    .dm-equipo-foto img {
        aspect-ratio: 4 / 3;
        object-position: center 18%;
    }
}

/* ==========================================================================
   PILARES EN MÓVIL (tema 2.43.0, 27/09/2026 — issue #54)
   ========================================================================== */

/* ---- Índice plegable. En escritorio se ve siempre abierto: el rótulo no
   pliega (functions.php, dermamer_toc_plegable) y, para los navegadores que
   ya conocen ::details-content, se fuerza también por CSS antes de que corra
   el script. En móvil es una fila que se despliega. ---- */
.dm-toc-det > summary {
    list-style: none;
}

.dm-toc-det > summary::-webkit-details-marker {
    display: none;
}

.dm-toc-n {
    display: none;
}

@media (min-width: 761px) {
    .dm-toc-det::details-content {
        content-visibility: visible;
        block-size: auto;
    }

    .dm-toc-det > summary {
        cursor: default;
    }
}

@media (max-width: 760px) {
    .entry-content .dm-toc {
        margin: 1.25rem auto 1.75rem;
    }

    .dm-toc-det {
        border: 1px solid var(--dm-border);
        border-radius: 12px;
        background: var(--dm-white);
    }

    .dm-toc-det > summary.dm-toc-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 52px;
        margin: 0;
        padding: 0 1rem;
        cursor: pointer;
        font-size: var(--dm-text-xs);
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--dm-text);
    }

    .dm-toc-n {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5rem;
        height: 1.5rem;
        padding: 0 0.4rem;
        border-radius: 999px;
        background: var(--dm-bg-alt);
        color: var(--dm-text-secondary);
        font-size: var(--dm-text-2xs);
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
    }

    .dm-toc-det > summary::after {
        content: "";
        width: 9px;
        height: 9px;
        margin-left: auto;
        border-right: 2px solid var(--dm-accent);
        border-bottom: 2px solid var(--dm-accent);
        transform: rotate(45deg) translateY(-2px);
        transition: transform var(--dm-t-ui) var(--dm-ease-out);
    }

    .dm-toc-det[open] > summary::after {
        transform: rotate(-135deg) translateY(-2px);
    }

    .dm-toc-det > ul {
        padding: 0.25rem 1rem 1rem;
    }

    .dm-toc-det::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--dm-t-panel) var(--dm-ease-out), content-visibility var(--dm-t-panel) allow-discrete;
    }

    .dm-toc-det[open]::details-content {
        block-size: auto;
    }
}

/* ---- Figura de cuatro pasos dentro de un pliegue: la columna mide 46 rem y
   cuatro tarjetas de 157 px partían el texto palabra a palabra. En 2×2 desde
   561 px; por debajo sigue en columna. ---- */
@media (min-width: 561px) {
    .dm-fold .dm-patho {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }

    /* Sin flecha al saltar de fila: bajo el paso 2 apuntaba al 4, y el
       siguiente es el 3. El número de cada paso ya marca el orden. */
    .dm-fold .dm-patho-step:nth-child(2)::after {
        display: none;
    }
}

/* ---- Volver arriba dentro del dock (≤1180 px; lo mueve el script del
   dock). Secundario: marfil con borde, al lado de llamar. Solo ocupa sitio
   cuando se ve, y con el menú abierto no aparece. ---- */
@media (max-width: 1180px) {
    .dm-dock .dm-up-corner {
        position: static;
        flex: none;
        width: 44px;
        height: 44px;
        background-color: var(--dm-bg);
        border: 1px solid var(--dm-border);
        color: var(--dm-text);
        box-shadow: 0 4px 14px rgba(38, 46, 54, 0.18);
    }

    .dm-dock .dm-up-corner:not(.is-on),
    body.dm-menu-abierto .dm-dock .dm-up-corner {
        display: none;
    }

    .dm-dock .dm-up-corner.is-on {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-toc-det::details-content {
        transition: none;
    }
}

/* En los móviles más estrechos (iPhone SE, 320 px) el dock con «Book an
   appointment» ya ocupa casi todo el ancho: ahí no cabe volver arriba. */
@media (max-width: 374px) {
    .dm-dock .dm-up-corner.is-on {
        display: none;
    }
}

/* ==========================================================================
   «PEDIR CITA» — UN SOLO BOTÓN (tema 2.44.0, 27/09/2026 — issue #27)
   Dos variantes en toda la web:
     · pizarra sobre fondo claro (cabecera, contenido, bloque local, dock,
       ganchos, banda final del perfil de cada médico);
     · marfil sobre fondo oscuro (héroe de la portada, banda de contacto y
       cabecera del perfil de cada médico).
   El nogal (.dm-btn-warm, el gancho «Cuando lo tengas claro») era una
   tercera que solo salía en algunos sitios y hacía dudar de si era el mismo
   botón. La clase dm-btn-warm se conserva porque la usan el contenido de la
   portada y de los perfiles; solo cambia lo que pinta.
   ========================================================================== */
.dm-btn-warm,
a.dm-btn.dm-btn-warm {
    background-color: var(--dm-primary);
    color: var(--dm-white) !important;
}

.dm-btn-warm:hover,
.dm-btn-warm:focus-visible {
    background-color: var(--dm-primary-dark);
}

.wp-block-button.dm-btn-warm {
    background-color: transparent !important;
}

.wp-block-button.dm-btn-warm .wp-block-button__link {
    background-color: var(--dm-primary) !important;
    color: var(--dm-white) !important;
}

.wp-block-button.dm-btn-warm .wp-block-button__link:hover {
    background-color: var(--dm-primary-dark) !important;
    box-shadow: 0 6px 20px rgba(77, 93, 106, 0.3);
}

/* Sobre oscuro: marfil. (Héroe y banda de contacto ya los resuelve la regla
   de «Pedir cita sobre fondo oscuro»; aquí la cabecera del perfil.) */
.dm-bio-hero a.dm-btn.dm-btn-warm {
    background-color: var(--dm-bg);
    color: var(--dm-text) !important;
}

.dm-bio-hero a.dm-btn.dm-btn-warm:hover,
.dm-bio-hero a.dm-btn.dm-btn-warm:focus-visible {
    background-color: var(--dm-white);
}

/* Gancho «Cuando lo tengas claro»: la baldosa de cita, en pizarra. */
.dm-railnav .dm-rail-primary,
.dm-railnav .dm-rail-primary:hover,
.dm-railnav .dm-rail-primary:focus-visible {
    background: var(--dm-primary);
    border-color: var(--dm-primary);
    color: var(--dm-white);
}

.dm-railnav .dm-rail-primary:hover,
.dm-railnav .dm-rail-primary:focus-visible {
    background: var(--dm-primary-dark);
    border-color: var(--dm-primary-dark);
}

/* Final de los pilares por debajo de 1460 px (o en pantallas bajas): el
   bloque local («Consulta dermatológica para … en Valencia», con dirección,
   horario y «Pedir cita») y, 450 px después, el gancho «Cuando lo tengas
   claro» con otro «Pedir cita», WhatsApp y llamar. En móvil esos tres ya
   están en el dock. Se queda el bloque local y el gancho de la izquierda
   («Más de esta sección»); el de la cita sobra. En los márgenes, desde
   1460 px, el gancho sigue como siempre. */
@media (max-width: 1459px), (max-height: 619px) {
    body.dm-pillar .dm-railnav .dm-rail-cta {
        display: none;
    }
}

/* ==========================================================================
   DOCK MÓVIL COMO BARRA (tema 2.45.0, 27/09/2026 — issue #27, opción 1)
   Flotaba sin fondo sobre el texto (en inglés, a 390 px, el 77 % del ancho
   tapando líneas). Ahora es una barra fija con fondo marfil, filete y
   sombra, con los mismos botones: llamar, WhatsApp y «Pedir cita» (más
   volver arriba cuando toca). El reparto de botones no cambia: lo fija el
   punto 8 del documento de la landing. El pie ya reserva 4,75 rem de aire
   (ver «Final de página con el dock»), más que los 68 px de la barra.
   ========================================================================== */
@media (max-width: 1180px) {
    .dm-dock {
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: flex-end;
        gap: 10px;
        padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        background: rgba(246, 241, 232, 0.94);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--dm-border-light);
        box-shadow: 0 -10px 24px -14px rgba(38, 46, 54, 0.3);
    }

    .dm-dock .dm-dock-btn,
    .dm-dock .dm-dock-cta,
    .dm-dock .dm-up-corner {
        box-shadow: none;
    }

    .dm-dock .dm-dock-btn {
        width: 48px;
        height: 48px;
    }

    /* «Pedir cita» ocupa lo que queda, con tope para que en tableta no sea
       una franja de lado a lado. */
    .dm-dock .dm-dock-cta {
        flex: 1 1 auto;
        max-width: 22rem;
        white-space: nowrap;
    }
}

/* A 320 px, «Book an appointment» no cabía junto a los dos botones redondos
   y los empujaba fuera por la izquierda. */
@media (max-width: 374px) {
    .dm-dock {
        gap: 8px;
    }

    .dm-dock .dm-dock-btn {
        width: 46px;
        height: 46px;
    }

    .dm-dock .dm-dock-cta {
        padding: 0 12px;
        font-size: var(--dm-text-sm);
        letter-spacing: 0;
    }
}

/* ==========================================================================
   FIRMA MÉDICA ARRIBA (tema 2.46.0, 27/09/2026 — issue #41)
   La línea «Contenido médico revisado por…» era una nota a 14 px con el
   nombre subrayado; lo que transmite confianza (retrato, colegiado) solo
   estaba al 68 % de la página. Ahora es una fila de autoría: retrato,
   nombre y nº de colegiado antes de leer. La ficha completa del final se
   queda con la especialidad y el enlace al perfil.
   ========================================================================== */
.entry-content .dm-review-line.dm-review-chip {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.5rem auto 1.75rem;
    padding: 0 0 1.1rem;
    border-bottom: 1px solid var(--dm-border-light);
    font-size: var(--dm-text-sm);
    line-height: 1.4;
}

.dm-review-chip-foto {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 14%;
    background: var(--dm-bg-alt);
}

.dm-review-chip-txt {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.dm-review-chip-t {
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dm-warm, #6A5A4F);
}

.dm-review-line a.dm-review-chip-nombre {
    font-size: var(--dm-text-base);
    font-weight: 700;
    color: var(--dm-text);
    text-decoration: none;
}

.dm-review-line a.dm-review-chip-nombre:hover,
.dm-review-line a.dm-review-chip-nombre:focus-visible {
    color: var(--dm-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dm-review-chip-m {
    color: var(--dm-text-secondary);
}

.dm-review-chip-num {
    font-variant-numeric: tabular-nums;
}

/* Índice de Tarifas: algunas categorías son largas («Lesiones benignas:
   verrugas, lunares, queratosis…») y en una pastilla de radio 999 px, al
   partir en varias líneas, quedaban como un óvalo deformado (issue #38).
   Radio fijo: en una línea sigue pareciendo una pastilla. */
.dm-toc a {
    border-radius: 16px;
}

/* ==========================================================================
   FAMILIAS DE LOS TITULARES (tema 2.48.0, 27/09/2026 — issue #39)
   En la misma pantalla convivían «Dermatología» en Manrope negrita y, al
   lado, el nombre de cada médico en DM Serif, los dos como H3 de tarjeta.
   Regla: DM Serif para H1, H2 de sección y títulos de tarjeta que nombran
   algo; Manrope para subtítulos dentro del texto, rótulos y etiquetas.
   ========================================================================== */
.entry-content .wp-block-column.dm-card > h3,
.entry-content .dm-booking-col > h3 {
    font-family: var(--dm-font-heading);
    font-weight: 400;
    letter-spacing: 0;
}

.entry-content .dm-booking-col > h3 {
    font-size: var(--dm-text-xl);
}

/* «Lo esencial» es un H2 (estructura de la página) que se ve como etiqueta:
   iba en DM Serif a 13,6 px en mayúsculas, una letra de titular a tamaño de
   pie de foto. Pasa a Manrope, como el resto de etiquetas. */
.dm-essentials h2 {
    font-family: var(--dm-font-body);
    font-weight: 700;
    font-size: var(--dm-text-xs);
    letter-spacing: 0.12em;
}

/* Tamaños escritos en el propio contenido (el editor de bloques guarda el
   tamaño en cada párrafo: «font-size:0.95rem» en la portada, en los widgets
   del pie, en Pedir cita…). Se llevan al escalón de la escala desde aquí, en
   un solo punto, en vez de reescribir el contenido que edita el cliente:
   vale también para lo que copie mañana con el mismo bloque (issue #39). */
:is(.entry-content, .site-footer, .widget) [style*="font-size:0.85rem"],
:is(.entry-content, .site-footer, .widget) [style*="font-size:0.9rem"] {
    font-size: var(--dm-text-sm) !important;
}

:is(.entry-content, .site-footer, .widget) [style*="font-size:0.95rem"] {
    font-size: var(--dm-text-base) !important;
}

:is(.entry-content, .site-footer, .widget) [style*="font-size:1.05rem"] {
    font-size: var(--dm-text-md) !important;
}

:is(.entry-content, .site-footer, .widget) [style*="font-size:1.1rem"],
:is(.entry-content, .site-footer, .widget) [style*="font-size:1.15rem"] {
    font-size: var(--dm-text-lg) !important;
}

/* ==========================================================================
   PEDIR CITA v3 (30/09/2026) — dermamer_cita_page() en functions.php
   Dos bloques: «¿Prefieres hablar con nosotros?» (teléfono con el estado de
   la clínica, WhatsApp y horario) y «Reserva online» (Doctoralia). Debajo,
   quién te atiende y la ficha de contacto lado a lado, y el mapa a lo ancho.
   Todo en la misma columna que la cabecera compacta y la entrada.
   ========================================================================== */
.page-id-39 .entry-content > .wp-block-group.dm-section {
    padding-top: 1rem !important;
}

/* La entrada, alineada con el titular de la cabecera, no centrada. */
.page-id-39 .entry-content .dm-section p.has-text-align-center {
    max-width: 44rem;
    margin: 0 0 2rem !important;
    text-align: left;
    color: var(--dm-text-secondary) !important;
    font-size: var(--dm-text-md) !important;
    line-height: 1.6;
}

.dm-cita-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-width: none;
    margin: 0 0 3.5rem;
}

@media (min-width: 1024px) {
    .dm-cita-v3 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
        gap: 2rem;
        align-items: start;
    }
}

.dm-cita-v3 p.dm-cita-k {
    margin: 0 0 0.6rem;
    font-size: var(--dm-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dm-warm, #6A5A4F);
}

/* ---- Hablar con nosotros ---- */
.dm-cita-hablar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dm-cita-v3 .dm-cita-hablar p.dm-cita-k {
    margin-bottom: 0.1rem;
}

.dm-cita-v3 .dm-cita-via {
    align-items: center;
    gap: 1rem;
    padding: 1rem 2.75rem 1rem 1rem;
}

.dm-cita-v3 .dm-cita-via::after {
    top: 50%;
    margin-top: -5px;
}

.dm-cita-v3 .dm-cita-via-ico {
    width: 48px;
    height: 48px;
}

.dm-cita-v3 .dm-cita-via-txt {
    gap: 0.1rem;
}

/* El rótulo pequeño y el número grande: lo que se busca es el número. */
.dm-cita-v3 .dm-cita-via-txt strong {
    color: var(--dm-text-secondary);
    font-size: var(--dm-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.dm-cita-v3 .dm-cita-tel {
    color: var(--dm-primary-deep) !important;
    font-size: var(--dm-text-lg) !important;
    font-weight: 700;
    line-height: 1.3 !important;
    text-decoration: none;
}

.dm-cita-v3 .dm-cita-via:hover .dm-cita-tel {
    text-decoration: underline;
    text-decoration-color: var(--dm-accent);
    text-underline-offset: 3px;
}

.dm-cita-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    font-size: var(--dm-text-xs) !important;
    font-weight: 600;
}

.dm-cita-estado[hidden] {
    display: none;
}

.dm-cita-estado::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.dm-cita-estado.is-abierto { color: #2E6B45 !important; }
.dm-cita-estado.is-cerrado { color: var(--dm-text-secondary) !important; }

.dm-cita-v3 .dm-cita-aviso {
    margin-top: 0.3rem;
    font-size: var(--dm-text-xs) !important;
}

.dm-cita-v3 p.dm-cita-horas {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.2rem 0 0;
    padding: 0 0.25rem;
    color: var(--dm-text-secondary);
    font-size: var(--dm-text-xs);
    line-height: 1.55;
}

.dm-cita-horas svg {
    flex: none;
    margin-top: 1px;
    color: var(--dm-warm, #6A5A4F);
}

/* ---- Reserva online ---- */
.dm-cita-reserva {
    min-width: 0;
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--dm-white, #fff);
    border: 1px solid var(--dm-border, #E4DED3);
    border-radius: var(--dm-radius-lg, 12px);
    box-shadow: var(--dm-shadow-sm);
}

.dm-cita-v3 p.dm-cita-reserva-t {
    margin: 0 0 0.3rem;
    font-family: var(--dm-font-heading);
    font-size: clamp(1.45rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    color: var(--dm-text);
}

.dm-cita-v3 p.dm-cita-reserva-d {
    margin: 0 0 1.25rem;
    color: var(--dm-text-secondary);
    font-size: var(--dm-text-sm);
    line-height: 1.55;
}

.dm-cita-v3 .dm-cita-reserva-widget {
    margin-top: 0;
}

/* El enlace de Doctoralia, como botón: en el móvil abre el calendario; sin
   script, lleva a la ficha. En escritorio solo se ve mientras llega el
   calendario. */
.dm-cita-reserva-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    background: var(--dm-primary);
    color: var(--dm-white, #fff) !important;
    font-weight: 650;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.dm-cita-reserva-btn:hover {
    background: var(--dm-primary-deep);
}

.dm-cita-reserva-btn:focus-visible {
    outline: 2px solid var(--dm-primary);
    outline-offset: 3px;
}

.dm-cita-reserva-widget.is-cargando .dm-cita-reserva-btn {
    background: var(--dm-bg-soft, #F6F1E8);
    color: var(--dm-text-secondary) !important;
    pointer-events: none;
}

.dm-cita-reserva-widget iframe {
    display: block;
    width: 100% !important;
}

.dm-cita-v3 p.dm-cita-reserva-nota {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--dm-border-light, #EFE9DF);
    color: var(--dm-text-secondary);
    font-size: var(--dm-text-xs);
    line-height: 1.55;
}

.dm-cita-reserva-nota a {
    color: var(--dm-primary-deep);
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Debajo: quién te atiende y contacto, lado a lado; el mapa a lo ancho.
   En la española las dos tarjetas comparten columna y en la inglesa van en
   dos: con las columnas como `display: contents`, las dos quedan en la misma
   rejilla. La columna del formulario retirado sigue oculta (display: none
   con !important, más arriba). */
.page-id-39 .entry-content .wp-block-columns:not(.dm-cita-vias) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.page-id-39 .entry-content .wp-block-columns:not(.dm-cita-vias) > .wp-block-column {
    display: contents;
}

.page-id-39 .entry-content .wp-block-columns:not(.dm-cita-vias) > .wp-block-column > .dm-cita-equipo,
.page-id-39 .entry-content .wp-block-columns:not(.dm-cita-vias) > .wp-block-column > .dm-card {
    margin: 0 !important;
    /* Cada una con su alto: el núcleo de WordPress fuerza
       align-items: normal !important en .wp-block-columns. */
    align-self: start;
}

.page-id-39 .entry-content .wp-block-columns:not(.dm-cita-vias) > .wp-block-column > :not(.dm-cita-equipo):not(.dm-card) {
    grid-column: 1 / -1;
}

.page-id-39 .entry-content .wp-block-columns:not(.dm-cita-vias) > .wp-block-column > h3 {
    margin: 1rem 0 -0.75rem !important;
}

/* El mapa bloqueado hasta aceptar cookies era una caja blanca de 585 px. */
.page-id-39 .entry-content .cmplz-placeholder-parent,
.page-id-39 .entry-content .wp-block-column > iframe {
    height: 300px !important;
    min-height: 0 !important;
    border-radius: 12px;
    overflow: hidden;
}

/* «Cómo llegar», dentro de la dirección de la ficha de contacto. */
.dm-info .dm-info-dato a.dm-info-mapa {
    display: block;
    width: fit-content;
    margin-top: 0.35rem;
    color: var(--dm-primary-deep);
    font-size: var(--dm-text-sm);
    font-weight: 650;
}

/* Las preguntas, en la misma columna que todo lo de encima, no centradas. */
.page-id-39 .entry-content .dm-faq.dm-cita-faq {
    margin-left: 0;
    margin-right: auto;
}

/* En el móvil el calendario de Doctoralia necesita el ancho: menos relleno. */
@media (max-width: 600px) {
    .dm-cita-reserva {
        padding: 1.25rem 0.9rem 1rem;
    }

    .dm-cita-reserva-cab,
    .dm-cita-v3 p.dm-cita-reserva-nota {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}

/* «Elige primero el servicio»: solo con el calendario ya pintado. */
.dm-cita-v3 p.dm-cita-reserva-pista {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin: -0.4rem 0 0.9rem;
    color: var(--dm-primary-deep);
    font-size: var(--dm-text-sm);
    font-weight: 650;
    line-height: 1.45;
}

.dm-cita-v3 p.dm-cita-reserva-pista::before {
    content: "↓";
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--dm-bg-soft, #F6F1E8);
    font-size: var(--dm-text-xs);
    font-weight: 700;
}

.dm-cita-reserva:has(.dm-cita-reserva-widget iframe) p.dm-cita-reserva-pista {
    display: flex;
}

@media (max-width: 600px) {
    .dm-cita-v3 p.dm-cita-reserva-pista {
        padding: 0 0.35rem;
    }
}

/* La pastilla del dock baja aquí: que la cabecera fija no tape el titular. */
.dm-cita-reserva {
    scroll-margin-top: 110px;
}

/* ---- La ficha de contacto en el bloque de las vías (01/10/2026) ----
   dermamer_cita_extrae_ficha() la sube desde el contenido. En escritorio va
   bajo WhatsApp, en la columna que el calendario dejaba vacía; en el móvil,
   después de la reserva. Teléfono y WhatsApp ya están en grande justo
   encima: en la ficha quedan dirección, correo y horario. */
.dm-cita-v3 p.dm-cita-horas[hidden] {
    display: none;
}

.dm-cita-contacto {
    min-width: 0;
}

.dm-cita-contacto > .dm-card {
    margin: 0 !important;
    padding: 1.25rem 1.25rem 1.1rem !important;
}

.dm-cita-contacto > .dm-card > h3 {
    margin: 0 0 0.75rem !important;
}

.dm-cita-contacto .dm-info-tel,
.dm-cita-contacto .dm-info-wa {
    display: none;
}

/* El HTML va en el orden del móvil (05/10/2026): reserva, aseguradoras,
   WhatsApp y teléfono, ficha. En escritorio la columna izquierda recoge
   hablar, aseguradoras y ficha, y el calendario ocupa la derecha entera. */
@media (min-width: 1024px) {
    .dm-cita-v3 {
        grid-template-rows: auto auto 1fr;
        row-gap: 1.25rem;
    }

    .dm-cita-v3 > .dm-cita-hablar { grid-column: 1; grid-row: 1; }
    .dm-cita-v3 > .dm-cita-seguros { grid-column: 1; grid-row: 2; }
    .dm-cita-v3 > .dm-cita-reserva { grid-column: 2; grid-row: 1 / span 3; }
    .dm-cita-v3 > .dm-cita-contacto { grid-column: 1; grid-row: 3; align-self: start; }

    /* En escritorio el teléfono va delante de WhatsApp, como siempre. */
    .dm-cita-hablar > .dm-cita-via.is-wa { order: 1; }
    .dm-cita-hablar > p.dm-cita-horas { order: 2; }
}

/* Abajo queda solo quién te atiende: a todo el ancho, los tres en fila. */
@media (min-width: 900px) {
    .page-id-39 .entry-content .dm-cita-equipo ul {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* ---- «Pulsa aquí para llamar / abrir WhatsApp» (01/10/2026) ----
   La tarjeta entera se pulsa, pero no se leía como botón: el aviso tiene
   forma de botón suave y se rellena al pasar por encima de la tarjeta. */
.dm-cita-v3 .dm-cita-via-txt .dm-cita-pulsa {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: 0.55rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: var(--dm-bg-soft, #F6F1E8);
    color: var(--dm-primary-deep);
    font-size: var(--dm-text-xs);
    font-weight: 650;
    line-height: 1.3;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dm-cita-v3 .dm-cita-via-txt .dm-cita-pulsa span {
    color: inherit;
    font-size: inherit;
    transition: transform 0.2s ease;
}

.dm-cita-v3 .dm-cita-via:hover .dm-cita-pulsa,
.dm-cita-v3 .dm-cita-via:focus-within .dm-cita-pulsa {
    background: var(--dm-primary);
    color: var(--dm-white, #fff);
}

.dm-cita-v3 .dm-cita-via:hover .dm-cita-pulsa span {
    transform: translateX(2px);
}

.dm-cita-v3 .dm-cita-via.is-wa:hover .dm-cita-pulsa,
.dm-cita-v3 .dm-cita-via.is-wa:focus-within .dm-cita-pulsa {
    background: #1E7E45;
}

/* Con el botón dentro, la flecha de la esquina sobra. */
.dm-cita-v3 .dm-cita-via::after {
    display: none;
}

.dm-cita-v3 .dm-cita-via {
    padding-right: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .dm-cita-v3 .dm-cita-via-txt .dm-cita-pulsa,
    .dm-cita-v3 .dm-cita-via-txt .dm-cita-pulsa span {
        transition: none;
    }
}

/* ---- Logotipos de las aseguradoras: tras la reserva en el móvil, bajo
   teléfono y WhatsApp en escritorio ---- */
.dm-cita-seguros {
    padding: 0.25rem 0.25rem 0;
}

.dm-cita-v3 .dm-cita-seguros p.dm-cita-k {
    margin-bottom: 0.6rem;
}

.dm-cita-seguros-lista {
    /* Mosaico y no rejilla: cada logotipo toma el ancho que pide su forma
       (Generali es 7:1, Cigna cuadrado) y las filas se reparten el sobrante. */
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-cita-seguros-lista li {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0.4rem 0.75rem;
    margin: 0;
    background: var(--dm-white, #fff);
    border: 1px solid var(--dm-border-light, #EFE9DF);
    border-radius: var(--dm-radius-sm, 6px);
}

.dm-cita-seguros-lista img.dm-cita-aseg-logo {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 130px;
    max-height: 24px;
    object-fit: contain;
    border-radius: 0;
}

/* Las cuadradas con fondo propio (Cigna, Santalucía) se leen diminutas a la
   altura de un apaisado. */
.dm-cita-seguros-lista img.dm-cita-aseg-logo.dm-insurer-square {
    max-height: 34px;
    border-radius: 4px;
}

.dm-cita-seguros-lista .dm-insurer-texto {
    font-size: var(--dm-text-xs);
    font-weight: 700;
    color: var(--dm-text-secondary);
    text-align: center;
}

.dm-cita-seguros-a {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--dm-primary-deep);
    font-size: var(--dm-text-xs);
    font-weight: 650;
}


/* ---- Logotipos muy apaisados (Generali, 7,3:1) ----
   Con el tope general de 220 px se quedaban en una tira de 30 px de alto. */
.dm-insurer-logo.dm-insurer-ancho {
    height: 40px;
    max-width: 290px;
}

.dm-aseg-img.dm-insurer-ancho {
    max-height: 2.4rem;
}

@media (max-width: 768px) {
    .dm-insurer-logo.dm-insurer-ancho {
        height: 30px;
        max-width: 220px;
    }
}

/* DKV, el macizo, un quinto más bajo como en la marquesina. */
.dm-cita-seguros-lista img.dm-cita-aseg-logo.dm-insurer-macizo {
    max-height: 19px;
}

/* La última fila no se estira: un hueco invisible se queda con el sobrante
   (si no, una compañía sola ocupaba todo el ancho). */
.dm-cita-seguros-lista::after {
    content: "";
    flex: 10 1 auto;
}

/* ==========================================================================
   UNIDAD DE TRICOLOGÍA — hub de medicina capilar (tema 2.56.0, 01/10/2026)
   El hub pasa de una entrada corta a una página de ~1.000 palabras. Todo el
   texto va en una sola columna de lectura alineada a la izquierda, con el
   borde de la rejilla de tratamientos: la entrada centrada de los hubs
   cortos, «Lo esencial» y las preguntas centrados dejaban tres ejes.
   ========================================================================== */
.dm-hub-trico .entry-content .dm-section .wp-block-group__inner-container > p,
.dm-hub-trico .entry-content .dm-section .wp-block-group__inner-container > h2,
.dm-hub-trico .entry-content .dm-section .wp-block-group__inner-container > ul,
.dm-hub-trico .entry-content .dm-section .wp-block-group__inner-container > .dm-essentials,
.dm-hub-trico .entry-content .dm-section .wp-block-group__inner-container > .dm-faq {
    max-width: 46rem;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

.dm-hub-trico .entry-content .dm-section .wp-block-group__inner-container > h2 {
    margin-top: 3rem;
}

/* El primer titular tras la rejilla iba pegado a las tarjetas. */
.dm-hub-trico .entry-content .dm-section .wp-block-group__inner-container > .dm-matriz + h2,
.dm-hub-trico .entry-content .dm-section .wp-block-group__inner-container > * + h2#como-diagnosticamos {
    margin-top: 3.5rem;
}

.dm-hub-trico .entry-content .dm-faq {
    margin-top: 3.5rem;
}

/* La firma del médico, en la misma columna que el texto de la unidad. */
.dm-hub-trico .entry-content > .dm-review-line {
    max-width: 46rem;
    margin-left: max(0px, calc((100% - 65rem) / 2)) !important;
    margin-right: auto !important;
}

@media (min-width: 769px) {
    .dm-hub-trico .entry-content > .dm-review-line {
        margin-left: max(2.5rem, calc((100% - 65rem) / 2)) !important;
    }
}