/*
Theme Name: Huella Digital
Theme URI: https://conhuelladigital.com
Author: Huella Digital
Description: Tema a medida de Huella Digital. Tu equipo extendido de marketing e IA.
Version: 0.3.0
Requires at least: 6.4
Requires PHP: 8.1
License: Propietario
Text Domain: huella
*/

/* =====================================================================
   Sitio de Huella Digital, versión 3 (octubre de 2026).

   Sale tal cual de la vista previa que aprobó David: mismos valores, solo
   con el prefijo hd- en clases y variables. Todo color, tamaño y espacio
   sale de las variables del bloque :root de aquí abajo.
   ===================================================================== */
/* Una sola página larga, como el sitio actual: crema con orbes cálidos,
   tarjetas de vidrio y una banda oscura. Solo tema claro, igual que el sitio. */
:root {
  color-scheme: light;
  --hd-naranja: #E8590C;
  --hd-naranja-claro: #F37331;
  --hd-naranja-tex: #B8430A;
  --hd-ambar: #F2A100;
  --hd-durazno: #FCD8BE;
  --hd-lila: #6E62C9;
  --hd-lila-fondo: #EFEDFB;
  --hd-crema: #FCFAF7;
  --hd-piedra: #F2EFEA;
  --hd-tinta: #241C15;
  --hd-tinta-media: #4C4038;
  --hd-tinta-suave: #6C6257;
  --hd-tinta-tenue: #837969;
  --hd-blanco: #FFFFFF;
  --hd-oscuro: #1E150F;
  --hd-borde: rgba(36, 28, 21, 0.09);
  --hd-verde: #1E8E5A;
  --hd-fuente: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hd-marco: 1200px;

  /* Vidrio de las páginas de texto (política de privacidad) */
  --hd-vidrio:         linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,255,255,0.975));
  --hd-vidrio-calido:  linear-gradient(180deg, rgba(255,255,255,0.995), rgba(255,250,245,0.98));
  --hd-vidrio-borde:   rgba(255,255,255,0.78);
  --hd-vidrio-difuso:  blur(24px) saturate(160%);
  --hd-sombra-tarjeta: 0 22px 46px -24px rgba(70,38,14,0.26);
  --hd-luz-interna:    inset 0 1px 0 rgba(255,255,255,0.92);

  /* Reestructura (octubre de 2026): valores que se repetían sueltos en las
     tarjetas oscuras y en los botones. */
  --hd-texto-en-oscuro:  rgba(255, 247, 240, 0.72);
  --hd-borde-en-oscuro:  rgba(255, 255, 255, 0.12);
  --hd-borde-en-naranja: rgba(255, 255, 255, 0.6);
  --hd-brillo-naranja:   rgba(232, 89, 12, 0.45);
  --hd-borde-naranja:    rgba(232, 89, 12, 0.45);
  --hd-borde-ambar:      rgba(242, 161, 0, 0.45);
  --hd-tarjeta-en-oscuro: rgba(255, 255, 255, 0.06);
  --hd-texto-en-naranja: #FFE7D6;
  --hd-durazno-suave:    #FFF4EA;
  --hd-sombra-boton:     0 12px 26px -18px rgba(70, 38, 14, 0.4);
  --hd-sombra-sobre-naranja: 0 16px 30px -16px rgba(46, 24, 8, 0.6);

  /* Movimiento (octubre de 2026). La salida es rápida al principio y se
     posa despacio; el resorte se pasa apenas y vuelve, para lo que
     responde al mouse. Ver el bloque "Movimiento" al final. */
  --hd-salida:  cubic-bezier(0.16, 1, 0.3, 1);
  --hd-resorte: linear(0, 0.027, 0.096, 0.193, 0.305, 0.422, 0.536, 0.643, 0.74, 0.823, 0.892, 0.948, 0.992, 1.024, 1.046, 1.06, 1.066, 1.068, 1.066, 1.061, 1.054, 1.046, 1.038, 1.03, 1.023, 1.017, 1.011, 1.007, 1.003, 1, 0.998, 0.997, 0.996, 0.995, 0.995, 0.996, 0.996, 0.996, 0.997, 0.997, 1);
  /* Grano fino: le quita lo plano a los fondos y disimula los escalones
     de los degradados en las pantallas comunes. Oscuro para los fondos
     claros, claro para las bandas oscuras. */
  --hd-grano-oscuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .1 0 0 0 0 .06 0 0 0 .2 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --hd-grano-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 0 0 0 .3 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--hd-fuente);
  color: var(--hd-tinta);
  background: var(--hd-crema);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hd-naranja); outline-offset: 3px; }

.hd-fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    var(--hd-grano-oscuro),
    radial-gradient(48vw 48vw at 70% 10%, rgba(243, 115, 49, 0.16), transparent 62%),
    radial-gradient(40vw 40vw at 0% 0%, rgba(242, 161, 0, 0.08), transparent 64%),
    radial-gradient(50vw 40vw at 20% 110%, rgba(255, 216, 190, 0.35), transparent 66%),
    var(--hd-crema);
}
.hd-marco { max-width: var(--hd-marco); margin: 0 auto; padding-inline: clamp(16px, 5vw, 44px); }
.hd-tramo { padding-block: clamp(56px, 8vw, 96px); }

/* --- Cabecera --- */
.hd-cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding-top: 12px; }
.hd-cabecera__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 12px 10px 16px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 40px -26px rgba(70, 38, 14, 0.3);
}
.hd-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hd-marca svg path { fill: none; stroke: var(--hd-naranja); stroke-width: 5; stroke-linecap: round; }
.hd-marca__nombre { display: flex; flex-direction: column; line-height: 1; }
.hd-marca__nombre b { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.hd-marca__nombre b i { font-style: normal; color: var(--hd-naranja); }
.hd-marca__nombre small { font-weight: 600; font-size: 9px; letter-spacing: 0.34em; color: var(--hd-tinta-tenue); margin-top: 3px; }
.hd-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hd-nav a:not(.hd-cta) { font-size: 13.5px; font-weight: 600; color: var(--hd-tinta-suave); text-decoration: none; }
.hd-nav a:not(.hd-cta):hover { color: var(--hd-naranja); }
/* Con el Blog de vuelta (2026-10-11) el menú tiene ocho elementos: entre
   901 y 1130 px no entraba al lado del logo y, cerca de 900, se partía en
   dos renglones debajo de él. Más juntos, se porta como antes: al lado del
   logo hasta unos 1050 px y, más angosto, entero en un renglón debajo. */
@media (min-width: 901px) and (max-width: 1130px) {
  .hd-nav { gap: 14px; }
  .hd-nav a:not(.hd-cta) { font-size: 13px; }
}

/* --- Botones --- */
.hd-cta, .hd-cta-fantasma {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 16px;
  font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
  /* translate y no transform: transform lo maneja js/movimiento.js (el
     imán), y una transición encima lo haría ir con retraso. */
  transition: translate 0.6s var(--hd-resorte), box-shadow 0.4s var(--hd-salida), background-size 0.6s var(--hd-salida);
}
.hd-cta {
  color: var(--hd-blanco);
  background: linear-gradient(135deg, var(--hd-naranja-claro), var(--hd-naranja));
  box-shadow: 0 16px 28px -12px rgba(232, 89, 12, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hd-cta--chico { padding: 10px 16px; font-size: 13px; border-radius: 12px; }
.hd-cta-fantasma {
  color: var(--hd-tinta); background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hd-borde);
  box-shadow: 0 12px 26px -18px rgba(70, 38, 14, 0.4);
}
.hd-cta:hover, .hd-cta-fantasma:hover { translate: 0 -2px; }

/* --- Hero --- */
.hd-hero { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 4vw, 56px); padding-block: clamp(48px, 7vw, 88px) clamp(40px, 6vw, 72px); }
.hd-hero__texto { flex: 6 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hd-antetitulo {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hd-tinta-media);
}
.hd-antetitulo::after { content: ""; width: 64px; height: 1px; background: var(--hd-borde); }
.hd-hero h1 {
  font-size: clamp(34px, 4.3vw, 54px); line-height: 1.08; letter-spacing: -0.035em;
  font-weight: 300; color: var(--hd-tinta);
}
.hd-hero h1 strong { font-weight: 800; }
.hd-hero h1 .hd-lograr {
  display: inline-block; position: relative;
  font-weight: 800; color: var(--hd-naranja); font-size: 1.1em; letter-spacing: -0.04em;
  padding-bottom: 0.12em;
}
.hd-hero h1 .hd-lograr svg { position: absolute; left: 0; bottom: -0.08em; width: 62%; height: 0.24em; overflow: visible; }
.hd-hero h1 .hd-lograr path { fill: none; stroke: var(--hd-naranja); stroke-width: 6; stroke-linecap: round; }
.hd-hero__bajada { font-size: 18px; line-height: 1.65; color: var(--hd-tinta-media); max-width: 34rem; }
.hd-hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* A la derecha, la escena del hero: el logo apilado y Thera, que sale
   caminando desde atrás de él (js/movimiento.js). Reemplazó a las tres
   tarjetas de los pasos, que repetían "Cómo trabajamos" (2026-10-09). Se
   mide en píxeles de logo-huella-vertical.png (737 x 714) dentro de una
   escena de 1110 x 714: todo va en porcentaje para que logo y video
   escalen juntos. */
.hd-hero__figura { flex: 5 1 380px; min-width: 0; display: grid; place-items: center; }
/* La escena es la protagonista: en la portada la columna de la derecha
   crece. La página de Thera usa el mismo hero y no cambia. */
.home .hd-hero__texto { flex: 1 1 470px; }
.home .hd-hero__figura { flex: 1.3 1 560px; }
.hd-escena { position: relative; width: 100%; max-width: 680px; aspect-ratio: 1110 / 714; }
/* Thera va detrás del logo: la parte que queda tapada ya viene recortada
   en el video, justo debajo del trazo naranja y del borde de "HUELLA.". */
.hd-escena__thera { position: absolute; z-index: 0; left: 43.24%; top: 3.36%; width: 56.76%; height: 90.2%; }
.hd-escena__lienzo, .hd-escena__quieta { position: absolute; inset: 0; width: 100%; height: 100%; }
.hd-escena__lienzo { visibility: hidden; }
/* Thera quieta, saludando: la ven quienes no tienen movimiento. Con el
   movimiento la reemplaza el lienzo, que termina en esa misma pose. */
.hd-js .hd-escena__quieta { visibility: hidden; }
/* El video es solo la fuente del lienzo. Queda en la página y no con
   display: none, porque algunos navegadores no decodifican un video oculto. */
.hd-escena__video, .hd-thera-chica__video { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hd-escena__logo { position: absolute; z-index: 1; left: 0; top: 0; width: 66.4%; }
.hd-escena__logo img { display: block; width: 100%; height: auto; }
/* Los arcos del logo apilado son el isotipo al doble (636 x 480), a 43 y
   12 px del borde: el trazo animado va justo encima. */
.hd-escena__arcos {
  position: absolute; left: calc(43 / 737 * 100%); top: calc(12 / 714 * 100%);
  width: calc(636 / 737 * 100%); height: auto; visibility: hidden;
}
.hd-escena__arcos path { fill: none; stroke: var(--hd-naranja); stroke-width: 19; stroke-linecap: round; }

/* --- Rótulo de sección --- */
.hd-rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hd-naranja-tex); margin-bottom: 14px; }
.hd-h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; max-width: 22ch; }
.hd-h2 em { font-style: normal; color: var(--hd-naranja); }
.hd-lede { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--hd-tinta-suave); max-width: 40rem; }

