/* =====================================================================
   SBELTIA — Tema de marca
   Puerto del sistema de diseño de la linktree (../linktree/index.html)

   QUÉ SE HA TRAÍDO
   No solo los códigos de color: también las superficies, las sombras en
   capas, los filetes dorados, el fondo atmosférico, la tipografía y las
   curvas de movimiento. Es el mismo sistema, aplicado a un sitio largo.

   CÓMO FUNCIONA
   Este archivo NO reescribe custom.css. custom.css ya expresa casi todo
   su color mediante variables CSS, así que basta con redefinirlas aquí y
   cargar este archivo DESPUÉS. Un único punto de verdad para el color.

   LA REGLA QUE LO GOBIERNA TODO
   En la linktree la página es luz: crema y off-white ocupan el 94% del
   píxel. El dorado y el marrón viven en la tipografía, en los filetes y
   en un botón. No hay un solo bloque oscuro.

   Ese reparto — no los tonos — es lo que hace que se vea como se ve, y es
   lo que se replica aquí: superficies claras en toda la página, incluido
   el pie, y color reservado para titulares, iconos y llamadas a la acción.

   CONTRASTE (calculado, no estimado)
     ink       sobre bg ......... 11.98:1   AAA
     ink       sobre crema ...... 11.01:1   AAA
     ink       sobre gray ........ 9.55:1   AAA
     marca     sobre crema ....... 8.76:1   AAA  (logotipo)
     blanco    sobre cta-b ....... 7.88:1   AAA  (cierre del botón)
     ink-soft  sobre crema ....... 5.47:1   AA   (texto secundario)
     blanco    sobre gold-deep ... 5.27:1   AA   (círculos de icono)
     blanco    sobre cta-a ....... 4.84:1   AA   (arranque del botón)
     gold-deep sobre crema ....... 4.65:1   AA   (titulares, acentos)
     gold      sobre crema ....... 2.77:1   FALLA -> solo ornamento
   ===================================================================== */

:root {
    /* ---------------------------------------------------------------
       1. PALETA — copiada literalmente de la linktree.
       Es la fuente de verdad de la marca. Si allí cambia un color,
       se cambia aquí y el sitio entero se actualiza solo.
       --------------------------------------------------------------- */
    --sb-bg:         #FCFAF7;   /* fondo de página, off-white cálido      */
    --sb-cream:      #F5F0E9;   /* superficies y secciones                */
    --sb-gray:       #E8E0D6;   /* superficie un paso más marcada         */
    --sb-gold:       #B58A4A;   /* DECORATIVO: bordes, filetes, brillos.
                                   2.77:1 sobre crema -> nunca es texto.  */
    --sb-gold-deep:  #8C6432;   /* texto dorado accesible, 4.65:1 AA      */
    --sb-brand:      #63381E;   /* marrón oficial del logotipo SBELTIA    */
    --sb-ink:        #3C322A;   /* texto principal                        */
    --sb-ink-soft:   #6B5F53;   /* texto secundario                       */

    /* Llamada a la acción: el degradado de la linktree, con texto blanco. */
    --sb-cta-a:      #96683A;
    --sb-cta-b:      #6E4A22;

    /* Superficies translúcidas (el "cristal" de las tarjetas). */
    --sb-surface:       rgba(255, 255, 255, 0.62);
    --sb-surface-hover: rgba(255, 255, 255, 0.82);
    --sb-surface-brd:   rgba(181, 138, 74, 0.20);
    --sb-surface-brd-h: rgba(181, 138, 74, 0.45);

    /* Sombras en capas: una corta y densa para el apoyo, otra larga y
       difusa para la elevación. Una sola sombra siempre parece plana. */
    --sb-sh-xs:   0 1px 2px rgba(60, 50, 42, 0.04);
    --sb-sh-sm:   0 2px 8px rgba(60, 50, 42, 0.05), 0 1px 2px rgba(60, 50, 42, 0.04);
    --sb-sh-md:   0 10px 30px -12px rgba(60, 50, 42, 0.16), 0 2px 8px rgba(60, 50, 42, 0.05);
    --sb-sh-lg:   0 24px 60px -20px rgba(60, 50, 42, 0.24), 0 6px 18px rgba(60, 50, 42, 0.07);
    --sb-sh-gold: 0 14px 40px -14px rgba(140, 100, 50, 0.45);

    /* Curvas de movimiento de la linktree. */
    --sb-e-out:  cubic-bezier(.22, .61, .36, 1);
    --sb-e-soft: cubic-bezier(.4, 0, .2, 1);

    /* ---------------------------------------------------------------
       2. REMAPEO — los tokens que custom.css ya consume.
       Aquí es donde el sitio entero cambia de piel.
       --------------------------------------------------------------- */

    /* Rellenos sólidos: círculos de icono, capas de hover, paginación
       activa. Todos llevan blanco encima -> 7.88:1. Es el cierre del
       degradado del botón de la linktree. */
    --primary-color:      var(--sb-cta-b);

    /* Acento: hover de enlaces y fondo de los botones circulares con
       flecha. Como texto sobre crema rinde 4.65:1; con blanco encima,
       5.27:1. Es exactamente el rol de --c-gold-deep en la linktree. */
    --accent-color:       var(--sb-gold-deep);

    --secondary-color:    var(--sb-cream);
    --text-color:         var(--sb-ink);
    --white-color:        #FFFFFF;

    /* custom.css usaba --black-color en el background del body pero nunca
       llegó a definirla, así que el body se quedaba sin fondo. Definida. */
    --black-color:        var(--sb-ink);

    /* Los filetes son el recurso gráfico central de la linktree:
       oro a baja opacidad, nunca una línea gris. */
    --divider-color:      var(--sb-surface-brd);
    --dark-divider-color: var(--sb-surface-brd);

    /* Rojo de error, desaturado para no chirriar junto a la paleta cálida. */
    --error-color:        #B4453F;

    /* ---------------------------------------------------------------
       3. TIPOGRAFÍA — la de la linktree.
       custom.css ya tiene las dos familias en variables, así que el
       cambio es de dos líneas. Cormorant Garamond para titulares
       (garamond de alto contraste, ligero) y Montserrat para el cuerpo.
       Las fuentes se cargan en el <head> de cada página.
       --------------------------------------------------------------- */
    --default-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --accent-font:  "Cormorant Garamond", "Times New Roman", Georgia, serif;
}

/* =====================================================================
   4. BASE Y FONDO ATMOSFÉRICO
   ===================================================================== */

body {
    background-color: var(--sb-bg);
    color: var(--sb-ink);
}

/* --- Las imágenes conservan su proporción ---
   custom.css declara img{max-width:100%} pero no la altura. Mientras
   las etiquetas no llevaron atributos daba igual: sin altura definida,
   el navegador usaba la proporción natural. Al añadir width y height
   reales para reservar el hueco y evitar el salto de maquetado, esos
   atributos pasan a valer como CSS de especificidad cero: fijan una
   altura concreta, y una caja con ancho y alto definidos ignora el
   aspect-ratio de la hoja. Resultado: la miniatura de 1280x960 se
   estiraba a 320x960 dentro de una tarjeta pensada para 320x213.

   Con height:auto la altura vuelve a salir de la proporción. La regla
   va sin !important y con la misma especificidad que la de custom.css
   (esta hoja carga después), así que cualquier regla con clase que fije
   una altura de verdad —las de la portada, el hero o el pie— sigue
   ganando. Los atributos siguen ahí y siguen reservando el hueco: el
   navegador deriva de ellos la proporción, que es justo lo que se
   quería para el CLS. */
img {
    height: auto;
}

/* El lavado de fondo de la linktree: cuatro radiales muy suaves que
   impiden que el off-white se lea como un plano muerto. Va en un
   pseudoelemento fijo detrás de todo, así que no toca ningún HTML.
   Se aprecia sobre todo en los márgenes que dejan las secciones
   redondeadas y en el aire entre bloques. */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(70% 50% at 50% -8%,  rgba(181, 138, 74, 0.13), transparent 62%),
        radial-gradient(52% 42% at 88% 18%,  rgba(245, 240, 233, 0.95), transparent 60%),
        radial-gradient(60% 46% at 6% 42%,   rgba(232, 224, 214, 0.75), transparent 62%),
        radial-gradient(80% 55% at 50% 108%, rgba(181, 138, 74, 0.10), transparent 66%);
}

/* Grano finísimo: la textura de papel que evita el aspecto de plástico.
   mix-blend-mode multiply para que oscurezca en vez de velar. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.30;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* =====================================================================
   5. SUPERFICIES
   =====================================================================

   EL PUNTO CLAVE DE TODO ESTE ARCHIVO.

   Medido sobre capturas reales de ambas propiedades:

                            marrón oscuro    claro/crema
       linktree ..............  2.1%           94.2%
       web (paleta sola) ..... 71.1%           13.8%

   Adoptar los códigos de color de la linktree no cambiaba nada, porque
   lo que define su aspecto no son los tonos sino el REPARTO. Allí el
   marrón es tinta y un botón; aquí rellenaba pantallas enteras.

   Así que las superficies grandes pasan a crema, con el degradado suave
   y el filete dorado de las tarjetas de la linktree, y el color se
   reserva para tipografía, iconos y llamadas a la acción.

   .dark-section conserva su nombre en el HTML (18 páginas lo usan) pero
   ya no significa "fondo oscuro": significa "banda destacada". Renombrar
   la clase habría obligado a tocar 23 plantillas sin ganar nada.
   --------------------------------------------------------------------- */

/* Filete dorado en todo el perímetro — nunca una franja lateral. */
.bg-section {
    border: 1px solid var(--sb-surface-brd);
    box-shadow: var(--sb-sh-sm);
}

/* La banda destacada, con el degradado de las tarjetas de la linktree:
   crema arriba, gray abajo, en diagonal a 160°. Es lo que le da volumen
   a una superficie clara sin recurrir a una sombra interior. */
.bg-section.dark-section {
    background-color: var(--sb-cream);
    background-image: linear-gradient(160deg, var(--sb-cream), var(--sb-gray));
    border-color: var(--sb-surface-brd);
    box-shadow: var(--sb-sh-md);
}

/* --- Texto que antes iba en blanco sobre fondo oscuro --- */

/* Titular de las cabeceras de página (18 páginas). 4.65:1 sobre crema. */
.page-header-box h1 {
    color: var(--sb-gold-deep);
}

/* Migas de pan: texto legible y separador dorado. 5.47:1 sobre crema. */
.page-header-box ol li.breadcrumb-item,
.page-header-box ol li.breadcrumb-item a {
    color: var(--sb-ink-soft);
}

.page-header-box ol .breadcrumb-item + .breadcrumb-item::before {
    color: var(--sb-gold);
}

/* Ficha del artículo: autor y fecha, dentro de la cabecera. */
.page-header .post-single-meta ol li,
.page-header .post-single-meta ol li i {
    color: var(--sb-ink-soft);
}

/* Antetítulo de sección: oro legible, no el oro decorativo. */
.dark-section .section-title h3 {
    color: var(--sb-gold-deep);
}

/* Ese icono se invertía a blanco para verse sobre marrón. Ya no hace falta. */
.dark-section .section-title h3::before {
    filter: none;
}

/* Titulares dentro de bandas destacadas, incluidas las palabras
   resaltadas en <span> (que iban en blanco). */
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title h1 span,
.dark-section .section-title h2 span {
    color: var(--sb-gold-deep);
}

.dark-section .section-title h4,
.dark-section .section-title p,
.dark-section .section-title-content p,
.dark-section .our-journey-list ul li,
.dark-section .journey-item-content h3,
.dark-section .approach-support-box-content h3,
.dark-section .approach-support-box-content p {
    color: var(--sb-ink);
}

/* Valoración de Google en el hero. Su color venía de --secondary-color,
   que en el tema es la crema de las superficies: el "4.5" quedaba del
   mismo tono que el fondo. Las estrellas ya van en oro. */
.hero-review-box ul li {
    color: var(--sb-ink);
}

/* Botón de vídeo del hero: etiqueta e icono.
   El icono no tiene fondo propio, así que sobre crema desaparecía. */
.hero-body .video-play-button p {
    color: var(--sb-ink);
}

.dark-section .video-play-button a i {
    color: var(--sb-gold-deep);
}

/* --- Testimonios ---
   .our-testimonials traía su propio background-image (una foto oscura) y
   TODO su texto en blanco. Como el degradado de .bg-section.dark-section
   tiene más especificidad, esa foto ya no se pinta: quedaba texto blanco
   sobre crema. Además, estos elementos viven fuera de .section-title, así
   que las reglas de arriba no los alcanzan.

   Solo afecta al carrusel: la retícula de testimonials.php usa
   .page-testimonials, que custom.css ya recolorea por su cuenta. */
.our-testimonials .testimonial-item-content p,
.our-testimonials .testimonial-author .author-content p,
.our-testimonials .testimonial-author-details p {
    color: var(--sb-ink);
}

.our-testimonials .testimonial-author .author-content h3,
.our-testimonials .testimonial-author-details h3 {
    color: var(--sb-gold-deep);
}

/* Las flechas del carrusel eran círculos blancos: sobre crema
   desaparecían. Pasan a la superficie de cristal con filete dorado de la
   linktree (la flecha ya es marrón oscuro, así que se lee sin tocarla). */
.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev {
    background: var(--sb-surface);
    border: 1px solid var(--sb-surface-brd);
}

.testimonial-slider .testimonial-button-next:hover,
.testimonial-slider .testimonial-button-prev:hover {
    background: var(--sb-surface-hover);
    border-color: var(--sb-surface-brd-h);
}

