/* =====================================================================
   Capitalizarme - landing estatica
   Sin dependencias externas. Editar aqui: colores, tipografia y espaciados.
   ===================================================================== */

:root {
  /* Escala de azules: AZUL MEDIO, INTENSO Y FUERTE.
     Es una rampa de un solo color (saturacion ~85%) que va de profundo a
     claro. Los tonos claros (400 y 500) son los que mas "intensos" se ven,
     asi que usalos como acentos y botenes. Los tonos 700 a 950 son el mismo
     azul oscurecido, para menus, footers y secciones con texto blanco.
     --navy-950 se usa tambien como TEXTO oscuro sobre fondo claro. */
  --navy-950: #0f2d6b;
  --navy-900: #1a45a3;
  --navy-800: #1d51c4;
  --navy-700: #2059d4;
  --navy-600: #2563eb;
  --navy-500: #2f6df0;
  --navy-400: #7ba3f5;

  /* Antes eran dorados. Ahora los tres tonos son blancos puros, para que
     todo el acento de la pagina sea blanco. */
  --gold-600: #ffffff;
  --gold-500: #ffffff;
  --gold-400: #ffffff;
  --ink: #0f172a;
  --muted: #5a6478;
  --line: #e4e7ee;
  --bg: #f6f7f9;
  --card: #ffffff;
  --ok: #1a7f4b;
  --err: #b42318;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --header-h: 68px;
  --container: 1200px;
  --shadow-sm: 0 1px 2px rgba(15, 45, 107, 0.06), 0 1px 3px rgba(15, 45, 107, 0.05);
  --shadow-md: 0 10px 30px rgba(15, 45, 107, 0.08);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--navy-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 820px;
}

/* ------------------------------ Botones ------------------------------ */