/* --- Banda oscura: el dolor --- */
.hd-banda {
  border-radius: 28px; padding: clamp(28px, 5vw, 56px); color: var(--hd-blanco);
  background:
    var(--hd-grano-claro),
    radial-gradient(60% 90% at 95% -10%, rgba(232, 89, 12, 0.45), transparent 66%),
    radial-gradient(50% 80% at -5% 110%, rgba(242, 161, 0, 0.2), transparent 70%),
    var(--hd-oscuro);
}
.hd-banda .hd-rotulo { color: var(--hd-durazno); }
.hd-banda .hd-h2 { color: var(--hd-blanco); max-width: 20ch; }
/* Cada frase arranca su propia línea, en cualquier pantalla. */
.hd-h2--dos-frases { max-width: none !important; }
.hd-h2--dos-frases span, .hd-h2--dos-frases em { display: block; }
.hd-sintomas { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hd-sintoma { min-width: 0; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.hd-sintoma h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.hd-sintoma p { font-size: 14.5px; line-height: 1.6; color: rgba(255, 247, 240, 0.72); }
.hd-banda__cierre { margin-top: 28px; font-size: 16px; line-height: 1.65; color: var(--hd-durazno); max-width: 46rem; }

/* --- Cómo trabajamos --- */
.hd-recorrido { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hd-paso {
  min-width: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: 22px; background: var(--hd-blanco); border: 1px solid var(--hd-borde);
  box-shadow: 0 22px 46px -30px rgba(70, 38, 14, 0.3);
}
.hd-paso__cab { display: flex; align-items: center; gap: 12px; }
.hd-paso__num {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: var(--hd-blanco); background: var(--hd-naranja);
}
.hd-paso__linea { flex: 1; height: 2px; background: linear-gradient(90deg, var(--hd-naranja), rgba(232, 89, 12, 0)); }
.hd-paso h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.hd-paso__que { font-size: 15px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-paso__lleva { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hd-borde); }
.hd-paso__lleva b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-tinta-tenue); margin-bottom: 10px; }
.hd-paso__lleva ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hd-paso__lleva li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--hd-tinta-media); }
.hd-paso__lleva li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--hd-naranja); margin-top: 8px; }

.hd-aparte { margin-top: 20px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.hd-aparte > div { min-width: 0; padding: 26px 28px; border-radius: 22px; display: flex; gap: 18px; align-items: flex-start; }
.hd-aparte > div > div { min-width: 0; }
/* Un punto más de color que el resto de la sección, para que se vean,
   sin competir con las tarjetas blancas de los pasos. */
.hd-aparte__ia { background: #ECE6F8; border: 1px solid #DCD3F2; }
.hd-aparte__ia .hd-aparte__icono { color: var(--hd-lila); }
.hd-aparte__solo { background: #FFE2CC; border: 1px solid #FBCFAE; }
.hd-aparte__solo .hd-aparte__icono { color: var(--hd-naranja-tex); }
.hd-aparte__icono {
  width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: var(--hd-blanco); box-shadow: 0 10px 20px -14px rgba(70, 38, 14, 0.5);
}
/* La invitación a Servicios: texto oscuro y el botón al lado; en el
   celular el botón baja solo. */
.hd-puntual { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hd-puntual p { min-width: 0; font-size: 17px; line-height: 1.6; color: var(--hd-tinta); }
.hd-aparte h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.hd-aparte p { font-size: 14.5px; line-height: 1.65; color: var(--hd-tinta-media); }

/* --- Lo que usamos en casa --- */
.hd-casa { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hd-casa__item { min-width: 0; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--hd-borde); }
.hd-casa__item h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.hd-casa__item p { font-size: 14px; line-height: 1.6; color: var(--hd-tinta-suave); }

/* --- Equipo --- */
.hd-equipo { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hd-persona { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hd-persona__foto {
  aspect-ratio: 4 / 5; max-width: 100%; border-radius: 22px;
  display: grid; place-items: center; text-align: center; padding: 16px;
  border: 2px dashed rgba(36, 28, 21, 0.18); background: var(--hd-piedra);
  font-size: 13px; color: var(--hd-tinta-tenue);
}
/* Las fotos llegan con fondos y luces distintas: el recorte igual, el
   marco blanco y la sombra suave las hacen ver como una serie. */
.hd-persona__retrato {
  display: block; width: 85%; max-width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 22px; border: 6px solid var(--hd-blanco); background: var(--hd-piedra);
  box-shadow: 0 24px 44px -28px rgba(70, 38, 14, 0.45);
}
.hd-persona h3 { font-size: 19px; font-weight: 700; }
.hd-persona__rol { font-size: 13px; font-weight: 600; color: var(--hd-naranja-tex); margin-top: 2px; }
.hd-persona p { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }

/* --- Lema, antes del cierre ---
   El isotipo mide un poco más que las dos líneas de la frase juntas, para
   que se lean como una sola pieza y no como un adorno chico arriba. */
.hd-lema { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 8vw, 96px); display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 32px); text-align: center; }
.hd-lema__isotipo { width: clamp(110px, 13vw, 170px); height: auto; max-width: 100%; }
.hd-lema__frase { font-size: clamp(42px, 7vw, 92px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; color: var(--hd-tinta); text-wrap: balance; }
/* inline-block, para que el punto pueda caer como un sello (js/movimiento.js). */
.hd-lema__punto { display: inline-block; color: var(--hd-naranja); }

/* --- Cierre --- */
.hd-cierre {
  border-radius: 28px; padding: clamp(32px, 6vw, 64px);
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
  background: var(--hd-grano-claro), linear-gradient(135deg, var(--hd-naranja-claro), var(--hd-naranja)); color: var(--hd-blanco);
}
.hd-cierre > div { flex: 1 1 380px; min-width: 0; }
.hd-cierre .hd-h2 { color: var(--hd-blanco); }
.hd-cierre p { margin-top: 14px; font-size: 17px; line-height: 1.65; color: #FFE7D6; max-width: 34rem; }
.hd-cta--blanco { background: var(--hd-blanco); color: var(--hd-naranja-tex); box-shadow: 0 16px 30px -16px rgba(46, 24, 8, 0.6); }

.hd-pie { margin-top: 64px; background: var(--hd-grano-claro), var(--hd-oscuro); color: rgba(255, 247, 240, 0.6); border-radius: 28px 28px 0 0; }
.hd-pie .hd-marco { padding-block: 44px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.hd-pie__lema { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--hd-ambar); }
.hd-pie small { font-size: 13px; }


@media (max-width: 900px) {
  .hd-sintomas, .hd-recorrido, .hd-casa, .hd-equipo, .hd-aparte { grid-template-columns: 1fr; }
  .hd-equipo { grid-template-columns: repeat(2, 1fr); }
  .hd-nav a:not(.hd-cta) { display: none; }
}
@media (max-width: 560px) {
  .hd-equipo { grid-template-columns: 1fr; }
  .hd-persona__foto { aspect-ratio: 16 / 10; }
  .hd-persona__retrato { aspect-ratio: 1 / 1; object-position: center 25%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- Pie con contactos (todas las páginas) --- */
.hd-pie__interior { display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between; align-items: flex-start; }
.hd-pie__marca { flex: 1 1 280px; min-width: 0; }
.hd-pie__donde { margin-top: 10px; font-size: 14px; color: rgba(255, 247, 240, 0.6); }
.hd-pie__redes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 12px 32px; }
.hd-pie__redes a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 247, 240, 0.8); text-decoration: none; overflow-wrap: anywhere; }
.hd-pie__redes a:hover { color: var(--hd-ambar); }
.hd-pie__redes svg { flex: none; color: var(--hd-ambar); }
.hd-pie .hd-marco.hd-pie__legal { padding-block: 0 28px; display: block; }
.hd-pie__legal small { display: block; padding-top: 20px; border-top: 1px solid rgba(255, 247, 240, 0.1); font-size: 12.5px; color: rgba(255, 247, 240, 0.45); }
@media (max-width: 560px) { .hd-pie__redes { grid-template-columns: 1fr; } }

/* --- Logo real y acceso de clientes --- */
.hd-marca__logo { display: block; height: 34px; width: auto; }
/* Oscuro como la banda del problema, con su brillo naranja en la esquina. */
.hd-nav a.hd-nav__acceso {
  color: var(--hd-blanco); padding: 9px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(90% 140% at 100% 0%, rgba(232, 89, 12, 0.45), transparent 60%), var(--hd-oscuro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 20px -12px rgba(30, 21, 15, 0.7);
}
.hd-nav a.hd-nav__acceso { transition: translate 0.6s var(--hd-resorte), color 0.3s; }
.hd-nav a.hd-nav__acceso:hover { color: var(--hd-durazno); translate: 0 -1px; }
@media (max-width: 900px) {
  .hd-nav a.hd-nav__acceso { display: inline-block; }
  .hd-marca__logo { height: 28px; }
}

/* Íconos de las tarjetas del dolor: ámbar sobre vidrio oscuro, como los
   tildes del paso 3 en el hero. */
.hd-sintoma__icono {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
  display: grid; place-items: center;
  color: var(--hd-ambar); background: rgba(242, 161, 0, 0.12); border: 1px solid rgba(242, 161, 0, 0.22);
}

/* --- Ventana "Agenda tu llamada" --- */
.hd-llamada {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px;
  background: linear-gradient(180deg, var(--hd-blanco), #F7F2EC); color: var(--hd-tinta);
  box-shadow: 0 40px 80px -30px rgba(30, 21, 15, 0.6);
}
.hd-llamada::backdrop { background: rgba(30, 21, 15, 0.55); backdrop-filter: blur(6px); }
.hd-llamada__form { position: relative; padding: 34px 32px 30px; }
.hd-llamada__form > div, .hd-llamada__campos { display: flex; flex-direction: column; }
/* En Contacto el formulario vive en la tarjeta de la página: sin el
   relleno ni la cruz de la ventana. */
.hd-llamada__form--pagina { padding: 0; }
.hd-llamada__form--pagina h2, .hd-llamada__form--pagina h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.hd-llamada__logo { height: 38px; width: auto; align-self: flex-start; margin-bottom: 22px; }
.hd-llamada h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.hd-llamada__sub { margin: 10px 0 8px; font-size: 15px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-llamada__campos label { margin-top: 16px; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.hd-llamada__campos input, .hd-llamada__campos select {
  width: 100%; min-width: 0; font-family: inherit; font-size: 15px; color: var(--hd-tinta); background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(36, 28, 21, 0.14); border-radius: 12px; padding: 13px 14px;
}
.hd-llamada__campos input:focus, .hd-llamada__campos select:focus { border-color: var(--hd-naranja); outline: 2px solid rgba(232, 89, 12, 0.25); outline-offset: 0; }
.hd-llamada__tel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hd-llamada__enviar {
  margin-top: 22px; padding: 15px; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700; color: var(--hd-blanco);
  background: linear-gradient(135deg, var(--hd-ambar), var(--hd-naranja));
  box-shadow: 0 16px 28px -12px rgba(232, 89, 12, 0.7);
}
.hd-llamada__cerrar {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--hd-tinta-suave); background: rgba(36, 28, 21, 0.07);
}
.hd-llamada__error { margin-top: 14px; font-size: 13.5px; color: var(--hd-naranja-tex); }
.hd-llamada__nota { font-size: 13px; color: var(--hd-tinta-tenue); }
/* hidden tiene que ganarle a los display de arriba: el paso "Listo" de la
   ventana se veía junto al formulario. */
[hidden] { display: none !important; }

/* Íconos de "Por dentro": el durazno de los pasos, sobre tarjeta clara. */
.hd-casa__icono {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 14px;
  display: grid; place-items: center; color: var(--hd-naranja-tex); background: #FFE9D8;
}

/* --- Widget flotante de Thera (todas las páginas) --- */
.hd-tw { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hd-tw__boton {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px 7px 7px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--hd-tinta);
  background: var(--hd-blanco); border: 1px solid var(--hd-borde); box-shadow: 0 18px 36px -16px rgba(70, 38, 14, 0.45);
}
.hd-tw__boton { transition: translate 0.6s var(--hd-resorte), box-shadow 0.4s var(--hd-salida); }
.hd-tw__boton:hover { translate: 0 -2px; box-shadow: 0 24px 40px -16px rgba(70, 38, 14, 0.5); }
.hd-tw__panel {
  width: min(370px, calc(100vw - 32px)); height: min(520px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: var(--hd-blanco); border: 1px solid var(--hd-borde); box-shadow: 0 34px 70px -28px rgba(30, 21, 15, 0.5);
}
.hd-tw__barra { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--hd-borde); background: #FFF8F2; }
/* La cara de Thera en el botón y en la barra del chat (antes, el logo). */
.hd-tw__avatar { width: 36px; height: 36px; flex: none; }
.hd-chat-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hd-chat-id img { width: 36px; height: 36px; flex: none; }
.hd-chat-id b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; color: var(--hd-tinta); }
.hd-chat-id small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--hd-tinta-suave); }
.hd-chat-id small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-verde); }
.hd-tw__cerrar { width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer; font-size: 20px; color: var(--hd-tinta-suave); background: rgba(36, 28, 21, 0.06); }
.hd-tw__msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--hd-crema); }
.hd-tw__msg { max-width: 85%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.hd-tw__msg--bot { align-self: flex-start; background: var(--hd-blanco); border: 1px solid var(--hd-borde); border-bottom-left-radius: 5px; }
.hd-tw__msg--user { align-self: flex-end; color: var(--hd-blanco); background: linear-gradient(135deg, var(--hd-naranja-claro), var(--hd-naranja)); border-bottom-right-radius: 5px; }
.hd-tw__msg--esperando { color: var(--hd-tinta-tenue); font-style: italic; }
.hd-tw__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--hd-borde); }
.hd-tw__input { flex: 1; min-width: 0; font-family: inherit; font-size: 14.5px; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(36, 28, 21, 0.16); color: var(--hd-tinta); background: var(--hd-blanco); }
.hd-tw__input:focus { border-color: var(--hd-naranja); outline: 2px solid rgba(232, 89, 12, 0.25); }
.hd-tw__enviar { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--hd-blanco); background: var(--hd-naranja); }
.hd-tw__aviso { padding: 0 14px 12px; font-size: 11.5px; color: var(--hd-tinta-tenue); }
.hd-tw__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- Blog --- */
.hd-cabeza-pagina { padding-block: clamp(48px, 7vw, 80px) clamp(24px, 4vw, 40px); }
.hd-cabeza-pagina h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 300; max-width: 18ch; text-wrap: balance; }
.hd-cabeza-pagina h1 strong { font-weight: 800; color: var(--hd-naranja); }
.hd-etiqueta-ejemplo {
  display: inline-block; margin-bottom: 16px; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--hd-naranja-tex); background: #FFE9D8;
}
.hd-blog-cabeza { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; }
.hd-blog-cabeza > div { min-width: 0; }
.hd-notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.hd-nota {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  border-radius: 22px; background: var(--hd-blanco); border: 1px solid var(--hd-borde);
  box-shadow: 0 22px 46px -32px rgba(70, 38, 14, 0.3); transition: translate 0.6s var(--hd-resorte), box-shadow 0.5s var(--hd-salida);
}
.hd-nota:hover { translate: 0 -4px; box-shadow: 0 30px 56px -30px rgba(70, 38, 14, 0.4); }
/* Rayado suave: deja claro que ahí va una imagen que todavía no existe. */
.hd-nota__portada, .hd-articulo__portada {
  aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center;
  font-size: 13px; color: var(--hd-tinta-tenue);
  background: repeating-linear-gradient(135deg, var(--hd-piedra) 0 14px, #ECE7E0 14px 28px);
}
.hd-nota__texto { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.hd-nota__cat { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-naranja-tex); }
.hd-nota h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.hd-nota p { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-nota__meta { font-size: 12.5px; color: var(--hd-tinta-tenue); }
.hd-notas__vacio {
  min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 28px;
  border-radius: 22px; border: 2px dashed rgba(36, 28, 21, 0.16);
}
.hd-notas__vacio h3 { font-size: 18px; font-weight: 700; }
.hd-notas__vacio p { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }

.hd-articulo { max-width: 760px; margin: 0 auto; padding-block: clamp(36px, 6vw, 64px) 0; }
.hd-migas { font-size: 13px; color: var(--hd-tinta-tenue); margin-bottom: 18px; }
.hd-migas a { color: var(--hd-naranja-tex); text-decoration: none; font-weight: 600; }
.hd-articulo__cabeza { display: flex; flex-direction: column; gap: 14px; }
.hd-articulo h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.hd-articulo__bajada { font-size: 19px; line-height: 1.6; color: var(--hd-tinta-media); }
.hd-articulo__meta { font-size: 13.5px; color: var(--hd-tinta-tenue); }
.hd-articulo__portada { margin-top: 32px; border-radius: 22px; }
.hd-articulo__cuerpo { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; font-size: 17.5px; line-height: 1.8; color: var(--hd-tinta-media); }
.hd-articulo__cuerpo h2 { margin-top: 16px; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: var(--hd-tinta); }
.hd-articulo__cuerpo ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.hd-articulo__cuerpo li::marker { color: var(--hd-naranja); }
.hd-articulo__cuerpo blockquote {
  margin: 8px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--hd-naranja);
  font-size: 22px; line-height: 1.45; font-weight: 600; color: var(--hd-tinta);
}
.hd-articulo__llamada {
  margin-top: 44px; padding: clamp(24px, 4vw, 36px); border-radius: 24px; color: var(--hd-blanco);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  background: var(--hd-grano-claro), radial-gradient(60% 90% at 95% -10%, rgba(232, 89, 12, 0.45), transparent 66%), var(--hd-oscuro);
}
.hd-articulo__llamada > div { flex: 1 1 300px; min-width: 0; }
.hd-articulo__llamada h2 { font-size: 22px; font-weight: 700; }
.hd-articulo__llamada p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: rgba(255, 247, 240, 0.75); }
.hd-articulo__autor { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hd-borde); display: flex; align-items: center; gap: 16px; }
.hd-articulo__autor img { width: 52px; height: auto; flex: none; }
.hd-articulo__autor div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--hd-tinta-suave); }
.hd-articulo__autor b { font-size: 15.5px; color: var(--hd-tinta); }

