/* ══════════════════════════════════════════════════════════════════════════
   marca.css — la capa de AmperDent sobre el template Flowbit.

   ⚠️ REGLA: `assets/css/style.css` NO se edita nunca. Es el archivo del
   template y va a ser reemplazado tal cual el día que se actualice. Todo lo
   que sea AmperDent vive aquí, y este archivo se carga DESPUÉS.

   El template viene en azul (#2B59FF). El logotipo, el favicon, la app y las
   capturas de producto son teal (#1E7268): dejar el azul obligaba a rehacer
   la identidad entera, así que se reescribe la variable y el template se
   repinta solo — es la única razón por la que se eligió una variante que usa
   `--color-primary` de forma consistente.
   ══════════════════════════════════════════════════════════════════════════ */

.home-eight {
  /* El teal de marca. Mismo valor que --color-signal de la landing anterior y
     que el de la app: si se cambia acá, hay que cambiarlo también en
     DentalSaaS.Api/Frontend y en tools/generar-iconos.js. */
  --color-primary: #1E7268;

  --color-heading-1: #0A0C0D;
  --color-body-1: #5B6271;

  /* Tokens propios que el template no tiene y que usan los parciales. */
  --ad-signal-soft: #E4F1EE;
  --ad-mute: #8B93A1;
  --ad-hair: #E7EAEE;
}

