/*
 * Homepage (primera ronda, 14-10-2026), en código propio. Valores de la versión aprobada por el cliente
 * (home.html de la referencia B), medidos con Chrome a 390 y 1366 px: reúne en una hoja lo que allá reparten
 * Elementor, RevSlider, rselements y los parches ht-v5…ht-v31. Se carga solo en la portada (inc/homepage.php).
 *
 * El tema fija con !important la fuente, el tamaño y el interlineado de h1 y el interlineado de h3–h6; esos
 * valores llevan !important acá, acotados a la Homepage. El resto no lo necesita.
 */

.home #page,
.home .main-contain { background-color: var(--ht-navy); }

.ht-home {
  font-family: "Rajdhani", Arial, sans-serif;
  font-size: var(--ht-texto); /* texto de lectura: global.css */
  line-height: 1.7; /* relativa, como en la versión aprobada: escala con cada tamaño de letra */
  color: #fff;
}
.ht-home__contenedor { box-sizing: border-box; max-width: 1100px; margin: 0 auto; padding: 0 15px; }
.ht-home ul { margin: 0; padding: 0; list-style: none; }
.ht-home p { margin: 0; }
.ht-home img { max-width: 100%; height: auto; }

.ht-home__kicker { margin: 0 0 10px !important; color: #60B0E2; font-size: 16px; line-height: 27.2px; font-weight: 600; }
.ht-home__kicker--blanco { color: #fff; }
.ht-home__titulo {
  margin: 0 0 20px;
  color: var(--ht-green);
  font-family: "Rajdhani", Arial, sans-serif;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 0;
}
.ht-home__titulo--blanco { color: #fff; }
.ht-home__kicker--centro,
.ht-home__titulo--centro { text-align: center; }

.ht-visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Puntos de los carruseles (los arma carrusel.js): el botón es la zona de toque de 24 px y el punto visible se
   dibuja adentro, con el tamaño de la versión aprobada; cada carrusel le da su aspecto */
.ht-punto { position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.ht-punto::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; margin: auto; border-radius: 50%; }
.ht-punto:focus-visible { outline: 2px solid var(--ht-green); outline-offset: 1px; border-radius: 50%; }
/* al hacer clic, sin el recuadro celeste que Bootstrap pone a todo botón con foco; con teclado queda el verde */
.ht-punto:focus:not(:focus-visible) { outline: none; }

/* ---------- Portada: fotos que se funden, la frase y los puntos a la derecha (antes RevSlider) ---------- */

/* El encabezado del tema va encima de la foto, pero lo pone ahí su JS recién al final de la carga (lo envuelve en
   .sticky-wrapper, absoluto). Hasta entonces ocupaba su lugar y, al llegar el JS, la portada subía 221 px en
   celular: CLS 0,27 en Lighthouse (14-10-2026). Sin alto propio y por encima, queda igual desde el principio. */
#rs-header { position: relative; z-index: 9; height: 0; }

.ht-portada {
  position: relative;
  height: calc(100vh + 100px);
  height: calc(100svh + 100px);
  overflow: hidden;
  background: var(--ht-navy);
  color: #fff;
}
.ht-portada__slides,
.ht-portada__slide { position: absolute; inset: 0; }
.ht-portada__slide { visibility: hidden; opacity: 0; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.ht-portada__slide.is-activa { z-index: 1; visibility: visible; opacity: 1; transition: opacity 1.2s ease; }
.ht-portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-portada__slide.is-activa .ht-portada__foto { animation: ht-portada-zoom 9s ease-out both; }
.ht-portada__slide::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.ht-portada__texto {
  position: absolute;
  z-index: 1;
  top: calc(50% - 150px);
  left: calc((100% - 1000px) / 2);
  width: 550px;
}
.ht-portada__texto p { margin: 0; color: #fff; font-family: "Rajdhani", Arial, sans-serif; font-size: 50px; line-height: 59px; font-weight: 500; }
.ht-portada__puntos {
  position: absolute;
  z-index: 3;
  top: calc(50% - 86px);
  right: 17px;
  display: flex;
  flex-direction: column;
}
.ht-portada .ht-punto::before {
  width: 18px; height: 18px;
  border: 3px solid #C7C7CC;
  box-shadow: rgba(130,130,130,.3) 0 0 2px 1px;
  transition: border-color .3s ease;
}
.ht-portada .ht-punto:hover::before { border-color: #fff; }
.ht-portada .ht-punto[aria-current="true"]::before { border-color: var(--ht-green); }
/* La foto se funde en el azul de la página */
.ht-portada__transicion {
  position: absolute;
  z-index: 2;
  right: 0; bottom: 0; left: 0;
  height: 160px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,38,76,0) 0%, rgba(20,38,76,.08) 18%, rgba(20,38,76,.25) 34%, rgba(20,38,76,.48) 50%, rgba(20,38,76,.7) 65%, rgba(20,38,76,.87) 79%, rgba(20,38,76,.97) 91%, #14264C 100%);
}
@keyframes ht-portada-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

@media (max-width: 1040px) {
  .ht-portada__texto { left: 32px; }
}
@media (max-width: 767px) {
  .ht-portada__texto { top: calc(50% - 181px); width: 260px; }
  .ht-portada__texto p { font-size: 28px; line-height: 33px; }
}

/* ---------- "El talento correcto…": recuadro con el título de la página (el cuadro de conversación, en
   conversacion.css) ---------- */

.ht-insight {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: calc(100% - 40px);
  max-width: 1280px;
  margin: clamp(40px, 4.5vw, 64px) auto clamp(48px, 5vw, 72px);
  padding: clamp(34px, 3.6vw, 52px) clamp(24px, 5vw, 72px);
  color: #fff;
  border: 1px solid rgba(121,223,173,.12);
  border-radius: clamp(30px, 4vw, 48px);
  background:
    radial-gradient(circle at 88% 18%, rgba(102,204,153,.2), transparent 32%),
    linear-gradient(135deg, #0B1731 0%, #14264C 58%, #101F3E 100%);
  box-shadow: 0 30px 90px rgba(11,23,49,.2);
}
.ht-insight::before,
.ht-insight::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border: 1px solid rgba(102,204,153,.14);
  border-radius: 50%;
  pointer-events: none;
}
.ht-insight::before { top: -260px; right: -70px; }
.ht-insight::after { right: 150px; bottom: -350px; }
.ht-insight__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
  width: min(100%, 1180px);
  margin: 0 auto;
}
.ht-insight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px !important;
  color: var(--ht-green-bright);
  font-size: 16px;
  line-height: 27.2px;
  font-weight: 600;
}
.ht-insight__eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ht-green);
  box-shadow: 0 0 0 6px rgba(102,204,153,.1);
}
.ht-insight h1 {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-family: "Rajdhani", Arial, sans-serif !important;
  font-size: 36px !important;
  line-height: 40px !important;
  font-weight: 700;
  letter-spacing: 0;
}
.ht-insight__copy { max-width: 560px; margin: 28px 0 0 !important; color: rgba(255,255,255,.72); }
.ht-insight__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  color: #fff;
  font-size: 16px; /* enlace con forma de botón: no crece con el texto */
  font-weight: 600;
  text-decoration: none;
}
.ht-insight__link span {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--ht-navy-deep);
  background: var(--ht-green);
  transition: transform 180ms ease;
}
.ht-insight__link:is(:hover, :focus) { color: var(--ht-green-bright); }
.ht-insight__link:is(:hover, :focus) span { transform: translateX(4px); }

