/* =============================================================================
   css/ui.css — la UI de la landing, llevada al sitio (16/9/2026)
   -----------------------------------------------------------------------------
   Decisión del cliente viendo `/lp/terapeuta-spa`: «me gusta mucho el nuevo UI…
   pásalo a la web: header, botones, imagen de fondo en secciones». Cómo era antes:
   docs/map/16-ui-2026-09-16.md (con capturas y la etiqueta de git para volver).

   Qué trae, todo copiado de la landing (css/landing/plantilla.css + litsea.css):
     1. El BOTÓN de dos piezas: texto + caja cuadrada con flecha. Al pasar el ratón
        el texto sube y entra otro igual, y la flecha sale y entra. Esquinas rectas.
     2. La CABECERA: el logo con la línea vertical a su derecha y el botón nuevo.
     3. Las SECCIONES DE CONTACTO con foto de fondo bajo el velo negro de la landing,
        en vez de la textura verde.
     4. Los FORMULARIOS como el de la landing: tarjeta recta, etiquetas en mayúscula
        pequeña, campos crema sin radio.
     0. (16/9, 2.ª tanda) ESQUINAS RECTAS en todo: tarjetas, fotos, campos, menús,
        insignias, el popup. Menos lo que es un círculo de verdad (§0).

   🔴 Va la ÚLTIMA hoja de las páginas del sitio (la pinta `cabecera.php`, detrás de
   `tipografia.css`), porque tiene que ganar a reglas repartidas por styles.css,
   layout/, cursos/css/, contacto/ y promociones/. Por eso algunos selectores van
   duplicados (`.lts-btn.lts-btn`): suben la especificidad sin `!important`.

   📌 La estructura del botón la monta `js/botones.js` sobre el markup de siempre.
   Sin JavaScript el botón ya sale recto y con los colores nuevos (§1a); sólo falta
   la caja de la flecha.
   ========================================================================== */