.btn {
  --btn-bg: var(--navy-900);
  --btn-fg: #fff;
  --btn-border: var(--navy-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  --btn-bg: var(--navy-500);
  --btn-border: var(--navy-500);
  --btn-fg: #fff;
}

.btn--primary:hover {
  --btn-bg: var(--navy-600);
  --btn-border: var(--navy-600);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: currentColor;
}

.btn--outline:hover {
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-border: var(--gold-500);
}

.btn--ghost {
  --btn-bg: var(--bg);
  --btn-fg: var(--ink);
  --btn-border: var(--line);
}

.btn--ghost:hover {
  --btn-bg: #eef0f4;
}

.btn--lg {
  padding: 16px 30px;
  font-size: 1rem;
}

/* Boton de la franja: rojo, semi cuadrado, sobre el texto verde de la foto */
.btn--rojo {
  --btn-bg: #c62828;
  --btn-border: #a91f1f;
  --btn-fg: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

.btn--rojo:hover {
  --btn-bg: #d63434;
  --btn-border: #d63434;
}

/* Version grande: mas presencia sobre la imagen */
/* Boton de la franja de foto.
   Usa la misma tipografia que los titulos (peso 800 y letter-spacing igual).
   El tamano se ajusta con la pantalla para que se vea parecido en todas.
   En computadora crece bastante (es el llamado a la accion principal de la
   portada) y en celular se achica para no tapar la foto; el alto minimo de
   44px se mantiene siempre para que se pueda tocar bien con el dedo. */
.btn--grande {
  padding: clamp(17px, 1.85vw, 28px) clamp(32px, 5.8vw, 88px);
  min-width: clamp(240px, 28vw, 450px);
  min-height: 48px;
  font-size: clamp(1.125rem, 1.75vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.btn--sm {
  padding: 9px 20px;
  font-size: 0.88rem;
}

/* Boton del menu: mas ancho para que las letras se lea bien */
.site-nav__cta a {
  padding: 10px 24px;
  font-size: 0.9rem;
  min-width: 190px;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.btn__arrow {
  transition: transform 0.2s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* --------------------------- Encabezado --------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy-900);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: var(--navy-900);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

.brand__name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand__tld {
  color: var(--gold-500);
  font-weight: 500;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav__list a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 6px 0;
  position: relative;
  transition: color 0.2s var(--ease);
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}

.site-nav__list a:hover,
.site-nav__list a.is-active {
  color: #fff;
}

.site-nav__list a:hover::after,
.site-nav__list a.is-active::after {
  transform: scaleX(1);
}

.site-nav__list .site-nav__cta a {
  background: #fff;
  border-color: #fff;
  color: var(--navy-950);
}

.site-nav__list .site-nav__cta a:hover {
  background: #fff;
  border-color: #fff;
}

.site-nav__list .site-nav__cta a::after {
  display: none;
}

.site-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
}

.site-nav__toggle-bars,
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.18s var(--ease);
}

.site-nav__toggle-bars {
  position: relative;
}

.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-nav__toggle-bars::before {
  top: -6px;
}

.site-nav__toggle-bars::after {
  top: 6px;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars {
  background: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ------------------------------ Hero ------------------------------ */

.hero {
  position: relative;
  background:
    radial-gradient(1000px 520px at 78% 8%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: #fff;
  padding: 52px 0 60px;
  overflow: hidden;
  scroll-margin-top: var(--header-h);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-500);
  margin-bottom: 18px;
}

.hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 800;
  max-width: 17ch;
}

.hero__lead {
  margin-top: 20px;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.76);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero__trust li {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
}

.hero__trust strong {
  display: block;
  font-size: 1.15rem;
  color: var(--gold-400);
  line-height: 1.15;
}

/* --------------------- Franja de foto + boton --------------------- */

.band {
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  color: #fff;
}

.band__media {
  width: 100%;
}

.media--band {
  /* La proporcion real la pone script.js al cargar la foto (1921x1081).
     Se declara aqui la misma como valor inicial para que la franja tenga
     forma correcta desde el primer pintado, antes de que corra el script. */
  aspect-ratio: 1921 / 1081;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(900px 320px at 70% 30%, rgba(255, 255, 255, 0.22), transparent 65%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 12px, transparent 12px 24px),
    var(--navy-700);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}

.media--band .media__hint {
  font-size: 0.95rem;
  font-weight: 600;
}

/*
  La foto ocupa TODO el ancho de la franja, de borde a borde: nunca quedan
  barras de color a los lados y nunca se deforma.

  La franja respeta la proporcion real de la foto (1921x1081), de modo que la
  imagen se ve IGUAL en computadora, tablet y celular. Por eso el alto ya no
  se limita: un recorte obligaria a mostrar solo una parte de la foto en
  pantallas angostas, y el boton quedaria sobre zonas distintas.
*/
.media--band {
  overflow: hidden;
}

.media--band img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.band__actions {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 14px;
  margin-top: 40px;
}

.band--centro .band__actions {
  justify-content: center;
}

.band--izquierda .band__actions {
  justify-content: flex-start;
}

.band--derecha .band__actions {
  justify-content: flex-end;
}

/* Boton montado sobre la parte baja de la foto */
.band--over .band__actions {
  margin-top: -66px;
}

.band--over {
  padding-bottom: 72px;
}

/*
  Modo coordenadas (el que usa CONFIG.banda).
  El boton se ancla a la foto con PORCENTAJES, no con pixeles. Asi queda en el
  mismo punto de la imagen en computadora, tablet y celular, aunque la foto se
  vea mas alta o mas baja segun el ancho de la pantalla.

  --band-x / --band-y           : posicion en computadora (los escribe script.js)
  --band-x-movil / --band-y-movil : posicion en celular

  x = % desde el borde izquierdo de la foto
  y = % desde el borde INFERIOR de la foto (subir = numero mas grande)
*/
.band--coordenadas {
  position: relative;
  padding-bottom: 0;
}

.band--coordenadas .band__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--band-y, 14%);
  max-width: none;
  margin: 0;
  padding: 0 24px 0 var(--band-x, 7%);
  justify-content: flex-start;
}

/* ------------------------- Espacios de imagen ------------------------- */

.media {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px dashed rgba(120, 132, 155, 0.5);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(148, 163, 184, 0.09) 0 10px,
      transparent 10px 20px
    ),
    #eef1f6;
  color: #64748b;
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}

.media__hint {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px;
}

/* Cuando la imagen existe, el recuadro punteado desaparece */
.media--filled {
  background: transparent;
  border-style: solid;
}

/* Logo: sin fondo, sin marco y ajustado al tamano real de la imagen */
.media--logo.media--filled {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-width: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

.media--logo img {
  max-height: 40px;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.media--hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--hero {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(700px 300px at 70% 20%, rgba(255, 255, 255, 0.2), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 10px, transparent 10px 20px),
    var(--navy-700);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  box-shadow: var(--shadow-md);
}

.media--logo {
  aspect-ratio: auto;
  min-width: 120px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.75);
}

.media--project {
  aspect-ratio: 4 / 3;
  border-radius: 0;
  border-width: 0;
  border-bottom: 0;
  background:
    radial-gradient(420px 200px at 70% 25%, rgba(255, 255, 255, 0.16), transparent 65%),
    #e9edf3;
}

/* ----------------------------- Secciones ----------------------------- */

.section {
  padding: 60px 0;
  scroll-margin-top: var(--header-h);
}

.section--light {
  background: var(--bg);
  color: var(--ink);
}

.section--dark {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: #fff;
}

.section--form {
  padding-bottom: 72px;
}

.section__head {
  max-width: 68ch;
  margin-bottom: 34px;
}

.section__title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 800;
}

.section__lead {
  margin-top: 16px;
  font-size: 1.03rem;
  color: var(--muted);
}

.section--dark .section__lead {
  color: rgba(255, 255, 255, 0.72);
}

.subhead {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-top: 38px;
}

/* Movimiento del carrusel: la pista se desplaza y al llegar al final
   vuelve al inicio sin que se note el salto.

   Izquierda (por defecto): de 0 hasta -grupo. Las fotos salen por la izquierda.
   Derecha (data-carrusel-direccion="derecha"): de -grupo hasta 0. Las fotos
   entran por la izquierda y salen por la derecha. */
@keyframes carrusel-mover-izquierda {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--carrusel-desplazamiento) * -1), 0, 0);
  }
}