/* Logo en blanco del pie, arriba del lema. */
.hd-pie__logo { display: block; height: 42px; width: auto; max-width: 100%; margin-bottom: 18px; }

/* --- Íconos con volumen sutil ---
   Luz desde arriba: un brillo en el borde superior, una sombra interna
   abajo y una sombra suave hacia afuera. El trazo también lleva una sombra
   mínima, para que parezca apoyado sobre la pastilla. "body" delante gana a
   los estilos propios de Servicios y Contacto, que van después en la página. */
body .hd-casa__icono, body .hd-servicio__icono, body .hd-canal__icono {
  background: linear-gradient(160deg, #FFF4EA 0%, #FFE2CB 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 6px rgba(232, 89, 12, 0.12), 0 8px 16px -10px rgba(184, 67, 10, 0.55);
}
body .hd-aparte__icono {
  background: linear-gradient(160deg, #FFFFFF 0%, #F3EEE8 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(70, 38, 14, 0.08), 0 10px 18px -10px rgba(70, 38, 14, 0.5);
}
body .hd-grupo__icono {
  background: linear-gradient(160deg, #F7893F 0%, #E8590C 60%, #C94A06 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 8px rgba(120, 40, 0, 0.3), 0 14px 24px -12px rgba(232, 89, 12, 0.75);
}
body .hd-sintoma__icono {
  background: linear-gradient(160deg, rgba(242, 161, 0, 0.26) 0%, rgba(242, 161, 0, 0.08) 100%);
  border: 1px solid rgba(242, 161, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.25), 0 10px 18px -10px rgba(0, 0, 0, 0.6);
}
.hd-casa__icono svg, .hd-servicio__icono svg, .hd-canal__icono svg, .hd-aparte__icono svg, .hd-grupo__icono svg, .hd-sintoma__icono svg {
  filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.18));
}
/* Contacto tiene una regla propia que dejaba el botón angosto. */
body .hd-llamada__form--pagina .hd-llamada__enviar { align-self: stretch; padding: 15px; }

/* --- Menú del celular ---
   Hasta 900 px el menú se esconde detrás del botón de tres rayas. Abierto,
   baja debajo del logo con cada sección en su renglón y los dos botones de
   ancho completo al final. */
.hd-menu-boton { display: none; }
@media (max-width: 900px) {
  .hd-menu-boton {
    display: grid; align-content: center; justify-items: center; gap: 5px; margin-left: auto;
    width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--hd-borde); background: var(--hd-blanco);
    box-shadow: inset 0 1px 0 #fff, 0 8px 16px -12px rgba(70, 38, 14, 0.5);
  }
  .hd-menu-boton span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--hd-tinta); transition: transform 0.2s, opacity 0.2s; }
  .hd-abierta .hd-menu-boton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hd-abierta .hd-menu-boton span:nth-child(2) { opacity: 0; }
  .hd-abierta .hd-menu-boton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hd-cabecera__barra .hd-nav { display: none; }
  .hd-cabecera__barra.hd-abierta .hd-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%;
    padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--hd-borde);
  }
  .hd-cabecera__barra.hd-abierta .hd-nav a { display: flex; align-items: center; }
  .hd-cabecera__barra.hd-abierta .hd-nav a:not(.hd-cta):not(.hd-nav__acceso) { padding: 12px 6px; font-size: 16px; border-radius: 10px; }
  .hd-cabecera__barra.hd-abierta .hd-nav a:not(.hd-cta):not(.hd-nav__acceso)[aria-current] { color: var(--hd-naranja-tex); }
  .hd-cabecera__barra.hd-abierta .hd-nav a.hd-nav__acceso,
  .hd-cabecera__barra.hd-abierta .hd-nav a.hd-cta { justify-content: center; padding: 14px; font-size: 15px; margin-top: 6px; }
}

/* --- "Por dentro" en oscuro ---
   Mismo fondo que la banda del problema; las tarjetas pasan a vidrio oscuro
   y los íconos al ámbar, igual que allá. */
