/**
 * FASE 17 — Landing comercial de la raíz.
 *
 * Comparte documento con la app del mapa, así que lo primero que hace es
 * deshacer el layout de pantalla completa que styles.css necesita para el
 * mapa. Sin esa reversión la landing se queda SIN SCROLL (styles.css pone
 * `body { overflow: hidden }` y `height: 100%`) y solo se ve el primer
 * viewport — la mitad del contenido legal quedaría inalcanzable.
 *
 * Reutiliza los tokens de marca de styles.css (--sole-primary, --ink,
 * --line, --accent-strong) para no inventar una paleta paralela.
 */

/* -------------------------------------------------------------------------
   Reversión del layout de pantalla completa, solo mientras se ve la landing.
   ------------------------------------------------------------------------- */

html[data-sole-view='landing'],
html[data-sole-view='landing'] body {
  height: auto;
  min-height: 100%;
  overflow: visible;
  background: #ffffff;
}

/* -------------------------------------------------------------------------
   Utilidades de accesibilidad.
   ------------------------------------------------------------------------- */

.sole-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;
}

/* Salto al contenido: invisible hasta que recibe foco por teclado. */
.sole-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--sole-primary, #00acd8);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.sole-skip:focus {
  left: 8px;
  top: 8px;
}

#soleLanding :focus-visible {
  outline: 2px solid var(--accent-strong, #007fa1);
  outline-offset: 3px;
  border-radius: 4px;
}

.landing-oculto {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Aviso de arranque fallido. Fuera de #soleLanding a propósito: en /app/ no
   hay landing a la que volver, y el usuario igual necesita saber qué pasó y
   tener un botón que reintente.
   ------------------------------------------------------------------------- */

/* En la LANDING el aviso va en el flujo normal: empuja el contenido por sí
   mismo, sin padding calculado. Es a prueba de su propia altura, que cambia
   con el ancho (73 px en escritorio, 124 px en móvil al partirse el texto);
   con `position: fixed` + un padding fijo siempre acababa encimando la barra
   del logo y la navegación. */
#soleErrorArranque {
  position: relative;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 14px 20px;
  background: #7f1d1d;
  color: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

#soleErrorArranque[hidden] {
  display: none;
}

#soleErrorArranque p {
  margin: 0;
  max-width: 60ch;
}

#soleReintentarArranque {
  padding: 9px 20px;
  border: 1.5px solid #ffffff;
  border-radius: 10px;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

#soleReintentarArranque:hover {
  background: rgba(255, 255, 255, 0.15);
}

#soleReintentarArranque:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* En la vista del MAPA no hay nada que empujar: `.app-shell` es
   `position: fixed; inset: 0` y taparía un aviso en flujo normal. Solo ahí
   se fija sobre el mapa. */
html:not([data-sole-view='landing']) #soleErrorArranque {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* -------------------------------------------------------------------------
   Estructura.
   ------------------------------------------------------------------------- */

#soleLanding {
  --landing-ancho: 1120px;
  color: var(--ink, #172026);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.7;
  /* El contenido nunca debe provocar scroll horizontal, ni con tablas ni
     con palabras largas en móvil. */
  overflow-x: hidden;
}

/* Solo `max-width`, NUNCA `height` aquí. Este selector lleva un id, así que
   su especificidad (1-0-1) gana a cualquier regla de componente por clase
   (0-1-1): al incluir `height: auto` anulaba el alto del logotipo, la imagen
   quedaba como flex item estirado y colapsaba a 0x0 — el logo desaparecía
   de la barra sin ningún error en consola. */
#soleLanding img {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   Barra superior.
   ------------------------------------------------------------------------- */

.landing-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line, #d8e0e6);
}

.landing-topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--landing-ancho);
  margin: 0 auto;
  padding: 12px 20px;
}

.landing-marca {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.landing-marca img {
  width: auto;
  height: 38px;
}

.landing-nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.landing-nav ul {
  display: flex;
  gap: 4px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}

.landing-nav ul a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink, #172026);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.landing-nav ul a:hover {
  background: rgba(0, 172, 216, 0.1);
  color: var(--accent-strong, #007fa1);
}

.landing-menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line, #d8e0e6);
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}