/* NO se tocan los elementos que sí llevan fondo propio de color:
   .post-tags .tag-links a, .post-social-sharing ul li a y
   .page-pagination ul li.active a siguen en blanco, que es lo correcto
   sobre su propio relleno. */

/* =====================================================================
   6. PIE DE PÁGINA
   =====================================================================
   La linktree no tiene un solo bloque oscuro: su pie es un degradado que
   se funde hacia la crema. Aquí se hace igual, lo que obliga a devolver a
   tinta todo el texto que custom.css pintaba de blanco (doce reglas, una
   por cada zona del pie).
   --------------------------------------------------------------------- */

.main-footer.bg-section.dark-section {
    background-color: var(--sb-cream);
    background-image: linear-gradient(180deg, var(--sb-bg), var(--sb-cream) 45%, var(--sb-gray));
    border-color: var(--sb-surface-brd);
}

/* El ornamento superior del pie era blanco (invisible sobre crema):
   copia recoloreada al oro decorativo. */
.main-footer {
    background-image: url('../images/footer-bg-shape-gold.svg');
}

/* La plantilla topa el logotipo del pie en 159px y no le da altura, así que
   se quedaba con la del atributo HTML y salía estirado. La columna mide 333:
   a 220 la bajada ("Cirugía Plástica, Estética y Reconstructiva", serif fina)
   por fin se lee. `height: auto` es lo que evita la deformación. */
.footer-logo img {
    max-width: 220px;
    height: auto;
}

/* Titulares de columna y de la newsletter. */
.main-footer .footer-links h3,
.main-footer .section-title h2,
.main-footer .section-title h3 {
    color: var(--sb-gold-deep);
}

/* Cuerpo del pie: descripción, enlaces, datos de contacto y aviso legal.
   Ojo con `.footer-links ul li`: hay elementos que NO son enlaces
   ("Únicamente previa cita", la dirección). Si solo se recolorean los <a>,
   esos dos se quedan en blanco sobre crema. */
.main-footer .about-footer-content p,
.main-footer .footer-links ul li,
.main-footer .footer-links ul li a,
.main-footer .footer-contact-item p,
.main-footer .footer-copyright-text p,
.main-footer .footer-privacy-policy ul li,
.main-footer .footer-privacy-policy ul li::before {
    color: var(--sb-ink);
}

/* Los iconos de contacto sí son ornamento: van en oro. */
.main-footer .footer-contact-item ul li i {
    color: var(--sb-gold-deep);
}

.main-footer .footer-copyright-text p,
.main-footer .footer-privacy-policy ul li {
    color: var(--sb-ink-soft);
}

.main-footer .footer-links ul li a:hover,
.main-footer .footer-privacy-policy ul li:hover {
    color: var(--sb-gold-deep);
}

/* Iconos sociales: círculo de cristal con filete dorado, como en la
   linktree, en lugar del círculo blanco sobre marrón. */
.main-footer .footer-social-links ul li a {
    color: var(--sb-ink-soft);
    background-color: var(--sb-surface);
    border-color: var(--sb-surface-brd);
}

.main-footer .footer-social-links ul li a:hover {
    color: var(--sb-gold-deep);
    background-color: var(--sb-surface-hover);
    border-color: var(--sb-surface-brd-h);
}

/* Campo de la newsletter: el fondo venía de --dark-divider-color (pensado
   para ir sobre oscuro) y el texto en blanco. Sobre crema hay que
   invertirlo, o el visitante escribe en blanco sobre blanco. */
.main-footer .footer-newsletter-form .form-group .form-control {
    color: var(--sb-ink);
    background: var(--sb-surface);
    border: 1px solid var(--sb-surface-brd);
}

.main-footer .footer-newsletter-form .form-group .form-control::placeholder {
    color: var(--sb-ink-soft);
    opacity: 1;
}

/* El hover del botón de envío pasaba a blanco e invertía la flecha.
   Sobre crema, un círculo blanco desaparece: se oscurece y la flecha
   blanca se queda como está. */
.main-footer .footer-newsletter-form .form-group .readmore-btn:hover {
    background: var(--sb-cta-b);
}

.main-footer .footer-newsletter-form .form-group .readmore-btn:hover img {
    filter: none;
}

/* Separación entre el último bloque y el pie.
   Aquí cada .bg-section es una tarjeta con filete dorado y sombra. En las
   páginas que terminan en el formulario de cita (ficha de procedimiento,
   nosotros, book-appointment) el filete inferior de esa tarjeta y el filete
   superior del pie caían en la misma línea, sin nada entre medias: medido,
   el hueco era exactamente 0 px y las dos tarjetas se leían como una sola.
   En la portada no pasaba porque el bloque de blog se interpone.

   Se separa con margen y no con relleno a propósito: custom.css deja
   .our-appointment con «padding: 100px 0 0» porque la foto sangra hasta el
   borde inferior de la tarjeta (el degradado rosa de ::before está anclado
   a bottom: 0). Un padding-bottom dejaría la imagen flotando a media caja. */
.bg-section + .main-footer {
    margin-top: 100px;
}

/* En móvil la tarjeta de cita ya baja su relleno superior de 100 a 50 px
   (custom.css); el hueco con el pie acompaña esa proporción. */
@media (max-width: 991px) {
    .bg-section + .main-footer {
        margin-top: 70px;
    }
}

/* =====================================================================
   7. ORNAMENTOS
   =====================================================================
   Los SVG originales son blancos: hechos para fondo oscuro, sobre crema
   desaparecían. Se usan copias recoloreadas al oro decorativo #B58A4A.
   Los archivos originales quedan intactos.
   --------------------------------------------------------------------- */

.hero {
    background-image: url('../images/hero-bg-shape-gold.svg');
}

.hero-image {
    background-image: url('../images/hero-image-bg-star-gold.svg');
}

.page-header {
    background-image: url('../images/page-header-bg-gold.svg');
}

/* Los hero con foto de fondo llevan un velo del color primario encima.
   En marrón opaco tapaba la imagen; ahora es un velo claro que mantiene
   legible el texto sin apagar la foto. */
.hero.hero-bg-image::before,
.hero.hero-bg-image.hero-slider-layout .hero-slide::before {
    background: linear-gradient(
        100deg,
        rgba(252, 250, 247, 0.94) 0%,
        rgba(252, 250, 247, 0.72) 45%,
        rgba(252, 250, 247, 0.18) 100%
    );
}

/* =====================================================================
   8. LLAMADAS A LA ACCIÓN
   =====================================================================
   El botón de la linktree, tal cual: degradado a 145°, texto blanco y
   una sombra dorada que lo despega de la página. Blanco sobre el
   arranque da 4.84:1 y sobre el cierre 7.88:1 — todo el recorrido AA.
   --------------------------------------------------------------------- */

.btn-default {
    background-image: linear-gradient(145deg, var(--sb-cta-a), var(--sb-cta-b));
    background-color: var(--sb-cta-b);   /* respaldo si no hay degradados */
    color: #FFFFFF;
    box-shadow: var(--sb-sh-gold);
    transition: transform 350ms var(--sb-e-out), box-shadow 350ms var(--sb-e-out);
}

.btn-default:hover,
.btn-default:hover span,
.btn-default.btn-highlighted:hover {
    color: #FFFFFF;
}

.btn-default:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-sh-lg), var(--sb-sh-gold);
}

/* Acción secundaria. Aparece junto a un .btn-default cuando hay dos salidas
   razonables y una de ellas no es la principal —la página de error es el
   caso—. Mismo tamaño y misma caja para que la fila no baile; sin relleno de
   color, para que a un golpe de vista se vea cuál es el botón y cuál el
   acompañante. El texto va en --sb-gold-deep (4.65:1 sobre el fondo claro),
   nunca en --sb-gold, que no llega a AA. */
.btn-default.btn-suave {
    background-image: none;
    background-color: transparent;
    color: var(--sb-gold-deep);
    border: 1px solid var(--sb-surface-brd);
    box-shadow: none;
}

.btn-default.btn-suave:hover,
.btn-default.btn-suave:hover span {
    color: var(--sb-brand);
    border-color: var(--sb-gold-deep);
    box-shadow: var(--sb-sh-sm);
}

/* =====================================================================
   9. ACCESIBILIDAD
   ===================================================================== */

/* Anillo de foco de la linktree, con separación para que se lea sobre
   cualquiera de las superficies claras. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sb-gold-deep);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Selección de texto en tono marca en lugar del azul del sistema. */
::selection {
    background-color: rgba(181, 138, 74, 0.22);
    color: var(--sb-ink);
}

/* =====================================================================
   10. DETALLE
   ===================================================================== */

@supports (scrollbar-color: auto) {
    html {
        scrollbar-color: var(--sb-gold) var(--sb-cream);
    }
}

/* Cualquier animación heredada se respeta, pero nunca por encima de la
   preferencia del sistema. */
@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;
    }
}

/* La plantilla aplica text-transform:capitalize a toda la lista del pie,
   y eso convertía la dirección de correo en "Info@Sbeltia.Pe". El enlace
   seguía funcionando, pero un correo con mayúsculas intercaladas se lee
   como un error. Se respeta la capitalización del resto de la lista. */
.footer-contact-item ul li a[href^="mailto:"] {
    text-transform: none;
}

/* Red de seguridad del precargador.

   El precargador tapa la pantalla entera y solo el JavaScript lo quita.
   Si un script falla antes de llegar a esa línea (o la visitante tiene
   JS desactivado), la web queda escondida detrás de una pantalla marrón
   y parece caída aunque esté perfectamente servida.

   A los cuatro segundos se aparta solo. Si el JavaScript funciona, el
   fundido ya ocurrió mucho antes y esto no se llega a notar. */
.preloader {
    animation: sb-precargador-fuera 0s linear 4s forwards;
}

