/* ============================================================
   Libertad — ajustes específicos de WordPress
   (se encola solo si este archivo existe; ver functions.php)
   ============================================================ */

/* >>> radio-10 · contenedores (4-ago-2026) ==============================
   RADIO DE 10px EN CONTENEDORES Y CAJAS  ·  pedido por Francisco.

   ⚠️ ESTE BLOQUE VA AL PRINCIPIO DEL FICHERO A PROPÓSITO. Da el radio como
   VALOR POR DEFECTO, no como imposición: al ir el primero y usar sólo dos
   clases, cualquier regla posterior o más específica sigue mandando. Eso es
   justo lo que mantiene redondos los círculos de la plantilla de tratamiento
   (`.e-con.tr-bene` / `.e-con.tr-dato`, definidos más abajo en este mismo
   fichero) y lo que deja que el radio de cualquier contenedor se siga
   cambiando desde el editor de Elementor (sus reglas llevan tres clases y
   ganan siempre).

   Se aplica a los contenedores HIJO. Las secciones (`.e-con.e-parent`) se
   quedan con las esquinas rectas, que es lo pedido.

   El radio se da sobre la variable `--border-radius`, que es de donde lo
   lee `.e-con`; escribir `border-radius` directamente rompería los ajustes
   del editor.
   ==================================================================== */
.e-con.e-child { --border-radius: 10px; }

/* EXCEPCIÓN 1 · lo que va A SANGRE no lleva radio. Un contenedor que ocupa
   todo el ancho de la ventana toca los bordes de la pantalla, así que el
   radio no se lee como esquina redondeada sino como una muesca por la que
   asoma el fondo (pasó con la franja de redes de la cabecera: el píxel de
   la esquina salía crema en vez de marrón).
   La lista sale de escanear las 37 páginas publicadas. */
header .e-con.e-child,            /* franja de redes + filas de la cabecera */
footer .e-con.e-child,            /* pie */
.e-con.e-child.section,           /* bandas de sección del tema (.philo.on-dark) */
.e-con.e-child.hero-bg,           /* fondo del hero de la home */
.e-con.e-child.page-hero-bg,      /* fondo del hero de páginas interiores */
.e-con.e-child.fil-slide { --border-radius: 0; }

/* EXCEPCIÓN 2 · los FILETES. Estos contenedores no son cajas: son líneas de
   separación hechas con el borde de un solo lado (o de dos). Al redondearles
   las esquinas, las puntas de la línea se curvan hacia arriba y quedan como
   ganchos — se vio en la FAQ de Ultherapy.
   Lista obtenida escaneando las 37 páginas en busca de contenedores con
   bordes parciales; si algún día aparece otro separador nuevo, se añade aquí. */
.e-con.e-child.footer-top,
.e-con.e-child.article-meta,
.e-con.e-child.values-stats,
.e-con.e-child.stats,
.e-con.e-child.svc-grid,
.e-con.e-child.svc,
.e-con.e-child.philo-grid,
.e-con.e-child.philo-col,
.e-con.e-child.cat-highlights,
.e-con.e-child.whyus-grid,
.e-con.e-child.whyus-col { --border-radius: 0; }

/* Cajas de las plantillas PHP del tema: no son contenedores de Elementor,
   así que hay que nombrarlas. Sólo las que tienen fondo o marco COMPLETO;
   .faq-list, .hours-block y .final-cta-contact quedan fuera a propósito
   porque también son filetes (borde de un solo lado). */
.testi-card,
.tf-facts,
.lib-contact-form,
.featured-badge { border-radius: 10px; }
/* <<< radio-10 · contenedores ======================================== */




