/* =========================================================================
   Límite Consultores — lenguaje visual de la maqueta de la clienta.
   Azul marino, marfil y mostaza. Cinzel para el lema de portada y los
   titulares sobre banda marino; Inter para el resto; la palabra final de
   cada titular va en Cormorant Garamond itálica mostaza (clase .acento),
   igual que en su "página 2". Sin interruptor de tema: la maqueta es clara,
   fija — el marino es el color de las bandas, no un modo oscuro alternativo.

   Los nombres de variable (--noche, --crema, --acento…) vienen de la ronda
   anterior y ya no describen colores literales ("noche" ya no es oscuro):
   se conservan porque siguen siendo el concepto correcto (fondo de banda
   fuerte / fondo de página / color de énfasis) y renombrar cientos de
   selectores no aportaba nada que este comentario no explique en una vez.
   ========================================================================= */

:root {
  --noche:        #2f2C79;   /* azul corporativo Alto Límite: bandas, texto principal */
  --noche-alt:    #3d3a94;   /* azul medio: paneles elevados sobre azul */
  --noche-line:   rgba(249, 245, 241, 0.18);
  --noche-line-2: rgba(249, 245, 241, 0.3);
  --noche-mute:   rgba(249, 245, 241, 0.94);

  --crema:        #F9F5F1;   /* marfil: fondo general */
  --crema-alt:    #F1ECE4;   /* marfil elevado: pie, tarjetas */
  --crema-line:   rgba(47, 44, 121, 0.12);
  --crema-line-2: rgba(47, 44, 121, 0.22);
  --tinta:        #10202F;   /* texto de cuerpo sobre marfil */
  --tinta-mute:   rgba(16, 32, 47, 0.86);

  --azul:         #2f2C79;   /* mismo azul corporativo: nav, iconos y bordes de tarjetas */

  --acento:       #D4AF37;   /* dorado corporativo: botón primario, acentos */
  --acento-alt:   #E3C25A;   /* dorado claro: hover */
  /* La mostaza clara da 6.3:1 sobre marino pero no pasa AA como texto sobre
     marfil (contraste insuficiente con un dorado tan claro sobre blanco
     roto) — esta variante oscura sí, y es la que se usa como texto/ícono
     mostaza en zonas marfil. */
  --acento-tinta: #8A6D1F;
  --danger:       #B3261E;

  /* La maqueta no usa monoespaciada en ningún lado: se retira JetBrains Mono
     y --mono pasa a apuntar a Inter. Así todas las reglas que ya traían
     tracking/mayúsculas por selector (eyebrows, botones, etiquetas) quedan
     correctas sin tocar cada una. */
  --sans: 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'Inter', system-ui, sans-serif;
  /* Mayúsculas ceremoniales: lema de portada y titulares sobre banda marino. */
  --display: 'Cormorant Garamond', Georgia, serif;
  /* Sistema tipográfico actual: Poppins para titulares y botones (geométrica,
     moderna), Inter 400 para cuerpo y listas. Cinzel queda reservado a los
     numerales decorativos (stats, numeración de servicios, etapas). */
  --heading: 'Cormorant Garamond', Georgia, serif;
  /* La palabra final de cada titular (clase .acento), en itálica mostaza. */
  --acento-serif: 'Cormorant Garamond', serif;

  --shell: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --topbar-bg: rgba(249, 245, 241, 0.94);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* El margen de scroll va solo en html: sumarlo también por sección dejaba el destino al doble de distancia. */
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }

body {
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}

/* Sistema tipográfico Alto Límite: Cormorant Garamond en titulares (hoja de marca
   "Precisión técnica") e Inter 400 en cuerpo y listas. Cormorant tiene menor altura de
   x que una sans, así que los titulares llevan más cuerpo y peso 600–700. */
h1, h2, h3, h4, h5, h6 { font-family: var(--heading); line-height: 1.12; letter-spacing: 0.005em; }
h1, h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }
/* Todo el texto corrido va justificado (pedido de la clienta); guionado automático
   (html lang="es-CL") para evitar ríos de espacio en columnas angostas. */
p, li, dd, .serv__entregable { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* Bloques centrados: líneas completas justificadas, última línea centrada. */
.veredicto p, .proposito__panel p, .serv__cabecera p, .tas-fase--procesando p, .tas-fase--error p, .tas-fase--enviada p, .tasador__aviso { text-align: justify; text-align-last: center; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--acento-tinta); outline-offset: 3px; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.75rem; }
.shell--narrow { max-width: 760px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--acento); color: var(--noche); padding: 0.75rem 1.25rem; }
.skip:focus { left: 0; }

/* La palabra de énfasis de cada titular: itálica serif mostaza, como en su
   "página 2" ("…en decisiones."). Sobre marfil la mostaza clara no pasa AA
   como texto, así que ahí se usa la variante oscura. */
.acento {
  color: var(--acento); font-family: var(--acento-serif); font-style: italic; font-weight: 600;
}
.zone--crema .acento, .zone--crema .eyebrow { color: var(--acento-tinta); }
.zone--crema .eyebrow__rule { background: var(--acento-tinta); }
.ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }

/* =========================================================================
   MICRO-ETIQUETA — abre cada sección: numeral opcional + texto + regla
   ========================================================================= */
.eyebrow {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento);
  margin-bottom: 1.5rem;
}
.eyebrow__rule { width: 2rem; height: 1px; background: var(--acento); flex: 0 0 auto; }
.eyebrow--centro { justify-content: center; }

/* =========================================================================
   BOTONES — píldora, mostaza sólido o borde; nunca rectos
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--heading); font-size: 0.98rem; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.9rem; border-radius: 999px; border: 1.5px solid transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
/* Hover: cambia el color, se eleva unos píxeles y vuelve con transición suave. */
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(16, 32, 47, 0.45); }
.btn--acento { background: var(--acento); color: var(--noche); }
.btn--acento:hover { background: var(--acento-alt); }
.btn--linea { border-color: var(--noche-line-2); color: var(--crema); }
.btn--linea:hover { border-color: var(--acento); color: var(--acento); }
.btn--linea-clara { border-color: var(--noche-line-2); color: var(--crema); }
.btn--linea-clara:hover { border-color: var(--acento); color: var(--acento); }
.btn--tinta { background: var(--noche); color: var(--crema); }
.btn--tinta:hover { background: var(--noche-alt); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.98); }

/* =========================================================================
   BARRA SUPERIOR — marfil fija
   ========================================================================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--crema-line);
}
.topbar .shell { max-width: 1640px; }
.topbar__inner { display: flex; align-items: center; gap: 1.75rem; min-height: 6.4rem; }

/* Logo horizontal: monograma AL + nombre, con filete dorado vertical como en la maqueta. */
.brand { display: flex; align-items: center; gap: 0.85rem; padding-right: 1.75rem; border-right: 1px solid var(--acento); }
.brand__mark { height: 3.4rem; width: auto; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1; color: var(--noche); }
.brand__text strong { white-space: nowrap; font-family: var(--display); font-weight: 500; font-size: 2.05rem; letter-spacing: 0.17em; text-transform: uppercase; }
.brand__text small { white-space: nowrap; margin-top: 0.5rem; font-family: var(--sans); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; }
.brand__logo { height: 4.2rem; width: auto; display: block; }