@keyframes sb-precargador-fuera {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ---------------------------------------------------------------------
   Ornamentos de la plantilla: SVG -> PNG

   Estos dos archivos no eran vectores dibujados, sino calcos automáticos
   de una imagen de mapa de bits: un único trazado con decenas de miles
   de coordenadas. El resultado era absurdo para lo que se ve en
   pantalla — 292 KB para un adorno de 24 px y 502 KB para uno de 76 px,
   casi 800 KB en CADA página del sitio.

   Se sustituyen por PNG al doble/triple del tamaño real, que se ven
   idénticos y bajan a 9 KB y 21 KB. Se cambia aquí y no en custom.css
   porque esa hoja es la de la plantilla comprada y no se toca.
   --------------------------------------------------------------------- */
.section-title h3::before {
    background-image: url('../images/icon-sub-heading.png');
}

.about-us-images {
    background-image: url('../images/about-us-image-bg-shape.png');
}

/* La banda apaisada de "Sobre nosotros" es muy achatada (1/0.596) y
   comparte archivo con el hero de Contacto, que es casi cuadrado. Con el
   encuadre centrado que trae la plantilla, la banda le corta la coronilla
   a la doctora. Anclando la imagen arriba se conserva la cabeza entera y
   sigue entrando el gesto de bienvenida, que es lo que da sentido a la
   foto. El hero de Contacto no se toca: ahí el recorte centrado va bien. */
.about-experience-image img {
    object-position: center top;
}

/* ---------------------------------------------------------------------
   Áreas de tratamiento

   La plantilla traía aquí una galería de "casos de éxito" con fichas
   que solo mostraban un titular. Se reutiliza la misma maqueta para las
   cuatro áreas reales de la clínica y se le añade la línea de
   procedimientos, que aparece al pasar el cursor: el titular basta para
   orientarse de un vistazo y el detalle llega solo a quien se detiene.

   En táctil no hay hover, así que ahí la línea se muestra siempre.
   --------------------------------------------------------------------- */
.areas-tratamiento .case-study-item-content h3 a {
    color: var(--white-color);
}

.areas-tratamiento .area-procedimientos {
    margin: 6px 0 0;
    max-width: 92%;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.5em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

@media (hover: hover) {
    .areas-tratamiento .case-study-item:hover .area-procedimientos {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (hover: none) {
    .areas-tratamiento .area-procedimientos {
        opacity: 1;
        transform: none;
    }
}

/* El degradado original se apagaba al 66% de la altura, justo donde ahora
   cae la línea de procedimientos, y el texto quedaba sobre la foto sin
   respaldo. Se sube el arranque y se le da algo más de cuerpo.

   Los porcentajes centrales subieron después de medirlo: las cuatro
   fotos son de piel clara con luz alta y, con el degradado anterior, el
   rótulo blanco de "Mama" caía sobre un fondo de 4,25:1 —por debajo del
   4,5:1 que las WCAG piden para texto normal— y el de "Medicina
   estética" se quedaba en 4,60:1, al filo. Con estos valores el peor
   punto de las cuatro pasa de 6:1 sin que la foto se apague: el
   degradado sigue siendo transparente en los dos tercios superiores,
   que es donde está el motivo de cada imagen. */
.areas-tratamiento .case-study-image figure::before {
    background: linear-gradient(180deg,
        rgba(99, 56, 30, 0) 38%,
        rgba(99, 56, 30, 0.42) 60%,
        rgba(99, 56, 30, 0.74) 78%,
        var(--sb-brand) 100%);
}

/* Aviso breve de que la ficha ya dejó escogido el motivo de consulta. */
.campo-preseleccionado {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(181, 138, 74, 0.22);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ---------------------------------------------------------------------
   Credenciales del hero

   Sustituyen a la valoración de Google que traía la plantilla. Se
   presentan como tres píldoras separadas para que se lean como datos
   comprobables y no como una sola frase publicitaria.
   --------------------------------------------------------------------- */
.hero-credenciales ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-credenciales ul li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--sb-surface-brd-h);
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.55);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.4em;
}

.hero-credenciales ul li i {
    font-size: 13px;
}

/* ---------------------------------------------------------------------
   Mayúsculas iniciales: convención inglesa que no aplica al español

   La plantilla pone «text-transform: capitalize» en treinta selectores.
   En inglés el título en caja alta por palabra es normal; en español es
   un error ortográfico y se nota. Producía cosas como:

       «Rinoplastía Estética Y Funcional»   (la «Y» no va en mayúscula)
       «Lunes A Sábado · Únicamente Con Cita Previa»
       «Términos Y Condiciones» · «Número De Celular»

   Se desactiva la regla en todos ellos y los textos se escriben ya con
   la caja correcta en el HTML, que es donde debe decidirse. No se toca
   «uppercase», que sí es un recurso gráfico deliberado en los rótulos.
   --------------------------------------------------------------------- */
.btn-default,
.main-menu ul li a,
.slicknav_nav .slicknav_row,
.slicknav_nav li a,
.hero-body .video-play-button p,
.service-content-title h2,
.section-footer-text p a,
.intro-video-box .video-play-button a,
.testimonial-author-details h3,
.testimonial-author .author-content h3,
.facts-counter-content p,
.appointment-form form .form-control::placeholder,
.footer-links h3,
.footer-links ul li,
.footer-privacy-policy ul li,
.page-header-box ol li.breadcrumb-item,
.mission-vison-content h3,
.approach-support-box-content h3,
.journey-item-content h3,
.team-content h3,
.page-single-category-list ul li a,
.sidebar-cta-content h3,
.service-enhance-item-content h3,
.tag-links,
.post-tags .tag-links a,
.case-study-detail-item h3,
.case-study-detail-content p,
.skills-progress-bar .skill-data .skill-title,
.contact-info-content h3,
.appointment-item-content h3 {
    text-transform: none;
}

/* Excepción: los rótulos «antes» y «después» del comparador son una sola
   palabra cada uno, así que aquí la mayúscula inicial sí es correcta y se
   conserva. El texto lo pone custom.css en un ::before. */
.transformation-image .transform-img-1::before,
.transformation-image .transform-img-2::before {
    text-transform: capitalize;
}


/* Ventana emergente del vídeo de cuidados posoperatorios. */
.video-emergente {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    background-color: #000;
    border-radius: 16px;
    overflow: hidden;
}

.video-emergente video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
}

/* ---------------------------------------------------------------------
   Alineación de las rejillas

   Los testimonios cortos y las fichas de antes/después tienen textos de
   distinta longitud. Sin altura común las columnas quedaban escalonadas
   y la sección se leía descuadrada.
   --------------------------------------------------------------------- */
.our-testimonials .testimonial-slider .swiper-slide {
    height: auto;
}

.our-testimonials .testimonial-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* La firma se pega al fondo de la tarjeta, de modo que las tres quedan a
   la misma altura aunque los testimonios tengan longitudes distintas. */
.our-testimonials .testimonial-item .testimonial-author {
    margin-top: auto;
}

.transformation-item {
    height: 100%;
}

/* ---------------------------------------------------------------------
   Navegación dentro de la página

   Ahora que el botón del hero, las fichas de área y las tarjetas de
   servicio apuntan al formulario de citas y a los testimonios, los
   saltos tienen que ser suaves y no dejar el destino tapado por la
   cabecera fija. Se respeta a quien pide menos movimiento en el sistema.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

#agenda-cita,
#testimonios,
#areas {
    scroll-margin-top: 110px;
}

/* ---------------------------------------------------------------------
   Elevación al pasar el cursor

   La plantilla solo escalaba la fotografía. Añadir un desplazamiento
   mínimo y una sombra larga da la sensación de tarjeta física sin
   convertirlo en un efecto llamativo.
   --------------------------------------------------------------------- */
.service-item,
.areas-tratamiento .case-study-item,
.post-item {
    transition: transform 0.45s var(--sb-e-out), box-shadow 0.45s var(--sb-e-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .service-item:hover,
    .areas-tratamiento .case-study-item:hover,
    .post-item:hover {
        transform: translateY(-6px);
        box-shadow: var(--sb-sh-lg);
    }
}

/* Foco visible: la plantilla no lo definía y con teclado no se sabía
   dónde estabas. Es requisito de accesibilidad, no un adorno. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--sb-gold-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------
   Fila de cifras con tres elementos

   custom.css fija el ancho en calc(25% - 37.5px), pensado para cuatro.
   Al fundir «pacientes satisfechos» y «regiones peruanas» en una sola
   cifra quedan tres, y con el ancho fijo sobraba un cuarto de fila a la
   derecha. Se reparte el espacio en vez de fijarlo.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    .facts-counter-box-tres .facts-counter-item {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------
   Llamada a la consulta gratuita

   Sustituye a la línea suelta con la etiqueta «GRATIS», que se leía como
   un adorno y no como una oferta. Ahora es un bloque con su propia
   superficie, la condición escrita en letra pequeña y un botón que es el
   único punto por el que se aplica la gratuidad.
   --------------------------------------------------------------------- */
.cta-consulta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 50px;
    padding: 36px 40px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 24px;
    background-color: var(--sb-surface);
    box-shadow: var(--sb-sh-md);
}

.cta-consulta-texto {
    flex: 1 1 340px;
}

.cta-consulta-etiqueta {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 14px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--sb-cta-a), var(--sb-cta-b));
    color: var(--white-color);
    font-family: var(--accent-font);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cta-consulta-texto h3 {
    margin-bottom: 8px;
    font-size: 26px;
    line-height: 1.3em;
}

.cta-consulta-texto p {
    margin: 0;
    max-width: 52ch;
}

.cta-consulta-accion {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.cta-consulta-accion small {
    display: block;
    max-width: 30ch;
    color: var(--sb-ink-soft);
    font-size: 12px;
    line-height: 1.5em;
}

@media (max-width: 767px) {
    .cta-consulta {
        padding: 28px 24px;
    }

    .cta-consulta-texto h3 {
        font-size: 22px;
    }
}

/* Confirmación dentro del formulario de citas cuando se llega por ese botón. */
.aviso-consulta-gratis {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 18px;
    border: 1px solid var(--sb-surface-brd-h);
    border-radius: 12px;
    background-color: rgba(181, 138, 74, 0.10);
    color: var(--sb-ink);
    font-size: 14px;
    line-height: 1.4em;
}

.aviso-consulta-gratis i {
    color: var(--sb-gold-deep);
}

.aviso-consulta-gratis[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------
   Páginas legales (política de privacidad y términos y condiciones)

   Documentos largos que se leen de arriba abajo. Lo único que importa
   aquí es la legibilidad: una columna estrecha, jerarquía clara entre
   apartados y suficiente aire entre ellos.
   --------------------------------------------------------------------- */
.pagina-legal {
    padding: 100px 0;
}

.legal-contenido {
    font-size: 16px;
    line-height: 1.8em;
    color: var(--sb-ink);
}

.legal-fecha {
    margin-bottom: 24px;
    color: var(--sb-ink-soft);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Aviso de que al documento todavía le faltan datos del titular. Se
   imprime solo mientras templates/datos-legales.php esté incompleto. */
/* El aviso de que la traducción no es el documento vinculante comparte el
   aspecto del aviso de borrador —nota lateral en dorado, sin alarma— pero
   tiene su propia clase: son dos avisos distintos y uno desaparecerá antes
   que el otro. */
.legal-aviso-borrador,
.legal-aviso-traduccion {
    margin-bottom: 32px;
    padding: 16px 20px;
    border-left: 3px solid var(--sb-gold-deep);
    border-radius: 8px;
    background-color: rgba(181, 138, 74, 0.12);
    font-size: 15px;
}

.legal-contenido .dato-pendiente {
    padding: 1px 6px;
    border-radius: 4px;
    background-color: rgba(181, 138, 74, 0.28);
    color: var(--sb-brand);
    font-weight: 500;
}

.legal-entrada {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--sb-surface-brd);
    font-size: 18px;
    line-height: 1.7em;
    color: var(--sb-ink-soft);
}

.legal-contenido h2 {
    margin-top: 48px;
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 1.35em;
    color: var(--sb-brand);
}

.legal-contenido h2:first-of-type {
    margin-top: 0;
}

.legal-contenido p {
    margin-bottom: 16px;
}

.legal-contenido ul {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}

.legal-contenido ul li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 26px;
}

/* Viñeta propia: el punto redondo de la lista por defecto se pierde
   contra el fondo crema. */
.legal-contenido ul li::before {
    content: '';
    position: absolute;
    top: 0.72em;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--sb-gold);
}

.legal-contenido a {
    color: var(--sb-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-contenido a:hover {
    color: var(--sb-brand);
}

.legal-contenido strong {
    color: var(--sb-brand);
    font-weight: 600;
}

.legal-cierre {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--sb-surface-brd);
    font-size: 17px;
}

@media (max-width: 767px) {
    .pagina-legal {
        padding: 60px 0;
    }

    .legal-contenido h2 {
        margin-top: 36px;
        font-size: 21px;
    }

    .legal-entrada {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------
   Barra inferior del pie

   La plantilla la resolvía con dos bloques y "space-between". Al entrar
   la razón social, el RUC y un tercer enlace, el texto legal empujaba a
   los enlaces hasta partirlos en dos líneas y dejaba la mitad derecha
   vacía. Ahora son tres zonas que se reparten el ancho y que al bajar de
   tamaño se apilan centradas en lugar de romperse.
   --------------------------------------------------------------------- */
.footer-copyright {
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 24px;
    align-items: center;
}

.footer-copyright-text {
    flex: 1 1 260px;
}

.footer-copyright-text p {
    font-size: 14px;
    line-height: 1.6em;
}

.footer-ruc,
.footer-colegiatura {
    margin-top: 2px;
    color: var(--sb-ink-soft);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.footer-privacy-policy {
    flex: 0 1 auto;
}

.footer-privacy-policy ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
}

.footer-privacy-policy ul li {
    margin-right: 0;
    font-size: 14px;
    line-height: 1.6em;
}

/* La plantilla pinta la barra separadora con un ::before en cada
   elemento, incluido el último, que se quedaba colgando al final de la
   lista. */
.footer-privacy-policy ul li:last-child {
    padding-right: 0;
}

.footer-privacy-policy ul li:last-child::before {
    content: none;
}

/* Crédito del estudio. Discreto a propósito: acompaña, no compite con la
   identificación legal de la clínica. */
.footer-dev {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sb-ink-soft);
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.footer-dev a {
    display: inline-flex;
    align-items: center;
    opacity: 0.55;
    transition: opacity 0.3s var(--sb-e-out);
}

.footer-dev a:hover,
.footer-dev a:focus-visible {
    opacity: 1;
}

.footer-dev img {
    display: block;
    width: auto;
    height: 19px;
}

@media (max-width: 991px) {
    .footer-copyright {
        flex-direction: column;
        text-align: center;
    }

    .footer-copyright-text {
        flex: 0 0 auto;
    }

    .footer-privacy-policy ul {
        justify-content: center;
    }
}

/* =====================================================================
   Preguntas frecuentes

   Tres decisiones de diseño:
   1. Formas orgánicas: los radios no son uniformes. Las tarjetas usan
      esquinas desiguales para que el conjunto respire como algo dibujado
      a mano y no como una cuadrícula.
   2. La pregunta manda. El enunciado se lee grande y limpio; el resto
      (iconos, contadores, separadores) queda por debajo en peso visual.
   3. Nada se mueve solo. Las transiciones acompañan al clic, no compiten
      con la lectura.
   ===================================================================== */
.faqs-sbeltia {
    position: relative;
    padding: 90px 0 110px;
    overflow: hidden;
}

/* Mancha de fondo, muy tenue. Aporta la nota orgánica sin robar
   contraste al texto. */
.faqs-sbeltia::before {
    content: '';
    position: absolute;
    top: -160px;
    right: -220px;
    width: 620px;
    height: 620px;
    border-radius: 58% 42% 46% 54% / 45% 52% 48% 55%;
    background: radial-gradient(circle at 35% 35%, rgba(181, 138, 74, 0.13), rgba(181, 138, 74, 0) 68%);
    pointer-events: none;
}

.faqs-sbeltia > .container {
    position: relative;
    z-index: 1;
}

/* --- Entrada y buscador ------------------------------------------- */
.faq-intro {
    margin-bottom: 60px;
    text-align: center;
}

.faq-intro > p {
    max-width: 62ch;
    margin: 0 auto 28px;
    font-size: 17px;
    line-height: 1.75em;
    color: var(--sb-ink-soft);
}

.faq-buscador {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 4px 6px 4px 20px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 40px;
    background-color: var(--white-color);
    box-shadow: var(--sb-sh-sm);
    transition: border-color 0.3s var(--sb-e-out), box-shadow 0.3s var(--sb-e-out);
}

.faq-buscador:focus-within {
    border-color: var(--sb-surface-brd-h);
    box-shadow: var(--sb-sh-md);
}

.faq-buscador > i {
    flex: 0 0 auto;
    color: var(--sb-gold-deep);
    font-size: 15px;
}

.faq-buscador input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 12px;
    border: 0;
    background: transparent;
    color: var(--sb-ink);
    font-size: 15px;
}

.faq-buscador input:focus {
    outline: none;
}

/* Safari dibuja su propia X en los input[type=search] y aparecían dos. */
.faq-buscador input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.faq-buscador button {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: 6px;
    border: 0;
    border-radius: 50%;
    background-color: var(--sb-cream);
    color: var(--sb-ink-soft);
    line-height: 1;
    transition: background-color 0.3s var(--sb-e-out), color 0.3s var(--sb-e-out);
}

.faq-buscador button:hover {
    background-color: var(--sb-gray);
    color: var(--sb-brand);
}

.faq-buscador button[hidden] {
    display: none;
}

.faq-resultado {
    margin: 14px 0 0;
    color: var(--sb-ink-soft);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.faq-resultado[hidden] {
    display: none;
}

/* --- Índice lateral ------------------------------------------------ */
.faq-indice-caja {
    position: sticky;
    top: 120px;
    margin-bottom: 40px;
}

.faq-indice {
    padding: 30px 26px;
    border: 1px solid var(--sb-surface-brd);
    /* Esquinas desiguales: es lo que le quita el aire de caja de sistema. */
    border-radius: 28px 28px 28px 8px;
    background-color: var(--sb-surface);
    box-shadow: var(--sb-sh-sm);
}

.faq-indice h2 {
    margin-bottom: 18px;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-ink-soft);
}

.faq-indice ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq-indice li + li {
    margin-top: 4px;
}

.faq-indice a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    color: var(--sb-ink);
    font-size: 15px;
    line-height: 1.4em;
    transition: background-color 0.3s var(--sb-e-out), color 0.3s var(--sb-e-out);
}

.faq-indice a > i {
    flex: 0 0 auto;
    width: 18px;
    color: var(--sb-gold-deep);
    font-size: 14px;
    text-align: center;
}

.faq-indice a > span {
    flex: 1 1 auto;
}

/* Contador de preguntas del tema: informa sin pedir atención. */
.faq-indice a > em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 12px;
    color: var(--sb-ink-soft);
}

