/* ==========================================================================
   GEO LANDINGS (pageGenerator V2 — servicio + ubicación)
   ========================================================================== */

/* --- Breadcrumb --- */
.geo-breadcrumb {
  padding-top: 1.4rem;
}

.geo-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--dt-text-soft);
}

.geo-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.geo-breadcrumb li + li::before {
  content: "\203A";
  color: var(--dt-text-soft);
}

.geo-breadcrumb a {
  color: var(--dt-text-muted);
  text-decoration: none;
}

.geo-breadcrumb a:hover,
.geo-breadcrumb a:focus-visible {
  color: var(--primario);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.geo-breadcrumb [aria-current="page"] {
  color: var(--dt-text);
}

/* --- Hero: hereda dt-page-hero; ajuste fino del alto --- */
.geo-hero.dt-page-hero {
  padding-top: 2.6rem;
}

/* --- Cards genéricas (qué incluye / para quién) --- */
.geo-card {
  height: 100%;
  padding: 1.6rem 1.5rem;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: 20px;
  box-shadow: var(--dt-shadow-soft);
}

.geo-card i {
  display: inline-flex;
  margin-bottom: 0.7rem;
  color: var(--primario);
  font-size: 1.45rem;
}

.geo-card h3 {
  margin-bottom: 0.55rem;
  color: var(--dt-text);
  font-size: 1.06rem;
  font-weight: 800;
}

.geo-card p {
  margin: 0;
  color: var(--dt-text-muted);
  font-size: 0.94rem;
  line-height: 1.7;
}

/* --- Bloque local de valor --- */
.geo-local__panel {
  padding: 2rem 1.8rem;
  background: var(--dt-surface-soft);
  border: 1px solid var(--dt-border);
  border-radius: 24px;
}

.geo-local__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.geo-local__panel ul li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  color: var(--dt-text-muted);
  line-height: 1.7;
}

.geo-local__panel ul li i {
  margin-top: 0.2rem;
  color: var(--primario);
}

/* --- Servicios complementarios en la misma ubicación --- */
.geo-related a.geo-card {
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.geo-related a.geo-card:hover,
.geo-related a.geo-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--dt-shadow-strong);
}

.geo-related a.geo-card .geo-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  color: var(--primario);
  font-weight: 700;
  font-size: 0.92rem;
}

/* --- FAQ (accordion Bootstrap con la piel del sitio) --- */
.geo-accordion .accordion-item {
  margin-bottom: 0.85rem;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: 16px;
  overflow: hidden;
}

.geo-accordion .accordion-button {
  padding: 1.05rem 1.25rem;
  color: var(--dt-text);
  font-weight: 700;
  background: transparent;
  box-shadow: none;
}

.geo-accordion .accordion-button:not(.collapsed) {
  color: var(--primario);
  background: transparent;
}

.geo-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: var(--dt-border-strong);
}

.geo-accordion .accordion-body {
  padding: 0 1.25rem 1.15rem;
  color: var(--dt-text-muted);
  line-height: 1.75;
}

/* --- Responsive --- */
@media (max-width: 767.98px) {
  .geo-local__panel {
    padding: 1.5rem 1.2rem;
  }

  .geo-hero.dt-page-hero {
    padding-top: 1.8rem;
  }
}

/* --- Variación por tipo de bloque -------------------------------------------
   Las tres secciones con tarjetas se veían idénticas y la página resultaba
   monótona. Cada una recibe ahora su propio tratamiento: las prestaciones son
   una lista limpia, los casos de uso van sobre fondo tenue y los servicios
   complementarios se leen como tarjetas de navegación.                       */

/* "Qué incluye": tarjeta con tinte propio — se distingue del fondo y tambien
   de las tarjetas blancas con sombra de los servicios complementarios. Sin
   caja se veian flotando sobre el fondo claro y la seccion parecia sin
   terminar (reportado en produccion). */
.geo-includes .geo-card {
  padding: 1.3rem 1.35rem;
  background: rgba(7, 134, 173, 0.085);
  border: 1px solid rgba(7, 134, 173, 0.24);
  border-radius: 18px;
  box-shadow: none;
}

.geo-includes .geo-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.85rem;
  font-size: 1.1rem;
  color: var(--primario);
  background: rgba(7, 134, 173, 0.09);
  border-radius: 12px;
}

.geo-includes .geo-card h3 {
  font-size: 1rem;
}

/* "Casos típicos" / "Para quién": banda continua sobre fondo tenue */
.geo-cases {
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
  background: var(--dt-surface-soft);
  border-top: 1px solid var(--dt-border);
  border-bottom: 1px solid var(--dt-border);
}