/*
  Carrusel que avanza HACIA LA DERECHA (data-carrusel-direccion="derecha").

  La pista siempre esta duplicada, asi que son dos grupos de fotos seguidos.
  Para ir al reves, la animacion arranca corrida un grupo a la izquierda
  (translate -grupo) y termina en 0: las fotos se desplazan hacia la derecha.

  Cuando vuelve a empezar, el grupo que aparece es copia exacta del que
  estaba, y como estan pegados, el salto no se nota.

  Importante: no se usa margin para correr la pista. Con margen, el grupo
  queda tan lejos que el carrusel pasa medio ciclo sin mostrar nada.
*/
@keyframes carrusel-mover-derecha {
  from {
    transform: translate3d(calc(var(--carrusel-desplazamiento) * -1), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ------------------------ Bancos e inmobiliarias ------------------------ */
/* Carrusel infinito: la pista se desplaza sola y se repite sin pausa */

.carrusel {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* El ancho visible es menor que el grupo de fotos, para que siempre
     haya algo que se desplace. Sin esto, si todo cabe, el carrusel
     se quedaria quieto. */
  max-width: 840px;
  margin: 0 auto;
  /* Suaviza los bordes para que las fotos entren y salgan sin cortes secos */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.carrusel__pista {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  will-change: transform;
}

.carrusel__pista li {
  flex: 0 0 auto;
}

/* Recuadro cuadrado: todas las fotos miden exactamente lo mismo.
   El tamano real lo pone script.js (CONFIG.carrusel.tamano).
   Sin margen interno: la foto ocupa todo el cuadrado. */
.carrusel__item {
  position: relative;
  width: var(--carrusel-tamano, 110px);
  height: var(--carrusel-tamano, 110px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--card);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

/* cover = la foto llena el cuadrado de borde a borde, como la de
   inmobiliaria 1. Si la foto no es cuadrada, se recorta un poco
   para que todos los recuadros se vean iguales. */
.carrusel__item img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Al senalar la foto, esta se levanta un poco */
.carrusel__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

/* Recuadro punteado de reserva, cuando aun no hay foto */
.carrusel__item--vacio {
  border-style: dashed;
  border-color: #c3c9d4;
  color: #94a3b8;
}

.carrusel__item--vacio .media__hint {
  font-size: 0.7rem;
  text-align: center;
}

/* En celular los recuadros se achican un poco mas */
@media (max-width: 900px) {
  .carrusel__item {
    width: 88px;
    height: 88px;
    padding: 0;
  }

  .carrusel__pista {
    gap: 10px;
  }
}

/* --------------------- Beneficios: solo vs con asesoria --------------------- */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.compare__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 34px 32px;
}

.compare__card--highlight {
  background: #fff;
  color: var(--ink);
  border-color: var(--gold-500);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  position: relative;
}

.compare__tag {
  display: inline-block;
  background: var(--gold-500);
  color: var(--navy-950);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.compare__title {
  font-size: 1.4rem;
  font-weight: 800;
}

.compare__sub {
  margin-top: 6px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
}

.compare__card--highlight .compare__sub {
  color: var(--muted);
}

.compare__list {
  margin: 26px 0 0;
  display: grid;
  gap: 14px;
}

.compare__list li {
  position: relative;
  padding-left: 38px;
  font-size: 0.96rem;
}

.compare__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.compare__list--muted li {
  color: rgba(255, 255, 255, 0.78);
}

/* La X de la tarjeta oscura va en rojo: es la unica señal de color que
   marca lo que NO conviene, y contrasta con el verde de la otra tarjeta. */
.compare__list--muted li::before {
  content: "\00D7";
  background: #e0483a;
  box-shadow: 0 2px 8px rgba(224, 72, 58, 0.45);
  padding-bottom: 2px;
}

.compare__list--ok li {
  color: var(--ink);
}

.compare__list--ok li::before {
  content: "\2713";
  background: #16a34a;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4);
}

.compare__foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.62);
}

.compare__card--highlight .compare__foot {
  border-top-color: var(--line);
  color: var(--muted);
}

.compare__card--highlight .btn {
  margin-top: 24px;
}

/* ------------------------------ Proyectos ------------------------------ */

.projects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.project {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.project:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.project__media {
  position: relative;
}

.project__pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(26, 69, 163, 0.86);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

.project__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 24px;
  flex: 1;
}

.project__location {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 700;
}

.project__name {
  font-size: 1.2rem;
  font-weight: 700;
}

.project__price {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.project__price span {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.project__details {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.spec-list {
  display: grid;
  gap: 9px;
}

.spec-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
}

.spec-list strong {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

.project__installment {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--muted);
}

.project__installment strong {
  color: var(--ink);
}

.project__body > .btn:last-child {
  margin-top: auto;
}

/* ------------------------------ Formulario ------------------------------ */

.form {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 38px 36px;
  display: grid;
  gap: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 0.88rem;
  font-weight: 600;
}

.req {
  color: var(--err);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  color: var(--ink);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 108px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.field input.is-invalid,
.field select.is-invalid {
  border-color: var(--err);
  background: #fdedec;
  box-shadow: 0 0 0 1px var(--err);
}

.field__error {
  font-size: 0.82rem;
  color: var(--err);
  min-height: 0;
}

/* Aviso corto de privacidad, bajo el formulario.
   Texto chico y gris: informa sin competir con el boton, pero con contraste
   suficiente para leerse tranquilo. */
.form__legal {
  margin: 20px 4px 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}

.form__legal strong {
  color: var(--ink);
  font-weight: 600;
}

.form__legal a {
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__legal a:hover {
  color: var(--navy-900);
}

.field__error:empty {
  display: none;
}

/* Campo "opcional" al lado de la etiqueta */
.field__hint {
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
}

/* ---------------- Grupos de opciones (ingreso y DICOM) ---------------- */

.field--group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.field__legend {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 10px;
}

/* Las tres opciones en una fila en computador, apiladas en celular. */
.choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Cada opcion es una tarjeta que se marca al tocarla. */
.choice__opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

/* El radio nativo se oculta, pero sigue siendo el control real: asi el
   teclado, el lector de pantalla y el navegador lo tratan normal. */
.choice__opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.choice__texto {
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--ink);
}

/* Punto de la opcion marcada */
.choice__opcion::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid #c3cad8;
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.choice__opcion:hover {
  border-color: #b6c0d2;
}

.choice__opcion:has(input:checked) {
  border-color: var(--navy-600);
  background: #eef3ff;
  box-shadow: 0 0 0 1px var(--navy-600) inset;
}

.choice__opcion:has(input:checked)::before {
  border-color: var(--navy-600);
  box-shadow: inset 0 0 0 4px #fff;
  background: var(--navy-600);
}

/* Foco visible solo cuando se navega con teclado */
.choice__opcion:has(input:focus-visible) {
  outline: 2px solid var(--navy-600);
  outline-offset: 2px;
}

/* Grupo marcado como erroneo */
.field--group.is-invalid .choice__opcion {
  border-color: var(--err);
  background: #fdedec;
}

.field--group.is-invalid .field__legend {
  color: var(--err);
}

/* Casilla de autorizacion marcada como erronea */
.field--check.is-invalid input[type="checkbox"] {
  outline: 2px solid var(--err);
  outline-offset: 1px;
}

.field--check.is-invalid label {
  color: var(--err);
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
}

.field--check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--navy-600);
}

.field--check label {
  font-weight: 500;
  font-size: 0.87rem;
  color: var(--muted);
}

.field--check .field__error {
  grid-column: 2;
}

.form__status {
  font-size: 0.9rem;
  text-align: center;
  min-height: 1.2em;
  color: var(--muted);
}

.form__status.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.form__status.is-error {
  color: var(--err);
  font-weight: 600;
}

.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(26, 69, 163, 0.28);
  border-top-color: var(--navy-950);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn.is-loading .btn__spinner {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------- Pie de pagina ---------------------------- */

.site-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 48px 0 24px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
  gap: 40px;
}

.site-footer__title {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 18px;
}

.site-footer__tagline {
  margin-top: 18px;
  font-size: 0.92rem;
  max-width: 40ch;
}

.site-footer__domain {
  margin-top: 16px;
  font-weight: 600;
}

.site-footer__domain a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.site-footer__list {
  display: grid;
  gap: 12px;
  font-size: 0.95rem;
}

.site-footer__list a {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s var(--ease);
}

.site-footer__list a:hover {
  color: var(--gold-400);
}

.site-footer__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 2px;
}

.site-footer__address {
  font-style: normal;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.site-footer__note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}

.site-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__legal {
  max-width: 62ch;
}

/* -------------------------- Boton flotante --------------------------
   Diseno adaptado del componente "Btn" de Uiverse.io (Gaurang7717).
   En escritorio se expande al pasar el mouse; en celular se expande en el
   primer toque (clase .is-open, ver el manejo tactil en script.js). */

.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
}

.wa-float.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  background-color: #00d757;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  transition: width 0.3s var(--ease), border-radius 0.3s var(--ease);
}

.sign {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s var(--ease), padding 0.3s var(--ease);
}

.sign svg {
  width: 25px;
  height: 25px;
}

.sign svg path {
  fill: #fff;
}

.text {
  position: absolute;
  right: 0;
  width: 0;
  opacity: 0;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition:
    opacity 0.3s var(--ease),
    width 0.3s var(--ease),
    padding 0.3s var(--ease);
}

.wa-float.Btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Escritorio: expande al pasar el mouse (solo donde el hover existe) */
@media (hover: hover) {
  .wa-float.Btn:hover {
    width: 270px;
    border-radius: 40px;
  }

  .wa-float.Btn:hover .sign {
    width: 26%;
    padding-left: 12px;
  }

  .wa-float.Btn:hover .text {
    opacity: 1;
    width: 74%;
    padding-right: 14px;
  }
}

/* Celular/tactil: primer toque expande, segundo abre WhatsApp */
.wa-float.Btn.is-open {
  width: 270px;
  border-radius: 40px;
}

.wa-float.Btn.is-open .sign {
  width: 26%;
  padding-left: 12px;
}

.wa-float.Btn.is-open .text {
  opacity: 1;
  width: 74%;
  padding-right: 14px;
}

.wa-float.Btn:active {
  transform: translate(2px, 2px);
}

.wa-float[hidden] {
  display: none;
}

/* Aviso flotante (por ejemplo: falta configurar el numero) */

.toast {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 71;
  max-width: min(340px, calc(100vw - 48px));
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--navy-900);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.45;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

.toast[hidden] {
  display: none;
}

/* ------------------------- Animaciones al hacer scroll ------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .project:hover,
  .wa-float:hover {
    transform: none;
  }
}

/* ----------------------------- Responsive ----------------------------- */

@media (max-width: 1080px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 56px;
  }

  .hero {
    padding: 38px 0 46px;
  }

  /* En el celular el boton mantiene el anclaje por porcentaje, para que siga
     en el mismo punto de la foto. Solo cambia si CONFIG.banda define
     xMovil / yMovil. */
  .band--coordenadas .band__actions {
    bottom: var(--band-y-movil, var(--band-y, 14%));
    padding-left: var(--band-x-movil, var(--band-x, 7%));
    justify-content: flex-start !important;
    margin-top: 0;
  }

  .band:not(.band--coordenadas) .band__actions {
    justify-content: center !important;
    margin-top: 28px;
  }

  .band--over:not(.band--coordenadas) .band__actions {
    margin-top: -52px;
  }

  /* En celular el boton de la franja se hace mas pequeno para no tapar la
     foto. Se anulan los minimos de ancho y alto de la version grande, pero
     el alto sigue en 44px para que el dedo lo alcance sin problema. */
  .btn--grande {
    padding: 12px 22px;
    min-width: 0;
    min-height: 44px;
    font-size: 15px;
  }

  .compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding: 44px 0;
  }

  .site-nav__toggle {
    display: inline-flex;
  }

  .site-nav__list {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 24px 20px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s var(--ease), visibility 0.3s;
  }

  .site-nav__list.is-open {
    max-height: 480px;
    visibility: visible;
    overflow-y: auto;
  }

  .site-nav__list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .site-nav__list a {
    display: block;
    padding: 14px 0;
    font-size: 1rem;
  }

  .site-nav__list a::after {
    display: none;
  }

  .site-nav__cta {
    border-bottom: 0 !important;
    padding-top: 16px;
  }

  .site-nav__cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 18px;
  }

  .projects {
    grid-template-columns: minmax(0, 1fr);
  }

  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Las opciones de ingreso y DICOM se apilan en el celular para que
     el texto completo se lea sin horizonte y se toquen bien. */
  .choice {
    grid-template-columns: minmax(0, 1fr);
  }

  .choice__opcion {
    padding: 15px 16px;
  }

  .form {
    padding: 26px 20px;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__actions .btn,
  .hero__actions a.btn {
    width: 100%;
  }

  .brand__name {
    font-size: 0.98rem;
  }

  .media--logo {
    min-width: 100px;
    height: 32px;
  }

  .media--logo img {
    max-height: 32px;
    max-width: 200px;
  }

  .wa-float {
    right: 16px;
    bottom: 16px;
  }

  .toast {
    right: 16px;
    bottom: 82px;
  }
}

@media print {
  .site-header,
  .wa-float,
  .site-nav__toggle {
    display: none;
  }

  body {
    background: #fff;
  }
}