.faq-indice a:hover {
    background-color: var(--sb-cream);
    color: var(--sb-brand);
}

.faq-indice a.activo {
    background-color: var(--sb-cream);
    color: var(--sb-brand);
    font-weight: 500;
}

.faq-indice a.activo > em {
    color: var(--sb-gold-deep);
}

/* --- Tarjeta de ayuda ---------------------------------------------- */
.faq-ayuda {
    margin-top: 24px;
    padding: 30px 26px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 28px 8px 28px 28px;
    background: linear-gradient(160deg, var(--sb-cream), var(--sb-bg));
    box-shadow: var(--sb-sh-sm);
}

.faq-ayuda h3 {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.3em;
}

.faq-ayuda > p {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6em;
    color: var(--sb-ink-soft);
}

.faq-ayuda-datos {
    margin: 22px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--sb-surface-brd);
    list-style: none;
}

.faq-ayuda-datos li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.55em;
    color: var(--sb-ink-soft);
}

.faq-ayuda-datos li + li {
    margin-top: 10px;
}

.faq-ayuda-datos i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--sb-gold-deep);
}

/* --- Bloques y acordeón -------------------------------------------- */
.faq-bloque {
    margin-bottom: 56px;
    scroll-margin-top: 120px;
}

.faq-bloque[hidden] {
    display: none;
}

.faq-bloque-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.faq-bloque-icono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    /* Forma de gota: el guiño orgánico se concentra aquí. */
    border-radius: 50% 50% 50% 6px;
    background: linear-gradient(140deg, var(--sb-cta-a), var(--sb-cta-b));
    color: var(--white-color);
    font-size: 17px;
}

.faq-bloque-cabecera h2 {
    margin-bottom: 4px;
    font-size: 30px;
    line-height: 1.25em;
    color: var(--sb-brand);
}

.faq-bloque-cabecera p {
    margin: 0;
    font-size: 15px;
    color: var(--sb-ink-soft);
}

.faq-item {
    margin-bottom: 12px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 20px;
    background-color: var(--sb-surface);
    overflow: hidden;
    transition: border-color 0.3s var(--sb-e-out), box-shadow 0.3s var(--sb-e-out),
                background-color 0.3s var(--sb-e-out);
}

.faq-item[hidden] {
    display: none;
}

.faq-item:hover {
    border-color: var(--sb-surface-brd-h);
    box-shadow: var(--sb-sh-sm);
}

/* La pregunta abierta se separa del resto con fondo y sombra, para que
   se vea de un golpe dónde estás leyendo. */
.faq-item:has(.accordion-button:not(.collapsed)) {
    background-color: var(--white-color);
    border-color: var(--sb-surface-brd-h);
    box-shadow: var(--sb-sh-md);
}

.faq-item .accordion-header {
    margin: 0;
}

.faq-item .accordion-button {
    width: 100%;
    padding: 22px 60px 22px 26px;
    border: 0;
    background: transparent;
    color: var(--sb-ink);
    font-family: var(--accent-font);
    font-size: 20px;
    line-height: 1.4em;
    text-align: left;
    box-shadow: none;
    transition: color 0.3s var(--sb-e-out);
}

.faq-item .accordion-button:hover,
.faq-item .accordion-button:not(.collapsed) {
    color: var(--sb-brand);
}

.faq-item .accordion-button:focus {
    box-shadow: none;
}

.faq-item .accordion-button:focus-visible {
    outline: 2px solid var(--sb-gold-deep);
    outline-offset: -4px;
}

/* El indicador de abrir/cerrar ya existe: la plantilla lo pinta con un
   icono de Font Awesome en custom.css:3009, pegado a la esquina superior
   derecha. Se mantiene ese mecanismo y solo se recoloca y se recolorea.
   La especificidad tiene que igualar a la de custom.css (tres clases) o
   la regla original gana; ese fue el motivo de que el icono apareciera
   fuera de sitio. */
.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
    top: 50%;
    right: 26px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: var(--sb-cream);
    color: var(--sb-gold-deep);
    font-size: 15px;
    line-height: 1;
    transition: transform 0.35s var(--sb-e-out), background-color 0.3s var(--sb-e-out),
                color 0.3s var(--sb-e-out);
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
    background: linear-gradient(140deg, var(--sb-cta-a), var(--sb-cta-b));
    color: var(--white-color);
}

.faq-item .accordion-button {
    position: relative;
}

.faq-item .accordion-body {
    padding: 0 60px 26px 26px;
    color: var(--sb-ink-soft);
    font-size: 15px;
    line-height: 1.8em;
}

.faq-item .accordion-body p {
    margin-bottom: 12px;
}

.faq-item .accordion-body p:last-child,
.faq-item .accordion-body ul:last-child {
    margin-bottom: 0;
}

.faq-item .accordion-body ul {
    margin: 0 0 12px;
    padding-left: 0;
    list-style: none;
}

.faq-item .accordion-body li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 22px;
}

.faq-item .accordion-body li::before {
    content: '';
    position: absolute;
    top: 0.72em;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--sb-gold);
}

.faq-item .accordion-body a {
    color: var(--sb-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faq-item .accordion-body a:hover {
    color: var(--sb-brand);
}

/* --- Búsqueda sin resultados y cierre ------------------------------ */
.faq-sin-resultados {
    padding: 50px 30px;
    border: 1px dashed var(--sb-surface-brd-h);
    border-radius: 28px;
    text-align: center;
}

.faq-sin-resultados[hidden] {
    display: none;
}

.faq-sin-resultados > i {
    display: block;
    margin-bottom: 16px;
    color: var(--sb-gold);
    font-size: 30px;
}

.faq-sin-resultados h3 {
    margin-bottom: 8px;
    font-size: 24px;
}

.faq-sin-resultados p {
    max-width: 46ch;
    margin: 0 auto 24px;
    color: var(--sb-ink-soft);
    font-size: 15px;
}

.faq-cierre {
    margin-top: 20px;
    padding: 44px 40px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 32px 32px 8px 32px;
    background: linear-gradient(150deg, var(--sb-cream), var(--sb-bg) 70%);
    box-shadow: var(--sb-sh-md);
    text-align: center;
}

.faq-cierre[hidden] {
    display: none;
}

.faq-cierre h3 {
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 1.3em;
}

.faq-cierre p {
    max-width: 52ch;
    margin: 0 auto 26px;
    color: var(--sb-ink-soft);
    font-size: 16px;
    line-height: 1.7em;
}

/* --- Adaptación a pantallas pequeñas ------------------------------- */
@media (max-width: 991px) {
    .faq-indice-caja {
        position: static;
    }

    .faq-indice ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .faq-indice li + li {
        margin-top: 0;
    }

    .faq-indice a {
        border: 1px solid var(--sb-surface-brd);
        padding: 9px 14px;
    }
}

@media (max-width: 767px) {
    .faqs-sbeltia {
        padding: 60px 0 70px;
    }

    .faq-bloque-cabecera h2 {
        font-size: 25px;
    }

    .faq-item .accordion-button {
        padding: 18px 50px 18px 20px;
        font-size: 18px;
    }

    .faq-item .accordion-body {
        padding: 0 22px 22px 20px;
    }

    .faq-cierre {
        padding: 34px 24px;
    }

    .faq-cierre h3 {
        font-size: 23px;
    }
}

/* Tema sin coincidencias durante una búsqueda: sigue visible para no
   descolocar el índice, pero deja de invitar al clic. */
.faq-indice a.vacio {
    opacity: 0.35;
    pointer-events: none;
}

/* ============================================================
   FICHA DE PROCEDIMIENTO  (service-single.php)
   ------------------------------------------------------------
   La plantilla trae la ficha de servicio pensada para un spa:
   una barra lateral con horarios, un vídeo de YouTube y tres
   cajas de iconos. Aquí se convierte en una ficha médica, donde
   lo que se busca es un dato concreto —cuánto dura, qué
   anestesia, cuándo vuelvo a trabajar— antes que un adjetivo.

   Todo lo nuevo va con prefijo .proc-. Lo que reaprovecha la
   estructura de la plantilla (.service-enhance-item,
   .how-work-step-item) se sobrescribe igualando su
   especificidad, no confiando en el orden de carga.
   ============================================================ */

/* --- Apertura: foto a todo el ancho con la ficha montada encima ---
   La foto vivía dentro de la columna de texto, a 830 px de ancho y con la
   ficha técnica debajo: dos rectángulos apilados en la mitad derecha de
   la pantalla, con la izquierda vacía. Sacándola de la columna ocupa los
   1320 px del contenedor y la ficha sube a montarse sobre su borde
   inferior, que es lo que convierte dos bloques en una sola pieza. */

.proc-apertura {
    position: relative;
    margin-bottom: 80px;
}

.proc-apertura-imagen {
    margin: 0;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--sb-sh-lg);
}

/* El original es 4:3 y vertical de encuadre. Recortado a panorámico el
   rostro se sale por arriba, así que el punto de anclaje sube al 28 %: la
   mirada queda en el tercio superior y el recorte se come el hombro, no
   la frente. «height: auto» es imprescindible — los atributos width/height
   del HTML cuentan como altura declarada y anularían el aspect-ratio.

   La proporción es 21:9 y no 16:9: a los 1320 px del contenedor, un 16:9
   da 742 px de foto, casi una pantalla entera antes de que empiece a
   leerse nada. A 21:9 son 566 px — la foto sigue abriendo la página pero
   el primer párrafo entra en el mismo golpe de vista. */
.proc-apertura-imagen img {
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: 50% 28%;
}

/* Velo inferior: la ficha se apoya sobre la foto y sin él las etiquetas
   compiten con lo que haya debajo en la imagen. */
.proc-apertura-imagen::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(60, 50, 42, 0), rgba(60, 50, 42, 0.28));
}

/* --- Ritmo vertical ---
   La plantilla separa sus bloques entre 40 y 60 px, una medida pensada
   para párrafos sueltos. Aquí casi todos los bloques llevan fondo y
   borde, y a esa distancia se leen como una sola mancha continua. Se
   unifica la separación entre secciones en 75 px, con lo que cada caja
   vuelve a tener un antes y un después. */

.procedimiento .service-enhance-box,
.procedimiento .service-achieve-box {
    margin-top: 75px;
}

.procedimiento .service-entry {
    margin-bottom: 75px;
}

/* --- Barra lateral: lista de procedimientos --- */

/* --- Barra lateral que acompaña la lectura ---
   El problema de fondo de esta página: la columna izquierda servía tres
   cajas al principio y a partir de ahí se quedaba vacía durante los casi
   seis mil píxeles restantes. Un tercio del ancho, muerto, en el 85 % del
   recorrido.
   La solución no es rellenarla con más cajas, sino que la misma viaje.
   Para que sticky funcione, el contenido tiene que caber en la ventana:
   por eso la lista de procedimientos se fue abajo, a su propia rejilla, y
   aquí quedan solo el índice y la consulta (unos 600 px). */

.proc-sidebar {
    position: sticky;
    top: 110px;
    /* Red de seguridad. Sticky con contenido más alto que la ventana deja
       el final —aquí, el botón— permanentemente fuera de pantalla. El
       índice y la consulta se recortaron hasta caber en un portátil de
       800 px, pero en una ventana más baja esto garantiza que se llegue
       al botón desplazando dentro de la propia barra.
       El padding/margin compensados evitan que el recorte corte las
       sombras de las dos cajas. */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    margin: -6px;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-surface-brd-h) transparent;
}

/* --- Índice de la página --- */

.proc-indice {
    margin-bottom: 26px;
    padding: 22px 28px 18px;
    border: 1px solid var(--sb-surface-brd);
    /* Esquina viva abajo a la izquierda: el mismo recurso que el índice
       de faqs.php, para que las dos páginas largas se reconozcan. */
    border-radius: 24px 24px 24px 8px;
    background-color: var(--white-color);
    box-shadow: var(--sb-sh-sm);
}