.topbar__right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; }
.topbar__info { display: flex; align-items: center; gap: 0; font-family: var(--sans); font-size: 0.78rem; color: var(--noche); }
.topbar__info li { display: flex; align-items: center; padding: 0 1.15rem; border-left: 1px solid var(--crema-line-2); }
.topbar__info li:first-child { border-left: none; }
.topbar__info a, .topbar__info span { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar__info a:hover { color: var(--acento-tinta); }
.topbar__info svg { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; fill: var(--noche); }
.topbar__row { display: flex; align-items: center; gap: 2.4rem; }
.topbar__cta {
  padding: 0.85rem 2.1rem; font-family: var(--display); font-size: 1.12rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, #A8702A 0%, #C98E3E 55%, #D9A552 100%);
}
.topbar__cta:hover { background: linear-gradient(90deg, #B57B33 0%, #D49B4B 55%, #E3B263 100%); }

.nav { display: flex; gap: 2.4rem; font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.nav a { position: relative; padding-bottom: 0.35rem; color: var(--azul); transition: color 0.2s; }
.nav a:hover { color: var(--acento-tinta); }
.nav a.is-active { color: var(--azul); }
.nav a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--acento);
}

/* Disciplinas: en escritorio es un desplegable (botón + panel flotante);
   en móvil, el mismo panel queda siempre visible dentro de la hamburguesa. */
.nav__item { position: relative; }
.nav__disciplinas-toggle {
  /* Un <button> no hereda text-transform del padre (lo resetea el user-agent stylesheet),
     así que "Servicios" quedaba en minúscula mientras el resto del menú (todo <a>) sí
     heredaba las mayúsculas de .nav. Hay que repetirlo acá explícito. */
  font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--azul); transition: color 0.2s;
}
.nav__disciplinas-toggle:hover, .nav__disciplinas-toggle[aria-expanded="true"] { color: var(--azul); }
.nav__disciplinas {
  position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%);
  z-index: 10; width: max-content; min-width: 15rem;
  background: var(--crema); border: 1px solid var(--crema-line-2); border-radius: 0.6rem;
  box-shadow: 0 20px 40px -16px rgba(47, 44, 121, 0.28);
  padding: 0.5rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease;
}
.nav__disciplinas-toggle[aria-expanded="true"] + .nav__disciplinas {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav__disciplinas a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 1.35rem; font-size: 0.9rem; font-weight: 600; color: var(--tinta);
}
.nav__disciplinas a:hover { color: var(--noche); background: rgba(47, 44, 121, 0.05); }
.nav__disciplinas-n { color: var(--azul); font-family: var(--display); font-weight: 700; font-size: 0.92rem; }
.nav__disciplinas-ver { color: var(--noche); font-weight: 700; border-bottom: 1px solid var(--crema-line); margin-bottom: 0.25rem; }

.topbar__toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; }
.topbar__toggle span { width: 20px; height: 2px; background: var(--noche); transition: transform 0.2s, opacity 0.2s; }
.topbar.is-open .topbar__toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.topbar.is-open .topbar__toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* =========================================================================
   PORTADA — maqueta de la clienta: foto a pantalla completa, titular "Precisión
   técnica" (Cormorant Garamond) y la botonera de los 6 servicios sobre la foto.
   ========================================================================= */
:root { --topbar-h: 6.4rem; --acento-vivo: #F2B52D; }
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden; color: var(--crema); padding-top: var(--topbar-h);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(26, 24, 74, 0.62) 0%, rgba(26, 24, 74, 0) 32%),
    linear-gradient(95deg, rgba(26, 24, 74, 0.72) 0%, rgba(26, 24, 74, 0.42) 34%, rgba(26, 24, 74, 0) 62%);
}

.hero__body { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding: 2rem clamp(1.5rem, 6vw, 6rem) 1rem; }
.hero__content { max-width: 60rem; }
.hero__rule { display: block; width: 4.8rem; height: 3px; background: var(--acento-vivo); margin-bottom: 2.2rem; }
.hero__title {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2.4rem, 4.1vw, 4.2rem); line-height: 1.05; letter-spacing: 0.05em; white-space: nowrap;
  color: #fff; margin-bottom: 0.7rem;
}
.hero__title .acento {
  display: block; font-family: var(--display); font-style: italic; font-weight: 500;
  text-transform: none; letter-spacing: 0.01em; color: var(--acento);
  font-size: 0.9em; margin-top: 0.15em;
}
.hero__lead {
  font-family: var(--sans); font-size: clamp(0.85rem, 1.05vw, 1.02rem); font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase; line-height: 1.75;
  color: #fff; max-width: 40rem; margin: 1.6rem 0 2.2rem; text-align: left;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.hero__actions .btn {
  font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 1.05rem 2.5rem;
}
.hero__actions .btn--acento { background: var(--acento-vivo); color: var(--noche); }
.hero__actions .btn--acento:hover { background: #F7C750; }
.hero__actions .btn--linea-clara { border-color: rgba(255, 255, 255, 0.4); background: rgba(26, 24, 74, 0.18); }

/* Botonera de servicios, sobre la foto. Cada tarjeta levanta una miniatura (ya trae
   su "VER MÁS") al pasar el cursor, enfocar o tocar; la miniatura lleva a la sección. */
.hero__tira { position: relative; z-index: 3; padding: 0 clamp(1rem, 2.4vw, 2.4rem) clamp(1rem, 2vw, 1.8rem); }
.tira__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.tira__card { position: relative; }
.tira__item {
  display: flex; align-items: center; gap: 0.8rem; height: 100%; min-height: 5.6rem;
  padding: 0.7rem 2.9rem 0.7rem 0.8rem; position: relative;
  background: rgba(36, 38, 98, 0.2); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0.7rem;
  transition: background 0.2s var(--ease), border-color 0.2s, transform 0.2s var(--ease);
}
.tira__card:hover .tira__item, .tira__card:focus-within .tira__item, .tira__card.is-open .tira__item {
  background: rgba(47, 44, 121, 0.45); border-color: var(--acento); transform: translateY(-2px);
}
.tira__icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 3.9rem; height: 3.9rem;
  border: 2px solid var(--acento); border-radius: 50%; color: var(--acento);
  background: rgba(26, 24, 74, 0.45); box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}
.tira__icon svg { width: 2.05rem; height: 2.05rem; display: block; }
.tira__label {
  min-width: 0; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em;
  line-height: 1.4; color: #fff; text-align: left; text-shadow: 0 1px 6px rgba(15, 15, 40, 0.8);
}
.tira__arrow {
  position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); font-size: 0.95rem; line-height: 1; color: #fff;
  transition: color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.tira__card:hover .tira__arrow, .tira__card:focus-within .tira__arrow { color: var(--acento); border-color: var(--acento); transform: translate(2px, -50%); }