/* Hamburguesa dibujada con bordes: sin dependencia de la librería de
   iconos, que en la landing no se carga. */
.landing-menu-icono,
.landing-menu-icono::before,
.landing-menu-icono::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink, #172026);
  border-radius: 2px;
  content: '';
}

.landing-menu-icono::before {
  transform: translateY(-6px);
}

.landing-menu-icono::after {
  transform: translateY(4px);
}

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

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.landing-btn-primario {
  background: var(--sole-primary, #00acd8);
  color: #ffffff;
}

.landing-btn-primario:hover {
  background: var(--accent-strong, #007fa1);
}

.landing-btn-borde {
  border-color: var(--sole-primary, #00acd8);
  background: #ffffff;
  /* --accent-strong sobre blanco pasa AA; --sole-primary no lo haría en
     texto de este tamaño. */
  color: var(--accent-strong, #007fa1);
}

.landing-btn-borde:hover {
  background: rgba(0, 172, 216, 0.08);
}

.landing-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* -------------------------------------------------------------------------
   Contenido.
   ------------------------------------------------------------------------- */

.landing-main {
  max-width: var(--landing-ancho);
  margin: 0 auto;
  padding: 0 20px;
}

.landing-hero {
  padding: 72px 0 56px;
  max-width: 760px;
}

.landing-hero h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.landing-lead {
  margin: 20px 0 0;
  color: var(--muted, #64717c);
  font-size: clamp(16px, 2vw, 19px);
}

.landing-seccion {
  padding: 44px 0;
  border-top: 1px solid var(--line, #d8e0e6);
}

.landing-seccion h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.landing-seccion h3 {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.landing-seccion p {
  max-width: 72ch;
  margin: 0 0 12px;
}

.landing-titular {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.landing-nota {
  color: var(--muted, #64717c);
  font-size: 14px;
}

.landing-lista {
  max-width: 72ch;
  margin: 0;
  padding-left: 20px;
}

.landing-lista li {
  margin-bottom: 8px;
}

.landing-lista-enlaces {
  list-style: none;
  padding-left: 0;
}

.landing-seccion a {
  color: var(--accent-strong, #007fa1);
}

.landing-domicilio {
  font-style: normal;
  line-height: 1.8;
}

.landing-domicilio span {
  display: block;
}

.landing-pasos {
  max-width: 72ch;
  margin: 0 0 16px;
  padding-left: 22px;
}

.landing-pasos li {
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   Tarjetas.
   ------------------------------------------------------------------------- */

.landing-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.landing-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border: 1px solid var(--line, #d8e0e6);
  border-radius: 16px;
  background: #ffffff;
}

.landing-tarjeta h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.landing-tarjeta p {
  margin: 0;
  color: var(--muted, #64717c);
  font-size: 15px;
}

.landing-tarjeta .landing-btn {
  margin-top: auto;
  align-self: flex-start;
}

.landing-precio {
  color: var(--ink, #172026) !important;
  font-size: 26px;
  font-weight: 700;
}

.landing-periodo {
  color: var(--muted, #64717c);
  font-size: 14px;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Métodos de pago.
   ------------------------------------------------------------------------- */

.landing-metodos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.landing-metodo {
  padding: 10px 16px;
  border: 1px solid var(--line, #d8e0e6);
  border-radius: 999px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

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

@media (max-width: 860px) {
  .landing-menu-boton {
    display: block;
  }

  .landing-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 0 4px;
  }

  .landing-topbar-inner {
    flex-wrap: wrap;
  }

  .landing-nav[data-abierto='true'] {
    display: flex;
  }

  .landing-nav ul {
    flex-direction: column;
    margin: 0;
  }

  .landing-nav ul a {
    display: block;
    padding: 12px;
  }

  .landing-hero {
    padding: 48px 0 36px;
  }

  .landing-btn {
    width: 100%;
  }

  .landing-acciones .landing-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #soleLanding *,
  #soleLanding *::before,
  #soleLanding *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}