.proc-indice h3 {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sb-surface-brd);
    color: var(--sb-ink-soft);
    font-family: var(--default-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Numeración propia: la de <ol> no se puede alinear ni teñir. */
.proc-indice ol {
    counter-reset: indice;
    list-style: none;
    margin: 0;
    padding: 0;
}

.proc-indice li {
    counter-increment: indice;
}

.proc-indice a {
    position: relative;
    display: block;
    padding: 7px 0 7px 32px;
    color: var(--sb-ink-soft);
    font-size: 15px;
    line-height: 1.4em;
    transition: color .3s var(--sb-e-out);
}

.proc-indice a::before {
    content: counter(indice, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--sb-gold);
    font-family: var(--accent-font);
    font-size: 14px;
    letter-spacing: 0.04em;
    transition: color .3s var(--sb-e-out);
}

.proc-indice a:hover {
    color: var(--sb-brand);
}

/* La sección que se está leyendo. La marca la pone sbeltia.js con un
   IntersectionObserver; sin JavaScript el índice sigue funcionando como
   lista de enlaces, solo que sin resaltar nada. */
.proc-indice a.activo {
    color: var(--sb-brand);
    font-weight: 500;
}

.proc-indice a.activo::before {
    color: var(--sb-gold-deep);
}

/* Filete que corre por la izquierda del apartado activo. Se anima con
   scaleY para que el salto entre secciones se lea como un movimiento. */
.proc-indice a.activo::after {
    content: '';
    position: absolute;
    left: -28px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--sb-gold), var(--sb-gold-deep));
}

/* --- Barra lateral: caja de contacto --- */

.proc-sidebar-cta {
    padding: 30px;
    border: 1px solid var(--sb-surface-brd-h);
    border-radius: 24px 8px 24px 24px;
    background-color: var(--white-color);
    box-shadow: var(--sb-sh-md);
}

.proc-sidebar-cta-etiqueta {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 14px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--sb-cta-a), var(--sb-cta-b));
    color: var(--white-color);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.proc-sidebar-cta h3 {
    font-size: 22px;
    line-height: 1.25em;
    color: var(--sb-brand);
    margin-bottom: 12px;
}

.proc-sidebar-cta p {
    font-size: 14px;
    line-height: 1.65em;
    color: var(--sb-ink-soft);
    margin-bottom: 22px;
}

/* El botón de la plantilla reserva 50 px a su derecha (margin-right) para
   el círculo de la flecha, que va fuera de la caja. Con width:100% ese
   círculo se salía de la tarjeta en móvil, así que se descuenta. */
.proc-sidebar-cta .btn-default {
    display: block;
    width: calc(100% - 50px);
    text-align: center;
}

.proc-sidebar-datos {
    list-style: none;
    margin: 26px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--sb-surface-brd);
}

.proc-sidebar-datos li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.55em;
    color: var(--sb-ink-soft);
}

.proc-sidebar-datos li:last-child {
    margin-bottom: 0;
}

.proc-sidebar-datos i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--sb-gold-deep);
    font-size: 14px;
}

.proc-sidebar-datos a {
    color: var(--sb-ink-soft);
    transition: color 0.3s var(--sb-e-out);
}

.proc-sidebar-datos a:hover {
    color: var(--sb-brand);
}

/* --- Ficha técnica --- */

/* Monta sobre la foto: margen superior negativo, algo más estrecha que
   la imagen para que se vea el borde de la foto por los dos lados, y en
   blanco sólido con sombra larga, que es lo que la separa del degradado
   que tiene detrás. El z-index la pone por delante del velo. */
.proc-ficha {
    position: relative;
    z-index: 2;
    width: calc(100% - 130px);
    margin: -78px auto 0;
    padding: 32px 40px 26px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 24px;
    background-color: var(--white-color);
    box-shadow: var(--sb-sh-lg);
}

.proc-ficha-lista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
}

.proc-ficha-lista li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 20px;
    border-left: 1px solid var(--sb-surface-brd-h);
}

.proc-ficha-lista li:first-child {
    padding-left: 0;
    border-left: none;
}

.proc-ficha-icono {
    color: var(--sb-gold-deep);
    font-size: 16px;
    margin-bottom: 4px;
}

.proc-ficha-etiqueta {
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sb-ink-soft);
}

.proc-ficha-valor {
    font-family: var(--accent-font);
    font-size: 19px;
    line-height: 1.25em;
    font-weight: 500;
    color: var(--sb-brand);
}

.proc-ficha-nota {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--sb-surface-brd);
    font-size: 13px;
    line-height: 1.6em;
    color: var(--sb-ink-soft);
}

.proc-ficha-nota i {
    margin-top: 3px;
    color: var(--sb-gold-deep);
}

/* --- Cuerpo --- */

/* --- Antetítulo ---
   Cada sección abre con una palabra en versalitas antes del titular. No
   es decoración: en una página de 8.000 px indica de qué va el bloque
   antes de leer el titular, y da a los ocho apartados la misma cabecera,
   que es de donde sale la sensación de sistema. */
.proc-antetitulo {
    display: block;
    margin-bottom: 12px;
    /* La marca del índice apunta aquí; que no quede bajo el menú fijo. */
    scroll-margin-top: 120px;
    color: var(--sb-gold-deep);
    font-family: var(--default-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Filete corto delante, del ancho de un carácter. */
.proc-antetitulo::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-right: 12px;
    vertical-align: 0.32em;
    background-color: var(--sb-gold);
}

/* --- Medida de lectura ---
   La columna mide 830 px: a 17 px de cuerpo salen unos 110 caracteres por
   línea, casi el doble de lo que el ojo sigue sin perder el renglón. Las
   cajas, rejillas y líneas de tiempo siguen usando el ancho completo —esa
   es la parte que había que aprovechar—, pero la prosa se queda en 68ch.
   Aprovechar el espacio no es estirar el texto hasta el borde. */
.procedimiento .service-entry > p {
    max-width: 68ch;
}

.proc-entradilla {
    max-width: 62ch;
    font-family: var(--accent-font);
    font-size: 22px;
    line-height: 1.55em;
    color: var(--sb-ink);
}

.proc-subtitulo {
    font-size: 32px;
    line-height: 1.25em;
    color: var(--sb-brand);
    margin: 0 0 18px;
}

/* El aire por arriba pasa al antetítulo, que ahora es quien abre la
   sección. Las secciones que van dentro de una caja ya lo reciben de la
   caja; esta es para el antetítulo suelto en el hilo del texto, que viene
   detrás de una fila de tarjetas y sin margen parecería su pie. */
.procedimiento .service-entry > .proc-antetitulo {
    margin-top: 75px;
}

/* Salvo el primero de todos: abre el texto, no separa dos bloques. */
.procedimiento .service-entry > .proc-antetitulo:first-child {
    margin-top: 0;
}

/* --- Indicaciones: dos columnas --- */

.proc-indicaciones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin: 75px 0;
}

/* Blanco solido, no --sb-surface: el blanco al 62 % sobre el fondo
   crema de la pagina daba una tarjeta practicamente invisible. */
.proc-indicaciones-col {
    padding: 30px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 24px;
    background-color: var(--white-color);
    box-shadow: var(--sb-sh-xs);
}

.proc-indicaciones-col h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    color: var(--sb-brand);
    margin-bottom: 18px;
}

.proc-indicaciones-col h3 i {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    color: var(--white-color);
}

.proc-indicaciones-si h3 i {
    background: linear-gradient(140deg, var(--sb-cta-a), var(--sb-cta-b));
}

/* La columna de cautelas se distingue por el tono, no por un rojo
   de alarma: son motivos para conversar, no advertencias. */
.proc-indicaciones-ojo h3 i {
    background-color: var(--sb-ink-soft);
}

.proc-indicaciones-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.proc-indicaciones-col ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6em;
    color: var(--sb-ink-soft);
}

.proc-indicaciones-col ul li:last-child {
    margin-bottom: 0;
}

.proc-indicaciones-col ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--sb-gold);
}

.proc-indicaciones-nota {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--sb-surface-brd);
    font-size: 13px;
    line-height: 1.6em;
    color: var(--sb-ink-soft);
}

/* --- Iconos tipográficos en las cajas de la plantilla ---
   La plantilla espera un <img> dentro de .icon-box. Aquí va un
   icono de Font Awesome, así que hay que rehacer el fondo y
   neutralizar el círculo que crece al pasar el ratón. Tres
   clases para ganar a la regla de dos de custom.css. */

.service-enhance-item .icon-box.proc-icono,
.how-work-step-item .icon-box.proc-paso-numero {
    background: linear-gradient(140deg, var(--sb-cta-a), var(--sb-cta-b));
    box-shadow: var(--sb-sh-gold);
}

.service-enhance-item .icon-box.proc-icono::before,
.how-work-step-item .icon-box.proc-paso-numero::before {
    background-color: var(--sb-brand);
}

.service-enhance-item .icon-box.proc-icono i,
.how-work-step-item .icon-box.proc-paso-numero span {
    position: relative;
    z-index: 1;
    color: var(--white-color);
    font-size: 20px;
    line-height: 1;
}

.how-work-step-item .icon-box.proc-paso-numero span {
    font-family: var(--accent-font);
    font-size: 24px;
    font-weight: 500;
}

/* --- Rejilla de variantes con cuatro tarjetas ---
   custom.css fija las tarjetas al 33,33%, que cuadra con las fichas
   de dos o tres variantes. La de mommy makeover tiene cuatro y la
   última caía sola en una fila, con dos tercios vacíos al lado.
   Con exactamente cuatro se pasa a 2x2, que sí cierra el bloque.
   La pareja de selectores es una consulta de cantidad: solo entra
   si el primer elemento es también el cuarto por la cola. Por
   debajo de 768px la plantilla ya las pone a ancho completo. */

@media only screen and (min-width: 768px) {
    .service-enhance-item-list > .service-enhance-item:first-child:nth-last-child(4),
    .service-enhance-item-list > .service-enhance-item:first-child:nth-last-child(4) ~ .service-enhance-item {
        width: calc(50% - 15px);
    }
}

.procedimiento .service-enhance-item {
    border-color: var(--sb-surface-brd);
    border-radius: 24px;
    background-color: var(--white-color);
    box-shadow: var(--sb-sh-xs);
    transition: border-color 0.3s var(--sb-e-out), box-shadow 0.3s var(--sb-e-out);
}

.procedimiento .service-enhance-item:hover {
    border-color: var(--sb-surface-brd-h);
    box-shadow: var(--sb-sh-md);
}

/* --- Recuperación: línea de tiempo --- */

.proc-recuperacion {
    margin: 75px 0;
}

.proc-linea-tiempo {
    list-style: none;
    position: relative;
    margin: 34px 0 0;
    padding: 0 0 0 30px;
}

/* El hilo que une las fases. Se desvanece al final porque la
   recuperación no termina en una fecha exacta. */
.proc-linea-tiempo::before {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--sb-gold), rgba(181, 138, 74, 0.15) 85%, rgba(181, 138, 74, 0));
}

.proc-linea-tiempo li {
    position: relative;
    margin-bottom: 26px;
}

.proc-linea-tiempo li:last-child {
    margin-bottom: 0;
}

.proc-linea-tiempo li::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--sb-bg);
    border: 2px solid var(--sb-gold);
}

.proc-linea-tiempo-momento {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sb-gold-deep);
}

.proc-linea-tiempo p {
    margin: 0;
    color: var(--sb-ink-soft);
}

/* --- Riesgos --- */

.proc-riesgos {
    margin: 75px 0 0;
    padding: 32px 34px;
    border: 1px solid var(--sb-surface-brd-h);
    border-radius: 24px 24px 8px 24px;
    background-color: rgba(181, 138, 74, 0.11);
}

.proc-riesgos h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 21px;
    color: var(--sb-brand);
    margin-bottom: 16px;
}

.proc-riesgos h3 i {
    color: var(--sb-gold-deep);
    font-size: 18px;
}

.proc-riesgos p {
    color: var(--sb-ink-soft);
    margin-bottom: 14px;
}

.proc-riesgos-legal {
    margin: 18px 0 0 !important;
    padding-top: 16px;
    border-top: 1px solid var(--sb-surface-brd);
    font-size: 13px;
    line-height: 1.6em;
    font-style: italic;
}

/* --- Cierre de las preguntas y llamada final --- */

.proc-faqs-mas {
    margin-top: 34px;
    font-size: 14px;
    color: var(--sb-ink-soft);
}

.proc-faqs-mas a {
    color: var(--sb-gold-deep);
    border-bottom: 1px solid currentColor;
    transition: color 0.3s var(--sb-e-out);
}

.proc-faqs-mas a:hover {
    color: var(--sb-brand);
}

/* --- Otros procedimientos ---
   Ocupa el ancho completo por debajo de las dos columnas. Tres tarjetas
   por fila con la foto arriba: es la misma retícula de la portada, para
   que quien salta de una a otra reconozca el patrón. */

.proc-otros {
    margin-top: 100px;
    padding-top: 75px;
    border-top: 1px solid var(--sb-surface-brd);
}

.proc-otros > h2 {
    margin-bottom: 40px;
    font-size: 38px;
    line-height: 1.2em;
    color: var(--sb-brand);
}

.proc-otros-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* La tarjeta entera es el enlace: el objetivo del clic es de 380x330 px
   en vez del renglón de texto que era antes en la barra lateral. */
.proc-otro {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 24px;
    background-color: var(--white-color);
    box-shadow: var(--sb-sh-xs);
    transition: transform .4s var(--sb-e-out),
                box-shadow .4s var(--sb-e-out),
                border-color .4s var(--sb-e-out);
}

.proc-otro:hover {
    transform: translateY(-6px);
    border-color: var(--sb-surface-brd-h);
    box-shadow: var(--sb-sh-lg);
}

.proc-otro-imagen {
    margin: 0;
    overflow: hidden;
}

.proc-otro-imagen img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s var(--sb-e-out);
}

.proc-otro:hover .proc-otro-imagen img {
    transform: scale(1.05);
}

