/* ====================================================================
 * SECCIONES DE MARCA — planes, Enrique y preguntas frecuentes
 * PHP: inc/secciones-marca.php
 * ==================================================================== */

/*
 * Las tres vienen del sitio anterior y las tres se visten con los tokens de
 * este: ni un color, ni un radio, ni una tipografia nuevos. Una seccion
 * recuperada que se ve como si viniera de otra web se lee como un parche.
 */

/* ==================================================================== */
/* PLANES DE PUBLICIDAD — carrusel                                      */
/* ==================================================================== */

/*
 * POR QUE UNA FILA QUE SE ARRASTRA Y NO UNA REJILLA DE 3x2.
 *
 * Ver el comentario largo en inc/secciones-marca.php. En corto: los seis
 * carteles son la misma creatividad con una palabra distinta, y en rejilla se
 * leian como una textura repetida. De uno en uno se miran de verdad.
 *
 * TODO ES DESPLAZAMIENTO NATIVO. Sin una linea de JavaScript la fila ya se
 * arrastra con el dedo, con la rueda del raton en horizontal, con la barra y
 * con el teclado. El guion solo anade las flechas y la barra de progreso, que
 * son comodidad, no funcion.
 */

.lt-planes__pista {
  position: relative;
  /* Sangra hasta el borde de la pantalla para que la ultima tarjeta se salga
     por la derecha: es lo que le dice al ojo «hay mas, sigue». Dentro del
     contenedor se cortaria en seco y pareceria que ahi se acaban. */
  margin-inline: calc(var(--canal, 24px) * -1);
}

.lt-planes__lista {
  display: flex;
  gap: var(--e-3, 20px);
  margin: 0;
  padding: 4px var(--canal, 24px) var(--e-2, 16px);
  list-style: none;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--canal, 24px);
  scroll-behavior: smooth;

  /* La barra del navegador se esconde: ya hay flechas y barra de progreso, y
     una barra nativa gris debajo de seis carteles ensucia la seccion. El
     desplazamiento sigue funcionando igual. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lt-planes__lista::-webkit-scrollbar { display: none; }

/* Sin el foco visible, quien navega con teclado no sabria que la fila se puede
   recorrer con las flechas. */
.lt-planes__lista:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 4px;
  border-radius: var(--radio-tarjeta, 8px);
}

.lt-planes__casilla {
  flex: 0 0 clamp(238px, 74vw, 288px);
  scroll-snap-align: start;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lt-planes__lista { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- tarjeta */

.lt-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta, 8px);
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.lt-plan:hover,
.lt-plan:focus-within {
  border-color: var(--cielo);
  transform: translateY(-3px);
  box-shadow: var(--sombra-2, 0 14px 32px rgba(11, 18, 32, .14));
}

@media (prefers-reduced-motion: reduce) {
  .lt-plan:hover, .lt-plan:focus-within { transform: none; }
}

/*
 * EL CARTEL SE VE ENTERO, NO RECORTADO.
 *
 * Dentro de la imagen van el rotulo del plan, el precio y la marca. Con
 * `cover` se perderia justo eso. `contain` sobre el fondo oscuro de la propia
 * creatividad hace que las bandas, cuando las haya, no se noten.
 */
.lt-plan__arte {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--noche);
}

.lt-plan__pie {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--e-3, 20px);
}

.lt-plan__precio {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: var(--peso-titulo);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  color: var(--tinta);
}

/* El simbolo mas pequeno y elevado: es la convencion de precio de siempre y
   deja que la cifra mande. */
.lt-plan__moneda {
  font-size: .5em;
  font-weight: var(--peso-fuerte);
  vertical-align: .7em;
  margin-right: 2px;
  color: var(--apagado);
}

/*
 * ---------------------------------------------------------------------------
 * EL NOMBRE DEL PLAN. Punto 11 del documento de correcciones.
 * ---------------------------------------------------------------------------
 * «Destacar visualmente los nombres de los planes, por ejemplo "Plan Premium".
 * Usar sombra, contraste, tamano, borde o un color diferente para dar jerarquia
 * sin perder el estilo profesional».
 *
 * Estaba en gris apagado y al tamano de un pie de foto: el nombre del producto
 * que se vende era lo mas pequeno de su propia tarjeta.
 *
 * De las cinco herramientas que enumera el encargo se usan TRES —tamano, peso y
 * color— y se dejan fuera la sombra y el borde a proposito. Una sombra sobre
 * texto y un borde alrededor del nombre es lo que separa una tarjeta de precios
 * de una pegatina de descuento, y el encargo pedia expresamente no perder el
 * estilo profesional. Con jerarquia de tamano y el azul de la casa basta.
 *
 * El filete de debajo hace el trabajo que haria el borde sin encerrar el texto.
 */
.lt-plan__nombre {
  margin: 0 0 var(--e-2, 16px);
  padding-bottom: 10px;
  position: relative;

  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--tinta);
}

.lt-plan__nombre::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--marca);
}

/*
 * EL PERIODO, PEGADO A LA CIFRA Y MUCHO MAS PEQUENO.
 *
 * Los siete planes son mensuales y hasta hoy la portada solo decia «$375». Un
 * precio sin periodo se lee como pago unico, y aqui son 375 AL MES: la
 * diferencia entre una cosa y otra es 4.500 dolares al ano. No es un detalle
 * tipografico, es evitar una discusion en la primera factura.
 */
.lt-plan__periodo {
  font-family: var(--fuente-texto);
  font-size: .34em;
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  color: var(--apagado);
}

/*
 * EL RESPALDO CUANDO EL PLAN NO TIENE CARTEL.
 *
 * Misma caja que `.lt-plan__arte` para que la fila no se descuadre. Es la regla
 * de la casa en todo el sitio: donde falta una imagen se pinta algo con
 * intencion, nunca un hueco. Ver lt_seccion_planes().
 */
.lt-plan__respaldo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: var(--e-3, 20px);
  background: linear-gradient(155deg, var(--noche) 0%, var(--marca) 130%);
}

.lt-plan__respaldo-texto {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: var(--peso-titulo);
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
  color: var(--blanco);
}

/*
 * LA FRASE CORTA. Tres lineas como maximo: es lo que decide si alguien abre el
 * detalle, no el detalle en si. Recortada, las siete tarjetas conservan la
 * misma altura y el carrusel no da saltos al pasar de una a otra.
 */
.lt-plan__resumen {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0 0 var(--e-2, 16px);
  font-size: var(--fs-chico);
  line-height: 1.45;
  color: var(--apagado);
}

/* Los dos botones se pegan al fondo para que las siete tarjetas terminen a la
   misma altura aunque el nombre del plan ocupe una linea o dos. */
.lt-plan__botones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  margin-top: auto;
}

.lt-plan__cta,
.lt-plan__ver {
  align-self: stretch;
  text-align: center;
}

/* ---------------------------------------------------------------- flechas */

/*
 * Nacen ocultas. Las enciende assets/js/planes.js poniendo la clase en el
 * contenedor: sin JavaScript no podrian desplazar nada.
 */
.lt-planes__flecha { display: none; }

.lt-planes__pista.is-viva .lt-planes__flecha {
  position: absolute;
  top: 38%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 18, 32, .16);
  transition: background var(--transicion), color var(--transicion), opacity var(--transicion);
}