.hd-banda--por-dentro { margin-bottom: clamp(56px, 8vw, 96px); }
.hd-banda--por-dentro .hd-h2 { max-width: 22ch; }
.hd-banda--por-dentro .hd-lede { color: rgba(255, 247, 240, 0.72); }
.hd-banda--por-dentro .hd-casa__item { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.hd-banda--por-dentro .hd-casa__item h3 { color: var(--hd-blanco); }
.hd-banda--por-dentro .hd-casa__item p { color: rgba(255, 247, 240, 0.72); }
body .hd-banda--por-dentro .hd-casa__icono {
  color: var(--hd-ambar);
  background: linear-gradient(160deg, rgba(242, 161, 0, 0.26) 0%, rgba(242, 161, 0, 0.08) 100%);
  border: 1px solid rgba(242, 161, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.25), 0 10px 18px -10px rgba(0, 0, 0, 0.6);
}
.hd-banda--por-dentro .hd-puntual p { color: var(--hd-blanco); }


/* ===== Servicios ===== */

/* Lo propio de Servicios: cada grupo lleva su nombre a la izquierda y sus
   tarjetas a la derecha, así los 6 servicios se leen en 3 bloques. */
.hd-cabeza-pagina { padding-block: clamp(48px, 7vw, 80px) clamp(24px, 4vw, 40px); }
.hd-cabeza-pagina h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 300; max-width: 18ch; text-wrap: balance; }
.hd-cabeza-pagina h1 strong { font-weight: 800; color: var(--hd-naranja); }
.hd-grupo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 28px;
  padding-block: 36px; border-top: 1px solid var(--hd-borde);
}
.hd-grupo__nombre h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.hd-grupo__nombre p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.hd-servicio {
  min-width: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: 20px; background: var(--hd-blanco); border: 1px solid var(--hd-borde);
  box-shadow: 0 22px 46px -32px rgba(70, 38, 14, 0.3);
}
.hd-servicio h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.hd-servicio > p { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-servicio ul { margin-top: auto; padding: 14px 0 0; border-top: 1px solid var(--hd-borde); list-style: none; display: flex; flex-direction: column; gap: 7px; }
.hd-servicio li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--hd-tinta-media); }
.hd-servicio li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--hd-naranja); margin-top: 7px; }
.hd-servicio--ancho { flex-direction: row; flex-wrap: wrap; gap: 12px 32px; }
.hd-servicio--ancho > div { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hd-servicio--ancho ul { margin-top: 0; padding-top: 0; border-top: 0; }
.hd-grupo__icono {
  width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; display: grid; place-items: center;
  color: var(--hd-blanco); background: linear-gradient(135deg, var(--hd-naranja-claro), var(--hd-naranja));
  box-shadow: 0 14px 26px -14px rgba(232, 89, 12, 0.7);
}
.hd-servicio__icono {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: var(--hd-naranja-tex); background: #FFE9D8;
}
.hd-servicio--ancho .hd-servicio__icono { flex: none; }
@media (max-width: 760px) {
  .hd-grupo { grid-template-columns: 1fr; gap: 18px; }
}


/* ===== Contacto ===== */

/* Contacto: a la izquierda los canales directos, a la derecha el
   formulario, como la página de contacto del sitio actual. */
.hd-cabeza-pagina { padding-block: clamp(48px, 7vw, 80px) clamp(24px, 4vw, 40px); }
.hd-cabeza-pagina h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 300; max-width: 16ch; text-wrap: balance; }
.hd-cabeza-pagina h1 strong { font-weight: 800; color: var(--hd-naranja); }
.hd-contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.hd-canales { display: flex; flex-direction: column; gap: 12px; }
.hd-canal {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px;
  background: var(--hd-blanco); border: 1px solid var(--hd-borde); text-decoration: none;
  transition: translate 0.6s var(--hd-resorte), border-color 0.3s, box-shadow 0.5s var(--hd-salida);
}
.hd-canal:hover { translate: 0 -2px; border-color: var(--hd-naranja); box-shadow: 0 20px 40px -28px rgba(70, 38, 14, 0.45); }
.hd-canal__icono { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #FFF1E6; color: var(--hd-naranja-tex); }
.hd-canal__texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hd-canal__texto b { font-size: 15px; font-weight: 600; }
.hd-canal__texto span { font-size: 14px; color: var(--hd-tinta-suave); overflow-wrap: anywhere; }
.hd-canal--destacado { background: var(--hd-oscuro); border-color: var(--hd-oscuro); color: var(--hd-blanco); }
.hd-canal--destacado .hd-canal__icono { background: rgba(255, 255, 255, 0.1); color: var(--hd-ambar); }
.hd-canal--destacado .hd-canal__texto span { color: rgba(255, 247, 240, 0.7); }
.hd-donde { margin-top: 8px; font-size: 14.5px; color: var(--hd-tinta-suave); display: flex; align-items: center; gap: 10px; }
.hd-donde::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hd-naranja); flex: none; }
.hd-formulario { padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--hd-piedra); display: flex; flex-direction: column; gap: 16px; }
.hd-formulario h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.hd-formulario > p { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-campo { display: flex; flex-direction: column; gap: 6px; }
.hd-campo label { font-size: 13.5px; font-weight: 600; }
.hd-campo input, .hd-campo textarea {
  font-family: inherit; font-size: 15px; color: var(--hd-tinta); background: var(--hd-blanco);
  border: 1px solid rgba(36, 28, 21, 0.16); border-radius: 12px; padding: 13px 15px; resize: vertical;
}
.hd-campo input:focus, .hd-campo textarea:focus { border-color: var(--hd-naranja); outline: none; }
.hd-campo input:focus-visible, .hd-campo textarea:focus-visible { outline: 3px solid var(--hd-naranja); outline-offset: 2px; }
.hd-formulario button { align-self: flex-start; border: 0; cursor: pointer; }
.hd-aviso { font-size: 13.5px; color: var(--hd-naranja-tex); }
@media (max-width: 860px) { .hd-contacto { grid-template-columns: 1fr; } }


/* =====================================================================
   Páginas de texto (page.php): la política de privacidad.
   El contenido se escribe en HTML con estas clases (Web/contenido/).
   ===================================================================== */
.hd-texto { max-width: 54rem; padding-block: clamp(40px, 7vw, 80px); }
.hd-texto__titulo { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; }
.hd-texto__fecha { margin-top: 0.9rem; font-size: 0.85rem; color: var(--hd-tinta-tenue); }
.hd-texto__contenido { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.hd-vaso {
  border-radius: 24px;
  padding: clamp(1.5rem, 2.6vw, 1.9rem);
  min-width: 0;
  background: var(--hd-vidrio);
  backdrop-filter: var(--hd-vidrio-difuso);
  -webkit-backdrop-filter: var(--hd-vidrio-difuso);
  border: 1px solid var(--hd-vidrio-borde);
  box-shadow: var(--hd-sombra-tarjeta), var(--hd-luz-interna);
}
.hd-texto__claves { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.hd-texto__clave {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem 1.3rem; border-radius: 18px;
  background: var(--hd-vidrio-calido); border: 1px solid var(--hd-vidrio-borde);
  box-shadow: var(--hd-sombra-tarjeta), var(--hd-luz-interna);
}
.hd-texto__clave strong { font-size: 0.98rem; font-weight: 700; color: var(--hd-tinta); }
.hd-texto__clave span { font-size: 0.88rem; line-height: 1.55; color: var(--hd-tinta-suave); }
.hd-texto__cuerpo { padding: clamp(1.6rem, 3.4vw, 2.6rem); }
.hd-texto__cuerpo h2 { margin: 2.2rem 0 0.7rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--hd-tinta); }
.hd-texto__cuerpo h2:first-child { margin-top: 0; }
.hd-texto__cuerpo p, .hd-texto__cuerpo li { font-size: 1rem; line-height: 1.75; color: var(--hd-tinta-suave); }
.hd-texto__cuerpo p { margin: 0 0 0.9rem; }
.hd-texto__cuerpo ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.hd-texto__cuerpo li { margin-bottom: 0.45rem; }
.hd-texto__cuerpo li::marker { color: var(--hd-naranja); }
.hd-texto__cuerpo strong { color: var(--hd-tinta-media); }
.hd-texto__cuerpo a { color: var(--hd-naranja-tex); font-weight: 600; text-decoration: none; }
.hd-texto__cuerpo a:hover { text-decoration: underline; }
.hd-texto__cuerpo blockquote { margin: 1.2rem 0 0.4rem; padding: 1.1rem 1.3rem; border-radius: 16px; background: var(--hd-piedra); border-left: 3px solid var(--hd-naranja); }
.hd-texto__cuerpo blockquote p { font-size: 0.9rem; line-height: 1.65; }
.hd-texto__cuerpo blockquote p:last-child { margin-bottom: 0; }

/* El contenido de un artículo sale del editor de WordPress: imágenes y
   párrafos sueltos tienen que respetar el ancho de lectura. */
.hd-articulo__cuerpo img { max-width: 100%; height: auto; border-radius: 18px; }
.hd-articulo__cuerpo > * { margin: 0; }
.hd-articulo__portada img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.hd-nota__portada img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Paginación del blog, cuando haya más de nueve artículos. */
.hd-paginas, .navigation.pagination { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.hd-paginas .page-numbers, .navigation.pagination .page-numbers {
  padding: 10px 16px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 14px;
  color: var(--hd-tinta); background: var(--hd-blanco); border: 1px solid var(--hd-borde);
}
.hd-paginas .current, .navigation.pagination .current { color: var(--hd-blanco); background: var(--hd-naranja); border-color: var(--hd-naranja); }

/* Enlace a la política en el pie. */
.hd-pie__legal a { color: inherit; text-decoration: none; }
.hd-pie__legal a:hover { color: var(--hd-durazno); }

/* Lectores de pantalla y salto al contenido */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.screen-reader-text:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip-path: none;
  background: var(--hd-oscuro); color: var(--hd-blanco); padding: 12px 20px; border-radius: 8px;
}


/* =====================================================================
   Movimiento (octubre de 2026)

   Lo que necesita js/movimiento.js, y los detalles que resuelve el CSS
   solo: botones, tarjetas, la cabecera, la ventana de la llamada, el chat
   de Thera, el menú del celular y el paso de una página a otra. Con
   "menos movimiento" pedido en el sistema, todo queda quieto.
   ===================================================================== */

/* Hasta que js/movimiento.js toma el control, lo que entra al abrir la
   página queda escondido: así no aparece un instante y desaparece antes
   de animarse. Si el guion no llega, hd_marcar_js() lo muestra a los 3
   segundos. */
@media (prefers-reduced-motion: no-preference) {
  .hd-js .home .hd-hero__texto > *,
  .hd-js .home .hd-escena,
  .hd-js .home .hd-tw__boton,
  .hd-js .hd-cabeza-pagina > *,
  .hd-js .hd-migas,
  .hd-js .hd-articulo__cabeza > *,
  .hd-js .hd-articulo__portada,
  .hd-js .hd-texto > :not(.hd-texto__contenido) { visibility: hidden; }
}

/* Renglones con máscara: el texto sube desde abajo sin verse fuera de su
   lugar. El relleno de abajo deja lugar a las colas de las letras (j, p,
   g) y al subrayado de "puedes lograr" sin mover nada de lugar. Las de
   SplitText (.hd-l-mask) se quitan solas al terminar. */
.hd-mascara { display: block; overflow: clip; padding-bottom: 0.26em; margin-bottom: -0.26em; }
.hd-linea { display: block; }
.hd-l-mask { overflow-clip-margin: 0.2em; }

/* El isotipo del lema va en SVG para que sus arcos puedan dibujarse. */
.hd-lema__isotipo path { fill: none; stroke: var(--hd-naranja); stroke-width: 19; stroke-linecap: round; }

/* --- Botones ---
   El texto rueda hacia arriba (js/movimiento.js arma la copia), la flecha
   avanza y una luz cruza el naranja. */
.hd-rodar { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.hd-rodar__a, .hd-rodar__b { display: block; transition: transform 0.6s var(--hd-salida); }
.hd-rodar__b { position: absolute; inset: 0; transform: translateY(110%); }
a:hover > .hd-rodar .hd-rodar__a { transform: translateY(-110%); }
a:hover > .hd-rodar .hd-rodar__b { transform: none; }
.hd-cta { position: relative; overflow: hidden; isolation: isolate; }
.hd-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  transform: translateX(-110%);
}
.hd-cta:hover::after { transform: translateX(110%); transition: transform 0.9s var(--hd-salida); }
.hd-cta--blanco::after { background: linear-gradient(105deg, transparent 35%, rgba(232, 89, 12, 0.14) 50%, transparent 65%); }
.hd-cta svg { transition: transform 0.6s var(--hd-resorte); }
.hd-cta:hover svg { transform: translateX(4px); }
.hd-cta:hover { box-shadow: 0 22px 34px -14px rgba(232, 89, 12, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.hd-cta--blanco:hover { box-shadow: 0 22px 36px -16px rgba(46, 24, 8, 0.65); }

/* En el hero, el segundo botón pasa a ser un enlace subrayado con flecha
   hacia abajo (baja a "Cómo trabajamos"): los dos entran en la misma fila
   y el naranja queda como la acción. Solo en la portada: la página 404 usa
   la misma fila de botones para ir a otras páginas. */
.hd-hero .hd-hero__acciones { align-items: center; gap: 14px 24px; }
.hd-hero .hd-hero__acciones .hd-cta { padding-inline: 22px; }
.hd-hero .hd-hero__acciones .hd-cta-fantasma {
  padding: 10px 2px; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
}
.hd-hero .hd-hero__acciones .hd-cta-fantasma:hover { translate: none; background-size: 0% 1.5px; background-position: 100% 100%; }
.hd-hero .hd-hero__acciones .hd-cta-fantasma::after {
  content: ""; width: 14px; height: 14px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M4 9l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M4 9l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.6s var(--hd-resorte);
}
.hd-hero .hd-hero__acciones .hd-cta-fantasma:hover::after { transform: translateY(3px); }

/* --- Cabecera ---
   El menú subraya la sección al pasar el mouse y la página donde se está;
   al bajar, la barra se asienta un poco más (js/movimiento.js). */
@media (min-width: 901px) {
  .hd-nav a:not(.hd-cta):not(.hd-nav__acceso) { position: relative; transition: color 0.3s; }
  .hd-nav a:not(.hd-cta):not(.hd-nav__acceso)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: var(--hd-naranja); transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform 0.5s var(--hd-salida);
  }
  .hd-nav a:not(.hd-cta):not(.hd-nav__acceso):hover::after,
  .hd-nav a[aria-current]:not(.hd-cta)::after { transform: scaleX(1); transform-origin: 0 50%; }
  .hd-nav a[aria-current]:not(.hd-cta) { color: var(--hd-tinta); }
}
.hd-cabecera__barra { transition: background-color 0.5s var(--hd-salida), box-shadow 0.5s var(--hd-salida); }
.hd-cabecera--abajo .hd-cabecera__barra { background-color: rgba(255, 255, 255, 0.94); box-shadow: 0 24px 50px -30px rgba(70, 38, 14, 0.45); }

/* --- Luz que sigue al cursor ---
   js/movimiento.js marca los grupos (.hd-focos) y sus tarjetas
   (.hd-foco), y les pasa dónde está el mouse. Una luz suave adentro y un
   borde que se enciende cerca del cursor. */
.hd-focos { --hd-foco-luz: rgba(232, 89, 12, 0.1); --hd-foco-borde: rgba(232, 89, 12, 0.6); }
.hd-banda .hd-focos, .hd-grupo--destacado .hd-focos { --hd-foco-luz: rgba(242, 161, 0, 0.16); --hd-foco-borde: rgba(255, 190, 110, 0.75); }
.hd-foco { position: relative; isolation: isolate; }
.hd-foco::before, .hd-foco::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.5s var(--hd-salida);
}
.hd-foco::before { inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--hd-mx, 50%) var(--hd-my, 50%), var(--hd-foco-luz), transparent 62%); }
.hd-foco::after {
  inset: -1px; padding: 1px;
  background: radial-gradient(260px circle at var(--hd-mx, 50%) var(--hd-my, 50%), var(--hd-foco-borde), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.hd-focos:hover .hd-foco::before, .hd-focos:hover .hd-foco::after { opacity: 1; }

/* --- Fotos e imágenes --- */
.hd-persona__retrato { transition: scale 0.9s var(--hd-salida), rotate 0.9s var(--hd-salida), box-shadow 0.6s var(--hd-salida); }
.hd-persona:hover .hd-persona__retrato { scale: 1.025; rotate: -1deg; box-shadow: 0 30px 54px -28px rgba(70, 38, 14, 0.55); }
.hd-nota__portada { overflow: hidden; }
.hd-nota__portada img { transition: scale 0.9s var(--hd-salida); }
.hd-nota:hover .hd-nota__portada img { scale: 1.04; }

/* --- El fondo respira ---
   Dos luces cálidas que se mueven muy despacio detrás de todo, y una que
   cruza la banda naranja del cierre. Solo se mueve transform, que no le
   cuesta nada a la pantalla. */
.hd-fondo::before, .hd-fondo::after { content: ""; position: absolute; border-radius: 50%; }
.hd-fondo::before { width: 64vw; height: 64vw; right: -20vw; top: -30vw; background: radial-gradient(closest-side, rgba(243, 115, 49, 0.12), transparent); }
.hd-fondo::after { width: 56vw; height: 56vw; left: -22vw; bottom: -32vw; background: radial-gradient(closest-side, rgba(242, 161, 0, 0.09), transparent); }
.hd-cierre { position: relative; overflow: hidden; isolation: isolate; }
.hd-cierre::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 60%; aspect-ratio: 1; top: -70%; left: 40%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 220, 0.36), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hd-fondo::before { animation: hd-luz-a 30s ease-in-out infinite alternate; }
  .hd-fondo::after { animation: hd-luz-b 36s ease-in-out infinite alternate; }
  .hd-cierre::before { animation: hd-luz-cierre 12s ease-in-out infinite alternate; }
}
@keyframes hd-luz-a { to { transform: translate3d(-16vw, 22vh, 0) scale(1.15); } }
@keyframes hd-luz-b { to { transform: translate3d(18vw, -18vh, 0) scale(0.88); } }
@keyframes hd-luz-cierre { from { transform: translate3d(-55%, 10%, 0); } to { transform: translate3d(25%, 30%, 0); } }