.tira__mini {
  position: absolute; left: 50%; bottom: calc(100% + 0.7rem); width: clamp(10.5rem, 13vw, 13rem);
  transform: translate(-50%, 12px); opacity: 0; visibility: hidden; pointer-events: none;
  border-radius: 0.8rem; background: #fff; box-shadow: 0 22px 44px -14px rgba(10, 10, 40, 0.65);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.tira__mini::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 0.9rem; }
.tira__mini img { width: 100%; height: auto; display: block; border-radius: 0.8rem; }
.tira__card:hover .tira__mini, .tira__card:focus-within .tira__mini, .tira__card.is-open .tira__mini {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}

/* =========================================================================
   SECCIONES — alternancia marfil / marino
   ========================================================================= */
/* Sin content-visibility: con él el navegador estima ~800px por sección aún no dibujada y,
   al scrollear hacia un ancla (#contacto), el alto real aparece en el camino y el destino
   se corre: el botón "Solicitar asesoría" aterrizaba en cualquier parte de la página. */
.zone {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.zone--noche { background: var(--noche); color: var(--crema); }
.zone--crema { background: var(--crema); color: var(--tinta); }

/* Titulares en Cinzel: es la cara de la marca (mismo tipo que el lema de portada y
   que los titulares sobre banda marino de la maqueta). Inter queda para el cuerpo. */
.section__title {
  font-family: var(--heading); font-weight: 700;
  font-size: clamp(2.4rem, 5.2vw, 3.8rem); line-height: 1.15;
  letter-spacing: -0.015em; max-width: 38ch; margin-bottom: 1.5rem;
}
.section__lead { font-size: 1.22rem; font-weight: 500; max-width: 58ch; margin-bottom: 2.5rem; }

/* =========================================================================
   ENVOLTORIO BANDA PROPÓSITO + ESTADÍSTICAS
   ========================================================================= */
.proposito-wrap { background: var(--crema); }

/* =========================================================================
   NOSOTROS — texto a dos columnas + banda propósito + razones
   ========================================================================= */
.nosotros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.nosotros__cta { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.75rem; font-family: var(--sans); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acento-tinta); border-bottom: 1.5px solid var(--acento-tinta); padding-bottom: 0.2rem; }
.nosotros__cta:hover { color: var(--noche); border-color: var(--noche); }
.nosotros__link { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 0.55rem; margin-top: 1.4rem; font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--azul); }
.nosotros__link .ico { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.nosotros__link:hover { text-decoration: underline; }
.nosotros__lead { font-size: 1.2rem; font-weight: 500; color: var(--tinta-mute); margin-bottom: 1.35rem; }
.nosotros__lead:last-of-type { margin-bottom: 0; }

/* A sangre y pegada a la tira, como en la maqueta — sin radio, sombra ni
   margen que la separe. El alto lo fija el min-height de las fotos, NO el de las
   imágenes: son position:absolute (ver .proposito__foto img) y por tanto no aportan
   alto intrínseco, así que la banda nunca se estira a los ~580px del retrato. Con
   "height" fijo el panel recortaba el botón al achicar la banda; con min-height la
   banda crece si el texto del panel lo necesita y las fotos la acompañan. */
.proposito {
  display: grid; grid-template-columns: 1fr minmax(0, 1.4fr) 1fr;
  grid-template-rows: 1fr; align-items: stretch;
  min-height: clamp(12rem, 14vw, 16rem);
}
.proposito__foto { position: relative; min-height: clamp(12rem, 14vw, 16rem); overflow: hidden; }
.proposito__foto img { transition: transform 0.6s var(--ease); }
.proposito__foto:hover img { transform: scale(1.05); }
/* position:absolute en vez de width/height:100% — con height:100% el navegador cae al
   aspect-ratio de los atributos width/height del <img> mientras el alto del stretch de
   grid no está resuelto todavía, y esa foto (retrato) infla toda la banda a su propio
   alto. Absolute + inset:0 se ancla al tamaño YA calculado del contenedor, sin ese lío. */
.proposito__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.proposito__panel {
  background: var(--noche); color: #FFFFFF;
  padding: clamp(1rem, 1.6vw, 1.4rem); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 0.6rem;
  /* Sin esto, un grid item con más contenido que la fila crece igual (min-height:auto
     por defecto) e ignora el alto fijo del padre — así fue como el panel terminó
     583px alto y tapando la barra de estadísticas debajo. */
  min-height: 0; overflow: hidden;
}
.proposito__title {
  font-family: var(--heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.3; letter-spacing: 0.005em;
  color: #FFFFFF;
}
.proposito__text { font-size: 0.98rem; font-weight: 500; line-height: 1.5; color: #FFFFFF; max-width: 34ch; }
.proposito__panel .eyebrow { font-size: 0.72rem; gap: 0.6rem; margin-bottom: 0; }
.proposito__panel .btn { padding: 0.55rem 1.25rem; font-size: 0.8rem; }

.porque { margin-top: clamp(3rem, 6vw, 4.5rem); }
.porque__titulo { font-family: var(--sans); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--noche); border-bottom: 1px solid var(--crema-line-2); padding-bottom: 0.85rem; margin-bottom: 1.35rem; }
.porque__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 2rem; }
.porque__item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1.1rem; font-weight: 500; color: var(--tinta); }
.porque__item .ico { color: var(--acento-tinta); margin-top: 0.15em; }

/* =========================================================================
   BARRA DE ESTADÍSTICAS — banda marino con conteo animado
   ========================================================================= */
.stats-bar { background: var(--noche); padding: clamp(0.9rem, 1.5vw, 1.25rem) 0; }
.stats-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat-item {
  display: flex; align-items: center; gap: 1rem; justify-content: center; text-align: left;
  border-left: 1px solid var(--noche-line); padding-left: 1.5rem;
}
.stat-item:first-child { border-left: none; padding-left: 0; }
.stat-item > span { display: flex; flex-direction: column; gap: 0.15rem; }
.stat-item__icon { color: var(--acento); flex: 0 0 auto; }
.stat-item__icon .ico { width: 1.7rem; height: 1.7rem; stroke-width: 1.5; }
/* Cifras en Cinzel, como los titulares sobre marino de la maqueta — no en Inter. */
.stat-item__num { font-family: var(--display); font-size: 2.5rem; font-weight: 700; color: var(--acento); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-item__value-text { font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: var(--crema); line-height: 1.25; }
.stat-item__label { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--noche-mute); line-height: 1.3; }

/* =========================================================================
   DISCIPLINAS EN DETALLE — seis secciones editoriales completas, alternando
   foto/texto y fondo marino/marfil (no un acordeón: siempre visibles, como
   páginas de revista — más llamativo y sin el hueco de un acordeón cerrado).
   ========================================================================= */
.serv__cabecera { text-align: center; max-width: 46rem; margin: 0 auto 1rem; }
.serv__cabecera .eyebrow { justify-content: center; }
.serv__cabecera .section__title { max-width: none; }