.lt-planes__pista.is-viva .lt-planes__flecha--antes   { left: 4px; }
.lt-planes__pista.is-viva .lt-planes__flecha--despues { right: 4px; }

.lt-planes__pista.is-viva .lt-planes__flecha:hover {
  background: var(--marca);
  color: var(--blanco);
  border-color: var(--marca);
}

.lt-planes__flecha:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

/* En el extremo no se esconde, se apaga: un control que desaparece mueve el
   resto de la fila y desconcierta. */
.lt-planes__pista.is-viva .lt-planes__flecha[disabled] {
  opacity: .32;
  cursor: default;
  box-shadow: none;
}

/* En pantallas tactiles las flechas sobran: se arrastra con el dedo y ademas
   taparian media tarjeta. */
@media (max-width: 720px) {
  .lt-planes__pista.is-viva .lt-planes__flecha { display: none; }
}

/* --------------------------------------------------------------- progreso */

.lt-planes__progreso {
  display: none;
  height: 3px;
  margin-top: var(--e-2, 16px);
  border-radius: 999px;
  background: var(--linea);
  overflow: hidden;
}

.lt-planes__pista.is-viva + .lt-planes__progreso { display: block; }

.lt-planes__progreso-barra {
  display: block;
  width: 30%;
  height: 100%;
  border-radius: inherit;
  background: var(--marca);
  transform-origin: left center;
  transition: transform .18s linear, width .18s linear;
}

@media (prefers-reduced-motion: reduce) {
  .lt-planes__progreso-barra { transition: none; }
}



/* ==================================================================== */
/* QUIEN ES ENRIQUE                                                     */
/* ==================================================================== */

.lt-enrique__titulo {
  margin: 6px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 700);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  color: var(--blanco, #FFF);
}

.lt-enrique__sub {
  margin: 6px 0 var(--e-4, 32px);
  color: var(--cielo, #4EA8DE);
  font-size: var(--fs-chico, .875rem);
  font-weight: var(--peso-medio, 600);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/*
 * MEDIO CON MEDIO — como lo pidio el dueno.
 *
 * Era `align-items: start`: los dos pegados arriba. Como el texto mide 262px y
 * la figura 604, el centro del texto quedaba 170px por encima del centro de la
 * foto y la seccion se leia descuadrada por mucho que los bordes superiores
 * coincidieran.
 *
 * `center` alinea los dos bloques por su MITAD, que es lo que el ojo compara
 * cuando dos piezas tienen alturas muy distintas.
 */
.lt-enrique__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

/* El titular ya no va a todo el ancho: vive dentro de la columna de texto. */
.lt-enrique__presentacion > .lt-cabeza-seccion__ante { margin-top: 0; }

@media (max-width: 860px) {
  .lt-enrique__cuerpo { grid-template-columns: 1fr; }

  /*
   * EL RECORTE SE ACOTA AL APILARSE.
   *
   * En una columna ocupaba el ancho entero: a 768px salia de 732x915 y dejaba la
   * seccion en 1949px de alto — una foto sola ocupando dos pantallas y media de
   * movil. Se midio.
   *
   * Acotado a 380px y centrado, la figura se sigue viendo entera y la seccion se
   * queda en un alto razonable. `align-self` vuelve a su sitio porque en una
   * columna ya no hay una fila donde apoyarse.
   */
  .lt-enrique__foto--recorte {
    max-width: 380px;
    margin-inline: auto;
    align-self: auto;
  }
}

.lt-enrique__presentacion p {
  margin: 0 0 var(--e-2, 12px);
  color: rgba(255, 255, 255, .88);
  line-height: 1.6;
  /* Poco mas de 60 caracteres por linea: por encima, el ojo pierde el renglon
     al volver a la izquierda. */
  max-width: 62ch;
}

.lt-enrique__foto {
  margin: 0;
  border-radius: var(--radio, 12px);
  overflow: hidden;
}

/* ====================================================================
 * EL RECORTE — Enrique sobre transparencia
 * ==================================================================== */

/*
 * UN RECORTE NO ES UNA FOTO, Y NO SE PINTA IGUAL.
 *
 * El archivo que dio el dueno es un PNG con transparencia: Enrique con su
 * camara, sin fondo. Tratarlo como las fotos rectangulares —marco redondeado,
 * proporcion 4/5 y recorte `cover`— produce dos errores a la vez: un marco
 * visible alrededor de un fondo que no existe, y un recorte que le corta los
 * pies o la cabeza a una figura que ya venia entera.
 *
 * Asi que se le quita todo: sin marco, sin recorte y sin proporcion forzada.
 * La figura se apoya directamente sobre el fondo de la seccion.
 */
.lt-enrique__foto--recorte {
  position: relative;
  border-radius: 0;
  overflow: visible;
  /*
   * Centrada con el texto. Antes se apoyaba abajo (`align-self: end`) para que
   * no pareciera un sticker colgando, pero con la cabecera ya dentro de la
   * columna de texto los dos bloques tienen alturas parecidas y lo que toca es
   * emparejarlos por la mitad.
   */
  align-self: center;
}

/*
 * EL DISCO DE LUZ DETRAS. Aqui es donde se resuelve el problema de verdad.
 *
 * Su ropa es negra y el fondo azul noche: 1.01:1 medido. Sin nada detras, el
 * cuerpo desaparece y quedan flotando una cabeza y unos brazos.
 *
 * Se probo antes un contorno con `drop-shadow` siguiendo el canal alfa: en el
 * filo daba 1.26:1, o sea casi nada, y para que se notara habia que subirlo
 * hasta el halo blanco de recorte mal hecho. Un filo no arregla esto.
 *
 * Lo que si lo arregla es LEVANTAR EL FONDO detras de la figura. Este disco no
 * es un adorno: es el papel de fondo de un plato de fotografia, y hace lo mismo
 * que en un estudio — separar al sujeto de la pared.
 */
.lt-enrique__foto--recorte::before {
  content: '';
  position: absolute;
  left: 50%;
  /* Anclado abajo y mas ancho que alto: recorta como un fondo de estudio, no
     como una burbuja centrada en el pecho. */
  bottom: -2%;
  width: 116%;
  height: 88%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 55%,
    rgba(70, 132, 196, .58) 0%,
    rgba(48, 96, 152, .40) 40%,
    rgba(24, 52, 92, .18) 68%,
    rgba(7, 19, 36, 0) 82%
  );
  pointer-events: none;
  z-index: 0;
}

/*
 * EL CONTORNO QUE LO DESPEGA DEL FONDO.
 *
 * ESTO NO ES DECORACION, ES LEGIBILIDAD. La camiseta y el pantalon son negros y
 * la seccion es azul noche: MEDIDO, 1.01:1 de diferencia. Sin nada, el cuerpo
 * desaparece contra el fondo y en pantalla quedan flotando una cabeza y unos
 * brazos — el recorte parece roto.
 *
 * SE USA `drop-shadow` Y NO UN OVALO DETRAS. La primera version puso un
 * resplandor eliptico en un `::before`, y al medirlo daba EXACTAMENTE los
 * mismos numeros que sin el: un ovalo generico ilumina un area, no una figura,
 * asi que en el borde de la silueta —que es donde hace falta— ya se habia
 * desvanecido.
 *
 * `drop-shadow` sigue el CANAL ALFA del PNG, o sea el contorno real de la
 * persona. Van dos capas: una pegada y brillante que dibuja el filo, y otra
 * ancha y suave que separa el conjunto del fondo. Es un contraluz de estudio,
 * que ademas es exactamente como se ilumina un retrato sobre fondo oscuro.
 */
.lt-enrique__foto--recorte img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* Se anulan las reglas de la foto rectangular: aqui no hay nada que recortar. */
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center bottom;
  /*
   * Una sombra proyectada suave, ya no un contraluz. Con el disco detras, la
   * silueta ya se separa; esto solo le da peso para que no parezca pegada.
   */
  filter: drop-shadow(0 14px 34px rgba(2, 8, 20, .70));
}