/* --- Ventana de la llamada, chat de Thera y menú del celular ---
   Entran desde donde se los llama en vez de aparecer de golpe. */
@media (prefers-reduced-motion: no-preference) {
  .hd-llamada {
    opacity: 0; transform: translateY(20px) scale(0.97);
    transition: opacity 0.4s var(--hd-salida), transform 0.7s var(--hd-resorte), overlay 0.4s allow-discrete, display 0.4s allow-discrete;
  }
  .hd-llamada[open] { opacity: 1; transform: none; }
  .hd-llamada::backdrop {
    background-color: rgba(30, 21, 15, 0); backdrop-filter: blur(0);
    transition: background-color 0.4s, backdrop-filter 0.4s, overlay 0.4s allow-discrete, display 0.4s allow-discrete;
  }
  .hd-llamada[open]::backdrop { background-color: rgba(30, 21, 15, 0.55); backdrop-filter: blur(6px); }
  @starting-style {
    .hd-llamada[open] { opacity: 0; transform: translateY(20px) scale(0.97); }
    .hd-llamada[open]::backdrop { background-color: rgba(30, 21, 15, 0); backdrop-filter: blur(0); }
  }

  .hd-tw__panel { transform-origin: 100% 100%; transition: opacity 0.35s var(--hd-salida), transform 0.6s var(--hd-resorte); }
  @starting-style {
    .hd-tw__panel { opacity: 0; transform: translateY(16px) scale(0.95); }
  }
  .hd-tw__msg { animation: hd-burbuja 0.6s var(--hd-resorte) both; }
  .hd-tw__msg--bot { transform-origin: 0 100%; }
  .hd-tw__msg--user { transform-origin: 100% 100%; }
}
@keyframes hd-burbuja { from { opacity: 0; transform: translateY(10px) scale(0.92); } }
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hd-cabecera__barra.hd-abierta .hd-nav > * { animation: hd-subir 0.6s var(--hd-salida) both; }
  .hd-cabecera__barra.hd-abierta .hd-nav > :nth-child(2) { animation-delay: 0.04s; }
  .hd-cabecera__barra.hd-abierta .hd-nav > :nth-child(3) { animation-delay: 0.08s; }
  .hd-cabecera__barra.hd-abierta .hd-nav > :nth-child(4) { animation-delay: 0.12s; }
  .hd-cabecera__barra.hd-abierta .hd-nav > :nth-child(5) { animation-delay: 0.16s; }
  .hd-cabecera__barra.hd-abierta .hd-nav > :nth-child(6) { animation-delay: 0.2s; }
  .hd-cabecera__barra.hd-abierta .hd-nav > :nth-child(7) { animation-delay: 0.24s; }
  .hd-cabecera__barra.hd-abierta .hd-nav > :nth-child(8) { animation-delay: 0.28s; }
}
@keyframes hd-subir { from { opacity: 0; transform: translateY(12px); } }

/* --- Desplazamiento suave (Lenis), tal como lo pide la librería --- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Los enlaces a una sección frenan antes, para que la cabecera no tape el
   título. */
section[id] { scroll-margin-top: 100px; }

::selection { background: var(--hd-durazno); color: var(--hd-tinta); }

/* --- De una página a otra ---
   El navegador funde una página con la siguiente en vez de dejar la
   pantalla en blanco; la cabecera y el botón de Thera no se mueven.
   Donde no se sabe hacer, se navega como siempre. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.hd-cabecera { view-transition-name: hd-cabecera; }
.hd-tw { view-transition-name: hd-thera; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: var(--hd-salida); }

/* Antetítulo del hero en el celular: la raya no entra al lado del texto. */
.hd-antetitulo::after { flex: none; }
@media (max-width: 560px) { .hd-antetitulo::after { display: none; } }


/* =====================================================================
   Thera: su página (page-thera.php) y su sección en la portada
   (octubre de 2026). Sale de la vista previa que aprobó David.

   Thera es un panda rojo (Marketing/design-system/thera/). El cuerpo
   entero va solo sobre fondos claros: las puntas del pelo son crema y
   sobre lo oscuro se ven como un borde. Sobre lo oscuro, el avatar.
   ===================================================================== */

/* De pie sobre los arcos del isotipo, como las tarjetas del hero de la portada. */
.hd-thera-figura { position: relative; isolation: isolate; min-width: 0; }
.hd-thera-figura__arcos { position: absolute; z-index: -1; left: 50%; bottom: 10%; translate: -50% 0; width: min(560px, 104%); opacity: 0.3; pointer-events: none; }
.hd-thera-figura__arcos path { fill: none; stroke: var(--hd-naranja-claro); stroke-width: 11; stroke-linecap: round; }
.hd-thera-figura__img { display: block; width: 100%; height: auto; }