/* El nombre de la disciplina manda sobre el resto del contenido de su sección. */
.serv__nombre {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.08; letter-spacing: -0.005em;
  margin-bottom: 0.8rem; max-width: 34ch;
}
/* La palabra de énfasis del título conserva minúsculas y cursiva (mismo gesto que el lema de portada). */
.serv__nombre .acento, .proposito__title .acento { text-transform: none; }
.serv__nombre-n { font-size: 1.25em; color: var(--acento); line-height: 1; }
.zone--crema .serv__nombre-n { color: var(--acento-tinta); }
/* Ícono propio de cada disciplina junto al título: mismo trazo lineal que las tarjetas
   de la tira, así el lector conecta de un vistazo tarjeta ↔ sección. Se dibuja solo
   (trazo animado) cuando la sección entra en pantalla. */
.serv__ico {
  align-self: center; flex: 0 0 auto;
  width: clamp(2.1rem, 3.4vw, 2.8rem); height: clamp(2.1rem, 3.4vw, 2.8rem);
  color: var(--acento);
}
.zone--crema .serv__ico { color: var(--acento-tinta); }
.serv__ico svg { width: 100%; height: 100%; }
.serv__ico svg * { stroke-dasharray: 400; stroke-dashoffset: 400; }
.serv__nombre.is-in .serv__ico svg * { animation: trazo 1.4s var(--ease) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.serv__subtitulo { font-size: clamp(1.3rem, 2.3vw, 1.65rem); font-weight: 600; line-height: 1.4; max-width: 46ch; margin-bottom: 2.4rem; }

.serv { overflow: hidden; }
/* El texto envuelve la foto (float) en vez de vivir en una columna aparte: con la
   grilla de dos columnas anterior, si el texto era más largo que la foto (o al revés)
   el lado corto dejaba un tramo entero vacío. Flotando la foto junto al título, el
   texto la rodea mientras dura y sigue a ancho completo apenas la foto termina —
   nunca queda un bloque completo sin usar. */
.serv__wrap::after { content: ''; display: table; clear: both; }
.serv__wrap .eyebrow, .serv__wrap .section__title { clear: both; }

.serv__fotos {
  float: right; width: 44%; margin: 0.35rem 0 1.75rem 3rem;
  display: grid; gap: 0.85rem;
}
.serv--invertido .serv__fotos { float: left; margin: 0.35rem 3rem 1.75rem 0; }

/* Cada foto fija su propio alto por aspect-ratio (cercano al de las fotos reales,
   todas apaisadas ~16:9) en vez de depender del alto de una columna vecina — así se ve
   casi la foto completa sin importar cuánto texto la rodee. */
.serv__fotos--dupla { grid-template-rows: 1fr; }
.serv__fotos--con-una { grid-template-rows: auto auto; }
.serv__fotos--con-dos { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.serv__fotos--dupla .serv__foto--grande,
.serv__fotos--con-una .serv__foto--grande,
.serv__fotos--con-dos .serv__foto--grande { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.serv__fotos--con-una .serv__foto:not(.serv__foto--grande) { aspect-ratio: 2 / 1; }
.serv__fotos--con-dos .serv__foto:not(.serv__foto--grande) { aspect-ratio: 1; }
.serv__foto {
  margin: 0; position: relative; overflow: hidden; border-radius: 1rem;
  border: 1px solid rgba(212, 175, 55, 0.35);
  display: block; width: 100%; aspect-ratio: 16 / 9;
}
.serv__foto--grande { aspect-ratio: 16 / 9; }
.serv__foto picture { display: contents; }
.serv__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Foto suelta: va al lado CONTRARIO del bloque principal, no apilada con él. Apilarla
   del mismo lado solo hacía la columna de fotos más alta todavía (empujando la lista
   más abajo) sin llenar el hueco real, que quedaba del lado del texto — el texto (más
   corto que las tres fotos juntas) terminaba antes que las fotos y dejaba ese tramo
   vacío. Del lado del texto, en cambio, esta foto cae justo ahí: el bloque principal
   sigue ocupando su lado, así que hay hueco libre del otro lado para ella. */
.serv__foto-suelta { float: left; width: 38%; aspect-ratio: 4 / 3; margin: 0.25rem 2.5rem 1.5rem 0; }
.serv--invertido .serv__foto-suelta { float: right; margin: 0.25rem 0 1.5rem 2.5rem; }

/* Todo texto corrido de un servicio (bajada, párrafo, introducción de lista, lista y
   "Soluciones") comparte tamaño, peso y tipo: una sola medida para toda la página. */
.serv__bajada, .serv__parrafo { font-size: 1.22rem; font-weight: 500; line-height: 1.62; margin-bottom: 1.15rem; }
/* clear:both en las listas y el entregable: si el párrafo junto a la foto es corto,
   estos elementos igual empiezan bajo la foto (a ancho completo) en vez de intentar
   embutirse en la franja angosta que quedaba libre junto a ella. */
.serv__lista-titulo {
  font-family: var(--sans); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 1.5rem 0 0.75rem; clear: both;
}
.serv__lista-intro { font-size: 1.22rem; font-weight: 500; line-height: 1.62; margin: 1.5rem 0 0.9rem; clear: both; }
.serv__lista {
  columns: 2; column-gap: 1.75rem; font-size: 1.22rem; font-weight: 500; line-height: 1.62;
}
.serv__lista li { position: relative; padding-left: 1.15rem; break-inside: avoid; margin-bottom: 0.55rem; }
/* Viñeta de marca: triángulo (la forma del hito/geomática del logo y de la maqueta),
   en lugar de la rayita "-" genérica. */
.serv__lista li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 0.55rem; height: 0.5rem;
  background: var(--acento);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.zone--crema .serv__lista li::before { background: var(--acento-tinta); }

/* Lista de servicios como tarjetas con ícono — cada tarjeta agrupa dos ítems reales del
   listado (título + segunda línea), no texto inventado; solo cambia la presentación. */
.serv__tarjetas {
  clear: both; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.serv__tarjeta {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.35rem 1.5rem; border-radius: 0.75rem;
  background: var(--noche); color: var(--crema);
}
.zone--noche .serv__tarjeta { background: rgba(249, 245, 241, 0.06); border: 1px solid var(--noche-line-2); }
.serv__tarjeta .ico { width: 1.9rem; height: 1.9rem; flex: 0 0 auto; stroke-width: 1.5; color: var(--acento); margin-top: 0.1rem; }
.serv__tarjeta span { font-size: 1.1rem; font-weight: 500; line-height: 1.5; }
.serv__tarjeta strong { display: block; font-size: 1.22rem; font-weight: 700; margin-bottom: 0.3rem; }

/* Geomática replica la maqueta de la clienta: filas en grid (no float) porque acá el
   orden foto/caja/foto es fijo, a diferencia de las otras cinco secciones donde el
   texto necesita fluir alrededor de fotos de largo variable. */
.serv--paneles .serv__fila {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center;
  margin-bottom: 1.75rem; clear: both;
}
.serv--paneles .serv__fila .serv__foto--grande { margin: 0; aspect-ratio: 16 / 9; }
.serv--paneles .serv__fila--caja { grid-template-columns: 1fr 1fr; }
.serv--paneles .serv__fila--caja .serv__foto { margin: 0; aspect-ratio: 4 / 3; }
.serv--paneles .serv__caja {
  background: var(--crema-alt); border: 1px solid var(--noche-line-2);
  border-radius: 1rem; padding: 1.5rem; display: flex; align-items: center;
}
.zone--noche .serv--paneles .serv__caja,
.serv--paneles.zone--noche .serv__caja { background: var(--noche-alt); }
.serv--paneles .serv__caja .serv__parrafo { margin: 0; }
.serv--paneles .serv__caja .serv__bajada { margin: 0; }
.serv--paneles .serv__caja .serv__lista-titulo { margin: 0 0 0.9rem; }
.serv--paneles .serv__caja .serv__lista { margin: 0; }
/* Caja a todo el ancho (lista de alcances bajo las tres filas de foto + caja). */
.serv--paneles .serv__caja--ancha { display: block; clear: both; margin-bottom: 1.75rem; padding: 1.75rem; }
.serv--paneles .serv__caja--ancha .serv__lista-titulo { margin: 0 0 0.9rem; }
.serv__lista--una { columns: 1; }
.serv--paneles .serv__caja--ancha .serv__lista-intro { margin: 0 0 1rem; }
.serv--paneles .serv__caja--ancha .serv__lista { margin: 0; }
.serv--paneles .serv__fila--dirigido { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
.serv--paneles .serv__fila--dirigido .serv__foto { margin: 0; float: none; width: auto; aspect-ratio: 4 / 3; }
.serv--paneles .serv__fila--dirigido .serv__foto--retrato { aspect-ratio: 3 / 4; }
.serv--paneles .serv__fila--dirigido .serv__lista-titulo,
.serv--paneles .serv__fila--dirigido .serv__entregable { margin-top: 0; }

.serv__entregable {
  clear: both; max-width: 42rem;
  margin: 1.75rem 0 1.5rem; padding: 1rem 1.25rem;
  border-left: 3px solid var(--acento); background: rgba(212, 175, 55, 0.08);
  border-radius: 0 0.5rem 0.5rem 0; font-size: 1.22rem; font-weight: 500; line-height: 1.62;
}
.serv__entregable-label {
  display: block; font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); margin-bottom: 0.3rem;
}
.zone--crema .serv__entregable-label { color: var(--acento-tinta); }
.serv__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.serv__ctas .btn { font-size: 1.25rem; padding: 1.05rem 2.2rem; }

/* =========================================================================
   BANDA SEPARADORA — imagen a sangre entre secciones
   ========================================================================= */
.banda { position: relative; height: clamp(10rem, 22vw, 16rem); overflow: hidden; }
.banda img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92); }
.banda::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noche) 0%, transparent 12%, transparent 88%, var(--crema) 100%); opacity: 0.9; }
.banda--hormigon::after { background: linear-gradient(180deg, var(--crema) 0%, transparent 12%, transparent 88%, var(--noche) 100%); }