/*
 * LA FOTO SE VE ENTERA, CON LA CABEZA DENTRO.
 *
 * Salia cortada por arriba: el retrato es vertical (1964x2048) y la caja lo
 * recortaba desde el centro, que en un retrato de medio cuerpo es el pecho. Se
 * le comia la cabeza, que es exactamente lo que una foto de «quien es esta
 * persona» no puede perder.
 *
 * `object-position: center top` ancla el recorte ARRIBA: si algo tiene que
 * sobrar, que sobre de los pies. Y la proporcion 4/5 en vez de dejar el alto
 * libre evita que la foto estire la fila y descuadre la columna de texto de al
 * lado.
 */
.lt-enrique__foto img {
  display: block;
  width: 100%;
  height: auto;
  /*
   * 4/5 y anclado ARRIBA. El retrato es casi cuadrado (1964x2048) y la caja es
   * mas alta que ancha, asi que sobra por abajo: con el ancla arriba lo que se
   * pierde son los pies, no la cabeza.
   *
   * Esto SOLO funciona desde que la imagen llega completa. Mientras se pedia el
   * tamano `lt-tarjeta` —un recorte duro apaisado— el navegador ya recibia el
   * torso y ninguna regla de encuadre podia devolver una cara que no estaba en
   * el archivo. Ver inc/secciones-marca.php.
   */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/*
 * LOS TRES PASOS.
 *
 * Lista ORDENADA y no una cualquiera: 02, 03 y 04 cuentan un camino, no son
 * tres cosas sueltas. El numero grande es decorativo —lleva aria-hidden—
 * porque la lista ordenada ya lo dice sola a quien escucha.
 */
.lt-enrique__pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4, 32px);
  margin: var(--e-5, 48px) 0 0;
  padding: var(--e-4, 32px) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

@media (max-width: 860px) {
  .lt-enrique__pasos { grid-template-columns: 1fr; gap: var(--e-3, 20px); }
}

.lt-enrique__numero {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 700);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--cielo, #4EA8DE);
  opacity: .55;
}

.lt-enrique__paso-titulo {
  margin: 8px 0 6px;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanco, #FFF);
}

.lt-enrique__paso p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-chico, .875rem);
  line-height: 1.6;
}

/* ==================================================================== */
/* PREGUNTAS FRECUENTES                                                 */
/* ==================================================================== */

.lt-faq__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lt-faq__item {
  border: 1px solid rgba(11, 18, 32, .12);
  border-radius: var(--radio, 12px);
  background: var(--blanco, #FFF);
  overflow: hidden;
}

.lt-faq__pregunta {
  /* Fuera el triangulito del navegador: no encaja con nada del sitio y se
     sustituye por el signo de la derecha. Hacen falta las dos reglas porque
     WebKit usa su propio pseudo-elemento. */
  list-style: none;
  position: relative;
  padding: 16px 52px 16px var(--e-3, 20px);
  font-weight: var(--peso-medio, 600);
  color: var(--tinta);
  cursor: pointer;
}

.lt-faq__pregunta::-webkit-details-marker { display: none; }

/*
 * El signo mas que se convierte en menos.
 *
 * Son dos trazos y no un icono: la barra vertical se desvanece al abrir y queda
 * la horizontal. Con un SVG habria que cambiar el dibujo entero; con dos
 * pseudo-elementos, la transicion sale sola.
 */
.lt-faq__pregunta::before,
.lt-faq__pregunta::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--cielo, #4EA8DE);
  transition: transform 200ms ease, opacity 200ms ease;
}

.lt-faq__pregunta::before { transform: translateY(-50%) rotate(90deg); }
.lt-faq__pregunta::after  { transform: translateY(-50%); }

