/* Lo que comparten las páginas de venta (la landing / y /precios) sobre base.css, en el modo claro de la marca. Cada página
   carga base.css + sitio.css + su propia hoja (inicio.css o precios.css); así /precios ya no arrastra la consola, el
   diagrama ni el tablero de la landing.
   Clases que trae:
     .ancho                         el ancho máximo del contenido con su margen
     .cabeza, .cabeza.despegada     barra pegajosa con fondo sólido; al bajar aparece su borde inferior (el JS pone .despegada)
     .cabeza-dentro, .secciones, .cabeza-acciones
     .seccion                       bloque con su aire arriba y abajo; entre dos seguidas, una raya fina
     .titulo-centrado, .texto-seccion, .dos-columnas
     .preguntas-rejilla, .lista-preguntas   preguntas frecuentes con <details>, la flecha en azul de marca
     .cierre-banda, .cierre-dentro, .cierre-acciones, .enlace-claro   banda azul final con un .boton.blanco
     .pie, .pie-dentro, .pie-marca, .pie-fuente
   Colores siempre con los tokens de base.css; nada de oscuros fijos, glow ni letra mono. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
main img { height: auto; }
.ancho { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--margen); }

/* --- barra --- */
/* Fondo sólido del color de la página (sin vidrio ni desenfoque); al despegar aparece el borde que la separa del contenido. */
.cabeza { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; background: var(--suelo); transition: border-color .25s; }
.cabeza.despegada { border-bottom-color: var(--linea); }
.cabeza-dentro { display: flex; align-items: center; gap: 28px; min-height: var(--barra); }
.cabeza .logotipo { flex-shrink: 0; }
.cabeza .logotipo img { height: 26px; width: auto; }
.secciones { display: flex; gap: 2px; margin-inline: auto; }
.secciones a { padding: 10px 13px; border-radius: 8px; color: var(--texto); font-weight: 600; text-decoration: none; transition: color .15s, background .15s; }
.secciones a:hover, .secciones a[aria-current="true"] { color: var(--marca); background: var(--elegido-fondo); }
.cabeza-acciones { display: flex; align-items: center; gap: 8px; }
.cabeza-acciones .boton { min-height: 44px; padding: 0 16px; font-size: 16px; }

/* --- secciones: el aire separa; entre dos seguidas, una raya decorativa (sin las líneas guía a los lados) --- */
.seccion { position: relative; padding-block: clamp(52px, 8vh, 96px); }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.titulo-centrado { margin-bottom: clamp(24px, 4vh, 44px); }
.titulo-centrado h2, .dos-columnas h2, .preguntas h2, .cierre-banda h2 { font-size: var(--t-titulo); line-height: 1.08; }
.texto-seccion { margin-top: 16px; max-width: 46ch; color: var(--texto); font-size: var(--t-frase); line-height: 1.45; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }

/* --- preguntas frecuentes --- */
.preguntas-rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 80px); }
.lista-preguntas { display: grid; gap: 8px; }
.lista-preguntas details { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); transition: border-color .15s; }
.lista-preguntas details[open], .lista-preguntas details:hover { border-color: var(--linea-fuerte); }
.lista-preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; color: var(--titulo);
                           font: 600 18px/1.3 var(--f-titulo); letter-spacing: -.01em; list-style: none; cursor: pointer; }
.lista-preguntas summary::-webkit-details-marker { display: none; }
/* La flecha en azul de marca sobre su fondo tonal: dice "se abre" sin depender del texto. */
.lista-preguntas summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 8px; transition: transform .25s var(--curva);
  background: var(--marca-tonal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23365B70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.lista-preguntas details[open] summary::after { transform: rotate(180deg); }
.lista-preguntas details p { max-width: 62ch; padding: 0 20px 18px; color: var(--texto); }

/* --- cierre: banda azul de marca con título blanco y un botón blanco (en la landing, "Mis parcelas" también va sobre azul) --- */
.cierre-banda { padding-block: clamp(56px, 10vh, 104px); background: var(--marca); color: #fff; }
.cierre-dentro { display: grid; justify-items: center; gap: 16px; text-align: center; }
.cierre-banda h2 { color: #fff; }
.cierre-banda p { max-width: 44ch; color: rgba(255, 255, 255, .9); font-size: var(--t-frase); line-height: 1.45; }
.cierre-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 8px; }
.enlace-claro { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.enlace-claro:hover { color: #fff; text-decoration-thickness: 2px; }
.cierre-banda :focus-visible { outline-color: #fff; }

/* --- pie --- */
.pie { padding-block: 56px 64px; border-top: 1px solid var(--linea); background: var(--superficie); }
.pie-dentro { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.pie-marca img { height: 23px; width: auto; }
.pie-marca p { margin-top: 12px; color: var(--texto-suave); }
.pie nav { display: grid; align-content: start; gap: 10px; }
.pie nav a { color: var(--texto); text-decoration: none; }
.pie nav a:hover { color: var(--marca); text-decoration: underline; }
.pie-fuente { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--linea); color: var(--texto-suave); font-size: var(--t-nota); }

/* --- iPad vertical --- */
@media (max-width: 1023px) {
  .secciones { display: none; }
  .cabeza-acciones { margin-left: auto; }
  .dos-columnas, .preguntas-rejilla { grid-template-columns: minmax(0, 1fr); }
  .pie-dentro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-marca { grid-column: 1 / -1; }
}
/* --- celular: en la barra solo cabe el logotipo y una acción; "Entrar" sigue en el pie --- */
@media (max-width: 743px) {
  .cabeza-dentro { gap: 12px; }
  .cabeza .logotipo img { height: 22px; }
  .cabeza-acciones .boton.texto, .cabeza-acciones .boton.contorno { display: none; }
  .pie-dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}