:root {
  --lts-teal: #2fb7a4;
  --lts-negro: #121212;
  --lts-noche: #090909;
  --lts-platino: #e6e1e1;
  --lts-crema: #f8f8f4;
  --lts-borde: #dddddd;
  --lts-gris: #555555;
  --lts-velo: rgba(0, 0, 0, 0.7);        /* el #000000b3 del cierre de la landing */
  --lts-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =============================================================================
   0. ESQUINAS RECTAS — en todo, como la landing
   -----------------------------------------------------------------------------
   Pedido del cliente el 16/9/2026 («todo border radius 0»). Con `!important` por
   lo mismo que la tipografía: los radios están en ~150 reglas de 12 hojas, en
   clases de Tailwind y en estilos en línea (el raspadito los pinta en JS), y
   cambiarlos uno a uno deja alguno atrás. Un `!important` de hoja gana también al
   `style="…"` en línea.

   Se quedan redondos los CÍRCULOS de verdad, que cuadrados parecen un error:
   avatares, puntos de carrusel, ruedas de carga, iconos en círculo, los números de
   pasos y las bolas decorativas. Las flechas de los carruseles y la X del
   raspadito son botones: van rectos. Joinchat (WhatsApp) no se toca.
   ========================================================================== */

body *:not(.joinchat):not(.joinchat *),
body *:not(.joinchat):not(.joinchat *)::before,
body *:not(.joinchat):not(.joinchat *)::after {
  border-radius: 0 !important;
}
.testimonial-card__avatar,
.op-card__avatar,
.dot,
.suscripcion__girando,
.success-icon,
.gracias__icono,
.process-number,
.rvoe-card__icon,
.bg-circle-1,
.bg-circle-2,
.btn__loader,
input[type="radio"] {
  border-radius: 50% !important;
}

/* =============================================================================
   1. BOTONES
   ========================================================================== */

/* 1a · Antes de que corra el JavaScript (y sin él): ya rectos y con su color, para
   que al montar la flecha no haya un salto de aspecto. */
.navbar-btn,
.navbar-mobile-btn,
.gracias__btn,
.btn--primary-hero,
.btn--primary-hero-section,
.btn--secondary,
.promo-card-cta,
.promo-form-submit {
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn--primary .btn__text { border-radius: 0 !important; transform: none !important; }

/* 1b · El botón montado. Réplica de `.button-wrapper` de la plantilla. */
a.lts-btn.lts-btn,
button.lts-btn.lts-btn {
  --b-fondo: var(--lts-teal);
  --b-borde: var(--lts-teal);
  --b-texto: #ffffff;
  --b-linea: rgba(255, 255, 255, 0.35);

  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-height: 3.125rem;
  margin: 0;
  padding: 0 0 0 1rem;
  font-family: var(--font-body, "Mona Sans", Arial, sans-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  color: var(--b-texto);
  background: var(--b-fondo);
  border: 1px solid var(--b-borde);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Blanco con texto negro: el «Escríbenos por WhatsApp» de la landing. */
a.lts-btn.lts-btn--blanco,
button.lts-btn.lts-btn--blanco {
  --b-fondo: #ffffff;
  --b-borde: var(--lts-platino);
  --b-texto: var(--lts-noche);
  --b-linea: var(--lts-platino);
}
/* Las reglas de siempre cambiaban el fondo o levantaban el botón al pasar el ratón.
   La landing no: se mueven el texto y la flecha, y nada más. */
a.lts-btn.lts-btn:hover,
a.lts-btn.lts-btn:focus-visible,
button.lts-btn.lts-btn:hover,
button.lts-btn.lts-btn:focus-visible {
  color: var(--b-texto);
  background: var(--b-fondo);
  border-color: var(--b-borde);
  transform: none;
  box-shadow: none;
  opacity: 1;
}
.lts-btn.lts-btn:focus-visible { outline: 2px solid var(--lts-teal); outline-offset: 3px; }
.lts-btn[disabled] { cursor: progress; opacity: 0.7; }

/* El texto: dos copias en una ventana de una línea; la segunda está debajo. */
.lts-btn__texto {
  flex: 1 1 auto;
  align-self: center;
  height: 1.3rem;
  margin-right: 1rem;
  overflow: hidden;
}
.lts-btn__texto > span {
  display: block;
  white-space: nowrap;
  color: inherit;
  transition: transform 0.45s var(--lts-curva);
}
.lts-btn:hover .lts-btn__texto > span,
.lts-btn:focus-visible .lts-btn__texto > span { transform: translateY(-100%); }

/* La caja de la flecha: cuadrada, separada por una línea. Dos flechas en un carril
   de una: se ve la segunda y, al pasar el ratón, sale ésa y entra la primera. */
.lts-btn__icono {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  border-left: 1px solid var(--b-linea);
  overflow: hidden;
}
.lts-btn__flechas {
  display: flex;
  justify-content: flex-end;
  width: 1.25rem;
  overflow: hidden;
}
.lts-btn__flechas svg {
  flex: none;
  width: 1.25rem;
  height: auto;
  color: var(--b-texto);
  transition: transform 0.45s var(--lts-curva);
}
.lts-btn:hover .lts-btn__flechas svg,
.lts-btn:focus-visible .lts-btn__flechas svg { transform: translateX(100%); }

/* Los que ya eran de ancho completo (formularios, tarjetas): la flecha a la derecha. */
.btn--primary.lts-btn,
.promo-card-cta.lts-btn,
.btn--primary-hero.lts-btn,
.promo-form-submit.lts-btn,
.navbar-mobile-btn.lts-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lts-btn__texto > span,
  .lts-btn__flechas svg { transition: none; }
}

/* 1c · En el TELÉFONO, cada botón con su ancho, como en la landing (17/9/2026,
   pedido del cliente). En PC los de formularios y tarjetas siguen a lo ancho (1b).
   `align-self` porque dentro de una columna flex `width: auto` también se estira.
   El del cajón móvil se queda a lo ancho: es la única salida del menú. */
@media (max-width: 767px) {
  a.lts-btn.lts-btn:not(.navbar-mobile-btn),
  button.lts-btn.lts-btn:not(.navbar-mobile-btn) {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
  }
}

/* =============================================================================
   2. CABECERA — el logo con su línea, como `.nav-left` de la landing
   ========================================================================== */

.navbar-logo {
  align-self: stretch;
  padding-right: 1.5rem;
  border-right: 1px solid rgba(9, 9, 9, 0.15);
}
.navbar--home:not(.is-scrolled) .navbar-logo { border-right-color: rgba(255, 255, 255, 0.2); }
/* En móvil el logo va centrado entre el burger y el CTA (17/9/2026): la línea de su
   derecha, que en escritorio lo separa del menú, ahí sobra. */
@media (max-width: 1147px) {
  .navbar-logo { padding-right: 0; border-right: 0; }
}
/* El botón de la barra, un pelo más bajo que en el cuerpo: la barra mide 80 px. */
.navbar-actions a.lts-btn.lts-btn { min-height: 2.875rem; }
.navbar-actions .lts-btn__icono { width: 2.875rem; }

/* El desplegable de «Nosotros»: recto, con línea fina en vez de sombra y filas
   separadas por una línea, como las listas de la landing. Al pasar el ratón la
   fila se pone crema y el texto se desplaza un poco. Sin raya teal arriba desde el
   17/9/2026 (lo pidió el cliente). */
.navbar-dropdown-menu.navbar-dropdown-menu {
  top: calc(100% + 14px);
  min-width: 13rem;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--lts-borde);
  box-shadow: 0 12px 30px rgba(9, 9, 9, 0.08);
}
/* El hueco entre el enlace y el menú, cubierto: si no, al bajar el ratón se cierra. */
.navbar-dropdown-menu.navbar-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}
.navbar-dropdown-item.navbar-dropdown-item {
  position: relative;
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--lts-noche);
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.3s var(--lts-curva);
}
.navbar-dropdown-item.navbar-dropdown-item + .navbar-dropdown-item { border-top: 1px solid var(--lts-platino); }
.navbar-dropdown-item.navbar-dropdown-item:hover,
.navbar-dropdown-item.navbar-dropdown-item:focus-visible {
  padding-left: 1.6rem;
  color: var(--lts-noche);
  background: var(--lts-crema);
}
.navbar-dropdown-item.navbar-dropdown-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--lts-teal);
  transform: scaleY(0);
  transition: transform 0.3s var(--lts-curva);
}
.navbar-dropdown-item.navbar-dropdown-item:hover::after,
.navbar-dropdown-item.navbar-dropdown-item:focus-visible::after { transform: scaleY(1); }