/* El degradado del pie viene verde-lila del template y choca con el teal. */
.home-eight {
  --footer-bg: linear-gradient(257deg, #E4F1EE 1.73%, rgba(30, 114, 104, 0.06) 98.79%);
}

/* ── Menú de la cabecera pegado al logo ───────────────────────────────────
   El template reserva `flex-basis: 50%` tanto en `.left-area` (logo) como en
   `.button-area-start` (CTA): con solo el logo dentro de esa primera mitad,
   el menú "Cómo funciona / Precio / ..." arrancaba a la mitad de la pantalla
   en vez de justo después del logo. Se liberan esas dos cajas a su ancho
   real y el margin-right:auto del nav absorbe el espacio sobrante, así el
   botón "Probar gratis" se mantiene pegado al borde derecho. */
.home-eight .header-style-one-wrapper .left-area {
  flex-basis: auto;
}
.home-eight .header-style-one-wrapper .main-nav-area {
  margin-left: 48px;
  margin-right: auto;
}
.home-eight .header-style-one-wrapper .button-area-start {
  flex-basis: auto;
}
/* `.home-eight .rts-btn` (regla global del template) infla CUALQUIER botón
   de esta página a padding 18px 16px / font-size 18px, pensado para el CTA
   grande del hero — en el header, junto al logo, se veía enorme. Achicado
   solo acá; el resto de usos de .rts-btn (hero, precios, etc.) no se toca.
   Radio bajado de 34px (píldora) a 4px (cuadrado, pedido de David).
   El fondo se fuerza a sólido: `.home-eight .header-style-one.header-two
   ... .rts-btn` (style.css línea ~14281) le pone `rgba(30,114,104,.05)` —
   un tinte casi blanco — en vez del verde sólido, y por eso "Probar gratis"
   se veía descolorido junto al "Iniciar sesión" blanco. */
.home-eight .header-style-one-wrapper .button-area-start .rts-btn {
  padding: 10px 22px;
  font-size: 15px;
  /* `.home-eight .rts-btn` fija `border-radius: 34px !important`: sin
     !important acá ese !important gana pese a que esta regla es más
     específica — !important no compite por especificidad, solo entre sí. */
  border-radius: 4px !important;
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
/* El .rts-btn base trae un ::before: un círculo blanco que en hover crece
   desde abajo y "invierte" el botón, pensado para la píldora grande del
   hero (ahí el texto SÍ cambia de color en hover). Acá el texto se fuerza
   blanco siempre (línea de arriba) para que combine con el verde de marca,
   así que ese barrido lo dejaba en texto blanco sobre fondo blanco —
   invisible. Se apaga entero para este botón. */
.home-eight .header-style-one-wrapper .button-area-start .rts-btn::before {
  display: none;
}
.home-eight .header-style-one-wrapper .button-area-start .rts-btn:hover {
  background: #175a53 !important;
  border-color: transparent;
}
/* "Iniciar sesión" es el botón blanco: mismo tamaño de caja que "Registro
   para prueba" (mismo padding/alto/radio), pero sin relleno. */
.ad-login-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 4px;
  background: var(--color-white);
  /* box-shadow en vez de border: un border de 1.5px suma a la caja aunque
     box-sizing sea border-box en Bootstrap, y dejaba "Iniciar sesión" 2px
     más alto que el botón verde. El box-shadow inset no ocupa espacio. */
  box-shadow: inset 0 0 0 1.5px var(--ad-hair);
  font-size: 15px;
  font-weight: var(--p-semi-bold);
  line-height: 1;
  color: var(--color-heading-1);
  transition: box-shadow .2s, color .2s;
}
.ad-login-link:hover {
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

/* ── Enlace de salto (accesibilidad) ─────────────────────────────────────────
   El template no trae uno. Se mantiene el de la landing anterior: es lo único
   que permite a un lector de pantalla saltarse el menú de navegación. */
.skip-link {
  position: absolute; left: -9999px; z-index: 999;
}
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto;
  background: var(--color-heading-1); color: #fff;
  padding: .75rem 1.25rem; border-radius: 999px;
  font-weight: 700; font-size: .875rem;
}

/* ── «IA» remarcada dentro de un párrafo ─────────────────────────────────────
   La IA es la cualidad #1 del posicionamiento y en un párrafo largo la sigla
   se pierde: son dos letras entre cincuenta palabras. Color de marca + 800 la
   hacen visible sin subirle el tamaño (agrandarla abría un escalón en el
   interlineado del párrafo).
   El letter-spacing es porque una sigla pegada se lee «lA». */
.hl-ia {
  color: var(--color-primary);
  font-weight: 800;
  letter-spacing: .02em;
}

/* ── Columna derecha del hero ────────────────────────────────────────────────
   El template pone ahí un SVG decorativo de 1334 px con
   `position:absolute; min-width:max-content; z-index:-1`, a propósito: es un
   adorno que se sale del contenedor y se mete DEBAJO del texto.

   Nosotros ponemos la captura real del producto. Con esas reglas heredadas la
   imagen se montaba encima del titular y lo tapaba, así que la columna vuelve a
   ser una columna normal. */
.rts-banner-area-eight .banner-inner .banner-right-image-area {
  position: static;
  min-width: 0;
  transform: none;
  z-index: auto;
}

/* Y el hero deja de tener altura fija: 971 px estaban calculados para el
   adorno del template. Con una captura de proporción distinta sobraba o
   faltaba espacio según el ancho de la ventana. */
.rts-banner-area-eight { height: auto; }

/* El template fija `padding: 239px 0 160px` en esta columna — calculado para
   su hero de 971px con el adorno decorativo original. Con contenido real esa
   caja quedaba ~788px de alto (contra ~512px de la ilustración): el
   `.row.align-items-center` la centraba dentro de SU PROPIA caja inflada, no
   contra la imagen, y por más que se empujara con transform el hueco de
   abajo no se movía porque la caja seguía teniendo el tamaño viejo. */
.rts-banner-area-eight .banner-inner .banner-left-content-area {
  padding: 0;
}
/* La franja de aire que despegaba el hero del menú fijo vivía en el padding
   de arriba que se acaba de quitar. Se repone aquí, en `.banner-inner`
   (afecta a las dos columnas por igual), con un valor acorde al hero
   compacto en vez de los 239px pensados para el adorno original. */
.rts-banner-area-eight .banner-inner {
  padding: 140px 0 48px;
}

/* La ilustración es casi cuadrada (1402×1122) y trae su propio fondo/sombra
   circular: sin tope se ve enorme junto al texto, y el `.ad-shot` (borde +
   sombra de tarjeta, pensado para enmarcar una captura de pantalla) le
   sobra. */
.ad-hero-illustration {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  transition: transform .35s ease;
}
.ad-hero-illustration:hover {
  transform: scale(1.06);
}

/* ── Escala del titular del hero ─────────────────────────────────────────────
   El template fija 68 px / line-height 1.3 porque su titular de ejemplo son
   seis palabras ("Building powerful brands for the digital world"). El nuestro
   tiene doce y ocupa cinco líneas: a 68 px son 442 px de alto y los botones se
   caen fuera de la primera pantalla en un portátil de 768 px útiles — el CTA
   deja de verse sin hacer scroll, que es lo único que el hero tiene que lograr.

   `clamp` en vez de un tamaño fijo para que el titular siga encogiendo con la
   ventana; el interlineado baja a 1.18 porque a este cuerpo 1.3 abre demasiado
   y separa las dos unidades del titular más que el propio salto de línea.
   ⚠️ Si el titular vuelve a acortarse, esta regla sobra: quitarla y dejar que
   mande el template. */
.rts-banner-area-eight .banner-inner .banner-left-content-area .section-title-area .section-title {
  font-size: clamp(2rem, 2.85vw, 3.125rem);
  line-height: 1.18;
  font-weight: 800;
}
/* El template ya pone `.section-title-area .section-title { text-transform:
   capitalize }`, más específico que una clase suelta: hay que igualar el
   alcance para poder subir a mayúsculas. */
.rts-banner-area-eight .banner-inner .banner-left-content-area .section-title-area .section-title-caps {
  text-transform: uppercase;
}
/* El template pinta cualquier <span> dentro de .section-title en gris al 20%
   de opacidad (pensado para la mitad atenuada del titular, ver comentario en
   apertura.html). Esa regla es más específica que .hl-ia sola, así que sin
   este empate "Copiloto IA" salía gris en vez de verde de marca. */
.rts-banner-area-eight .banner-inner .banner-left-content-area .section-title-area .section-title .hl-ia {
  color: var(--color-primary);
}
.rts-banner-area-eight .banner-inner .banner-left-content-area .section-title-area {
  margin-bottom: 40px;
}

/* La etiqueta ("Software para clínicas dentales") sube de 14px (tamaño de
   ojo del template) a 15px y pasa a píldora gris: es la primera línea que se
   lee y hace de subtítulo, no de etiqueta discreta. */
.rts-banner-area-eight .banner-inner .banner-left-content-area .section-title-area .sub-title-lg {
  display: inline-block;
  font-size: 15px;
  background: #EEF0F2;
  padding: 6px 16px;
  border-radius: 999px;
  /* Mismo espaciado que separa el titular del subtítulo (20px, margen base
     de <h1>): la etiqueta traía 10px del template y quedaba más pegada al
     titular que el titular al subtítulo. */
  margin-bottom: 20px;
}

/* ── Botones del hero ────────────────────────────────────────────────────
   Menos redondeados que la píldora del template (34px → 10px) y más
   compactos: el 44px de icono + 28px de gap del template los hacía verse
   grandes junto al resto del hero. */
.rts-banner-area-eight .banner-inner .banner-left-content-area .button-area {
  gap: 16px;
}
.rts-banner-area-eight .banner-inner .banner-left-content-area .button-area .rts-btn {
  /* `.home-eight .rts-btn` fija `border-radius: 34px !important` (píldora):
     sin !important acá ese !important gana pese a la mayor especificidad de
     este selector — !important no compite por especificidad, solo entre sí.
     Mismo radio "casi cuadrado" que los botones del header, pedido de David. */
  border-radius: 4px !important;
  min-height: 48px;
  padding: 8px 8px 8px 20px;
  gap: 14px;
}
.rts-banner-area-eight .banner-inner .banner-left-content-area .button-area .rts-btn .icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
}
/* El padding del template deja hueco a propósito para el círculo del icono
   del botón primario. El secundario no tiene icono, así que ese padding
   asimétrico lo dejaba con el texto pegado a la izquierda en vez de
   centrado. */