.proc-otro-texto {
    /* auto para que la flecha quede pegada abajo aunque los textos de las
       seis tarjetas tengan distinto número de líneas. */
    flex: 1 0 auto;
    padding: 26px 28px 0;
}

.proc-otro-texto h3 {
    margin-bottom: 8px;
    font-size: 21px;
    line-height: 1.3em;
    color: var(--sb-brand);
    text-transform: none;
}

.proc-otro-texto p {
    margin: 0;
    color: var(--sb-ink-soft);
    font-size: 15px;
    line-height: 1.6em;
}

.proc-otro-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* "auto" a la izquierda: la flecha se va al lado derecho de la
       tarjeta, que es donde se busca el "seguir" al terminar de leer. */
    margin: 20px 28px 26px auto;
    border-radius: 50%;
    background-color: var(--sb-cream);
    color: var(--sb-gold-deep);
    font-size: 13px;
    transition: background .4s var(--sb-e-out), color .4s var(--sb-e-out);
}

.proc-otro:hover .proc-otro-flecha {
    background: linear-gradient(140deg, var(--sb-cta-a), var(--sb-cta-b));
    color: var(--white-color);
}

/* La entradilla del bloque de relacionados: dice de qué área son las
   tarjetas que siguen y deja la salida al catálogo completo. */
.proc-otros-intro {
    max-width: 62ch;
    margin: 14px 0 0;
    color: var(--sb-ink-soft);
}

.proc-otros-intro a {
    color: var(--sb-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Cierre ---
   A todo el ancho y en dos columnas: el texto a la izquierda y la acción
   a la derecha, con la misma proporción que la banda de consulta gratuita
   de la portada. Centrado y a 830 px se leía como un párrafo más; así se
   lee como el final de la página. */

.proc-cierre {
    display: flex;
    align-items: center;
    gap: 30px 60px;
    margin-top: 100px;
    padding: 52px 56px;
    border: 1px solid var(--sb-surface-brd-h);
    border-radius: 32px 32px 8px 32px;
    background-color: var(--sb-cream);
    background-image: linear-gradient(140deg, var(--sb-cream), var(--sb-gray));
    box-shadow: var(--sb-sh-md);
}

.proc-cierre-texto {
    flex: 1 1 auto;
}

.proc-cierre h2 {
    font-size: 38px;
    line-height: 1.2em;
    color: var(--sb-brand);
    margin-bottom: 14px;
}

.proc-cierre p {
    max-width: 62ch;
    margin: 0;
    color: var(--sb-ink-soft);
}

/* No se encoge: el botón nunca parte su texto en dos líneas. */
.proc-cierre-accion {
    flex: 0 0 auto;
    text-align: center;
}

.proc-cierre small {
    display: block;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--sb-ink-soft);
}

/* --- Adaptación a pantallas menores --- */

@media (max-width: 991px) {
    /* En una columna no hay nada al lado a lo que acompañar: el sticky
       dejaría la barra flotando sobre el propio texto. */
    .procedimiento .page-single-sidebar,
    .proc-sidebar {
        position: static;
        margin: 0 0 50px;
    }

    /* El índice pierde su razón de ser —marcar por dónde va la lectura—
       cuando no viaja. Como lista suelta solo añade 300 px que hay que
       pasar antes de llegar al contenido, así que se retira. Los
       anclajes siguen ahí para los enlaces que lleguen de fuera. */
    .proc-indice {
        display: none;
    }

    /* En una sola columna los 75 px de escritorio obligan a demasiado
       desplazamiento entre bloque y bloque. */
    .proc-indicaciones,
    .proc-recuperacion {
        margin: 55px 0;
    }

    .procedimiento .service-enhance-box,
    .procedimiento .service-achieve-box,
    .procedimiento .service-entry > .proc-antetitulo {
        margin-top: 55px;
    }

    .proc-riesgos {
        margin-top: 55px;
    }

    /* La foto de apertura vuelve a una proporción menos apaisada: a 700 px
       de ancho, el 21:9 del escritorio dejaría una franja de 300 px que no
       cuenta nada. */
    .proc-apertura {
        margin-bottom: 60px;
    }

    .proc-apertura-imagen img {
        aspect-ratio: 3 / 2;
    }

    .proc-apertura-imagen {
        border-radius: 24px;
    }

    /* Deja de montar sobre la foto: a este ancho taparía media imagen. */
    .proc-ficha {
        width: 100%;
        margin: 24px 0 0;
        padding: 26px 28px 22px;
        box-shadow: var(--sb-sh-sm);
    }

    /* Las seis tarjetas de otros procedimientos, de tres en fila a dos. */
    .proc-otros {
        margin-top: 70px;
        padding-top: 55px;
    }

    .proc-otros-lista {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* El cierre se apila: el botón debajo del texto, no al lado. */
    .proc-cierre {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 70px;
        padding: 40px 34px;
    }

    .proc-ficha-lista {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    /* Con dos columnas, el separador vertical toca reasignarlo:
       lo lleva el primero de cada fila, no solo el primero. */
    .proc-ficha-lista li:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    .proc-indicaciones {
        grid-template-columns: 1fr;
    }

    .proc-cierre {
        padding: 34px 26px;
    }

    .proc-cierre h2 {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .proc-ficha,
    .proc-riesgos {
        padding: 24px 22px;
    }

    /* Una sola columna de tarjetas; a dos, la foto bajaba de 150 px. */
    .proc-otros-lista {
        grid-template-columns: 1fr;
    }

    .proc-otros > h2,
    .proc-cierre h2 {
        font-size: 28px;
    }

    .proc-cierre {
        padding: 32px 24px;
    }

    /* El botón lleva reservados 50 px a la derecha para su círculo de
       flecha (.btn-default en custom.css). A este ancho hay que
       descontarlos o se sale de la caja. */
    .proc-cierre .btn-default {
        display: block;
        width: calc(100% - 50px);
        text-align: center;
    }

    .proc-ficha-lista {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .proc-ficha-lista li {
        padding-left: 0;
        border-left: none;
    }

    .proc-entradilla {
        font-size: 19px;
    }

    .proc-indicaciones-col {
        padding: 24px 22px;
    }
}

/* ==========================================================================
   ÍNDICE DEL CATÁLOGO (services.php)
   El catálogo son casi sesenta fichas repartidas en diez áreas. Sin una
   navegación por áreas arriba, la página es un muro de tarjetas.
   ========================================================================== */

.areas-indice {
    padding: 70px 0 0;
    background-color: var(--sb-bg);
}

.areas-indice-texto p {
    font-size: 20px;
    line-height: 1.6;
    color: var(--sb-ink-soft);
    margin-bottom: 30px;
}

.areas-indice-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.areas-indice-nav a {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 999px;
    background-color: var(--sb-cream);
    color: var(--sb-brand);
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.3s var(--sb-e-out);
}

.areas-indice-nav a:hover,
.areas-indice-nav a:focus-visible {
    background-color: var(--sb-gold);
    border-color: var(--sb-gold);
    color: var(--white-color);
    box-shadow: var(--sb-sh-gold);
}

/* Cada área es una sección con su propio anclaje: la miga de pan de las
   fichas y el enlace "otros procedimientos" apuntan aquí. El offset evita
   que la cabecera fija tape el título al saltar. */
.area-servicios {
    scroll-margin-top: 120px;
    padding-top: 20px;
}

.area-servicios + .area-servicios {
    margin-top: 30px;
    padding-top: 60px;
    border-top: 1px solid var(--sb-surface-brd);
}

.area-servicios .section-title {
    margin-bottom: 40px;
}

.area-servicios .section-title p {
    margin-top: 16px;
    margin-bottom: 0;
    color: var(--sb-ink-soft);
}

/* Tercer nivel del menú de Servicios. El template ya lo posiciona a
   left:100%, pero con listas de hasta diez procedimientos conviene
   asegurar que no se corte por arriba ni desborde el alto de pantalla. */
.main-menu ul ul ul {
    width: 260px;
    max-height: 70vh;
    overflow-y: auto;
}

@media only screen and (max-width: 767px) {
    .areas-indice {
        padding-top: 50px;
    }

    .areas-indice-texto p {
        font-size: 18px;
    }

    .areas-indice-nav a {
        font-size: 14px;
        padding: 8px 14px;
    }

    .area-servicios + .area-servicios {
        padding-top: 40px;
    }
}

/* =====================================================================
   CABECERA DE PÁGINA MÁS COMPACTA
   =====================================================================
   La plantilla reserva 130px de relleno arriba y abajo más un titular de
   60px: una franja de casi 350px antes de que empiece el contenido. Se
   reduce a algo más de la mitad manteniendo la jerarquía tipográfica y
   el margen de respiración de las migas de pan. */

.page-header {
    padding: 72px 0;
}

.page-header-box h1 {
    font-size: 42px;
    margin-bottom: 6px;
}

@media only screen and (max-width: 991px) {
    .page-header {
        padding: 44px 0;
    }

    .page-header-box h1 {
        font-size: 34px;
    }
}

@media only screen and (max-width: 767px) {
    .page-header {
        padding: 36px 0;
    }

    .page-header-box h1 {
        font-size: 26px;
    }
}

/* =====================================================================
   HERO DE PORTADA A PANTALLA COMPLETA
   =====================================================================
   Sustituye por completo al hero de la plantilla (foto en una columna,
   botón en la otra). Aquí no hay columnas ni tarjetas: hay planos.

     .hero-cine-fondo   papel, luz cálida y polvo — decorativo
     .hero-cine-pieza   la pieza audiovisual, disuelta por su borde
     .hero-cine-lienzo  antetítulo, titular, entradilla y llamadas
     .hero-cine-pie     filete a todo lo ancho con indicadores y bajada

   La decisión de fondo: la imagen NO tiene borde. Una máscara en
   degradado la desvanece por la izquierda y por abajo, de modo que
   termina en aire y no en una línea. Sobre esa zona diluida es donde se
   monta el titular, que así puede invadir la imagen sin perder ni un
   punto de legibilidad. Es lo que separa esto de "una foto en una caja".

   El movimiento vive en js/hero-cine.js (GSAP). Aquí solo quedan el
   estado inicial de las máscaras y los detalles que el CSS hace mejor:
   el brillo del borde del botón y el recorrido de la línea de bajada. */

.hero-cine {
    --hc-cabecera: 118px;   /* alto aproximado de la barra superior */
    --hc-pieza: 52vw;       /* ancho de la pieza audiovisual */

    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--hc-cabecera));
    min-height: calc(100svh - var(--hc-cabecera));
    padding: 48px 0 136px;
    overflow: clip;
    isolation: isolate;
    background-color: var(--sb-bg);
}

/* ---------- Plano de fondo ---------- */

.hero-cine-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Grano de papel: una turbulencia SVG en línea, sin petición extra ni
   imagen que descargar. Va al 4,5% para que se intuya al acercarse y no
   se vea nunca como "textura". */
.hero-cine-papel {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
}

.hero-cine-luz {
    position: absolute;
    top: -22%;
    left: -12%;
    width: 82%;
    height: 104%;
    background: radial-gradient(50% 50% at 44% 48%,
        rgba(214, 180, 128, 0.30),
        rgba(214, 180, 128, 0.08) 46%,
        rgba(214, 180, 128, 0) 72%);
    filter: blur(44px);
    will-change: transform;
}

.hero-cine-polvo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

/* ---------- Plano de la pieza audiovisual ---------- */

.hero-cine-pieza {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: var(--hc-pieza);
    max-width: 980px;
    margin: 0;
    padding: 0;
    /* Doble máscara: se desvanece hacia la izquierda (para que el titular
       pueda montarse encima) y por arriba y abajo (para que no choque
       contra los bordes de la sección). El compuesto las cruza. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.22) 15%, #000 46%),
        linear-gradient(to bottom, transparent 0%, #000 11%, #000 76%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.22) 15%, #000 46%),
        linear-gradient(to bottom, transparent 0%, #000 11%, #000 76%, transparent 100%);
            mask-composite: intersect;
}

.hero-cine-encuadre {
    position: absolute;
    inset: 0;
    /* El zoom lento crece hacia abajo, no desde el centro: así el aire
       que hay sobre la cabeza de la doctora no se lo come la ampliación
       y el encuadre nunca le corta la coronilla. */
    transform-origin: 50% 12%;
    will-change: transform;
}

.hero-cine-encuadre > img,
.hero-cine-encuadre > video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center 14%;
    will-change: transform;
}

/* Degradado de legibilidad. Muy suave: solo tiene que sostener el texto
   que invade la imagen, no oscurecerla. */
.hero-cine-velo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(100deg,
            rgba(252, 250, 247, 0.58) 0%,
            rgba(252, 250, 247, 0.14) 27%,
            rgba(252, 250, 247, 0) 52%),
        linear-gradient(to top,
            rgba(60, 50, 42, 0.20),
            rgba(60, 50, 42, 0) 38%);
}

/* ---------- Plano del contenido ---------- */

.hero-cine .container {
    position: relative;
    z-index: 3;
}

.hero-cine-lienzo {
    max-width: 660px;
}

/* El selector lleva el ancestro a propósito: .hero-cine-mascara aparece
   más abajo en esta hoja con un margen inferior negativo (el que compensa
   el relleno del recorte) y, a igual especificidad, ganaría por orden. */
.hero-cine .hero-cine-antetitulo {
    margin-bottom: 26px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--sb-gold-deep);
}

.hero-cine-titular {
    margin-bottom: 32px;
    font-family: var(--accent-font);
    font-weight: 300;
    font-size: clamp(46px, 6.6vw, 106px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--sb-brand);
}

.hero-cine-titular em {
    font-style: italic;
    color: var(--sb-gold-deep);
}