/* =============================================================================
   3. SECCIONES DE CONTACTO — foto bajo el velo negro de la landing
   -----------------------------------------------------------------------------
   Cada página pone la suya con `style="--lts-foto: url('/img/…')"` en la sección;
   sin ella, la de por defecto. Sustituye a las texturas `fondo-detalles-3` (sitio)
   y `fondo-detalles-6` (fichas de curso), que se quedan en el repo sin usar aquí.
   ========================================================================== */

.contact-section,
.promo-overlay-bg--textura-2 {
  --lts-foto: url("../img/practica-masaje-multiples-camas.webp");
}
.contact-section.contact-section {
  background-color: var(--lts-negro);
  background-image: linear-gradient(var(--lts-velo), var(--lts-velo)), var(--lts-foto);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* El velo verde que tapaba la textura ya no hace falta: el negro va en el fondo. */
.contact-section.contact-section::before { background: none; }
/* Las bolas difuminadas de detrás del formulario eran de la etapa verde. */
.contact-section .contact-bg-decoration { display: none; }

/* «Cupos limitados por grupo» (promociones), que llevaba la textura 2. Su velo verde
   (`.promo-overlay-mask`, en línea en promociones.php) se quitó del markup: el negro va
   ya en el fondo. */
.promo-overlay-bg.promo-overlay-bg--textura-2 {
  background-image: linear-gradient(var(--lts-velo), var(--lts-velo)), var(--lts-foto);
  --lts-foto: url("../img/aula-de-masoterapia-litsea-centro-de-capacitacion.webp");
}

/* =============================================================================
   4. FORMULARIOS — la tarjeta de la landing (`.lp-form-tarjeta`)
   -----------------------------------------------------------------------------
   Las tarjetas se llaman distinto en cada hoja: `.contact-form-wrapper` (portada,
   cursos, nosotros, certificaciones, opiniones y las 7 fichas), `.promo-form-card`
   (promociones) y `div.contact-form` (contacto; en las demás `.contact-form` es el
   propio <form>, por eso va con `div`).
   ========================================================================== */

.contact-form-wrapper.contact-form-wrapper,
.promo-form-card.promo-form-card,
div.contact-form.contact-form {
  background: #ffffff;
  border: 1px solid var(--lts-borde);
  border-radius: 0;
  box-shadow: none;
}

/* 📌 En promociones las etiquetas y los campos llevaban `style="…"` en línea, que gana a
   cualquier hoja: se quitaron del markup el 16/9/2026 para que valga esto. */
:is(.contact-form-wrapper, .promo-form-card, div.contact-form) label:not(.lts-hp *) {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lts-noche);
}