.rts-banner-area-eight .banner-inner .banner-left-content-area .button-area .rts-btn.btn-secondary {
  padding: 8px 20px;
  justify-content: center;
}

/* El subtítulo del hero baja de 18px (tamaño de ojo del template) a 16px:
   con el titular ya agrandado, a 18px competía por atención en vez de
   apoyarlo. */
.rts-banner-area-eight .banner-inner .banner-left-content-area .section-title-area .desc-sm {
  font-size: 16px;
}

/* ── Nota bajo los botones del hero ──────────────────────────────────────────
   "Sin tarjeta" es la objeción #1 del dentista y va pegada al botón, no en las
   preguntas frecuentes. El template no trae este elemento. */
.banner-note {
  margin-top: 10px;
  font-size: 14px;
  font-weight: var(--p-semi-bold);
  color: var(--ad-mute);
}

/* ── Capturas de producto ────────────────────────────────────────────────────
   El template ilustra con vectores inventados; nosotros mostramos la app real.
   Una captura necesita borde y sombra para leerse como una ventana y no como
   una mancha pegada al fondo. */
.ad-shot {
  border-radius: 14px;
  border: 1px solid var(--ad-hair);
  box-shadow: 0 24px 60px -28px rgba(10, 12, 13, .28);
  overflow: hidden;
  background: #fff;
}
.ad-shot img { display: block; width: 100%; height: auto; }

