/*
Theme Name: Herédalo
Theme URI: https://heredalo.co
Author: Herédalo.co
Description: Tema de bloques para Herédalo.co. El encabezado, la portada y el pie son partes de plantilla hechas con bloques nativos y editables desde Apariencia → Editor. Las cuatro piezas interactivas (logo animado, cotizador, seguimiento y celular) se insertan con un shortcode.
Version: 7.1.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heredalo
Tags: full-site-editing, block-patterns, custom-colors, one-column
*/


/* ============================================================
   1 · Base
   ============================================================ */

/* El sello de verificado, en una variable para usarlo en el cuadro
   comparativo y en la escena sin repetir el trazado. */
:root { --hdl-verificado: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 22.050 12.000 C 22.050 12.439 21.519 12.857 20.923 13.175 C 20.327 13.492 19.769 13.723 19.679 14.058 C 19.589 14.393 19.957 14.871 20.315 15.444 C 20.673 16.017 20.923 16.645 20.704 17.025 C 20.484 17.405 19.815 17.502 19.140 17.479 C 18.465 17.456 17.867 17.376 17.621 17.621 C 17.376 17.867 17.456 18.465 17.479 19.140 C 17.502 19.815 17.405 20.484 17.025 20.704 C 16.645 20.923 16.017 20.673 15.444 20.315 C 14.871 19.957 14.393 19.589 14.058 19.679 C 13.723 19.769 13.492 20.327 13.175 20.923 C 12.857 21.519 12.439 22.050 12.000 22.050 C 11.561 22.050 11.143 21.519 10.825 20.923 C 10.508 20.327 10.277 19.769 9.942 19.679 C 9.607 19.589 9.129 19.957 8.556 20.315 C 7.983 20.673 7.355 20.923 6.975 20.704 C 6.595 20.484 6.498 19.815 6.521 19.140 C 6.544 18.465 6.624 17.867 6.379 17.621 C 6.133 17.376 5.535 17.456 4.860 17.479 C 4.185 17.502 3.516 17.405 3.296 17.025 C 3.077 16.645 3.327 16.017 3.685 15.444 C 4.043 14.871 4.411 14.393 4.321 14.058 C 4.231 13.723 3.673 13.492 3.077 13.175 C 2.481 12.857 1.950 12.439 1.950 12.000 C 1.950 11.561 2.481 11.143 3.077 10.825 C 3.673 10.508 4.231 10.277 4.321 9.942 C 4.411 9.607 4.043 9.129 3.685 8.556 C 3.327 7.983 3.077 7.355 3.296 6.975 C 3.516 6.595 4.185 6.498 4.860 6.521 C 5.535 6.544 6.133 6.624 6.379 6.379 C 6.624 6.133 6.544 5.535 6.521 4.860 C 6.498 4.185 6.595 3.516 6.975 3.296 C 7.355 3.077 7.983 3.327 8.556 3.685 C 9.129 4.043 9.607 4.411 9.942 4.321 C 10.277 4.231 10.508 3.673 10.825 3.077 C 11.143 2.481 11.561 1.950 12.000 1.950 C 12.439 1.950 12.857 2.481 13.175 3.077 C 13.492 3.673 13.723 4.231 14.058 4.321 C 14.393 4.411 14.871 4.043 15.444 3.685 C 16.017 3.327 16.645 3.077 17.025 3.296 C 17.405 3.516 17.502 4.185 17.479 4.860 C 17.456 5.535 17.376 6.133 17.621 6.379 C 17.867 6.624 18.465 6.544 19.140 6.521 C 19.815 6.498 20.484 6.595 20.704 6.975 C 20.923 7.355 20.673 7.983 20.315 8.556 C 19.957 9.129 19.589 9.607 19.679 9.942 C 19.769 10.277 20.327 10.508 20.923 10.825 C 21.519 11.143 22.050 11.561 22.050 12.000 Z" fill="%232FD6C3"/><path d="M7.4 12.2 10.6 15.4 16.7 9" fill="none" stroke="%23FFFFFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FCFBFE;
  font-family: Manrope, system-ui, sans-serif;
  color: #1B1030;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

a { text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #6B45AA;
  outline-offset: 3px;
  border-radius: 6px;
}

/* El ancho de página del diseño. Lo aplicamos por clase para que
   funcione igual dentro y fuera del editor. */
.hdl-limite {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

.hdl-seccion { padding-bottom: 60px; }


/* ============================================================
   2 · Animaciones del diseño
   ============================================================ */

@keyframes hdlLetter { 0% { opacity: 0; transform: translateY(26px) scale(0.94); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes hdlSweep { 0% { transform: translateX(-140%) skewX(-14deg); } 55%, 100% { transform: translateX(320%) skewX(-14deg); } }
@keyframes hdlRing { 0% { transform: scale(0.6); opacity: 0.85; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes hdlDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes hdlRise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes hdlNada { 0% { opacity: 1; } 100% { opacity: 1; } }
@keyframes hdlGiro { 0% { transform: rotateY(-186deg); opacity: 0; } 28% { opacity: 1; } 100% { transform: rotateY(0deg); opacity: 1; } }
@keyframes hdlRadar { 0% { transform: scale(0.85); opacity: 0.55; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes hdlFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(-0.6deg); }
  50% { transform: translateY(-7px) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(0.6deg); }
}
@keyframes hdlIdea {
  0%, 62% { background: #0C2E2A; box-shadow: none; transform: translateX(-50%) scale(1); }
  68% { background: #FFF6C2; box-shadow: 0 0 6px 3px rgba(255,222,33,0.75), 0 0 14px 7px rgba(255,222,33,0.30); transform: translateX(-50%) scale(1.75); }
  74% { background: #0C2E2A; box-shadow: none; transform: translateX(-50%) scale(1); }
  80% { background: #FFFDF0; box-shadow: 0 0 9px 5px rgba(255,222,33,0.95), 0 0 22px 11px rgba(255,222,33,0.42); transform: translateX(-50%) scale(2.15); }
  100% { background: #0C2E2A; box-shadow: none; transform: translateX(-50%) scale(1); }
}
@keyframes hdlIdeaRay {
  0%, 76% { opacity: 0; transform: translateX(-50%) scale(0.35); }
  82% { opacity: 0.95; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.7); }
}
@keyframes hdlGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* Estados hover que el lienzo del diseño generaba como clases .scpN.
   Se conservan tal cual para las piezas interactivas. */
.scp0:hover { background: rgba(255, 255, 255, 0.16) !important; color: rgb(255, 255, 255) !important; }
.scp1:hover { transform: rotate(-1.4deg) translateY(-1px) !important; }
.scp2:hover { background: rgb(255, 233, 77) !important; }
.scp3:hover { background: rgb(242, 207, 0) !important; }
.scp4:hover { color: rgb(255, 222, 33) !important; }
.scp5:hover { background: rgba(255, 255, 255, 0.2) !important; }
.scp6:hover { transform: scale(1.04) !important; }
.hdl-cta-amarillo:hover { background: rgb(242, 207, 0) !important; }
.hdl-cta-morado:hover { background: #2D1655 !important; }


/* ============================================================
   3 · Bloque morado: encabezado + portada
   ============================================================ */

.hdl-morado {
  position: relative;
  background: #241541;
  overflow: hidden;
}

.hdl-morado::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 80% at 78% 0%,
              rgba(255, 222, 33, 0.16) 0%,
              rgba(107, 69, 170, 0.34) 38%,
              rgba(36, 21, 65, 0) 72%);
  pointer-events: none;
}

.hdl-morado > * { position: relative; }
.hdl-morado :is(h1, h2, h3, p, li, a) { color: #FFFFFF; }


/* ---- Barra superior de contacto ---- */

.hdl-barra { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.hdl-barra-fila {
  min-height: 46px;
  gap: 34px;
  font-size: 13px;
}

.hdl-dato {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
}

.hdl-barra .hdl-dato a { color: rgba(255, 255, 255, 0.72); }
.hdl-barra .hdl-dato a:hover { color: #FFDE21; }

.hdl-entrar a { font-weight: 700; color: #FFFFFF !important; }
.hdl-entrar a:hover { color: #FFDE21 !important; }
.hdl-entrar::before { display: none; }

/* Iconos: van en CSS para que el texto siga siendo texto editable. */
.hdl-dato::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.hdl-ico-wa::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFDE21" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 11.6a8.5 8.5 0 0 1-12.6 7.44L3.5 20.5l1.46-4.4A8.5 8.5 0 1 1 20.5 11.6z"/><path d="M9 9.4c0 3 2.6 5.6 5.6 5.6.5 0 .9-.4.9-.9v-.7l-1.8-.7-.9 1c-1.1-.5-2-1.4-2.5-2.5l1-.9-.7-1.8h-.7c-.5 0-.9.4-.9.9z"/></svg>');
}

.hdl-ico-mail::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFDE21" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2.6" y="5" width="18.8" height="14" rx="2.4"/><path d="m3.4 6.6 8.6 6.2 8.6-6.2"/></svg>');
}

.hdl-ico-casa::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFDE21" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10.4 12 4l8.5 6.4V20a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1z"/></svg>');
}


/* ---- Marca y menú ---- */

.hdl-nav {
  padding-top: 22px;
  padding-bottom: 22px;
  gap: 24px;
}

.hdl-marca { margin: 0; }
.hdl-marca img { display: block; }

.hdl-menu {
  gap: 22px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(140%);
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 30px rgba(0, 0, 0, 0.18);
}

.hdl-item { margin: 0; }

.hdl-item a {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86) !important;
  white-space: nowrap;
  transition: background 0.18s;
}

.hdl-item a:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF !important;
}

/* «Tips jurídicos»: la pastilla turquesa inclinada del diseño. */
.hdl-tips a {
  background: #2FD6C3;
  color: #0C2E2A !important;
  font-family: Poppins, Manrope, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 6px;
  transform: rotate(-3.2deg);
  box-shadow: 0 6px 18px rgba(47, 214, 195, 0.28);
  transition: transform 0.18s;
}

.hdl-tips a:hover {
  background: #2FD6C3;
  color: #0C2E2A !important;
  transform: rotate(-1.4deg) translateY(-1px);
}


/* ---- La bombilla sobre la «i» de «Tips jurídicos» ----

   El punto de la i se sustituye por una bombilla que parpadea y lanza
   destellos, como en el diseño. El texto del bloque sigue siendo texto
   normal y editable: es el guion el que monta estas piezas al cargar,
   sobre la «i» acentuada (o, si no hay ninguna, sobre la primera «i»). */

.hdl-idea { position: relative; display: inline-block; }

.hdl-idea-rayo {
  position: absolute;
  left: 50%;
  top: -0.5em;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  pointer-events: none;
  animation: hdlIdeaRay 2s ease-out infinite;
  background: conic-gradient(rgba(255, 222, 33, 0.9) 0deg, rgba(255, 222, 33, 0.9) 6deg, transparent 6deg, transparent 45deg, rgba(255, 222, 33, 0.9) 45deg, rgba(255, 222, 33, 0.9) 51deg, transparent 51deg, transparent 90deg, rgba(255, 222, 33, 0.9) 90deg, rgba(255, 222, 33, 0.9) 96deg, transparent 96deg, transparent 135deg, rgba(255, 222, 33, 0.9) 135deg, rgba(255, 222, 33, 0.9) 141deg, transparent 141deg, transparent 180deg, rgba(255, 222, 33, 0.9) 180deg, rgba(255, 222, 33, 0.9) 186deg, transparent 186deg, transparent 225deg, rgba(255, 222, 33, 0.9) 225deg, rgba(255, 222, 33, 0.9) 231deg, transparent 231deg, transparent 270deg, rgba(255, 222, 33, 0.9) 270deg, rgba(255, 222, 33, 0.9) 276deg, transparent 276deg, transparent 315deg, rgba(255, 222, 33, 0.9) 315deg, rgba(255, 222, 33, 0.9) 321deg, transparent 321deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0px, transparent 32%, #000 40%, #000 78%, transparent 86%);
  mask: radial-gradient(circle, transparent 0px, transparent 32%, #000 40%, #000 78%, transparent 86%);
}

.hdl-idea-punto {
  position: absolute;
  left: 50%;
  top: -0.42em;
  width: 3.4px;
  height: 3.4px;
  border-radius: 50%;
  background: #0C2E2A;
  transform: translateX(-50%);
  animation: hdlIdea 2s ease-in-out infinite;
}

/* La «i» original se mantiene para que el ancho no cambie, pero oculta;
   encima se dibuja una «ı» sin punto. */
.hdl-idea-hueco { visibility: hidden; }
.hdl-idea-letra { position: absolute; left: 0; top: 0; }


.hdl-cta .wp-block-button__link {
  font-size: 14.5px;
  padding: 14px 26px;
  box-shadow: 0 10px 26px rgba(255, 222, 33, 0.2);
}

.hdl-cta .wp-block-button__link:hover { background-color: #FFE94D; }



/* ---- Barra fija que aparece al desplazar ----

   La monta el guion copiando la marca y el enlace de entrar del
   encabezado, así que no hay un segundo menú que mantener. Vive
   fuera del bloque morado: si estuviera dentro, el «overflow:
   hidden» de ese bloque impediría que quedase pegada arriba. */

.hdl-fija {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 70;
  background: rgba(29, 17, 53, 0.92);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(12, 4, 26, 0.28);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.3, 1), visibility 0s linear 0.34s;
}

.hdl-fija.hdl-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.3, 1), visibility 0s;
}

.hdl-fija-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
}

.hdl-fija-marca { display: block; line-height: 0; flex: 0 0 auto; }
.hdl-fija-marca img { display: block; width: 132px; }

/* El menú copiado del encabezado, algo más discreto dentro de la barra. */
.hdl-fija-menu {
  gap: 14px;
  padding: 5px 8px;
  margin: 0;
  flex: 0 1 auto;
}

.hdl-fija-menu .hdl-item a { padding: 8px 13px; font-size: 13.5px; }
.hdl-fija-menu .hdl-tips a { font-size: 12.5px; padding: 7px 12px; }

/* Nombre escrito, por si la imagen de la marca no llega a cargar. */
.hdl-marca-txt {
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  white-space: nowrap;
  line-height: 1.1;
  display: inline-block;
}

.hdl-marca-txt i { font-style: normal; color: #FFDE21; }
.hdl-fija-marca .hdl-marca-txt { font-size: 19px; }

.hdl-fija-boton {
  background: #FFDE21;
  color: #241541 !important;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(255, 222, 33, 0.18);
  transition: background 0.18s;
}

.hdl-fija-boton:hover { background: #FFE94D; color: #241541 !important; }

/* Todos los saltos de anclaje se detienen por debajo de la barra fija.

   Esto era una lista de identificadores escrita a mano, así que cada
   anclaje nuevo —los pasos de «Cómo funciona», por ejemplo— aterrizaba
   detrás de la barra y había que acordarse de añadirlo. Puesto en el
   elemento que hace el desplazamiento vale para todos, también para
   los que aún no existen.

   Ojo: scroll-padding (aquí) y scroll-margin (en el destino) SE SUMAN.
   Por eso no puede quedar ninguna de las dos reglas viejas. */
html { scroll-padding-top: 92px; }


/* ============================================================
   4 · Portada (hero)
   ============================================================ */

.hdl-hero {
  padding-top: 54px;
  padding-bottom: 78px;
  gap: 60px;
}

.hdl-pieza-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
}

/* El logo se dibuja un poco más ancho que su columna, como en el
   diseño. Al estar ahora a la derecha, ese exceso tiene que salirse
   hacia el centro y no hacia el borde, donde quedaría cortado. */
.hdl-pieza-logo .sc-host-x {
  width: 118%;
  margin-left: -18%;
}

/* ---- El titular con la palabra que cambia ----

   El hueco de la palabra lleva ancho y alto en píxeles (los pone el
   guion) para poder animarlos. Dentro, las palabras van superpuestas:
   la que sale se va hacia arriba y la que entra sube desde abajo, con
   las mismas curvas y tiempos que usa el logo para sus figuras. */

.hdl-titular {
  margin: 0 0 20px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: pretty;
}

.hdl-hueco {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  transition: width 0.56s cubic-bezier(0.22, 1, 0.3, 1);
}

.hdl-etiqueta-palabra {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  white-space: nowrap;
  background: #FFDE21;
  color: #3B1E6E;
  border-radius: 9px;
  padding: 0 0.16em;
  transform: translateY(0);
}

/* La que entra espera abajo; la que sale se marcha hacia arriba. */
.hdl-etiqueta-palabra.hdl-entra { transform: translateY(115%); }

.hdl-etiqueta-palabra:not(.hdl-entra):not(.hdl-espejo) {
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.3, 1) 0.06s;
}

.hdl-etiqueta-palabra.hdl-sale {
  transform: translateY(-115%);
  transition: transform 0.52s cubic-bezier(0.6, 0, 0.2, 1);
}

/* Espejo de medida: vive fuera de la pantalla, solo para calcular
   cuánto ocupará la siguiente palabra. */
.hdl-espejo {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}

/* La lista de palabras no se publica: solo sirve para que puedas
   editarlas desde el editor. El guion la oculta al arrancar; esta
   regla evita que se vea mientras tanto. */
.hdl-palabras { display: none; }

.hdl-hero-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
}



/* ---- Tarjetas que se voltean · «Conoce nuestro enfoque» ----

   Cada tarjeta tiene dos caras apiladas en la misma celda de una
   rejilla: así la altura sale sola de la cara más larga, sin medir
   nada con guiones. Al girar la tarjeta, «backface-visibility» hace
   que solo se vea la cara que toca. */

.hdl-enfoque { padding-top: 76px; }

.hdl-h2-centro { text-align: center; margin-bottom: 40px; }

/* Cuadrícula en vez de la fila flexible de WordPress: así las cuatro
   tarjetas quedan exactamente igual de altas, la de la más larga. */
.hdl-tarjetas {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.hdl-tarjeta-col {
  perspective: 1400px;
  display: flex;
  align-self: stretch !important;
  /* Sin el margen que WordPress pone entre bloques hermanos: en una
     cuadrícula desplazaría las columnas 2, 3 y 4 hacia abajo y las
     dejaría 22px más bajas que la primera. */
  margin: 0 !important;
}

.hdl-tarjeta {
  display: grid;
  width: 100%;
  /* Todas las tarjetas de la fila con la misma altura, la de la más
     larga, aunque cambies los textos. */
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.4, 0.1, 0.2, 1);
  cursor: pointer;
}

/* Estados del giro, de menos a más específico:
   · en reposo se ve la cara de delante (el titular en morado);
   · «hdl-inicial» es como llegan antes de que nadie baje: enseñando
     el reverso, para que el texto se lea aunque nunca se desplacen;
   · al pasar el puntero, o al pulsarlas en el móvil, se ve el reverso. */
.hdl-tarjeta { transform: rotateY(0deg); }
.hdl-tarjeta.hdl-inicial { transform: rotateY(180deg); }
.hdl-tarjeta-col:hover .hdl-tarjeta:not(.hdl-inicial) { transform: rotateY(180deg); }
.hdl-tarjeta.hdl-volteada { transform: rotateY(180deg); }

.hdl-cara {
  grid-area: 1 / 1;
  /* Las dos caras comparten celda; el margen que WordPress pone entre
     bloques hermanos descuadraría la de detrás. */
  margin: 0 !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
  padding: 32px 26px;
  border-radius: 18px;
}

/* Cara de delante: morada, con el icono y el titular. */
.hdl-frente {
  background: linear-gradient(150deg, #241541 0%, #3B1E6E 72%, #4A2A85 100%);
  box-shadow: 0 16px 38px rgba(36, 21, 65, 0.18);
  align-items: center;
  text-align: center;
  gap: 20px;
}

.hdl-frente::before {
  content: "";
  width: 46px;
  height: 46px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.hdl-tarjeta-tit {
  margin: 0;
  font-size: 19px;
  line-height: 1.24;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

/* Cara de detrás: clara, con la explicación. */
.hdl-respaldo {
  transform: rotateY(180deg);
  background: #FFFFFF;
  border: 1px solid #E4DFF0;
  box-shadow: 0 16px 38px rgba(50, 30, 83, 0.08);
  border-top: 3px solid #FFDE21;
}

.hdl-tarjeta-txt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: #4A4358;
}

/* Iconos de cada tarjeta. */
.hdl-tarjeta.e1 .hdl-frente::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFDE21" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.6"/><circle cx="12" cy="12" r="4.4"/><circle cx="12" cy="12" r="1" fill="%23FFDE21" stroke="none"/></svg>'); }
.hdl-tarjeta.e2 .hdl-frente::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFDE21" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13.4 2.6 4.9 13.4h5.3l-.6 8 8.5-10.8h-5.3z"/></svg>'); }
.hdl-tarjeta.e3 .hdl-frente::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFDE21" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.8 4.6 5.9v5.7c0 4.4 3 8.5 7.4 9.6 4.4-1.1 7.4-5.2 7.4-9.6V5.9z"/><path d="m8.9 11.8 2.3 2.3 4.1-4.4"/></svg>'); }
.hdl-tarjeta.e4 .hdl-frente::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFDE21" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="6.6" y="2.4" width="10.8" height="19.2" rx="2.4"/><path d="M10.6 5.6h2.8"/><path d="m9.6 13.4 1.9 1.9 3.4-3.6"/></svg>'); }

.hdl-tarjeta:focus-visible { outline: 3px solid #FFDE21; outline-offset: 4px; border-radius: 18px; }

/* Si alguien prefiere no ver animaciones, las tarjetas enseñan la
   explicación desde el principio y no giran. */
@media (prefers-reduced-motion: reduce) {
  .hdl-tarjeta, .hdl-tarjeta.hdl-inicial, .hdl-tarjeta.hdl-volteada,
  .hdl-tarjeta-col:hover .hdl-tarjeta:not(.hdl-inicial) { transform: none !important; }
  .hdl-cara { backface-visibility: visible; }
  .hdl-frente { display: none; }
  .hdl-respaldo { transform: none; }
}



/* ---- Reseñas ----

   Tarjetas blancas, del mismo lenguaje que el resto de la página. La
   fila va en cuadrícula para que las tres queden igual de altas por
   larga que sea una reseña, y sin el margen que WordPress pone entre
   bloques hermanos, que en cuadrícula descoloca las columnas. */

/* La ilustración de las preguntas sobresale hacia abajo por su margen
   negativo; las reseñas van por encima y con aire suficiente. */
.hdl-resenas {
  position: relative;
  z-index: 2;
  padding-top: 92px;
}

.hdl-resenas-sub {
  margin: -18px 0 40px;
  font-size: 16px;
  color: #6B6478;
}

.hdl-resenas-fila {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.hdl-resena {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E4DFF0;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 14px 34px rgba(50, 30, 83, 0.06);
}

.hdl-estrellas {
  margin: 0;
  font-size: 16px;
  letter-spacing: 3px;
  line-height: 1;
  color: #FFDE21;
}

/* La cita ocupa el hueco sobrante, así los pies quedan alineados
   entre tarjetas aunque los textos midan distinto. */
.hdl-resena-txt {
  margin: 0;
  flex: 1 1 auto;
  font-size: 15.5px;
  line-height: 1.62;
  color: #4A4358;
}

.hdl-resena-pie {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #EFEBF8;
}

.hdl-resena-nombre {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #1B1030;
}

.hdl-resena-meta {
  margin: 4px 0 0 !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9A93A8;
}



/* ---- Aliados: tira de logos que desfila ----

   El guion envuelve la fila en una pista y la repite las veces que
   haga falta para cubrir la pantalla; la animación desplaza la pista
   justo la mitad de su ancho, así el salto al reiniciar no se nota. */

.hdl-aliados {
  overflow: hidden;
  padding: 44px 0 60px;
}

/* El título va en su propia caja del ancho de la página: así nunca se
   centra respecto de la pista, que es mucho más ancha. */
.hdl-aliados-tit { width: 100%; }

.hdl-aliados-tit {
  margin: 0 0 30px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9A93A8;
}

.hdl-marquesina {
  display: flex;
  width: max-content;
  animation: hdlDesfile 46s linear infinite;
}

/* Al pasar el puntero por la tira se detiene, para poder mirar un logo
   concreto. La pausa se dispara desde la sección entera y no desde la
   pista, que va moviéndose bajo el cursor. */
.hdl-aliados:hover .hdl-marquesina { animation-play-state: paused; }

@keyframes hdlDesfile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hdl-aliados-fila {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 68px;
  padding-right: 68px;
  margin: 0 !important;
}

.hdl-aliado { margin: 0 !important; flex: 0 0 auto; }

/* En gris y algo apagados para que no compitan con la marca; al pasar
   el puntero recuperan su color. */
.hdl-aliado img {
  display: block;
  height: 54px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.25s, opacity 0.25s;
}

.hdl-aliado img:hover {
  filter: none;
  opacity: 1;
}

/* Si el guion no llega a duplicar la fila sólo hay una copia, y entonces
   el desfile daría un salto feo al reiniciar. Con una sola fila la tira
   se queda quieta y centrada, que es un estado digno por sí mismo. */
.hdl-marquesina:has(> .hdl-aliados-fila:only-child) {
  animation: none;
  width: 100%;
  justify-content: center;
}

.hdl-marquesina:has(> .hdl-aliados-fila:only-child) .hdl-aliados-fila {
  flex-wrap: wrap !important;
  justify-content: center;
  padding-right: 0;
}

/* Respaldo cuando el archivo del logo no está: en vez del icono roto,
   el nombre del aliado compuesto en texto. */
.hdl-aliado-txt {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9A93A8;
  white-space: nowrap;
}

/* Sin animación: la tira se queda quieta y centrada. */
.hdl-marquesina.hdl-quieta {
  animation: none;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.hdl-marquesina.hdl-quieta .hdl-aliados-fila { flex-wrap: wrap !important; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hdl-marquesina { animation: none; }
}


/* ============================================================
   5 · Secciones de la página
   ============================================================ */

.hdl-etiqueta {
  margin: 0 0 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B6478;
}

.hdl-h1 { margin: 0 0 20px; text-wrap: balance; }
.hdl-h2 { margin: 0 0 26px; }

.hdl-entradilla {
  margin: 0 0 34px;
  color: #4A4358;
  max-width: 52ch;
}

.hdl-cot {
  padding-top: 76px;
  padding-bottom: 60px;
  gap: 48px;
  align-items: flex-start;
}

.hdl-cot-caja { position: relative; }


/* ---- Comparativa ---- */

.hdl-comp { gap: 52px; align-items: flex-start; }

.hdl-tabla { margin: 0; }

.hdl-tabla table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #E4DFF0;
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
  width: 100%;
}

.hdl-tabla :is(th, td) {
  padding: 18px 20px;
  border: none;
  border-top: 1px solid #EFEBF8;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.hdl-tabla thead :is(th, td) { border-top: none; }

/* Primera columna: el criterio. */
.hdl-tabla :is(th, td):first-child {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B6478;
  width: 22%;
}

.hdl-tabla tbody :is(th, td):first-child {
  font-family: Manrope, sans-serif;
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: #1B1030;
}

/* Columna de Herédalo: resaltada. */
.hdl-tabla thead :is(th, td):nth-child(2) {
  background: #241541;
  color: #FFFFFF;
  font-weight: 700;
  font-family: Manrope, sans-serif;
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* El sello de verificado. Va en CSS para que el texto de la celda siga
   siendo texto normal y editable desde el bloque de tabla. */
.hdl-tabla thead :is(th, td):nth-child(2)::after {
  content: "";
  display: inline-block;
  vertical-align: -3px;
  width: 17px;
  height: 17px;
  margin-left: 8px;
  background: var(--hdl-verificado) center / contain no-repeat;
}

.hdl-tabla tbody :is(th, td):nth-child(2) {
  background: #F4F1FB;
  color: #241541;
}

.hdl-tabla thead :is(th, td):nth-child(3) {
  background: #FCFBFE;
  color: #1B1030;
  font-weight: 700;
  font-family: Manrope, sans-serif;
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
}

.hdl-tabla tbody :is(th, td):nth-child(3) { color: #6B6478; }


/* ---- Preguntas frecuentes ---- */

.hdl-faq {
  position: relative;
  z-index: 1;
  padding-bottom: 60px;
  gap: 48px;
  align-items: flex-start;
}

.hdl-ilustracion { margin: 0; }

.hdl-ilustracion img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: contain;
  object-position: center bottom;
  margin-bottom: -150px;
}

.hdl-pregunta {
  border-bottom: 1px solid #E4DFF0;
  padding: 0;
}

.hdl-pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  color: #1B1030;
}

.hdl-pregunta summary::-webkit-details-marker { display: none; }
.hdl-pregunta summary::marker { content: ""; }

.hdl-pregunta summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 18px;
  color: #C8A800;
  transition: transform 0.2s;
}

.hdl-pregunta[open] summary::after { content: "−"; }

.hdl-pregunta p {
  font-size: 15px;
  line-height: 1.65;
  color: #4A4358;
  margin: 0 0 22px;
  max-width: 62ch;
}


/* ---- Llamado final ---- */

.hdl-cierre-caja { position: relative; z-index: 2; padding-bottom: 60px; }

.hdl-cierre {
  border-radius: 16px;
  padding: 46px;
  gap: 40px;
}

.hdl-cierre .hdl-h2 { margin: 0; max-width: 26ch; }

.hdl-cierre-sub {
  margin: 12px 0 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
}

.hdl-cierre-btn .wp-block-button__link {
  font-size: 16px;
  padding: 17px 30px;
}


/* ============================================================
   6 · Pie de página
   ============================================================ */

.hdl-pie {
  position: relative;
  background: linear-gradient(135deg, #1B0F33 0%, #241541 30%, #4A2A85 74%, #6B45AA 100%);
  overflow: hidden;
  color: #FFFFFF;
}

.hdl-pie :is(h1, h2, h3, p, li, a) { color: #FFFFFF; }

/* Resplandor amarillo de la esquina superior derecha. */
.hdl-pie::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -34%;
  width: 46%;
  padding-bottom: 46%;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 222, 33, 0.30) 0%,
              rgba(183, 154, 46, 0.16) 46%,
              rgba(107, 69, 170, 0) 72%);
  pointer-events: none;
}

.hdl-pie > * { position: relative; }

.hdl-pie-cols {
  padding-top: 62px;
  gap: 44px;
}

.hdl-pie-lema {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 32ch;
}

.hdl-sello { gap: 12px; margin-top: 26px; }

.hdl-sello-txt {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5) !important;
}

.hdl-layraton { margin: 0; }
.hdl-layraton img { display: block; opacity: 0.92; }

.hdl-pie-tit {
  margin: 0 0 18px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFDE21 !important;
}

.hdl-pie-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.hdl-pie-lista li { font-size: 14px; }

.hdl-pie-lista a {
  color: rgba(255, 255, 255, 0.82) !important;
  transition: color 0.18s;
}

.hdl-pie-lista a:hover { color: #FFDE21 !important; }

.hdl-pie .hdl-dato {
  margin: 0 0 13px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.hdl-pie .hdl-dato::before { width: 18px; height: 18px; }

.hdl-pie .hdl-dato a { color: rgba(255, 255, 255, 0.82) !important; }
.hdl-pie .hdl-dato a:hover { color: #FFDE21 !important; }
.hdl-fuerte { font-weight: 700; }
.hdl-fuerte a { color: #FFFFFF !important; }

.hdl-redes { margin-top: 20px; gap: 10px; }

.hdl-redes .wp-social-link {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  width: 38px;
  height: 38px;
  transition: background 0.18s;
}

/* El tamaño va en el <li>, pero WordPress le da al <a> de dentro su
   propio relleno, así que el enlace quedaba en 32x29 y el icono se
   centraba respecto de él, no del círculo: 1,5 px arriba y a la
   izquierda. El enlace tiene que ocupar el círculo entero. */
.hdl-redes .wp-social-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  line-height: 0;
}

.hdl-redes .wp-social-link:hover { background: rgba(255, 255, 255, 0.2) !important; }
.hdl-redes .wp-social-link svg { width: 19px; height: 19px; display: block; }

.hdl-pie-legal {
  margin-top: 46px;
  padding-top: 24px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  gap: 30px;
}

.hdl-legal-txt {
  margin: 0;
  max-width: 74ch;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5) !important;
}

.hdl-nit {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.44) !important;
}

.hdl-copy {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 6px;
  padding-bottom: 26px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.38) !important;
}


/* ---- Botón flotante de WhatsApp ---- */

.hdl-wa {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  margin: 0;
  animation: hdlFloat 4.6s ease-in-out infinite;
}

.hdl-wa a {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #3B1E6E;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 20px 13px 18px;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(50, 30, 83, 0.34);
  transition: transform 0.2s;
}

.hdl-wa a::before {
  content: "";
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23FFFFFF" d="M16 1C7.72 1 1 7.72 1 16c0 2.5.62 4.87 1.7 6.95L1 31l8.3-1.93A14.93 14.93 0 0 0 16 31c8.28 0 15-6.72 15-15S24.28 1 16 1z"/><path fill="%232FD6C3" d="M16 3.6C9.16 3.6 3.6 9.16 3.6 16c0 2.2.58 4.27 1.6 6.06L4.1 27.9l5.96-1.38A12.35 12.35 0 0 0 16 28.4c6.84 0 12.4-5.56 12.4-12.4S22.84 3.6 16 3.6z"/><path fill="%23FFFFFF" d="M22.3 19.2c-.28-.14-1.72-.85-1.99-.95-.27-.1-.46-.14-.66.14-.2.28-.77.95-.94 1.15-.17.2-.35.21-.63.07-.28-.14-1.2-.44-2.28-1.4-.85-.75-1.4-1.68-1.56-1.96-.17-.28-.02-.44.12-.58.14-.14.33-.38.48-.57.14-.19.19-.33.28-.53.09-.2.05-.37-.02-.51-.07-.14-.63-1.55-.87-2.11-.22-.53-.45-.46-.63-.47h-.55c-.19 0-.5.07-.76.35-.26.28-1 .96-1 2.35s1.02 2.73 1.16 2.92c.14.19 2 3.1 4.87 4.24 2.38.94 2.86.75 3.38.7.52-.05 1.68-.68 1.92-1.35.24-.66.24-1.23.17-1.35-.07-.12-.26-.19-.54-.33z"/></svg>') center / contain no-repeat;
}

.hdl-wa a:hover { transform: scale(1.04); }


/* ============================================================
   7 · Páginas internas
   ============================================================ */

.hdl-pagina {
  max-width: 900px;
  padding-top: 72px;
  padding-bottom: 96px;
  font-size: 17px;
  line-height: 1.66;
  color: #4A4358;
}

.hdl-pagina > * + * { margin-top: 22px; }


/* ============================================================
   8 · Adaptación a tablet y móvil
   ============================================================ */

@media (max-width: 1040px) {
  html, body { overflow-x: hidden; }

  /* En la barra fija no caben los cuatro enlaces junto al botón:
     por debajo de este ancho quedan solo la marca y el botón. */
  .hdl-fija-menu { display: none; }

  .hdl-nav { gap: 14px; padding-top: 18px; padding-bottom: 18px; }
  .hdl-menu { row-gap: 6px; column-gap: 8px; }
}

@media (max-width: 900px) {
  .hdl-limite { padding-left: 20px; padding-right: 20px; }

  .hdl-barra-fila {
    justify-content: flex-start;
    gap: 8px 18px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Las columnas de WordPress ya se apilan solas por debajo de 782px;
     aquí adelantamos el corte para que el diseño respire antes. */
  .hdl-hero, .hdl-cot, .hdl-comp, .hdl-faq, .hdl-pie-cols {
    flex-wrap: wrap !important;
    gap: 34px;
  }

  /* Las cuatro tarjetas pasan a dos por fila. */
  .hdl-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .hdl-resenas-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .hdl-aliado img { height: 44px; }
  .hdl-aliados-fila { gap: 48px; padding-right: 48px; }
  .hdl-aliados { padding: 34px 0 46px; }
  .hdl-resenas { padding-top: 40px; }
  .hdl-cara { min-height: 220px; padding: 26px 20px; }
  .hdl-enfoque { padding-top: 46px; }

  .hdl-hero > .wp-block-column,
  .hdl-cot > .wp-block-column,
  .hdl-comp > .wp-block-column,
  .hdl-faq > .wp-block-column {
    flex-basis: 100% !important;
    min-width: 0;
  }

  .hdl-pie-cols > .wp-block-column { flex-basis: 45% !important; min-width: 0; }

  .hdl-hero { padding-top: 26px; padding-bottom: 46px; }
  .hdl-pieza-logo { min-height: 0; }
  .hdl-pieza-logo .sc-host-x { width: 100%; max-width: 380px; margin: 0 auto; }

  .hdl-cot { padding-top: 46px; }

  /* La ilustración de preguntas no puede solaparse al apilar. */
  .hdl-ilustracion img { height: 300px; margin-bottom: 0; }

  /* Seguimiento: las cinco etapas se deslizan a lo ancho para que la
     línea de progreso siga leyéndose entera. El desplazamiento va en el
     envoltorio, porque la línea está posicionada en porcentajes. */
  .hdl-seg-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 78%) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(36, 21, 65, 0.16), rgba(36, 21, 65, 0)) right / 15px 100% no-repeat scroll;
  }

  .hdl-etapas-caja { min-width: 560px; }

  .hdl-cierre {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 26px;
    gap: 22px;
  }
}

@media (max-width: 640px) {
  .hdl-barra-fila { font-size: 12px; }

  .hdl-fija-fila { min-height: 56px; }
  .hdl-fija-marca img { width: 112px; }
  .hdl-fija-boton { font-size: 13px; padding: 10px 16px; }
  html { scroll-padding-top: 76px; }

  /* La marca y el botón comparten fila; el menú pasa debajo, a lo ancho.
     Así el encabezado ocupa una fila menos en el celular. */
  .hdl-menu {
    order: 3;
    width: 100%;
    padding: 8px;
    row-gap: 4px;
  }

  .hdl-nav { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .hdl-marca img { width: 128px !important; }
  .hdl-cta .wp-block-button__link { font-size: 13.5px; padding: 12px 20px; }
  .hdl-item a { padding: 9px 13px; font-size: 13.5px; }
  .hdl-hero { padding-top: 18px; }
  .hdl-pieza-logo .sc-host-x { max-width: 260px; }

  .hdl-pie-cols > .wp-block-column { flex-basis: 100% !important; }
  .hdl-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .hdl-resenas-fila { grid-template-columns: minmax(0, 1fr); }
  .hdl-cara { min-height: 190px; }

  /* Comparativa: se apila y cada dato dice de quién es, para no tener
     que deslizar la tabla a lo ancho. */
  .hdl-tabla thead { display: none; }
  .hdl-tabla :is(table, tbody, tr, th, td) { display: block; width: auto !important; }
  .hdl-tabla tr { border-top: 1px solid #EFEBF8; }
  .hdl-tabla tbody tr:first-child { border-top: none; }
  .hdl-tabla td { border-top: none; }

  .hdl-tabla tbody td:nth-child(2)::before {
    content: "Herédalo.co";
    color: #3B1E6E;
    padding-right: 17px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 22.050 12.000 C 22.050 12.439 21.519 12.857 20.923 13.175 C 20.327 13.492 19.769 13.723 19.679 14.058 C 19.589 14.393 19.957 14.871 20.315 15.444 C 20.673 16.017 20.923 16.645 20.704 17.025 C 20.484 17.405 19.815 17.502 19.140 17.479 C 18.465 17.456 17.867 17.376 17.621 17.621 C 17.376 17.867 17.456 18.465 17.479 19.140 C 17.502 19.815 17.405 20.484 17.025 20.704 C 16.645 20.923 16.017 20.673 15.444 20.315 C 14.871 19.957 14.393 19.589 14.058 19.679 C 13.723 19.769 13.492 20.327 13.175 20.923 C 12.857 21.519 12.439 22.050 12.000 22.050 C 11.561 22.050 11.143 21.519 10.825 20.923 C 10.508 20.327 10.277 19.769 9.942 19.679 C 9.607 19.589 9.129 19.957 8.556 20.315 C 7.983 20.673 7.355 20.923 6.975 20.704 C 6.595 20.484 6.498 19.815 6.521 19.140 C 6.544 18.465 6.624 17.867 6.379 17.621 C 6.133 17.376 5.535 17.456 4.860 17.479 C 4.185 17.502 3.516 17.405 3.296 17.025 C 3.077 16.645 3.327 16.017 3.685 15.444 C 4.043 14.871 4.411 14.393 4.321 14.058 C 4.231 13.723 3.673 13.492 3.077 13.175 C 2.481 12.857 1.950 12.439 1.950 12.000 C 1.950 11.561 2.481 11.143 3.077 10.825 C 3.673 10.508 4.231 10.277 4.321 9.942 C 4.411 9.607 4.043 9.129 3.685 8.556 C 3.327 7.983 3.077 7.355 3.296 6.975 C 3.516 6.595 4.185 6.498 4.860 6.521 C 5.535 6.544 6.133 6.624 6.379 6.379 C 6.624 6.133 6.544 5.535 6.521 4.860 C 6.498 4.185 6.595 3.516 6.975 3.296 C 7.355 3.077 7.983 3.327 8.556 3.685 C 9.129 4.043 9.607 4.411 9.942 4.321 C 10.277 4.231 10.508 3.673 10.825 3.077 C 11.143 2.481 11.561 1.950 12.000 1.950 C 12.439 1.950 12.857 2.481 13.175 3.077 C 13.492 3.673 13.723 4.231 14.058 4.321 C 14.393 4.411 14.871 4.043 15.444 3.685 C 16.017 3.327 16.645 3.077 17.025 3.296 C 17.405 3.516 17.502 4.185 17.479 4.860 C 17.456 5.535 17.376 6.133 17.621 6.379 C 17.867 6.624 18.465 6.544 19.140 6.521 C 19.815 6.498 20.484 6.595 20.704 6.975 C 20.923 7.355 20.673 7.983 20.315 8.556 C 19.957 9.129 19.589 9.607 19.679 9.942 C 19.769 10.277 20.327 10.508 20.923 10.825 C 21.519 11.143 22.050 11.561 22.050 12.000 Z" fill="%232FD6C3"/><path d="M7.4 12.2 10.6 15.4 16.7 9" fill="none" stroke="%23FFFFFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') right center / 13px 13px no-repeat;
  }
  .hdl-tabla tbody td:nth-child(3)::before { content: "Trámite convencional"; color: #8B84A0; }

  .hdl-tabla tbody :is(td:nth-child(2), td:nth-child(3))::before {
    /* «table» encoge la caja al ancho del texto pero sigue ocupando su
       propia línea: así el sello queda pegado a la etiqueta y no en el
       borde derecho de la celda. */
    display: table;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 5px;
  }

  /* Zonas de toque cómodas. */
  .hdl-pie-lista a, .hdl-pie .hdl-dato { padding-top: 4px; padding-bottom: 4px; }

  /* Botón flotante compacto. */
  .hdl-wa { right: 14px; bottom: 14px; }
  .hdl-wa a { font-size: 0; gap: 0; padding: 13px; }
}

/* El celular del cotizador mide 340px fijos por diseño. */
@media (max-width: 380px) { .hdl-celular { zoom: 0.90; } }
@media (max-width: 344px) { .hdl-celular { zoom: 0.79; } }


/* ============================================================
   9 · Escena de la comparativa

   Las dos figuras 3D flanquean las dos listas. El fondo morado con
   halos, la cuadrícula de puntos y las fichas flotantes viven aquí;
   el contenido (títulos y listas) se edita en la página como
   cualquier bloque.

   Cómo se aplica, desde el editor, en «Avanzado → Clases CSS
   adicionales»:

     hdl-escena        → al grupo que envuelve toda la sección
     hdl-escena-pista  → al bloque de columnas con las cuatro piezas
     hdl-fig-nos       → a la columna de la asesora
     hdl-col-nos       → a la columna de la lista de Herédalo
     hdl-col-otros     → a la columna de la lista convencional
     hdl-fig-otros     → a la columna del confundido

   Las posiciones se dan por clase y no por orden, así que mover las
   columnas en el editor no rompe la escena.
   ============================================================ */

.hdl-escena {
  position: relative;
  overflow: hidden;
  padding: 44px 0 54px;
  background: #FCFBFE;
}

/* El fondo: halo verde del lado bueno, gris del otro, sobre morado. */
.hdl-escena::before {
  content: "";
  position: absolute;
  inset: 26px 30px;
  border-radius: 26px;
  background:
    radial-gradient(50% 76% at 14% 50%, rgba(47, 214, 195, 0.22) 0%, rgba(47, 214, 195, 0) 70%),
    radial-gradient(46% 70% at 86% 52%, rgba(107, 100, 120, 0.15) 0%, rgba(107, 100, 120, 0) 70%),
    linear-gradient(165deg, #2D1B52 0%, #3B1E6E 48%, #241541 100%);
  pointer-events: none;
}

/* La cuadrícula de puntos, desvanecida hacia los bordes. */
.hdl-escena::after {
  content: "";
  position: absolute;
  inset: 26px 30px;
  border-radius: 26px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 0%, transparent 80%);
          mask-image: radial-gradient(75% 75% at 50% 50%, #000 0%, transparent 80%);
  pointer-events: none;
}

/* Los elementos sin posicionar se pintan ANTES que los posicionados,
   así que sin esto el título quedaría debajo del fondo. */
.hdl-escena > * {
  position: relative;
  z-index: 2;
}

.hdl-escena :is(h2, h3, p) { color: #FFFFFF; }

.hdl-escena-pista {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  max-width: 1240px;
  margin: 0 auto !important;
  padding: 0 40px;
}

.hdl-escena-pista > * { margin: 0 !important; }

.hdl-fig-nos   { grid-area: 1 / 1; }
.hdl-col-nos   { grid-area: 1 / 2; }
.hdl-col-otros { grid-area: 1 / 3; }
.hdl-fig-otros { grid-area: 1 / 4; }

/* --- Las figuras --- */

/* La escena está pensada a todo el ancho. Si alguien la pega en una
   página normal, que se queda en 900px, las dos columnas de las figuras
   se aplastan hasta dejarlas como palos. Así que la página que la
   contenga se abre, igual que se hace con hdl-hoja en la sección 12. */
.hdl-pagina:has(.hdl-escena) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.hdl-fig-nos,
.hdl-fig-otros {
  position: relative;
  display: flex;
  justify-content: center;
  /* Las dos figuras apoyadas en la misma línea de suelo. Centradas,
     cada una quedaba a una altura distinta según su recorte. */
  align-self: end;
}

/* Y por si aun así la columna queda estrecha: la figura no se deja
   estrujar. Antes de deformarse, se sale un poco; una persona ancha se
   nota menos que una persona aplastada. */
.hdl-fig-nos figure,
.hdl-fig-otros figure { flex: 0 0 auto; }

/* El bloque de imagen abraza a la figura, así que la sombra va aquí y
   no en la columna: pegada a la celda quedaba muy por debajo de los
   pies. Además se queda quieta mientras la figura flota, que es lo que
   hace una sombra de verdad. */
.hdl-fig-nos figure,
.hdl-fig-otros figure {
  position: relative;
  margin: 0 !important;
}

.hdl-fig-nos img,
.hdl-fig-otros img {
  display: block;
  position: relative;
  z-index: 2;
  height: 340px;
  width: auto;
  animation: hdlFlotar 6s ease-in-out infinite;
}

.hdl-fig-otros img { animation-duration: 7.2s; animation-delay: -2s; }

@keyframes hdlFlotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* La sombra de contacto. Sin ella las figuras parecen pegadas encima
   de la escena en vez de estar dentro. */
.hdl-fig-nos figure::after,
.hdl-fig-otros figure::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 170px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.16) 45%, transparent 72%);
  filter: blur(2px);
  z-index: 1;
}

/* --- Las dos listas --- */

.hdl-col-nos,
.hdl-col-otros {
  /* WordPress estira las columnas a lo alto de la fila, y como la fila
     la marca la figura, sobraba aire bajo la última línea. Con esto la
     tarjeta mide lo que mide su contenido. */
  align-self: center;
  width: 290px;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 18px 44px rgba(50, 30, 83, 0.18);
}

/* El blockGap de WordPress mete un margen entre bloques hermanos, y
   con overflow:hidden ese margen SUMA a la altura de la tarjeta: por
   eso sobraba aire debajo de la última línea. */
.hdl-col-nos > *,
.hdl-col-otros > * { margin: 0 !important; }

.hdl-col-nos :is(p, li, h3),
.hdl-col-otros :is(p, li, h3) { color: #4A4358 !important; }

/* La cabecera oscura de la lista de Herédalo conserva el texto blanco.
   Va después para ganarle a la regla de arriba.
   Clase: hdl-cab-nos */
.hdl-escena .hdl-cab-nos,
.hdl-escena .hdl-cab-nos :is(p, h3, span) { color: #FFFFFF !important; }

/* El sello de verificado, junto al nombre. Se pone en CSS para que el
   texto de la cabecera siga siendo texto editable. */
.hdl-escena .hdl-cab-nos {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdl-escena .hdl-cab-nos::after {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: var(--hdl-verificado) center / contain no-repeat;
}

/* --- El interior de las dos tarjetas --- */

.hdl-cab-nos   { background: #241541; padding: 15px 20px; }
.hdl-cab-otros { background: #EDEBF2; padding: 15px 20px; }

.hdl-cab-txt {
  margin: 0 !important;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
}

.hdl-puntos {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.hdl-puntos li {
  padding: 13px 20px;
  border-top: 1px solid #EFEBF8;
  font-size: 14px;
  line-height: 1.45;
  color: #4A4358;
}

/* --- Fichas que suben despacio --- */

.hdl-ficha {
  position: absolute;
  z-index: 3;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  animation: hdlSubir 7s ease-in-out infinite;
}

.hdl-ficha-si { background: #2FD6C3; color: #0C2E2A !important; }
.hdl-ficha-no { background: #EDEBF2; color: #6B6478 !important; }

@keyframes hdlSubir {
  0%, 100% { transform: translateY(0); opacity: 0.92; }
  50%      { transform: translateY(-15px); opacity: 1; }
}

.hdl-ficha-1 { left: 5.5%; top: 18%; animation-delay: -0.4s; }
.hdl-ficha-2 { left: 15%;  top: 63%; animation-delay: -2.6s; }
.hdl-ficha-3 { right: 5.5%; top: 21%; animation-delay: -1.4s; }
.hdl-ficha-4 { right: 14%;  top: 64%; animation-delay: -3.4s; }

/* ---- Pantallas medianas y celular ----

   En escritorio son cuatro cosas en fila. Al estrecharse, se rompe la
   fila y cada figura se queda junto a SU lista, en espejo: eso es lo
   que sostiene la comparación.

   Las dos pistas del grid son iguales a propósito. Si se hiciera una
   estrecha para la figura y otra ancha para la lista, la segunda fila
   —que va al revés— metería la lista en la pista estrecha y las dos
   listas acabarían con anchos distintos. */

@media (max-width: 1099px) {
  .hdl-fig-nos img, .hdl-fig-otros img { height: 270px; }
  .hdl-col-nos, .hdl-col-otros { width: 250px; }
  .hdl-escena-pista { gap: 16px; padding: 0 24px; }
  .hdl-fig-nos figure::after, .hdl-fig-otros figure::after { width: 135px; height: 21px; }
}

@media (max-width: 899px) {
  /* Las fichas necesitan aire lateral que aquí ya no hay: sueltas
     contra el borde quedaban lejos de su figura. */
  .hdl-ficha { display: none; }
  .hdl-escena { padding: 30px 0 38px; }
  .hdl-escena::before, .hdl-escena::after { inset: 16px 14px; border-radius: 20px; }
  .hdl-escena::after { background-size: 18px 18px; }
}

@media (min-width: 360px) and (max-width: 899px) {
  .hdl-escena-pista {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px clamp(10px, 2.4vw, 20px);
    padding: 0 clamp(16px, 3.4vw, 26px);
  }

  .hdl-fig-nos   { grid-area: 1 / 1; }
  .hdl-col-nos   { grid-area: 1 / 2; }
  .hdl-col-otros { grid-area: 2 / 1; }
  .hdl-fig-otros { grid-area: 2 / 2; }

  .hdl-fig-nos img, .hdl-fig-otros img { height: clamp(148px, 30vw, 250px); }
  .hdl-col-nos, .hdl-col-otros { width: 100%; }
  .hdl-fig-nos figure::after, .hdl-fig-otros figure::after {
    width: clamp(70px, 15vw, 120px);
    height: clamp(12px, 2.6vw, 19px);
    bottom: 2px;
  }
}

/* Por debajo de 360 px las listas caerían de 150 px y cada línea se
   partiría en tres renglones: ahí conviene apilar. */
@media (max-width: 359px) {
  .hdl-escena-pista {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding: 0 16px;
  }

  .hdl-fig-nos   { grid-area: 1 / 1; }
  .hdl-col-nos   { grid-area: 2 / 1; }
  .hdl-fig-otros { grid-area: 3 / 1; }
  .hdl-col-otros { grid-area: 4 / 1; }

  .hdl-fig-nos img, .hdl-fig-otros img { height: 165px; }
  .hdl-col-nos, .hdl-col-otros { width: 100%; max-width: 380px; }
  .hdl-col-nos { margin-bottom: 20px !important; }
  .hdl-fig-nos figure::after, .hdl-fig-otros figure::after { width: 92px; height: 15px; bottom: -5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hdl-fig-nos img, .hdl-fig-otros img, .hdl-ficha { animation: none; }
}


/* ============================================================
   10 · Página «Nosotros»

   Bloques de texto alternando con un panel visual: texto a un lado,
   panel al otro, y se cambian de lado en cada bloque para que la
   página no se lea como una columna larga.

   En celular se apila siempre con el panel DEBAJO del texto, aunque
   en escritorio vaya a la izquierda: si se deja que el orden del
   documento mande, en los bloques invertidos el panel aparecería
   antes que su propio título.
   ============================================================ */

.hdl-nos { padding: 10px 0 30px; }

.hdl-nos-bloque {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px 56px;
  max-width: 1240px;
  margin: 0 auto 18px !important;
  padding: 26px 40px;
}

.hdl-nos-bloque > * { margin: 0 !important; }

.hdl-nos-texto  { grid-area: 1 / 1; }
.hdl-nos-visual { grid-area: 1 / 2; }

/* Bloque invertido: el panel a la izquierda. */
.hdl-nos-vuelta .hdl-nos-texto  { grid-area: 1 / 2; }
.hdl-nos-vuelta .hdl-nos-visual { grid-area: 1 / 1; }

.hdl-nos-titulo,
.hdl-tar-titulo {
  margin: 0 0 14px !important;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: #1B1030;
  line-height: 1.2;
}

.hdl-nos-titulo::before,
.hdl-tar-titulo::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #3B1E6E, #FFDE21);
}

.hdl-nos-texto p,
.hdl-tar-texto p {
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.72;
  color: #4A4358;
}

.hdl-nos-texto strong,
.hdl-tar-texto strong { color: #241541; }

/* ---- El panel de la figura ---- */

.hdl-nos-figura {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 22px;
  padding: 26px 20px 0;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 30%, rgba(47, 214, 195, 0.20) 0%, rgba(47, 214, 195, 0) 70%),
    linear-gradient(165deg, #2D1B52 0%, #3B1E6E 52%, #241541 100%);
}

.hdl-nos-figura figure { position: relative; margin: 0 !important; }

.hdl-nos-figura img {
  display: block;
  height: 320px;
  width: auto;
}

/* ---- Paneles gráficos: son ilustraciones, no capturas ---- */

.hdl-nos-panel {
  border-radius: 22px;
  padding: 40px 34px;
  background: linear-gradient(165deg, #2D1B52 0%, #3B1E6E 52%, #241541 100%);
  color: #FFFFFF;
}

.hdl-nos-panel :is(p, h3) { color: #FFFFFF !important; margin: 0 !important; }

/* La tarjeta del expediente es blanca: si hereda el texto blanco del
   panel, el rótulo desaparece. */
.hdl-nos-doc :is(p, h3) { color: #6B45AA !important; }

.hdl-nos-cifra {
  font-family: Manrope, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(58px, 7vw, 86px) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  color: #FFDE21 !important;
}

.hdl-nos-pie {
  margin-top: 16px !important;
  font-size: 15px !important;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 26ch;
}

/* Tarjeta decorativa de expediente. Deliberadamente abstracta: sin
   nombres de notarías ni sellos oficiales, para que no se lea como un
   documento real. */
.hdl-nos-doc {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 20px 22px 22px;
  box-shadow: 0 18px 44px rgba(12, 6, 28, 0.32);
}

.hdl-nos-doc-cab {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B45AA !important;
  margin: 0 0 16px !important;
}

.hdl-nos-doc-cab::after {
  content: "";
  width: 17px;
  height: 17px;
  background: var(--hdl-verificado) center / contain no-repeat;
}

/* Las tres líneas del documento, dibujadas con degradados sobre un
   solo elemento: así el patrón no necesita párrafos vacíos, que el
   editor de WordPress elimina en cuanto alguien toca el bloque. */
.hdl-nos-doc::after {
  content: "";
  display: block;
  height: 49px;
  background:
    linear-gradient(#EFEBF8, #EFEBF8) 0 0    / 100% 9px no-repeat,
    linear-gradient(#EFEBF8, #EFEBF8) 0 20px / 86%  9px no-repeat,
    linear-gradient(#EFEBF8, #EFEBF8) 0 40px / 62%  9px no-repeat;
}

@media (max-width: 899px) {
  .hdl-nos-bloque {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px 22px;
    margin-bottom: 8px !important;
  }

  /* El panel siempre debajo de su texto, vaya o no invertido arriba. */
  .hdl-nos-texto,
  .hdl-nos-vuelta .hdl-nos-texto  { grid-area: 1 / 1; }
  .hdl-nos-visual,
  .hdl-nos-vuelta .hdl-nos-visual { grid-area: 2 / 1; }

  .hdl-nos-titulo { font-size: 22px; }
  .hdl-nos-texto p,
.hdl-tar-texto p { font-size: 15.5px; }
  .hdl-nos-figura img { height: 230px; }
  .hdl-nos-panel { padding: 30px 24px; }
}


/* ============================================================
   12 · Marco de las hojas interiores (Nosotros, Tarifas)

   La plantilla «page» envuelve el contenido en un <main> que es a la
   vez .hdl-limite (1240) y .hdl-pagina (900, pensado para textos
   legales), y además imprime el título de la página. Para una hoja de
   presentación eso deja los textos en 22 caracteres por línea y repite
   el título dos veces.

   La clase hdl-hoja, en el grupo que envuelve la hoja, desactiva ese
   encierro y pone su propio marco. Funciona igual con la plantilla
   «page» y con «Página a todo el ancho».
   ============================================================ */

.hdl-hoja {
  max-width: 1400px;
  margin: 0 auto !important;
  padding: 0 40px;
}

/* Si la hoja está dentro del contenedor estrecho, ese contenedor se
   aparta: el marco lo pone hdl-hoja. */
.hdl-pagina:has(.hdl-hoja) {
  max-width: none;
  padding: 18px 0 40px;
}

/* El título de la página lo repite la plantilla; la hoja ya trae el
   suyo dentro del contenido. */
.hdl-pagina:has(.hdl-hoja) > .wp-block-post-title { display: none; }

/* Las rejillas de dentro ya no ponen su propio ancho ni su relleno:
   sumados al del marco, estrechaban el texto a la mitad. */
.hdl-hoja .hdl-tarifas-rejilla,
.hdl-hoja .hdl-nos-bloque,
.hdl-hoja .hdl-cierre-caja {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 899px) {
  .hdl-hoja { padding: 0 18px; }
  .hdl-pagina:has(.hdl-hoja) { padding: 10px 0 26px; }
}


/* ============================================================
   11 · Página «Tarifas»

   Cuatro bloques en dos columnas con el logo animado en el centro,
   ocupando las dos filas. Las posiciones se dan por clase, no por
   orden, así que se pueden mover los bloques en el editor.

   Clases, desde «Avanzado → Clases CSS adicionales»:
     hdl-tarifas          → el grupo que envuelve la sección
     hdl-tarifas-rejilla  → el grupo con los cinco elementos
     hdl-tar-1 … hdl-tar-4 → cada bloque de texto
     hdl-tar-video        → el centro (logo animado o un video)
   ============================================================ */

.hdl-tarifas { padding: 10px 0 24px; }

.hdl-tarifas-rejilla {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 38px 46px;
  max-width: 1240px;
  margin: 0 auto !important;
  padding: 16px 40px;
}

.hdl-tarifas-rejilla > * { margin: 0 !important; }

/* Los textos arrancan arriba en su fila: centrados, los dos de una
   misma fila empiezan a alturas distintas según lo largos que sean y
   la rejilla se ve descuadrada. El centro sí va centrado. */
.hdl-tar-texto { align-self: start; }
.hdl-tar-video { align-self: center; }

.hdl-tar-1     { grid-area: 1 / 1; }
.hdl-tar-2     { grid-area: 1 / 3; }
.hdl-tar-3     { grid-area: 2 / 1; }
.hdl-tar-4     { grid-area: 2 / 3; }
.hdl-tar-video { grid-area: 1 / 2 / 3 / 3; }

/* ---- El centro ---- */

.hdl-tar-video {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(62% 62% at 50% 45%, rgba(255, 222, 33, 0.14) 0%, rgba(255, 222, 33, 0) 68%),
    linear-gradient(165deg, #2D1B52 0%, #3B1E6E 52%, #241541 100%);
}

/* La pieza del logo nace pensada para el hero, donde se desborda hacia
   el centro de la página. Aquí va centrada, así que ese desplazamiento
   sobra. */
.hdl-tar-video .hdl-pieza-logo {
  width: 100%;
  min-height: 330px;
}

.hdl-tar-video .hdl-pieza-logo .sc-host-x {
  /* La pieza trae width:118% en el propio atributo style, así que sin
     !important la regla no le gana y el logo se sale de la caja. */
  width: 100% !important;
  margin-left: 0;
}

/* Si en vez del logo se pone un video o una imagen, que llene la caja. */
.hdl-tar-video :is(video, iframe, img) {
  display: block;
  width: 100%;
  height: auto;
}

.hdl-tar-video figure { margin: 0 !important; }

@media (max-width: 1099px) {
  /* En una sola columna el logo abre la página: partido entre los
     bloques cortaría la lectura por la mitad.

     El corte va en 1100 y no en 900: con el relleno de las tarjetas,
     tres columnas por debajo de eso dejan el texto en 21 caracteres
     por línea. */
  .hdl-hoja .hdl-tarifas-rejilla,
  .hdl-tarifas-rejilla {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 12px 0;
    /* Una sola columna a todo el ancho daría renglones larguísimos.
       Va con la misma especificidad que la regla del marco, que si no
       le gana y el tope no se aplica. */
    max-width: 780px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hdl-tar-video { grid-area: 1 / 1; }
  .hdl-tar-1     { grid-area: 2 / 1; }
  .hdl-tar-2     { grid-area: 3 / 1; }
  .hdl-tar-3     { grid-area: 4 / 1; }
  .hdl-tar-4     { grid-area: 5 / 1; }

  .hdl-tar-video .hdl-pieza-logo { min-height: 260px; }

  /* A todo el ancho de la tarjeta el logo sale desproporcionado. */
  .hdl-tar-video .hdl-pieza-logo .sc-host-x {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 899px) {
  .hdl-tar-video .hdl-pieza-logo { min-height: 240px; }
  .hdl-tar-titulo { font-size: 22px; }
  .hdl-tar-texto p { font-size: 15.5px; }
}


/* ============================================================
   13 · Dos acabados para las hojas interiores

   Se ponen en el grupo hdl-tarifas / hdl-nos, junto a su clase:
     hdl-acabado-tarjetas → cada bloque en una tarjeta blanca
     hdl-acabado-morado   → toda la rejilla sobre el morado de marca
   Sin ninguna de las dos, la hoja queda como está ahora.
   ============================================================ */

/* ---- A · tarjetas ---- */

.hdl-acabado-tarjetas .hdl-tarifas-rejilla {
  gap: 24px;
  padding: 30px 0 10px;
}

.hdl-acabado-tarjetas .hdl-tar-texto {
  align-self: stretch;
  background: #FFFFFF;
  border: 1px solid #EFEBF8;
  border-radius: 18px;
  padding: 28px 30px 30px;
  box-shadow: 0 14px 34px rgba(50, 30, 83, 0.07);
  transition: transform 0.2s, box-shadow 0.2s;
}

.hdl-acabado-tarjetas .hdl-tar-texto:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(50, 30, 83, 0.12);
}

/* Una franja clara detrás para que las tarjetas blancas se despeguen
   del fondo, que también es casi blanco. */
.hdl-acabado-tarjetas {
  position: relative;
  padding: 8px 0 30px;
}

.hdl-acabado-tarjetas::before {
  content: "";
  position: absolute;
  inset: 60px -40px 40px;
  border-radius: 28px;
  background: linear-gradient(180deg, #F6F3FD 0%, #FBFAFE 100%);
  z-index: 0;
}

.hdl-acabado-tarjetas > * { position: relative; z-index: 1; }

/* ---- B · sobre el morado ---- */

.hdl-acabado-morado {
  position: relative;
  padding: 36px 0 30px;
}

/* La franja arranca arriba del todo: si empieza por debajo del título,
   el título queda en blanco sobre blanco. */
.hdl-acabado-morado::before {
  content: "";
  position: absolute;
  inset: 0 -40px 40px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(50% 60% at 18% 40%, rgba(47, 214, 195, 0.18) 0%, rgba(47, 214, 195, 0) 70%),
    radial-gradient(50% 60% at 82% 60%, rgba(255, 222, 33, 0.12) 0%, rgba(255, 222, 33, 0) 70%),
    linear-gradient(165deg, #2D1B52 0%, #3B1E6E 52%, #241541 100%);
  z-index: 0;
}

.hdl-acabado-morado > * { position: relative; z-index: 1; }

.hdl-acabado-morado .hdl-tarifas-rejilla { gap: 26px; padding: 30px 0 10px; }

.hdl-acabado-morado .hdl-tar-encabezado { color: #FFFFFF !important; }

.hdl-acabado-morado .hdl-tar-texto {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 28px 30px 30px;
  transition: background 0.2s;
}

.hdl-acabado-morado .hdl-tar-texto:hover { background: rgba(255, 255, 255, 0.11); }
.hdl-acabado-morado .hdl-tar-titulo { color: #FFFFFF !important; }
.hdl-acabado-morado .hdl-tar-texto p { color: rgba(255, 255, 255, 0.80) !important; }

/* El centro ya no necesita su propio morado: se fundiría con el fondo. */
.hdl-acabado-morado .hdl-tar-video {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 899px) {
  .hdl-acabado-tarjetas::before,
  .hdl-acabado-morado::before { inset: 50px -18px 26px; border-radius: 20px; }
  .hdl-acabado-tarjetas .hdl-tar-texto,
  .hdl-acabado-morado .hdl-tar-texto { padding: 22px 20px 24px; }
}


/* ============================================================
   14 · Página «Cómo funciona»

   Seis pasos en secuencia. Van en una línea de tiempo vertical, no en
   una rejilla de tarjetas: lo que cuenta aquí es el ORDEN, y una
   rejilla lo pierde. Además baja a celular sin cambiar de forma, que
   es donde más se rompen las cuadrículas.

   El número lo pone un contador de CSS y no el texto: si añade,
   quita o reordena pasos desde el editor, la numeración se recalcula
   sola y no queda un «3.» seguido de otro «3.».
   ============================================================ */

.hdl-pasos {
  counter-reset: hdl-paso;
  padding: 10px 0 26px;
}

/* A todo el ancho del marco (1400) los renglones llegaban a 133
   caracteres: más del doble de lo cómodo. La columna de pasos se
   limita, y el espacio que sobra a los lados lo ocupa un índice en
   vez de quedarse vacío. */
.hdl-pasos-lista {
  max-width: 780px;
  margin: 0 auto !important;
}

.hdl-pasos-lista > * { margin: 0 !important; }

/* Con índice: dos columnas. La clase la pone el guion, así que sin
   JavaScript la lista simplemente se queda centrada. */
.hdl-pasos.hdl-con-indice {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px 60px;
  align-items: start;
}

.hdl-con-indice .hdl-pasos-encabezado,
.hdl-con-indice .hdl-pasos-sub { grid-column: 1 / -1; }

.hdl-con-indice .hdl-pasos-lista { margin: 0 !important; max-width: 760px; }

/* El índice acompaña al desplazamiento. */
.hdl-indice {
  position: sticky;
  top: 96px;
  padding: 24px 22px 22px;
  border-radius: 18px;
  background: linear-gradient(165deg, #2D1B52 0%, #3B1E6E 55%, #241541 100%);
  box-shadow: 0 16px 40px rgba(36, 21, 65, 0.22);
}

.hdl-indice-tit {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 14px;
}

.hdl-indice ol { list-style: none; margin: 0; padding: 0; counter-reset: hdl-ind; }

.hdl-indice li { margin: 0 0 3px; }

.hdl-indice a {
  display: flex;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.18s, color 0.18s;
}

.hdl-indice a::before {
  counter-increment: hdl-ind;
  content: counter(hdl-ind, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #FFDE21;
  padding-top: 1px;
}

.hdl-indice a:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }

.hdl-indice a.hdl-aqui {
  background: rgba(255, 255, 255, 0.13);
  color: #FFFFFF;
  font-weight: 600;
}

@media (max-width: 1099px) {
  /* Sin sitio para dos columnas: el índice sobra y la lista manda. */
  .hdl-indice { display: none; }
  .hdl-pasos.hdl-con-indice { display: block; }
  .hdl-con-indice .hdl-pasos-lista { margin: 0 auto !important; max-width: 780px; }
}

.hdl-paso {
  position: relative;
  margin: 0 0 20px !important;
  padding: 26px 30px 28px 92px;
  background: #FFFFFF;
  border: 1px solid #EFEBF8;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(50, 30, 83, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.hdl-paso:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(50, 30, 83, 0.11);
}

.hdl-paso > * { margin: 0 !important; }

/* La chapa con el número. */
.hdl-paso::before {
  counter-increment: hdl-paso;
  content: counter(hdl-paso, decimal-leading-zero);
  position: absolute;
  left: 26px;
  top: 26px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(160deg, #3B1E6E 0%, #241541 100%);
  color: #FFDE21;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(36, 21, 65, 0.28);
}

/* El hilo que une un paso con el siguiente. El último no lo lleva:
   la secuencia termina ahí. */
.hdl-paso::after {
  content: "";
  position: absolute;
  left: 47px;
  top: 78px;
  bottom: -20px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, #D9D2EA 0%, #EFEBF8 100%);
}

.hdl-paso:last-of-type::after { display: none; }

/* El último paso es la meta: se marca con el verde de la marca. */
.hdl-paso:last-of-type::before {
  background: linear-gradient(160deg, #2FD6C3 0%, #17A895 100%);
  color: #0C2E2A;
  box-shadow: 0 6px 16px rgba(47, 214, 195, 0.34);
}

.hdl-paso-titulo {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #1B1030;
  margin: 0 0 8px !important;
}

.hdl-paso p {
  font-size: 16px;
  line-height: 1.7;
  color: #4A4358;
  margin: 0 !important;
}

/* La lista del paso del portal. */
.hdl-paso ul {
  list-style: none;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

.hdl-paso li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 9px;
  font-size: 15.5px;
  line-height: 1.62;
  color: #4A4358;
}

.hdl-paso li:last-child { margin-bottom: 0; }

.hdl-paso li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.56em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #FFDE21;
  border: 1px solid #E8C800;
}

@media (max-width: 767px) {
  .hdl-paso {
    padding: 66px 20px 22px;
    margin-bottom: 16px !important;
  }

  /* En celular la chapa sube a su propia línea: con el texto al lado
     quedarían renglones de tres palabras. */
  .hdl-paso::before { left: 20px; top: 18px; width: 38px; height: 38px; font-size: 13.5px; }
  .hdl-paso::after { left: 38px; top: 62px; bottom: -16px; }
  .hdl-paso-titulo { font-size: 17.5px; }
  .hdl-paso p { font-size: 15.5px; }
}


/* ============================================================
   15 · Tips jurídicos

   Los tips son entradas normales de WordPress en la categoría «Tips
   jurídicos». La página no los lleva escritos: los lista con un bloque
   de Consulta, así que publicar uno nuevo lo hace aparecer solo.

   Aquí van dos cosas: las tarjetas del listado y la página de un tip
   suelto (plantilla single).
   ============================================================ */

/* ---- El listado ---- */

.hdl-tips-hoja { padding: 10px 0 30px; }

/* Ojo con el nombre: «hdl-tips» a secas es la pastilla verde del menú,
   y tanto su CSS como el guion de la bombilla apuntan a ella. Si el
   contenedor de esta página se llamara igual, los títulos de las
   tarjetas saldrían en verde, rotados y con bombilla. */

.hdl-tips-sub {
  margin: 0 auto 34px !important;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: #6B6478;
}

.hdl-tips-rejilla {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.hdl-tips-rejilla > li { margin: 0 !important; }

.hdl-tip-tarjeta {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  background: #FFFFFF;
  border: 1px solid #EFEBF8;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(50, 30, 83, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.hdl-tip-tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(50, 30, 83, 0.13);
}

.hdl-tip-tarjeta > * { margin: 0 !important; }

.hdl-tip-tarjeta-tit {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin: 0 0 10px !important;
}

.hdl-tip-tarjeta-tit a { color: #1B1030; }
.hdl-tip-tarjeta:hover .hdl-tip-tarjeta-tit a { color: #3B1E6E; }

.hdl-tip-tarjeta-tit::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 13px;
  background: linear-gradient(90deg, #3B1E6E, #FFDE21);
}

.hdl-tip-tarjeta-txt {
  font-size: 15.2px;
  line-height: 1.65;
  color: #4A4358;
  /* Empuja la fecha al fondo para que todas queden a la misma altura. */
  flex: 1 1 auto;
}

.hdl-tip-tarjeta-fecha {
  margin-top: 18px !important;
  padding-top: 14px;
  border-top: 1px solid #EFEBF8;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #9A93A8;
}

.hdl-tips-vacio {
  padding: 44px 20px;
  border: 1px dashed #D9D2EA;
  border-radius: 18px;
  color: #6B6478;
  font-size: 16px;
}

.hdl-tips-paginas {
  gap: 10px;
  margin-top: 34px !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13.5px;
}

.hdl-tips-paginas a,
.hdl-tips-paginas .page-numbers {
  padding: 8px 13px;
  border-radius: 10px;
  color: #4A4358;
}

.hdl-tips-paginas a:hover { background: #EFEBF8; color: #241541; }
.hdl-tips-paginas .current { background: #3B1E6E; color: #FFFFFF; }

/* ---- La página de un tip ---- */

.hdl-tip { padding: 0 0 10px; }

.hdl-tip-cabeza {
  max-width: 720px;
  margin: 0 auto 30px !important;
  padding-top: 26px;
  text-align: center;
}

.hdl-tip-cat {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B45AA;
  margin: 0 0 14px !important;
}

.hdl-tip-cat a { color: #6B45AA; }

.hdl-tip-titulo {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #1B1030;
  margin: 0 0 16px !important;
}

.hdl-tip-fecha {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #9A93A8;
  margin: 0 !important;
}

/* El cuerpo, a un ancho cómodo de lectura. */
.hdl-tip-cuerpo {
  max-width: 720px;
  margin: 0 auto !important;
}

.hdl-tip-cuerpo :is(p, li) {
  font-size: 17px;
  line-height: 1.75;
  color: #4A4358;
}

.hdl-tip-cuerpo > * + * { margin-top: 20px !important; }

.hdl-tip-cuerpo :is(h2, h3) {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  color: #1B1030;
  letter-spacing: -0.01em;
  margin-top: 34px !important;
  margin-bottom: 10px !important;
}

.hdl-tip-cuerpo h2 { font-size: 24px; }
.hdl-tip-cuerpo h3 { font-size: 20px; }
.hdl-tip-cuerpo strong { color: #241541; }
.hdl-tip-cuerpo a { color: #6B45AA; text-decoration: underline; }

.hdl-tip-cuerpo blockquote {
  margin: 26px 0 !important;
  padding: 4px 0 4px 22px;
  border-left: 4px solid #FFDE21;
}

/* El aviso legal al pie del artículo: informativo, no asesoría. */
.hdl-tip-pie {
  max-width: 720px;
  margin: 40px auto 44px !important;
  padding-top: 22px;
  border-top: 1px solid #EFEBF8;
}

.hdl-tip-aviso {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.6;
  color: #9A93A8;
}

@media (max-width: 1099px) {
  .hdl-tips-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .hdl-tips-rejilla { grid-template-columns: 1fr; gap: 16px; }
  .hdl-tip-tarjeta { padding: 22px 20px 20px; }
  .hdl-tip-cabeza { padding-top: 16px; margin-bottom: 24px !important; }
  .hdl-tip-cuerpo :is(p, li) { font-size: 16px; }
}


/* ============================================================
   16 · ALEX · la ventana de chat

   El botón flotante «Escríbenos» (.hdl-wa) sigue siendo el mismo de la
   sección 6; lo único que cambia cuando ALEX está encendido es que su
   ícono pasa a ser la cara de ALEX, porque ya no lleva a WhatsApp.

   Todo lo de aquí se dibuja en el pie de página (inc/alex.php) y está
   oculto con el atributo «hidden» hasta que alguien pulsa el botón.
   ============================================================ */

/* Con ALEX encendido el ícono de WhatsApp deja su sitio a la cara de ALEX,
   que el guion mete como <img>. Apagado, no pasa nada de esto y el botón
   sigue siendo el de siempre. */

.hdl-wa a.hdl-wa-alex::before { display: none; }

.hdl-wa-cara {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #2A1550;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}

.hdl-chat {
  position: fixed;
  right: 26px;
  bottom: 96px;
  z-index: 80;
  width: min(384px, calc(100vw - 32px));
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hdl-chat[hidden] { display: none; }

.hdl-chat.hdl-chat-abierto {
  opacity: 1;
  transform: none;
}

.hdl-chat-caja {
  display: flex;
  flex-direction: column;
  max-height: min(608px, calc(100vh - 140px));
  background: #FFFFFF;
  border: 1px solid #E4DFF0;
  border-radius: 20px;
  box-shadow: 0 26px 70px rgba(27, 16, 48, 0.28);
  overflow: hidden;
}

.hdl-chat-caja:focus { outline: none; }

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

.hdl-chat-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(135deg, #3B1E6E 0%, #572C9E 100%);
  color: #FFFFFF;
  flex: 0 0 auto;
}

.hdl-chat-cara {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #2A1550;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.hdl-chat-quien { flex: 1 1 auto; min-width: 0; }

.hdl-chat-nombre {
  margin: 0 !important;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  line-height: 1.2;
}

/* El puntito verde no promete que haya alguien al otro lado: dice que el
   chat está despierto. La frase de al lado ya aclara que es automático. */
.hdl-chat-nombre::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: #2FD6C3;
  vertical-align: middle;
}

.hdl-chat-rol {
  margin: 2px 0 0 !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}

.hdl-chat-cerrar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s;
}

.hdl-chat-cerrar:hover { background: rgba(255, 255, 255, 0.26); }

/* ---- El hilo ---- */

.hdl-chat-hilo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 6px;
  background: #FAF8FD;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}

.hdl-burbuja {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}

.hdl-burbuja-yo { justify-content: flex-end; }

.hdl-burbuja-cara {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #2A1550;
}

.hdl-burbuja-txt {
  max-width: 80%;
  padding: 11px 14px;
  border-radius: 16px;
  font-family: Manrope, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
}

.hdl-burbuja-txt p {
  margin: 0 !important;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.hdl-burbuja-txt p + p { margin-top: 9px !important; }

.hdl-burbuja-alex .hdl-burbuja-txt {
  background: #FFFFFF;
  border: 1px solid #E9E3F4;
  border-bottom-left-radius: 5px;
  color: #241541;
}

.hdl-burbuja-yo .hdl-burbuja-txt {
  background: #3B1E6E;
  border-bottom-right-radius: 5px;
  color: #FFFFFF;
}

.hdl-chat-habeas {
  margin: 2px 0 0 !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
  color: #8E86A0;
  text-align: center;
  padding: 0 8px;
}

/* Los tres puntitos de «está escribiendo» */

.hdl-chat-puntos {
  display: flex;
  gap: 4px;
  padding: 3px 0;
}

.hdl-chat-puntos i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B6ADC8;
  animation: hdlPunto 1.25s ease-in-out infinite;
}

.hdl-chat-puntos i:nth-child(2) { animation-delay: 0.16s; }
.hdl-chat-puntos i:nth-child(3) { animation-delay: 0.32s; }

@keyframes hdlPunto {
  0%, 60%, 100% { opacity: 0.32; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* ---- La salida a WhatsApp ---- */

.hdl-chat-salida {
  flex: 0 0 auto;
  padding: 10px 16px 0;
  background: #FAF8FD;
}

.hdl-chat-salida[hidden] { display: none; }

.hdl-chat-wa {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  background: #FFDE21;
  color: #241541 !important;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.18s;
}

.hdl-chat-wa:hover { transform: translateY(-1px); }

/* ---- El campo ---- */

.hdl-chat-pie {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 8px;
  background: #FAF8FD;
}

.hdl-chat-campo {
  flex: 1 1 auto;
  resize: none;
  max-height: 132px;
  padding: 11px 14px;
  border: 1px solid #DDD5EE;
  border-radius: 13px;
  background: #FFFFFF;
  font-family: Manrope, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: #241541;
}

.hdl-chat-campo:focus {
  outline: none;
  border-color: #6B45AA;
  box-shadow: 0 0 0 3px rgba(107, 69, 170, 0.14);
}

.hdl-chat-campo:disabled {
  background: #F2EFF8;
  color: #8E86A0;
}

.hdl-chat-enviar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: #3B1E6E;
  color: #FFFFFF;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}

.hdl-chat-enviar:hover { background: #572C9E; transform: translateY(-1px); }

.hdl-chat-pie-off .hdl-chat-enviar { opacity: 0.4; pointer-events: none; }

.hdl-chat-aviso {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 16px 13px;
  background: #FAF8FD;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: #9A93A8;
  text-align: center;
}

/* ---- Celular: hoja a pantalla completa ---- */

@media (max-width: 699px) {
  .hdl-chat {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(24px);
  }

  .hdl-chat-caja {
    max-height: 100dvh;
    height: 100dvh;
    border: none;
    border-radius: 0;
  }

  .hdl-chat-hilo { padding: 16px 14px 6px; }
  .hdl-burbuja-txt { max-width: 86%; }

  /* Con el chat abierto la página de atrás no se mueve. */
  .hdl-chat-hay, .hdl-chat-hay body { overflow: hidden; }
  .hdl-chat-hay .hdl-wa { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hdl-chat { transition: none; }
  .hdl-chat-puntos i { animation: none; opacity: 0.6; }
}