:is(.contact-form-wrapper, .promo-form-card, div.contact-form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  height: auto;                   /* promociones fijaba 2.5rem */
  padding: 0.85rem 1rem;
  font-size: 1rem;                /* 16 px: con menos, iOS hace zoom al enfocar */
  color: var(--lts-noche);
  background-color: var(--lts-crema);
  border: 1px solid var(--lts-platino);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s ease;
}
:is(.contact-form-wrapper, .promo-form-card, div.contact-form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus {
  border-color: var(--lts-negro);
  box-shadow: none;
}
:is(.contact-form-wrapper, .promo-form-card, div.contact-form) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--lts-negro);
}

/* =============================================================================
   5. CARRUSEL DE TARJETAS — «Conocerás 7 técnicas de masaje» de la landing
   -----------------------------------------------------------------------------
   Pedido del cliente el 17/9/2026 para las «Promociones especiales» de la portada.
   Réplica de `.recovery-slider-main` / `.recovery-card` / `.service-slide-button`
   de css/landing/plantilla.css (con los ajustes de litsea.css: flechas juntas a la
   izquierda y hover teal), con clases propias para no chocar con `.promo-card`,
   que siguen usando /cursos y /certificaciones. Mismos cortes que la plantilla:
   991, 767 y 479 px. El movimiento, en js/carrusel.js.
   ========================================================================== */

/* Las tarjetas siguientes asoman hasta el borde de la pantalla, no del contenedor:
   se recorta en la sección. `clip` y no `hidden`: no crea contenedor de scroll. */
section:has(.lts-carrusel) { overflow-x: clip; }   /* portada y /oferta */

.lts-carrusel {
  position: relative;
  padding-bottom: 7rem;              /* sitio para las flechas */
  text-align: left;
}
.lts-carrusel--una { padding-bottom: 0; }   /* sin flechas, sin su hueco */
.lts-carrusel__mascara {
  max-width: 51.375rem;
  white-space: nowrap;               /* las diapositivas, en fila */
}
.lts-carrusel__diapo {
  display: inline-block;
  width: 100%;
  margin-right: 1.25rem;
  vertical-align: top;
  white-space: normal;
  transition: transform 0.5s ease;
}