/* ── Panel de confianza del hero ─────────────────────────────────────────
   Solo afirmaciones verificables (ver comentario en apertura.html): nada de
   sellos de cumplimiento que AmperDent no tiene. Tarjeta con blobs de color,
   inspirada en docs/Captura de pantalla 2026-08-02 221009.png pero en teal
   de marca en vez del azul/morado de la referencia. */
.ad-trust-panel {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 36px 40px;
  border-radius: 24px;
  background: linear-gradient(257deg, #E4F1EE 1.73%, rgba(30, 114, 104, .05) 98.79%);
}
.ad-trust-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
}
.ad-trust-blob-a {
  width: 220px;
  height: 220px;
  top: -80px;
  right: 60px;
  background: #7FD1C4;
}
.ad-trust-blob-b {
  width: 180px;
  height: 180px;
  bottom: -90px;
  right: -40px;
  background: #C9E9E3;
}
.ad-trust-panel-title {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-bottom: 28px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-heading-1);
}
.ad-trust-panel-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 24px;
}
.ad-trust-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 2px solid rgba(30, 114, 104, .3);
  color: inherit;
}
.ad-trust-card svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}
.ad-trust-card-label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-heading-1);
}
.ad-trust-card-desc {
  /* Son <p>: sin este reset heredan `margin-bottom: 20px` del estilo base
     del template y el gap de 8px de la tarjeta se sumaba a esos 20px. */
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ad-mute);
}
/* Los dos que hacen algo al hacer clic (abren WhatsApp): mismo look que el
   resto de tarjetas, solo un leve desplazamiento al pasar el mouse para que
   se lean como acción sin romper el color uniforme de la fila. */
.ad-trust-card-link {
  transition: transform .2s;
}
.ad-trust-card-link:hover {
  transform: translateY(-3px);
}

/* "Míralo por dentro" hereda `.rts-section-gap2` (160px arriba y abajo,
   genérica para separar secciones del template) — con el panel de confianza
   justo encima quedaba demasiado lejos. Solo se acorta el padding-top de
   ESTA sección (el de abajo se deja igual: separa "Míralo por dentro" de lo
   que sigue) para no tocar `.rts-section-gap2` en el resto de la página. */
#producto.rts-section-gap2 {
  padding-top: 56px;
}

/* El ítem activo de la lista "Míralo por dentro" pasa de negro (color por
   defecto del template) a verde de marca, y su línea inferior de negro a
   verde también — inspirado en docs/Captura de pantalla 2026-08-02
   225858.png (Dentiqa: el ítem activo de su lista se pinta del color de
   marca con una barra debajo), pero con NUESTRO teal en vez de su azul y
   sin tocar el resto del layout (imagen a la derecha, números en vez de
   íconos: eso ya lo resolvía bien el template). */
.service-nav-wrappper-two .service-tabs .nav-link.active::before {
  background: var(--color-primary);
}
.service-nav-wrappper-two .service-tabs .nav-link.active .left .number,
.service-nav-wrappper-two .service-tabs .nav-link.active .left .content .title {
  color: var(--color-primary);
}

/* ── .hidden ─────────────────────────────────────────────────────────────────
   ⚠️ NO BORRAR. Venía de Tailwind y Bootstrap no la tiene (usa .d-none).
   `signup.js` oculta y muestra el formulario, el mensaje de éxito y el de error
   con esta clase exacta. Sin ella el mensaje "Solicitud recibida" y el hueco de
   error se ven desde que carga la página, y el honeypot deja de ser invisible
   (lo llenarían los bots y todas las solicitudes se descartarían).
   Se define aquí en vez de tocar signup.js: el contrato del script ya está
   probado contra la API. */