/* --- La página --- */
.hd-hero--thera { padding-block: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px); }
.hd-hero--thera h1 { font-size: clamp(46px, 6.6vw, 88px); line-height: 1; letter-spacing: -0.045em; font-weight: 300; }
.hd-hero--thera h1 strong { font-weight: 800; color: var(--hd-naranja); }
.hd-hero__nota { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--hd-tinta-suave); }
.hd-hero__nota::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hd-verde); }
.hd-hero--thera .hd-thera-figura { flex: 5 1 380px; max-width: 560px; margin-inline: auto; }

.hd-historia { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.hd-historia__texto { display: flex; flex-direction: column; gap: 18px; max-width: 40rem; min-width: 0; }
.hd-historia__texto p { font-size: 17px; line-height: 1.75; color: var(--hd-tinta-media); }
.hd-historia__texto p:first-child { font-size: 21px; line-height: 1.55; font-weight: 500; letter-spacing: -0.01em; color: var(--hd-tinta); }
/* La ficha es su credencial como parte del equipo. */
.hd-ficha { min-width: 0; padding: 24px; border-radius: 22px; background: var(--hd-blanco); border: 1px solid var(--hd-borde); box-shadow: 0 22px 46px -30px rgba(70, 38, 14, 0.3); }
.hd-ficha__cabeza { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--hd-borde); }
.hd-ficha__cabeza img { width: 64px; height: 64px; flex: none; }
.hd-ficha__cabeza b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.hd-ficha__cabeza span { font-size: 13px; font-weight: 600; color: var(--hd-naranja-tex); }
.hd-ficha dl { margin: 18px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 18px; }
.hd-ficha dt { padding-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-tinta-tenue); white-space: nowrap; }
.hd-ficha dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--hd-tinta-media); }

.hd-su-imagen { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hd-su-imagen__marco {
  min-width: 0; padding: clamp(16px, 3vw, 32px); border-radius: 28px; border: 1px solid var(--hd-borde);
  background: radial-gradient(70% 60% at 50% 45%, #FFE9D8, transparent 72%), var(--hd-blanco);
  box-shadow: 0 22px 46px -30px rgba(70, 38, 14, 0.3);
}
.hd-su-imagen__lienzo { position: relative; }
.hd-su-imagen__lienzo img { display: block; width: 100%; height: auto; }
.hd-punto {
  position: absolute; translate: -50% -50%; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--hd-blanco);
  background: var(--hd-naranja); border: 3px solid var(--hd-blanco); box-shadow: 0 10px 20px -8px rgba(184, 67, 10, 0.7);
  transition: scale 0.5s var(--hd-resorte);
}
.hd-punto::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(232, 89, 12, 0.45); }
/* Medidos sobre thera-cuerpo-chica.webp: la cola, la cara y el isotipo del
   buzo. Si cambia la imagen, hay que moverlos. */
.hd-punto--1 { left: 80%; top: 46%; }
.hd-punto--2 { left: 63%; top: 25%; }
.hd-punto--3 { left: 54%; top: 51%; }
.hd-detalles { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hd-detalle {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 22px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--hd-borde);
  transition: border-color 0.3s, translate 0.6s var(--hd-resorte);
}
.hd-detalle:hover { border-color: rgba(232, 89, 12, 0.45); translate: 0 -2px; }
.hd-detalle__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--hd-blanco); background: var(--hd-naranja); }
.hd-detalle h3 { margin-bottom: 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.hd-detalle p { font-size: 14.5px; line-height: 1.65; color: var(--hd-tinta-suave); }
/* Al pasar por un detalle, su punto crece en la imagen. */
.hd-su-imagen:has(.hd-detalle--1:hover) .hd-punto--1,
.hd-su-imagen:has(.hd-detalle--2:hover) .hd-punto--2,
.hd-su-imagen:has(.hd-detalle--3:hover) .hd-punto--3 { scale: 1.25; }

.hd-tu-thera { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.hd-tu-thera > div { min-width: 0; }
.hd-tu-thera__titulo { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hd-tinta-tenue); }
.hd-tu-thera__lista { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.hd-tu-thera__lista li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--hd-tinta-media); }
.hd-tu-thera__lista svg { flex: none; margin-top: 3px; color: var(--hd-naranja); }
.hd-tu-thera__aparte { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hd-borde); font-size: 14.5px; line-height: 1.65; color: var(--hd-tinta-suave); }
/* El ejemplo usa las mismas burbujas del chat del sitio (.hd-tw__msg). */
.hd-ejemplo { border-radius: 22px; overflow: hidden; background: var(--hd-blanco); border: 1px solid var(--hd-borde); box-shadow: 0 30px 60px -34px rgba(30, 21, 15, 0.45); }
.hd-ejemplo__barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hd-borde); background: #FFF8F2; }
.hd-ejemplo__etiqueta { margin-left: auto; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hd-tinta-suave); background: var(--hd-piedra); }
.hd-ejemplo__msgs { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--hd-crema); }

/* --- La sección de la portada ---
   Un panel durazno entre "Por dentro" y "Quiénes somos": Thera parada en
   el borde de abajo, como si se asomara a saludar. */
.hd-conoce-thera {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 clamp(20px, 4vw, 48px);
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 56px) 0; border-radius: 28px; border: 1px solid #FBCFAE;
  background: radial-gradient(55% 75% at 85% 35%, rgba(255, 255, 255, 0.75), transparent 70%), linear-gradient(135deg, #FFF1E6, #FFE2CC);
}
.hd-conoce-thera__texto { flex: 1 1 400px; min-width: 0; align-self: center; padding-bottom: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; gap: 18px; }
.hd-conoce-thera__texto .hd-rotulo { margin-bottom: 0; }
.hd-conoce-thera__texto p:not(.hd-rotulo) { font-size: 17px; line-height: 1.7; color: var(--hd-tinta-media); max-width: 36rem; }
.hd-conoce-thera__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hd-conoce-thera .hd-thera-figura { flex: 0 1 400px; margin-inline: auto; }
.hd-conoce-thera .hd-thera-figura__arcos { opacity: 0.22; }