.lt-faq__item[open] .lt-faq__pregunta::before {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.lt-faq__pregunta:hover { background: var(--hueso, #F6F3EE); }

.lt-faq__pregunta:focus-visible {
  outline: 2px solid var(--cielo, #4EA8DE);
  outline-offset: -2px;
}

.lt-faq__respuesta {
  padding: 0 var(--e-3, 20px) var(--e-3, 20px);
  border-top: 1px solid rgba(11, 18, 32, .08);
}

.lt-faq__respuesta p {
  margin: var(--e-2, 12px) 0 0;
  color: var(--tinta-suave, #55617A);
  line-height: 1.65;
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .lt-plan,
  .lt-faq__pregunta::before,
  .lt-faq__pregunta::after { transition: none; }
}

/* ====================================================================
 * LAS RESENAS — el cierre de la portada
 * PHP: inc/secciones-marca.php (lt_seccion_resenas)
 * ==================================================================== */

/*
 * DOS FICHAS BLANCAS SOBRE NOCHE, como las del carril: es el mismo lenguaje
 * —lo claro flota sobre lo oscuro— abriendo y cerrando la pagina.
 */

.lt-resenas__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  /* Dos resenas no necesitan todo el ancho: a 1320px cada cita seria una linea
     y media y pareceria un formulario. Acotadas, se leen como citas. */
  max-width: 880px;
  margin-inline: auto;
}

.lt-resenas__ficha {
  display: flex;
  flex-direction: column;
  gap: var(--e-2, 12px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--marca-borde, #C3D3E8);
  border-radius: var(--radio-pieza, 14px);
  background: var(--blanco, #FFF);
  color: var(--tinta, #0B1220);
}

/*
 * Estrellas en el azul de marca, no en ambar: la paleta del sitio es azul,
 * blanco y negro por decision del dueno, y las estrellas doradas de Google son
 * de Google, no de esta pagina.
 */
.lt-resenas__estrellas {
  display: flex;
  gap: 3px;
  margin: 0;
  color: var(--marca, #295091);
}

.lt-resenas__cita {
  margin: 0;
  flex: 1;
}

.lt-resenas__cita p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.lt-resenas__pie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--e-2, 12px);
  border-top: 1px solid rgba(11, 18, 32, .08);
}

.lt-resenas__nombre { font-weight: var(--peso-medio, 600); }

.lt-resenas__origen {
  color: var(--apagado, #5A5A5A);
  font-size: .82rem;
}

/* --- El cierre ------------------------------------------------------ */

.lt-resenas__cierre {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
}

.lt-resenas__llamada {
  margin: 0 0 var(--e-2, 12px);
  color: var(--blanco, #FFF);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 700);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

@media (max-width: 640px) {
  .lt-resenas__rejilla { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- */
/* Los planes sobre la banda oscura                                      */
/* -------------------------------------------------------------------- */

/*
 * Ver el comentario en inc/secciones-marca.php: la sección pasó de blanca a
 * noche porque quedaba pegada a otra blanca y porque los seis carteles son
 * turquesa sobre oscuro — sobre papel se apagaban.
 *
 * Las tarjetas dejan de ser blancas. Una tarjeta blanca sobre azul noche
 * convierte la sección en seis rectángulos de papel flotando: el ojo va al
 * marco, no al cartel. En azul un punto más claro que el fondo, el marco
 * desaparece y lo único que brilla es la creatividad, que es lo que se vende.
 */
.lt-planes .lt-plan {
  background: var(--noche-suave);
  border-color: var(--noche-borde);
  box-shadow: none;
}

.lt-planes .lt-plan:hover,
.lt-planes .lt-plan:focus-within {
  border-color: var(--cielo);
  /* El resplandor sustituye a la sombra: sobre fondo oscuro una sombra negra
     no se ve, así que la elevación se sugiere con luz de marca. */
  box-shadow: 0 0 0 1px var(--cielo), 0 16px 40px rgba(78, 168, 222, .22);
}

.lt-planes .lt-plan__arte {
  /* El cartel ya trae su propio fondo oscuro: igualarlo al de la tarjeta hace
     que no se note dónde acaba la imagen y empieza la caja. */
  background: var(--noche-suave);
}

.lt-planes .lt-plan__precio { color: var(--blanco); }
.lt-planes .lt-plan__moneda { color: var(--cielo); }
.lt-planes .lt-plan__periodo { color: var(--niebla); }
/*
 * La seccion de planes va sobre fondo noche, asi que el nombre no puede heredar
 * el color tinta de arriba —seria negro sobre azul oscuro— ni quedarse en el
 * niebla apagado que tenia antes, que es justo lo que se estaba corrigiendo.
 * Blanco, que es el maximo contraste disponible sobre este fondo.
 */
.lt-planes .lt-plan__nombre { color: var(--blanco); }

/*
 * El resumen sobre fondo oscuro. `--niebla` es el gris de la tarjeta clara y
 * sobre `--noche-suave` da 3,1:1 — por debajo del 4,5:1 que pide la WCAG para
 * texto normal. Se sube a `--blanco` con opacidad, que llega a 12:1 y sigue
 * siendo secundario respecto al titulo.
 */
.lt-planes .lt-plan__resumen { color: rgba(255, 255, 255, .78); }

/*
 * EL BOTON FANTASMA DENTRO DE LA TARJETA OSCURA.
 *
 * El fantasma de la casa es borde al 60 % sobre fondo claro. Aqui el fondo es
 * `--noche-suave`, asi que el borde se dibuja en cielo: mantiene el mismo
 * lenguaje (contorno, no relleno) y se ve, que es lo que no hacia el gris.
 */
.lt-planes .lt-plan__ver {
  border-color: rgba(78, 168, 222, .55);
  color: var(--blanco);
  background: transparent;
}

.lt-planes .lt-plan__ver:hover,
.lt-planes .lt-plan__ver:focus-visible {
  border-color: var(--cielo);
  background: rgba(78, 168, 222, .14);
  color: var(--blanco);
}

/* ------------------------------------------------- la ventana del detalle */

/*
 * <DIALOG> NATIVO, IGUAL QUE LA VENTANA DE LA VITRINA.
 *
 * El navegador se encarga del velo, del foco atrapado dentro y de la tecla
 * Escape. Reimplementar eso a mano es de donde salen las ventanas que no se
 * cierran con el teclado.
 *
 * Se anula el `max-height: 100%` del agente de usuario y se pone 86svh: en un
 * telefono, `vh` cuenta la barra del navegador y la ventana se salia por abajo
 * justo donde esta el boton de contratar.
 */
.lt-plan__ventana {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: 86svh;
  padding: 0;
  border: 1px solid var(--noche-borde);
  border-radius: var(--radio-tarjeta, 8px);
  background: var(--noche-suave);
  color: var(--blanco);
  overflow: hidden;
}

.lt-plan__ventana::backdrop {
  background: rgba(4, 8, 16, .78);
  backdrop-filter: blur(3px);
}

.lt-plan__ventana-caja {
  position: relative;
  max-height: 86svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 4vw, 32px);
}

.lt-plan__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  /* 44 px: la regla de la casa para todo lo que se pulsa. */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--niebla);
  cursor: pointer;
}

.lt-plan__cerrar:hover { background: rgba(255, 255, 255, .1); color: var(--blanco); }
.lt-plan__cerrar:focus-visible { outline: 3px solid var(--cielo); outline-offset: 2px; }

.lt-plan__ventana-precio {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(2.2rem, 7vw, 3rem);
  font-weight: var(--peso-titulo);
  line-height: 1;
  color: var(--blanco);
}

.lt-plan__ventana-titulo {
  margin: 6px 0 0;
  font-size: clamp(1.1rem, 3.4vw, 1.35rem);
  color: var(--cielo);
}

.lt-plan__ventana-bajada {
  margin: 10px 0 0;
  font-size: var(--fs-chico);
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}

.lt-plan__lista {
  margin: var(--e-3, 20px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

/*
 * LA PALOMITA VA EN `::before` Y NO COMO CARACTER DEL TEXTO.
 *
 * Metida en la cadena, un lector de pantalla la lee («marca de verificacion»)
 * antes de cada uno de los catorce beneficios del Diamante. Como pseudo no
 * existe para quien escucha y la lista se lee limpia.
 */
.lt-plan__punto {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-chico);
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

.lt-plan__punto::before {
  content: "";
  position: absolute;
  top: .38em;
  left: 2px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--cielo);
  border-bottom: 2px solid var(--cielo);
  transform: rotate(-45deg);
}

/*
 * LOS AVISOS NO LLEVAN PALOMITA, Y ESO ES EL PUNTO.
 *
 * «No incluye creacion de contenido» con la misma palomita verde que los
 * beneficios se lee como un beneficio mas. Aqui es una barra ambar a la
 * izquierda: el ojo lo separa de la lista antes de leerlo.
 */
.lt-plan__punto--aviso {
  padding: 8px 12px 8px 14px;
  border-left: 3px solid #e0a800;
  border-radius: 0 4px 4px 0;
  background: rgba(224, 168, 0, .1);
  color: rgba(255, 255, 255, .82);
}

.lt-plan__punto--aviso::before { content: none; }

.lt-plan__ventana-cta {
  display: block;
  margin-top: var(--e-3, 20px);
  text-align: center;
}

/*
 * LA POLITICA DE PAGO. Pequena y en gris, pero PRESENTE: son condiciones que
 * cuestan dinero (recargo de $8, cancelacion a los 2 dias) y esconderlas seria
 * justo el patron oscuro que este proyecto no usa. Ancho de lectura limitado a
 * 68 caracteres, como el resto del texto largo del sitio.
 */
.lt-planes__politica {
  max-width: 68ch;
  margin: var(--e-4, 28px) auto 0;
  font-size: var(--fs-etiqueta);
  line-height: 1.6;
  text-align: center;
  color: var(--niebla);
}

.lt-planes__politica strong { color: rgba(255, 255, 255, .9); }

/* La flecha del carrusel, en oscuro y con el mismo lenguaje. */
.lt-planes .lt-planes__pista.is-viva .lt-planes__flecha {
  background: var(--noche-suave);
  border-color: var(--noche-borde);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

.lt-planes .lt-planes__pista.is-viva .lt-planes__flecha:hover {
  background: var(--cielo);
  border-color: var(--cielo);
  color: var(--noche);
}

.lt-planes .lt-planes__progreso { background: var(--noche-borde); }
.lt-planes .lt-planes__progreso-barra { background: var(--cielo); }

/*
 * SE JUNTA CON LA CINTA DE LOGOTIPOS DE ABAJO.
 *
 * Las dos secciones son ahora del mismo color y hablan de lo mismo —lo que
 * cuesta, y quién ya lo paga—. Con el relleno completo de las dos quedaba una
 * franja oscura vacía de casi 200 px entre ellas que las volvía a separar. Se
 * recorta por abajo para que se lean como un solo capítulo.
 */
.lt-planes { padding-bottom: clamp(28px, 4vw, 52px); }


/* ==================================================================== */
/* QUIENES SOMOS — la seccion de Enrique, ahora con el equipo           */
/* ==================================================================== */
/*
 * HISTORIA CORTA, PARA NO REPETIRLA:
 *
 *   2026-08-09 manana ... el dueno la quiso BLANCA. Se hizo.
 *   2026-08-09 tarde .... la vio y la quiso «de color azul oscuro, asi tal
 *                         cual como estaba». Se revierte.
 *
 * La variante clara NO se borra: vive al final de este bloque bajo
 * `.lt-somos--claro` y se enciende anadiendo esa clase al <section> en
 * inc/secciones-marca.php. Costo medir seis colores contra su fondo y no se
 * tira por un cambio de opinion.
 *
 * Por defecto, entonces, esta seccion NO necesita reglas de color: hereda las
 * de `.lt-enrique`, que ya estan escritas para fondo noche mas arriba en este
 * mismo archivo. Lo unico que hay aqui es lo NUEVO — el rotulo del bloque de
 * Enrique y la rejilla de personas.
 */

/*
 * El rotulo del bloque de Enrique. Antes era el H2 de la seccion; ahora que el
 * H2 es «Quienes somos», este baja a H3 y por tanto a un cuerpo mas pequeno.
 */
.lt-somos__rotulo {
  margin: 0 0 var(--e-2, 12px);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 700);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  color: var(--blanco, #FFF);
}

/* ------------------------------------------------------- las personas */

/*
 * OCUPAN LA COLUMNA DERECHA, donde antes iba el retrato grande de Enrique.
 *
 * `align-self: center` para que las caras queden a la altura del texto —«medio
 * con medio», que es como el dueno pidio la alineacion de esta seccion el
 * 2026-08-08 y sigue valiendo con dos retratos en vez de uno.
 */
.lt-somos__equipo {
  align-self: center;
  min-width: 0;
}

/*
 * EN ESCRITORIO, LAS FOTOS VUELVEN A LA DERECHA.
 *
 * En el marcado van PRIMERO —lo pidio el dueno: «que sean primero los
 * integrantes del equipo y luego el texto»— porque en el telefono las dos
 * piezas se apilan en el orden del documento y ese es el orden que se ve.
 *
 * A partir de 861px dejan de apilarse y se ponen una al lado de la otra. Ahi
 * «arriba» no significa nada, asi que `order` las devuelve a la composicion
 * que el dueno ya habia aprobado: texto a la izquierda (la columna ancha,
 * 1.4fr) y personas a la derecha.
 *
 * Se usa `order` y no columnas invertidas porque el orden del DOCUMENTO tiene
 * que seguir siendo el bueno: es el que oye un lector de pantalla y el que
 * recorre el tabulador, y en movil ademas es el que se ve.
 */
@media (min-width: 861px) {
  .lt-enrique__cuerpo .lt-enrique__presentacion { order: 1; }
  .lt-enrique__cuerpo .lt-somos__equipo         { order: 2; }
}

@media (max-width: 860px) {
  /* Apiladas: las personas abren la seccion y el texto va debajo. El margen
     que habia aqui empujaba las fotos hacia abajo cuando iban las ultimas; ya
     no van las ultimas, asi que el aire va por debajo. */
  .lt-somos__equipo { margin-top: 0; margin-bottom: var(--e-4, 32px); }
}

/*
 * LAS DOS FIGURAS, RECORTADAS Y SUPERPUESTAS. SIN CIRCULO Y SIN FONDO.
 *
 * Encargo del dueno: «que no esten en circulos… que este la foto grande y al
 * lado otra foto grande superpuesta, las dos puestas asi sin fondo y sin
 * circulo ni nada».
 *
 * Antes eran dos retratos redondos con aro. El circulo obligaba a recortar
 * —`object-fit: cover`— y recortar una figura de cuerpo entero es tirar el
 * cuerpo. Ahora la foto se ve ENTERA y con su forma real, que en el caso de
 * Enrique es un recorte PNG al contorno: se apoya directamente sobre el azul
 * de la seccion, como si estuviera de pie ahi.
 *
 * SE SUPERPONEN CON UN MARGEN NEGATIVO Y NO CON POSICION ABSOLUTA. Con
 * `position: absolute` habria que darle una altura fija al bloque —y la altura
 * la decide la foto, que cambia con el ancho de la pantalla—. Con el margen, la
 * fila se dimensiona sola y sigue funcionando con tres personas o con seis.
 *
 * LA PRIMERA VA DELANTE. `z-index` descendente: quien esta a la izquierda tapa
 * a quien esta a la derecha. Es como se coloca la gente en una foto de grupo y
 * ademas deja al frente a la persona real cuando la segunda todavia es el
 * ejemplo.
 */
/*
 * LA FOTO DEL EQUIPO, ENMARCADA.
 *
 * TERCERA VERSION de esta columna: fueron dos retratos redondos, luego dos
 * recortes PNG superpuestos, y ahora una sola fotografia con su fondo de
 * estudio. El motivo del ultimo cambio no es estetico: los recortes obligaban
 * al dueño a quitar el fondo de cada foto que subiera, y un sitio que solo
 * funciona si su dueño sabe usar Photoshop acaba con la seccion vacia.
 *
 * EL PROBLEMA A RESOLVER: la foto tiene fondo de estudio casi blanco y la
 * seccion es azul noche. A sangre se lee como un agujero blanco en la pagina.
 *
 * Se resuelve enmarcandola: esquina redondeada, filo claro de un pixel y una
 * sombra ancha por debajo. Deja de ser un hueco y pasa a ser una fotografia
 * enmarcada, que es lo que es. Y funciona con CUALQUIER foto que suba mañana,
 * tenga el fondo que tenga.
 */
/*
 * SIN MARCO: LA FOTO SE DESVANECE EN LA SECCION.
 *
 * ---------------------------------------------------------------------------
 * CUATRO INTENTOS, Y EL DIAGNOSTICO DEL DUEÑO FUE EL BUENO
 * ---------------------------------------------------------------------------
 *   1. FOTO PELADA con la esquina de tarjeta -> «asi cuadrado no me cuadra».
 *   2. ARCO + PASPARTU + FILETE -> «no se ve minimalista y no me cuadra con el
 *      diseño». Cierto: el arco era la UNICA forma curva de todo el sitio.
 *   3. ESQUINA + CONTORNO DESPLAZADO -> seguia siendo un marco.
 *   4. LO DE AHORA: ningun marco. Una mascara.
 *
 * Lo que el dueño estaba diciendo las tres veces es lo mismo, y tenia razon:
 * el problema no era QUE marco, era que hubiera marco. En una seccion sin una
 * sola caja —el texto va suelto sobre el azul, los tres bloques numerados
 * tambien— cualquier rectangulo cerrado es el unico objeto con bordes de la
 * pieza. Se ve, y por eso «no cuadra».
 *
 * ---------------------------------------------------------------------------
 * LA MASCARA RESUELVE LAS DOS COSAS A LA VEZ
 * ---------------------------------------------------------------------------
 * El problema de fondo seguia siendo real: una foto de estudio casi blanca
 * sobre azul noche, puesta a sangre, se lee como un agujero. Los marcos lo
 * tapaban poniendole un canto. La mascara lo resuelve por el otro lado:
 * QUITANDO el canto. Los bordes se vuelven transparentes poco a poco, el azul
 * de la seccion entra por ellos y ya no hay ningun filo que delate el
 * rectangulo — las dos personas quedan sobre la pagina, no dentro de una caja.
 *
 * Es ademas lo mas barato que existe: ni un elemento, ni un borde, ni una
 * sombra. Una declaracion.
 *
 * ---------------------------------------------------------------------------
 * POR QUE UNA ELIPSE Y NO UN DEGRADADO POR LADOS
 * ---------------------------------------------------------------------------
 * Con degradados lineales harian falta cuatro mascaras y `mask-composite`, que
 * es justo donde los navegadores se separan (Safari necesita el prefijo y otro
 * nombre de valor). Una `radial-gradient` es UNA declaracion y se comporta
 * igual en todos.
 *
 * LOS NUMEROS ESTAN MEDIDOS SOBRE ESTA FOTO, no elegidos a ojo:
 *   · LOS RADIOS SE MIDEN CONTRA LA CAJA, NO CONTRA LA MITAD. Este fue el
 *     error de la primera version: se puso `ellipse 86% 92%` pensando «que
 *     cubra casi todo», y 86 % del ANCHO son 86 % en cada direccion desde el
 *     centro — o sea que la elipse terminaba muy por fuera de la foto y el
 *     desvanecido caia en un sitio que nadie ve. Resultado medido en pantalla:
 *     los bordes seguian igual de rectos.
 *
 *     Media caja son 50 %. Por eso los radios rondan esa cifra: a 55 % el
 *     borde de la foto cae al 91 % del radio, dentro del tramo que se apaga.
 *   · centro en 50% 45% ....... las dos caras estan en el tercio alto; con el
 *                               centro mas abajo, la cabeza de el entraria en
 *                               la zona que se desvanece.
 *   · opaco hasta el 58% ...... cubre a las dos personas de la cabeza a la
 *                               cintura sin tocarlas.
 *   · CUATRO PARADAS Y NO DOS. Con un solo tramo de opaco a transparente, el
 *     ojo distingue el contorno de la elipse: se ve el ovalo. Con dos tramos
 *     intermedios —78 % y 34 %— la caida deja de ser recta y el borde no se
 *     puede seguir con la vista. Es la misma razon por la que un degradado de
 *     dos colores se ve como una banda y uno de cuatro se ve como aire.
 */
.lt-somos__foto-equipo {
  position: relative;
  margin: 0;
  align-self: center;
}

/*
 * ---------------------------------------------------------------------------
 * SE QUITO LA MASCARA. LO PIDIO EL DUENO.
 * ---------------------------------------------------------------------------
 * Documento de modificaciones, punto 2: «eliminar la vineta o efecto alrededor
 * de la imagen. Se busca una apariencia mas limpia, moderna y profesional».
 *
 * Lo que habia era una elipse que desvanecia los cuatro bordes de la foto
 * contra el azul de la seccion. Resolvia un problema real —una foto de estudio
 * casi blanca, a sangre y en cuadrado sobre azul noche, se lee como un
 * agujero— pero lo resolvia con un efecto, y el efecto se nota. Toda la
 * explicacion de por que se eligio una elipse y de donde salian sus cuatro
 * paradas queda arriba, en el comentario largo, porque explica un problema que
 * sigue existiendo aunque la solucion ya no sea esta.
 *
 * LO QUE LO SUSTITUYE resuelve lo mismo sin efecto ninguno: la esquina
 * redondeada y una sombra ancha y muy suave. La sombra separa la foto del azul
 * —que era el motivo de la mascara— y la esquina evita el filo de cuatro
 * angulos rectos. No hay canto, no hay linea, no hay degradado que seguir con
 * la vista: es la misma pieza, sin nada alrededor.
 *
 * Y NO ES UN MARCO. El dueno ya rechazo dos veces un marco («no me cuadra»,
 * «no se ve minimalista»). Un marco es una linea visible que rodea la foto;
 * esto es la foto y su sombra. Si en pantalla se llegara a leer como un canto,
 * lo que sobra es la sombra, no el radio.
 */
/*
 * ---------------------------------------------------------------------------
 * Y VUELVE LA MASCARA, EL MISMO DIA. ESTE ES EL HISTORIAL COMPLETO:
 * ---------------------------------------------------------------------------
 *   1. Estaba la mascara (bordes desvanecidos).
 *   2. El documento de correcciones pidio quitarla: «eliminar la vineta o
 *      efecto alrededor de la imagen». Se cambio por esquina redondeada y
 *      sombra.
 *   3. El dueno lo vio en produccion y pidio el desvanecido de vuelta:
 *      «sigue saliendo la foto sin los bordes difuminados como estaban».
 *
 * Se queda la version 1, con los MISMOS numeros de antes — que no se eligieron
 * a ojo, estan medidos sobre esta fotografia concreta y siguen explicados en el
 * comentario largo de arriba.
 *
 * NO SE LE PONE RADIO NI SOMBRA. Una sombra alrededor de un borde que se
 * desvanece dibuja justo el rectangulo que la mascara esta borrando: se veria
 * peor que con cualquiera de las dos soluciones por separado.
 */
/*
 * ---------------------------------------------------------------------------
 * 4. Y SE QUITA OTRA VEZ, AHORA DEFINITIVAMENTE. 2026-08-16.
 * ---------------------------------------------------------------------------
 * El dueno, literal: «a la foto de quienes somos quitale el blur, quitale el
 * difuminado de las vinetas, y dejalo asi cuadrado por ahora, o si no
 * redondearle un poquito las esquinas».
 *
 * ESTA VEZ HAY UN MOTIVO NUEVO Y NO ES CAPRICHO, asi que conviene dejarlo
 * escrito: la mascara existia para resolver UN problema concreto —una foto de
 * estudio casi blanca, a sangre y en cuadrado, sobre el AZUL NOCHE de la
 * seccion, se leia como un agujero—. Pero esa seccion ya no es azul: el propio
 * dueno la paso a blanca el 2026-08-09 («que la seccion de Quienes somos sea
 * blanca»), y la clase de hoy es `lt-seccion--hueso lt-somos--claro`.
 *
 * Sobre fondo claro no hay agujero que tapar. El problema que justificaba el
 * efecto desaparecio con el cambio de color, y lo que quedaba era el efecto
 * solo. Por eso esta vez se va y no deberia volver: si alguien la echa de
 * menos, lo que hay que mirar antes es de que color esta la seccion.
 *
 * Se queda una esquina apenas redondeada —la del sistema— porque el dueno lo
 * ofrecio como alternativa y cuatro angulos rectos vivos junto a tarjetas
 * redondeadas cantan. Sin sombra y sin marco: los dos se rechazaron ya.
 *
 * El comentario largo de mas arriba se conserva entero aunque describa una
 * solucion retirada: explica un problema real —fotos claras sobre fondo
 * oscuro— que volvera a aparecer el dia que alguien ponga una seccion asi.
 */
.lt-somos__marco {
  display: block;
  /*
   * El ancla del anillo. La caja de este <span> es exactamente la de la foto
   * —dentro solo va la imagen, y desde que es redonda lleva `aspect-ratio: 1`—,
   * asi que un circulo colgado de aqui queda concentrico sin calcular nada.
   */
  position: relative;
}

/*
 * ---------------------------------------------------------------------------
 * EL ANILLO QUE GIRA. 2026-08-17.
 * ---------------------------------------------------------------------------
 * El dueno: «en el circulo de la foto pon alrededor un borde girando, un
 * poquito lejito de la foto, que haya un pequeno espacio, que sea un borde
 * intermitente, y de color azul».
 *
 * LAS CUATRO COSAS, UNA POR UNA:
 *
 *   · «un poquito lejito» ....... `inset: -22px`. El negativo saca el circulo
 *     por fuera de la foto por los cuatro lados, y 22 px es aire suficiente
 *     para que se lea como un anillo aparte y no como el marco de la foto.
 *   · «intermitente» ............ diez lineas exactas, repartidas con un
 *     degradado conico. Ver la nota de la propia regla: `dashed` no servia
 *     porque no deja decidir cuantos trazos hay ni como de largos son.
 *   · «girando» ................. se gira el circulo entero. Como los guiones
 *     estan pintados sobre el, giran con el y parecen orbitar.
 *   · «azul» .................... el azul OSCURO de la marca (`--marca`,
 *     #295091). Se probo antes con el azul cielo y el duenno lo pidio mas
 *     oscuro; ademas sobre el fondo hueso de la seccion contrasta mucho mejor.
 *
 * SE ANIMA `transform` Y NADA MAS: es lo unico que el navegador puede mover sin
 * repintar. Animar el `border` o el tamano obligaria a redibujar el anillo en
 * cada fotograma, que es justo el problema que se acaba de arreglar en los
 * botones flotantes.
 *
 * `pointer-events: none` porque es decoracion: si no, el circulo —que es mas
 * grande que la foto— se comeria los clics de lo que tenga al lado.
 *
 * 22 SEGUNDOS POR VUELTA. Lento a proposito: esto acompana a un texto que hay
 * que leer. Mas rapido se convierte en un cargador y compite con la lectura.
 */
.lt-somos__marco::after {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 50%;

  /*
   * DIEZ LINEAS, DIBUJADAS COMO UN TRAZO SVG Y NO CON CSS.
   *
   * Aqui hubo dos intentos antes y los dos se vieron mal en pantalla:
   *
   *   1. `border: dashed`. El duenno: «no me refiero a que sean puntos, quiero
   *      que sean lineas». Y era cierto: `dashed` NO deja elegir cuantos trazos
   *      hay ni como de largos, y en un circulo de 470 px el navegador metia mas
   *      de sesenta rayitas que se leian como puntos.
   *
   *   2. `repeating-conic-gradient` con mascara. Ya daba diez lineas medidas,
   *      pero el duenno lo vio y dijo: «algunas lineas se ven rarisimas, como si
   *      estuvieran con pixeles sobresaliendo». Tambien cierto, y tiene
   *      explicacion: los degradados conicos NO se suavizan. El navegador decide
   *      pixel a pixel de que lado del angulo cae cada uno, sin medias tintas, y
   *      en una curva eso se ve como una escalera. La mascara redonda anadia su
   *      propio borde dentado encima.
   *
   * UN TRAZO SVG SI SE SUAVIZA. Es lo que un motor de dibujo hace bien desde
   * siempre: una linea curva con sus bordes difuminados. Y `stroke-dasharray`
   * da el control exacto que faltaba —se le dice cuanto mide la linea y cuanto
   * el hueco, en unidades de la propia circunferencia—.
   *
   * LOS NUMEROS, CALCULADOS Y NO A OJO. Con radio 48.5 la vuelta mide 304.73.
   * En diez tramos toca a 30.47 cada uno; se pinta 21.64 y se deja 8.84 de
   * aire. Diez lineas exactas. Si alguien quiere doce, divide 304.73 entre doce
   * y reparte igual.
   *
   * `stroke-width` va en unidades del viewBox, asi que el grosor ESCALA con la
   * foto: 1.4 sobre 100 son un 1.4%, que en el circulo de 521 px de la portada
   * son unos 7 px, y en el movil se encoge sin quedarse en un pelo.
   */
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48.5' fill='none' stroke='%23295091' stroke-width='1.4' stroke-dasharray='21.64 8.84' stroke-linecap='butt'/%3E%3C/svg%3E" );
  background-repeat: no-repeat;
  background-size: 100% 100%;

  pointer-events: none;
}


@media (prefers-reduced-motion: no-preference) {
  .lt-somos__marco::after {
    animation: lt-somos-orbita 22s linear infinite;
  }
}

@keyframes lt-somos-orbita {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/*
 * EN EL RESPALDO NO. La variante `--suelta` es el retrato recortado de Enrique,
 * que NO es un circulo: no lleva `aspect-ratio` ni `border-radius`. Un anillo
 * redondo alrededor de una silueta no rodea nada, se cruza por encima.
 */
.lt-somos__foto-equipo--suelta .lt-somos__marco::after {
  content: none;
}

/*
 * ---------------------------------------------------------------------------
 * 5. REDONDA. 2026-08-17.
 * ---------------------------------------------------------------------------
 * El dueno, sobre esta misma foto: «esta foto la quiero redonda».
 *
 * REDONDA DE VERDAD Y NO UN OVALO. Un `border-radius: 50%` sobre una foto mas
 * alta que ancha no da un circulo: da una elipse, que es lo que sale cuando se
 * redondea sin igualar los lados. Por eso va con `aspect-ratio: 1` —la caja se
 * hace cuadrada— y `object-fit: cover`, que rellena ese cuadrado sin deformar a
 * nadie.
 *
 * SE PIERDE ALGO DE FOTO Y ESO ES INEVITABLE: un circulo dentro de un cuadrado
 * se come las esquinas. Esta concreta aguanta bien porque ya era casi cuadrada
 * (585 x 649 px medidos en pantalla), asi que el recorte es pequeno y las dos
 * personas quedan dentro. Con una foto apaisada o muy alargada NO valdria, y el
 * sitio donde mirarlo es este comentario antes de cambiar la imagen.
 *
 * `object-position: center top` y no el centro a secas: al recortar un retrato
 * siempre sobra suelo antes que cabeza.
 */
.lt-somos__foto-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

/*
 * AQUI HABIA UN RESPALDO PARA NAVEGADORES SIN MASCARA. Retirado el 2026-08-16
 * junto con la mascara, porque ya no respalda nada.
 *
 * Daba esquina y sombra a quien no supiera enmascarar. Ahora TODOS reciben la
 * misma foto con la misma esquina, asi que la consulta sobraba — y su sombra
 * oscura, pensada para la seccion azul de entonces, habria quedado sucia sobre
 * el fondo hueso de ahora.
 */

/*
 * EL RESPALDO: el retrato recortado de Enrique, cuando todavia no hay foto de
 * equipo. Ese PNG ya viene sin fondo — redondearlo o darle sombra dibujaria un
 * rectangulo alrededor de una silueta, que es exactamente lo contrario de lo
 * que se busca.
 */
.lt-somos__foto-equipo--suelta .lt-somos__foto-img {
  border-radius: 0;
  box-shadow: none;
  /*
   * Y TAMPOCO SE LE CUADRA LA CAJA. Al hacer redonda la foto de equipo se le
   * puso `aspect-ratio: 1` con `object-fit: cover` a la regla general, y esta
   * variante la heredaba: a una silueta recortada eso le cortaba los pies para
   * rellenar un cuadrado que aqui no hace falta. Hoy no esta en uso —la portada
   * lleva la foto de equipo—, pero el respaldo tiene que seguir sirviendo el dia
   * que alguien quite esa foto del panel.
   */
  aspect-ratio: auto;
  object-fit: fill;
}

/*
 * EL PIE CON LOS NOMBRES. Solo se pinta cuando hay gente dada de alta en el
 * panel; hasta entonces la foto va sola, que es lo que hace una fotografia de
 * equipo en cualquier sitio serio.
 */
.lt-somos__pie {
  margin: 14px 0 0;
  font-size: var(--fs-chico, .875rem);
  line-height: 1.5;
  text-align: center;
  color: var(--niebla, #B9C6D6);
}

.lt-somos__pie strong {
  color: var(--blanco, #FFF);
  font-weight: var(--peso-fuerte, 700);
}

.lt-somos__pie span:not(.lt-somos__sep) {
  color: var(--cielo, #4EA8DE);
  font-size: var(--fs-etiqueta, .75rem);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.lt-somos__sep { color: rgba(255, 255, 255, .3); }

/*
 * EL AVISO DE ALTA SOLO LO VE QUIEN PUEDE EDITAR (lo decide el PHP, no el CSS).
 * Se pinta como nota de trabajo —puntos y azul apagado— para que nadie lo
 * confunda con contenido de la pagina.
 */
.lt-somos__alta {
  margin: var(--e-3, 20px) 0 0;
  padding: 10px 14px;
  border: 1px dashed rgba(78, 168, 222, .45);
  border-radius: var(--radio-tarjeta, 8px);
  background: rgba(78, 168, 222, .08);
  font-size: var(--fs-etiqueta, .75rem);
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, .72);
}

.lt-somos__alta a { font-weight: var(--peso-fuerte, 700); color: var(--cielo, #4EA8DE); }



/* ------------------------------------------------------------------------ */
/* VARIANTE CLARA — [sin uso] Se enciende con `lt-somos--claro`              */
/* ------------------------------------------------------------------------ */
/*
 * La version blanca del 2026-08-09 por la manana. El dueno prefirio el azul,
 * pero los colores de aqui estan medidos contra papel y se conservan por si
 * algun dia se vuelve. Para usarla: anadir `lt-somos--claro` junto a
 * `lt-seccion--blanca` en el <section>.
 */
.lt-somos--claro .lt-enrique__titulo { color: var(--tinta); }
.lt-somos--claro .lt-enrique__sub    { color: var(--marca); }
.lt-somos--claro .lt-somos__rotulo   { color: var(--tinta); }

.lt-somos--claro .lt-enrique__presentacion p { color: var(--apagado); }

.lt-somos--claro .lt-enrique__pasos       { border-top-color: var(--linea); }
.lt-somos--claro .lt-enrique__paso-titulo { color: var(--tinta); }
.lt-somos--claro .lt-enrique__paso p      { color: var(--apagado); }

/* `--cielo` al 55 % sobre papel da 1,9:1 y se lee como una mancha. `--marca`
   al 30 % da 3,4:1, que para un numero decorativo es lo correcto. */
.lt-somos--claro .lt-enrique__numero { color: var(--marca); opacity: .3; }

.lt-somos--claro .lt-somos__nombre { color: var(--tinta); }
.lt-somos--claro .lt-somos__cargo  { color: var(--marca); }

/* Sobre papel el resplandor sobra: una figura oscura sobre blanco ya se ve. */
.lt-somos--claro .lt-somos__foto { background: none; }

.lt-somos--claro .lt-somos__alta {
  border-color: rgba(41, 80, 145, .4);
  background: rgba(41, 80, 145, .05);
  color: var(--apagado);
}

.lt-somos--claro .lt-somos__alta a { color: var(--marca); }

/* ------------------------------------------------ los mandos del slider */

/*
 * Nacen con `hidden` en el HTML y los descubre assets/js/somos.js. Sin guion no
 * hay nada que pasar, y unas flechas muertas prometen algo que no hacen.
 */
.lt-somos__mandos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--e-3, 20px);
}

.lt-somos__mandos[hidden] { display: none; }

.lt-somos__flecha,
.lt-somos__pausa {
  display: grid;
  place-items: center;
  /* 44px: la regla de la casa para cualquier cosa que se pulse. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}

.lt-somos__flecha:hover,
.lt-somos__pausa:hover {
  background: var(--cielo, #4EA8DE);
  border-color: var(--cielo, #4EA8DE);
  color: var(--noche, #071324);
}

.lt-somos__flecha:focus-visible,
.lt-somos__pausa:focus-visible {
  outline: 3px solid var(--cielo, #4EA8DE);
  outline-offset: 2px;
}

.lt-somos__pausa.is-pausado {
  background: var(--cielo, #4EA8DE);
  border-color: var(--cielo, #4EA8DE);
  color: var(--noche, #071324);
}

/* La pausa es mas pequena que las flechas: es un mando de segunda fila, no una
   forma de navegar. */
.lt-somos__pausa { width: 34px; height: 34px; }

.lt-somos__icono-play { display: none; }
.lt-somos__pausa.is-pausado .lt-somos__icono-pausa { display: none; }
.lt-somos__pausa.is-pausado .lt-somos__icono-play  { display: block; }

/*
 * `tabular-nums` para que el 1 y el 8 ocupen lo mismo: sin eso el bloque entero
 * baila un pixel cada vez que cambia la cifra.
 */
.lt-somos__cuenta {
  margin: 0;
  min-width: 3.5em;
  text-align: center;
  font-size: var(--fs-etiqueta, .75rem);
  font-weight: var(--peso-fuerte, 700);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--niebla, #B9C6D6);
}

.lt-somos__cuenta [data-lt-somos-cuenta] { color: #fff; }

/* Sobre papel, los mandos cambian de tinta. */
.lt-somos--claro .lt-somos__flecha,
.lt-somos--claro .lt-somos__pausa {
  border-color: var(--linea);
  color: var(--tinta);
  background: var(--blanco);
}

.lt-somos--claro .lt-somos__cuenta { color: var(--apagado); }
.lt-somos--claro .lt-somos__cuenta [data-lt-somos-cuenta] { color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  /* El guion ya no arranca el paso automatico; aqui se quita el deslizamiento
     para que al pulsar una flecha la persona aparezca sin recorrido. */
  .lt-somos__persona,
  .lt-somos__persona.is-activa {
    transform: none;
    transition: opacity .2s ease, visibility 0s;
  }
}