/* =========================================================================
   ESTÁNDAR DE TRABAJO
   ========================================================================= */
.std { display: grid; gap: 0; border-top: 1px solid var(--crema-line-2); }
.std__item {
  display: grid; grid-template-columns: 3rem minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 1.5rem; align-items: baseline; padding: 1.5rem 0;
  border-bottom: 1px solid var(--crema-line);
}
.std__n { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--acento-tinta); letter-spacing: 0.02em; }
.std__item dt { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.std__item dd { color: var(--tinta-mute); font-size: 1.1rem; font-weight: 500; }

/* =========================================================================
   METODOLOGÍA — línea de tiempo central, etapas alternadas
   ========================================================================= */
.stations {
  display: grid; grid-template-columns: 1fr 2px 1fr;
  column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 3rem;
  position: relative; margin-top: 3.5rem;
}
.stations::before { content: ''; grid-column: 2; grid-row: 1 / -1; background: var(--noche-line-2); justify-self: center; width: 2px; }
.stations__item { display: contents; }
.stations__dot {
  grid-column: 2; grid-row: var(--fila); justify-self: center; align-self: start; margin-top: 0.4rem;
  width: 0.65rem; height: 0.65rem; border-radius: 50%;
  background: var(--noche); border: 2px solid var(--acento);
  transform: scale(0.4); opacity: 0; transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.stations__item.is-in .stations__dot { transform: scale(1); opacity: 1; }
.stations__content {
  opacity: 0; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.stations__content { grid-row: var(--fila); }
.stations__item:nth-child(odd) .stations__content { grid-column: 1; text-align: right; transform: translateX(16px); }
.stations__item:nth-child(even) .stations__content { grid-column: 3; text-align: left; transform: translateX(-16px); }
.stations__item.is-in .stations__content { opacity: 1; transform: none; }
.stations__eta { display: block; font-family: var(--display); font-size: clamp(1.1rem, 1.9vw, 1.4rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento); margin-bottom: 0.45rem; }
.stations__content h3 { font-size: clamp(1.4rem, 2.3vw, 1.75rem); margin-bottom: 0.5rem; color: #FFFFFF; }
.stations__content p { color: #FFFFFF; font-size: 1.12rem; font-weight: 500; }

/* =========================================================================
   FORMULARIO — panel sobre marino, campos de línea inferior
   ========================================================================= */
.wizard {
  position: relative; background: var(--noche-alt); border: 1px solid var(--noche-line-2); border-radius: 0.9rem;
  padding: 2.25rem 2rem; margin-top: 3rem;
}
.wizard__step { display: none; }
.wizard__step.is-active { display: block; }
.wizard__step-title { font-size: 1.45rem; margin-bottom: 1.5rem; }

.wizard__service-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; }
.service-pick {
  font-family: var(--heading); font-size: 0.98rem; font-weight: 600; text-align: left;
  padding: 0.95rem 1rem 0.95rem 0; border-bottom: 1px solid var(--noche-line);
  color: var(--noche-mute); transition: color 0.2s, padding-left 0.25s var(--ease);
}
.service-pick:hover { color: var(--acento); padding-left: 0.5rem; }
.service-pick.is-selected { color: var(--acento); font-weight: 700; border-bottom: 1px solid var(--acento); }

.field { margin-bottom: 1.5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field label, .field__legend {
  display: block; font-family: var(--sans); font-size: 0.84rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--acento); margin-bottom: 0.55rem;
}
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--noche-line-2);
  padding: 0.6rem 0; font-family: var(--body); font-size: 1.1rem; font-weight: 500; color: var(--crema);
  transition: border-color 0.2s;
}
/* El dropdown nativo ignora background:transparent — forzar colores legibles */
.field select {
  background-color: var(--noche);
  color: #F9F5F1;
}
.field select option {
  background-color: var(--noche);
  color: #F9F5F1;
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input::placeholder, .field textarea::placeholder { color: rgba(249, 245, 241, 0.55); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--acento); }
.field-error { border-bottom-color: var(--danger) !important; }
.field__msg { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: #FF8F87; margin-top: 0.4rem; }
.field__msg[hidden] { display: none; }

.checklist { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.checklist label { display: flex; align-items: center; gap: 0.6rem; font-family: var(--body); font-size: 1.08rem; font-weight: 500; color: var(--crema); }
.checklist input { width: auto; accent-color: var(--acento); }
.hp-field { position: absolute; left: -9999px; }

.wizard__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--noche-line); }
.wizard__progress { display: flex; gap: 0.4rem; }
.wizard__progress span { width: 1.75rem; height: 2px; background: var(--noche-line-2); transition: background 0.3s; }
.wizard__progress span.is-active { background: var(--acento); }
.wizard__progress span.is-done { background: var(--crema); }
.wizard__done { padding: 2rem 0; }
.wizard__done--exito { display: flex; align-items: flex-start; gap: 1rem; }
.wizard__done--exito .ico { width: 1.6rem; height: 1.6rem; color: var(--acento); margin-top: 0.2rem; flex: 0 0 auto; }
.wizard__done h3 { font-size: 1.55rem; margin-bottom: 0.5rem; }
.wizard__done p { color: var(--noche-mute); font-size: 1.1rem; }

.wizard__status {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; padding: 0.85rem 1rem; margin-top: 1.25rem; border-left: 2px solid var(--noche-line-2);
}
.wizard__status[hidden] { display: none; }
.wizard__status--error { border-left-color: var(--danger); color: #FF8F87; background: rgba(179, 38, 30, 0.12); }
.wizard__status--exito { border-left-color: var(--acento); color: var(--acento); background: rgba(212, 175, 55, 0.12); }

.cierre { position: relative; margin-top: 2.5rem; background: var(--noche-alt); border: 1px solid var(--noche-line-2); border-radius: 0.9rem; padding: 1.75rem 2rem; display: grid; gap: 0.9rem; }
.cierre h3 { font-size: 1.45rem; max-width: 22ch; }
.cierre p { color: var(--noche-mute); font-size: 1.1rem; font-weight: 500; max-width: 52ch; }
.cierre__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; font-family: var(--sans); font-size: 0.98rem; font-weight: 600; }
.cierre__links a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--acento); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.2s; }
.cierre__links a:hover { border-bottom-color: var(--acento); }

