/* Landing pública al estilo de Claude: crema, titulares con serifa, líneas finas.
   Usa los tokens de styles.css (tema "claude"). Solo agrega dos tamaños de
   titular grandes, propios de una portada. */
.landing {
    --serif-titulo: "Tiempos Headline", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --t-portada: clamp(2.25rem, 5vw, 3.5rem);
    --t-seccion: clamp(1.5625rem, 3vw, 2.25rem);
    height: auto;
    background: var(--fondo);
    color: var(--tinta);
}
.landing h1, .landing h2 { font-family: var(--serif-titulo); font-weight: var(--p-normal); letter-spacing: -0.01em; }
.landing a { color: inherit; }
.l-contenedor { width: min(72rem, 100%); margin: 0 auto; padding: 0 var(--e-5); }
/* Al saltar desde el menú, el título no queda bajo la barra fija. */
.landing section[id] { scroll-margin-top: 4rem; }
.l-boton { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); padding: var(--e-3) var(--e-5); font-size: var(--t-3); }

/* Navegación */
.l-nav { position: sticky; top: 0; z-index: 10; background: var(--fondo); border-bottom: var(--linea) solid var(--borde); }
.l-nav-fila { display: flex; align-items: center; gap: var(--e-5); height: 4rem; }
.l-marca { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-5); text-decoration: none; }
.l-nav-enlaces { display: flex; gap: var(--e-5); font-size: var(--t-3); }
.l-nav-enlaces a, .l-enlace-sesion, .l-pie a { text-decoration: none; color: var(--gris); }
.l-nav-enlaces a:hover, .l-enlace-sesion:hover, .l-pie a:hover { color: var(--tinta); }
.l-nav .l-boton { padding: var(--e-2) var(--e-4); }

/* Selector de tema: ChatGPT (claro), Oscuro y Claude (crema), como en Ajustes */
.l-temas { display: flex; gap: var(--e-1); padding: var(--e-1); background: var(--superficie); border-radius: 999px; }
.l-temas button { font: inherit; font-size: var(--t-1); padding: var(--e-1) var(--e-3); border: var(--linea) solid transparent; border-radius: 999px; background: none; color: var(--gris); cursor: pointer; }
.l-temas button[aria-pressed="true"] { background: var(--fondo); color: var(--tinta); border-color: var(--borde); }

/* Portada */
.l-portada { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--e-7); padding-top: var(--e-7); padding-bottom: var(--e-7); }
.l-portada h1 { font-size: var(--t-portada); line-height: 1.08; margin: 0 0 var(--e-5); }
.l-bajada { font-size: var(--t-4); color: var(--gris); line-height: 1.6; margin: 0 0 var(--e-5); max-width: 34rem; }
.l-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.l-nota { margin: var(--e-3) 0 0; font-size: var(--t-2); }
.l-escena { width: min(26rem, 100%); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }

/* Banda de modelos */
.l-banda { border-top: var(--linea) solid var(--borde); border-bottom: var(--linea) solid var(--borde); padding: var(--e-6) 0; text-align: center; }
.l-banda-titulo { margin: 0 0 var(--e-2); color: var(--gris); font-size: var(--t-3); }
.l-modelos { margin: 0; font-size: var(--t-5); }

/* Secciones */
.l-seccion { padding-top: var(--e-7); padding-bottom: var(--e-7); }
.l-seccion h2 { font-size: var(--t-seccion); margin: 0 0 var(--e-6); }
.l-funciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-6); }
.l-funciones article { border-top: var(--linea) solid var(--borde); padding: var(--e-4) 0 var(--e-6); }
.l-funciones h3 { margin: 0 0 var(--e-2); font-size: var(--t-4); font-weight: var(--p-medio); }
.l-funciones p { margin: 0; color: var(--gris); line-height: 1.6; }

/* Para negocios */
.l-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: start; border-top: var(--linea) solid var(--borde); }
.l-lista { margin: 0 0 var(--e-5); padding-left: var(--e-5); display: grid; gap: var(--e-2); line-height: 1.5; }
.l-codigo { margin: 0; padding: var(--e-5); background: var(--superficie); border: var(--linea) solid var(--borde); border-radius: var(--radio); font: var(--t-2)/1.6 var(--mono); overflow-x: auto; }

/* Planes: reutiliza las tarjetas de «Mejora tu plan» */
#planes { border-top: var(--linea) solid var(--borde); }
#planes h2 { text-align: center; }