.geo-cases .geo-card {
  padding: 1.25rem 1.3rem;
  background: var(--dt-page-bg-strong);
  box-shadow: none;
}

.geo-cases .geo-card i {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.geo-cases .geo-card h3 {
  font-size: 0.99rem;
}

/* Servicios complementarios: tarjetas de navegación, más aireadas */
.geo-related .geo-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.45rem;
}

.geo-related .geo-card p {
  flex: 1;
}

/* --- Ritmo visual ------------------------------------------------------------
   Las páginas madre alternan secciones claras con una oscura y eso les da
   terminación; sin esa alternancia la landing se lee plana. El bloque local
   —lo que hace que la página exista— toma el fondo oscuro del sistema.      */
.geo-local {
  background: linear-gradient(135deg, #050420 0%, #0b1434 100%);
  color: var(--white);
}

.geo-local .dt-title,
.geo-local .dt-title .text-primario {
  color: #ffffff;
}

.geo-local .dt-title .dt-gradient-text {
  background: linear-gradient(90deg, #4EC3E0 0%, #FFDF49 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.geo-local .dt-eyebrow {
  color: var(--cuarto);
  background: rgba(255, 223, 73, 0.12);
  border-color: rgba(255, 223, 73, 0.28);
}

.geo-local .dt-text {
  color: rgba(226, 232, 240, 0.82);
}

.geo-local .geo-local__panel {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(2px);
}

.geo-local .geo-local__panel ul li {
  color: rgba(226, 232, 240, 0.84);
}

.geo-local .geo-local__panel ul li strong {
  color: #ffffff;
}

.geo-local .geo-local__panel ul li i {
  color: #9ee7fb;
}

.geo-local .geo-local__panel ul li a {
  color: #9ee7fb;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* La banda de casos queda inmediatamente después: se separa con un tono propio */
.geo-cases {
  background: var(--dt-page-bg-strong);
}

/* --- Accesibilidad -----------------------------------------------------------
   El azul de marca sobre la tarjeta blanca da 4,13:1 y el mínimo AA para texto
   pequeño es 4,5:1. Solo en estos enlaces chicos se usa un tono un punto más
   oscuro (5,62:1 sobre la tarjeta): el resto del sitio conserva el primario. */
.geo-related a.geo-card .geo-card__link,
.geo-hub__card ul li a {
  color: #066F90;
}

[data-theme="dark"] .dt-page .geo-related a.geo-card .geo-card__link,
[data-theme="dark"] .dt-page .geo-hub__card ul li a {
  color: #9ee7fb;
}

/* --- Modo oscuro del fondo -----------------------------------------------
   La regla que oscurece el fondo del sitio vive dentro del CSS de cada página
   (google-ads.css, seo.css, index.css…). Las landings del generador no cargan
   ninguno de esos archivos, así que en oscuro el fondo se quedaba claro
   mientras el texto pasaba a blanco: contraste 1,02:1, ilegible. Se replica
   acá con los mismos valores. */
[data-theme="dark"] body.bg-mesh-gradient {
  background:
    radial-gradient(at 18% 99%, rgba(7, 134, 173, 0.16) 0, transparent 50%),
    radial-gradient(at 98% 8%, rgba(69, 164, 194, 0.14) 0, transparent 44%),
    radial-gradient(at 79% 82%, rgba(255, 223, 73, 0.08) 0, transparent 46%),
    linear-gradient(180deg, #050420 0%, #080823 54%, #050420 100%);
  background-color: #050420;
}


/* --- Modo oscuro de los componentes ------------------------------------------
   El sitio define su modo oscuro dentro del CSS de cada página, así que las
   landings del generador no heredaban nada: en oscuro los títulos y eyebrows
   quedaban en tono claro-sobre-claro. Se resuelve con los tokens globales
   --dt-*, acotado a .geo-landing-page para no tocar el resto del sitio.      */
[data-theme="dark"] .geo-landing-page .dt-title,
[data-theme="dark"] .geo-landing-page .dt-page-hero__title,
[data-theme="dark"] .geo-landing-page .geo-card h3,
[data-theme="dark"] .geo-landing-page .geo-hub__card h3 {
  color: var(--dt-text);
}

[data-theme="dark"] .geo-landing-page .dt-text,
[data-theme="dark"] .geo-landing-page .dt-page-hero__lead,
[data-theme="dark"] .geo-landing-page .geo-card p,
[data-theme="dark"] .geo-landing-page .dt-proof-strip__intro p {
  color: var(--dt-text-muted);
}

[data-theme="dark"] .geo-landing-page .dt-eyebrow {
  color: #9ee7fb;
  background: rgba(158, 231, 251, 0.1);
  border-color: rgba(158, 231, 251, 0.24);
}

[data-theme="dark"] .geo-landing-page .dt-eyebrow--accent {
  color: var(--cuarto);
  background: rgba(255, 223, 73, 0.12);
  border-color: rgba(255, 223, 73, 0.28);
}

/* Tarjetas: sobre fondo oscuro el tinte claro no sirve como superficie */
[data-theme="dark"] .geo-landing-page .geo-card,
[data-theme="dark"] .geo-landing-page .geo-hub__card {
  background: var(--dt-surface);
  border-color: var(--dt-border);
}

[data-theme="dark"] .geo-landing-page .geo-includes .geo-card {
  background: rgba(158, 231, 251, 0.06);
  border-color: rgba(158, 231, 251, 0.16);
}

[data-theme="dark"] .geo-landing-page .geo-includes .geo-card i {
  color: #9ee7fb;
  background: rgba(158, 231, 251, 0.12);
}

[data-theme="dark"] .geo-landing-page .geo-cases {
  background: var(--dt-page-bg-strong);
  border-color: var(--dt-border);
}

/* Breadcrumb, FAQs y franja de logos */
[data-theme="dark"] .geo-landing-page .geo-breadcrumb a,
[data-theme="dark"] .geo-landing-page .geo-breadcrumb [aria-current="page"] {
  color: var(--dt-text-muted);
}

[data-theme="dark"] .geo-landing-page .geo-accordion .accordion-item {
  background: var(--dt-surface);
  border-color: var(--dt-border);
}

[data-theme="dark"] .geo-landing-page .geo-accordion .accordion-button {
  color: var(--dt-text);
  background: transparent;
}

[data-theme="dark"] .geo-landing-page .geo-accordion .accordion-button:not(.collapsed) {
  color: #9ee7fb;
}

[data-theme="dark"] .geo-landing-page .geo-accordion .accordion-body {
  color: var(--dt-text-muted);
}

[data-theme="dark"] .geo-landing-page .dt-logo-card {
  background: var(--dt-surface);
  border-color: var(--dt-border);
}

/* El hero en oscuro tiene su propio degradado, más claro que el resto de la
   página: el muted y el celeste del eyebrow se quedaban en 3,7:1. */
[data-theme="dark"] .geo-landing-page .dt-page-hero__lead {
  color: rgba(237, 242, 248, 0.96);
}

[data-theme="dark"] .geo-landing-page .geo-hero .dt-eyebrow,
[data-theme="dark"] .geo-landing-page .geo-hub-hero .dt-eyebrow {
  color: #cdf1fb;
  background: rgba(205, 241, 251, 0.12);
  border-color: rgba(205, 241, 251, 0.26);
}

/* El hero de landing.css lleva un degradado blanco fijo (rgba(255,255,255,.98))
   que en oscuro dejaba el título claro sobre fondo claro. Se reemplaza por el
   equivalente oscuro, manteniendo el halo celeste de la esquina. */
[data-theme="dark"] .geo-landing-page .dt-page-hero {
  background:
    radial-gradient(circle at top left, rgba(69, 164, 194, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(8, 8, 35, 0.98) 0%, rgba(5, 4, 32, 0.98) 100%);
}

/* El eyebrow del sistema usa el primario sobre un fondo tenue y queda en
   3,2:1 para texto chico en mayúsculas. Acotado a las landings se usa el tono
   más oscuro (mismo criterio que los enlaces de tarjeta). */
.geo-landing-page .dt-eyebrow {
  color: #066F90;
}

.geo-landing-page .geo-local .dt-eyebrow,
.geo-landing-page .dt-prefooter-cta .dt-eyebrow,
[data-theme="dark"] .geo-landing-page .dt-eyebrow {
  color: inherit;
}

.geo-landing-page .geo-local .dt-eyebrow {
  color: var(--cuarto);
}

.geo-landing-page .dt-prefooter-cta .dt-eyebrow--accent {
  color: var(--cuarto);
}

[data-theme="dark"] .geo-landing-page .dt-eyebrow {
  color: #9ee7fb;
}

[data-theme="dark"] .geo-landing-page .geo-local .dt-eyebrow,
[data-theme="dark"] .geo-landing-page .dt-prefooter-cta .dt-eyebrow--accent {
  color: var(--cuarto);
}