@media (max-width: 900px) {
  .ht-insight__inner { grid-template-columns: 1fr; }
  .ht-insight__copy { max-width: 700px; }
}
@media (max-width: 767px) {
  .ht-insight { width: calc(100% - 24px); margin: 28px auto 40px; padding: 30px 18px; border-radius: 26px; }
  .ht-insight h1 { font-size: 30px !important; line-height: 34px !important; }
}

/* ---------- ¿Quiénes somos? y Servicios ---------- */

/*
 * Círculos decorativos de fondo de Quiénes somos (que en la versión aprobada abarca también Servicios) y de
 * Equipo. Allá son PNG bajo una capa azul al 70 %; acá SVG con los colores ya mezclados. En escritorio quedan
 * fijos a la ventana mientras se recorre la sección, igual que allá (por eso no salen en capturas de página
 * completa).
 */
.ht-quienes,
.ht-servicios-home { background: url(../img/fondo-quienes.svg) left top / 600px 922px no-repeat fixed; }
.ht-equipo { background: url(../img/fondo-equipo.svg) right top / 500px 734px no-repeat fixed; }
@media (max-width: 1024px) {
  /* sin fijar, desde el borde de la sección: los de Quiénes somos siguen por debajo de Servicios */
  .ht-home { position: relative; z-index: 0; } /* contexto propio: el z-index -1 queda sobre el azul de la página */
  .ht-quienes { position: relative; }
  .ht-quienes,
  .ht-servicios-home { background: none; }
  .ht-quienes::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; left: 0;
    width: 100%; height: 922px;
    background: url(../img/fondo-quienes.svg) left top / 600px 922px no-repeat;
    pointer-events: none;
  }
  .ht-equipo { background-attachment: scroll; }
}