@media (max-width: 900px) {
  .hd-historia, .hd-su-imagen, .hd-tu-thera { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hd-tu-thera__lista { grid-template-columns: 1fr; }
  .hd-punto { width: 30px; height: 30px; font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hd-punto::after { animation: hd-latido 2.4s var(--hd-salida) infinite; }
}
@keyframes hd-latido { from { scale: 0.7; opacity: 1; } to { scale: 1.35; opacity: 0; } }

/* --- Thera en movimiento y con poses (página /thera, octubre de 2026) ---
   Las poses salen de Nano Banana (Marketing/design-system/thera/). */
/* El saludo sale de un video horizontal con aire alrededor (el primero era
   vertical y cortaba la cola y la sombra): los cuadros traen a Thera entera,
   con la sombra ya desvanecida en los costados. */
.hd-thera-saludo { display: block; width: 100%; height: auto; aspect-ratio: 520 / 432; }
.hd-hero--thera .hd-thera-figura { flex: 6 1 460px; max-width: 640px; }
.hd-hero--thera .hd-thera-figura__arcos { left: 46%; bottom: 8%; width: 66%; }
.hd-casa--dos { grid-template-columns: repeat(2, 1fr); }
.hd-pose { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: 40px; }
.hd-pose--al-reves { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
.hd-pose--al-reves .hd-pose__img { order: 2; }
.hd-pose__img { position: relative; isolation: isolate; width: 100%; max-width: 380px; justify-self: center; }
.hd-pose__img::before { content: ""; position: absolute; z-index: -1; inset: 12% 4% 4%; border-radius: 50%; background: radial-gradient(closest-side, #FFE9D8, transparent); }
.hd-pose__img img { display: block; width: 100%; height: auto; }
.hd-pose__texto { min-width: 0; display: flex; flex-direction: column; gap: 12px; max-width: 30rem; }
.hd-pose__texto .hd-rotulo { margin: 0; }
.hd-pose__texto h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.hd-pose__texto p:not(.hd-rotulo) { font-size: 16.5px; line-height: 1.7; color: var(--hd-tinta-media); }
.hd-pose + .hd-casa { margin-top: 56px; }
/* Thera señala el botón para escribirle. */
.hd-invita { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px, 4vw, 48px); margin-top: 56px; padding: clamp(20px, 4vw, 40px); border-radius: 28px; background: linear-gradient(135deg, #FFF1E6, #FFE2CC); border: 1px solid #FBCFAE; }
.hd-invita img { flex: 0 0 auto; width: min(300px, 70%); height: auto; margin-block: -8px -24px; }
.hd-invita div { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hd-invita h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.hd-invita p { font-size: 16px; line-height: 1.65; color: var(--hd-tinta-media); }
/* El cierre: Thera celebra al lado de la franja naranja. */
.hd-cierre-thera { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 24px; }
.hd-cierre-thera .hd-cierre { flex: 1 1 520px; }
.hd-cierre-thera > img { flex: 0 0 auto; width: min(260px, 60%); height: auto; margin-inline: auto; }
@media (max-width: 900px) {
  .hd-casa--dos, .hd-pose, .hd-pose--al-reves { grid-template-columns: 1fr; }
  .hd-pose--al-reves .hd-pose__img { order: 0; }
  .hd-pose__img { max-width: 280px; }
}


/* =====================================================================
   Reestructura del sitio (octubre de 2026)

   La portada cuenta una sola historia: las redes y los anuncios atraen y
   la IA atiende al instante. Lo nuevo de este bloque: el botón de Thera
   del hero, el problema en cuatro tarjetas, los pilares de servicios, los
   beneficios de Thera, los paquetes, las preguntas frecuentes y el cierre
   con dos botones. Va con clases propias porque la página de Thera
   comparte varias piezas con la portada y tiene que quedar igual.
   ===================================================================== */

/* --- El segundo botón del hero abre el chat ---
   En el hero, el segundo botón es un enlace subrayado con flecha hacia
   abajo (ver "Botones" en Movimiento). Este no baja, abre el chat: vuelve
   a ser botón y lleva la cara de Thera, la misma del chat que abre. */
.hd-hero .hd-hero__acciones .hd-cta-fantasma--thera {
  padding: 9px 22px 9px 9px; border: 1px solid var(--hd-borde); border-radius: 16px;
  background: var(--hd-blanco); box-shadow: var(--hd-sombra-boton);
}
.hd-hero .hd-hero__acciones .hd-cta-fantasma--thera::after { display: none; }
.hd-hero .hd-hero__acciones .hd-cta-fantasma--thera:hover { translate: 0 -2px; }
/* Todo botón que lleva a Thera lleva su cara, como el del chat ("Conoce a
   Thera" en la portada, pedido de David, 2026-10-09). */
.hd-cta-fantasma--thera { padding: 9px 22px 9px 9px; background: var(--hd-blanco); }
.hd-cta-fantasma--thera img { width: 34px; height: 34px; flex: none; }

/* --- El problema, en cuatro tarjetas ---
   Dos por dos y no en una fila: con los párrafos justificados, cuatro
   columnas angostas abrían huecos grandes entre palabras. La página de
   Thera usa la misma banda con tres: esta grilla va aparte para no tocarla. */
.hd-sintomas--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .hd-sintomas--cuatro { grid-template-columns: 1fr; } }

/* --- Lo destacado va en oscuro ---
   El pilar "Atiende" y el paquete recomendado: el fondo de las bandas
   oscuras y un poco más altos que los de al lado. Más altos con margen y
   no con transform, porque transform lo maneja js/movimiento.js al
   hacerlos entrar. Con doble clase, para ganarle al fondo blanco de la
   tarjeta común, que va más abajo. */
.hd-pilar.hd-pilar--destacado, .hd-paquete.hd-paquete--recomendado {
  margin-block: -14px; color: var(--hd-blanco); border-color: var(--hd-oscuro);
  background: var(--hd-grano-claro), radial-gradient(80% 60% at 100% 0%, var(--hd-brillo-naranja), transparent 70%), var(--hd-oscuro);
}

/* --- Pilares de servicios: atrae, atiende y destaca ---
   "Atiende" es el destacado: la IA es lo que hace rendir las redes y los
   anuncios. */
.hd-pilares { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hd-pilar {
  min-width: 0; display: flex; flex-direction: column; gap: 18px;
  padding: 28px; border-radius: 22px; background: var(--hd-blanco); border: 1px solid var(--hd-borde);
  box-shadow: var(--hd-sombra-tarjeta);
}
.hd-pilar .hd-grupo__icono { margin-bottom: 0; }
.hd-pilar h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.hd-pilar__servicio { padding-top: 16px; border-top: 1px solid var(--hd-borde); }
.hd-pilar__servicio h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.hd-pilar__servicio p { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-pilar--destacado .hd-pilar__servicio { border-top-color: var(--hd-borde-en-oscuro); }
.hd-pilar--destacado .hd-pilar__servicio p { color: var(--hd-texto-en-oscuro); }
/* El pilar destacado baja 14 px más que los otros: sin este aire, la
   invitación a la asesoría quedaba pegada a él. */
.hd-pilares + .hd-puntual { margin-top: 48px; }

/* --- Thera, la prueba en vivo ---
   Dos tarjetas (pedido de David, 2026-10-09): arriba quién es, con Thera
   parada en el borde de abajo; debajo, en oscuro, lo que hace por tu
   negocio y los botones. La de abajo es una banda (.hd-banda) con las
   tarjetas del problema, sin título encima. */
.hd-thera-prueba { margin-top: 20px; }
.hd-thera-prueba .hd-sintomas { margin-top: 0; }
.hd-thera-prueba__acciones { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* --- Paquetes ---
   Multiplica va primero en el código (es lo primero que se lee en el
   celular) y al centro en pantallas anchas. Sin precios: donde iría el
   número va la invitación a la llamada (paquetes.php). */
.hd-paquetes { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hd-paquete {
  min-width: 0; display: flex; flex-direction: column; gap: 16px;
  padding: 28px; border-radius: 22px; background: var(--hd-blanco); border: 1px solid var(--hd-borde);
  box-shadow: var(--hd-sombra-tarjeta);
}
.hd-paquete__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hd-paquete h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.hd-paquete__etiqueta {
  padding: 6px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hd-blanco); background: linear-gradient(135deg, var(--hd-naranja-claro), var(--hd-naranja));
}
.hd-paquete__para { font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--hd-tinta-media); }
.hd-paquete__incluye { list-style: none; padding: 16px 0 0; border-top: 1px solid var(--hd-borde); display: flex; flex-direction: column; gap: 10px; }
.hd-paquete__incluye li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--hd-tinta-media); }
.hd-paquete__incluye svg { flex: none; margin-top: 3px; color: var(--hd-naranja); }
.hd-paquete__precio { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hd-borde); font-size: 13.5px; line-height: 1.5; color: var(--hd-tinta-suave); }
.hd-paquete--recomendado .hd-paquete__para { color: var(--hd-durazno); }
.hd-paquete--recomendado .hd-paquete__incluye, .hd-paquete--recomendado .hd-paquete__precio { border-top-color: var(--hd-borde-en-oscuro); }
.hd-paquete--recomendado .hd-paquete__incluye li, .hd-paquete--recomendado .hd-paquete__precio { color: var(--hd-texto-en-oscuro); }
.hd-paquete--recomendado .hd-paquete__incluye svg { color: var(--hd-ambar); }
@media (min-width: 901px) {
  .hd-paquete--conecta { order: 1; }
  .hd-paquete--multiplica { order: 2; }
  .hd-paquete--crece { order: 3; }
}
.hd-paquetes__pie { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hd-paquetes__nota { font-size: 14px; line-height: 1.7; color: var(--hd-tinta-suave); max-width: 52rem; }

/* --- Preguntas frecuentes ---
   En una tarjeta oscura, con el fondo de las bandas (.hd-banda), el título
   arriba con su ícono y las preguntas debajo (pedido de David,
   2026-10-09). Se abren con <details> (ver hd_preguntas_frecuentes()). */
.hd-faq__cabeza { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.hd-faq__cabeza .hd-sintoma__icono { flex: none; margin-bottom: 0; }
.hd-preguntas { display: flex; flex-direction: column; gap: 12px; }
.hd-pregunta { border-radius: 18px; background: var(--hd-blanco); border: 1px solid var(--hd-borde); transition: border-color 0.3s; }
.hd-pregunta:hover, .hd-pregunta[open] { border-color: var(--hd-borde-naranja); }
.hd-pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-radius: 18px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--hd-tinta);
}
.hd-pregunta summary::-webkit-details-marker { display: none; }
.hd-pregunta summary::after {
  content: ""; flex: none; width: 14px; height: 14px; background-color: var(--hd-naranja);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate 0.5s var(--hd-resorte);
}
.hd-pregunta[open] summary::after { rotate: 45deg; }
.hd-pregunta summary:focus-visible { outline-offset: -3px; }
.hd-pregunta p { max-width: 52rem; padding: 0 22px 20px; font-size: 15px; line-height: 1.7; color: var(--hd-tinta-suave); }
/* Sobre la tarjeta oscura: vidrio oscuro y ámbar, como las tarjetas del problema. */
.hd-faq .hd-pregunta { background: var(--hd-tarjeta-en-oscuro); border-color: var(--hd-borde-en-oscuro); }
.hd-faq .hd-pregunta:hover, .hd-faq .hd-pregunta[open] { border-color: var(--hd-borde-ambar); }
.hd-faq .hd-pregunta summary { color: var(--hd-blanco); }
.hd-faq .hd-pregunta summary::after { background-color: var(--hd-ambar); }
.hd-faq .hd-pregunta p { color: var(--hd-texto-en-oscuro); }

/* --- Cierre con dos botones (portada) ---
   Uno debajo del otro y del mismo ancho, como en Servicios. El cierre de
   la página de Thera sigue con su botón solo. */
.hd-cierre > .hd-cierre__acciones { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }
/* En el celular "Agenda una llamada de 20 min" no entraba en una línea:
   con menos margen entra en casi todos, y en los más angostos se parte
   centrado. */
.hd-cierre__acciones a { justify-content: center; text-align: center; }
.hd-cierre__acciones .hd-cta { padding-inline: 18px; }
.hd-cta-fantasma--claro { color: var(--hd-blanco); background: transparent; border-color: var(--hd-borde-en-naranja); box-shadow: none; }
/* El botón de Thera sobre el naranja va en oscuro, como "Iniciar sesión":
   en blanco o transparente se perdía al lado del otro botón blanco
   (pedido de David, 2026-10-09). */
.hd-cta-fantasma--thera.hd-cta-fantasma--oscuro {
  color: var(--hd-blanco); background: var(--hd-oscuro); border-color: var(--hd-oscuro); box-shadow: var(--hd-sombra-sobre-naranja);
}

/* --- Párrafos justificados ---
   Para que los bordes de los textos se vean parejos (pedido de David,
   2026-10-09). Con cortes de palabra: en las columnas angostas (tarjetas,
   celular) la justificación sola abría huecos grandes entre palabras. Los
   rótulos, el lema y los textos cortos de una o dos líneas quedan como
   estaban. Solo en las páginas de la reestructura (hd_clase_justificado()). */
.hd-justificado main p:not(.hd-rotulo):not(.hd-antetitulo):not(.hd-hero__nota):not(.hd-lema__frase):not(.hd-persona__rol):not(.hd-paquete__para):not(.hd-paquete__precio):not(.hd-combo__para):not(.hd-donde):not(.hd-llamada__legal):not(.hd-llamada__error) {
  text-align: justify;
  -webkit-hyphens: auto; hyphens: auto;
  /* Palabras de 6 letras o más, con 2 antes y 2 después del corte
     ("al-guien", "en-tiende"). Más estricto, quedaban líneas con huecos en
     el celular. */
  hyphenate-limit-chars: 6 2 2;
}
/* La frase que cierra el problema se enciende palabra por palabra
   (js/movimiento.js), y SplitText envuelve cada palabra en una caja
   inline-block: así ninguna se puede cortar y la justificación abría
   huecos en el celular. Como texto corrido se cortan igual que las demás,
   y la opacidad se anima lo mismo. */
.hd-justificado .hd-banda__cierre > div { display: inline !important; }

/* --- Servicios (reestructura, 2026-10-09) ---
   Los grupos y las tarjetas de antes (.hd-grupo, .hd-servicio), con lo que
   sumó la página nueva: botones en el encabezado, la asesoría con lo que
   te llevas, el pilar "Atiende" en oscuro y los paquetes en una línea. */
.hd-cabeza-pagina__acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
/* En las tarjetas anchas el texto va dentro de una columna, y la regla de
   .hd-servicio > p no lo alcanza. */
.hd-servicio--ancho > div > p { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-servicio p.hd-servicio__nota { font-size: 13px; line-height: 1.55; color: var(--hd-tinta-tenue); }
/* El pie de una tarjeta ancha: a lo largo de toda la tarjeta, con la nota
   a la izquierda y el botón a la derecha. En la columna, el botón de Thera
   se partía en dos líneas. */
.hd-servicio--ancho > .hd-servicio__pie {
  flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--hd-borde);
}
.hd-servicio__pie .hd-servicio__nota { flex: 1 1 240px; }
/* En una línea si entra; en el celular se parte en dos y no empuja la
   página hacia el costado. */
.hd-servicio__pie .hd-cta-fantasma--thera { flex: 0 1 auto; max-width: 100%; }
.hd-servicio__lleva b { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-tinta-tenue); }
.hd-servicio__lleva li { font-size: 14px; }
/* La letra chica de un grupo va debajo de sus tarjetas, fuera de la
   grilla: adentro ocupaba una columna y las tarjetas quedaban angostas. */
.hd-grupo__nota { grid-column: 2; margin-top: -12px; font-size: 13px; line-height: 1.55; color: var(--hd-tinta-tenue); }
@media (max-width: 760px) { .hd-grupo__nota { grid-column: auto; margin-top: -6px; } }
/* Las partes de la IA llevan título y explicación: en bloque y no en fila,
   con el mismo cuadradito naranja de las listas. */
.hd-servicio--ancho > ul { flex: 1 1 260px; min-width: 0; }
.hd-servicio .hd-servicio__partes { gap: 16px; }
.hd-servicio .hd-servicio__partes li { display: block; position: relative; padding-left: 16px; font-size: 14px; line-height: 1.6; }
.hd-servicio .hd-servicio__partes li::before { position: absolute; left: 0; top: 0; }
.hd-servicio__partes b { display: block; margin-bottom: 4px; font-size: 15.5px; font-weight: 700; color: var(--hd-tinta); }

/* "Atiende", destacado: el fondo de las bandas oscuras y las tarjetas en
   vidrio oscuro, como el problema de la portada. */
.hd-grupo.hd-grupo--destacado {
  margin-block: 8px; padding: clamp(24px, 4vw, 44px); border-top: 0; border-radius: 28px; color: var(--hd-blanco);
  background:
    var(--hd-grano-claro),
    radial-gradient(60% 90% at 95% -10%, var(--hd-brillo-naranja), transparent 66%),
    radial-gradient(50% 80% at -5% 110%, rgba(242, 161, 0, 0.2), transparent 70%),
    var(--hd-oscuro);
}
.hd-grupo--destacado + .hd-grupo { border-top: 0; }
.hd-grupo--destacado .hd-grupo__nombre p { color: var(--hd-durazno); }
.hd-grupo--destacado .hd-servicio { background: var(--hd-tarjeta-en-oscuro); border-color: var(--hd-borde-en-oscuro); box-shadow: none; }
.hd-grupo--destacado .hd-servicio--ancho > .hd-servicio__pie { border-top-color: var(--hd-borde-en-oscuro); }
.hd-grupo--destacado .hd-servicio h3, .hd-grupo--destacado .hd-servicio__partes b { color: var(--hd-blanco); }
.hd-grupo--destacado .hd-servicio p, .hd-grupo--destacado .hd-servicio li { color: var(--hd-texto-en-oscuro); }
.hd-grupo--destacado .hd-servicio p.hd-servicio__nota { color: var(--hd-durazno); }
.hd-grupo--destacado .hd-servicio li::before { background: var(--hd-ambar); }
body .hd-grupo--destacado .hd-servicio__icono {
  color: var(--hd-ambar);
  background: linear-gradient(160deg, rgba(242, 161, 0, 0.26) 0%, rgba(242, 161, 0, 0.08) 100%);
  border: 1px solid rgba(242, 161, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.25), 0 10px 18px -10px rgba(0, 0, 0, 0.6);
}

/* Los paquetes en una línea cada uno: nombre y qué combina. El orden es
   el de la portada: Multiplica primero en el celular y al centro en
   pantallas anchas (las reglas de .hd-paquete--...). */
.hd-combos { list-style: none; padding: 0; margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hd-combo {
  min-width: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 24px; border-radius: 20px; background: var(--hd-blanco); border: 1px solid var(--hd-borde);
  box-shadow: var(--hd-sombra-tarjeta);
}
.hd-combo__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hd-combo b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
/* Qué combina, como rótulo: así no se confunde con la descripción. */
.hd-combo__mezcla { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hd-naranja-tex); }
.hd-combo__para { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--hd-borde); font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--hd-tinta); }
.hd-combo__ideal { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-combo.hd-combo--recomendado {
  color: var(--hd-blanco); border-color: var(--hd-oscuro);
  background: var(--hd-grano-claro), radial-gradient(80% 60% at 100% 0%, var(--hd-brillo-naranja), transparent 70%), var(--hd-oscuro);
}
.hd-combo--recomendado .hd-combo__mezcla { color: var(--hd-ambar); }
.hd-combo--recomendado .hd-combo__para { color: var(--hd-blanco); border-top-color: var(--hd-borde-en-oscuro); }
.hd-combo--recomendado .hd-combo__ideal { color: var(--hd-texto-en-oscuro); }

/* --- Paquetes (página nueva, 2026-10-09) ---
   Las tarjetas de la portada con la lista completa, para quién es y un
   botón; la tabla comparativa; "¿Buscas algo puntual?" en tarjeta, y el
   rótulo del cierre sobre el naranja. */
.hd-paquete__ideal { font-size: 14.5px; line-height: 1.6; color: var(--hd-tinta-suave); }
.hd-paquete--recomendado .hd-paquete__ideal { color: var(--hd-texto-en-oscuro); }
/* El botón va al pie, del ancho de la tarjeta; el precio queda justo arriba. */
.hd-paquete__boton { justify-content: center; }
.hd-paquetes--completos .hd-paquete__precio { margin-top: auto; }

.hd-tabla {
  overflow-x: auto; border-radius: 22px;
  background: var(--hd-blanco); border: 1px solid var(--hd-borde); box-shadow: var(--hd-sombra-tarjeta);
}
.hd-tabla:focus-visible { outline-offset: 2px; }
.hd-tabla table { width: 100%; border-collapse: collapse; }
.hd-tabla th, .hd-tabla td { padding: 16px 18px; border-bottom: 1px solid var(--hd-borde); }
.hd-tabla tbody tr:last-child th, .hd-tabla tbody tr:last-child td { border-bottom: 0; }
.hd-tabla thead th { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--hd-tinta); text-align: center; vertical-align: bottom; }
/* En bloque y no como tabla: una tabla hereda las celdas pegadas
   (border-collapse) de la de afuera, y así pierde su relleno. */
.hd-tabla thead .hd-paquete__etiqueta { display: block; width: fit-content; margin: 6px auto 0; }
.hd-tabla tbody th { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--hd-tinta-media); text-align: left; }
/* El logo de la esquina: con max-width en porcentaje no ensancha la
   columna, se achica con ella. Nunca bajo 20 px de alto (logo.md). */
.hd-tabla thead .hd-tabla__marca { text-align: left; }
.hd-tabla__marca img { display: block; width: 170px; max-width: 100%; height: auto; }
.hd-tabla td { text-align: center; }
.hd-tabla__si { display: inline-block; color: var(--hd-naranja); vertical-align: middle; }
.hd-tabla__no { display: inline-block; color: var(--hd-tinta-tenue); vertical-align: middle; }
/* La columna de Multiplica, el recomendado, con un fondo durazno. */
.hd-tabla .hd-tabla__destacada { background: var(--hd-durazno-suave); }

.hd-puntual--tarjeta {
  margin-top: 0; justify-content: space-between; padding: 24px 28px; border-radius: 22px;
  background: var(--hd-blanco); border: 1px solid var(--hd-borde); box-shadow: var(--hd-sombra-tarjeta);
}
.hd-puntual--tarjeta p { flex: 1 1 360px; font-size: 16px; }

/* Le gana a ".hd-cierre p", que si no le daría el tamaño del texto. */
.hd-cierre .hd-rotulo { margin: 0 0 12px; font-size: 11.5px; line-height: 1.4; color: var(--hd-texto-en-naranja); }

/* --- Formulario de la llamada (reestructura, 2026-10-09) ---
   Los campos nuevos (el mensaje y cómo prefiere que lo contacten) y el
   texto legal. Valen para la ventana y para la página de Contacto. */
/* Alto para que el ejemplo entre entero también en la ventana del celular. */
.hd-llamada__campos textarea {
  width: 100%; min-width: 0; min-height: 120px; resize: vertical;
  font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--hd-tinta); background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(36, 28, 21, 0.14); border-radius: 12px; padding: 12px 14px;
}
.hd-llamada__campos textarea::placeholder { color: var(--hd-tinta-tenue); }
.hd-llamada__campos textarea:focus { border-color: var(--hd-naranja); outline: 2px solid rgba(232, 89, 12, 0.25); outline-offset: 0; }
.hd-llamada__opciones { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.hd-llamada__opciones legend { padding: 0; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.hd-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
/* Cada opción es una pastilla; la elegida, en naranja. El círculo del radio
   queda invisible pero en su lugar, para el teclado y los lectores de
   pantalla. Le gana a ".hd-llamada__campos label", que es para los títulos. */
.hd-llamada__campos .hd-opcion { position: relative; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--hd-tinta); cursor: pointer; }
.hd-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hd-opcion span {
  display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(36, 28, 21, 0.14);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.hd-opcion input:checked + span { color: var(--hd-blanco); background: var(--hd-naranja); border-color: var(--hd-naranja); }
.hd-opcion input:focus-visible + span { outline: 3px solid var(--hd-naranja); outline-offset: 2px; }
.hd-llamada__legal { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--hd-tinta-tenue); }
.hd-llamada__legal a { color: var(--hd-naranja-tex); font-weight: 600; }

/* --- Contacto (reestructura, 2026-10-09) ---
   El formulario a la izquierda y los canales a la derecha; las tres redes
   en fichas chicas, una al lado de la otra (también en el celular), y la
   pregunta para Thera debajo del lema. */
.hd-canales h2 { margin-bottom: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
/* En pantallas anchas el formulario es más largo que los canales: los
   canales acompañan mientras se completa, en vez de dejar un hueco. */
@media (min-width: 861px) { .hd-canales { position: sticky; top: 110px; } }

/* --- Thera chiquita en la tarjeta de WhatsApp (pedido de David, 2026-10-09) ---
   Como en el login: se asoma por arriba de la tarjeta y saluda cuando se
   ve y cada 12 segundos (js/movimiento.js). Sobre lo oscuro lleva una luz
   cálida detrás: sin ella, las puntas crema del pelo se ven como un borde.
   Hasta que llega el video, y para quien pidió menos movimiento, queda la
   imagen quieta (el primer cuadro). */
/* Se asoma unos 35 px en pantallas anchas. En el celular el texto ocupa
   más líneas, la tarjeta es más alta y Thera queda adentro: para que se
   asomara tendría que ser mucho más grande. */
.hd-canal.hd-canal--thera { position: relative; margin-top: 56px; padding-left: 150px; }
.hd-thera-chica { position: absolute; left: 18px; bottom: 6px; width: 116px; aspect-ratio: 190 / 258; isolation: isolate; pointer-events: none; }
.hd-thera-chica::before {
  content: ""; position: absolute; z-index: -1; left: -26px; top: -6px; width: 152px; height: 150px;
  background: radial-gradient(closest-side, rgba(255, 196, 150, 0.28), transparent);
}
.hd-thera-chica__lienzo, .hd-thera-chica__quieta { position: absolute; inset: 0; width: 100%; height: 100%; }
.hd-thera-chica__lienzo { visibility: hidden; }
.hd-thera-chica--lista .hd-thera-chica__lienzo { visibility: visible; }
.hd-thera-chica--lista .hd-thera-chica__quieta { visibility: hidden; }
@media (max-width: 560px) {
  .hd-canal.hd-canal--thera { margin-top: 4px; padding-left: 112px; }
  .hd-thera-chica { left: 14px; bottom: 8px; width: 86px; }
}
.hd-canal__texto span + span { margin-top: 2px; }
.hd-canales__redes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hd-canal.hd-canal--red { flex-direction: column; justify-content: center; gap: 10px; padding: 16px 10px; text-align: center; }
.hd-lema__pregunta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.hd-lema__pregunta p { font-size: 17px; font-weight: 600; color: var(--hd-tinta); }

@media (max-width: 900px) {
  .hd-pilares, .hd-paquetes, .hd-combos { grid-template-columns: 1fr; }
  .hd-pilar.hd-pilar--destacado, .hd-paquete.hd-paquete--recomendado { margin-block: 0; }
}
/* En el celular la tabla entra entera hasta en 360 px: letra y márgenes
   más chicos, y las palabras largas de la primera columna se cortan. */
@media (max-width: 560px) {
  .hd-tabla th, .hd-tabla td { padding: 12px 6px; }
  .hd-tabla thead th { font-size: 13px; }
  .hd-tabla thead .hd-paquete__etiqueta { padding: 3px 6px; font-size: 8px; letter-spacing: 0.04em; }
  .hd-tabla tbody th { padding-left: 12px; font-size: 13px; -webkit-hyphens: auto; hyphens: auto; }
}
@media (max-width: 560px) {
  .hd-cierre > .hd-cierre__acciones { flex-basis: 100%; }
}