por semántica — dt y dd emparejados —, y
eso los aislaba: "Permisos peligrosos" ocupa dos líneas donde "Idiomas"
ocupa una, así que el 0 quedaba un renglón por debajo del 6 y la fila de
cifras salía escalonada. Con subgrid los
heredan las dos filas de la
rejilla madre, la altura de la fila de etiquetas la marca la más alta de
todas, y las cuatro cifras se alinean. Un navegador sin subgrid vuelve al
apilado de antes, que es feo pero legible. */
.datos > div {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
gap: 7px;
}
.datos dt {
font-family: var(--sora);
font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
color: var(--ink-faint);
}
.datos dd {
font-family: var(--sora);
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
font-weight: 400; letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.boton {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px; border-radius: 11px;
background: var(--acento); color: var(--void);
font-size: .95rem; font-weight: 600; text-decoration: none;
transition: filter .2s ease, transform .2s ease;
}
.boton:hover { filter: brightness(1.09); transform: translateY(-1px); }
.boton svg { width: 17px; height: 17px; }
/* La fila de botones de una ficha. Existe desde que hay dos: el que lleva al
producto y el que lleva a su documento legal. */
.app__botones { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
/* El legal es el segundo botón y tiene que parecerlo. Dos botones con el mismo
peso no dicen a dónde ir primero, y la política de privacidad, por obligatoria
que sea, no es la razón por la que alguien llega a la ficha. */
.boton--tenue {
background: transparent;
color: var(--ink-soft);
border: 1px solid var(--linea-viva);
font-weight: 500;
}
.boton--tenue:hover { color: var(--ink); border-color: var(--acento); filter: none; }
.apps__vacio {
color: var(--ink-faint);
font-size: .95rem;
border-left: 2px solid var(--linea-viva);
padding-left: 17px;
max-width: 56ch;
}
/* ------------------------------------------------------------
Contacto
------------------------------------------------------------ */
.contacto {
padding-top: clamp(80px, 11vh, 140px);
padding-bottom: clamp(90px, 13vh, 160px);
display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
border-top: 1px solid var(--linea);
}
.contacto__lede { color: var(--ink-soft); max-width: 48ch; }
.contacto__mail {
margin-top: 10px;
font-family: var(--sora);
font-size: clamp(1.3rem, 3.4vw, 2.1rem);
font-weight: 400; letter-spacing: -.025em;
color: var(--acento-ap); text-decoration: none;
border-bottom: 1px solid var(--linea-viva);
padding-bottom: 5px;
transition: border-color .25s ease;
}
.contacto__mail:hover { border-bottom-color: var(--acento); }
/* ------------------------------------------------------------
Pie
------------------------------------------------------------ */
.pie {
max-width: var(--canal);
margin: 0 auto;
padding: 30px var(--margen) 44px;
border-top: 1px solid var(--linea);
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px;
}
.pie__marca { font-family: var(--sora); font-size: .98rem; font-weight: 500; letter-spacing: -.01em; }
.pie__enlaces { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-right: auto; }
.pie__enlaces a { font-size: .9rem; color: var(--ink-soft); text-decoration: none; transition: color .2s ease; }
.pie__enlaces a:hover { color: var(--ink); }
.pie__legal {
font-family: var(--sora);
font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-faint);
}
/* ------------------------------------------------------------
Anchos estrechos
------------------------------------------------------------ */
@media (max-width: 900px) {
.raiz { grid-template-columns: 1fr; }
.fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sobre { min-height: 0; padding-top: 84px; padding-bottom: 84px; }
}
/* La barra es lo primero que se rompe al estrechar, y la lección ya está
aprendida en esforia.app: lo que no puede pasar es que se quede vacía. Se
va el nombre junto al glifo, y se va el código de idioma — el globo por sí
solo ya dice qué hace ese botón. Los tres destinos no se tocan. */
@media (max-width: 640px) {
.nav { gap: 8px; }
.nav__word { display: none; }
.nav__links { gap: 0; }
.nav__links a { padding: 8px 9px; font-size: .86rem; }
.lang__btn { padding: 7px 9px; }
.lang__codigo { display: none; }
}
/* Por debajo de 375px la barra no cabía: a 320 el botón del idioma terminaba
44px fuera de la pantalla, y a 360 todavía 4. De esos, 116 se los llevaba
"Sobre nosotros" él solo, así que pasa a "Nosotros" y el resto se aprieta.
Los tres destinos y el idioma se quedan — una barra que pierde botones al
estrechar es justo el fallo que hubo que arreglar en esforia.app. */
@media (max-width: 400px) {
/* Dos retratos de 4:5 en paralelo por debajo de 400px dejan cada cara en
unos 160px de ancho. Se apilan. */
.fichas { grid-template-columns: 1fr; }
.nav { padding-inline: 16px; }
.nav-largo { display: none; }
.nav-corto { display: inline; }
.nav__links a { padding: 8px 7px; font-size: .82rem; }
.lang__btn { padding: 7px 7px; }
}
/* Móvil apaisado. Con 360px de alto, el inicio metía eyebrow, nombre, tagline
y flecha en la misma pantalla y dejaba 14px entre las dos últimas: no
llegaban a solaparse, pero se leía apelotonado.
La condición lleva `orientation` además de la altura, y no un `max-height` a
secas: un móvil vertical con el teclado abierto también es bajo, y ahí esta
compresión no pinta nada. Es la misma trampa que ya documenta la app. */
@media (orientation: landscape) and (max-height: 540px) {
.inicio { padding-top: calc(var(--alto-nav) + 10px); padding-bottom: 54px; }
.inicio__eyebrow { margin-bottom: 12px; }
.inicio__nombre { font-size: clamp(2.4rem, 8.5vw, 5rem); }
.inicio__tagline { margin-top: 14px; font-size: 1rem; max-width: 46ch; }
.inicio__cue { bottom: 14px; }
.inicio__cue svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
/* El nombre aparece entero, la cascada no cae y el cursor no parpadea. Lo
que se pierde es el efecto; lo que se lee es idéntico. */
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
.inicio__tagline, .inicio__cue, .raiz__parte, .app, .marca-cierre, .ficha {
opacity: 1 !important;
transform: none !important;
}
.nombre__cursor { display: none; }
}
/* ============================================================
La página legal de una app: /legal/
Un documento, no una sección de la web. Nadie llega aquí a pasearse: llega
desde una ficha de Play o desde el botón de una ficha, a comprobar una cosa
concreta. Así que ancho de lectura, títulos numerables y nada que se revele
al pasar — todo el texto, desde el primer instante.
============================================================ */
.legal {
max-width: 74ch;
margin: 0 auto;
padding: calc(var(--alto-nav) + 48px) var(--margen) 96px;
}
.legal__langs {
display: inline-flex;
gap: 4px;
padding: 4px;
margin-bottom: 30px;
border: 1px solid var(--linea);
border-radius: 11px;
background: var(--sup);
}
.legal__lang {
appearance: none; border: 0; background: transparent;
color: var(--ink-soft); font: inherit; font-size: .85rem;
padding: 7px 13px; border-radius: 8px; cursor: pointer;
transition: background .18s ease, color .18s ease;
}
.legal__lang:hover { color: var(--ink); }
.legal__lang.is-on { background: var(--sup-2); color: var(--ink); font-weight: 600; }
.legal__eyebrow {
font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-faint); margin-bottom: 10px;
}
.legal__title {
font-family: var(--sora); font-weight: 600; letter-spacing: -.02em;
font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2;
margin-bottom: 36px;
}
.legal__section { margin-bottom: 34px; }
.legal__section h2 {
font-family: var(--sora); font-weight: 600; letter-spacing: -.01em;
font-size: 1.16rem; line-height: 1.35;
margin-bottom: 12px;
/* La barra a la izquierda separa una sección de la siguiente sin una línea
que cruce la página: en un documento largo, las reglas horizontales lo
trocean y hacen perder el hilo. */
padding-left: 15px;
border-left: 2px solid var(--acento);
}
.legal__section p, .legal__section ul { padding-left: 17px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal p + p, .legal ul { margin-top: 13px; }
.legal ul { padding-left: 34px; }
.legal li { margin-bottom: 7px; }
.legal__cargando { color: var(--ink-faint); }
.legal a { color: var(--acento-ap); }
/* En un móvil la barra de la izquierda se come el ancho de lectura, que es lo
único que esta página tiene que proteger. */
@media (max-width: 560px) {
.legal__section h2 { padding-left: 12px; }
.legal__section p, .legal__section ul { padding-left: 0; }
.legal ul { padding-left: 20px; }
}