/* =========================================================================
   VEREDICTO — cierre centrado, sobre marfil
   ========================================================================= */
.veredicto { padding: clamp(4rem, 9vw, 8rem) 0; text-align: center; }
.veredicto__title {
  font-weight: 800; font-size: clamp(2.1rem, 4.8vw, 3.5rem); line-height: 1.15;
  max-width: 22ch; margin: 0 auto 2.25rem;
}

/* =========================================================================
   PIE
   ========================================================================= */
.foot { background: var(--crema-alt); padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.foot__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 2.5rem; }
.foot__brand { display: flex; align-items: center; gap: 0.7rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 700; }
.foot__nav a { color: var(--tinta-mute); transition: color 0.2s; }
.foot__nav a:hover { color: var(--acento-tinta); }
.foot__contactos { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; font-family: var(--sans); font-size: 0.98rem; font-weight: 500; color: var(--tinta-mute); }
.foot__contactos a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tinta-mute); transition: color 0.2s; }
.foot__contactos a:hover { color: var(--acento-tinta); }
.foot__tag { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-mute); }
.foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
  padding: 1.5rem 0; border-top: 1px solid var(--crema-line);
  font-size: 0.92rem; font-weight: 500; color: var(--tinta-mute);
}

/* =========================================================================
   CONTROLES FLOTANTES
   ========================================================================= */
.floaters {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 90;
  display: flex; align-items: center; gap: 0.75rem;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.floaters.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.floaters__cta {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
  background: var(--acento); color: var(--noche); padding: 0.85rem 1.5rem; border-radius: 999px;
  box-shadow: 0 10px 24px -8px rgba(47, 44, 121, 0.4);
  transition: background 0.2s, opacity 0.25s ease;
}
.floaters__cta:hover { background: var(--acento-alt); }
.floaters.is-near-contacto .floaters__cta { opacity: 0; pointer-events: none; width: 0; padding: 0; overflow: hidden; }
.floaters__top {
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px;
  background: var(--noche); border: 1px solid var(--noche-line-2); color: var(--crema);
  box-shadow: 0 10px 24px -8px rgba(47, 44, 121, 0.32);
  transition: border-color 0.2s;
}
.floaters__top:hover { border-color: var(--acento); color: var(--acento); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px) {
  .topbar__info { display: none; }
  :root { --topbar-h: 5.2rem; }
  .topbar__inner { min-height: 5.2rem; }
  .brand__mark { height: 2.8rem; }
  .brand__text strong { font-size: 1.6rem; }
  .tira__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perfil { grid-template-columns: 1fr; }
  .perfil__plate { max-width: 26rem; }
  .nosotros { grid-template-columns: minmax(0, 1fr); }
  .proposito { grid-template-columns: 1fr; height: auto; }
  .proposito__foto { min-height: 12rem; }
  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
  /* Con 2 columnas, el borde izquierdo solo tiene sentido dentro de cada fila. */
  .stat-item:nth-child(2n) { border-left: 1px solid var(--noche-line); padding-left: 1.5rem; }
  .stat-item:nth-child(2n+1) { border-left: none; padding-left: 0; }
  .tira__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .serv__fotos, .serv__foto-suelta { width: 50%; }
}

@media (max-width: 860px) {
  .nav, .topbar__cta { display: none; }
  .topbar__right, .topbar__row { display: contents; }
  .topbar__toggle { display: flex; margin-left: auto; }
  .brand { border-right: none; padding-right: 0; }
  .topbar.is-open .nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--crema); border-bottom: 1px solid var(--crema-line);
  }
  .topbar.is-open .nav a, .topbar.is-open .nav__disciplinas-toggle {
    font-size: 1.05rem; display: block; width: 100%; text-align: left;
    padding: 1rem 1.5rem; border-top: 1px solid var(--crema-line);
  }
  /* En el menú, las disciplinas sí se listan una a una — es la navegación principal
     del sitio y perderlas dentro de la hamburguesa es fácil. El mismo panel del
     desplegable de escritorio se reutiliza aquí: solo cambia cómo se posiciona. */
  .nav__disciplinas {
    position: static; transform: none; width: auto; min-width: 0;
    background: none; border: none; border-radius: 0; box-shadow: none; padding: 0;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    display: flex; flex-direction: column;
  }
  .topbar.is-open .nav__disciplinas a {
    display: flex; padding: 0.75rem 1.5rem 0.75rem 2.25rem; font-size: 0.76rem; border-top: none;
  }
  .topbar.is-open .nav__disciplinas a:first-child { border-top: 1px solid var(--crema-line); }
  /* Por debajo de esto ya no queda ancho cómodo para que el texto rodee la foto sin
     apretarse (listas a 2 columnas incluidas): la foto pasa a ancho completo, arriba
     del texto — sigue quedando pegada al título porque así está en el HTML. */
  .serv__fotos, .serv--invertido .serv__fotos { float: none; width: 100%; margin: 0 0 1.75rem; }
  .serv__foto-suelta, .serv--invertido .serv__foto-suelta { float: none; width: 100%; margin: 0 0 1.5rem; aspect-ratio: 16 / 9; }
  .serv--paneles .serv__fila { grid-template-columns: 1fr; }
  .serv--paneles .serv__fila--dirigido { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .shell { padding: 0 1.15rem; }
  .hero { min-height: 0; }
  .hero__body { padding: 2rem 1.25rem 1.5rem; }
  .hero__rule { margin-bottom: 1.2rem; }
  .hero__title { white-space: normal; }
  .hero__lead { letter-spacing: 0.1em; margin: 1.1rem 0 1.5rem; }
  .hero__actions { gap: 0.8rem; }
  .hero__actions .btn { font-size: 0.95rem; padding: 0.8rem 1.15rem; white-space: nowrap; flex: 1 1 auto; justify-content: center; }
  .tira__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tira__item { padding: 0.6rem 0.5rem; gap: 0.5rem; }
  .tira__arrow { display: none; }
  .tira__icon { width: 2.6rem; height: 2.6rem; }
  .tira__icon svg { width: 1.3rem; height: 1.3rem; }
  .tira__label { font-size: 0.62rem; }
  .tira__mini { width: 10.5rem; }
  .brand__mark { height: 2.3rem; }
  .brand__text strong { font-size: 1.15rem; letter-spacing: 0.1em; }
  .brand__text small { font-size: 0.36rem; letter-spacing: 0.26em; margin-top: 0.35rem; }
  .serv__lista { columns: 1; }
  .serv__tarjetas { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .std__item { grid-template-columns: 2.2rem 1fr; }
  .std__item dd { grid-column: 1 / -1; }
  .stations { grid-template-columns: 1.6rem 1fr; column-gap: 1.25rem; }
  .stations::before { grid-column: 1; }
  .stations__dot { grid-column: 1; }
  .stations__item:nth-child(odd) .stations__content,
  .stations__item:nth-child(even) .stations__content { grid-column: 2; text-align: left; transform: translateY(10px); }
  .wizard { padding: 1.5rem; }
  .wizard__nav { flex-wrap: wrap; }
  .wizard__nav .btn { min-height: 44px; }
  .cierre { padding: 1.5rem; }
  .floaters { left: 1rem; bottom: 1rem; }
  .floaters__cta { padding: 0.75rem 1.25rem; font-size: 0.72rem; }
  .floaters__top { width: 2.5rem; height: 2.5rem; }
  .stats-bar__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .stat-item, .stat-item:nth-child(2n), .stat-item:nth-child(2n+1) { border-left: none; padding-left: 0; }
  .serv__fotos--con-dos { grid-template-columns: 1fr; }
  .serv__fotos--con-dos .serv__foto--grande { grid-column: 1; }
  .serv__fotos--con-dos .serv__foto:not(.serv__foto--grande) { aspect-ratio: 16 / 9; }
}

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}