.lts-tarjeta {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #dbd6d6;
}
.lts-tarjeta__foto {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 26rem;
  height: 26rem;
}
.lts-tarjeta__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lts-tarjeta__insignia {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: var(--lts-teal);
}
.lts-tarjeta__cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
}
.lts-tarjeta__arriba {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lts-tarjeta__titulo.lts-tarjeta__titulo {
  margin: 0;
  font-size: 1.75rem;                /* el `font-1-large` de la plantilla */
  font-weight: 400;
  line-height: 1.25;
  color: var(--lts-negro);
}
.lts-tarjeta__texto {
  max-width: 22.25rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--lts-gris);
}
.lts-tarjeta__dato {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--lts-gris);
}
.lts-tarjeta__dato svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--lts-teal);
}
/* El botón de las tarjetas de la landing es NEGRO y de su ancho, no teal a lo ancho
   como el resto de `.promo-card-cta` (§1). Sin JavaScript sale igual de negro. */
.lts-tarjeta a.promo-card-cta.promo-card-cta {
  --b-fondo: var(--lts-negro);
  --b-borde: var(--lts-negro);
  --b-linea: rgba(255, 255, 255, 0.25);
  width: auto;
  color: #ffffff;
  background: var(--lts-negro);
}

/* Las flechas: cuadradas, negras, juntas abajo a la izquierda; teal al pasar. */
.lts-carrusel__flecha {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  padding: 0;
  color: #ffffff;
  background: var(--lts-negro);
  border: 1px solid var(--lts-negro);
  cursor: pointer;
  transition: background-color 0.4s, border-color 0.4s;
}
.lts-carrusel__flecha--sig { left: 3.875rem; }
.lts-carrusel__flecha:hover,
.lts-carrusel__flecha:focus-visible {
  background: var(--lts-teal);
  border-color: var(--lts-teal);
}
.lts-carrusel__flecha:focus-visible { outline: 2px solid var(--lts-negro); outline-offset: 3px; }
.lts-carrusel__flecha svg { width: 1.5rem; height: auto; }
.lts-carrusel__flecha--ant svg { transform: rotate(180deg); }

@media (max-width: 991px) {
  .lts-carrusel:not(.lts-carrusel--una) { padding-bottom: 6rem; }
  .lts-carrusel__mascara { max-width: 38rem; }
  .lts-tarjeta__foto { max-width: 18rem; height: 20rem; }
  .lts-tarjeta__titulo.lts-tarjeta__titulo { font-size: 1.5rem; }
}
@media (max-width: 767px) {
  .lts-carrusel__mascara { max-width: none; }
  .lts-carrusel__diapo { margin-right: 1rem; }
  /* 🔴 Todas las tarjetas, del MISMO alto en el teléfono (17/9/2026, cliente): en
     columna cada una medía lo que su texto y la sección daba saltos al pasar de una a
     otra. La máscara pasa a flex, que estira las diapositivas a la más alta, y la
     tarjeta llena la suya; el botón sigue abajo por el `space-between` del cuerpo.
     El paso del carrusel se mide con `offsetLeft`, así que no le afecta. Lo mismo en
     la landing: css/landing/litsea.css. */
  .lts-carrusel__mascara { display: flex; }
  .lts-carrusel__diapo { display: flex; flex: 0 0 100%; }
  .lts-tarjeta { flex: 1 1 auto; }
  .lts-tarjeta__cuerpo { flex: 1 1 auto; }   /* en columna, para que el botón baje al fondo */
  .lts-tarjeta { flex-direction: column; }
  .lts-tarjeta__foto { max-width: none; height: 18rem; }
  .lts-carrusel__flecha svg { width: 1rem; }
}
@media (max-width: 479px) {
  .lts-carrusel:not(.lts-carrusel--una) { padding-bottom: 5rem; }
  .lts-tarjeta { padding-bottom: 1.5rem; }
  .lts-tarjeta__foto { height: 15rem; }
  .lts-carrusel__flecha { width: 2.8rem; height: 2.8rem; }
  .lts-carrusel__flecha--sig { left: 3.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lts-carrusel__diapo { transition: none; }
}