.hidden { display: none !important; }

/* ── Formulario de solicitud ─────────────────────────────────────────────────
   El template trae un formulario de contacto de tres campos con estilos atados
   a su propio marcado. Este tiene ocho campos y validación, así que lleva
   estilos propios en vez de forzarlo dentro de aquéllos. */
.ad-form-card {
  background: #fff;
  border: 1px solid var(--ad-hair);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 24px 60px -34px rgba(10, 12, 13, .22);
}
.ad-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: var(--p-semi-bold);
  color: var(--color-heading-1);
}
.ad-field {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  color: var(--color-heading-1);
  background: #fff;
  border: 1px solid var(--ad-hair);
  border-radius: 10px;
  transition: border-color .2s;
}
.ad-field:focus {
  outline: none;
  border-color: var(--color-primary);
}
.ad-field::placeholder { color: var(--ad-mute); }

.ad-legal {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ad-mute);
}
.ad-legal a { color: var(--color-body-1); text-decoration: underline; text-underline-offset: 3px; }

/* El error se pinta en naranja quemado, NO en rojo puro: el rojo en una página
   de salud se lee como alerta clínica. */
.ad-error {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 2px solid #C2410C;
  font-size: 14px;
  font-weight: var(--p-semi-bold);
  color: #C2410C;
}

.ad-ok { text-align: center; }
.ad-ok h3 { margin-bottom: 16px; color: var(--color-primary); }
.ad-ok p  { margin-bottom: 28px; color: var(--color-body-1); }

/* ── Halos del mosaico de módulos ────────────────────────────────────────────
   `.layer-shape` es una mancha de color desenfocada (blur 140px) detrás de cada
   tarjeta. El template las pone rosa chicle (#FF91DF) y celeste (#4CC0FD), que
   es su paleta. Sobre el teal de AmperDent quedaban dos tarjetas rosas y una
   celeste al lado del logotipo verde: parecía otra marca.

   Se repintan en la familia del teal, con distinta intensidad para que las
   tarjetas sigan distinguiéndose entre sí (que es lo que hacía el color). */
.feature-wrapper-8 .layer-shape { background: #7FD1C4; }
.feature-wrapper-8.feature-lg .layer-shape { background: #A8E0D6; }
.feature-wrapper-8.feature-xl .layer-shape { background: #5FBFAE; }

/* ── Nota bajo el precio ─────────────────────────────────────────────────── */
.pricing-note {
  margin-top: 18px;
  font-size: 14px;
  font-weight: var(--p-semi-bold);
  color: var(--ad-mute);
}

/* El separador de 24px entre campos que usa el formulario (el template define
   g-28 pero no g-24). */
.g-24 { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }

/* ── mi-clinica.html — puerta de entrada al login ────────────────────────
   Página de tránsito, no de venta: NO reusa el header/footer de la landing
   (main.js espera el bloque `.progress-wrap` del layout completo — ver
   comentario en el propio archivo), así que necesita su propio centrado y
   su propia versión mínima del logo de la cabecera. */
.ad-gateway {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px 20px;
  background: var(--footer-bg);
}
.ad-gateway-logo img { display: block; height: 34px; width: auto; }
.ad-gateway-card {
  width: 100%;
  max-width: 420px;
}
.ad-gateway-title {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-heading-1);
}
.ad-gateway-desc {
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ad-mute);
}
.ad-gateway-input-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--ad-hair);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
}
.ad-gateway-input-row:focus-within {
  border-color: var(--color-primary);
}
.ad-gateway-input-row .ad-field {
  border: none;
  border-radius: 0;
}
.ad-gateway-input-row .ad-field:focus {
  border-color: transparent;
}
.ad-gateway-suffix {
  padding: 0 16px;
  font-size: 14px;
  color: var(--ad-mute);
  white-space: nowrap;
}
.ad-gateway-submit {
  width: 100%;
  margin-top: 20px;
  justify-content: center;
}
.ad-gateway-help {
  margin-top: 20px;
  font-size: 13px;
  text-align: center;
  color: var(--ad-mute);
}
.ad-gateway-help a {
  color: var(--color-primary);
  font-weight: var(--p-semi-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}