/* =========================================================================
   REVELADOS AL HACER SCROLL — la página se arma a medida que se recorre
   (main.js añade .is-in con un IntersectionObserver). Sin JS o con movimiento
   reducido todo queda visible: .reveal solo oculta cuando hay observer activo
   (clase .js en <html>).
   ========================================================================= */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Retardo escalado por posición dentro de su grupo (tira, stats, tarjetas…). */
.js .reveal[data-retardo="1"] { transition-delay: 0.08s; }
.js .reveal[data-retardo="2"] { transition-delay: 0.16s; }
.js .reveal[data-retardo="3"] { transition-delay: 0.24s; }
.js .reveal[data-retardo="4"] { transition-delay: 0.32s; }
.js .reveal[data-retardo="5"] { transition-delay: 0.4s; }
.js .reveal--izq { transform: translateX(-26px); }
.js .reveal--der { transform: translateX(26px); }
.js .reveal--escala { transform: scale(0.96); }

/* Micro-interacciones: las fotos respiran al pasar el cursor, las tarjetas se
   levantan — la página responde en vez de quedar estática. */
.serv__foto img { transition: transform 0.6s var(--ease); }
.serv__foto:hover img { transform: scale(1.045); }
.serv__tarjeta { transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s; }
.serv__tarjeta:hover { transform: translateY(-3px); border-color: var(--acento); }
.porque__item { transition: color 0.2s; }
.porque__item:hover { color: var(--noche); }
.porque__item .ico { transition: transform 0.3s var(--ease); }
.porque__item:hover .ico { transform: scale(1.18) rotate(-6deg); }
.std__item { transition: background 0.25s; }
.std__item:hover { background: rgba(47, 44, 121, 0.04); }
.stat-item__icon .ico { transition: transform 0.35s var(--ease); }
.stat-item:hover .stat-item__icon .ico { transform: translateY(-3px) scale(1.1); }
.nosotros__link { transition: color 0.2s, gap 0.2s var(--ease); }
.nosotros__link:hover { color: var(--noche); gap: 0.75rem; }

/* =========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reg__row, .stations__dot, .stations__content { opacity: 1; transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  .serv__ico svg * { stroke-dasharray: none; stroke-dashoffset: 0; }
  .btn:active:not(:disabled) { transform: none; }
}

/* =========================================================================
   TASADOR INLINE — estilos del asistente integrado directamente en la sección
   ========================================================================= */
.tas-panel {
  position: relative;
  background: var(--noche-alt);
  border: 1px solid var(--noche-line-2);
  border-radius: 0.9rem;
  padding: 2.25rem 2rem;
  max-width: 720px;
  margin: 0 auto;
}

/* Ícono de tasación (casa + moneda) como marca de la herramienta, en la esquina
   libre del panel: el progreso ocupa la izquierda. */
.tas-ico { position: absolute; top: 1.5rem; right: 1.75rem; width: 2.7rem; height: 2.7rem; color: var(--acento); opacity: 0.95; }
.tas-ico svg { width: 100%; height: 100%; }

.tas-progress { display: flex; gap: 0.4rem; margin-bottom: 1.75rem; }
.tas-progress span { width: 1.5rem; height: 2px; background: var(--noche-line-2); transition: background 0.25s; }
.tas-progress span.is-active { background: var(--acento); }
.tas-progress span.is-done   { background: var(--crema);  }

.tas-step { display: none; }
.tas-step.is-active { display: block; }

.tas-step__title {
  font-size: 1.45rem; font-weight: 600; line-height: 1.25;
  margin-bottom: 1.35rem; color: var(--crema);
}

.tas-tipo-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 0.5rem; }
.tas-tipo-pick {
  font-family: var(--heading); font-size: 0.98rem; font-weight: 600; text-align: left;
  padding: 0.95rem 0.75rem 0.95rem 0; border-bottom: 1px solid var(--noche-line);
  color: var(--noche-mute);
  transition: color 0.2s, border-color 0.2s, padding-left 0.25s var(--ease);
}
.tas-tipo-pick:hover { color: var(--acento); padding-left: 0.4rem; }
.tas-tipo-pick.is-selected { color: var(--acento); font-weight: 700; border-bottom: 1px solid var(--acento); }