.hero-cine .hero-cine-entrada {
    max-width: 480px;
    margin-bottom: 44px;
    font-size: 17px;
    line-height: 1.78;
    color: var(--sb-ink-soft);
}

/* Máscaras de entrada. El recorte lo pone el elemento exterior y el
   movimiento el interior: así el texto se revela subiendo desde debajo
   del filo en lugar de aparecer con una opacidad. El relleno inferior
   compensa el recorte de las bastardillas y los rasgos descendentes. */
.hero-cine-mascara {
    display: block;
    overflow: hidden;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.hero-cine-mascara > span {
    display: block;
}

/* Estado de partida. Solo se aplica cuando el JavaScript ha podido
   anunciarse: sin él el texto se ve tal cual, nunca en blanco. */
.hc-js .hero-cine-mascara > span {
    transform: translateY(112%);
}

.hc-js .hero-cine-acciones,
.hc-js .hero-cine-indicadores li,
.hc-js .hero-cine-bajar {
    opacity: 0;
}

/* ---------- Llamadas a la acción ---------- */

.hero-cine-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.hero-cine-boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 19px 34px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: #FFF9F2;
    background: linear-gradient(135deg, var(--sb-cta-a), var(--sb-cta-b));
    box-shadow:
        0 18px 34px -18px rgba(110, 74, 34, 0.70),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s ease;
}

.hero-cine-boton i {
    font-size: 12px;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cine-boton:hover,
.hero-cine-boton:focus-visible {
    color: #FFF9F2;
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 28px 48px -20px rgba(110, 74, 34, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.hero-cine-boton:hover i {
    transform: translateX(4px);
}

.hero-cine-boton--tenue:hover i {
    transform: translateY(4px);
}

/* Microinteracción del clic: el botón cede un poco antes de soltar. */
.hero-cine-boton:active {
    transform: translateY(0) scale(0.978);
    transition-duration: 0.11s;
}

/* Brillo que recorre el borde. Es un cónico girando detrás, recortado a
   la corona de 1px con la máscara de exclusión: dibuja el filo, no el
   relleno. Donde @property no exista, el borde simplemente no gira. */
@property --hc-giro {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.hero-cine-boton::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--hc-giro),
        rgba(255, 240, 214, 0) 0deg,
        rgba(255, 244, 224, 0.95) 38deg,
        rgba(255, 240, 214, 0) 88deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.hero-cine-boton:hover::before,
.hero-cine-boton:focus-visible::before {
    opacity: 1;
    animation: hcGiroBorde 1.8s linear infinite;
}

@keyframes hcGiroBorde {
    to { --hc-giro: 360deg; }
}

/* Secundario: cristal muy ligero sobre el papel. */
.hero-cine-boton--tenue {
    color: var(--sb-brand);
    background: rgba(255, 253, 250, 0.52);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
            backdrop-filter: blur(14px) saturate(1.25);
    box-shadow:
        inset 0 0 0 1px rgba(140, 100, 50, 0.22),
        0 14px 30px -20px rgba(60, 50, 42, 0.5);
}

.hero-cine-boton--tenue:hover,
.hero-cine-boton--tenue:focus-visible {
    color: var(--sb-brand);
    background: rgba(255, 253, 250, 0.74);
    box-shadow:
        inset 0 0 0 1px rgba(140, 100, 50, 0.34),
        0 22px 38px -22px rgba(60, 50, 42, 0.5);
}

/* ---------- Pie del hero ---------- */

.hero-cine-pie {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding-bottom: 30px;
}

.hero-cine-pie-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(140, 100, 50, 0.18);
}

.hero-cine-indicadores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-cine-indicadores li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--sb-ink-soft);
}

.hero-cine-indicadores i {
    font-size: 12px;
    color: var(--sb-gold);
}

.hero-cine-bajar {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sb-ink-soft);
}

.hero-cine-bajar:hover {
    color: var(--sb-gold-deep);
}

.hero-cine-bajar-linea {
    position: relative;
    width: 56px;
    height: 1px;
    overflow: hidden;
    background: rgba(140, 100, 50, 0.26);
}