.ht-quienes { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-top: 80px; }
.ht-quienes__foto { padding: 10px; }
.ht-quienes__foto img { display: block; width: 100%; }
.ht-quienes__texto { padding: 0 45px; }
.ht-quienes__texto p:not(.ht-home__kicker) { margin: 0 0 7px; }

.ht-servicios-home { padding: 60px 10px 125px; }
.ht-servicios-home__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* alto fijo como en la versión aprobada: el título de tres líneas sobresale un poco, sin correr lo de abajo */
.ht-servicios-home__item { display: flex; align-items: center; gap: 15px; height: 90px; }
.ht-servicios-home__icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--ht-green);
  transition: transform .3s ease;
}
.ht-servicios-home__icono svg { width: 50px; height: 50px; }
.ht-servicios-home__item:hover .ht-servicios-home__icono { transform: scale(1.06); }
.ht-servicios-home__item h3 { margin: 0 0 1px; font-family: "Rajdhani", Arial, sans-serif; font-size: 28px; line-height: 32.2px !important; font-weight: 600; }
.ht-servicios-home__item h3 a { color: #fff; text-decoration: none; transition: color .2s ease; }
.ht-servicios-home__item h3 a:is(:hover, :focus-visible) { color: var(--ht-green); }

@media (max-width: 767px) {
  .ht-home__titulo { font-size: 30px; line-height: 34px; }
  .ht-home__kicker { margin-bottom: 0 !important; }
  .ht-home__kicker--centro,
  .ht-home__titulo--centro { text-align: left; } /* en celular, Clientes y Certificaciones van a la izquierda */
  .ht-quienes { grid-template-columns: 1fr; padding-top: 0; }
  .ht-quienes__texto { padding: 45px; }
  .ht-quienes__texto p:not(.ht-home__kicker),
  .ht-testimonios__intro { font-size: var(--ht-texto); line-height: var(--ht-texto-alto); }
  .ht-servicios-home { padding: 60px 10px 27px; }
  .ht-servicios-home .ht-home__titulo { margin: 0 0 100px 10px; }
  .ht-servicios-home__lista { grid-template-columns: 1fr; gap: 70px; }
  .ht-servicios-home__item { flex-direction: column; height: auto; text-align: center; }
  .ht-servicios-home__item h3 { font-size: 24px; line-height: 28px !important; }
}

/* ---------- Equipo: fundadores y consultores asociados ---------- */

.ht-equipo { padding: 85px 15px 65px; }
.ht-equipo__grupo + .ht-equipo__grupo { margin-top: 80px; }
/* 30 arriba: se funde con los 20 del título y quedan los 30 de la versión aprobada */
.ht-equipo__texto { max-width: 500px; margin: 30px 10px 36px !important; }
.ht-equipo__personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-equipo__grupo--consultores .ht-equipo__personas { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 30px; }
.ht-persona { display: flex; flex-direction: column; align-items: center; padding: 30px; text-align: center; }
.ht-persona--consultor { min-height: 340px; padding: 10px; }
.ht-persona__foto { width: 70%; max-width: 322px; }
.ht-persona--consultor .ht-persona__foto { width: 190px; }
.ht-persona__foto img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 8px solid transparent;
  border-radius: 50%;
  filter: grayscale(1);
  transition: transform .35s ease, border-color .3s ease, filter .3s ease;
}
.ht-persona:hover .ht-persona__foto img { transform: scale(1.06); border-color: var(--ht-green); filter: none; }
.ht-persona h3 {
  margin: 15px 0 5px;
  color: var(--ht-green);
  font-family: "Rajdhani", Arial, sans-serif;
  font-size: 20px;
  line-height: 28px !important;
  font-weight: 700;
}
.ht-persona__cargo { margin: 0 0 4px !important; color: #fff; font-size: 13.5px; line-height: 13.5px; }
.ht-persona__redes { display: flex; justify-content: center; gap: 6px; }
.ht-persona__red {
  display: grid;
  place-items: center;
  width: 45px; height: 45px;
  border-radius: 50%;
  background: var(--ht-green);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  text-decoration: none;
  transition: opacity .2s ease;
}
a.ht-persona__red:is(:hover, :focus-visible) { color: #fff; opacity: .9; }
.ht-persona__red .fa-linkedin::before { content: "\f08c"; } /* FA4 del tema pisa el glifo de FA5 (igual que en el pie) */

@media (max-width: 1024px) {
  .ht-equipo__grupo--consultores .ht-equipo__personas { padding: 0; }
}
@media (max-width: 767px) {
  .ht-equipo { padding: 85px 15px 30px; } /* 186 abajo en la versión aprobada: dejaba un hueco grande antes de Clientes (16-10) */
  .ht-equipo__grupo--fundadores .ht-home__titulo { margin-left: 10px; }
  .ht-equipo__personas,
  .ht-equipo__grupo--consultores .ht-equipo__personas { grid-template-columns: 1fr; }
  .ht-equipo__grupo--consultores .ht-equipo__personas { padding-top: 50px; }
  .ht-persona { padding: 10px; }
  .ht-persona--fundador .ht-persona__foto { width: 217px; }
}

/* ---------- Clientes: cinta continua de logos, en gris; toman color al pasar el mouse ---------- */

/* la cinta ocupa el ancho del contenedor del sitio (pedido del 14-10; la versión aprobada la dejaba en 913 px) */
.ht-clientes { padding: 70px 0 90px; }
.ht-clientes .ht-home__titulo { margin-bottom: 4px; }
/* el texto va debajo del título (16-10): lo separa de la cinta lo que antes separaba al título */
.ht-clientes .ht-home__kicker { margin-bottom: 10px !important; }
.ht-clientes__cinta { display: flex; overflow-x: auto; }
.ht-clientes__cinta.is-carrusel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ht-clientes__logos { display: flex; flex: none; }
.ht-clientes__cinta.is-carrusel .ht-clientes__logos { animation: ht-cinta var(--ht-cinta-duracion, 60s) linear infinite; }
.ht-clientes__cinta.is-pausado .ht-clientes__logos { animation-play-state: paused; }
@keyframes ht-cinta { to { transform: translateX(-100%); } }
/* logos un 30 % más grandes que en la versión aprobada (140×56 en celdas de 152×112), pedido del 15-10 */
.ht-logo { display: grid; flex: none; place-items: center; width: 200px; height: 140px; }
.ht-logo__gris,
.ht-logo__color { grid-area: 1 / 1; width: 180px; height: 72px; object-fit: contain; transition: opacity .35s ease, filter .35s ease, transform .35s ease; }
.ht-logo__gris { opacity: .92; }
.ht-logo__color { opacity: 0; }
.ht-logo:hover :is(.ht-logo__gris, .ht-logo__color) { transform: scale(1.07); }
.ht-logo:hover .ht-logo__gris { opacity: 0; }
.ht-logo:hover .ht-logo__color { opacity: 1; filter: drop-shadow(0 0 12px rgba(255,255,255,.18)); }

@media (max-width: 767px) {
  .ht-clientes { padding: 35px 0 40px; }
  .ht-logo { width: 168px; height: 120px; }
  .ht-logo :is(.ht-logo__gris, .ht-logo__color) { width: 150px; height: 60px; }
  .ht-clientes :is(.ht-home__kicker, .ht-home__titulo) { padding: 0 30px; }
}

/* ---------- Testimonios: foto a la izquierda, uno por vez con puntos debajo ---------- */

/* en pantallas anchas no pasa de 1920 px y la foto crece con el ancho (proporción de la versión aprobada) */
.ht-testimonios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1920px; min-height: 570px; margin: 0 auto; }
.ht-testimonios__foto { position: relative; min-height: clamp(420px, min(50vw, 960px) / 1.55, 640px); }
.ht-testimonios__foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ht-testimonios__texto { display: flex; flex-direction: column; justify-content: center; padding: 20px 45px; }
.ht-testimonios .ht-home__titulo { margin-bottom: 22px; }
.ht-testimonios__intro { margin-bottom: 50px !important; font-weight: 500; }
/* los puntos quedan 38 px bajo el testimonio pero ocupan 30 en el centrado vertical, como en la versión aprobada */
.ht-testimonios__carrusel { overflow: hidden; margin-bottom: -26px; }
/* la pista mide lo que el testimonio más largo: los puntos y la foto no se mueven al pasar de uno a otro (pedido del
   14-10; en la versión aprobada el alto cambiaba con cada uno) */
.ht-testimonios__lista { display: flex; align-items: flex-start; transition: transform .6s ease; }
.ht-testimonio { box-sizing: border-box; flex: 0 0 100%; padding-right: 15px; }
.ht-testimonio figure { margin: 0; }
.ht-testimonios__carrusel:not(.is-carrusel) .ht-testimonio:not(.is-activa) { display: none; }
/* el tema le pone a todo blockquote fondo blanco, sombra y márgenes con !important, y una barra azul */
.ht-testimonio blockquote { margin: 0 0 28px !important; padding: 0 14px 0 0; border: 0; background: none !important; box-shadow: none !important; }
.ht-testimonio blockquote p { margin: 0 !important; color: #fff; font-size: var(--ht-texto); line-height: var(--ht-texto-alto); font-style: italic; }
.ht-testimonio blockquote::before,
.ht-testimonio blockquote::after { content: none; }
.ht-testimonio figcaption { padding-left: 15px; font-size: 16px; } /* nombre y cargo: etiquetas, no crecen */
.ht-testimonio__nombre { display: block; color: var(--ht-green); font-weight: 600; line-height: 27px; }
.ht-testimonio__cargo { display: block; color: #60B0E2; font-weight: 600; line-height: 23.2px; }
.ht-testimonios__puntos { display: flex; justify-content: center; padding-top: 32px; }
.ht-testimonios .ht-punto::before { width: 12px; height: 12px; background: #fff; opacity: .5; transition: opacity .3s ease; }
.ht-testimonios .ht-punto:hover::before,
.ht-testimonios .ht-punto[aria-current="true"]::before { opacity: 1; }

@media (max-width: 767px) {
  .ht-testimonios { grid-template-columns: minmax(0, 1fr); }
  .ht-testimonios__foto { min-height: 0; aspect-ratio: 3 / 2; margin: 14px 14px 28px; }
  .ht-testimonios__texto { padding: 34px 45px; }
  .ht-testimonio figcaption { padding-left: 0; }
}

/* ---------- Certificaciones: seis logos en dos filas de tres ---------- */

.ht-certificaciones { padding: 120px 20px; }
.ht-certificaciones .ht-home__titulo { margin-bottom: 30px; }
.ht-certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px) clamp(20px, 4vw, 64px);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto !important;
}
.ht-cert { display: flex; justify-content: center; }
.ht-cert__logo { display: grid; width: 100%; max-width: 290px; aspect-ratio: 12 / 5; transition: transform .35s ease; }
.ht-cert__gris,
.ht-cert__color { grid-area: 1 / 1; width: 100%; height: 100%; max-width: none; object-fit: contain; transition: opacity .35s ease, filter .35s ease; }
.ht-cert__gris { opacity: .92; }
.ht-cert__color { opacity: 0; }
.ht-cert:hover .ht-cert__logo { transform: scale(1.06); }
.ht-cert:hover .ht-cert__gris { opacity: 0; }
.ht-cert:hover .ht-cert__color { opacity: 1; filter: drop-shadow(0 0 14px rgba(255,255,255,.22)); }

@media (max-width: 767px) {
  .ht-certificaciones { padding: 35px 30px 51px; }
  .ht-certificaciones .ht-home__titulo { margin-bottom: 37px; }
}
@media (max-width: 1024px) {
  .ht-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; row-gap: 12px; }
}
@media (max-width: 480px) {
  .ht-certs { grid-template-columns: 1fr; max-width: 280px; row-gap: 6px; }
  .ht-cert__logo { max-width: 250px; }
}

/* ---------- Preguntas frecuentes sobre la empresa (16-10; no está en la versión aprobada) ---------- */

.ht-preguntas { padding: 0 20px 120px; }
.ht-preguntas .ht-home__titulo { margin-bottom: 36px; }
.ht-preguntas__lista { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }
.ht-pregunta {
  border: 1px solid rgba(102,204,153,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  transition: border-color .25s ease, background-color .25s ease;
}
.ht-pregunta[open] { border-color: rgba(102,204,153,.45); background: rgba(255,255,255,.06); }
.ht-pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
.ht-pregunta summary::-webkit-details-marker { display: none; }
.ht-pregunta summary:focus-visible { outline: 2px solid var(--ht-green); outline-offset: 3px; border-radius: 18px; }
.ht-pregunta h3 { margin: 0; color: #fff; font-family: "Rajdhani", Arial, sans-serif; font-size: 21px; line-height: 28px !important; font-weight: 600; }
.ht-pregunta summary:hover h3 { color: var(--ht-green-bright); }
/* el + y la apertura, como en las FAQ de Servicios: el + gira a × y la respuesta se despliega donde el navegador lo
   permite (::details-content con interpolate-size); en el resto abre sin animación */
.ht-pregunta__icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ht-green);
  color: var(--ht-navy-deep);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transition: transform .25s ease;
}
.ht-pregunta[open] .ht-pregunta__icono { transform: rotate(45deg); }
.ht-preguntas { interpolate-size: allow-keywords; }
.ht-pregunta::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s ease allow-discrete; }
.ht-pregunta[open]::details-content { block-size: auto; }
.ht-pregunta__respuesta { padding: 0 26px 24px; }
.ht-pregunta__respuesta p { margin: 0 0 14px; color: rgba(255,255,255,.74); }
.ht-pregunta__respuesta p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .ht-preguntas { padding: 0 0 51px; }
  .ht-preguntas :is(.ht-home__kicker, .ht-home__titulo) { padding: 0 30px; }
  .ht-pregunta summary { padding: 18px 20px; }
  .ht-pregunta h3 { font-size: 18px; line-height: 24px !important; }
  .ht-pregunta__respuesta { padding: 0 20px 20px; }
}

/* ---------- Movimiento reducido: nada se anima solo ---------- */

@media (prefers-reduced-motion: reduce) {
  .ht-portada__slide,
  .ht-portada__slide.is-activa { transition: none; }
  .ht-portada__slide.is-activa .ht-portada__foto { animation: none; }
  .ht-insight__link span,
  .ht-testimonios__lista,
  .ht-pregunta,
  .ht-pregunta__icono,
  .ht-pregunta::details-content { transition: none; }
}