.tas-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 1.05rem; font-weight: 500; color: var(--crema); margin-top: 0.75rem; cursor: pointer; }
.tas-checkbox input { width: auto; flex: 0 0 auto; margin-top: 0.35rem; accent-color: var(--acento); }

.tas-volver { margin-right: auto; }
.field__opt { font-weight: 400; opacity: 0.7; }
.tas-nav { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid var(--noche-line); }

.tas-fase--procesando { text-align: center; padding: 3.5rem 1rem; }
.tas-fase--procesando p { color: var(--crema); }
.tas-procesando-nota { color: var(--noche-mute); font-size: 0.98rem; margin-top: 0.4rem; }

.tas-spinner {
  width: 34px; height: 34px; margin: 0 auto 1.35rem;
  border: 2px solid var(--noche-line-2); border-top-color: var(--acento); border-radius: 50%;
  animation: tas-spin 0.9s linear infinite;
}
@keyframes tas-spin { to { transform: rotate(360deg); } }

.tas-disclaimer {
  font-size: 0.95rem; font-weight: 600; color: #FF8F87;
  border-left: 2px solid var(--danger); padding: 0.3rem 0 0.3rem 0.9rem; margin-bottom: 1.75rem;
}

.tas-valor { margin-bottom: 1.75rem; }
.tas-valor__label { display: block; font-family: var(--sans); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--noche-mute); margin-bottom: 0.4rem; }
.tas-valor__num {
  display: block; font-family: var(--sans); font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1; color: var(--crema); font-variant-numeric: tabular-nums;
}
.tas-valor__rango { display: block; color: var(--noche-mute); font-size: 1.02rem; font-weight: 500; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }

.tas-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--noche-line); margin-bottom: 1.75rem; }
.tas-stat { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--noche-line); }
.tas-stat__label { display: block; font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--noche-mute); margin-bottom: 0.3rem; }
.tas-stat__value { font-family: var(--sans); font-weight: 700; color: var(--crema); font-variant-numeric: tabular-nums; }

.tas-detalle { margin-bottom: 1.75rem; }
.tas-detalle summary { cursor: pointer; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--acento); padding: 0.5rem 0; user-select: none; }
.tas-table-wrap { overflow-x: auto; }
.tas-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tas-table th, .tas-table td { text-align: left; padding: 0.55rem 0.5rem 0.55rem 0; border-bottom: 1px solid var(--noche-line); }
.tas-table th { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--noche-mute); border-bottom: 1px solid var(--noche-line-2); }
.tas-table tr.is-outlier { color: var(--noche-mute); text-decoration: line-through; }

.tas-acciones { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tas-resultado-cta  { font-size: 0.98rem; font-weight: 500; color: var(--noche-mute); }
.tas-resultado-meta { font-size: 0.95rem; font-weight: 500; color: var(--noche-mute); margin: 0.75rem 0 1.25rem; }

.tas-fase--insuficiente h3 { margin-bottom: 0.75rem; color: var(--crema); }
.tas-fase--insuficiente p { margin-bottom: 0.5rem; color: var(--crema); }

.tas-fase--error, .tas-fase--enviada { text-align: center; padding: 3rem 1rem; }
.tas-fase--error h3 { margin-bottom: 0.7rem; color: #FF8F87; }
.tas-fase--error p { color: var(--noche-mute); margin-bottom: 1.35rem; }
.tas-fase--enviada h3 { margin-bottom: 0.7rem; color: var(--acento); }
.tas-fase--enviada p { color: var(--noche-mute); margin-bottom: 1.35rem; }

.tasador__aviso { text-align: center; font-size: 0.92rem; font-weight: 500; color: #FFFFFF; margin-top: 1.25rem; }


.tas-combo { position: relative; }
.tas-combo input { padding-right: 1.75rem; }
.tas-combo__icon {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 0.75rem; color: var(--noche-mute); pointer-events: none;
  transition: transform 0.2s var(--ease), color 0.2s; line-height: 1;
}
.tas-combo.is-open .tas-combo__icon { transform: translateY(-50%) rotate(180deg); color: var(--acento); }

.tas-combo__list {
  position: absolute; z-index: 200; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--noche); border: 1px solid var(--noche-line-2); border-top: 2px solid var(--acento);
  list-style: none; margin: 0; padding: 0.25rem 0; max-height: 220px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--noche-line-2) transparent;
  animation: combo-open 0.18s var(--ease);
}
.tas-combo__list::-webkit-scrollbar { width: 4px; }
.tas-combo__list::-webkit-scrollbar-track { background: transparent; }
.tas-combo__list::-webkit-scrollbar-thumb { background: var(--noche-line-2); border-radius: 2px; }
@keyframes combo-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.tas-combo__list li { padding: 0.6rem 0.85rem; font-family: var(--body); font-size: 1.05rem; color: var(--noche-mute); cursor: pointer; transition: background 0.12s, color 0.12s; }
.tas-combo__list li:hover, .tas-combo__list li[aria-selected="true"] { background: rgba(212, 175, 55, 0.14); color: var(--acento); }
.tas-combo__list li mark { background: transparent; color: var(--acento); font-weight: 700; }
.tas-combo__list li.tas-combo__empty { color: var(--noche-mute); font-size: 0.95rem; font-style: italic; cursor: default; }
.tas-combo__list li.tas-combo__empty:hover { background: transparent; color: var(--noche-mute); }

/* Georreferenciación en tasador */
.tas-mapa-box {
  margin-bottom: 1.75rem;
  border: 1px solid var(--noche-line-2);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(15, 28, 48, 0.4);
}
.tas-mapa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.9rem;
  background: rgba(15, 28, 48, 0.9);
  border-bottom: 1px solid var(--noche-line);
}
.tas-mapa-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tas-mapa-tag {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acento);
}
.tas-mapa-coords {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--noche-mute);
  font-variant-numeric: tabular-nums;
}
.tas-mapa-btn {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--crema);
  background: rgba(184, 147, 88, 0.2);
  border: 1px solid var(--acento);
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.tas-mapa-btn:hover {
  background: var(--acento);
  color: var(--noche);
}
.tas-mapa-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 240px;
  overflow: hidden;
  background: var(--noche);
  cursor: pointer;
  text-decoration: none;
}
.tas-mapa-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.tas-mapa-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 48, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tas-mapa-overlay-badge {
  background: rgba(15, 28, 48, 0.9);
  color: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transform: translateY(4px);
  transition: transform 0.2s ease;
}
.tas-mapa-frame:hover .tas-mapa-overlay {
  opacity: 1;
}
.tas-mapa-frame:hover .tas-mapa-overlay-badge {
  transform: translateY(0);
}
.tas-mapa-frame:hover .tas-mapa-img {
  transform: scale(1.03);
}

@media (max-width: 600px) {
  .tas-panel { padding: 1.75rem 1.15rem; }
  .tas-tipo-picker, .tas-stats { grid-template-columns: 1fr; }
  .tas-nav { flex-wrap: wrap; }
  .tas-nav .btn { min-height: 44px; }
  .tas-table { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tas-spinner { animation-duration: 2.4s !important; }
  .tas-tipo-pick { transition: none; }
}