/* Preguntas frecuentes */
.l-faq { border-top: var(--linea) solid var(--borde); max-width: 48rem; }
.l-faq details { border-bottom: var(--linea) solid var(--borde); }
.l-faq summary { cursor: pointer; padding: var(--e-4) 0; font-size: var(--t-4); font-weight: var(--p-medio); }
.l-faq details p { margin: 0 0 var(--e-4); color: var(--gris); line-height: 1.6; }

/* Cierre */
.l-cierre { text-align: center; padding-top: var(--e-7); padding-bottom: var(--e-7); border-top: var(--linea) solid var(--borde); }
.l-cierre h2 { font-size: var(--t-portada); margin: 0 0 var(--e-5); }

/* Menús desplegables (idioma y pie): <details> sin JavaScript para abrirse */
.l-idioma, .l-desplegable { position: relative; }
.l-idioma > summary, .l-desplegable > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--e-2); }
.l-idioma > summary::-webkit-details-marker, .l-desplegable > summary::-webkit-details-marker { display: none; }
.l-idioma > summary { padding: var(--e-1) var(--e-2); border-radius: var(--radio); font-size: var(--t-2); font-weight: var(--p-medio); }
.l-idioma > summary:hover, .l-idioma[open] > summary { background: var(--superficie); }
.l-idioma img, .l-menu img { border-radius: 2px; flex: none; }
.l-menu { position: absolute; z-index: 20; min-width: 13rem; display: grid; padding: var(--e-2); background: var(--fondo); border: var(--linea) solid var(--borde); border-radius: var(--radio-caja); }
.l-menu-idiomas { top: calc(100% + var(--e-1)); right: 0; max-height: 70vh; overflow-y: auto; }
.l-menu-arriba { bottom: calc(100% + var(--e-1)); right: 0; }
.l-menu > a, .l-menu > button { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--radio); background: none; color: var(--tinta); font: inherit; font-size: var(--t-3); text-align: left; text-decoration: none; cursor: pointer; }
.l-menu > a:hover, .l-menu > button:hover, .l-menu > [aria-checked="true"] { background: var(--superficie); }
.l-menu > a[hidden] { display: none; }

/* Pie: filas separadas por una línea, como la referencia */
.l-pie { border-top: var(--linea) solid var(--borde); font-size: var(--t-2); }
.l-pie-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); padding: var(--e-5) 0; border-bottom: var(--linea) solid var(--borde); }
.l-pie-fila:last-child { border-bottom: 0; }
.l-pie-explorar strong { font-size: var(--t-3); font-weight: var(--p-fuerte); }
.l-pie-explorar a { text-decoration: none; }
.l-desplegable > summary { padding: var(--e-2) var(--e-4); border: var(--linea) solid var(--borde); border-radius: var(--radio); font-size: var(--t-2); color: var(--tinta); }
.l-desplegable > summary::after { content: ""; width: 0.4rem; height: 0.4rem; margin-left: var(--e-2); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.l-desplegable[open] > summary { background: var(--superficie); }
.l-desplegable-grande > summary { padding: var(--e-3) var(--e-4); font-weight: var(--p-medio); }
.l-pie-marca .l-marca { font-size: var(--t-5); padding-right: var(--e-4); border-right: var(--linea) solid var(--borde); }
.l-pie-lema { max-width: 20rem; line-height: 1.5; }
.l-redes { display: flex; gap: var(--e-4); }
.l-redes a { color: var(--gris); display: inline-flex; }
.l-redes a:hover { color: var(--tinta); }
/* Los íconos de redes son de un color: se pintan con el color del texto. */
.icono-red { width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.l-pago { padding: var(--e-1) var(--e-3); border: var(--linea) solid var(--borde); border-radius: var(--radio); font-size: var(--t-1); font-weight: var(--p-fuerte); }
.l-pie-legal { font-size: var(--t-1); }

/* Textos legales */
.l-dialogo-legal { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: var(--e-5); overflow-y: auto; }
.l-dialogo-legal h2 { margin: 0; font-size: var(--t-5); }
.l-dialogo-legal .planes-cabecera { align-items: center; margin-bottom: var(--e-4); }

@media (max-width: 760px) {
    .l-nav-enlaces, .l-enlace-sesion { display: none; }
    .l-nav-fila { gap: var(--e-3); }
    .l-temas button { padding: var(--e-1) var(--e-2); }
    .l-pie-marca .l-marca { border-right: 0; }
    .l-menu-arriba { right: auto; left: 0; }
    .l-nav .l-boton { display: none; }
    .l-portada, .l-dos { grid-template-columns: 1fr; gap: var(--e-6); }
    .l-funciones { grid-template-columns: 1fr; }
    .l-escena { width: min(18rem, 100%); grid-row: 1; }
}