.hero-cine-bajar-linea::after {
    content: '';
    position: absolute;
    top: 0;
    left: -42%;
    width: 42%;
    height: 100%;
    background: var(--sb-gold-deep);
    animation: hcRecorrido 2.6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

@keyframes hcRecorrido {
    to { left: 100%; }
}

/* ---------- Adaptación ---------- */

@media only screen and (max-width: 1400px) {
    .hero-cine {
        --hc-pieza: 55vw;
    }
}

@media only screen and (max-width: 1200px) {
    .hero-cine {
        --hc-cabecera: 100px;
        --hc-pieza: 58vw;
        padding-bottom: 128px;
    }

    .hero-cine-lienzo {
        max-width: 520px;
    }

    .hero-cine .hero-cine-entrada {
        max-width: 420px;
        font-size: 16px;
    }
}

/* En pantalla estrecha la pieza no puede seguir ocupando el fondo entero.
   Estirada a toda la altura del hero, la foto —que es vertical— se escala
   por el lado largo y de ella sólo asoma la franja superior que deja ver
   la máscara: la doctora quedaba cortada a la altura de la boca y encima
   lavada por el velo. En móvil pasa a ser una franja propia y medida:

     --hc-banda   es lo que se ve de la foto, y también lo que el texto
                  baja para no pisarla. Un único número gobierna las dos
                  cosas, así que no pueden descuadrarse.

   La pieza se dibuja algo más alta que la banda para que el desvanecido
   caiga por debajo del texto, y algo más ancha que la pantalla para que
   la foto llegue con algo de acercamiento y el rostro no se quede
   diminuto. El texto sigue apoyado sobre papel liso, que es lo que
   sostiene el contraste AA sin necesidad de una caja detrás. */
@media only screen and (max-width: 991px) {
    .hero-cine {
        --hc-cabecera: 84px;
        /* Techo puesto a ojo con el botón principal: por encima de esto la
           llamada a la acción se cae por debajo del pliegue en un móvil
           corriente. */
        --hc-banda: clamp(300px, 40vh, 420px);
        /* Ancho y encuadre de la foto. En tableta la franja ya es lo
           bastante ancha como para que la foto llegue de sobra; el
           acercamiento extra sólo hace falta en el móvil, y se aplica en
           el bloque de 767px. */
        --hc-ancho: 100%;
        --hc-foco: center 14%;
        justify-content: flex-end;
        padding-top: var(--hc-banda);
        padding-bottom: 152px;
    }

    .hero-cine-pieza {
        right: calc((100% - var(--hc-ancho)) / 2);
        bottom: auto;
        width: var(--hc-ancho);
        max-width: none;
        height: var(--hc-banda);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
        -webkit-mask-composite: source-over;
                mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
                mask-composite: add;
    }

    .hero-cine-encuadre > img,
    .hero-cine-encuadre > video {
        object-position: var(--hc-foco);
    }

    /* El desvanecido ya lo hace la máscara; al velo sólo le queda templar
       el final de la franja para que el encuentro con el papel no se note
       como un corte. */
    .hero-cine-velo {
        background: linear-gradient(to bottom,
            rgba(252, 250, 247, 0) 0%,
            rgba(252, 250, 247, 0.05) 50%,
            rgba(252, 250, 247, 0.35) 85%,
            rgba(252, 250, 247, 0.60) 100%);
    }

    .hero-cine-lienzo {
        max-width: 100%;
    }

    .hero-cine-titular {
        font-size: clamp(40px, 10vw, 60px);
    }

    .hero-cine .hero-cine-entrada {
        max-width: 100%;
        margin-bottom: 32px;
    }

    .hero-cine-pie-fila {
        justify-content: flex-start;
    }

    .hero-cine-bajar {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .hero-cine {
        /* El relleno superior lo fija --hc-banda en el bloque de 991px:
           es el mismo número que da altura a la foto, y separarlos aquí
           era lo que dejaba el antetítulo montado sobre su cara. */
        padding-bottom: 148px;

        /* En un móvil la franja mide poco más de 300px de alto: sin este
           acercamiento la doctora sale de cuerpo entero y diminuta. Se
           saca la pieza por los dos lados, centrada, para que la foto
           crezca sin descentrar el rostro. */
        --hc-ancho: 128%;
        --hc-foco: center 22%;
    }

    /* Dos columnas fijas: los cuatro indicadores caen alineados en lugar
       de repartirse a lo que dé de sí cada texto. */
    .hero-cine-indicadores {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }

    .hero-cine-acciones {
        gap: 12px;
    }

    .hero-cine-boton {
        padding: 17px 26px;
        font-size: 14px;
    }

    .hero-cine-indicadores {
        gap: 12px 24px;
        font-size: 12px;
    }

    .hero-cine-indicadores li {
        font-size: 12px;
    }
}

/* Con "reducir movimiento" el hero se sirve estático y completo: sin
   entrada enmascarada, sin polvo, sin recorridos. */
@media (prefers-reduced-motion: reduce) {
    .hc-js .hero-cine-mascara > span,
    .hc-js .hero-cine-acciones,
    .hc-js .hero-cine-indicadores li,
    .hc-js .hero-cine-bajar {
        transform: none;
        opacity: 1;
    }

    .hero-cine-polvo {
        display: none;
    }

    .hero-cine-bajar-linea::after,
    .hero-cine-boton:hover::before {
        animation: none;
    }
}


/* =====================================================================
   VOLVER ARRIBA
   =====================================================================
   El sitio tiene páginas muy largas —las fichas de procedimiento pasan
   de seis pantallas— y el pie no ofrece ninguna vuelta al principio.
   El botón vive en templates/footer.php, así que está en todas.

   Se queda por debajo del z-index 100 del encabezado a propósito: si
   alguna vez coinciden en pantalla (encabezado fijo en móvil + botón),
   manda el encabezado, que es navegación.
   ===================================================================== */
.sb-arriba {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 60;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;

    background: linear-gradient(135deg, var(--sb-cta-a), var(--sb-cta-b));
    color: #fff;
    box-shadow: var(--sb-sh-md);
    text-decoration: none;

    /* Oculto hasta pasar una pantalla de scroll. Se esconde con
       visibility y no con display para poder animar la entrada, y
       con pointer-events para que no capture clics mientras no está. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.9);
    transition: opacity 0.3s var(--sb-e-out),
                transform 0.3s var(--sb-e-out),
                visibility 0.3s,
                box-shadow 0.3s var(--sb-e-out);
}

.sb-arriba.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.sb-arriba i {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.3s var(--sb-e-out);
}

.sb-arriba:hover,
.sb-arriba:focus-visible {
    color: #fff;
    box-shadow: var(--sb-sh-gold);
}

.sb-arriba:hover i {
    transform: translateY(-3px);
}

.sb-arriba:focus-visible {
    outline: 2px solid var(--sb-gold-deep);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .sb-arriba {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
}

/* La página de contacto saca en móvil una barra fija (.ct-dock, WhatsApp
   y Llamar) que ocupa todo el ancho inferior. El botón se sube por encima
   de ella en vez de quedar tapado; las llamadas directas mandan y esto
   sólo es una comodidad. */
@media (max-width: 991px) {
    body.has-ct-dock .sb-arriba {
        bottom: 94px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb-arriba,
    .sb-arriba i {
        transition: opacity 0.2s linear, visibility 0.2s;
        transform: none;
    }

    .sb-arriba.is-visible {
        transform: none;
    }
}


/* =====================================================================
   ENCABEZADO SIEMPRE VISIBLE EN MÓVIL
   =====================================================================
   La plantilla trae un encabezado adherente, pero está muerto: su
   código en js/function.js sólo se activa si el <body> lleva la clase
   «active-sticky-header», que no existe en ningún archivo del proyecto.
   El resultado es que el encabezado se va con el scroll y, en móvil,
   donde TODO el menú vive detrás del botón de hamburguesa, la única
   forma de navegar era volver arriba del todo.

   En lugar de resucitar aquel código (que además esconde y reaparece el
   encabezado según la dirección del scroll, un comportamiento que da
   saltos con Lenis) se resuelve con «position: sticky», que no necesita
   JavaScript, no saca el encabezado del flujo y por tanto no obliga a
   compensar su altura con relleno.

   Sólo hasta 991px, que es el punto donde la plantilla cambia al menú
   de hamburguesa. En escritorio el menú se ve entero sin desplegar y no
   hace falta.
   ===================================================================== */
@media (max-width: 991px) {
    header.main-header {
        position: sticky;
        top: 0;
        /* Por encima de cualquier sección de la página; el botón de
           volver arriba está en 60 y las capas decorativas del body en
           negativo. */
        z-index: 200;
    }

    /* El .bg-section del encabezado es transparente en esta plantilla:
       sin fondo propio, el contenido se leería a través del encabezado
       al pasar por debajo. */
    header.main-header .header-sticky {
        background: var(--sb-bg);
        box-shadow: var(--sb-sh-sm);
    }

    /* El menú desplegable es absoluto respecto al encabezado, así que
       queda anclado a la pantalla igual que él. Con el submenú de
       Servicios (dos niveles y unas sesenta fichas) se saldría por
       abajo sin manera de alcanzarlo, porque el que se desplaza es el
       documento y el menú no se mueve. Se le da su propio desplazamiento
       y se le impide encadenarlo con el de la página. */
    header.main-header .slicknav_menu {
        max-height: calc(100vh - 92px);
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================================
   AGENDA TU CONSULTA (book-appointment.php)
   =====================================================================
   La plantilla solo previó iconos en imagen dentro de .icon-box y una
   sola columna de texto. Aquí hay además dos contactos con icono de
   fuente —WhatsApp y ubicación— y una lista de lo que traer a la cita.
   ===================================================================== */

/* Los iconos de fuente tienen que ocupar lo mismo que los SVG de arriba,
   o las dos columnas de la sección quedan desalineadas. */
.page-book-appointment .appointment-item .icon-box i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    /* Dorado profundo y no --sb-gold: aquí el icono sí porta significado
       (es el que identifica el canal), así que necesita contraste. */
    color: var(--sb-gold-deep);
}

/* Lista de "qué conviene traer". Misma viñeta que las indicaciones de las
   fichas de procedimiento: es la misma clase de contenido y conviene que
   se lea igual en todo el sitio. */
.sb-lista-cita {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.sb-lista-cita li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    line-height: 1.6em;
    color: var(--sb-ink-soft);
}

.sb-lista-cita li:last-child {
    margin-bottom: 0;
}

.sb-lista-cita li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--sb-gold);
}

/* Los enlaces del párrafo de contexto salían en el azul del navegador: la
   plantilla solo previó enlaces dentro de .appointment-item-content. */
.page-book-appointment .appointment-content-body p a,
.page-book-appointment .sb-lista-cita a {
    color: var(--sb-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease-in-out;
}

.page-book-appointment .appointment-content-body p a:hover,
.page-book-appointment .sb-lista-cita a:hover {
    color: var(--sb-brand);
}

/* La segunda columna arranca a la altura del primer paso; en móvil se
   apila y necesita aire para no pegarse a la columna de arriba. */
@media only screen and (max-width: 991px) {
    .page-book-appointment .col-lg-5 .our-appointment-content {
        margin-top: 50px;
    }
}

/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */

/* Texto solo para lectores de pantalla.
   No se usa display:none ni visibility:hidden: eso lo esconde también del
   lector. El recorte a un píxel es la técnica que deja el texto en el
   árbol de accesibilidad pero fuera de la vista. */
.sb-solo-lectores {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Enlace para saltar al contenido: lo primero que encuentra quien navega
   con el teclado. Sin él hay que pasar por los cincuenta y tantos enlaces
   del menú de Procedimientos en cada página para llegar al texto.
   Está oculto hasta que recibe el foco. */
.sb-saltar {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    background-color: var(--sb-brand);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: top 0.2s ease-in-out;
}

.sb-saltar:focus {
    top: 0;
    color: #fff;
    outline: 2px solid var(--sb-gold);
    outline-offset: 2px;
}

/* El foco del teclado tenía que verse. La plantilla lo quitaba en varios
   sitios con outline:none y dejaba a quien navega con tabulador sin saber
   dónde está. :focus-visible solo lo dibuja cuando el foco viene del
   teclado, así que el ratón sigue sin marcar nada. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--sb-gold-deep);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------------------------------------------------------------------
   ANTETÍTULO DE SECCIÓN (.section-eyebrow)
   ---------------------------------------------------------------------
   La plantilla monta cada bloque de sección así:

       <div class="section-title">
           <h3>Servicios</h3>          <- antetítulo decorativo
           <h2>Titular de verdad</h2>  <- el titular
       </div>

   Es decir, un <h3> ANTES del <h2>. Repetido veinte veces por página,
   el esquema de encabezados queda h1, h3, h2, h3, h2, h3, h2... — un
   salto de nivel hacia abajo seguido de otro hacia arriba en cada
   sección. Un lector de pantalla que navega por encabezados (la forma
   habitual de leer una página larga) anuncia esos <h3> como si fueran
   subsecciones del titular anterior, cuando en realidad son la etiqueta
   del titular siguiente. Google también usa esa jerarquía para entender
   de qué va cada bloque.

   La solución es que el antetítulo deje de ser un encabezado: pasa a ser
   un <p class="section-eyebrow">. Pierde el nivel falso y conserva el
   aspecto. Estas reglas son la copia exacta de .section-title h3 de
   css/custom.css (líneas 403-436 y 4612-4620), que no se toca por ser la
   hoja de la plantilla comprada, más los ajustes de color que este tema
   ya aplicaba al <h3> original.
   --------------------------------------------------------------------- */
.section-title .section-eyebrow {
    display: inline-block;
    position: relative;
    font-family: var(--default-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-color);
    padding-left: 34px;
    margin-bottom: 10px;
}

.section-title .section-eyebrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url('../images/icon-sub-heading.png') no-repeat;
    background-position: left center;
    background-size: cover;
    width: 24px;
    height: 24px;
}

/* Mismo trato que el <h3> original sobre las bandas destacadas: el oro
   legible en lugar del blanco de la plantilla, y sin invertir el icono. */
.dark-section .section-title .section-eyebrow {
    color: var(--sb-gold-deep);
}

.dark-section .section-title .section-eyebrow::before {
    filter: none;
}

.main-footer .section-title .section-eyebrow {
    color: var(--sb-gold-deep);
}

@media only screen and (max-width: 991px) {
    .section-title .section-eyebrow {
        padding-left: 30px;
    }

    .section-title .section-eyebrow::before {
        width: 20px;
        height: 20px;
    }
}

/* ---------------------------------------------------------------------
   SUBMENÚ DE SERVICIOS CON TECLADO
   ---------------------------------------------------------------------
   La plantilla abre los submenús solo con el ratón:

       .main-menu ul li:hover > ul { visibility: visible; ... }

   Como el estado cerrado es `visibility: hidden`, esos enlaces quedan
   fuera del orden de tabulación: quien navega con teclado pasa de
   "Servicios" a "Contacto" y no llega nunca a las casi sesenta fichas de
   procedimiento del desplegable. Google no lo penaliza —el rastreador ve
   el HTML igual— pero es una barrera real y la pauta 2.1.1 de las WCAG
   la considera un fallo de nivel A.

   `:focus-within` abre el mismo submenú cuando el foco entra en la rama,
   con las mismas propiedades que el `:hover`, así que el aspecto y la
   animación no cambian en absoluto para quien usa el ratón.
   --------------------------------------------------------------------- */
.main-menu ul li:focus-within > ul {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
    padding: 5px 0;
}

/* ---------------------------------------------------------------------
   BOTÓN DE REPRODUCCIÓN SOBRE VÍDEO
   ---------------------------------------------------------------------
   El botón es un círculo con borde blanco y la palabra "Ver" en blanco,
   sin relleno, colocado encima del vídeo. Funciona mientras el fotograma
   que hay detrás sea oscuro, pero el vídeo de cuidados de rinoplastia
   está grabado en una consulta de paredes claras y con apósitos blancos:
   medido sobre el fotograma real, el peor punto da 1,17:1 —prácticamente
   blanco sobre blanco— cuando el mínimo exigible es 4,5:1. Y al ser
   vídeo, el fondo cambia a cada segundo: no se puede resolver eligiendo
   un color fijo de texto.

   Un disco translúcido del marrón de marca lo arregla en todos los
   fotogramas a la vez sin tapar la imagen: con 0,55 de opacidad sobre el
   fondo más claro posible (blanco puro) el resultado es 5,1:1, y sobre
   cualquier fondo más oscuro solo mejora. El desenfoque de fondo es un
   extra donde el navegador lo soporte; si no, el color por sí solo ya
   cumple.
   --------------------------------------------------------------------- */
.intro-video-box .video-play-button a,
.hero-body .video-play-button a {
    background-color: rgba(99, 56, 30, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.intro-video-box .video-play-button:hover a,
.hero-body .video-play-button:hover a {
    background-color: rgba(99, 56, 30, 0.72);
}


/* ---------------------------------------------------------------------
   CREDENCIALES (about.php)
   ---------------------------------------------------------------------
   El bloque tiene dos mitades porque son dos cosas distintas. A la
   izquierda, lo comprobable: dos números y un enlace al padrón del
   Colegio Médico. A la derecha, lo que no se comprueba con un número
   pero sí explica el recorrido: la formación, en orden.

   La mitad izquierda se trata como una ficha —cristal, borde dorado
   tenue, esquina inferior izquierda recortada, igual que las cajas de
   riesgos de los procedimientos— porque su función es que la vista se
   detenga ahí. La derecha reutiliza la línea de tiempo de recuperación,
   cambiando el punto por el número de etapa; es el mismo lenguaje que ya
   conoce quien viene de una ficha.

   Ningún tamaño de titular se hereda: custom.css deja h1..h6 sin cuerpo
   definido, así que cada h3 de aquí lo declara.
   --------------------------------------------------------------------- */

/* .our-team cierra con 70 px por debajo; con estos 30 quedan los 100
   habituales entre secciones sin sumar el doble. */
.credenciales {
    padding: 30px 0 100px;
}

/* --- Registros públicos --- */

.cred-registro {
    padding: 32px 34px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 24px 24px 8px 24px;
    background-color: var(--sb-surface);
    box-shadow: var(--sb-sh-md);
}

.cred-registro > h3,
.cred-sociedades > h3 {
    margin-bottom: 20px;
    color: var(--sb-brand);
    font-size: 22px;
}

.cred-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 22px;
}

.cred-numeros > div {
    flex: 1 1 140px;
    padding: 16px 18px;
    border: 1px solid var(--sb-surface-brd);
    border-radius: 16px;
    background-color: var(--sb-bg);
}

.cred-numeros dt {
    margin-bottom: 6px;
    color: var(--sb-ink-soft);
    font-family: var(--default-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* El número es el dato; se le da cuerpo de titular. Cifras tabulares
   para que los dos recuadros midan lo mismo aunque los dígitos cambien. */
.cred-numeros dd {
    margin: 0;
    color: var(--sb-gold-deep);
    font-family: var(--accent-font);
    font-size: 34px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cred-nota {
    margin-bottom: 18px;
    color: var(--sb-ink-soft);
    font-size: 15px;
}

.cred-enlace {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--sb-surface-brd-h);
    color: var(--sb-gold-deep);
    font-family: var(--default-font);
    font-size: 15px;
    font-weight: 600;
    transition: color 0.3s var(--sb-e-out), border-color 0.3s var(--sb-e-out);
}

.cred-enlace:hover,
.cred-enlace:focus-visible {
    color: var(--sb-brand);
    border-bottom-color: var(--sb-brand);
}

.cred-enlace i {
    font-size: 12px;
}

/* --- Sociedades --- */

.cred-sociedades {
    margin-top: 34px;
    padding-left: 4px;
}

.cred-sociedades ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cred-sociedades li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--sb-surface-brd);
    color: var(--sb-ink);
}

.cred-sociedades li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cred-sociedades li i {
    margin-top: 4px;
    color: var(--sb-gold-deep);
    font-size: 14px;
}

/* --- Línea de formación --- */

.cred-linea {
    counter-reset: cred;
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0 0 0 62px;
}

/* El hilo arranca y termina dentro del primer y del último círculo, y se
   desvanece al final: la formación de un médico no se cierra en una fecha. */
.cred-linea::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 22px;
    width: 2px;
    background: linear-gradient(to bottom, var(--sb-gold), rgba(181, 138, 74, 0.15) 88%, rgba(181, 138, 74, 0));
}

.cred-linea > li {
    position: relative;
    margin-bottom: 34px;
}

.cred-linea > li:last-child {
    margin-bottom: 0;
}

/* El número sale del contador de la lista, no del marcado: si mañana se
   añade una etapa en medio, la numeración se recoloca sola. */
.cred-linea > li::before {
    counter-increment: cred;
    content: counter(cred);
    position: absolute;
    left: -62px;
    top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--sb-gold);
    border-radius: 50%;
    background-color: var(--sb-bg);
    color: var(--sb-gold-deep);
    font-family: var(--accent-font);
    font-size: 18px;
    line-height: 1;
}

.cred-linea-lugar {
    margin-bottom: 5px;
    color: var(--sb-gold-deep);
    font-family: var(--default-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cred-linea h3 {
    margin-bottom: 5px;
    color: var(--sb-brand);
    font-size: 21px;
}

.cred-linea-centro {
    margin: 0;
    color: var(--sb-ink-soft);
    font-size: 15px;
}

/* Al apilarse las dos columnas hace falta separarlas; en escritorio van
   lado a lado y este margen no existe. */
@media only screen and (max-width: 991px) {
    .credenciales .col-lg-7 {
        margin-top: 44px;
    }
}

@media only screen and (max-width: 575px) {
    .credenciales {
        padding-bottom: 70px;
    }

    .cred-registro {
        padding: 26px 22px;
    }

    .cred-numeros dd {
        font-size: 30px;
    }

    .cred-linea {
        padding-left: 52px;
    }

    .cred-linea::before {
        left: 18px;
        top: 38px;
    }

    .cred-linea > li::before {
        left: -52px;
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------
   Selector de idioma del menú

   Va dentro del <ul> del menú principal (ver el comentario de
   templates/header.php), así que hereda el tamaño y el color de los
   demás enlaces. Aquí solo se le da lo que lo distingue: el hueco entre
   el globo y la etiqueta, el globo un punto más pequeño y en dorado, y
   un filete a la izquierda que lo separa del resto del menú sin añadir
   marcado. El filete se dibuja solo en escritorio: en el menú móvil
   —que es una lista vertical clonada por slicknav— una línea vertical
   no separa nada.
   --------------------------------------------------------------------- */
.main-menu ul li.sb-idioma > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.main-menu ul li.sb-idioma > a i {
    font-size: 14px;
    color: var(--sb-gold-deep);
    transition: color 0.3s ease-in-out;
}

.main-menu ul li.sb-idioma > a:hover i,
.main-menu ul li.sb-idioma > a:focus i {
    color: inherit;
}

@media only screen and (min-width: 992px) {
    .main-menu ul li.sb-idioma {
        margin-left: 6px;
        padding-left: 6px;
        border-left: 1px solid var(--sb-surface-brd);
    }
}