/* La barra de administración no debe tapar la navbar fija.
   En escritorio el admin-bar es fijo (32px) → desplazamos la navbar 32px.
   En ≤782px el admin-bar es position:absolute (se desplaza con el scroll), así
   que la navbar debe ir a top:0 (si la dejáramos en 46px quedaría un hueco bajo
   ella al hacer scroll). Solo afecta a usuarios con sesión; los visitantes no
   ven admin-bar. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .nav { top: 0; }
}

/* Paginación del blog (the_posts_pagination) con estética Libertad */
.pagination .nav-links,
.navigation .nav-links {
	display: inline-flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.pagination .page-numbers,
.navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--gold-line, rgba(184,160,137,.25));
	color: var(--cream, #FFFDFB);
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 0.12em;
	transition: all .3s;
}
.pagination .page-numbers:hover,
.navigation .page-numbers:hover { border-color: var(--gold); color: var(--gold); }
.pagination .page-numbers.current,
.navigation .page-numbers.current {
	background: var(--gold, #B8A089);
	color: var(--ink, #2D201B);
	border-color: var(--gold, #B8A089);
}

/* Imágenes dentro del contenido del artículo (bloques de Gutenberg) */
.article-body img { border-radius: 2px; }
.article-body figure img { width: 100%; }

/* Selección de texto */
::selection { background: var(--gold, #B8A089); color: #fff; }

/* === Ajustes header sticky (franja RRSS + navbar) === */
/* Mayor especificidad (con body) para ganar a libertad-elementor.css */
body .elementor-element.e-con.nav,
body .elementor-element.e-con.nav.scrolled {
  padding-top: 0 !important;
}
/* Fondo marrón sólido idéntico a la franja de RRSS al hacer scroll (sin transparencia ni blur) */
body .elementor-element.e-con.nav.scrolled {
  background-color: #2D201B !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Reducir el espacio entre la franja de RRSS y el menú de navegación */
body .elementor-element.e-con.nav.e-flex {
  gap: 0 !important;
  row-gap: 0 !important;
}

/* Reducir alto del header: menos padding inferior en ambos estados */
body .elementor-element.e-con.nav,
body .elementor-element.e-con.nav.scrolled {
  padding-bottom: 6px !important;
}

/* Logo más pequeño al hacer scroll para un sticky más fino (referencia HTML) */
body .nav .brand-logo,
body .nav .elementor-widget-image img,
body .nav .brand-logo a {
  transition: height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* La clase .brand-logo fija 100px en libertad-global.css: la reducimos al hacer scroll */
body .nav.scrolled .brand-logo {
  height: 50px !important;
}
body .nav.scrolled .brand-logo a {
  display: flex !important;
  align-items: center;
  height: 50px !important;
  line-height: 0 !important;
}
body .nav.scrolled .elementor-widget-image img {
  height: 50px !important;
  width: auto !important;
}

/* === Responsive: padding horizontal del header (portatil/tablet) === */
/* El contenedor interno no tenia padding lateral: el logo quedaba pegado
   al borde izquierdo y los enlaces de RRSS al borde derecho. */
body .nav .e-con-inner {
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  body .nav .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* === Responsive: evitar desbordamiento horizontal (franja blanca) === */
/* El margen negativo de la lista de RRSS y elementos a ancho de viewport
   provocaban scroll horizontal en movil. */
html, body {
  overflow-x: hidden;
}
body header.elementor-108,
body .nav,
body .nav .e-con-inner {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  body .nav .elementor-icon-list-items {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === Responsive: margen izquierdo del logo para que no quede pegado === */
/* El logo (.brand-logo) quedaba al ras del padding del contenedor; le damos
   un poco mas de aire a la izquierda para equilibrar con los enlaces de la derecha. */
body .nav .elementor-element-606685b,
body .nav .brand-logo {
  margin-left: 24px;
}
@media (max-width: 1024px) {
  body .nav .elementor-element-606685b,
  body .nav .brand-logo {
    margin-left: 12px;
  }
}

/* === Portatil: evitar que el menu se corte (logo mas pequeno + menu mas compacto) === */
/* IMPORTANTE: el logo es un SVG; hay que fijar width Y height en px (no auto)
   para que escale, y el espaciado del menu vive en .nav-links ul (gap), no en
   .nav-links. Solo afecta al rango de portatil; escritorio (>1440) y movil
   (<1025, menu oculto) quedan igual. */
@media (min-width: 1025px) and (max-width: 1440px) {
  body .nav .brand-logo img,
  body .nav .elementor-widget-image img {
    height: 72px !important;
    width: 144px !important;
    max-width: 144px !important;
  }
  body .nav .nav-links ul {
    gap: 24px !important;
  }
  body .nav .nav-links a {
    font-size: 10.5px !important;
    letter-spacing: 2px !important;
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  body .nav .brand-logo img,
  body .nav .elementor-widget-image img {
    height: 62px !important;
    width: 124px !important;
    max-width: 124px !important;
  }
  body .nav .nav-links ul {
    gap: 16px !important;
  }
  body .nav .nav-links a {
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
  }
}

/* LIBERTAD laptop menu right margin */
@media (min-width:1025px){
  body .nav .nav-links{ margin-right:48px; }
}
@media (min-width:1025px) and (max-width:1200px){
  body .nav .nav-links{ margin-right:32px; }
}
/* END laptop menu right margin */

/* LIBERTAD hero top spacing */
body .elementor-element.e-con.hero{ padding-top:180px !important; }
/* END hero top spacing */

/* LIBERTAD elementor hidden classes fix */
body .elementor-element.elementor-hidden-desktop{ display:none !important; }
@media(max-width:1024px){ body .elementor-element.elementor-hidden-tablet{ display:none !important; } }
@media(max-width:767px){ body .elementor-element.elementor-hidden-mobile{ display:none !important; } }
/* END elementor hidden classes fix */

/* LIBERTAD hero eyebrow+sub align right */
body .e-con.hero .eyebrow{ justify-content:flex-end !important; }
body .e-con.hero .eyebrow .elementor-heading-title{ text-align:right !important; }
body .e-con.hero .hero-sub{ margin-left:auto !important; text-align:right !important; }
/* END hero eyebrow+sub align right */

/* === Sección Tratamientos: centrar grid de servicios (solo desktop) === */
@media (min-width: 1101px) {
  body .section.services .container {
    max-width: 1560px !important;
  }
  body .section.services .elementor-element.e-con.svc-grid,
  body .section.services .svc-grid {
    grid-auto-flow: column !important;
    grid-auto-columns: 360px !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    gap: 48px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === Sección Tratamientos: alinear descripción + botón (bloque derecho) a la derecha === */
@media (min-width: 1101px) {
  body .section.services .services-head > .e-con:nth-child(2) {
    align-items: flex-end !important;
    text-align: right !important;
  }
  body .section.services .services-head > .e-con:nth-child(2) .elementor-widget-text-editor {
    text-align: right !important;
  }
}

/* === Hero movil: textos a la izquierda === */
@media (max-width: 767px) {
  body .e-con.hero .eyebrow .elementor-heading-title,
  body .e-con.hero .hero-sub {
    text-align: left !important;
  }
}

/* ===== FILOSOFÍA SLIDER (fil-) ===== */
body .fil-slider{position:relative;width:100%;height:100vh;min-height:100vh;overflow:hidden;padding:0!important;--fil-charcoal:#2C2420;--fil-off:#F5F0E8;--fil-cacao:#8C7B6E;--fil-sage:#B5BC99;}
body .fil-slider>.e-con-inner{height:100%;}
/* slides apilados y superpuestos */
body .fil-slider .fil-slide{position:absolute!important;inset:0;width:100%;height:100vh;min-height:100vh;opacity:0;visibility:hidden;transition:opacity .9s ease;background-size:cover!important;background-position:center center!important;display:flex;align-items:center;}
body .fil-slider .fil-slide.is-active{opacity:1;visibility:visible;z-index:2;}
/* overlay oscuro degradado */
body .fil-slider .fil-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(44,36,32,.85) 0%,rgba(44,36,32,.55) 45%,rgba(44,36,32,.15) 100%);z-index:1;}
body .fil-slider .fil-slide>.e-con-inner,body .fil-slider .fil-slide-content{position:relative;z-index:3;}
/* contenido del slide */
body .fil-slider .fil-slide-content{max-width:560px;margin-left:6vw;padding:0;color:var(--fil-off);text-align:left;}
body .fil-slider .fil-eyebrow{font-family:"Cormorant Garamond",serif!important;font-style:italic;font-size:1.25rem!important;letter-spacing:.18em;text-transform:uppercase;color:var(--fil-sage)!important;margin:0 0 1.2rem!important;}
body .fil-slider .fil-title,body .fil-slider .fil-title *{font-family:"Cormorant Garamond",serif!important;font-weight:500!important;font-size:5rem!important;line-height:.98!important;text-transform:uppercase;color:var(--fil-off)!important;margin:0 0 1.4rem!important;letter-spacing:.01em;}
body .fil-slider .fil-rule{margin:0 0 1.6rem!important;}
body .fil-slider .fil-rule .elementor-divider-separator{border-top-color:var(--fil-cacao)!important;border-top-width:2px!important;}
body .fil-slider .fil-desc,body .fil-slider .fil-desc p{font-family:"Inter",sans-serif!important;font-size:1.05rem!important;line-height:1.7!important;color:rgba(245,240,232,.85)!important;max-width:480px;margin:0 0 2rem!important;}
body .fil-slider .fil-btn .elementor-button{background:transparent!important;border:1px solid var(--fil-off)!important;color:var(--fil-off)!important;border-radius:0!important;padding:.95em 2.4em!important;font-family:"Inter",sans-serif!important;font-size:.78rem!important;letter-spacing:.18em;text-transform:uppercase;transition:all .35s ease;}
body .fil-slider .fil-btn .elementor-button:hover{background:var(--fil-off)!important;color:var(--fil-charcoal)!important;}
body .fil-slider .fil-counter{font-family:"Inter",sans-serif!important;font-size:.8rem!important;letter-spacing:.2em;color:rgba(245,240,232,.7)!important;margin:2.4rem 0 0!important;}
/* barra de progreso superior */
body .fil-slider .fil-progress-con{position:absolute!important;top:0;left:0;right:0;z-index:10;display:flex!important;flex-direction:row!important;gap:2.5rem;padding:2rem 6vw!important;align-items:center;}
body .fil-slider .fil-step{font-family:"Inter",sans-serif!important;font-size:.72rem!important;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,240,232,.45)!important;margin:0!important;transition:color .4s ease;}
body .fil-slider .fil-step.is-active{color:var(--fil-off)!important;}
/* flechas de navegación */
body .fil-slider .fil-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:11;width:54px;height:54px;border:1px solid rgba(245,240,232,.4);border-radius:50%;background:transparent;color:var(--fil-off);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .3s ease;}
body .fil-slider .fil-arrow:hover{background:rgba(245,240,232,.15);border-color:var(--fil-off);}
body .fil-slider .fil-arrow.prev{left:2vw;}
body .fil-slider .fil-arrow.next{right:2vw;}
@media (max-width:767px){
  body .fil-slider .fil-title,body .fil-slider .fil-title *{font-size:3rem!important;}
  body .fil-slider .fil-slide-content{margin-left:0;padding:0 7vw;max-width:100%;}
  body .fil-slider .fil-progress-con{gap:1.2rem;padding:1.4rem 7vw!important;}
  body .fil-slider .fil-arrow{width:42px;height:42px;}
}

/* PATCH contenido slide por encima del overlay */
body .fil-slider .fil-slide > .e-con-inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:6vw!important;max-width:680px;}
body .fil-slider .fil-slide > .e-con-inner > .e-con{position:relative;z-index:3;width:auto;}
body .fil-slider .fil-eyebrow,body .fil-slider .fil-title,body .fil-slider .fil-desc,body .fil-slider .fil-counter,body .fil-slider .fil-rule,body .fil-slider .fil-btn{position:relative;z-index:3;}
@media (max-width:767px){ body .fil-slider .fil-slide > .e-con-inner{padding-left:7vw!important;padding-right:7vw!important;} }
/* PATCH FIN */

/* AJUSTES v2: header gap, desplazar a derecha, menos espaciado */
body .fil-slider .fil-slide > .e-con-inner{padding-left:9vw!important;padding-right:6vw!important;padding-top:90px!important;max-width:760px;}
body .fil-slider .fil-progress-con{padding-top:96px!important;padding-left:9vw!important;}
body .fil-slider .fil-eyebrow{margin:0 0 .7rem!important;}
body .fil-slider .fil-title,body .fil-slider .fil-title *{margin:0 0 .9rem!important;}
body .fil-slider .fil-rule{margin:0 0 1rem!important;}
body .fil-slider .fil-desc,body .fil-slider .fil-desc p{margin:0 0 1.3rem!important;}
body .fil-slider .fil-counter{margin:1.4rem 0 0!important;}
@media (max-width:767px){
  body .fil-slider .fil-slide > .e-con-inner{padding-left:7vw!important;padding-right:7vw!important;padding-top:80px!important;}
  body .fil-slider .fil-progress-con{padding-top:80px!important;padding-left:7vw!important;}
}
/* AJUSTES v2 FIN */

/* AJUSTES v3: selector correcto .fil-slide > .e-con */
body .fil-slider .fil-slide{align-items:center!important;}
body .fil-slider .fil-slide > .e-con{position:relative;z-index:3;width:100%;max-width:760px;margin:0!important;padding-left:11vw!important;padding-right:6vw!important;padding-top:120px!important;padding-bottom:40px!important;}
body .fil-slider .fil-progress-con{padding-top:104px!important;padding-left:11vw!important;}
@media (max-width:767px){
  body .fil-slider .fil-slide > .e-con{padding-left:7vw!important;padding-right:7vw!important;padding-top:96px!important;}
  body .fil-slider .fil-progress-con{padding-top:84px!important;padding-left:7vw!important;}
}
/* AJUSTES v3 FIN */

/* AJUSTES v4: bajar barra de pasos bajo el header */
body .fil-slider .fil-progress-con{top:150px!important;padding-top:0!important;}
body .fil-slider .fil-slide > .e-con{padding-top:200px!important;}
@media (max-width:767px){
  body .fil-slider .fil-progress-con{top:120px!important;}
  body .fil-slider .fil-slide > .e-con{padding-top:165px!important;}
}
/* AJUSTES v4 FIN */

/* AJUSTES v5: contenido mas a la izquierda */
body .fil-slider .fil-slide > .e-con{padding-left:5vw!important;max-width:640px;}
body .fil-slider .fil-progress-con{padding-left:5vw!important;}
@media (max-width:767px){
  body .fil-slider .fil-slide > .e-con{padding-left:7vw!important;}
  body .fil-slider .fil-progress-con{padding-left:7vw!important;}
}
/* AJUSTES v5 FIN */

/* AJUSTES v6: alinear contenido a la izquierda (no centrar) */
body .fil-slider .fil-slide{align-items:flex-start!important;}
body .fil-slider .fil-slide > .e-con{align-self:flex-start!important;margin-left:0!important;padding-left:5vw!important;}
/* AJUSTES v6 FIN */

/* AJUSTES v7: un poco mas a la derecha */
body .fil-slider .fil-slide > .e-con{padding-left:8vw!important;}
body .fil-slider .fil-progress-con{padding-left:8vw!important;}
@media (max-width:767px){
  body .fil-slider .fil-slide > .e-con{padding-left:7vw!important;}
  body .fil-slider .fil-progress-con{padding-left:7vw!important;}
}
/* AJUSTES v7 FIN */

/* AJUSTES v8: contenido siempre bajo la barra de pasos */
body .fil-slider .fil-slide{justify-content:flex-start!important;}
body .fil-slider .fil-slide > .e-con{padding-top:250px!important;padding-bottom:40px!important;}
@media (max-width:767px){
  body .fil-slider .fil-slide > .e-con{padding-top:190px!important;}
}
/* AJUSTES v8 FIN */

/* AJUSTES v9: evitar corte de contenido por abajo */
body .fil-slider{height:auto!important;min-height:100vh!important;overflow:visible!important;}
body .fil-slider .fil-slide{height:auto!important;min-height:100vh!important;}
body .fil-slider .fil-slide.is-active{position:relative!important;}
body .fil-slider .fil-slide:not(.is-active){position:absolute!important;}
body .fil-slider .fil-slide > .e-con{padding-bottom:70px!important;}
@media (max-width:767px){
  body .fil-slider .fil-slide > .e-con{padding-bottom:60px!important;}
}
/* AJUSTES v9 FIN */

/* AJUSTES v10: titulo h1 maximo 2 lineas */
body .fil-slider .fil-title,body .fil-slider .fil-title *{font-size:4.2rem!important;line-height:1.02!important;white-space:nowrap;}
body .fil-slider .fil-slide > .e-con{max-width:760px;}
@media (max-width:1024px){
  body .fil-slider .fil-title,body .fil-slider .fil-title *{font-size:3.4rem!important;white-space:normal;}
}
@media (max-width:767px){
  body .fil-slider .fil-title,body .fil-slider .fil-title *{font-size:2.8rem!important;white-space:normal;}
}
/* AJUSTES v10 FIN */

/* AJUSTES v11: menos espacio entre elementos del contenido */
body .fil-slider .fil-eyebrow{margin:0 0 .5rem!important;}
body .fil-slider .fil-title,body .fil-slider .fil-title *{margin:0 0 .5rem!important;}
body .fil-slider .fil-rule{margin:.3rem 0 .6rem!important;}
body .fil-slider .fil-desc,body .fil-slider .fil-desc p{margin:0 0 .7rem!important;}
body .fil-slider .fil-btn{margin-top:.3rem!important;}
body .fil-slider .fil-counter{margin:.9rem 0 0!important;}
/* reducir tambien el espacio que el divisor reserva */
body .fil-slider .fil-rule .elementor-divider{padding-top:0!important;padding-bottom:0!important;}
/* AJUSTES v11 FIN */

/* ===== AJUSTES MÓVIL/TABLET (responsive final) ===== */
@media (max-width:1024px){
  body .fil-slider .fil-slide > .e-con,
  body .fil-slider .fil-slide > .e-con-inner{
    padding-top:120px!important;
    padding-left:7vw!important;
    padding-right:7vw!important;
    max-width:100%!important;
  }
  body .fil-slider .fil-progress-con{
    padding-top:96px!important;
    padding-left:7vw!important;
    padding-right:7vw!important;
    gap:1.4rem!important;
  }
  body .fil-slider .fil-title,
  body .fil-slider .fil-title *{
    white-space:normal!important;
    font-size:3.4rem!important;
    line-height:1.05!important;
  }
  body .fil-slider .fil-desc,
  body .fil-slider .fil-desc p{font-size:1rem!important;line-height:1.6!important;}
}
@media (max-width:767px){
  body .fil-slider .fil-slide{background-position:center center!important;background-size:cover!important;}
  body .fil-slider .fil-slide > .e-con,
  body .fil-slider .fil-slide > .e-con-inner{
    padding-top:130px!important;
    padding-bottom:110px!important;
    padding-left:7vw!important;
    padding-right:7vw!important;
    max-width:100%!important;
    justify-content:center!important;
  }
  body .fil-slider .fil-progress-con{
    padding-top:100px!important;
    padding-left:7vw!important;
    padding-right:7vw!important;
    gap:1rem!important;
    flex-wrap:wrap!important;
    font-size:.7rem!important;
  }
  body .fil-slider .fil-eyebrow{font-size:.85rem!important;letter-spacing:.18em!important;}
  body .fil-slider .fil-title,
  body .fil-slider .fil-title *{
    white-space:normal!important;
    font-size:2.7rem!important;
    line-height:1.08!important;
    margin:0 0 .6rem!important;
  }
  body .fil-slider .fil-rule{margin:.3rem 0 .7rem!important;}
  body .fil-slider .fil-desc,
  body .fil-slider .fil-desc p{font-size:.95rem!important;line-height:1.55!important;}
  body .fil-slider .fil-btn{margin-top:.6rem!important;width:auto!important;}
  body .fil-slider .fil-counter{margin-top:1.2rem!important;font-size:.75rem!important;}
  body .fil-slider .fil-arrow{width:40px!important;height:40px!important;font-size:1rem!important;}
  body .fil-slider .fil-arrow.fil-prev{left:10px!important;}
  body .fil-slider .fil-arrow.fil-next{right:10px!important;}
}
@media (max-width:480px){
  body .fil-slider .fil-title,
  body .fil-slider .fil-title *{font-size:2.3rem!important;}
  body .fil-slider .fil-slide > .e-con,
  body .fil-slider .fil-slide > .e-con-inner{padding-top:120px!important;}
}

/* ===== AJUSTES MÓVIL v2: pasos arriba + flechas abajo ===== */
@media (max-width:767px){
  body .fil-slider .fil-progress-con{
    top:78px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    padding:0 7vw!important;
    gap:1.2rem!important;
    flex-wrap:nowrap!important;
    font-size:.62rem!important;
    z-index:12!important;
  }
  body .fil-slider .fil-slide > .e-con,
  body .fil-slider .fil-slide > .e-con-inner{
    padding-top:150px!important;
    padding-bottom:140px!important;
    justify-content:flex-start!important;
  }
  body .fil-slider .fil-arrow{
    top:auto!important;
    bottom:24px!important;
    transform:none!important;
    width:42px!important;
    height:42px!important;
    z-index:13!important;
  }
  body .fil-slider .fil-arrow.fil-prev{left:7vw!important;right:auto!important;}
  body .fil-slider .fil-arrow.fil-next{right:7vw!important;left:auto!important;}
  body .fil-slider .fil-counter{margin-top:1.4rem!important;margin-bottom:60px!important;}
}

/* ===== AJUSTES MÓVIL v3: pasos más abajo + flechas más arriba ===== */
@media (max-width:767px){
  body .fil-slider .fil-progress-con{top:118px!important;}
  body .fil-slider .fil-slide > .e-con,
  body .fil-slider .fil-slide > .e-con-inner{padding-top:180px!important;}
  body .fil-slider .fil-arrow{bottom:90px!important;}
}

/* ===== AJUSTES MÓVIL v4: compactar contenido (paso 3) ===== */
@media (max-width:767px){
  body .fil-slider .fil-slide > .e-con,
  body .fil-slider .fil-slide > .e-con-inner{padding-top:155px!important;padding-bottom:150px!important;}
  body .fil-slider .fil-eyebrow{margin:0 0 .5rem!important;}
  body .fil-slider .fil-title,
  body .fil-slider .fil-title *{margin:0 0 .4rem!important;line-height:1.04!important;}
  body .fil-slider .fil-rule{margin:.2rem 0 .5rem!important;}
  body .fil-slider .fil-desc,
  body .fil-slider .fil-desc p{margin:0 0 .5rem!important;line-height:1.45!important;}
  body .fil-slider .fil-btn{margin-top:.4rem!important;}
  body .fil-slider .fil-counter{margin-top:.9rem!important;margin-bottom:40px!important;}
}

/* ===== AJUSTES TABLET v1: pasos arriba + flechas abajo (768-1024) ===== */
@media (min-width:768px) and (max-width:1024px){
  body .fil-slider .fil-progress-con{
    top:90px!important;
    left:0!important;right:0!important;width:100%!important;
    padding:0 6vw!important;
    gap:2rem!important;
    z-index:12!important;
  }
  body .fil-slider .fil-slide > .e-con,
  body .fil-slider .fil-slide > .e-con-inner{
    padding-top:160px!important;
    padding-bottom:120px!important;
    padding-left:6vw!important;padding-right:6vw!important;
    max-width:680px!important;
    justify-content:flex-start!important;
  }
  body .fil-slider .fil-arrow{
    top:auto!important;
    bottom:40px!important;
    transform:none!important;
    width:48px!important;height:48px!important;
    z-index:13!important;
  }
  body .fil-slider .fil-arrow.fil-prev{left:6vw!important;right:auto!important;}
  body .fil-slider .fil-arrow.fil-next{right:6vw!important;left:auto!important;}
  body .fil-slider .fil-title,
  body .fil-slider .fil-title *{font-size:3.6rem!important;line-height:1.05!important;}
  body .fil-slider .fil-counter{margin-top:1.2rem!important;}
}

/* ===== AJUSTES TABLET v2: pasos más abajo + flechas más arriba (768-1024) ===== */
@media (min-width:768px) and (max-width:1024px){
  body .fil-slider .fil-progress-con{top:130px!important;}
  body .fil-slider .fil-slide > .e-con,
  body .fil-slider .fil-slide > .e-con-inner{padding-top:195px!important;}
  body .fil-slider .fil-arrow{bottom:100px!important;}
}

/* ===== FIN FILOSOFÍA SLIDER ===== */

/* === Servicios · 03 + Tecnologia FDA + boton visibles (eran dorado claro invisible) === */
body.elementor-page-777 .elementor-element-0d804c6,
body.elementor-page-777 .elementor-element-0d804c6 *,
body.elementor-page-777 .elementor-element-728dddc,
body.elementor-page-777 .elementor-element-728dddc *{
  color:#2D201B !important;
  -webkit-text-fill-color:#2D201B !important;
}
body.elementor-page-777 .elementor-element-3a16513 .elementor-button .elementor-button-text{
  color:#2D201B !important;
  -webkit-text-fill-color:#2D201B !important;
}

/* === borde botones Servicios (eran dorado claro invisible) === */
body.elementor-page-777 .elementor-element-3a16513 .elementor-button,
body.elementor-page-777 .elementor-element-b4256c1 .elementor-button,
body.elementor-page-777 .elementor-element-ed0ee6a .elementor-button{
  border-color:#2D201B !important;
}

/* === PALETA NUEVA === */
/* Variables del tema enlazadas a los Colores Globales de Elementor.
   Cambia el global en el panel de Elementor y se actualiza toda la web.
   El hex de respaldo es la paleta nueva por si el global no estuviera. */
body{
  --ink: var(--e-global-color-libink, #2D201B);
  --ink-soft: var(--e-global-color-libink, #37371b);
  --cream: var(--e-global-color-libcream, #f0eade);
  --cream-2: var(--e-global-color-libcream2, #d6cfbf);
  --cream-3: var(--e-global-color-libcream2, #C1B094);
  --gold: var(--e-global-color-libgold, #776654);
  --gold-2: var(--e-global-color-libgold, #767154);
  --gold-soft: rgba(119,102,84,0.35);
  --gold-line: rgba(119,102,84,0.25);
  --muted: var(--e-global-color-libmuted, #9fa194);
  --muted-2: var(--e-global-color-libmuted, #afae90);
}
/* === /PALETA NUEVA === */

/* === ACENTOS VERDE === */
:root{ --accent:#9fa194; --accent-strong:#767154; }
.eyebrow, .about-tag{ color:var(--accent) !important; }
.eyebrow::before, .about-tag::before, .eyebrow::after, .about-tag::after{ background:var(--accent) !important; }
.footer-social a.elementor-social-icon{ border:1px solid rgba(159,161,148,.55) !important; background:transparent !important; transition:all .3s ease; }
.footer-social a.elementor-social-icon:hover{ background:var(--accent) !important; border-color:var(--accent) !important; }
.footer-social .elementor-social-icon svg, .footer-social .elementor-social-icon i{ transition:color .3s ease,fill .3s ease; }

/* === ACENTOS-B ZONAS GRANDES === */
/* Palabras en cursiva de los titulos */
.accent{ color:var(--accent) !important; border-bottom-color:var(--accent) !important; }
.elementor-heading-title em{ color:var(--accent) !important; }
/* Enlaces "Descubrir" y su flecha */
.svc-link{ color:var(--accent-strong) !important; border-bottom-color:var(--accent) !important; }
.svc-link::after, .svc-link::before{ background:var(--accent-strong) !important; }
.svc-link:hover{ color:var(--accent) !important; }
/* Puntos activos de testimonios */
.testi-dot.active{ background:var(--accent) !important; }
/* === FIN ACENTOS-B === */
/* === FIN ACENTOS VERDE === */

/* === FAQ TEXTO ACIDO HIALURONICO === */
body .faq-side p, body .faq-a-inner{ color:#2D201B !important; }

/* === FAQ ICONO FIJO === */
body .faq-q > span:first-child{ flex:1 1 auto !important; }
body .faq-q > .plus{ flex:0 0 auto !important; margin-left:auto !important; }

/* === FAQ PREGUNTA WRAP === */
body .faq-q{ white-space:normal !important; align-items:flex-start !important; }
body .faq-q > span:first-child{ white-space:normal !important; overflow-wrap:break-word !important; word-break:break-word !important; }
body .faq-q > .plus{ margin-top:2px !important; }
/* === FIN FAQ PREGUNTA WRAP === */

/* === DIRECTOR-ROLE CLINIC TOUR (color editable desde Elementor) === */
body .elementor-element-4bb3a59 .director-role,
body .elementor-element-b222a93 .director-role{ color:inherit !important; }
/* === FIN DIRECTOR-ROLE CLINIC TOUR === */

/* === BODY-LG CONTACTO COMO LLEGAR (color editable desde Elementor) === */
body .elementor-element-a41f710 .body-lg{ color:inherit !important; }
/* === FIN BODY-LG CONTACTO COMO LLEGAR === */

/* === TEXTOS EQUIPO (colores editables desde Elementor) === */
body .elementor-element-00c6f4c .director-bio p,
body .elementor-element-00c6f4c p{ color:inherit !important; }
body .elementor-element-7338549 .formacion-content p,
body .elementor-element-7338549 p{ color:inherit !important; }
body .elementor-element-4080324 .institutions-eyebrow{ color:inherit !important; }
/* === FIN TEXTOS EQUIPO === */

/* === CREDENCIALES EQUIPO (titulo + años) === */
body .elementor-element-e5168f1.credentials h4,
body .elementor-element-e5168f1.credentials li .cr-year{ color:#37371B !important; }
/* === FIN CREDENCIALES EQUIPO === */

/* === BODY-LG INICIO NUESTRO EQUIPO (color editable desde Elementor) === */
body .elementor-element-d7ba7fe .body-lg,
body .elementor-element-d7ba7fe p{ color:inherit !important; }
/* === FIN BODY-LG INICIO NUESTRO EQUIPO === */

/* === MEDICINA FACIAL FILOSOFIA (parrafo secundario) === */
body .elementor-element-a1c9cdc .cat-intro-body,
body .elementor-element-a1c9cdc p{ color:#2D201B !important; }
/* === FIN MEDICINA FACIAL FILOSOFIA === */

/* === RESERVAR HERO (eyebrow verde oscuro + desc marron) === */
body .elementor-element-4ea696e .booking-hero .eyebrow{ color:#37371B !important; }
body .elementor-element-4ea696e .booking-hero p{ color:#2D201B !important; }
/* === FIN RESERVAR HERO === */

/* === ULTHERAPY PRIME STATS (numeros + labels, editable Elementor) === */
body .elementor-element-460d2c5 .v-num,
body .elementor-element-460d2c5 .v-num .lib-counter,
body .elementor-element-460d2c5 .lib-counter,
body .elementor-element-460d2c5 .v-label{ color:#2D201B !important; }
/* === FIN ULTHERAPY PRIME STATS === */

/* === BREADCRUMB TRATAMIENTO ACTUAL === */
body .breadcrumb .bc-current{ color:#2D201B !important; }
/* === FIN BREADCRUMB TRATAMIENTO ACTUAL === */

/* === HEADER PAGINAS TRATAMIENTO (fondo oscuro para ver logo/menu) === */
body.page-template-page-tratamiento .nav{ background-color:#2D201B !important; }
/* === FIN HEADER PAGINAS TRATAMIENTO === */

/* === SUBMENU DROPDOWN HEADER (mostrar submenus en hover) === */
header .elementor-nav-menu li.menu-item-has-children{ position:relative; }
header .nav-links .elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown{ display:none; position:absolute; top:100%; left:0; min-width:220px; background-color:#2D201B; padding:8px 0; margin:0; list-style:none; z-index:9999; box-shadow:0 8px 24px rgba(0,0,0,.18); }
header .nav-links .elementor-nav-menu li.menu-item-has-children:hover > .sub-menu.elementor-nav-menu--dropdown,
header .nav-links .elementor-nav-menu li.menu-item-has-children:focus-within > .sub-menu.elementor-nav-menu--dropdown{ display:block !important; }
header .elementor-nav-menu .sub-menu li{ display:block; margin:0; background:transparent !important; }
header .elementor-nav-menu .sub-menu a,
header .elementor-nav-menu .sub-menu a.elementor-item-active,
header .elementor-nav-menu .sub-menu a.elementor-sub-item{ display:block; padding:8px 18px; white-space:nowrap; color:#F0EADE !important; background:transparent !important; font-size:13px; letter-spacing:.06em; }
header .elementor-nav-menu .sub-menu a:hover{ color:#FFFFFF !important; background-color:rgba(255,255,255,.06) !important; }
/* === FIN SUBMENU DROPDOWN HEADER === */

/* === MENU MOVIL SUBAPARTADO (mm-sub) === */
body .mobile-menu .mm-link.mm-sub{ font-size:30px !important; opacity:.85; margin-top:-6px; }
body .mobile-menu .mm-link.mm-sub::before{ content:"\2014\00a0"; opacity:.55; }
/* === FIN MENU MOVIL SUBAPARTADO === */


/* === MENU MOVIL SUBAPARTADO === */
body .mobile-menu .mm-toggle{
  background:transparent !important;
  border:0 !important;
  cursor:pointer;
  font:inherit;
}
body .mobile-menu .mm-subwrap{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .3s ease, opacity .3s ease;
}
body .mobile-menu .mm-subwrap.is-open{
  max-height:200px !important;
  opacity:1 !important;
}
body .mobile-menu .mm-link.mm-sub{
  font-size:30px !important;
  opacity:.85;
}
body .mobile-menu .mm-link.mm-sub::before{
  content:"\2014\00a0";
  opacity:.55;
}
/* === FIN MENU MOVIL SUBAPARTADO === */

/* === NAV: telefono + CTA "Reservar cita" (27-jul-2026) === */
body .nav .nav-right-wrap { width: auto; flex-shrink: 0; }
body .nav .nav-right { display: flex; align-items: center; gap: 22px; }
body .nav .nav-right .nav-phone,
body .nav .nav-right .btn { white-space: nowrap; }
body .nav .nav-right .btn { padding: 14px 24px; font-size: 10px; }
/* aire a la derecha para que el boton no toque el borde */
body .nav .elementor-element-606685b { padding-right: 32px !important; box-sizing: border-box; }
/* el grupo derecho ya separa: fuera el margen extra del menu */
@media (min-width:1025px){ body .nav .nav-links{ margin-right: 0; } }
/* el menu no debe partirse en dos lineas */
body .nav .nav-links ul { flex-wrap: nowrap !important; }
body .nav .nav-links a { white-space: nowrap; }
/* compactar enlaces para que quepan junto al CTA */
@media (min-width: 1025px) and (max-width: 1680px) {
  body .nav .nav-links ul { gap: 20px !important; }
  body .nav .nav-links a { font-size: 10.5px !important; letter-spacing: 1.5px !important; }
}
@media (min-width: 1025px) and (max-width: 1400px) {
  body .nav .nav-right .nav-phone { display: none; }
  body .nav .nav-links ul { gap: 15px !important; }
  body .nav .nav-links a { font-size: 10px !important; letter-spacing: 1px !important; }
}
@media (max-width: 1024px) { body .nav .nav-right-wrap { display: none; } }
/* === FIN NAV telefono + CTA === */

/* === MM-TOGGLE como enlace del menu movil (fix color de boton, 27-jul-2026) === */
body .mobile-menu .mm-toggle{
  color: var(--cream, #FFFDFB) !important;
  font-family: var(--serif, "Cormorant Garamond", serif) !important;
  font-size: clamp(36px, 6vw, 52px) !important;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding: 0;
  text-align: center;
}
/* === FIN MM-TOGGLE === */

/* === NAV a ancho completo (fix pantallas >1680, 27-jul-2026) === */
body .nav .elementor-element-606685b{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}
@media (max-width: 1024px){
  body .nav .elementor-element-606685b{ padding-left: 20px !important; padding-right: 20px !important; }
}
/* === FIN NAV ancho completo === */

/* ============================================================
   COMPONENTES NUEVOS 27-jul-2026: paginas ULTHERAPY PRIME y
   Medicina Regenerativa, mega menu, loader y transiciones.
   ============================================================ */

/* --- utilidades comunes --- */
.h-section.center { text-align: center; }
.body-lg.center, p.center { text-align: center; margin-left: auto; margin-right: auto; }
.lib-x-head { padding-top: 110px; text-align: left; }
.lib-x-faqwrap { padding-bottom: 110px; max-width: 900px !important; }
.lib-x-faq .lib-x-head { max-width: 900px; }

/* --- UP hero --- */
.up-hero, .rg-hero { padding-top: 200px !important; padding-bottom: 90px !important; }
.up-hero-grid, .rg-hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center;
}
.up-hero-copy .h-display, .rg-hero-copy .h-display { margin: 18px 0 22px; }
.up-hero-copy .body-lg, .rg-hero-copy .body-lg { max-width: 560px; }
.up-hero-ctas, .rg-hero-ctas, .up-cta-btns { display: flex; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
.up-hero-media img, .rg-hero-media img {
  width: 100%; height: 520px; object-fit: cover; display: block;
  border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
@media (max-width: 1024px) {
  .up-hero-grid, .rg-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .up-hero, .rg-hero { padding-top: 150px !important; }
  .up-hero-media img, .rg-hero-media img { height: 340px; }
}

/* --- UP que es + diferenciales --- */
.up-what { padding: 110px 0 !important; }
.up-what-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.up-what-grid p { color: rgba(45, 32, 27,.75); line-height: 1.75; margin-top: 18px; max-width: 560px; }
.up-what-grid .h-section { margin-top: 14px; }
.up-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(45, 32, 27,.12); border: 1px solid rgba(45, 32, 27,.12); }
.up-diff-item { background: var(--cream, #FFFDFB); padding: 28px 26px; }
.up-diff-num { font-family: var(--serif); color: var(--gold, #B8A089); font-size: 15px; letter-spacing: .18em; }
.up-diff-item h3 { font-family: var(--serif); font-size: 20px; color: var(--ink, #2D201B); margin: 10px 0 8px; font-weight: 500; }
.up-diff-item p { font-size: 13.5px; margin: 0 !important; color: rgba(45, 32, 27,.65); }
@media (max-width: 1024px) { .up-what-grid { grid-template-columns: 1fr; gap: 42px; } }
@media (max-width: 700px) { .up-diff { grid-template-columns: 1fr; } }

/* --- UP stats (banda sage como servicios-new) --- */
.up-stats { background: #B5BC99; padding: 84px 0; }
.up-stats .values-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.up-stats .v-num { font-family: var(--serif); font-size: clamp(44px, 5vw, 72px); color: #2D201B; line-height: 1; }
.up-stats .v-label { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(45, 32, 27,.75); margin-top: 12px; }
@media (max-width: 900px) { .up-stats .values-stats { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }

/* --- UP zonas --- */
.up-zones { padding: 110px 0 !important; }
.up-zones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }
.up-zone { background: #fff; padding: 30px 28px; box-shadow: 0 14px 40px rgba(45, 32, 27,.07); border-top: 2px solid var(--gold, #B8A089); }
.up-zone h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink, #2D201B); margin: 0 0 8px; }
.up-zone p { font-size: 13.5px; color: rgba(45, 32, 27,.62); margin: 0; }
@media (max-width: 1024px) { .up-zones-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .up-zones-grid { grid-template-columns: 1fr; } }

/* --- UP que esperar --- */
.up-expect { padding: 110px 0 !important; }
.up-expect .eyebrow.center { justify-content: center; }
.up-expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
.up-expect-col { border-top: 1px solid rgba(184,160,137,.45); padding-top: 26px; }
.up-expect-col h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold, #B8A089); font-weight: 500; margin: 0 0 14px; }
.up-expect-col p { color: rgba(255,253,251,.72); font-size: 14.5px; line-height: 1.75; margin: 0; }
@media (max-width: 900px) { .up-expect-grid { grid-template-columns: 1fr; gap: 30px; } }

/* --- UP CTA + B2B --- */
.up-cta, .rg-cta { padding: 130px 0 !important; }
.up-cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.up-cta-inner .body-lg { max-width: 520px; margin-top: 16px; }
.up-cta-btns { justify-content: center; }
.up-b2b { padding: 74px 0 !important; border-top: 1px solid rgba(45, 32, 27,.1); }
.up-b2b-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.up-b2b-title { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); color: var(--ink, #2D201B); font-weight: 500; margin: 12px 0 10px; }
.up-b2b-inner p { color: rgba(45, 32, 27,.65); max-width: 560px; margin: 0; }
@media (max-width: 900px) { .up-b2b-inner { flex-direction: column; align-items: flex-start; } }

/* --- RG filosofia --- */
.rg-philo { padding: 110px 0 !important; }
.rg-philo-inner { max-width: 820px; }
.rg-philo-inner p { color: rgba(45, 32, 27,.75); line-height: 1.8; margin-top: 20px; }
.rg-philo-inner .h-section { margin-top: 14px; }

/* --- RG metodo orbital --- */
.rg-method { padding: 120px 0 140px !important; }
.rg-method .eyebrow.center { justify-content: center; }
.rg-orbit { position: relative; margin-top: 70px; display: grid; grid-template-columns: 1fr 340px 1fr; grid-template-rows: auto auto; gap: 56px 40px; align-items: center; }
.rg-orbit-center { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; position: relative; min-height: 340px; }
.rg-orbit-ring { position: absolute; width: 300px; height: 300px; border: 1px dashed rgba(184,160,137,.55); border-radius: 50%; animation: rgSpin 60s linear infinite; }
.rg-orbit-core { width: 236px; height: 236px; border: 1px solid var(--gold, #B8A089); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; background: rgba(255,253,251,.02); }
.rg-orbit-core span { font-family: var(--sans); font-size: 10px; letter-spacing: .42em; color: rgba(255,253,251,.6); }
.rg-orbit-core strong { font-family: var(--serif); font-size: 26px; letter-spacing: .3em; color: var(--cream, #FFFDFB); font-weight: 500; text-indent: .3em; }
.rg-orbit-core em { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--gold, #B8A089); }
@keyframes rgSpin { to { transform: rotate(360deg); } }
.rg-steps { list-style: none; margin: 0; padding: 0; display: contents; }
.rg-step { position: relative; max-width: 380px; }
.rg-step[data-step="1"] { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.rg-step[data-step="2"] { grid-column: 3; grid-row: 1; justify-self: start; }
.rg-step[data-step="3"] { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; }
.rg-step[data-step="4"] { grid-column: 3; grid-row: 2; justify-self: start; }
.rg-step-num { font-family: var(--serif); font-size: 17px; color: var(--gold, #B8A089); letter-spacing: .2em; }
.rg-step h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--cream, #FFFDFB); margin: 10px 0 10px; }
.rg-step p { color: rgba(255,253,251,.65); font-size: 14px; line-height: 1.7; margin: 0; }
.rg-step::after { content: ""; position: absolute; top: 14px; width: 46px; height: 1px; background: linear-gradient(90deg, rgba(184,160,137,.0), rgba(184,160,137,.6)); }
.rg-step[data-step="1"]::after, .rg-step[data-step="3"]::after { right: -58px; }
.rg-step[data-step="2"]::after, .rg-step[data-step="4"]::after { left: -58px; transform: scaleX(-1); }
@media (max-width: 1024px) {
  .rg-orbit { display: block; margin-top: 50px; }
  .rg-orbit-center { min-height: 300px; margin-bottom: 46px; }
  .rg-steps { display: block; position: relative; padding-left: 34px; }
  .rg-steps::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: rgba(184,160,137,.35); }
  .rg-step { max-width: none; text-align: left !important; margin-bottom: 40px; }
  .rg-step::after { display: none; }
  .rg-step::before { content: ""; position: absolute; left: -30px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold, #B8A089); }
}

/* --- RG tarjetas de terapias --- */
.rg-treat { padding: 110px 0 !important; }
.rg-treat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }
.rg-card { display: block; background: #fff; padding: 32px 28px; box-shadow: 0 14px 40px rgba(45, 32, 27,.07); text-decoration: none; border-top: 2px solid transparent; transition: border-color .3s, transform .3s; }
.rg-card:hover { border-top-color: var(--gold, #B8A089); transform: translateY(-4px); }
.rg-card h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink, #2D201B); margin: 0 0 10px; }
.rg-card p { font-size: 13.5px; color: rgba(45, 32, 27,.62); margin: 0 0 16px; line-height: 1.65; }
.rg-card-link { font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold, #B8A089); }
@media (max-width: 1024px) { .rg-treat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rg-treat-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MEGA MENU "Medicina estetica"
   ============================================================ */
.lib-mega {
  position: fixed; left: 0; right: 0; z-index: 150;
  background: #2D201B; border-top: 1px solid rgba(184,160,137,.25);
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.lib-mega.open { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.lib-mega-inner { max-width: 1440px; margin: 0 auto; padding: 44px 40px 48px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; gap: 48px; }
.lib-mega-head { font-family: var(--sans); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold, #B8A089); margin-bottom: 18px; }
.lib-mega-col a { display: block; font-family: var(--serif); font-size: 16.5px; color: rgba(255,253,251,.82); text-decoration: none; padding: 7px 0; transition: color .25s, padding-left .25s; }
.lib-mega-col a:hover { color: var(--gold, #B8A089); padding-left: 6px; }
.lib-mega-feat { border-left: 1px solid rgba(184,160,137,.25); padding-left: 48px; display: flex; flex-direction: column; gap: 20px; }
.lib-mega-card { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 180px; padding: 20px; text-decoration: none; background-size: cover; background-position: center; position: relative; }
.lib-mega-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(45, 32, 27,.05), rgba(45, 32, 27,.85)); }
.lib-mega-card > span { position: relative; }
.lmc-tag { font-family: var(--sans); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold, #B8A089); }
.lmc-title { font-family: var(--serif); font-size: 22px; color: var(--cream, #FFFDFB); letter-spacing: .08em; }
.lmc-sub { font-family: var(--sans); font-size: 11px; color: rgba(255,253,251,.65); }
.lib-mega .btn.solid { align-self: flex-start; }
@media (max-width: 1024px) { .lib-mega { display: none !important; } }

/* ============================================================
   LOADER + TRANSICIONES DE PAGINA v2 — cortina (28-jul-2026)
   ============================================================ */
#lib-loader {
  position: fixed; inset: 0; z-index: 99999; background: var(--ink, #2D201B);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(0); will-change: transform;
  transition: transform .75s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .8s;
  visibility: visible;
  animation: llSafety .01s 3.5s forwards;
}
#lib-loader.done { transform: translateY(-101%); visibility: hidden; pointer-events: none; }
#lib-loader.quick { transition-duration: .45s; }
#lib-loader.cover { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .4s cubic-bezier(.65, 0, .35, 1), visibility 0s; animation: none; }
@keyframes llSafety { to { transform: translateY(-101%); visibility: hidden; pointer-events: none; } }
#lib-loader .ll-mark { display: flex; flex-direction: column; align-items: center; gap: 18px; transform: translateZ(0); }
#lib-loader.quick .ll-mark { display: none; }
#lib-loader .ll-word { display: flex; gap: .4em; font-family: var(--serif, serif); font-size: clamp(22px, 3vw, 30px); color: var(--cream, #FFFDFB); font-weight: 500; }
#lib-loader .ll-word i { font-style: normal; opacity: 0; transform: translateY(16px); animation: llLetter .75s cubic-bezier(.22, 1, .36, 1) forwards; }
#lib-loader .ll-word i:nth-child(1) { animation-delay: .05s; }
#lib-loader .ll-word i:nth-child(2) { animation-delay: .11s; }
#lib-loader .ll-word i:nth-child(3) { animation-delay: .17s; }
#lib-loader .ll-word i:nth-child(4) { animation-delay: .23s; }
#lib-loader .ll-word i:nth-child(5) { animation-delay: .29s; }
#lib-loader .ll-word i:nth-child(6) { animation-delay: .35s; }
#lib-loader .ll-word i:nth-child(7) { animation-delay: .41s; }
#lib-loader .ll-word i:nth-child(8) { animation-delay: .47s; }
@keyframes llLetter { to { opacity: 1; transform: translateY(0); } }
#lib-loader .ll-line { display: block; width: 200px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold, #B8A089), transparent); transform: scaleX(0); animation: llLine 1s cubic-bezier(.22, 1, .36, 1) forwards .55s; }
@keyframes llLine { to { transform: scaleX(1); } }
#lib-loader .ll-tag { font-family: var(--sans, sans-serif); font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase; text-indent: .42em; color: rgba(255, 253, 251, .45); opacity: 0; transform: translateY(6px); animation: llLetter .8s ease forwards .95s; }
body.lib-leaving main, body.lib-leaving footer { opacity: .5 !important; transition: opacity .4s ease; }
main { animation: libPageIn .5s ease both; }
body.elementor-editor-active main { animation: none; }
@keyframes libPageIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #lib-loader { display: none !important; }
  main { animation: none !important; }
  .rg-orbit-ring { animation: none !important; }
}
#estetica, #regenerativa, #ultherapy-prime { scroll-margin-top: 150px; }

/* === DROPDOWN NAV: fondo a todo el ancho del texto (28-jul-2026) === */
body .nav-links ul.sub-menu,
body .nav-links .elementor-nav-menu--dropdown.sub-menu {
  min-width: max-content !important;
  width: max-content !important;
}
body .nav-links .sub-menu a { white-space: nowrap; }
/* === FIN DROPDOWN NAV === */

/* ============================================================
   FICHAS DE TRATAMIENTO v2 — layout editorial (28-jul-2026)
   ============================================================ */
.tf-hero { padding: 170px 0 90px !important; }
.tf-hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 72px; align-items: start; }
.tf-title { font-family: var(--serif); font-size: clamp(38px, 4.2vw, 60px); line-height: 1.12; color: var(--ink, #2D201B); font-weight: 500; margin: 14px 0 22px; }
.tf-intro p { color: rgba(45, 32, 27,.75); line-height: 1.8; margin: 0 0 14px; max-width: 620px; }
.tf-hero-copy .btn { margin-top: 16px; }
.tf-hero-copy .breadcrumb { margin-bottom: 18px; }
.tf-facts { border: 1px solid rgba(184,160,137,.45); padding: 34px 32px 26px; margin-top: 52px; background: rgba(184,160,137,.05); }
.tf-facts-title { font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold, #B8A089); margin-bottom: 8px; }
.tf-facts dl { margin: 0; }
.tf-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(45, 32, 27,.1); }
.tf-fact:last-child { border-bottom: none; }
.tf-fact dt { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(45, 32, 27,.55); margin: 0; }
.tf-fact dd { font-family: var(--serif); font-size: 19px; color: var(--ink, #2D201B); margin: 0; text-align: right; }
.tf-facts-note { font-size: 11.5px; color: rgba(45, 32, 27,.45); margin: 14px 0 0; }
@media (max-width: 1024px) {
  .tf-hero { padding-top: 140px !important; }
  .tf-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .tf-facts { margin-top: 0; }
}

.tf-ben { background: #E0DDD4; padding: 96px 0; }
.tf-ben-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.tf-ben-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.tf-ben-list li { display: flex; align-items: baseline; gap: 26px; padding: 22px 0; border-bottom: 1px solid rgba(45, 32, 27,.14); }
.tf-ben-list li:first-child { padding-top: 6px; }
.tf-ben-list li:last-child { border-bottom: none; }
.tf-ben-num { font-family: var(--serif); font-size: 16px; color: var(--gold, #B8A089); letter-spacing: .14em; flex-shrink: 0; }
.tf-ben-list h3 { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 25px); font-weight: 500; color: var(--ink, #2D201B); margin: 0; line-height: 1.35; }
@media (max-width: 1024px) { .tf-ben { padding: 70px 0; } .tf-ben-grid { grid-template-columns: 1fr; gap: 36px; } }

.tf-rel { padding: 84px 0 !important; }
.tf-rel-list { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 26px; }
.tf-rel-list a { display: inline-flex; align-items: center; gap: 14px; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 26px); color: var(--ink, #2D201B); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid rgba(184,160,137,.5); transition: color .3s, border-color .3s; }
.tf-rel-list a .btn-arrow { color: var(--gold, #B8A089); transition: transform .3s; }
.tf-rel-list a:hover { color: var(--gold, #B8A089); border-color: var(--gold, #B8A089); }
.tf-rel-list a:hover .btn-arrow { transform: translateX(5px); }

.tf-cta { padding: 120px 0 !important; }

/* ============================================================
   MÉTODO LIBERTAD — página 1466 (borrador, 3-ago-2026)
   Solo clases .ml-* para no colisionar con el resto del sitio.
   ============================================================ */
.ml-narrow { max-width: 960px; }

.ml-compare { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; border-top: 1px solid var(--line-dark); }
.ml-compare-item { padding: 36px 40px 0 0; }
.ml-compare-item + .ml-compare-item { padding-left: 40px; border-left: 1px solid var(--line-dark); }
.ml-k { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.ml-compare-item h3 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; margin: 0 0 12px; }
.ml-compare-item.ml-after h3 { color: var(--gold); }
.ml-compare-item p { font-family: var(--sans); font-size: 15px; line-height: 1.75; margin: 0; opacity: .78; }

/* "El espacio" va justo detrás de "Nuestro propósito", las dos en crema:
   se elimina el doble relleno y se separan con un filete. */
.ml-photos { padding-top: 0; }
.ml-photos > .container { border-top: 1px solid var(--line-light); padding-top: clamp(56px, 7vw, 96px); }

.ml-ph { margin-top: 40px; padding: 56px 32px; text-align: center; border: 1px dashed var(--gold-soft); border-radius: 2px; }
.ml-ph-tag { display: inline-block; margin-bottom: 14px; padding: 5px 10px; border: 1px solid var(--gold-soft); font-family: var(--sans); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.ml-ph p { margin: 0; font-family: var(--sans); font-size: 14px; color: var(--muted-2); }

@media (max-width: 767px) {
  .ml-compare { grid-template-columns: 1fr; }
  .ml-compare-item { padding: 28px 0 0; }
  .ml-compare-item + .ml-compare-item { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line-dark); }
}
.ml-hero .h-display { text-wrap: balance; }

/* =========================================================================
   CARRUSELES DE TRATAMIENTOS  (.mr-*)   ·   3-ago-2026
   Pagina "Medicina Regenerativa" v2 — widget nativo de Elementor Pro
   "nested-carousel" (cada tarjeta es un contenedor editable).
   Referencias: tarjeta + pastilla al estilo eneaclinica.com,
   aire y hero al estilo cellora.gu.clinic.
   Para revertir: borrar este bloque entero.
   ========================================================================= */

/* --- Hero a sangre ------------------------------------------------------- */
.mr-hero { position: relative; background-size: cover; background-position: center 30%; }
.mr-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(45, 32, 27,.80) 0%, rgba(45, 32, 27,.74) 45%, rgba(45, 32, 27,.86) 100%);
  z-index: 0;
}
.mr-hero > .e-con-inner { position: relative; z-index: 1; }
.mr-hero .mr-hero-inner {
  max-width: 900px; margin-inline: auto; text-align: center;
  padding-inline: var(--pad-x);
}
.mr-hero .elementor-widget-heading .elementor-heading-title { margin: 0; }
.mr-hero .mr-hero-ctas {
  flex-direction: row; flex-wrap: wrap; gap: 16px;
  justify-content: center; align-items: center;
  margin-top: clamp(28px, 3vw, 40px);
}

/* Botones nativos de Elementor con el estilo .btn del tema */
.mr-btn .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; font-weight: 500;
  padding: 18px 32px; border-radius: 0;
  border: 1px solid var(--gold); background: transparent; color: var(--cream);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.mr-btn .elementor-button:hover { background: var(--gold); color: var(--ink); }
.mr-btn-solid .elementor-button { background: var(--gold); color: var(--ink); }
.mr-btn-solid .elementor-button:hover { background: transparent; color: var(--gold); }

/* --- Bloque de categoria ------------------------------------------------- */
.mr-block { padding-block: clamp(52px, 6.5vw, 92px); }
.mr-block-first { padding-top: clamp(80px, 10vw, 140px); }
.mr-block-last  { padding-bottom: clamp(80px, 10vw, 140px); }
.mr-head { margin-bottom: clamp(26px, 3.2vw, 44px); text-align: center; }
.mr-head .elementor-heading-title { margin: 0; }
.mr-head .eyebrow { margin-bottom: 14px; }

/* --- Tarjeta de tratamiento ---------------------------------------------- */
/* Redondeo por defecto de TODAS las tarjetas. Elementor no escribe
   `border-radius` sino la variable `--border-radius` (y `.e-con` la fija a 0),
   por eso el valor por defecto se da aqui y sobre la variable. El radio que
   se ponga en el editor genera una regla mas especifica y sigue mandando. */
.mr-card {
  --border-radius: 10px;
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  padding: 0;
  background-color: var(--cream-3);
  background-size: cover; background-position: center center;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .55s ease;
}
/* velo inferior: da contraste a la pastilla y al enlace */
.mr-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(45, 32, 27,0) 40%, rgba(45, 32, 27,.45) 100%);
  opacity: 0; transition: opacity .5s ease;
}
.mr-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(45, 32, 27,.18); }
.mr-card:hover::before { opacity: 1; }

/* afordancia de enlace, aparece al pasar el raton */
.mr-card::after {
  content: "Ver tratamiento";
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  font-family: var(--sans); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cream);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.mr-card:hover::after { opacity: 1; transform: none; }

/* pastilla con el nombre (estilo "unidades medicas") */
.mr-card .mr-card-title { position: relative; z-index: 2; width: 100%; }
.mr-card .mr-card-title .elementor-heading-title {
  display: inline-block; max-width: 78%;   /* los nombres largos parten a dos lineas */
  margin: 0;
  background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-weight: 500;
  font-size: 13.5px; line-height: 1.45; letter-spacing: .01em;
  text-transform: none;
  padding: 13px 22px; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(45, 32, 27,.12);
  transition: background .4s ease, color .4s ease;
}
/* En hover la pastilla se invierte a tinta. NO usar el oro: coincide con el
   tono de los placeholders (y de muchas fotos de piel) y el nombre se pierde. */
.mr-card:hover .mr-card-title .elementor-heading-title {
  background: var(--ink) !important;
  color: var(--cream) !important;   /* el kit pinta los headings con !important */
}

/* >>> mr-card-titulo-abajo */
/* El nombre del tratamiento va ABAJO, no centrado (pedido 4-ago-2026).
   Dos piezas:
   - `margin-top:auto` en el nombre: los margenes automaticos absorben el hueco
     libre tanto si la tarjeta es columna (que lo es) como si alguien la cambia
     a fila desde Elementor, asi que el nombre se queda abajo pase lo que pase.
   - el aire inferior se reserva con el RELLENO de la tarjeta, no con
     `margin-bottom` del widget: Elementor y el tema fijan
     `margin-block-end:0` en `.elementor-element.e-con .elementor-widget`
     (3 clases, y la hoja del tema carga despues), asi que cualquier margen
     inferior de 2 clases se pierde. */
.mr-card { padding-bottom: 24px; }

.mr-card .mr-card-title {
  margin-top: auto;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

/* El "Ver tratamiento" vive en .mr-card::after y ocupaba ese mismo sitio.
   Al pasar el raton el nombre sube y le deja el hueco justo debajo. */
.mr-card:hover .mr-card-title { transform: translateY(-18px); }
.mr-card::after { bottom: 20px; }

@media (max-width: 767px) {
  /* En tactil no hay hover: el "Ver tratamiento" se ve SIEMPRE (regla de mas
     abajo en esta misma hoja), asi que el nombre no se mueve y se reserva
     hueco fijo para los dos. */
  .mr-card { padding-bottom: 44px; }
  .mr-card:hover .mr-card-title { transform: none; }
}
/* <<< mr-card-titulo-abajo */


/* --- Flechas y paginacion del carrusel ----------------------------------- */
/* Circulo en tinta: sobre fondo crema las flechas claras eran invisibles
   hasta el hover (Elementor pinta el icono casi blanco, de ahi el !important). */
.mr-carousel .elementor-swiper-button {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(45, 32, 27,.18);
  opacity: 1;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.mr-carousel .elementor-swiper-button:hover {
  background: var(--gold); border-color: var(--gold); transform: scale(1.06);
}
.mr-carousel .elementor-swiper-button svg,
.mr-carousel .elementor-swiper-button i {
  width: 15px; height: 15px; font-size: 15px;
  fill: var(--cream) !important; color: var(--cream) !important;
}
.mr-carousel .elementor-swiper-button:hover svg,
.mr-carousel .elementor-swiper-button:hover i {
  fill: var(--ink) !important; color: var(--ink) !important;
}
/* Fuera de las tarjetas, en el margen del contenedor (no sobre la imagen).
   Elementor fija left/right de las flechas con la clase
   .elementor-arrows-position-inside, de ahi el !important. */
.mr-carousel .elementor-swiper-button-prev { left: -60px !important; }
.mr-carousel .elementor-swiper-button-next { right: -60px !important; }
.mr-carousel .swiper-pagination-bullet {
  background: var(--ink); opacity: .18; width: 7px; height: 7px;
  transition: opacity .3s ease, transform .3s ease;
}
.mr-carousel .swiper-pagination-bullet-active { opacity: .75; transform: scale(1.25); }
/* Elementor centra la paginacion con position:absolute + translate(-50%).
   Al sacarla del flujo absoluto hay que anular ese transform o se va a la
   izquierda; se centra con margenes automaticos sobre su ancho real. */
.mr-carousel .swiper-pagination {
  position: static;
  transform: none !important;
  width: fit-content;
  margin: 26px auto 0 !important;
  display: flex; align-items: center; gap: 9px;
}
.mr-carousel .swiper-pagination-bullet { margin: 0 !important; }

/* --- Apilado de categorias (scroll telon) --------------------------------
   Cada categoria se queda pegada arriba y la siguiente sube por encima,
   en vez de desplazarse toda la pagina. Es CSS puro (position:sticky),
   sin librerias. Solo en escritorio: en tactil estorba mas que aporta.
   Para desactivarlo: borrar este bloque. -------------------------------- */
@media (min-width: 1025px) {
  /* html y body llevan overflow-x:hidden en todo el sitio, y eso anula
     position:sticky en sus descendientes. 'clip' recorta exactamente igual
     pero no crea contenedor de scroll, asi que el sticky vuelve a funcionar.
     Acotado a esta pagina (page-id) para no tocar el resto del sitio. */
  html:has(body.page-id-1510),
  body.page-id-1510 { overflow-x: clip; }

  /* la cabecera del sitio es fija y mide 99px: las secciones se pegan
     justo debajo, no a top:0, o el titulo queda tapado */
  .mr-block {
    --mr-cabecera: 99px;
    --mr-alto-tarjeta: clamp(290px, 48vh, 460px);
    position: sticky;
    top: var(--mr-cabecera);
    min-height: calc(100vh - var(--mr-cabecera));
    /* el bloque centra su contenido; el interior NO debe llevar otro
       min-height:100vh o la seccion mide 100vh + padding y no cabe */
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(40px, 4vw, 56px);
  }
  .mr-block > .e-con-inner { min-height: 0; width: 100%; }
  .mr-block-first { padding-top: clamp(40px, 4vw, 56px); }
  .mr-head { margin-bottom: clamp(20px, 2.2vw, 32px); }

  /* La tarjeta se dimensiona por ALTURA para que la categoria entera quepa
     en una pantalla; el ancho lo deriva la proporcion 3/4 y queda centrada
     dentro de su hueco del carrusel. */
  /* Elementor fija la altura del slide con
     `.elementor-widget-n-carousel ... > .swiper-slide > .e-con { height: ... }`
     (5 clases), de ahi el !important. */
  .mr-card {
    height: var(--mr-alto-tarjeta) !important;
    width: auto !important;
    max-width: 100%;
    margin-inline: auto !important;
  }

  /* Las tarjetas son mas estrechas que su hueco del carrusel (el ancho lo
     deriva la proporcion 3/4), asi que sobraba muchisimo aire entre ellas.
     Se estrecha el carrusel a la medida exacta de 3 tarjetas + 2 huecos,
     y el espacio visible pasa a ser el gap real del widget.
     El hueco NO se escribe a mano: se lee de la variable que genera el
     propio widget con su ajuste "Espacio entre slides", asi el ancho sigue
     cuadrando solo si se cambia ese valor desde el editor de Elementor. */
  .mr-carousel {
    max-width: calc(var(--mr-alto-tarjeta) * 0.75 * 3
                    + var(--e-n-carousel-swiper-slides-gap, 20px) * 2) !important;
    margin-inline: auto;
  }

  /* orden de apilado: cada una tapa a la anterior */
  .mr-block-first { z-index: 1; }
  .mr-block:not(.mr-block-first):not(.mr-block-last) { z-index: 2; }
  .mr-block-last { z-index: 3; }
  /* el metodo y el CTA deben tapar a la ultima categoria al llegar */
  .mr-block-last ~ .e-con { position: relative; z-index: 4; }

  /* el canto del "telon" que sube */
  .mr-block:not(.mr-block-first) {
    border-top: 1px solid var(--gold-line);
    box-shadow: 0 -26px 60px rgba(45, 32, 27,.14);
  }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  /* el margen del container se estrecha: las flechas vuelven a montarse sobre la tarjeta */
  .mr-carousel .elementor-swiper-button-prev { left: 6px !important; }
  .mr-carousel .elementor-swiper-button-next { right: 6px !important; }
}
@media (max-width: 767px) {
  .mr-card { aspect-ratio: 4 / 5; }
  .mr-card::after { bottom: 14px; }
  .mr-card .mr-card-title .elementor-heading-title { font-size: 15px; padding: 14px 22px; }
  /* en tactil no hay hover: el enlace se ve siempre */
  .mr-card::before { opacity: 1; }
  .mr-card::after { opacity: 1; transform: none; }
  .mr-hero .mr-hero-ctas { flex-direction: column; align-items: stretch; }
  .mr-hero .mr-btn .elementor-button { width: 100%; }
}

/* === PLANTILLA DE TRATAMIENTO — circulos ================================
   Los datos y los beneficios dejan de ser cuadrados blancos y pasan a
   circulos. IMPORTANTE: el circulo se describe sobre las VARIABLES que
   consume `.e-con` (--width, --border-radius, --padding-*, --flex-shrink),
   no sobre las propiedades finales. Elementor genera sus ajustes como
   `.elementor-NNN .elementor-element-XXX{--width:...}`, una regla mas
   especifica que esta, asi que todo lo que se toque desde el editor
   (tamano, radio, relleno, color de fondo) sigue mandando sobre el diseno
   de base. Para desactivar el diseno: quitar las clases tr-* en Elementor.

   OJO con el relleno: en % se calcula sobre el ancho del PADRE (aqui 1150px),
   no sobre el del circulo, y el texto se queda sin sitio. Va en px.
   OJO con la especificidad: `.e-con.e-flex` (2 clases) fija `--flex-shrink:1`
   y, EN MOVIL, tambien `--width:100%`. Por eso las reglas que tocan variables
   de contenedor van como `.e-con.tr-dato` (2 clases tambien): asi ganan a la
   hoja de Elementor, que carga antes, pero siguen perdiendo contra los ajustes
   del editor (`.elementor-1599 .elementor-element-XXX`, tambien 2 clases, en
   una hoja que carga despues). Justo el reparto que queremos.
   ---------------------------------------------------------------------- */

/* ---- Secciones con ancho propio: centradas --------------------------------
   Al ponerle un ancho a la seccion desde Elementor (p. ej. 75%), el editor
   escribe tambien `--margin-left/right: 0px`, que pisa el `auto` con el que
   Elementor centra los contenedores de primer nivel, y la seccion se queda
   pegada a la izquierda. Se centra por la propiedad final (no por la variable)
   para no estorbar a ningun margen que se ponga desde el editor. */
.tr-seccion { margin-inline: auto; }

/* ---- DATOS DEL TRATAMIENTO ------------------------------------------- */
.tr-datos {
  --tr-diam: clamp(160px, 16.5vw, 200px);
  position: relative;
}

/* hilo dorado que enhebra los cuatro circulos, como un collar */
.tr-datos::before {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 160, 137, .45) 14%,
                              rgba(184, 160, 137, .45) 86%, transparent);
  pointer-events: none;
}

.e-con.tr-dato {
  --width: var(--tr-diam);
  --border-radius: 50%;
  --flex-shrink: 0;
  --padding-top: 14px;
  --padding-right: 20px;
  --padding-bottom: 14px;
  --padding-left: 20px;
  /* aspect-ratio en vez de una altura fija: si se cambia el ancho desde
     Elementor, el circulo sigue siendo un circulo */
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
  background-color: var(--e-global-color-libcream, #F0EADE);
  border: 1px solid var(--gold-line);
  text-align: center;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

/* brillo interior: da volumen sin la sombra dura de las tarjetas antiguas */
.tr-dato::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .85), transparent 62%);
  pointer-events: none;
}

/* halo que florece al pasar el raton */
.tr-dato::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(175, 174, 144, .55);
  opacity: 0;
  transform: scale(.93);
  transition: opacity .55s, transform .55s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}

.tr-dato:hover { transform: translateY(-5px); }
.tr-dato:hover::after { opacity: 1; transform: scale(1); }

.tr-dato .tr-dato-label .elementor-heading-title { opacity: .62; }
.tr-nota { opacity: .6; }

/* El tema fija la familia de TODOS los headings con !important
   (`.elementor-element.e-con .elementor-widget-heading .elementor-heading-title
   { font-family: var(--serif) !important }` en libertad-elementor.css) y ofrece
   una lista de clases que la pasan a la sans (.eyebrow, .svc-num, .doc-role...).
   Se anaden las nuestras a esa misma convencion: una clase mas de especificidad,
   asi gana sin depender del orden de carga de las hojas. */
.elementor-element.e-con .elementor-widget-heading.tr-dato-label .elementor-heading-title,
.elementor-element.e-con .elementor-widget-heading.tr-bene-txt .elementor-heading-title,
.elementor-element.e-con .elementor-widget-heading.tr-nota .elementor-heading-title {
  font-family: var(--sans) !important;
}

/* ---- BENEFICIOS ------------------------------------------------------- */
.tr-benes {
  --tr-diam-bene: clamp(148px, 15vw, 184px);
}

.e-con.tr-bene {
  --width: var(--tr-diam-bene);
  --border-radius: 50%;
  --flex-shrink: 0;
  --padding-top: 12px;
  --padding-right: 18px;
  --padding-bottom: 12px;
  --padding-left: 18px;
  aspect-ratio: 1;
  position: relative;
  border: 1px solid var(--gold-line);
  /* domo suave: el circulo deja de verse vacio sin recurrir a una sombra */
  background-image: radial-gradient(circle at 50% 42%,
                    rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 68%);
  text-align: center;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1),
              background-color .55s, border-color .55s;
}

/* NOTA (4-ago-2026): aqui vivian cuatro motivos geometricos de linea fina
   (circulos concentricos, flor de la vida, radial...) dibujados con SVG dentro
   de `.tr-bene::before`. Se quitaron a peticion de Francisco: se cruzaban con
   el nombre del beneficio y lo dejaban ilegible, sobre todo en los de dos
   lineas ("Definicion del ovalo facial", "Mejora de la calidad tisular").
   El circulo se queda con su filete, el domo suave y el anillo del hover. */

/* segundo anillo, que se abre como un pulso al pasar el raton */
.tr-bene::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(175, 174, 144, .5);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}

.tr-bene:hover {
  background-color: #fff;
  border-color: rgba(175, 174, 144, .75);
  transform: translateY(-5px);
}
.tr-bene:hover::after { opacity: 1; transform: scale(1.09); }

/* ---- FAQ (referencia: el FAQ de cellora.gu.clinic, pero sin ancho completo)
   Dos columnas dentro del ancho de la seccion: a la izquierda el titulo, que
   se queda fijo mientras se recorre la lista; a la derecha las preguntas
   separadas por filetes, con chevron en vez de "+". ------------------------ */
.elementor-widget-n-accordion.tr-faq {
  /* Elementor pinta el acordeon con un recuadro gris por defecto
     (--n-accordion-border-width:1px / --n-accordion-border-color:#d5d8dc).
     Se anula por las MISMAS variables, para que un borde puesto desde el
     editor (regla mas especifica) vuelva a mandar. */
  --n-accordion-border-width: 0px;
  --n-accordion-border-radius: 0px;
  --n-accordion-item-title-background-color: transparent;

  /* La seccion lleva una FOTO oscura de fondo, pero el color de fondo del
     contenedor sigue siendo arena, asi que todo lo que hereda color sale en
     tinta. Se toma como color del bloque el que el editor le haya puesto al
     TITULO de las preguntas (hoy blanco): asi los filetes y las respuestas
     acompañan siempre a las preguntas, tambien si la seccion vuelve a ser
     clara. Sin esto los filetes se calculaban sobre tinta y no se veian. */
  color: var(--n-accordion-title-normal-color, inherit);
}

/* Las RESPUESTAS salian en tinta (#2D201B) sobre la foto oscura: ilegibles.
   No basta con una regla suave: `post-1599.css` las pinta con el color de
   texto global desde `.elementor-1599 .elementor-element.elementor-element-X`
   (tres clases), asi que hay que llegar a cuatro. Se hereda en vez de fijar un
   color para que siga el del bloque. Contrapartida a tener en cuenta: mientras
   estas reglas esten, el color de las respuestas NO se puede cambiar desde el
   editor por separado del de las preguntas. */
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item .tr-faq-respuesta,
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item .tr-faq-respuesta p {
  color: inherit;
}
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item .tr-faq-respuesta {
  /* la respuesta, un punto por debajo de la pregunta en la jerarquia */
  opacity: .82;
}

/* Los filetes se derivan del color del texto, asi la FAQ funciona igual sobre
   fondo claro que sobre el fondo oscuro que tiene ahora la seccion. */
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item {
  border-top: 1px solid var(--gold-line);
  border-top-color: color-mix(in srgb, currentColor 24%, transparent);
}
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item:last-of-type {
  border-bottom: 1px solid var(--gold-line);
  border-bottom-color: color-mix(in srgb, currentColor 24%, transparent);
}
/* al abrir, la pregunta se separa de la respuesta con otro filete */
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item[open] .e-n-accordion-item-title {
  border-bottom: 1px solid var(--gold-line);
  border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
}
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item-title {
  padding: clamp(18px, 1.9vw, 27px) 2px;
  gap: 26px;
  align-items: flex-start;
}

/* Chevron propio: se ocultan los iconos del widget y se dibuja con dos bordes,
   asi gira al abrir y no depende de que cargue Font Awesome. */
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 1.4em;
}
/* OJO: Elementor enseña sus iconos con
   `.elementor-widget-n-accordion .e-n-accordion-item
    .e-n-accordion-item-title-icon .e-closed { display: flex }` = CUATRO clases.
   Esta regla tenia TRES, asi que perdia y se veian DOS chevrons: el suyo (SVG
   de Font Awesome) y el nuestro. Se encadena `.e-n-accordion-item` para empatar
   a clases y ganar por el elemento, y se remata con !important. */
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item .e-n-accordion-item-title-icon > span { display: none !important; }
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item-title-icon::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}
.elementor-widget-n-accordion.tr-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after {
  transform: translateY(2px) rotate(-135deg);
}

@media (min-width: 901px) {
  /* `html`/`body` llevan `overflow: hidden auto` en todo el sitio y eso anula
     position:sticky en los descendientes; `clip` recorta igual pero no crea
     contenedor de scroll. Acotado con :has() a las paginas que usan esta
     plantilla, para que viaje con ella al duplicarla y no toque el resto. */
  html:has(.tr-seccion-faq),
  body:has(.tr-seccion-faq) { overflow-x: clip; }

  .e-con.tr-seccion-faq > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: clamp(30px, 4.5vw, 64px);
    align-items: start;
  }
  .tr-seccion-faq .tr-titulo {
    position: sticky;
    top: 130px;
  }
  /* (4-ago-2026) aqui colgaba del titulo el mismo motivo geometrico que
     llevaban los beneficios; se retira con ellos para no dejarlo huerfano. */
}

/* ---- CTA: que el color del editor llegue de verdad al parrafo -----------
   `.final-cta-content p` (libertad-global.css) pinta el parrafo en claro
   dando por hecho que el CTA va sobre fondo oscuro, y el control de color de
   Elementor solo pinta el CONTENEDOR del widget: por eso el ajuste no se veia
   y el texto parecia clavado en blanco. Con estas dos reglas:
     - si NO se toca el color, la seccion .on-dark lo declara y todo queda como
       estaba (ninguna pagina cambia);
     - si SE elige un color en Elementor, el <p> ya lo hereda. */
.final-cta.on-dark { color: rgba(255, 253, 251, .75); }
.final-cta-content .elementor-widget-text-editor p { color: inherit; }

/* ---- CTA final: proporcion y comportamiento responsive ------------------
   Solo geometria: el color de fondo (arena, `libcream2`) y el del titular los
   lleva Francisco desde el editor y aqui NO se tocan.
   Alcance: esta pagina y, ademas, la clase `tr-cta`, para cuando se duplique
   la plantilla (basta con anadirsela al contenedor del CTA en Elementor).
   Se deja a proposito en DOS clases de especificidad: gana al CSS del tema
   (una clase) y pierde contra cualquier ajuste hecho desde el editor (tres
   clases), que debe seguir mandando. */
body.page-id-1599 .final-cta-inner,
.tr-cta .final-cta-inner {
  padding-block: clamp(64px, 8vw, 120px);
}

/* El alto lo fija la hoja PUENTE, que carga despues que esta:
   `.elementor-element.e-con.final-cta-inner { min-height:720px }` = TRES clases.
   Hay que repetir su misma forma (y sumarle el alcance de pagina) para poder
   bajarlo; con `body.page-id-1599 .final-cta-inner` (dos clases) no basta.
   Eran 720px fijos y el contenido ocupa ~200: sobraba medio bloque de aire. */
body.page-id-1599 .elementor-element.e-con.final-cta-inner,
.tr-cta .elementor-element.e-con.final-cta-inner {
  min-height: clamp(400px, 44vw, 640px);
}

/* Medida de lectura: el parrafo llegaba a ~95 caracteres por linea */
body.page-id-1599 .final-cta-content p,
.tr-cta .final-cta-content p {
  max-width: 52ch;
  margin-inline: auto;
}

/* El titular partia "caso." solo en la segunda linea: `balance` reparte las
   lineas. Nadie mas declara text-wrap, asi que con este alcance sobra. */
body.page-id-1599 .final-cta-content h2,
.tr-cta .final-cta-content h2 {
  text-wrap: balance;
}

/* Profundidad: el bloque era un rectangulo de color plano. Mismo recurso que
   el domo de los circulos, en un pseudo-elemento para no pisar el fondo que se
   ponga desde el editor (el contenido va en z-index 2 y queda por encima). */
body.page-id-1599 .final-cta-inner::before,
.tr-cta .final-cta-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(115% 85% at 50% 0%,
              rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 62%);
}

/* Por debajo de 800px el titular se quedaba clavado en 48px (el minimo del
   clamp de la hoja puente) y se comia la pantalla. Se toca SOLO ahi: a 800px
   justos los dos valores coinciden en 48px, asi que no hay salto, y por encima
   manda la hoja puente como en el resto del sitio.
   Su regla es `.final-cta-content .elementor-widget-heading:not(.eyebrow)
   .elementor-heading-title` = CUATRO clases y carga despues; por eso hay que
   repetirla entera y sumarle el alcance de pagina. */
@media (max-width: 800px) {
  body.page-id-1599 .final-cta-content .elementor-widget-heading:not(.eyebrow) .elementor-heading-title,
  .tr-cta .final-cta-content .elementor-widget-heading:not(.eyebrow) .elementor-heading-title {
    font-size: clamp(38px, 7vw, 48px);
    line-height: 1.08;
  }
}

@media (max-width: 600px) {
  /* boton comodo de pulsar y con ancho util */
  body.page-id-1599 .final-cta-ctas .elementor-button,
  .tr-cta .final-cta-ctas .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 320px);
    min-height: 52px;
  }
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  /* al pasar a dos por fila, el hilo dorado dejaria de enhebrar nada */
  .tr-datos::before { display: none; }
}
@media (max-width: 767px) {
  /* dos por fila: el contenedor tiene 10px de relleno propio a cada lado, asi
     que el ancho util es 20px menor que el de la pantalla menos margenes.
     2 circulos + el hueco movil (18px) tienen que caber en ese hueco util. */
  .tr-datos { --tr-diam: min(39vw, 165px); }
  .tr-benes { --tr-diam-bene: min(39vw, 165px); }
}

/* >>> nav-glass (4-ago-2026) ============================================
   CABECERA DE CRISTAL AL HACER SCROLL  ·  referencia: cellora.gu.clinic/us/

   Qué hace cellora (medido en su web): la barra fija es transparente arriba
   del todo y, en cuanto se baja, se pone un velo oscuro traslúcido con
   `backdrop-filter: blur(12px)` — el contenido de la página se ve difuminado
   por debajo. Aquí se reproduce ese efecto.

   Por qué el velo NO va al 20% como el suyo: en cellora la barra viaja casi
   siempre sobre fotografía oscura, así que su texto blanco se lee. En
   libertadmed el fondo dominante es la crema #F0EADE y el texto del menú es
   crema: medido con el velo al 20% el contraste cae a 1,5:1 (ilegible). Con
   el 58% de abajo queda en ~4:1 y el cristal se sigue viendo. Para cambiar
   la intensidad basta con tocar --nav-glass-opacidad (0 = cristal puro,
   1 = barra sólida como antes).

   Este bloque va DESPUÉS del de arriba ("Fondo marrón sólido...") y lo pisa
   por especificidad (:not() añade dos clases). Ese bloque sigue vivo y es
   justo el que mantiene la barra sólida en las dos páginas excluidas.
   ====================================================================== */
:root {
  --nav-glass-tinte: 45, 32, 27;   /* tinta de marca */
  --nav-glass-opacidad: .58;
  --nav-glass-desenfoque: 18px;
}

/* Estado base (arriba del todo): sin cambios visuales; el blur(0) sólo está
   para que el paso a cristal se pueda animar — de `none` a `blur()` el
   navegador no interpola y el desenfoque entraría de golpe. */
body:not(.page-id-1320) .elementor-element.e-con.nav {
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  transition: background-color .45s ease, padding .4s ease,
              -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease !important;
}

/* Estado con scroll (libertad.js añade .scrolled pasados 80px) */
body:not(.page-id-1320) .elementor-element.e-con.nav.scrolled {
  background-color: rgba(var(--nav-glass-tinte), var(--nav-glass-opacidad)) !important;
  -webkit-backdrop-filter: blur(var(--nav-glass-desenfoque)) saturate(140%) !important;
          backdrop-filter: blur(var(--nav-glass-desenfoque)) saturate(140%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .28) !important;
}

/* La franja de redes sociales es un contenedor hijo con fondo sólido propio
   (elementor-element-a752d43): si no se transparenta, la mitad de arriba de
   la cabecera se queda opaca y sólo la fila del menú se ve de cristal. */
body:not(.page-id-1320) .nav.scrolled .elementor-element-a752d43 {
  background-color: transparent !important;
}

/* Navegadores sin backdrop-filter: barra sólida de siempre, nunca un velo
   traslúcido sin desenfoque (ahí el menú sí sería ilegible). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .elementor-element.e-con.nav.scrolled { background-color: #2D201B !important; }
  body .nav.scrolled .elementor-element-a752d43 { background-color: #2D201B !important; }
}
/* <<< nav-glass ======================================================== */

/* >>> tr-mas — "Tratamientos recomendados" al final de las fichas (4-ago-2026)
   Reutiliza tal cual las tarjetas de /medicina-estetica/ (.mr-carousel /
   .mr-card) para que sean identicas, con sus fotos y su pastilla.
   NO se puede ponerle la clase `.mr-block` de aquella pagina: arrastraria el
   apilado "telon" (position:sticky + min-height:100vh), que alli es
   deliberado y aqui estorbaria. De ella solo hace falta la VARIABLE con la
   altura de la tarjeta, que es de donde salen tambien el ancho del carrusel
   (3 tarjetas + 2 huecos) y su centrado; sin declararla, `height:
   var(--mr-alto-tarjeta)` queda invalida y la tarjeta pierde su medida. */
@media (min-width: 1025px) {
  .tr-mas { --mr-alto-tarjeta: clamp(290px, 48vh, 460px); }
}

/* el boton "Ver todos" respira respecto al carrusel */
.tr-mas .tr-mas-btn { margin-top: clamp(18px, 2.2vw, 32px); }
/* <<< tr-mas */

/* >>> radio-10 · botones (4-ago-2026) ==================================
   Los botones necesitan lo contrario que los contenedores: ir AL FINAL y
   con especificidad de sobra. El motivo es que la hoja puente
   `assets/libertad-elementor.css` se encola DESPUÉS de este fichero y
   clava `.elementor-widget-button .elementor-button{border-radius:0
   !important}` (dos clases + !important), así que hay que superarla
   añadiendo `body` y repetir el !important.

   No entran aquí los elementos redondos que son <button> pero no botones
   de interfaz: flechas de testimonios (.testi-arrow), flechas de carrusel,
   iconos sociales, el botón de WhatsApp ni las filas de FAQ (.faq-q).
   ==================================================================== */
body .elementor-widget-button .elementor-button,
body .lib-contact-form .elementor-button,
body .fil-slider .fil-btn .elementor-button { border-radius: 10px !important; }

.btn,
a.btn,
button.btn,
input[type="submit"],
.wp-element-button { border-radius: 10px; }
/* <<< radio-10 · botones ============================================= */

/* >>> mega-glass (5-ago-2026) ==========================================
   MEGAMENÚ DE "MEDICINA ESTÉTICA" CON EL MISMO CRISTAL QUE LA CABECERA

   Pedido: que el panel desplegable use el mismo fondo que la barra fija al
   hacer scroll, en vez del marrón sólido #2D201B con el que se construyó.
   Por eso consume LAS MISMAS VARIABLES del bloque `nav-glass` (tinte,
   opacidad y desenfoque): si se retoca la intensidad de la cabecera, el
   megamenú la sigue solo. `--mega-glass-opacidad` existe únicamente por si
   algún día hay que separarlos; mientras no se declare, vale lo del nav.

   Por qué funciona el desenfoque aquí: `.lib-mega` NO cuelga del `.nav`
   (es hermano, vive en el contenedor 7e68f03 de la plantilla 108) y ningún
   ancestro tiene filter/backdrop-filter/opacity<1. Si colgase del nav, el
   navegador crearía un "backdrop root" y el panel sólo desenfocaría lo
   pintado dentro de la cabecera — es decir, nada: se vería un velo plano.

   Se excluyen las dos páginas que Francisco quiso con cabecera sólida
   (1320 /tratamiento/ y 1599 /tratamiento-plantilla/), para que barra y
   panel no se contradigan en ellas.

   El filete superior oro desaparece: la barra ya pone el suyo (blanco al
   28%) justo encima y quedaban dos líneas pegadas. El panel se cierra por
   abajo con ese mismo filete claro, y la sombra se aligera — la de 80px al
   45% era para un panel opaco y sobre cristal se leía como suciedad.
   ====================================================================== */
body:not(.page-id-1320) .lib-mega {
  background-color: rgba(var(--nav-glass-tinte),
                         var(--mega-glass-opacidad, var(--nav-glass-opacidad)));
  -webkit-backdrop-filter: blur(var(--nav-glass-desenfoque)) saturate(140%);
          backdrop-filter: blur(var(--nav-glass-desenfoque)) saturate(140%);
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 24px 60px rgba(45, 32, 27, .22);
}

/* Los enlaces iban a rgba(255,253,251,.82): ese 18% de transparencia lo
   pagaba el contraste, que sobre el marrón opaco sobraba (12:1) y sobre el
   cristal no. Pasan a crema plena. */
body:not(.page-id-1320) .lib-mega .lib-mega-col a {
  position: relative;
  color: var(--cream, #F0EADE);
}

/* EL HOVER YA NO PUEDE SER ORO. Medido: el oro #AFAE90 sobre el marrón
   sólido daba 5,4:1 y destacaba; sobre el cristal cae a 1,8:1 y, sobre
   todo, es MÁS OSCURO que el crema del reposo — al pasar el ratón el
   nombre se desvanecía en vez de resaltar (verificado en captura). Mismo
   fallo que ya apareció en las pastillas de las tarjetas de tratamiento.
   El resalte pasa a ser al revés (crema pleno, más luminoso) y el oro se
   queda de filete, que es como la guía de marca permite usarlo sobre
   fondos claros. El desplazamiento sube de 6 a 12px para dejarle sitio. */
body:not(.page-id-1320) .lib-mega .lib-mega-col a:hover {
  color: #FFFDFB;
  padding-left: 12px;
}
body:not(.page-id-1320) .lib-mega .lib-mega-col a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  transform: translateY(-50%);
  background: var(--gold, #AFAE90);
  transition: height .25s ease;
}
body:not(.page-id-1320) .lib-mega .lib-mega-col a:hover::before {
  height: 60%;
}

/* Las cabeceras de columna ("— ROSTRO") son oro de 10px: sobre el marrón
   opaco se leían, sobre el cristal quedan en 1,8:1 y desaparecen contra
   las zonas claras de la página. Pasan a crema; el acento de color lo
   sostienen el filete del hover y el bloque destacado de la derecha. */
body:not(.page-id-1320) .lib-mega .lib-mega-head {
  color: rgba(240, 234, 222, .92);
}

/* Sin backdrop-filter no hay cristal posible: mejor el marrón sólido de
   siempre que un velo traslúcido sin desenfoque, donde el texto se pierde
   contra lo que pase por debajo. Mismo criterio que en la cabecera. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .lib-mega {
    background-color: #2D201B;
    border-bottom-color: rgba(184, 160, 137, .25);
  }
}
/* <<< mega-glass ======================================================= */




/* >>> datos-cristal (5-ago-2026, v3) ===================================
   CONTENEDOR "DATOS DEL TRATAMIENTO": RELIEVE DE CRISTAL + SOMBRA

   Pedido: cristal suave y una sombra como la del vídeo de
   cellora.gu.clinic/us/programs/renew-aging, CONSERVANDO el fondo actual.

   🔑🔑 LO MÁS IMPORTANTE DE ESTE BLOQUE — NO USAR `::before` EN ESTE
   CONTENEDOR. Elementor YA lo usa: el contenedor tiene configurado desde el
   editor un "overlay de fondo" que se pinta ahí, con
   `background-color:#000` y **`opacity:0.38`**. Ese velo negro al 38% es lo
   que apaga `bg-2.webp` y da el olivo del diseño. Dos consecuencias:
     · Lo que se meta en `::before` se renderiza AL 38%: en la v1 un blanco
       del 20% se quedaba en 7,6% y por eso "no se notaba nada".
     · La regla de Elementor tiene 3 clases y la nuestra 1, así que su
       `background-color` gana igualmente.
   → Todo el relieve va en `::after`, que está libre (`content:none`, cero
     reglas). Comprobado.

   🔑 LA SOMBRA NECESITA `z-index:2`. La sección siguiente
   (.tr-seccion-beneficios) es `position:relative`, va después en el DOM,
   tiene fondo crema OPACO y empieza exactamente donde acaba este bloque
   (hueco = 0 px): la tapaba entera. Medido: sin z-index, Δ 0,0.

   🔑 `backdrop-filter` AQUÍ ES INERTE y por eso no se usa. Medido en cuatro
   combinaciones (con y sin blur, con y sin `isolation`): la media cambia
   +0,2 y el contraste −0,16. `bg-2.webp` ya es un degradado desenfocado:
   difuminar algo sin detalle no hace nada. El efecto lo dan el FILETE y el
   BRILLO, no el desenfoque.

   Medido a 1440 contra un control correcto (mismo tiempo de carga, mismo
   scroll, con y sin este bloque):
     sombra Δ−21,4 · filete Δ+151,6 · brillo alto Δ+19,3 · FONDO Δ−0,0
   Es decir: el fondo queda intacto, que era la condición.

   ⚠️ Para comparar "con y sin efecto" NUNCA hacer `::before{display:none}`:
   eso mata también el overlay de Elementor y falsea la medida (fue el error
   que me hizo perseguir un problema inexistente). El control correcto es
   apagar SOLO lo de este bloque.

   Alcance `.tr-seccion-datos`, que según la BD solo existe en la 1599
   (1320, la ficha real, NO la lleva). Al ser clase-gancho viaja sola al
   duplicar la plantilla.
   ==================================================================== */
.tr-seccion-datos{
  position: relative;
  z-index: 2;   /* si no, la sección siguiente tapa la sombra entera */
  box-shadow: 0 30px 64px -20px rgba(45, 32, 27,.45);
}
.tr-seccion-datos::after{
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 7%, rgba(255,255,255,0) 18%),
    radial-gradient(130% 60% at 8% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 42%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.13);
}
/* el contenido, por encima del relieve */
.tr-seccion-datos > *{ position: relative; z-index: 1; }
/* <<< datos-cristal ================================================== */




/* >>> bene-cristal (5-ago-2026) ========================================
   CÍRCULOS DE "BENEFICIOS": MISMO RELIEVE DE CRISTAL Y SOMBRA

   Pedido: llevar a los círculos de Beneficios el efecto que se le puso al
   bloque de Datos del tratamiento.

   🔑 POR QUÉ EL BRILLO VA EN `::before` Y NO EN EL FONDO DEL ELEMENTO.
   Estos círculos NO tienen relleno propio: `background-color` es
   transparente y el olivo que se ve es el **overlay de Elementor**
   (`::before`, `background-color:#37371B` con `opacity:0.5`) sobre el fondo
   crema de la página. Por eso, todo lo que se ponga en el fondo del propio
   elemento queda DEBAJO del overlay y no ilumina: aclara el conjunto y los
   círculos se lavan a gris (medido: el color base pasaba de #5E5E26 a un
   gris verdoso, +69 de luminancia en todo el círculo). El brillo tiene que
   ir POR ENCIMA del olivo.
   → Se añade solo `background-image` al `::before` de Elementor. Su
     `background-color` lo sigue poniendo él (su regla tiene 3 clases y la
     nuestra 1, pero son propiedades distintas, así que no compiten).

   🔑 LAS ALFAS VAN AL DOBLE (.60 y .20 en vez de .30 y .10) porque ese
   pseudo-elemento tiene `opacity:0.5`: todo lo que se pinte ahí sale a la
   mitad. Medido: domo Δ+50,6 y color base intacto (#5D5D25 vs #5E5E26).

   ⚠️ ACOPLE A CONOCER: si en el editor se cambia la OPACIDAD del overlay,
   la fuerza del brillo cambia en proporción; y si el overlay se cambia a
   tipo IMAGEN, Elementor escribirá su propio `background-image` con 3
   clases y este brillo desaparecerá. En ambos casos es cosmético, no rompe.
   La alternativa sin acople sería llevarlo a `::after`, pero ahí vive el
   anillo del hover y habría que rehacerlo.

   La sombra sí va en el elemento (no necesita pseudo-elemento) y aquí no la
   tapa nadie: los círculos están sueltos sobre la crema de la sección.
   Se amplía la transición para incluir `box-shadow` — las tres que ya había
   (transform, background-color, border-color) se conservan tal cual, si no
   el cambio de sombra al pasar el ratón daría un salto.

   Medido a 1440 contra control: sombra Δ−10,9 · domo Δ+50,6 · base Δ−3,4.
   ==================================================================== */
.tr-bene{
  box-shadow: 0 18px 34px -14px rgba(45, 32, 27,.42);
}
/* La transición hay que declararla con `.e-con.tr-bene` (2 clases): la regla
   original la fija con esa forma y una sola clase pierde. Se conservan las
   tres que ya había y solo se añade box-shadow; sin esto, la sombra daría un
   salto seco al pasar el ratón. */
.e-con.tr-bene{
  transition: transform .55s cubic-bezier(.2,.7,.3,1),
              background-color .55s,
              border-color .55s,
              box-shadow .55s cubic-bezier(.2,.7,.3,1);
}
.tr-bene:hover{
  box-shadow: 0 26px 44px -14px rgba(45, 32, 27,.50);
}
.tr-bene::before{
  background-image:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.60), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 30%);
}
/* <<< bene-cristal =================================================== */

/* >>> rgv — página nueva de Medicina Regenerativa (5-ago-2026) ==========
   Estructura: hero (igual que /medicina-estetica/) · vídeo · los 4 pasos ·
   terapias en slider · CTA.

   La página está montada ENTERA con widgets nativos para que se pueda
   editar como el resto del sitio. Por eso aquí sólo hay aspecto, y todo lo
   que Elementor sabe generar (fondos, superposición, relleno, colores,
   radios) se escribe sobre las VARIABLES que consume `.e-con` o se deja
   directamente en los ajustes del widget: así cualquier cambio hecho desde
   el editor genera una regla más específica y sigue mandando.
   ====================================================================== */

/* ── 0. HERO ───────────────────────────────────────────────────────────
   Mismos ajustes que el hero de /medicina-estetica/, pero aquí el título
   es más largo ("Medicina Regenerativa" frente a "Medicina Estética") y a
   430px llegaba a tocar los dos bordes: el heading cuelga directamente del
   contenedor, que no trae relleno lateral propio. */
.rgv-hero > .e-con-inner { padding-inline: var(--pad-x); }

/* ── 1. VÍDEO ──────────────────────────────────────────────────────────
   Referencia: cellora.gu.clinic/us/programs/renew-aging. Medido en su web:
   pieza 16:9 centrada, radio 12px, `box-shadow: 0 25px 50px -12px rgba(0,0,0,.25)`
   y una portada fija con botón de play redondo — NO un vídeo en autoplay.

   Los selectores NO dependen de la clase `rgv-player`: apuntan a cualquier
   widget de vídeo que haya dentro de la sección, para que siga funcionando
   si se borra el widget y se pone otro desde el editor (que es justo lo que
   pasó). Lo que sí hace falta activar en el panel del widget es «Imagen de
   portada» + «Icono de reproducción»: sin eso Elementor no dibuja ningún
   botón y se ven los controles del navegador.

   La sombra va con dos clases a propósito: si algún día se activa la sombra
   desde el editor, la regla de Elementor manda sobre ésta. */
.rgv-video { padding-top: 0; padding-bottom: clamp(70px, 8vw, 120px); }
.rgv-video .elementor-widget-video {
  position: relative;
  z-index: 2;                       /* por encima del velo del hero */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.rgv-video .elementor-wrapper {
  border-radius: inherit;
  overflow: hidden;
  background: var(--ink, #2D201B);
}

/* El botón de play de Elementor es un SVG grande y semitransparente (ojo:
   `<svg class="e-font-icon-svg e-eicon-play">`, NO un `<i>`); se convierte
   en el círculo claro de la referencia. */
.rgv-video .elementor-custom-embed-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(62px, 6.4vw, 92px);
  height: clamp(62px, 6.4vw, 92px);
  border-radius: 50%;
  background: rgba(255, 253, 251, .88);
  box-shadow: 0 10px 30px rgba(45, 32, 27, .22);
  /* sin `transform` en la transición: el botón se queda quieto al pasar el
     cursor (antes crecía un 7%) y sólo se aclara el fondo */
  transition: background-color .3s ease;
}
/* El icono que trae Elementor (`eicon-play`) es un triángulo DENTRO de un
   círculo: sobre el círculo claro se ven dos círculos concéntricos y el
   triángulo queda diminuto. En cellora es un triángulo macizo a secas, así
   que se oculta el icono y se dibuja el triángulo. Si algún día se quiere
   otro icono desde el editor, basta con quitar estas dos reglas. */
.rgv-video .elementor-custom-embed-play svg,
.rgv-video .elementor-custom-embed-play i { display: none; }
.rgv-video .elementor-custom-embed-play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5%;                  /* desplazamiento óptico: el triángulo tira a la izquierda */
  border-left: clamp(15px, 1.6vw, 23px) solid #37371B;   /* oliva de marca */
  border-top: clamp(9px, 1vw, 14px) solid transparent;
  border-bottom: clamp(9px, 1vw, 14px) solid transparent;
}
.rgv-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
  background: #FFFDFB;
}

/* ── 1 bis. LOS 4 PASOS PEGADOS DE /medicina-regenerativa/ ─────────────
   El bloque va como widget HTML y trae dentro `<section class="section dark
   rg-method">`. `.section.dark` pinta SU PROPIO fondo, que tapa al del
   contenedor de Elementor: por eso el fondo que se pusiera desde el editor
   no se veía por ningún lado. Aquí se transparenta la sección para que
   mande el del contenedor, y así el fondo vuelve a ser un ajuste normal.

   Acotado a esta página: en /medicina-regenerativa/ (1442) el contenedor no
   tiene fondo, y sin esta clase el texto crema quedaría sobre el fondo
   claro del sitio. ⚠️ El color del texto lo sigue dando `.section.dark`, así
   que el fondo que se elija tiene que ser oscuro. */
body.page-id-1738 .elementor-widget-html .rg-method { background: transparent; }

/* El titular de esa sección usa `.h-section` (clamp hasta 76px), pensado
   para frases cortas. Con «Cuatro pasos para mejorar tu salud y longevidad»
   —46 caracteres— se comía la sección entera y dejaba el diagrama pequeño
   al lado. Se baja el tope y se acota el ancho para que las dos líneas
   queden equilibradas y centradas sobre el círculo. */
body.page-id-1738 .rg-method .h-section {
  font-size: clamp(34px, 4.4vw, 52px);
  max-width: 900px;
  margin-inline: auto;
  text-wrap: balance;
}

/* ── 2. LOS 4 PASOS, VERSIÓN CON CONTENEDORES NATIVOS ─────────────────
   ⚠️ EN PAUSA: el 5-ago Francisco sustituyó esta versión por el bloque HTML
   pegado de /medicina-regenerativa/ (ver «1 bis»). Estas reglas se
   conservan por si se recupera; no aplican a nada mientras tanto.

   Mismo diagrama que /medicina-regenerativa/ pero armado con contenedores
   nativos: tres columnas (pasos impares · círculo · pasos pares). Se
   reutilizan las clases `.rg-step` y `.rg-step-num` del diseño original
   para heredar tipografías; lo que allí dependía de `[data-step]` (que no
   se puede poner desde el editor) va aquí por clase. */
.rgv-metodo-intro { margin: 20px auto 0; }
.rgv-orbit { margin-top: clamp(48px, 5vw, 72px); }

.rgv-orbit > .e-con.rgv-col { max-width: 400px; }
.rgv-col-izq { text-align: right; }
.rgv-orbit .e-con.rg-step { max-width: none; }

/* filetes que apuntan al círculo (heredan el degradado de `.rg-step::after`) */
.rgv-p1::after, .rgv-p3::after { right: -30px; }
.rgv-p2::after, .rgv-p4::after { left: -30px; transform: scaleX(-1); }

/* el círculo y su anillo giratorio */
.rgv-orbit > .e-con.rgv-centro {
  --width: 340px;
  flex-shrink: 0;
  min-height: 340px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.rgv-centro::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px dashed rgba(184, 160, 137, .55);
  border-radius: 50%;
  animation: rgSpin 60s linear infinite;   /* keyframe ya definido arriba */
  pointer-events: none;
}
.e-con.rgv-core {
  --width: 236px;
  --border-radius: 50%;
  height: 236px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--gold, #AFAE90);
  background: rgba(255, 253, 251, .02);
  position: relative;
  z-index: 1;
}
.rgv-core .rgv-core-1 { justify-content: center; letter-spacing: .42em; font-size: 10px;
                        color: rgba(255, 253, 251, .6); }
/* el tamaño y el color de estos dos van en los AJUSTES de sus widgets (el
   kit fija los headings con !important y ponerlo aquí impediría cambiarlo
   desde el editor); aquí sólo la sangría que compensa el espaciado */
.rgv-core .rgv-core-2 .elementor-heading-title { text-indent: .3em; }

/* la frase de entrada de cada paso: `.rg-step p` fija tamaño y color con
   1 clase + elemento, así que basta con encadenar la clase del widget */
.rgv-metodo .rg-step-lead p { color: var(--cream, #F0EADE); font-size: 15px; line-height: 1.55; margin: 0; }
.rgv-metodo .rgv-paso-texto p { margin: 0; }

/* ── 3. TERAPIAS EN SLIDER ─────────────────────────────────────────────
   Reutiliza las tarjetas de /medicina-estetica/ (.mr-card + .mr-carousel).
   ⚠️ NO se les puede poner la clase `.mr-block` de aquella página: arrastra
   el apilado "telón" (position:sticky + min-height:100vh), que allí es
   deliberado y aquí sobra. De ella sólo hace falta la VARIABLE con la
   altura de la tarjeta — de ahí salen también el ancho del carrusel (3
   tarjetas + 2 huecos) y su centrado. Sin declararla, `height:
   var(--mr-alto-tarjeta)` queda inválida y la tarjeta pierde su medida. */
@media (min-width: 1025px) {
  .rgv-terapias { --mr-alto-tarjeta: clamp(300px, 30vw, 420px); }
}
.rgv-terapias .eyebrow { justify-content: center; }
.rgv-terapias .mr-head { margin-bottom: clamp(30px, 3.4vw, 48px); }

/* ── 4. CTA ────────────────────────────────────────────────────────────
   El CTA anterior era texto centrado sobre color plano, idéntico en varias
   páginas. Ahora es fondo fotográfico con superposición NATIVA (su
   intensidad se ajusta desde el editor) y un panel de cristal, el mismo
   lenguaje que la cabecera y el megamenú del sitio. El color y el relleno
   del panel también son ajustes del contenedor; aquí sólo va el cristal,
   que Elementor no sabe hacer. */
.rgv-cta-panel {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 70px rgba(45, 32, 27, .30);
}
.rgv-cta-panel .eyebrow { justify-content: center; }
.rgv-cta-texto { max-width: 520px; margin-inline: auto; }
.rgv-cta-btns { margin-top: clamp(14px, 1.6vw, 22px); }
/* sin backdrop-filter el panel quedaría translúcido sin desenfoque y el
   texto competiría con la foto: mejor un fondo sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rgv-cta-panel { background-color: rgba(45, 32, 27, .88) !important; }
}

/* ── 5. RESPONSIVE ─────────────────────────────────────────────────────
   El orbital pasa a columna con el ajuste responsive del propio contenedor
   (flex_direction_tablet). Aquí falta lo que Elementor no puede: que las
   dos columnas dejen de agrupar para que los cuatro pasos se ordenen
   1-2-3-4 en vez de 1-3-2-4. `display:contents` sube los pasos al flex de
   arriba y entonces `order` sí puede reordenarlos entre sí. */
@media (max-width: 1024px) {
  .rgv-orbit { gap: 0 !important; }
  .rgv-orbit > .e-con.rgv-col { display: contents; }
  .rgv-orbit > .e-con.rgv-centro { order: 0; margin-bottom: 44px; }
  .rgv-orbit .e-con.rgv-p1 { order: 1; }
  .rgv-orbit .e-con.rgv-p2 { order: 2; }
  .rgv-orbit .e-con.rgv-p3 { order: 3; }
  .rgv-orbit .e-con.rgv-p4 { order: 4; }
  .rgv-orbit > .e-con.rgv-col,
  .rgv-orbit .e-con.rg-step { max-width: none; text-align: left; }
  /* La línea de tiempo NO puede ser un `border-left` del paso: entre paso y
     paso quedan 40px de separación que el borde no cubre, y además el radio
     de 10px que el sitio da a los contenedores le curva las dos puntas como
     ganchos (el mismo efecto que obligó a dejar los filetes fuera del radio
     global). Se dibuja con el pseudo-elemento, que se prolonga por debajo. */
  .rgv-orbit .e-con.rg-step {
    padding-left: 28px;
    padding-bottom: 40px;
    position: relative;
  }
  .rgv-orbit .e-con.rg-step::after {
    display: block;
    content: "";
    position: absolute;
    left: 0; top: 16px; bottom: -40px;
    width: 1px; height: auto;
    background: rgba(184, 160, 137, .35);
    transform: none;
  }
  .rgv-orbit .e-con.rg-step::before {
    content: "";
    position: absolute;
    left: -4px; top: 7px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--gold, #AFAE90);
  }
  .rgv-orbit .e-con.rgv-p4 { padding-bottom: 0; }
  .rgv-orbit .e-con.rgv-p4::after { display: none; }
}
@media (max-width: 767px) {
  .rgv-player { margin-top: calc(-1 * clamp(18px, 5vw, 30px)); }
  .rgv-cta-btns { flex-direction: column; align-items: stretch; }
  .rgv-cta-btns .elementor-widget-button,
  .rgv-cta-btns .elementor-button { width: 100%; }
}
/* <<< rgv =============================================================== */

/* >>> nav-glass-plantilla (5-ago-2026) =================================
   /tratamiento-plantilla/ (1599): CABECERA Y MEGAMENÚ DE CRISTAL COMO EL
   RESTO, Y ADEMÁS SIN NECESIDAD DE HACER SCROLL

   Pedido por Francisco: antes se había decidido dejar esta página con la
   cabecera marrón sólida; ahora se quiere el cristal como en el resto, y
   que en ESTA página el cristal esté puesto también arriba del todo.

   Dos cambios:
   1) Se quitó `:not(.page-id-1599)` de los bloques `nav-glass` y
      `mega-glass` (9 selectores en total). La 1320 (/tratamiento/) sigue
      excluida y con la barra sólida, como estaba.
   2) Este bloque, SOLO para esta página, aplica el cristal también en el
      estado de reposo (sin la clase `.scrolled` que pone libertad.js).

   ⚠️ CONTRASTE — leer antes de tocar la opacidad. Arriba del todo la barra
   viaja sobre el hero CREMA (#F0EADE), que es el peor caso posible: el
   texto del menú también es crema. Con `--nav-glass-opacidad: .58` queda en
   ~3,5:1, que es exactamente el mismo valor que ya está aprobado y en vivo
   en el resto del sitio al hacer scroll. Si en esta página se quiere más,
   subir la variable AQUÍ (el `body.page-id-1599` de abajo solo afecta a
   esta página): .70 ≈ 4,9:1 · .80 ≈ 6:1 · 1 = barra sólida de siempre.

   🔑 La franja de RRSS es un contenedor hijo con fondo sólido propio
   (`elementor-element-a752d43`). Hay que transparentarla TAMBIÉN en reposo
   — el bloque `nav-glass` solo lo hace para `.scrolled` — o la mitad de
   arriba de la cabecera se queda opaca y solo la fila del menú se ve de
   cristal.
   ==================================================================== */
body.page-id-1599 { --nav-glass-opacidad: .58; }

body.page-id-1599 .elementor-element.e-con.nav,
body.page-id-1599 .elementor-element.e-con.nav.scrolled {
  background-color: rgba(var(--nav-glass-tinte), var(--nav-glass-opacidad)) !important;
  -webkit-backdrop-filter: blur(var(--nav-glass-desenfoque)) saturate(140%) !important;
          backdrop-filter: blur(var(--nav-glass-desenfoque)) saturate(140%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .28) !important;
}
body.page-id-1599 .nav .elementor-element-a752d43 {
  background-color: transparent !important;
}
/* Navegadores sin backdrop-filter: barra sólida. Un velo traslúcido sin
   desenfoque dejaría el menú ilegible sobre la crema. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.page-id-1599 .elementor-element.e-con.nav,
  body.page-id-1599 .elementor-element.e-con.nav.scrolled { background-color: #2D201B !important; }
  body.page-id-1599 .nav .elementor-element-a752d43 { background-color: #2D201B !important; }
}
/* <<< nav-glass-plantilla ============================================ */






/* >>> sv — sección «Tratamientos» de la home (6-ago-2026) ==============
   Referencia: la sección «CELLORA PROGRAM» de la home de cellora.gu.clinic.
   MEDIDO allí a 1440px: dos columnas de 567px separadas 40px (también 40 en
   vertical), con las alturas alternadas EN DIAGONAL — 567 (cuadrada) y 782
   (alta) — de forma que las dos columnas suman exactamente lo mismo
   (567+40+782 = 782+40+567 = 1389). Relleno 64/40, título de 48px alineado
   a la DERECHA arriba del todo, y descripción abajo a la izquierda acotada
   a unos 330px con el enlace debajo.

   Aquí se traduce con Cormorant Garamond, DM Sans, el radio de 10px del
   sitio y las cuatro áreas del menú. Los tamaños de los titulares van en
   los AJUSTES de cada widget (el kit los fija con !important), no aquí.
   ====================================================================== */

/* ── cabecera centrada ─────────────────────────────────────────────── */
.svp-head {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 4.5vw, 68px);
}
.svp-head .eyebrow { justify-content: center; }
.svp-sub p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 253, 251, .72);
  margin: 0;
}

/* ── el mosaico ────────────────────────────────────────────────────────
   Son DOS COLUMNAS de verdad, no una rejilla: el escalonado nace de que
   cada tarjeta tiene su propia altura, y en un grid la fila igualaría a la
   más alta y se perdería el efecto. */
.e-con.svp-col { flex: 1 1 0; min-width: 0; }

.e-con.svp-card {
  position: relative;
  overflow: hidden;
  justify-content: space-between;   /* título arriba, texto y enlace abajo */
  text-decoration: none;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.e-con.svp-card--cuadrada { aspect-ratio: 567 / 567; }
.e-con.svp-card--alta     { aspect-ratio: 567 / 782; }

/* velo: la foto sola no da contraste al texto claro. Va en un
   pseudo-elemento para no tocar el fondo del contenedor, que sigue siendo
   un ajuste normal del editor. */
.e-con.svp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* el 10% de arriba dejaba el título en 1:1 sobre cualquier foto clara;
     con 22% hay margen sin apagar las fotos (las oscuras van a 12-15:1) */
  background: linear-gradient(180deg, rgba(45, 32, 27, .22) 0%,
                                       rgba(45, 32, 27, .54) 48%,
                                       rgba(45, 32, 27, .84) 100%);
  transition: opacity .45s ease;
}
.e-con.svp-card > * { position: relative; z-index: 1; }
.e-con.svp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(45, 32, 27, .32);
}

/* la descripción no ocupa todo el ancho: en la referencia se queda en unos
   330px de los 487 disponibles, y eso es parte del aire de la tarjeta */
.svp-card-texto p {
  font-size: 16px;
  line-height: 1.72;
  color: rgba(255, 253, 251, .86);
  margin: 0;
  max-width: 340px;
}

/* el enlace: la flecha se dibuja aquí para no depender de un icono, y se
   alarga al pasar por encima de la tarjeta */
.svp-card-link .elementor-heading-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.svp-card-link .elementor-heading-title::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}
.e-con.svp-card:hover .svp-card-link .elementor-heading-title::after { width: 38px; }

.svp-cierre { margin-top: clamp(38px, 4vw, 60px); }

/* ── responsive ────────────────────────────────────────────────────────
   Por debajo de 768px las dos columnas dejan de agrupar (`display:contents`)
   para que las cuatro tarjetas queden en el orden de lectura 1-2-3-4 y no
   1-3-2-4, que es como saldrían al apilarse columna sobre columna. */
@media (max-width: 1024px) {
  .e-con.svp-card { padding: 40px 28px 34px !important; }
  .svp-card-texto p { max-width: none; }
}
@media (max-width: 767px) {
  .e-con.svp-col { display: contents; }
  .e-con.svp-card--cuadrada,
  .e-con.svp-card--alta { aspect-ratio: 4 / 5; }
  .e-con.svp-p1 { order: 1; }
  .e-con.svp-p2 { order: 2; }
  .e-con.svp-p3 { order: 3; }
  .e-con.svp-p4 { order: 4; }
  .svp-cierre .elementor-widget-button,
  .svp-cierre .elementor-button { width: 100%; }
}
/* <<< sv =============================================================== */

/* >>> filo — sección «Nuestra Filosofía» de la home (6-ago-2026) =======
   Referencia: la home de cellora.gu.clinic/us, sección «ANTI AGING TO
   RE:NEW-AGING», que es la equivalente a ésta. MEDIDO allí: todo centrado,
   titular de 72px en Cormorant a dos líneas, subtítulo de 16px debajo
   también a dos líneas, y mucho aire alrededor — sin imágenes (el tríptico
   de fotos es de la sección siguiente).

   Aquí desaparecen las dos fotos superpuestas que había (stock con turquesa
   y verde brillante, fuera de la paleta del sitio) y los tres contadores,
   que estaban a cero por no haber cifras reales todavía.
   Los tamaños del titular van en los AJUSTES del widget, no aquí.
   ====================================================================== */
.filo-inner {
  text-align: center;
  max-width: 1040px;
  margin-inline: auto;
}
.filo-inner .eyebrow { justify-content: center; }
.filo-titulo { margin-top: 22px; }
.filo-sub p {
  font-size: 17px;
  line-height: 1.75;
  max-width: 720px;
  margin: 26px auto 0;
  color: var(--muted-2);
}
.filo-cta { margin-top: clamp(30px, 3.2vw, 44px); }

@media (max-width: 767px) {
  .filo-cta .elementor-widget-button,
  .filo-cta .elementor-button { width: 100%; }
}
/* <<< filo ============================================================= */

/* >>> ultherapy-v2 (5-ago-2026) ========================================
   PÁGINA NUEVA DE ULTHERAPY PRIME (1799) — clases `up2-*`

   Toda la página está hecha con widgets NATIVOS para que sea editable; aquí
   solo va la maquetación que Elementor no da por sí solo. Las medidas de
   contenedor se escriben sobre `--width` (la variable que consume `.e-con`),
   nunca sobre `width`, para que lo que se ponga en el editor siga mandando.
   Y los selectores llevan `.e-con` porque `.e-con.e-flex` (2 clases) fija
   `--flex-shrink` y, dentro del media query móvil, `--width:100%`: con una
   sola clase se pierde.
   ==================================================================== */

/* ── 2. ¿Qué es? — titular centrado + entradilla + tres piezas ───────── */
/* 🔑 Para limitar el ancho de un widget hay que igualar la forma del selector
   de Elementor: él fija `max-width:100%` con
   `.elementor.elementor .e-con > .elementor-widget` (CUATRO clases), así que
   `.elementor-widget.mi-clase` (dos) pierde y el párrafo sale a todo lo ancho. */
.elementor.elementor .e-con > .elementor-widget.up2-que-intro { max-width: 700px; margin-inline: auto; }
.elementor.elementor .e-con > .elementor-widget.up2-cta-texto  { max-width: 620px; margin-inline: auto; }

/* Los títulos de ítem van en DM Sans, como en la referencia de cellora. El
   tema fija Cormorant en TODOS los headings con !important y ofrece esta
   convención para pasarlos a la sans (misma forma de selector que usa él
   para .result-time y compañía). Pelearse con ella no funciona. */
.elementor-element.e-con .elementor-widget-heading.up2-dif-titulo .elementor-heading-title,
.elementor-element.e-con .elementor-widget-heading.up2-que-pieza-titulo .elementor-heading-title,
.elementor-element.e-con .elementor-widget-heading.up2-zona-titulo .elementor-heading-title {
  font-family: var(--sans) !important;
  font-weight: 600;
  letter-spacing: .004em;
}
/* Imagen de contenido del diagrama de profundidades. El ancho se fija con la
   forma de selector de Elementor (4 clases) o pierde. */
.elementor.elementor .e-con > .elementor-widget.up2-que-img { max-width: 720px; margin-inline: auto; }
.up2-que-img img {
  border-radius: 10px;
  box-shadow: 0 25px 50px -12px rgba(45, 32, 27, .26);
}
.up2-que-img figcaption {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  opacity: .68;
}

.e-con.up2-que-grid { align-items: stretch; }
/* Tarjetas al estilo "RECOVERY MECHANISM" (cellora/us/programs/narosome):
   tarjeta blanca, radio generoso, mucho aire, título en sans y texto gris.
   SIN numerar a propósito: allí los números están porque son PASOS de un
   proceso (01 extracción → 04 inyección); estos tres son características,
   no una secuencia, y numerarlos diría algo que no es cierto.
   El radio 10px lo pone ya la regla global `radio-10 · contenedores`. */
.e-con.up2-que-pieza {
  --width: calc((100% - 56px) / 3);
  background: #FFFDFB;
  --padding-top: 34px; --padding-right: 30px; --padding-bottom: 34px; --padding-left: 30px;
}
.up2-que-pieza-titulo .elementor-heading-title { font-size: 20px; line-height: 1.3; }
.up2-que-pieza-texto { font-size: 15px; line-height: 1.75; opacity: .88; }

/* ── 3. Qué lo hace diferente — titular fijo a la izquierda ──────────── */
.e-con.up2-dif-inner { align-items: flex-start; }
.e-con.up2-dif-col-titulo { --width: 42%; }
.e-con.up2-dif-col-lista  { --width: 58%; }
.up2-dif-h .elementor-heading-title { text-wrap: balance; }

.e-con.up2-dif-item { align-items: flex-start; }
.e-con.up2-dif-medallon {
  --width: 52px; --flex-shrink: 0; --border-radius: 50%;
  aspect-ratio: 1 / 1;
  align-items: center; justify-content: center;
  background: rgba(240, 234, 222, .09);
  border: 1px solid rgba(240, 234, 222, .26);
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
}
.up2-dif-num .elementor-heading-title {
  font-size: 16px; line-height: 1; letter-spacing: .04em; color: var(--gold);
}
.e-con.up2-dif-cuerpo { --width: auto; }
.up2-dif-titulo .elementor-heading-title { font-size: 18px; line-height: 1.35; }
.up2-dif-texto {
  font-size: 15px; line-height: 1.75;
  color: rgba(240, 234, 222, .78);
}

/* El titular acompaña al scroll, como en la referencia. Solo en escritorio:
   en táctil estorba.
   🔑 `html` y `body` llevan `overflow: hidden auto` en TODO el sitio
   (libertad-global), y eso ANULA `position:sticky` en los descendientes. Se
   arregla con `overflow-x: clip` —recorta igual pero no crea contenedor de
   scroll— acotado a esta página para no tocar el resto. Mismo truco que el
   telón de /medicina-estetica/. */
html:has(body.page-id-1799), body.page-id-1799 { overflow-x: clip; }
@media (min-width: 1025px) {
  .e-con.up2-dif-col-titulo { position: sticky; top: 130px; }
}
@media (max-width: 1024px) {
  .e-con.up2-dif-inner { flex-direction: column; }
  .e-con.up2-dif-col-titulo, .e-con.up2-dif-col-lista { --width: 100%; }
  .e-con.up2-que-pieza { --width: calc((100% - 28px) / 2); }
}

/* el antetítulo de la columna izquierda, para que no quede sola la caja del titular */
.up2-dif-eyebrow .elementor-heading-title { color: var(--gold); }

/* Francisco dejó esta sección como panel flotante (88% de ancho y radio 10
   desde el editor), así que pide el mismo tratamiento que el vídeo de
   Medicina Regenerativa: sombra + relieve de cristal.
   🔑 El `::before` está ocupado por el OVERLAY de fondo de Elementor (aquí al
   0,69), así que el relieve va en `::after`. Mismo criterio que en
   .tr-seccion-datos.
   🔑 `z-index:2` porque la sección siguiente es opaca y va después en el DOM:
   sin él se comería la sombra entera. */
.up2-dif {
  position: relative;
  z-index: 2;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);   /* la del vídeo de 1738 */
}
.up2-dif::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 7%, rgba(255,255,255,0) 18%),
    radial-gradient(130% 60% at 8% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 42%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.13);
}
.up2-dif > * { position: relative; z-index: 1; }

/* ── 4. Zonas tratables ─────────────────────────────────────────────── */
/* Referencia: "CELLORA'S RE:NEW-CELL A IS RECOMMENDED FOR"
   (cellora/us/programs/renew-cell): dos columnas de tarjetas redondeadas
   translúcidas con el texto centrado. Allí van sobre fondo oscuro; aquí la
   sección es crema, así que la tarjeta es un velo claro sobre la crema. */
.e-con.up2-zonas-grid {
  align-items: stretch;
  justify-content: center;
  max-width: 980px; margin-inline: auto;
}
.e-con.up2-zona {
  --width: calc((100% - 20px) / 2);
  background: rgba(255, 253, 251, .68);
  border: 1px solid rgba(45, 32, 27, .07);
  --padding-top: 26px; --padding-right: 26px; --padding-bottom: 26px; --padding-left: 26px;
  align-items: center;
  text-align: center;
  --flex-gap-column: 6px;
}
.up2-zona-titulo .elementor-heading-title { font-size: 18px; line-height: 1.35; }
.up2-zona-texto { font-size: 15px; line-height: 1.7; opacity: .82; }

/* ── 7. B2B — venta del equipo ──────────────────────────────────────── */
.e-con.up2-b2b-inner { align-items: center; }
.e-con.up2-b2b-texto  { --width: 62%; }
.e-con.up2-b2b-accion { --width: auto; align-items: flex-end; }
/* El TAMAÑO del titular del B2B NO va aquí: el kit fija el de los headings
   con !important, así que por CSS salía diminuto. Está en los ajustes del
   widget (Cormorant 34/29/26), donde además se puede seguir tocando. */
.elementor.elementor .e-con > .elementor-widget.up2-b2b-parrafo { max-width: 560px; }
.up2-b2b-parrafo { font-size: 15.5px; line-height: 1.75; opacity: .88; }
@media (max-width: 900px) {
  .e-con.e-flex.up2-b2b-inner  { flex-direction: column; align-items: flex-start; }
  .e-con.e-flex.up2-b2b-texto,
  .e-con.e-flex.up2-b2b-accion { --width: 100%; align-items: flex-start; }
}

/* ── 6. CTA ─────────────────────────────────────────────────────────── */
.e-con.up2-cta-panel { align-items: center; text-align: center; }

/* ── Móvil ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .e-con.up2-que-pieza, .e-con.up2-zona { --width: 100%; }
  .e-con.up2-que-pieza { --padding-top: 28px; --padding-right: 24px; --padding-bottom: 28px; --padding-left: 24px; }
  /* 🔑 Dentro de SU media query móvil Elementor fija `--width:100%` a los
     contenedores, y eso partía cada ítem en dos líneas (el medallón arriba y
     el texto debajo). Hay que ganarle con tres clases y volver a fijar la
     fila. */
  .e-con.e-flex.up2-dif-item    { flex-direction: row; flex-wrap: nowrap; }
  .e-con.e-flex.up2-dif-medallon { --width: 44px; --flex-shrink: 0; }
  .e-con.e-flex.up2-dif-cuerpo   { --width: auto; --flex-grow: 1; min-width: 0; }
  /* El 88% que Francisco puso en el editor es solo de escritorio: en la media
     query móvil de Elementor el panel se iba a sangre y las esquinas
     redondeadas asomaban en el borde. Se mantiene como panel, algo más ancho. */
  .e-con.e-flex.up2-dif { --width: 92%; margin-inline: auto; }
  .up2-dif-titulo .elementor-heading-title { font-size: 17px; }
  .up2-que-pieza-titulo .elementor-heading-title,
  .up2-zona-titulo .elementor-heading-title { font-size: 16px; }
}
/* <<< ultherapy-v2 =================================================== */


/* >>> hv — rediseño de la home (7-ago-2026) ============================
   Página de trabajo: 1809 /preview-home-tratamientos/.
   Referencia: cellora.gu.clinic/us, adaptada a Clínica Libertad.

   LO MEDIDO EN LA REFERENCIA Y QUE AQUÍ SE TRADUCE:
   · Escala tipográfica en Cormorant con INTERLINEADO 1,0 en los titulares
     grandes (allí 72/72, 48/48, 36/36). Ese apretado es lo que da el aire
     editorial; el sitio venía con interlineados de 1,15-1,3.
   · Entradas por scroll MUY sutiles: opacidad 0→1 con un desplazamiento de
     sólo 8-22px (el tema traía 28px), curva cubic-bezier(.4,0,.2,1) y
     retardos escalonados de 50-100ms. No usan ninguna librería.
   · Etiquetas (eyebrow) en serif de 12px con 1,5em de separación.
   · Marquesina horizontal con una frase de marca muy espaciada.
   · Diagramas geométricos de línea fina como ilustración de los valores.
   · Secciones con el titular fijo a la izquierda mientras pasa el contenido.

   Todo el bloque usa el prefijo .hv-* para poder quitarlo de una pieza.
   Los tamaños que deban poder tocarse desde el editor van en los AJUSTES
   de cada widget, no aquí.
   ====================================================================== */

:root {
  --hv-curva: cubic-bezier(.4, 0, .2, 1);
  --hv-curva-salida: cubic-bezier(.16, 1, .3, 1);
  --hv-oro: #AFAE90;
  --hv-oliva: #37371B;
  --hv-tinta: #2D201B;
  --hv-crema: #F0EADE;
}

/* ── 1. ENTRADAS POR SCROLL ────────────────────────────────────────────
   El tema ya trae `.reveal` (28px / 1,1s), que al lado de la referencia se
   nota pesado. `.hv-in` es la versión afinada; se apoya en el mismo
   observador del tema (que añade la clase `in`), así que no hace falta JS
   nuevo para esto. */
.hv-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--hv-curva), transform .8s var(--hv-curva);
}
.hv-in.in { opacity: 1; transform: none; }
/* escalonado: cada hijo entra 90ms después del anterior */
.hv-escalona > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ── 2. TITULARES POR LÍNEAS ───────────────────────────────────────────
   Cada línea sube desde debajo de su propia máscara. Las líneas se parten
   por los <br> que ya traen los titulares del sitio (verificado: hero y
   filosofía los tienen), así que no hay que medir saltos de línea. */
.hv-lineas .hv-linea {
  display: block;
  overflow: hidden;
}
.hv-lineas .hv-linea > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--hv-curva-salida);
  transition-delay: calc(var(--l, 0) * 110ms);
}
.hv-lineas.in .hv-linea > span { transform: none; }

/* ── 3. ETIQUETAS ──────────────────────────────────────────────────────
   El eyebrow del sitio es sans de 11px con filete. Se conserva, pero se
   afina la separación y se le da al filete la entrada de la referencia. */
.hv-etiqueta .elementor-heading-title,
.hv-etiqueta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--hv-oro);
}

/* ── 4. MARQUESINA ─────────────────────────────────────────────────────
   Cinta de texto que cruza la pantalla sin fin. Dos copias idénticas de la
   pista y un desplazamiento del 50%: así el salto es invisible. Sólo CSS. */
.hv-marquee {
  overflow: hidden;
  padding-block: clamp(26px, 3vw, 44px);
  border-top: 1px solid rgba(175, 174, 144, .22);
  border-bottom: 1px solid rgba(175, 174, 144, .22);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hv-marquee-pista {
  display: flex;
  width: max-content;
  animation: hv-desliza 46s linear infinite;
}
.hv-marquee-pista > span {
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(175, 174, 144, .78);
  white-space: nowrap;
  padding-right: 3.5em;
}
@keyframes hv-desliza { to { transform: translateX(-50%); } }
.hv-marquee:hover .hv-marquee-pista { animation-play-state: paused; }

/* ── 5. PILARES (tipo «core values») ───────────────────────────────────
   Cada pilar lleva un diagrama geométrico de línea fina dentro de un
   recuadro, como en la referencia. Los diagramas se dibujan con CSS
   (círculos concéntricos, órbitas y radios) para no cargar imágenes. */
.e-con.hv-pilar { text-align: left; }
.hv-pilar-marco {
  position: relative;
  aspect-ratio: 378 / 280;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 253, 251, .028);
  border: 1px solid rgba(175, 174, 144, .16);
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  transition: border-color .5s var(--hv-curva), background-color .5s var(--hv-curva);
}
.e-con.hv-pilar:hover .hv-pilar-marco {
  border-color: rgba(175, 174, 144, .42);
  background: rgba(255, 253, 251, .05);
}
.hv-diagrama {
  width: min(58%, 190px);
  aspect-ratio: 1;
  position: relative;
}
.hv-diagrama::before,
.hv-diagrama::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(175, 174, 144, .5);
  border-radius: 50%;
}
/* el aro exterior gira muy despacio; el interior queda quieto */
.hv-diagrama::before { animation: hv-gira 90s linear infinite; border-style: dashed; }
.hv-diagrama::after  { inset: 22%; }
@keyframes hv-gira { to { transform: rotate(360deg); } }
/* variantes: el segundo pilar añade órbitas cruzadas y el tercero radios */
.hv-diagrama.hv-d2 i,
.hv-diagrama.hv-d3 i {
  position: absolute;
  inset: 12% 30%;
  border: 1px solid rgba(175, 174, 144, .42);
  border-radius: 50%;
  display: block;
}
.hv-diagrama.hv-d2 i:nth-child(2) { transform: rotate(60deg); }
.hv-diagrama.hv-d2 i:nth-child(3) { transform: rotate(120deg); }
.hv-diagrama.hv-d3 i {
  inset: 0;
  border: 0;
  border-top: 1px solid rgba(175, 174, 144, .38);
  border-radius: 0;
  top: 50%;
  height: 0;
}
.hv-diagrama.hv-d3 i:nth-child(2) { transform: rotate(60deg); }
.hv-diagrama.hv-d3 i:nth-child(3) { transform: rotate(120deg); }

.hv-pilar-num .elementor-heading-title,
.hv-pilar-num {
  font-family: var(--serif) !important;
  font-size: 15px;
  letter-spacing: .22em;
  color: var(--hv-oro);
  display: block;
  margin-bottom: 10px;
}

/* ── 6. IMÁGENES CON ACERCAMIENTO ──────────────────────────────────────
   El fondo se amplía muy despacio al pasar el ratón. Va sobre el propio
   contenedor de Elementor, que es quien lleva la imagen de fondo. */
.e-con.hv-zoom {
  overflow: hidden;
  position: relative;
}
.e-con.hv-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 1.4s var(--hv-curva);
  z-index: 0;
}
.e-con.hv-zoom:hover::after { transform: scale(1.06); }
.e-con.hv-zoom > * { position: relative; z-index: 1; }

/* ── 7. TITULAR FIJO ───────────────────────────────────────────────────
   En la referencia, el titular de «evidence & trust» se queda quieto
   mientras pasan las tarjetas. Sólo a partir de 1025px: en táctil molesta.
   ⚠️ `html`/`body` llevan `overflow:hidden auto` en todo el sitio y eso
   anula `position:sticky`; se arregla con `overflow-x:clip`, acotado a
   esta página para no tocar el resto. */
@media (min-width: 1025px) {
  html:has(body.page-id-1809),
  body.page-id-1809 { overflow-x: clip; }
  .hv-fijo {
    position: sticky;
    top: 140px;
    align-self: start;
  }
}

/* ── 8. INDICADOR DE SCROLL ────────────────────────────────────────────
   Una línea fina que baja sin parar bajo la etiqueta del hero. */
.hv-scroll {
  position: absolute;
  bottom: clamp(28px, 4vh, 54px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  width: 1px;
  height: 54px;
}
.hv-scroll::after {
  content: "";
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, rgba(240, 234, 222, .7), rgba(240, 234, 222, 0));
  animation: hv-baja 2.4s var(--hv-curva) infinite;
  transform-origin: top;
  display: block;
}
@keyframes hv-baja {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(54px); opacity: 0; }
}

/* ── 9. FILETE QUE SE DIBUJA ───────────────────────────────────────────
   Detalle de remate bajo los titulares de sección: una línea que crece de
   izquierda a derecha cuando la sección entra. */
.hv-filete {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--hv-oro);
  margin: 26px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.1s var(--hv-curva-salida) .25s;
}
.in .hv-filete,
.hv-filete.in { transform: scaleX(1); }

/* ── 10. RESPETO POR QUIEN NO QUIERE MOVIMIENTO ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hv-in, .hv-lineas .hv-linea > span { transition: none; opacity: 1; transform: none; }
  .hv-marquee-pista, .hv-diagrama::before, .hv-scroll::after { animation: none; }
  .hv-filete { transform: scaleX(1); }
}

/* Elementor no ejecuta de forma fiable los observadores de scroll dentro de
   su iframe de edición. Las animaciones de la home experimental empiezan
   ocultas, así que en el editor se muestran estáticas para poder seleccionarlas
   y editarlas; el frontend conserva las animaciones intactas. */
.elementor-editor-active .hv-in {
  opacity: 1 !important;
  transform: none !important;
}
.elementor-editor-active .hv-lineas .hv-linea > span {
  transform: none !important;
}
.elementor-editor-active .hv-filete {
  transform: scaleX(1) !important;
}
/* <<< hv =============================================================== */

/* ── 11. PIEZAS DE LA HOME ─────────────────────────────────────────────
   Sólo maquetación: los tamaños de letra viven en los ajustes de cada
   widget para que se puedan cambiar desde el editor. */

/* hero: el contenido se centra sobre el vídeo y ocupa la pantalla */
.hv-hero { min-height: 100vh; justify-content: center; position: relative; }
.hv-hero-contenido { text-align: center; position: relative; z-index: 2; }
.hv-hero-contenido .hv-etiqueta { justify-content: center; margin-bottom: 26px; }
.hv-hero-sub p {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  color: rgba(255, 253, 251, .76);
  max-width: 560px;
  margin: 26px auto 0;
}
.hv-hero-botones { margin-top: clamp(30px, 3vw, 44px); }

/* cabeceras de sección */
.hv-centrado, .hv-cabecera { text-align: center; max-width: 900px; margin-inline: auto; }
.hv-cabecera { margin-bottom: clamp(44px, 5vw, 76px); }
.hv-centrado .eyebrow, .hv-cabecera .eyebrow,
.hv-centrado .hv-etiqueta, .hv-cabecera .hv-etiqueta { justify-content: center; }
.hv-sub p {
  font-size: 17px;
  line-height: 1.75;
  max-width: 720px;
  margin: 24px auto 0;
  color: var(--muted-2);
}
.on-dark .hv-sub p, .section.dark .hv-sub p { color: rgba(255, 253, 251, .72); }
.hv-cta-centro { margin-top: clamp(30px, 3.4vw, 46px); }
.hv-filosofia { padding-block: clamp(96px, 12vw, 190px); }

/* pilares */
/* `.section.dark` fija el fondo con dos clases: para que estos pilares
   vayan en oliva y no en tinta hay que igualar esa forma */
.section.dark.hv-pilares-sec { background: var(--hv-oliva); }
.hv-pilar-titulo { margin-bottom: 14px; }
.hv-pilar-texto p {
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(255, 253, 251, .68);
  margin: 0;
}

/* ultherapy: dos columnas, la de la izquierda se queda fija */
.hv-dos-columnas > .e-con.hv-fijo { flex: 0 0 40%; max-width: 40%; }
.hv-dos-columnas > .e-con.hv-ulth-lado { flex: 1 1 0; min-width: 0; }
.hv-ulth-img { aspect-ratio: 16 / 10; border-radius: 10px; }
.hv-ulth .hv-titulo .elementor-heading-title { text-align: left; }

/* equipo */
.hv-retrato { aspect-ratio: 3 / 4; border-radius: 10px; margin-bottom: 26px; }
.hv-medico-nombre { margin-bottom: 4px; }
.hv-medico-rol .elementor-heading-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--hv-oro);
}
.hv-medico-bio p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--muted-2);
  margin: 16px 0 0;
}

/* comparadores antes/después */
.hv-comparadores .elementor-widget { border-radius: 10px; overflow: hidden; }

@media (max-width: 1024px) {
  .hv-dos-columnas > .e-con.hv-fijo { flex: 1 1 auto; max-width: none; }
  .hv-hero { min-height: 88vh; }
}
@media (max-width: 767px) {
  .hv-hero-botones { flex-direction: column; }
  .hv-hero-botones .elementor-widget-button,
  .hv-hero-botones .elementor-button { width: 100%; }
}

/* Orden de capas cuando el acercamiento se aplica a una tarjeta que ya
   tiene velo: la imagen ampliada tiene que quedar POR DEBAJO del velo, o
   lo taparía (ambos pseudo-elementos empatan a z-index 0 y ganaría
   `::after` por orden de pintado) y el texto se volvería ilegible. */
.e-con.svp-card.hv-zoom::after { z-index: 0; }
.e-con.svp-card::before { z-index: 1; }
.e-con.svp-card > * { z-index: 2; }

/* >>> colores-editables (10-ago-2026) ==================================
   Dos problemas que venían del mismo sitio y se arreglan igual.

   A) EL ACENTO VERDE DE LOS TITULARES.
      Los titulares llevan dentro <span class="accent"> y <em>, y
      libertad-extra.css:661-662 les clava el color de acento con
      !important en todo el sitio. Aquí ese acento pasa a `inherit`: el
      trozo en cursiva toma el color del propio titular, así cada título
      queda de UN SOLO color y ese color se sigue eligiendo desde el
      editor (control «Color del texto» del widget). Se conserva la
      cursiva, que es lo que da el contraste tipográfico.
      Hace falta !important porque las reglas originales lo llevan.

   B) LAS DESCRIPCIONES NO DEJABAN CAMBIAR DE COLOR.
      El CSS pintaba el <p> DIRECTAMENTE (`.hv-sub p { color: ... }`) y
      Elementor colorea el WIDGET contando con que el párrafo herede. Una
      regla directa gana siempre a un valor heredado, da igual la
      especificidad: por eso el selector del editor no hacía nada.
      Arreglo en dos partes:
        · el <p> pasa a `inherit`, repitiendo la forma exacta de cada
          selector original (si no, el que tenga más clases seguiría
          ganando);
        · el color por defecto NO puede ir sobre el widget: el tema trae
          `.elementor-element.e-con .elementor-widget-text-editor{color:
          inherit}` con TRES clases y se lleva por delante cualquier
          defecto de una. Va sobre el CONTENEDOR, que es de donde el tema
          quiere que hereden (igual que hace `.section.dark`). Así el
          widget lo hereda y, en cuanto se le pone un color desde el
          editor, su regla por widget (3 clases, y carga después) gana.
      🔑 SIN ESTO SE ROMPE: al soltar el <p> sin dar defecto al contenedor,
      el subtítulo del hero heredaba la tinta del kit (oscuro sobre foto
      oscura) y los textos de las tarjetas heredaban el MAGENTA `#c36`
      del selector `a` — las tarjetas son enlaces (`html_tag:"a"`).

   Alcance: `body.page-id-1809`. Al llevar el diseño a la home hay que
   añadir aquí su ID, igual que en el mu-plugin libertad-home-efectos.php.
   ====================================================================== */

/* ── A. TITULARES DE UN SOLO COLOR ──────────────────────────────────── */
body.page-id-1809 .elementor-heading-title em,
body.page-id-1809 .elementor-heading-title .accent,
body.page-id-1809 .hero .accent {
  color: inherit !important;
}

/* ── B. DESCRIPCIONES: EL COLOR VUELVE AL EDITOR ────────────────────── */

/* B.1 · el párrafo deja de tener opinión y hereda del widget.
   Cada selector repite la forma del original para empatarle. */
.hv-hero-sub p,
.hv-sub p,
.on-dark .hv-sub p,
.section.dark .hv-sub p,
.hv-pilar-texto p,
.hv-medico-bio p,
.svp-sub p,
.svp-card-texto p {
  color: inherit;
}

/* B.2 · el color por defecto va al CONTENEDOR de cada descripción, que es
   de donde el tema hace heredar a los text-editor. Puesto sobre el widget
   no serviría: `.elementor-element.e-con .elementor-widget-text-editor`
   (3 clases) se lo comería. */
.hv-hero-contenido  { color: rgba(255, 253, 251, .76); }   /* hero */
.hv-pilar           { color: rgba(255, 253, 251, .68); }   /* pilares */
.svp-card-pie       { color: rgba(255, 253, 251, .86); }   /* tarjetas (van dentro de un <a>) */
.hv-medico          { color: var(--muted-2); }             /* equipo */

/* cabeceras de sección: el tono cambia según el fondo */
.hv-centrado,
.hv-cabecera        { color: var(--muted-2); }
.on-dark .hv-centrado, .on-dark .hv-cabecera,
.section.dark .hv-centrado, .section.dark .hv-cabecera { color: rgba(255, 253, 251, .72); }
/* <<< colores-editables */

/* >>> titulos-colas (10-ago-2026) =====================================
   LOS TITULARES SE CORTABAN POR ABAJO.

   El diseño usa el interlineado 1,0 medido en la referencia, así que la
   caja de línea mide justo el tamaño de letra. Cormorant Garamond baja
   mucho las colas (g, p, q, y, j) y el efecto de entrada las siega,
   porque el JS mete cada línea en una máscara con `overflow:hidden`.

   MEDIDO ANTES DE TOCAR (tinta bajo la línea base contra el hueco que
   deja la caja, con la fuente y el cuerpo reales de cada titular):
     · hero 112px .............. 12,6 px de tinta comidos
     · filosofía 72px ..........  6,3 px
     · secciones 64px .......... 4,2 a 5,2 px
   Por ARRIBA no se cortaba ninguno (todos con holgura de 6 a 14 px).

   ARREGLO: la máscara crece por abajo lo justo y se recupera con un
   margen negativo del mismo valor, así el bloque ocupa exactamente lo
   mismo que antes y no se mueve nada de la página. El desplazamiento de
   partida crece en la misma medida: si no, con la máscara más alta la
   línea asomaría por debajo antes de que empiece a subir.

   El valor va en `em` para que acompañe a cada cuerpo de letra: 0,16em
   son 18px en el hero (hacían falta 12,6) y 10px en los de 64px (4-6).
   ====================================================================== */
.hv-lineas .hv-linea {
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.hv-lineas .hv-linea > span {
  transform: translateY(calc(105% + .16em));
}
/* <<< titulos-colas */

/* >>> testi-cristal (10-ago-2026) ======================================
   La caja de testimonios (.testi-card) pasa de bloque negro sólido
   (`--ink-2` #0F0F0F) a cristal, con el MISMO lenguaje que el panel del
   CTA: filete blanco de 1px al 16%, radio 10, sombra larga y brillo
   superior.

   🔑 DIFERENCIA CON EL CTA, MEDIDA APAGANDO CADA PARTE DEL FILTRO POR
   SEPARADO (media de un parche de fondo sin texto, 4 cargas):
     · blur(14px) solo ...... 57,18 vs 57,19 sin filtro -> **0,012: NADA**
     · saturate(140%) solo .. 61,14 -> diferencia 2,65: SÍ trabaja
   El CTA va sobre una FOTO y allí el desenfoque sí desenfoca; aquí el
   fondo de la sección es un color PLANO (rgb(45,32,27)) y difuminar un
   plano no produce nada. Por eso se queda el `saturate`, que enriquece
   el tono de detrás, y se va el `blur`, que es la parte cara (un
   gaussiano de 14px sobre 1296x414 en cada fotograma) a cambio de cero.
   Si algún día se le pone una FOTO de fondo a esta sección, hay que
   devolver el `blur(14px)` y volverá a tener sentido.
   Lo que hace que esto lea como cristal es el VELO, el filete y el
   brillo (misma conclusión que en el bloque `datos-cristal`).

   🔑 Y EL VELO TIENE QUE ACLARAR, NO OSCURECER: el CTA usa un velo de
   tinta al 42% porque oscurece una foto clara. Aquí el mismo velo sobre
   un fondo ya oscuro daría rgb(45,36,32) — a un paso del fondo de la
   sección, la caja desaparecería. Sobre oscuro un cristal se lee porque
   LEVANTA. De ahí el velo en crema muy bajo.

   La intensidad está en una variable: subir `--testi-velo` para que la
   caja destaque más, bajarlo para que sea más sutil.

   Alcance: `body.page-id-1809`. El widget de testimonios solo existe
   además en la home real (33), que NO se toca.
   ====================================================================== */
body.page-id-1809 .testi-card {
  --testi-velo: .055;

  background: rgba(255, 253, 251, var(--testi-velo));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 70px rgba(45, 32, 27, .30);
  /* sin blur a propósito: medido, sobre fondo plano no aporta nada */
  -webkit-backdrop-filter: saturate(140%);
          backdrop-filter: saturate(140%);

  /* la sección siguiente (el CTA) tiene fondo opaco y empieza justo donde
     acaba ésta: sin esto se comería la sombra entera */
  position: relative;
  z-index: 2;
}

/* brillo superior: el domo de luz que da el aspecto de cristal.
   `.testi-card` no usaba ninguno de sus dos pseudo-elementos (comprobado),
   así que `::after` está libre. */
body.page-id-1809 .testi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 7%, transparent 18%),
    radial-gradient(130% 60% at 8% -10%, rgba(255, 255, 255, .12), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* el contenido, por encima del brillo */
body.page-id-1809 .testi-card > * {
  position: relative;
  z-index: 1;
}
/* <<< testi-cristal */

/* >>> pilares-movil (11-ago-2026) =====================================
   EN MÓVIL EL DIAGRAMA DE LOS PILARES SE SALÍA DE SU SITIO y se cruzaba
   con el texto del propio pilar y con el pilar siguiente.

   🔑 CAUSA MEDIDA (no deducida): el alto de `.hv-pilar-marco` sale de su
   `aspect-ratio: 378/280`. En móvil el pilar es una COLUMNA FLEX
   (`--display:flex` del contenedor hv00028) y ahí Chrome NO suma ese
   alto al del envoltorio del widget: medido **28 px de envoltorio con
   253 px de marco dentro** -> 225 px asomando por fuera, invadiendo el
   pilar siguiente hasta 33 px. En escritorio no ocurre porque el pilar
   es celda de una rejilla de 3 columnas, y ahí el envoltorio sí mide
   305 px (= 279 del marco + 26 de margen).

   🔑 NO ES `flex-shrink`: probado en vivo `flex: 0 0 auto` y
   `min-height: fit-content` en el envoltorio -> los tres pilares siguen
   igual (28/253). Lo único que lo arregla es quitarle el `aspect-ratio`
   y darle alto propio, que sí entra en el cálculo del padre.

   El alto del marco y el del diagrama van los DOS en `vw` con topes
   proporcionales, así que el diagrama se queda en el **68 % del alto
   del marco de 320 a 767 px** — exactamente la proporción del
   escritorio (190/279). Si se cambia uno hay que cambiar el otro.
   ==================================================================== */
@media (max-width: 767px) {
  .hv-pilar-marco {
    aspect-ratio: auto;
    height: clamp(150px, 44vw, 230px);
  }
  .hv-diagrama {
    width: clamp(102px, 30vw, 156px);
  }
}
/* <<< pilares-movil */


/* =========================================================================
   PAGINAS LEGALES — Aviso legal (1438), Privacidad (1439), Cookies (1440)
   11-ago-2026

   Documento legal con el sistema visual del sitio: hero oscuro + cuerpo
   crema, indice pegajoso a la izquierda y columna de lectura acotada.
   Todo el contenido son widgets nativos de Elementor (heading + text-editor);
   aqui solo se les da forma.

   NOTA de especificidad: los contenedores de Elementor son `.e-con.e-flex`
   con `display:flex` propio, y en movil fuerza `--width:100%`. Por eso los
   selectores llevan `.e-con.e-flex` delante: sin eso el editor "no hace nada".

   Para desactivar el bloque entero: borrar de aqui hasta /PAGINAS LEGALES.
   ========================================================================= */

body.page-id-1438,
body.page-id-1439,
body.page-id-1440 {
  --leg-cuerpo:  #4B443C;                    /* texto de lectura sobre crema */
  --leg-linea:   rgba(45, 32, 27, .14);
  --leg-oro:     var(--accent-strong, #767154);
  --leg-medida:  74ch;                       /* medida comoda de lectura */
  --leg-cabecera: 120px;                     /* cabecera fija + aire */
}

/* html y body llevan overflow-x:hidden en todo el sitio y eso anula
   position:sticky en sus descendientes. `clip` recorta igual pero no crea
   contenedor de scroll. Acotado por page-id, como ya se hizo en la 1510. */
@media (min-width: 1025px) {
  html:has(body.page-id-1438), body.page-id-1438,
  html:has(body.page-id-1439), body.page-id-1439,
  html:has(body.page-id-1440), body.page-id-1440 { overflow-x: clip; }
}

/* --- Hero ---------------------------------------------------------------- */
/* Sin imagen de fondo: el degradado de .mr-hero se apoya sobre la tinta y
   deja una cabecera sobria, que es lo que pide un documento legal. */
.leg-hero { background-color: var(--ink); }
.leg-hero::before {
  background: linear-gradient(180deg,
              rgba(45, 32, 27, .55) 0%,
              rgba(45, 32, 27, .10) 55%,
              rgba(45, 32, 27, .60) 100%);
}

.leg-hero-inner { max-width: 820px; }

/* OJO con los encabezados: `libertad-elementor.css` fija font-size:inherit en
   .elementor-heading-title con 4 clases de especificidad Y se carga DESPUES de
   esta hoja. El tamano se pone por tanto en el WIDGET (la clase que lleva el
   contenedor del widget) y el titulo interior lo hereda. Es el mismo mecanismo
   con el que funcionan .h-section y .h-display del tema; poner el tamano en el
   titulo interior no tiene ningun efecto. */

.leg-hero .elementor-widget-heading.leg-h1 { margin-top: 18px; }

.leg-hero .leg-entrada {
  max-width: 620px;
  margin-inline: auto;
  margin-top: 22px;
}
.leg-hero .leg-entrada p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(240, 234, 222, .78);
  margin: 0;
}

.leg-hero .leg-fecha { margin-top: 26px; }
.leg-hero .leg-fecha p {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240, 234, 222, .5);
  margin: 0;
}

/* --- Rejilla: indice + documento ---------------------------------------- */
.e-con.e-flex.leg-inner {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

/* --- Indice -------------------------------------------------------------- */
.e-con.e-flex.leg-indice {
  position: sticky;
  top: var(--leg-cabecera);
  --width: 100%;
  padding: 26px 24px 28px;
  border: 1px solid var(--leg-linea);
  border-radius: 10px;                 /* radio global del sitio */
  background: rgba(255, 255, 255, .42);
}

.elementor-widget-heading.leg-indice-titulo {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--leg-oro);
  margin: 0 0 14px;
}
/* la hoja puente impone la serif con !important: hay que ganarle en especificidad */
.elementor-element.e-con .elementor-widget-heading.leg-indice-titulo .elementor-heading-title {
  font-family: var(--sans) !important;
  font-weight: 500;
}

.leg-indice-lista ol {
  list-style: none;
  counter-reset: leg;
  margin: 0;
  padding: 0;
}
.leg-indice-lista li {
  counter-increment: leg;
  margin: 0 0 9px;
  padding-left: 26px;
  position: relative;
}
.leg-indice-lista li::before {
  content: counter(leg, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .2em;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--leg-oro);
  opacity: .75;
}
.leg-indice-lista a {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--leg-cuerpo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.leg-indice-lista a:hover {
  color: var(--leg-oro);
  border-bottom-color: var(--leg-oro);
}

/* --- Documento ----------------------------------------------------------- */
.e-con.e-flex.leg-doc { --width: 100%; gap: 0; }

.e-con.e-flex.leg-bloque {
  --width: 100%;
  gap: 0;
  padding: 0 0 38px;
  margin-bottom: 38px;
  border-bottom: 1px solid var(--leg-linea);
  /* la cabecera es fija: sin esto el ancla deja el titulo debajo del menu */
  scroll-margin-top: var(--leg-cabecera);
}
.e-con.e-flex.leg-bloque:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.elementor-widget-heading.leg-h {
  font-weight: 400;                    /* la serif la impone la hoja puente */
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 16px;
}

/* Cuerpo de texto ------------------------------------------------------- */
.leg-texto { max-width: var(--leg-medida); }
.leg-texto p,
.leg-texto li {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--leg-cuerpo);
}
.leg-texto p { margin: 0 0 14px; }
.leg-texto p:last-child { margin-bottom: 0; }

.leg-texto ul,
.leg-texto ol { margin: 0 0 16px; padding-left: 0; list-style: none; }
.leg-texto li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.leg-texto ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 10px;
  height: 1px;
  background: var(--leg-oro);
  opacity: .6;
}
.leg-texto ol { counter-reset: legn; }
.leg-texto ol > li { counter-increment: legn; }
.leg-texto ol > li::before {
  content: counter(legn) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--leg-oro);
  font-size: 13px;
}
.leg-texto strong { color: var(--ink); font-weight: 600; }

.leg-texto a {
  color: var(--leg-oro);
  text-decoration: none;
  border-bottom: 1px solid rgba(118, 113, 84, .35);
  transition: border-color .25s ease;
}
.leg-texto a:hover { border-bottom-color: var(--leg-oro); }

/* Marcador de dato pendiente de la clienta ------------------------------ */
.leg-pend {
  display: inline;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(175, 174, 144, .26);
  border: 1px dashed rgba(118, 102, 84, .55);
  color: #6C5B48;
  font-size: .92em;
}

/* Tabla de cookies ------------------------------------------------------- */
.leg-texto .leg-tabla { overflow-x: auto; margin: 0 0 16px; }
.leg-texto table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-family: var(--sans);
}
.leg-texto th,
.leg-texto td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--leg-linea);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--leg-cuerpo);
  vertical-align: top;
}
.leg-texto th {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leg-oro);
  border-bottom-color: rgba(118, 113, 84, .45);
  white-space: nowrap;
}
.leg-texto tbody tr:last-child td { border-bottom: 0; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .e-con.e-flex.leg-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .e-con.e-flex.leg-indice { position: static; }
  .leg-texto { max-width: none; }
}

@media (max-width: 767px) {
  .leg-hero .leg-entrada p { font-size: 15px; }
  .e-con.e-flex.leg-indice { padding: 22px 20px 24px; }
  .e-con.e-flex.leg-bloque { padding-bottom: 30px; margin-bottom: 30px; }
  .leg-texto p, .leg-texto li { font-size: 15px; }
  /* la tabla de cookies no cabe en un movil: se desplaza dentro de su caja */
  .leg-texto table { min-width: 480px; }
  .leg-texto th, .leg-texto td { padding: 10px 11px; font-size: 12.5px; }
}

/* Quien prefiera menos movimiento no deberia ver los reveal del hero */
@media (prefers-reduced-motion: reduce) {
  .leg-hero .reveal { opacity: 1; transform: none; transition: none; }
}

/* === /PAGINAS LEGALES =================================================== */

/* >>> menu-movil-scroll (11-ago-2026) =================================
   EL PANEL DEL MENÚ MÓVIL NO SE PODÍA DESPLAZAR y en pantallas bajas
   dejaba fuera el final: teléfono, email y el botón «Reservar Cita».

   🔑 MEDIDO (no deducido): `.mobile-menu` es `position:fixed; inset:0`
   en columna, con tres hijos — top 89px (la X) + body 593px + foot
   201px = **882px de contenido**. En una ventana de 568px (iPhone SE)
   o de 390px (cualquier móvil apaisado, donde el contenido sube a
   975px) el pie quedaba por debajo del borde, y con `overflow-y:
   visible` NO había forma de llegar: comprobado poniendo `scrollTop`
   a mano, no se movía. A 390x844 sí cabe entero, por eso no se veía.

   El cuerpo pasa a `flex: 0 0 auto` (era `1 1 0%`): con el panel ya
   desplazable interesa que cada bloque ocupe su alto natural y que
   ruede el panel entero, no que el cuerpo se comprima.

   La X se queda pegada arriba (`sticky`) para que siga alcanzable con
   el panel desplazado. Aquí `sticky` SÍ funciona pese al
   `overflow: hidden auto` global de html/body, porque el contenedor de
   desplazamiento es el propio panel.

   `overscroll-behavior: contain` evita que al llegar al final el gesto
   siga arrastrando la página de debajo.

   Sin media query a propósito: el panel solo se muestra en la cabecera
   compacta, así que fuera de ahí estas reglas no pintan nada.
   ==================================================================== */
.mobile-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu > .mobile-menu-top {
  position: sticky;
  top: 0;
  z-index: 2;
}
.mobile-menu > .mobile-menu-body {
  flex: 0 0 auto;
}
/* <<< menu-movil-scroll */

/* >>> franja-tablet (11-ago-2026) =====================================
   ENTRE 768 Y 1024px (el corte de «tablet» de Elementor) LA PORTADA SE
   IBA A UNA COLUMNA CON PROPORCIONES DE ESCRITORIO. Medido: tarjetas de
   tratamiento **cuadradas de 902x902** a 1024px (y la alta, 902x1216),
   marcos de los pilares de 482-653px, y el documento en **13.689px**
   frente a 10.156px a 1180px. A partir de 1025 ya es el diseño de
   escritorio y todo cuadra.

   Se recupera aquí la maqueta de escritorio, que es la que el diseño
   pide: tarjetas lado a lado (escalonadas) y pilares en 3 columnas.

   🔑 HAY QUE ESCRIBIR SOBRE LAS VARIABLES DE ELEMENTOR, NO SOBRE LAS
   PROPIEDADES: `flex-direction: row` en `.svp-grid` NO hace nada
   (medido), porque Elementor pone `--flex-direction: column` para
   tablet desde el editor con TRES clases
   (`.elementor-1809 .elementor-element.elementor-element-hv00068`).
   Por eso aquí se escribe `--flex-direction` con cuatro
   (`.elementor .e-con.e-flex.svp-grid`). Lo mismo con `--width`.

   🔑 Y EL TEXTO DE LA TARJETA SE SALÍA: dentro de `.svp-card-pie` hay un
   **widget espaciador de 546px** que en escritorio empuja el texto al
   fondo de la tarjeta. Con la tarjeta a media anchura ese espaciador
   fijo echaba fuera el párrafo y el «DESCUBRIR» (y `overflow:hidden`
   los recortaba: la tarjeta parecía vacía). Se apaga el espaciador y el
   pie baja con `margin-top:auto`, que hace el mismo trabajo sin medida
   fija. Verificado: texto y enlace dentro, a 44px del borde — el mismo
   aire que el relleno de la tarjeta.

   NO se tocan los altos (`--min-height` 700/566): a media anchura las
   tarjetas caben con sus proporciones de escritorio.
   ==================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* tratamientos: las dos tarjetas, lado a lado */
  .elementor .e-con.e-flex.svp-grid { --flex-direction: row; }
  .svp-grid > .e-con { --width: calc(50% - 20px); }

  /* el pie de la tarjeta, al fondo sin espaciador fijo */
  .svp-card .elementor-widget-spacer { display: none; }
  .e-con.svp-card-pie { margin-top: auto; }

  /* pilares: 3 columnas, como en escritorio */
  .e-con.hv-pilares { grid-template-columns: repeat(3, 1fr); }
}
/* <<< franja-tablet */


/* =========================================================================
   CABECERA — botón «Reservar cita» y textos de la franja superior
   11-ago-2026 (pedido por Francisco)

   Los dos colores viven en variables: para retocarlos se cambian aquí y ya.
   Para revertir: borrar de aquí hasta /CABECERA CTA.
   ========================================================================= */

:root {
  --nav-cta-fondo:       #353D2A;   /* fondo del boton Reservar cita (verde oscuro de marca) */
  --nav-cta-fondo-hover: #1B2013;   /* al pasar el raton oscurece; era el fondo anterior */
  --nav-cta-texto:       #FFFFFF;
  --nav-franja-texto:    #FFFFFF;   /* Instagram · Facebook · Contacto */
}

/* --- 1. Franja superior en blanco ---------------------------------------
   Los tres elementos son <span class="elementor-icon-list-text"> dentro de un
   widget Lista de iconos; Instagram y Facebook ni siquiera son enlaces, así
   que pintar el <a> no basta.

   El sage lo pone post-108.css con
   `.elementor-108 .elementor-element.elementor-element-0516e0e
    .elementor-icon-list-text`.
   OJO AL CONTAR LA ESPECIFICIDAD: parecen tres clases pero son CUATRO, porque
   `.elementor-element.elementor-element-0516e0e` son dos clases sobre el MISMO
   elemento. Con cuatro se empata, y en un empate gana la hoja que carga
   después, que es la de Elementor. Por eso aquí van CINCO: se encadena
   `.elementor-widget`, que vive en el mismo div que `.elementor-widget-icon-list`.
   Así se gana sin `!important`. */
.nav .elementor-widget.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-text,
.nav .elementor-widget.elementor-widget-icon-list .elementor-icon-list-item > a {
  color: var(--nav-franja-texto);
}

/* --- 2. Botón «Reservar cita» -------------------------------------------
   Acotado a la cabecera y al menú móvil A PROPÓSITO: `.btn.solid` es la clase
   de botón sólido de todo el sitio (CTAs de fichas, «Ver todos los
   tratamientos»…) y no se debe teñir entera. */
.nav-right .btn.solid,
.mobile-menu .btn.solid.mm-btn {
  background: var(--nav-cta-fondo);
  border-color: var(--nav-cta-fondo);
  color: var(--nav-cta-texto);
}
.nav-right .btn.solid > *,
.mobile-menu .btn.solid.mm-btn > * {
  color: var(--nav-cta-texto);
}

/* El ::after es la cortinilla que el tema desliza de abajo arriba al pasar el
   ratón. En `.solid` viene con un filete oro que sobre este fondo desentona:
   se le quita y se le da el verde del hover, así el relleno sigue animándose. */
.nav-right .btn.solid::after,
.mobile-menu .btn.solid.mm-btn::after {
  background: var(--nav-cta-fondo-hover);
  border-color: transparent;
}
.nav-right .btn.solid:hover,
.mobile-menu .btn.solid.mm-btn:hover {
  background: var(--nav-cta-fondo-hover);
  border-color: var(--nav-cta-fondo-hover);
  color: var(--nav-cta-texto);
}
.nav-right .btn.solid:hover > *,
.mobile-menu .btn.solid.mm-btn:hover > * {
  color: var(--nav-cta-texto);
}

/* === /CABECERA CTA ====================================================== */

/* >>> zonas-de-toque (11-ago-2026) ====================================
   Elementos con zona de toque diminuta en móvil. NO se cambia NADA a la
   vista: la zona se agranda con un `::after` transparente, así que el
   tamaño, el color y la posición del texto siguen exactamente igual.
   Medido antes/después con `elementFromPoint`.

   · puntos del carrusel de testimonios: la caja real mide **32x2 px**
     (son filetes). Zona 2 -> 34 px. Comprobado: antes un toque 10px por
     encima o por debajo NO acertaba, ahora sí.
   · enlaces de los menús del pie: 17 px de alto con 18 px de hueco entre
     ellos. Zona 17 -> 33 px, que es el máximo posible **sin pisar al
     vecino** (17 + 18 = 35).
   · lista de iconos de la barra superior (INSTAGRAM/FACEBOOK/CONTACTO):
     22 -> 42 px. Solo se crece en vertical: en horizontal van seguidos.

   Va dentro de `@media (pointer: coarse)` para no alterar las áreas de
   hover del ratón.
   ==================================================================== */
@media (pointer: coarse) {

  footer ul li > a { position: relative; }
  footer ul li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -8px; bottom: -8px;
  }

  .nav .elementor-icon-list-item > a,
  header .elementor-icon-list-item > a { position: relative; }
  .nav .elementor-icon-list-item > a::after,
  header .elementor-icon-list-item > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -10px; bottom: -10px;
  }

  .testi-dot { position: relative; }
  .testi-dot::after {
    content: "";
    position: absolute;
    left: -4px; right: -4px; top: -16px; bottom: -16px;
  }
}
/* <<< zonas-de-toque */

/* >>> marron-unificado (11-ago-2026)
   Unifica el marron oscuro de la web en #2D201B (el `libink` del kit).
   Antes convivian tres tonos casi iguales: #2D2A26 (paleta vieja),
   #35261F (respaldo intermedio) y el propio #2D201B.

   Estas reglas repiten selectores de `libertad-global.css`, que el proyecto
   marca como NO MODIFICABLE: se sobreescriben desde aqui porque extra.css se
   encola despues y, a igual especificidad, gana la ultima.
   Generado con `generar-override.py` a partir de global.css.
   ====================================================================== */

:root {
  --ink: #2D201B;
  --line-light: rgba(45, 32, 27, 0.08);
}
.nav.scrolled {
  background: rgba(45, 32, 27, 0.92);
}
.mobile-menu {
  background: rgba(45, 32, 27, 0.98);
}
.hero-bg::after {
  background: linear-gradient(180deg, rgba(45, 32, 27,0.55) 0%, rgba(45, 32, 27,0.1) 28%, rgba(45, 32, 27,0.85) 100%), linear-gradient(90deg, rgba(45, 32, 27,0.55) 0%, rgba(45, 32, 27,0) 60%);
}
.result-tag {
  background: rgba(45, 32, 27,0.78);
}
.doc-img::after {
  background: linear-gradient(180deg, transparent 55%, rgba(45, 32, 27,0.55) 100%);
}
.final-cta-bg::after {
  background: linear-gradient(180deg, rgba(45, 32, 27,0.85), rgba(45, 32, 27,0.55), rgba(45, 32, 27,0.95));
}
.nav.nav-booking {
  background: rgba(45, 32, 27, 0.92);
}
.svc-pick:hover {
  box-shadow: 0 14px 36px rgba(45, 32, 27,0.06);
}
.cal-day.past, .cal-day.disabled {
  color: rgba(45, 32, 27, 0.2);
}
.page-hero-bg::after {
  background: linear-gradient(180deg, rgba(45, 32, 27,0.65) 0%, rgba(45, 32, 27,0.35) 35%, rgba(45, 32, 27,0.95) 100%);
}
.fac-cell::after {
  background: linear-gradient(180deg, transparent 55%, rgba(45, 32, 27,0.65) 100%);
}
.res-card:hover {
  box-shadow: 0 18px 44px rgba(45, 32, 27,0.08);
}
.res-tag {
  background: rgba(45, 32, 27, 0.78);
}
.mini-map::after {
  background: linear-gradient(90deg, transparent, rgba(45, 32, 27,0.07), transparent);
}
.mini-map-grid {
  background: radial-gradient(circle at 32% 58%, rgba(184,160,137,0.12), transparent 18%), radial-gradient(circle at 70% 35%, rgba(45, 32, 27,0.05), transparent 22%);
}
.map-pin svg {
  filter: drop-shadow(0 4px 10px rgba(45, 32, 27,0.25));
}
.map-cta {
  background: rgba(45, 32, 27, 0.86);
}
.bigmap-actions a {
  background: rgba(45, 32, 27, 0.86);
}
.ideal-col.no .ico {
  background: rgba(45, 32, 27,0.05);
  border: 1px solid rgba(45, 32, 27,0.15);
  color: rgba(45, 32, 27,0.4);
}
.rel-card:hover {
  box-shadow: 0 18px 44px rgba(45, 32, 27,0.08);
}
.feat-card:hover {
  box-shadow: 0 24px 60px rgba(45, 32, 27,0.1);
}

/* <<< marron-unificado */


/* >>> reserva-avisos — 11-ago-2026 ------------------------------------------
   Aviso cuando la solicitud de cita NO se puede enviar, y marca del campo que
   falta. Hasta hoy el formulario mostraba "Solicitud recibida" pasara lo que
   pasara, así que una solicitud perdida era invisible para la clínica y para
   la paciente. Terracota de marca #8C3B2E: 7,5:1 sobre blanco y 6,9:1 sobre
   el fondo del propio aviso.                                                 */
.booking-error {
  margin: 0 0 26px;
  padding: 16px 20px;
  background: #FBF1EE;
  border-left: 2px solid #8C3B2E;
  color: #8C3B2E;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}
.field input.field-error { border-bottom-color: #8C3B2E; }
.field textarea.field-error { border-color: #8C3B2E; }

/* Envío en curso: evita el doble clic (el botón se deshabilita en el JS). */
.booking-submit.is-sending { opacity: .6; cursor: progress; }
.booking-submit[disabled] { pointer-events: none; }
/* <<< reserva-avisos ------------------------------------------------------ */


/* >>> reserva-rejilla — 11-ago-2026 -----------------------------------------
   Las tarjetas del paso 01 salían de anchos distintos y la cuarta se cortaba
   por la derecha. Dos causas, las dos anteriores a los títulos nuevos
   (con «Bienestar Integral» pasaba igual, medido a 1440, 1200 y 1024):

   1) .svc-pick es un <button> y hereda white-space:nowrap, así que el título
      no se partía nunca y cada columna pedía el ancho de la frase entera.
   2) repeat(4, 1fr) es repeat(4, minmax(auto, 1fr)): con ese mínimo
      automático, si los contenidos no caben las columnas dejan de repartirse
      a partes iguales y la rejilla desborda.

   Se corrige devolviendo el salto de línea al título y fijando el mínimo a 0.
   Hay que repetir aquí las dos consultas de medios de libertad-global.css:
   esta hoja carga después y si no, el móvil se quedaría a cuatro columnas.  */
.svc-pick-title { white-space: normal; }
.svc-pick-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .svc-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .svc-pick-grid { grid-template-columns: minmax(0, 1fr); }
}
/* <<< reserva-rejilla ----------------------------------------------------- */

/* =========================================================================
   HOVER EN BLANCO (menú y pie) + BOTONES DEL HERO EN EL VERDE DEL CTA
   11-ago-2026 (pedido por Francisco)

   Para revertir: borrar desde aquí hasta la marca de cierre del bloque.
   ========================================================================= */

:root {
  --hover-blanco: #FFFFFF;
}

/* --- 1. Hover del menú de la cabecera ------------------------------------
   `libertad-elementor.css` fija el dorado con `!important` sobre
   `.nav-links .elementor-item:hover` (2 clases) Y esa hoja se encola DESPUÉS
   que esta, así que no basta con repetir el selector: hace falta más
   especificidad (se antepone `body`) y `!important` otra vez.

   La regla original agrupa hover, focus y `.elementor-item-active`, y los tres
   pasan a blanco. Con el activo en blanco, lo que distingue la página actual
   ya no es el color sino el SUBRAYADO, que en el activo está siempre al 100 %
   mientras que en los demás sólo aparece al pasar el ratón. */
body .nav-links .elementor-item:hover,
body .nav-links .elementor-item:focus,
body .nav-links .elementor-item.elementor-item-active,
body .nav-links a:hover,
body .nav-links a.active {
  color: var(--hover-blanco) !important;
}
/* el subrayado acompaña al texto, tanto al pasar el ratón como en el activo */
body .nav-links .elementor-nav-menu--main .elementor-item:hover::after,
body .nav-links .elementor-nav-menu--main .elementor-item.elementor-item-active::after,
body .nav-links a:hover::after,
body .nav-links a.active::after {
  background-color: var(--hover-blanco) !important;
}

/* --- 2. Hover de los enlaces del pie -------------------------------------
   `libertad-global.css` los pone en dorado sin `!important`, y esta hoja se
   encola después, así que basta con repetir el selector.
   Los iconos sociales NO se tocan: tienen su propio tratamiento (relleno
   verde) unos bloques más arriba. */
.footer-col a:hover,
.footer-bottom a:hover {
  color: var(--hover-blanco);
}

/* --- 3. Botones del hero de la portada -----------------------------------
   Acotado a `.hv-hero-botones` A PROPÓSITO: las clases `solid` y `btn` son
   las de TODOS los botones del sitio (22 y 30 usos en 17 páginas), así que
   teñirlas en global repintaría la web entera.

   El color se toma de la MISMA variable que el botón «Reservar cita» de la
   cabecera, de modo que si se retoca allí, estos dos lo siguen solos.
   La hoja puente pinta estos botones con `!important` (`.elementor-widget-
   button.solid .elementor-button`, 2 clases), de ahí el `!important` aquí. */

/* «Reservar consulta»: relleno verde, como el CTA de la cabecera. */
.hv-hero-botones .elementor-widget-button.solid .elementor-button {
  background: var(--nav-cta-fondo) !important;
  border-color: var(--nav-cta-fondo) !important;
  color: var(--nav-cta-texto) !important;
}
.hv-hero-botones .elementor-widget-button.solid .elementor-button > * {
  color: var(--nav-cta-texto) !important;
}
.hv-hero-botones .elementor-widget-button.solid .elementor-button:hover {
  background: var(--nav-cta-fondo-hover) !important;
  border-color: var(--nav-cta-fondo-hover) !important;
  color: var(--nav-cta-texto) !important;
}
.hv-hero-botones .elementor-widget-button.solid .elementor-button:hover > * {
  color: var(--nav-cta-texto) !important;
}
/* el ::after es la cortinilla del tema; se le quita el filete dorado */
.hv-hero-botones .elementor-widget-button.solid .elementor-button::after {
  background: var(--nav-cta-fondo-hover) !important;
  border-color: transparent !important;
}

/* «Ver tratamientos»: es el botón de contorno, así que el verde va en el
   BORDE. Al pasar el ratón se rellena de ese mismo verde (comportamiento
   normal de un botón de contorno) en vez de dorado. */
.hv-hero-botones .elementor-widget-button.btn .elementor-button {
  border-color: var(--nav-cta-fondo) !important;
  /* El texto lo pone en dorado la hoja puente con `!important` sobre
     `.elementor-widget-button .elementor-button` (2 clases). Este selector
     tiene 4, asi que gana sin pelearse con el orden de carga.
     La flecha es un SVG con `fill:currentColor`, o sea que sigue al texto. */
  color: var(--nav-cta-texto) !important;
}
.hv-hero-botones .elementor-widget-button.btn .elementor-button > * {
  color: var(--nav-cta-texto) !important;
}
.hv-hero-botones .elementor-widget-button.btn .elementor-button::after {
  background: var(--nav-cta-fondo) !important;
}
.hv-hero-botones .elementor-widget-button.btn .elementor-button:hover,
.hv-hero-botones .elementor-widget-button.btn .elementor-button:hover > * {
  color: var(--nav-cta-texto) !important;
}

/* === /HOVER-BLANCO Y BOTONES DEL HERO =================================== */

/* === CTA-BLANCO · titulares y etiquetas de los CTAs ==================== */
/* Pedido por Francisco el 11-ago-2026: en los bloques CTA de todas las
   paginas, el titular y la etiqueta van en BLANCO.

   Lo que se hace aqui es SOLO lo que no se puede hacer desde el editor:

   1) Las 11 fichas de tratamiento tienen el CTA dentro de un widget HTML,
      o sea que no hay ningun ajuste que tocar en el panel. Su color va por
      CSS y necesita !important porque `.eyebrow` ya se pinta con !important
      en el bloque ACENTOS VERDE (1 clase); estos selectores llevan 2 y 3.

   2) La palabra en cursiva de dentro del titular. Se le dice que herede,
      no que sea blanca: asi el titular se lee de un solo color y, si
      manana se cambia el color desde Elementor, la cursiva le sigue sola.
      Sin esto manda `.elementor-heading-title em` (bloque ACENTOS-B) y el
      titular sale a dos tintas.

   En las 12 paginas cuyo CTA esta hecho con widgets nativos el color NO se
   toca desde aqui: esta puesto en los ajustes del widget (color global
   «blanco» 2ae5322 del kit 6), para que se siga pudiendo cambiar desde el
   panel. Ver el script blanco-ctas.php.

   El filete corto de la etiqueta se deja en sage a proposito: la guia de
   marca reserva ese tono para filetes e iconos.

   Para revertir: borrar desde esta cabecera hasta la marca de cierre del
   bloque, unas lineas mas abajo. */

:root { --cta-blanco: #FFFFFF; }

/* 1 · Fichas de tratamiento (CTA en widget HTML, no editable) */
.section.dark.tf-cta .eyebrow,
.section.dark.tf-cta .h-section {
  color: var(--cta-blanco) !important;
}

/* 2 · La cursiva del titular sigue al titular */
.final-cta .elementor-heading-title em,
.final-cta .elementor-heading-title .italic,
.final-cta .elementor-heading-title .accent,
.rgv-cta .elementor-heading-title em,
.rgv-cta .elementor-heading-title .italic,
.rgv-cta .elementor-heading-title .accent {
  color: inherit !important;
}
/* === FIN-CTA-BLANCO === */

/* === BOTON-CREMA · «Solicitar consulta» de la home ===================== */
/* Pedido por Francisco el 11-ago-2026: en la seccion de tratamientos de la
   home, ese boton pasa de sage a CREMA.

   Va por CSS y no por el editor porque los selectores de color de Elementor
   NO funcionan en ningun boton de este sitio: `libertad-elementor.css` fija
   fondo, color y borde con !important sobre `.elementor-widget-button
   .elementor-button`, y la regla por widget que genera Elementor no lleva
   !important, asi que siempre pierde. El tema ofrece a cambio tres clases
   (`solid`, `btn`, `cream`), pero ninguna da un relleno crema: `cream` es
   contorno tinta.

   Acotado a `.svp-cierre`, que es el contenedor de cierre de la seccion de
   tratamientos. NO se puede tocar `.solid` en global: es la clase de todos
   los botones solidos del sitio (22 usos en 17 paginas).

   El color se lee de `--cream`, que el bloque PALETA NUEVA enlaza al color
   global «Crema» del kit ⇒ si se cambia el crema en el kit, el boton le
   sigue solo. Para separarlos, dar un valor propio a --btn-crema-fondo.

   El hover lo hereda del tema (el relleno se vacia y queda el contorno);
   aqui solo se recolorea a crema, porque si no se quedaba en oro. */

body {
  --btn-crema-fondo: var(--cream);
  --btn-crema-texto: var(--ink);
}

.svp-cierre .elementor-widget-button.solid .elementor-button {
  background: var(--btn-crema-fondo) !important;
  border-color: var(--btn-crema-fondo) !important;
  color: var(--btn-crema-texto) !important;
}
.svp-cierre .elementor-widget-button.solid .elementor-button > * {
  color: var(--btn-crema-texto) !important;
}

/* hover: contorno crema en vez de oro */
.svp-cierre .elementor-widget-button.solid .elementor-button::after {
  border-color: var(--btn-crema-fondo);
}
.svp-cierre .elementor-widget-button.solid .elementor-button:hover {
  background: transparent !important;
  color: var(--btn-crema-fondo) !important;
}
.svp-cierre .elementor-widget-button.solid .elementor-button:hover > * {
  color: var(--btn-crema-fondo) !important;
}
/* === FIN-BOTON-CREMA === */

/* >>> testi-fondo (11-ago-2026) ========================================
   Fondo de la sección de testimonios de la PORTADA.

   El color lo pone `.testi{ background: var(--ink) }` en `libertad-global.css`,
   que es la hoja de referencia y no se toca. Se sobreescribe aquí (extra.css
   se encola después) acotándolo con `.hv-testi`, la clase propia del rediseño
   de la portada: así, si algún día se recupera la sección de testimonios de la
   home antigua (la 33, hoy en borrador), no se ve arrastrada.
   ====================================================================== */
:root { --testi-fondo: #483E25; }

.testi.hv-testi { background: var(--testi-fondo); }

/* <<< testi-fondo */

/* >>> testi-blanco (11-ago-2026) =======================================
   Todo lo que iba en el verde claro de marca (#AFAE90 / #9FA194) dentro de la
   sección de testimonios de la portada pasa a blanco: etiqueta, estrellas,
   nombre del tratamiento, contador 01/03, punto activo del paginador y los dos
   botones de flecha (texto, borde y el SVG de dentro).

   Acotado a `.testi.hv-testi` para no tocar esos mismos componentes en el
   resto del sitio. El color va en una variable por si hay que matizarlo.
   ====================================================================== */
:root { --testi-detalle: #FFFFFF; }

.testi.hv-testi .hv-etiqueta,
.testi.hv-testi .testi-stars,
.testi.hv-testi .testi-stars span,
.testi.hv-testi .testi-treat,
.testi.hv-testi .testi-index,
.testi.hv-testi .testi-arrow,
.testi.hv-testi .testi-arrow .btn-arrow,
.testi.hv-testi .testi-arrow .btn-arrow path {
  color: var(--testi-detalle);
}

/* el aro de las flechas */
.testi.hv-testi .testi-arrow { border-color: var(--testi-detalle); }

/* la punta de la flecha es un SVG con trazo propio, no basta con `color` */
.testi.hv-testi .testi-arrow .btn-arrow path,
.testi.hv-testi .testi-arrow .btn-arrow line,
.testi.hv-testi .testi-arrow .btn-arrow polyline { stroke: var(--testi-detalle); }

/* el punto activo del paginador lo pinta `.testi-dot.active` con !important
   unos bloques más arriba, de ahí que aquí haga falta también */
.testi.hv-testi .testi-dot.active { background: var(--testi-detalle) !important; }

/* El contador «01 / 03» trae el color escrito EN LÍNEA en el HTML del widget
   (`style="…color:var(--gold)"`), y un estilo en línea gana a cualquier hoja
   por especificidad que tenga. Es el único de este bloque que necesita
   `!important`. Si algún día se limpia ese `style=` del marcado, esta regla
   puede volver al grupo de arriba. */
.testi.hv-testi .testi-index { color: var(--testi-detalle) !important; }

/* <<< testi-blanco */

/* === FAQ-ICONO-CREMA · acordeon de «Lifting sin cirugia» (home) ======== */
/* Pedido por Francisco el 11-ago-2026: en la seccion «Lifting sin cirugia»
   de la home, el circulo del icono que CIERRA la pregunta abierta deja de
   ser sage y pasa al crema del fondo de la seccion.

   Quien lo pintaba: `libertad-global.css` ->
     .faq-item.open .plus { transform:rotate(180deg); background:var(--gold); color:var(--ink) }
   (3 clases). Aqui se usa `.hv-ulth .faq-item.open .plus` = 4 clases, y
   ademas extra.css se encola despues, asi que gana sin `!important`.

   SOLO se toca el fondo. El `color:var(--ink)` de esa misma regla se deja
   como esta: las dos barras del signo se pintan con `currentColor`, o sea
   que el «−» sigue en tinta sobre el crema (12,1:1). Si se tocara el color
   el signo desapareceria.

   El aro de 1px sigue en sage, igual que en las preguntas cerradas, que es
   lo que mantiene el circulo reconocible una vez quitado el relleno.

   Acotado a `.hv-ulth` A PROPOSITO: este acordeon (`lib_faq`) existe tambien
   en /tratamiento-acido-hialuronico/ (6 preguntas), que NO se ha pedido
   cambiar. Comprobado que en el resto de paginas publicadas no aparece.

   El crema se lee de `--cream`, enlazada al color global «Crema» del kit,
   asi que es literalmente el mismo valor que el fondo de la seccion. */

body {
  --faq-plus-fondo: var(--cream);
}

.hv-ulth .faq-item.open .plus {
  background: var(--faq-plus-fondo);
}
/* === FIN-FAQ-ICONO-CREMA === */

/* >>> testi-blanco · hover de las flechas (11-ago-2026) ================
   Al pasar el ratón, el aro se rellenaba del verde claro. Ahora se rellena de
   blanco y la punta de la flecha se invierte al color del fondo de la sección:
   si se dejara blanca quedaría blanco sobre blanco y desaparecería.
   ====================================================================== */
.testi.hv-testi .testi-arrow:hover {
  background: var(--testi-detalle);
  border-color: var(--testi-detalle);
  color: var(--testi-fondo);
}
.testi.hv-testi .testi-arrow:hover .btn-arrow,
.testi.hv-testi .testi-arrow:hover .btn-arrow path {
  color: var(--testi-fondo);
  stroke: var(--testi-fondo);
}

/* <<< testi-blanco · hover */
/* === CTA-SIN-VERDE · el resto del CTA tambien en blanco ================ */
/* Pedido por Francisco el 11-ago-2026: en TODOS los CTA de TODAS las
   paginas, lo que quedaba en el verde claro de marca pasa a blanco, para
   que el bloque entero sea blanco. Completa al bloque CTA-BLANCO, que ya
   habia dejado en blanco el titular y la etiqueta.

   Inventariado en vivo recorriendo los 23 CTA y buscando `#AFAE90` (sage) y
   `#9FA194` (apagado) en color, fondo, borde, relleno/trazo de SVG y en los
   dos pseudo-elementos. Lo que quedaba verde era:
     · el filete corto de la etiqueta (`.eyebrow::before`)
     · los dos botones: relleno del solido, texto y borde del de contorno,
       la cortinilla `::after` del hover y la flecha SVG
     · SOLO en las 11 fichas, el parrafo

   🔑 El parrafo de las fichas salia verde y el de los demas CTA no: el tema
   pinta `.body-lg{color:var(--muted-2)}` y solo lo aclara con
   `.on-dark .body-lg`. La seccion de las fichas es `section dark tf-cta`,
   SIN `on-dark`, asi que no le entraba.

   🔑 La flecha de los botones NO hay que tocarla: es un SVG con
   `fill/stroke: currentColor`, o sea que sigue al color del texto.

   El color se lee de `--cta-blanco`, declarada en el bloque CTA-BLANCO;
   el respaldo `#FFFFFF` esta puesto por si aquel bloque se retirase.

   Especificidad: los botones los clava el tema con `!important` sobre
   `.elementor-widget-button.solid .elementor-button` (3 clases) y sobre
   `.btn.solid` (2). Aqui se antepone la clase del CTA para subir a 4 y 3
   respectivamente, que es lo minimo para ganar. Acotado a `.final-cta`,
   `.rgv-cta` y `.tf-cta`: `solid` y `btn` son las clases de TODOS los
   botones del sitio y tenirlas en global lo repintaria entero. */

/* --- 1 · el filete de la etiqueta --- */
.final-cta .eyebrow::before,
.rgv-cta .eyebrow::before,
.tf-cta .eyebrow::before {
  background: var(--cta-blanco, #FFFFFF) !important;
}
.final-cta .eyebrow,
.rgv-cta .eyebrow,
.tf-cta .eyebrow {
  color: var(--cta-blanco, #FFFFFF) !important;
}

/* --- 2 · botones de Elementor (CTA de final-cta y rgv-cta) --- */
.final-cta .elementor-widget-button .elementor-button,
.rgv-cta .elementor-widget-button .elementor-button {
  border-color: var(--cta-blanco, #FFFFFF) !important;
  color: var(--cta-blanco, #FFFFFF) !important;
}
.final-cta .elementor-widget-button .elementor-button::after,
.rgv-cta .elementor-widget-button .elementor-button::after {
  background: var(--cta-blanco, #FFFFFF);
}
/* el solido: relleno blanco y texto tinta */
.final-cta .elementor-widget-button.solid .elementor-button,
.rgv-cta .elementor-widget-button.solid .elementor-button {
  background: var(--cta-blanco, #FFFFFF) !important;
  border-color: var(--cta-blanco, #FFFFFF) !important;
  color: var(--ink) !important;
}
.final-cta .elementor-widget-button.solid .elementor-button::after,
.rgv-cta .elementor-widget-button.solid .elementor-button::after {
  background: transparent;
  border-color: var(--cta-blanco, #FFFFFF);
}
/* 🔑 El `background: transparent` del hover del tema NO se hereda solo: su
   regla `.elementor-widget-button.solid .elementor-button:hover` empata en
   especificidad con la de reposo de aqui arriba (4 a 4, porque `:hover`
   cuenta como clase) y, a igual especificidad, gana la hoja que carga
   despues, que es esta. Sin repetirlo el relleno se quedaba BLANCO en hover
   y con el texto tambien en blanco: boton ilegible. */
.final-cta .elementor-widget-button.solid .elementor-button:hover,
.rgv-cta .elementor-widget-button.solid .elementor-button:hover {
  background: transparent !important;
  color: var(--cta-blanco, #FFFFFF) !important;
}
.final-cta .elementor-widget-button.solid .elementor-button:hover > *,
.rgv-cta .elementor-widget-button.solid .elementor-button:hover > * {
  color: var(--cta-blanco, #FFFFFF) !important;
}

/* el div envoltorio del widget tambien lleva la clase `btn` y por tanto el
   verde en `color`. No se ve (el enlace de dentro ya tiene el suyo), pero se
   pone en blanco para que nada pueda heredarlo. */
.final-cta .elementor-widget-button.btn,
.rgv-cta .elementor-widget-button.btn {
  color: var(--cta-blanco, #FFFFFF);
}

/* --- 3 · botones planos de las fichas (marcado HTML, no widget) --- */
.tf-cta .btn {
  border-color: var(--cta-blanco, #FFFFFF);
  color: var(--cta-blanco, #FFFFFF);
}
.tf-cta .btn::after { background: var(--cta-blanco, #FFFFFF); }
.tf-cta .btn.solid {
  background: var(--cta-blanco, #FFFFFF);
  border-color: var(--cta-blanco, #FFFFFF);
  color: var(--ink);
}
.tf-cta .btn.solid::after {
  background: transparent;
  border-color: var(--cta-blanco, #FFFFFF);
}
.tf-cta .btn.solid:hover {
  background: transparent;   /* mismo motivo que arriba */
  color: var(--cta-blanco, #FFFFFF);
}
.tf-cta .btn.solid:hover > * { color: var(--cta-blanco, #FFFFFF); }

/* --- 4 · el parrafo de las fichas --- */
.tf-cta .body-lg { color: var(--cta-blanco, #FFFFFF); }
/* === FIN-CTA-SIN-VERDE === */
/* === HEADER-MOVIL · patron de cellora.gu.clinic adaptado ================ */
/* Pedido por Francisco el 11-ago-2026: la cabecera movil como la de
   cellora.gu.clinic/us, adaptada a Clinica Libertad.

   MEDIDO EN CELLORA (320-834px, identico en todo ese tramo):
     · barra de 70px, transparente, con un filete de 1px blanco al 50%
     · logotipo a la IZQUIERDA en x=20, 125x20
     · a la derecha, iconos de 20x20 con 16px de hueco y 20px de margen
     · el menu es un cajon a ancho completo que entra DESDE LA DERECHA
       (transform .5s cubic-bezier(.4,0,.2,1)) sobre rgb(45,32,27) — que
       resulta ser exactamente el tinta #2D201B de esta marca
     · la barra SIGUE VISIBLE encima del cajon y la hamburguesa se vuelve X
     · items alineados a la izquierda, en versalitas, separados por filetes
       de blanco al 20%, con chevron los que despliegan
     · al pie, dos botones apilados a ancho completo
   A 1024 cellora ya sirve su cabecera de escritorio; aqui la cabecera
   compacta empieza justo en 1024, asi que el bloque va a (max-width:1024px)
   y el escritorio no se toca.

   QUE SE ADAPTA Y POR QUE:
     · Tipografia: cellora usa su sans en negrita. Aqui se usa DM Sans 600 en
       versalitas con tracking, que es el lenguaje que ya tiene el menu de
       escritorio de este sitio, en vez del Cormorant de 36px centrado que
       tenia el panel (que es de otra familia visual).
     · Los iconos de la derecha son TELEFONO + hamburguesa. Cellora pone
       idioma y WhatsApp; aqui no hay idiomas y el WhatsApp ya lo cubre el
       boton flotante de Joinchat.
     · Zona de toque de 44px en los dos iconos (cellora usa 20px, que se
       queda corto; el 11-ago ya se corrigieron las zonas de toque del sitio).
     · Los botones del pie: el primero conserva el verde #353D2A que se
       eligio el 11-ago para el CTA de la cabecera; el segundo va de
       contorno. Cellora los pone los dos en blanco.
     · La franja de INSTAGRAM/FACEBOOK/CONTACTO se oculta en movil (cellora
       no tiene nada parecido y son 42px). Instagram y Facebook NO eran
       enlaces —y los del pie apuntan a `libertadmed.es/#`—, asi que lo unico
       que se pierde es Contacto, que pasa al pie del panel.

   Para revertir: borrar desde esta cabecera hasta la marca de cierre del
   bloque. El marcado del panel se restaura con el postmeta
   `_elementor_data_bakmenucellora110826` de la plantilla 108. */

@media (max-width: 1024px) {

  /* ---------- 1 · la barra ---------- */

  /* fuera la franja de redes: cellora tiene una sola fila */
  .nav > .elementor-element-a752d43 { display: none !important; }

  .nav {
    border-bottom: 1px solid var(--hm-filete, rgba(255, 253, 251, .45));
    /* el .nav trae relleno inferior propio que aqui sobra: la barra debe
       medir exactamente el alto declarado mas el filete. Hay que apagar las
       DOS formas —la variable que consume `.e-con` y la propiedad logica—,
       porque Elementor escribe `--padding-block-end` y el `padding-bottom`
       fisico no siempre gana a la version logica que aplica su hoja. */
    --padding-block-end: 0px;
  }
  /* 🔑 Los 6px de relleno inferior los clava
     `body .elementor-element.e-con.nav{padding-bottom:6px!important}` (body +
     3 clases, unas 130 lineas mas arriba de este mismo fichero). Con dos
     reglas `!important` gana la de mas especificidad, asi que hay que repetir
     su MISMA forma; al ir este bloque despues, gana por orden. */
  body .elementor-element.e-con.nav,
  body .elementor-element.e-con.nav.scrolled {
    padding-bottom: 0 !important;
  }

  /* 🔑 VELO DE LEGIBILIDAD — esto NO lo tiene cellora, y hace falta aqui.
     Al quitar la franja oscura de 42px el logotipo sube a la zona alta de la
     pagina, y no todos los heroes de este sitio son oscuros: en /filosofia/
     el primer tramo es crema #F0EADE y el contraste medido caia a 2,39:1 en
     el logo y 1,69:1 en los iconos. Un degradado corto de tinta que se
     desvanece mantiene la barra flotante y transparente, pero garantiza que
     se lea sobre cualquier fondo.
     Comprobado antes de usarlo que los dos pseudo-elementos del `.nav`
     estaban libres (`content: none`), que en Elementor no siempre es asi.
     Intensidad en `--hm-velo`. */
  .nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--hm-alto, 70px) + 30px);
    background: linear-gradient(180deg,
      rgba(45, 32, 27, var(--hm-velo, .68)) 0%,
      rgba(45, 32, 27, calc(var(--hm-velo, .68) * .88)) 62%,
      rgba(45, 32, 27, 0) 100%);
    pointer-events: none;
    z-index: -1;
    transition: opacity .4s ease;
  }
  /* con el menu abierto detras ya hay tinta: el velo sobra */
  body.menu-open .nav::before { opacity: 0; }

  .nav .nav-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: var(--hm-alto, 70px) !important;
    min-height: var(--hm-alto, 70px) !important;
    /* 20px a la izquierda (donde empieza el logo, como en cellora) y 8 a la
       derecha: con una zona de toque de 44px, el icono queda a 30px del borde,
       que es justo donde lo pone cellora con sus iconos de 20px */
    padding: 0 8px 0 20px !important;
    gap: 0 !important;
  }

  /* logotipo a la izquierda; el resto se va al otro extremo */
  /* el widget del logo es un bloque y la imagen se le quedaba pegada arriba
     (a 768 incluso asomaba por encima de la barra): pasa a flex centrado */
  .nav .nav-inner .brand-logo {
    order: 1;
    display: flex !important;
    align-items: center;
    height: auto !important;
    width: auto !important;
    margin: 0 auto 0 0 !important;
  }
  .nav .nav-inner .brand-logo img {
    width: var(--hm-logo, 132px) !important;
    height: auto !important;
    max-height: 40px;
    object-fit: contain;
  }

  /* grupo de iconos de la derecha.
     🔑 El ENVOLTORIO del widget (`.nav-right-wrap`) esta en display:none en
     movil —es lo que ocultaba el telefono— y hay que reabrirlo; el boton de
     dentro se sigue ocultando aparte. */
  .nav .nav-inner .nav-right-wrap {
    order: 2;
    display: block !important;
    width: auto !important;
  }
  .nav .nav-inner .nav-right {
    order: 2;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  /* el CTA no va en la barra (cellora tampoco lo lleva): vive al pie del panel */
  .nav .nav-inner .nav-right .btn.solid { display: none !important; }

  /* el telefono deja de ser texto y pasa a ser un icono */
  .nav .nav-inner .nav-phone {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    color: var(--cream);
  }
  .nav .nav-inner .nav-phone::before {
    content: "";
    width: 21px;
    height: 21px;
    background: currentColor;
    -webkit-mask: var(--hm-icono-tel) center / contain no-repeat;
    mask: var(--hm-icono-tel) center / contain no-repeat;
  }

  .nav .nav-burger {
    order: 3;
    /* `body .nav .elementor-element-606685b{padding-right:20px!important}`
       (3 clases, mas especifica que la de aqui arriba) manda en el relleno
       derecho. En vez de pelearse con ella, el boton se saca 12px: asi el
       icono queda a 30px del borde, que es la medida de cellora, sin perder
       la zona de toque de 44px. */
    margin-right: -12px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--cream);
  }
  .nav .nav-burger svg { width: 22px; height: 22px; }

  /* ---------- 2 · la hamburguesa se vuelve X ---------- */
  /* Las tres lineas del SVG estan en y=7, 13 y 19 dentro de un viewBox de
     26. Cada una gira sobre SU PROPIO centro y luego se desplaza al medio;
     por eso el origen se declara linea a linea. */
  .nav-burger svg line {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .2s;
    transform-box: view-box;
  }
  .nav-burger svg line:nth-of-type(1) { transform-origin: 13px 7px; }
  .nav-burger svg line:nth-of-type(2) { transform-origin: 13px 13px; }
  .nav-burger svg line:nth-of-type(3) { transform-origin: 13px 19px; }
  body.menu-open .nav-burger svg line:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .nav-burger svg line:nth-of-type(2) { opacity: 0; }
  body.menu-open .nav-burger svg line:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }

  /* variante del tema dibujada con span (por si se renderiza esa) */
  .nav-burger span, .nav-burger span::before, .nav-burger span::after { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s; }
  body.menu-open .nav-burger span { background: transparent !important; }
  body.menu-open .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
  body.menu-open .nav-burger span::after { transform: translateY(-6px) rotate(-45deg); }

  /* la barra manda sobre el cajon, y sin cristal mientras el menu esta
     abierto: debajo solo hay tinta y el velo la ensuciaria */
  body.menu-open .nav {
    z-index: 300 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* el WhatsApp flotante estorba encima del menu */
  body.menu-open .joinchat { opacity: 0 !important; pointer-events: none !important; }

  /* ---------- 3 · el cajon ---------- */
  .mobile-menu.mmc {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    background: var(--ink, #2D201B);
    opacity: 1 !important;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu.mmc.open {
    visibility: visible;
    transform: translateX(0);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }

  .mmc-envoltorio {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(var(--hm-alto, 70px) + 10px) 20px 0;
  }

  /* ---------- 4 · los items ---------- */
  .mmc-nav { display: flex; flex-direction: column; }

  .mobile-menu.mmc .mmc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    margin: 0;
    border-bottom: 1px solid var(--hm-filete-item, rgba(255, 255, 255, .2));
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    transition: color .3s;
  }
  .mobile-menu.mmc .mmc-nav > .mmc-item:last-child { border-bottom: 0; }
  .mobile-menu.mmc .mmc-item:hover,
  .mobile-menu.mmc .mmc-item:focus-visible { color: #fff; }

  /* el desplegable: el filete lo lleva el bloque entero, no la fila, para
     que al abrirse quede por debajo del contenido (como en cellora) */
  .mmc-grupo { border-bottom: 1px solid var(--hm-filete-item, rgba(255, 255, 255, .2)); }
  .mobile-menu.mmc .mmc-grupo > .mmc-sumario { border-bottom: 0; cursor: pointer; list-style: none; }
  .mmc-sumario::-webkit-details-marker { display: none; }
  .mmc-sumario::marker { content: ""; }
  .mmc-chevron {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
  }
  .mmc-grupo[open] > .mmc-sumario .mmc-chevron { transform: rotate(180deg); }

  .mmc-sub {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 2px 0 24px 2px;
    animation: mmcAparece .45s cubic-bezier(.2, .7, .2, 1) both;
  }
  @keyframes mmcAparece {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }
  .mmc-sub-head {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted, #9FA194);
    margin-top: 10px;
  }
  .mmc-sub > .mmc-sub-head:first-child { margin-top: 0; }
  .mobile-menu.mmc .mmc-sub a {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .02em;
    color: rgba(255, 253, 251, .75);
    text-decoration: none;
    transition: color .3s;
  }
  .mobile-menu.mmc .mmc-sub a:hover { color: #fff; }

  /* ---------- 5 · el pie ---------- */
  .mmc-pie {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 0 max(36px, env(safe-area-inset-bottom));
  }
  .mobile-menu.mmc .mmc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s, color .3s, border-color .3s;
  }
  .mobile-menu.mmc .mmc-btn-1 {
    background: var(--nav-cta-fondo, #353D2A);
    color: var(--nav-cta-texto, #fff);
    border: 1px solid var(--nav-cta-fondo, #353D2A);
  }
  .mobile-menu.mmc .mmc-btn-2 {
    background: transparent;
    border: 1px solid rgba(255, 253, 251, .55);
    color: var(--cream);
  }
  .mmc-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 14px;
  }
  .mobile-menu.mmc .mmc-enlaces a {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 253, 251, .55);
    text-decoration: none;
  }
  .mobile-menu.mmc .mmc-enlaces a:hover { color: var(--cream); }

  @media (prefers-reduced-motion: reduce) {
    .mobile-menu.mmc, .mmc-chevron, .nav-burger svg line { transition-duration: .01ms !important; }
    .mmc-sub { animation: none; }
  }
}

/* el icono de telefono, en una variable para poder cambiarlo de un sitio */
:root {
  --hm-icono-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
/* === FIN-HEADER-MOVIL === */

/* === RESERVAR-COLORES · /reservar/ ===================================== */
/* Pedido por Francisco el 12-ago-2026 sobre la pagina de reservas (post 39):
   titular de un solo color, franja horaria seleccionada y boton de confirmar
   en #353D2A con texto blanco, y «¿Prefieres llamar?» en blanco.

   Todas estas clases existen SOLO en /reservar/ (comprobado en 9 paginas),
   asi que no hace falta acotar por page-id.

   Va por CSS porque el formulario lo pinta el widget propio `lib_booking`
   (`inc/elementor-widget-classes.php`): su marcado no son widgets de
   Elementor y no hay ningun control de color que tocar en el panel.

   🔑 El verde se lee de `--nav-cta-fondo`, la misma variable del boton
   «Reservar cita» de la cabecera (que ya vale #353D2A desde el 11-ago), y el
   hover de `--nav-cta-fondo-hover`. Asi los tres se retocan desde un sitio.

   Los iconos de la banda inferior NO se tocan: ya estaban en blanco, puestos
   con el color global «blanco» (2ae5322) en los ajustes de cada widget. El
   sage que se ve en su `color` heredado (`libertad-elementor.css:541`) es
   inerte, porque Elementor pinta el `fill` del SVG con 4 clases y su hoja
   carga despues.

   Para revertir: borrar desde esta cabecera hasta la marca de cierre. */

/* 1 · el titular, de un solo color.
   `libertad-global.css:1617` pone `.booking-hero h1 em{color:var(--gold)}`.
   Se le dice que HEREDE en vez de fijarle un color: asi el titular entero es
   del color del h1 y, si algun dia se cambia, la cursiva le sigue. */
.booking-hero h1 em { color: inherit; }

/* 2 · la franja horaria seleccionada (paso 03).
   🔑 La pinta `assets/libertad-elementor.css:588` con
   `.time-pill.active{background-color:var(--gold)!important}` (2 clases) y
   esa hoja carga DESPUES que esta, asi que hace falta subir a 3 clases
   anteponiendo `.booking-form` y repetir el `!important`. Se incluyen
   `:hover` y `:focus` porque su regla tambien los cubre. */
.booking-form .time-pill.active,
.booking-form .time-pill.active:hover,
.booking-form .time-pill.active:focus {
  background-color: var(--nav-cta-fondo, #353D2A) !important;
  border-color: var(--nav-cta-fondo, #353D2A) !important;
  color: #fff !important;
}
/* la linea pequena de dentro (horario) tambien iba en sage */
.booking-form .time-pill.active .time-meta { color: rgba(255, 255, 255, .72) !important; }

/* 3 · el boton de confirmar. Mismo caso: `libertad-elementor.css:590` lo
   clava con `!important` sobre 1 clase; aqui van 2. */
.booking-submit-wrap .booking-submit,
.booking-submit-wrap .booking-submit:focus {
  background-color: var(--nav-cta-fondo, #353D2A) !important;
  border-color: var(--nav-cta-fondo, #353D2A) !important;
  color: #fff !important;
}
/* el hover hay que redeclararlo o se queda con el de origen (tinta + oro) */
.booking-submit-wrap .booking-submit:hover {
  background-color: var(--nav-cta-fondo-hover, #1B2013) !important;
  border-color: var(--nav-cta-fondo-hover, #1B2013) !important;
  color: #fff !important;
}
/* la flecha es un SVG con `currentColor`, o sea que sigue al texto sola */

/* 4 · «¿Prefieres llamar?» de la banda inferior */
.trust-bar .trust-phone span { color: #fff; }
/* === FIN-RESERVAR-COLORES === */

/* === CONTACTO-COLORES · /contacto/ ===================================== */
/* Pedido por Francisco el 12-ago-2026: iconos y rotulos de Direccion /
   Telefono / Email en negro, boton del formulario en #353D2A con texto
   blanco, y bajo el mapa los iconos en blanco.

   El color del TITULAR de «Como llegar» no va aqui: esta puesto en los
   ajustes del widget (color global) y se cambia ahi para que se siga
   pudiendo editar desde el panel. Ver patch-contacto-titulo.php.

   🔑 Casi todo lo pinta `assets/libertad-elementor.css`, que se encola
   DESPUES de esta hoja y ademas usa `!important`: con dos `!important` gana
   la de mas especificidad, asi que cada regla de aqui lleva una clase mas
   que la suya. Las suyas son:
     · `.ci-icon .elementor-icon i, .ci-icon .elementor-icon svg` (3 clases)
     · `.ci-label` (1 clase, sin !important, pero gana por orden)
     · `.lib-contact-form .elementor-button` (2 clases)

   📌 El color de estos iconos NO era editable desde el panel ni antes: la
   regla del tema lleva `!important` y se come el ajuste del widget de icono.

   Para revertir: borrar desde esta cabecera hasta la marca de cierre. */

/* 1 · iconos y rotulos de los datos de contacto */
.contact-list .ci-icon .elementor-icon,
.contact-list .ci-icon .elementor-icon i,
.contact-list .ci-icon .elementor-icon svg {
  color: var(--ink, #2D201B) !important;
  fill: var(--ink, #2D201B) !important;
}
.contact-list .ci-label { color: var(--ink, #2D201B); }

/* 2 · boton del formulario.
   El hover hay que redeclararlo: el del tema lo dejaba en tinta con texto
   crema y, sin tocarlo, el boton cambiaba de familia al pasar el raton. */
.lib-contact-form .elementor-form .elementor-button {
  background: var(--nav-cta-fondo, #353D2A) !important;
  color: #fff !important;
}
.lib-contact-form .elementor-form .elementor-button:hover,
.lib-contact-form .elementor-form .elementor-button:focus {
  background: var(--nav-cta-fondo-hover, #1B2013) !important;
  color: #fff !important;
}

/* 3 · «En el corazon del barrio Salamanca»: la cursiva hereda, para que el
   titular entero sea de un color. Sin esto manda
   `.elementor-heading-title em{color:var(--accent)!important}` (bloque
   ACENTOS-B, 1 clase) y el titular sale a dos tintas. */
.bigmap-head .elementor-heading-title em,
.bigmap-head .elementor-heading-title .accent,
.bigmap-head .elementor-heading-title .italic { color: inherit !important; }

/* 4 · los tres iconos bajo el mapa.
   Los SVG llevan `stroke="currentColor"`, asi que basta con el `color`. */
.bigmap-meta svg { color: #fff; }
/* === FIN-CONTACTO-COLORES === */