/* ============================================================================ Alio · Sección 5 — Premium, pasarela y descarga ---------------------------------------------------------------------------- Tres cosas en una sección porque son un solo momento de decisión: qué cuesta, cómo se paga y por dónde se empieza. Tres decisiones que no son estéticas: 1. DOS TARJETAS, no una. Antes había una sola tarjeta de precio y, más abajo, dos listas sueltas; comparar —que es la pregunta que trae aquí al visitante— le tocaba a él, saltando entre columnas. 2. NINGÚN BOTÓN APAGADO. El candado de «Muy pronto» se retiró: el botón lleva a crear la cuenta, que es el primer paso real de la suscripción y ya funciona. Cuando exista la pasarela, apuntará a ella. Un botón que parece funcionar y no funciona sigue siendo peor que no tenerlo — la regla no cambió, cambió que ahora hay a dónde ir. 3. La copia nombra el cupo mensual de Alio AI, Y CON SU NÚMERO. Prometer «sin límites» y que el usuario se tope con un contador es el defecto que la app ya corrigió (F63-25). Tampoco se dice «durante la Beta»: eso insinúa un tope temporal, y son las 50 del plan. ========================================================================== */ .plan { position: relative; /* Transparente a propósito: el papel lo pone y así el campo de partículas se sigue viendo mientras el cerebro se apaga (css/brain.css). */ background: transparent; color: var(--p-text); padding: clamp(72px, 11vh, 128px) 0 0; border-top: 1px solid var(--hairline); } .plan__inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } /* --- Cabecera ------------------------------------------------------------- */ .plan__head { text-align: center; max-width: 620px; margin: 0 auto; } .plan__kicker { display: block; font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--p-sub); } .plan__title { margin-top: var(--sp-12); font-size: var(--text-h2); font-weight: 600; line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--p-text); text-wrap: balance; } .plan__sub { margin-top: var(--sp-16); font-size: var(--text-lg); line-height: 1.5; color: var(--p-sub); text-wrap: pretty; } /* --- Los dos planes ------------------------------------------------------- Uno al lado del otro. Antes había UNA tarjeta de precio y, más abajo, dos listas sueltas —«qué abre Premium» y «qué es gratis»—, así que la comparación, que es justo la pregunta que trae aquí al visitante, la tenía que hacer él saltando entre columnas. Se apilan pronto (a 860 px) y no a 720: dos tarjetas con ocho renglones cada una se estrechan mucho antes de que la ventana llegue a tamaño de móvil, y ahí el texto empieza a partirse en palabras sueltas. ------------------------------------------------------------------------ */ .planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); align-items: start; } @media (max-width: 860px) { .planes { grid-template-columns: minmax(0, 1fr); } } .tar { display: flex; flex-direction: column; gap: var(--sp-20); padding: clamp(24px, 3.4vw, 36px); border-radius: 22px; border: 1px solid var(--p-border); background: var(--p-surface); } /* Premium se distingue por el LATÓN del filete, que es su papel en el sistema —el acento es la celebración y el candado de Premium—, no por un fondo de color: el fondo tiene que seguir siendo papel para que la lista se lea igual de bien en las dos. */ .tar--premium { border-color: var(--p-brass); box-shadow: 0 0 0 1px var(--p-brass), 0 18px 44px rgba(169, 128, 58, 0.12); } .tar__cab { display: grid; gap: 6px; } .tar__nombre { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--p-sub); } .tar__precio { margin: 0; font-size: clamp(38px, 5.2vw, 54px); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.05; color: var(--p-text); } .tar__precio span { margin-right: 2px; font-size: 0.55em; vertical-align: 0.42em; color: var(--p-sub); } .tar__precio small { font-size: 0.32em; font-weight: 500; letter-spacing: 0; color: var(--p-sub); } .tar__ciclo { margin: 0; font-size: var(--text-sm); color: var(--p-sub); } .tar__para { margin: 0; padding-top: var(--sp-20); border-top: 1px solid var(--p-border); font-size: var(--text-body); font-weight: 500; } .tar__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-12); /* Empuja el botón al fondo, para que los dos queden a la misma altura aunque una lista tenga un renglón más que la otra. */ flex: 1; align-content: start; } .tar__lista li { position: relative; padding-left: 26px; font-size: var(--text-sm); line-height: 1.5; color: var(--p-sub); } .tar__lista li b { color: var(--p-text); font-weight: 600; } /* El visto del plan gratuito es pizarra; el de Premium, latón. */ .tar__lista li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--p-slate); border-bottom: 2px solid var(--p-slate); transform: rotate(-45deg); } .tar--premium .tar__lista li::before { border-color: var(--p-brass); } .tar__cta { width: 100%; } .tar__pie { margin: -10px 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--p-sub); text-align: center; } /* --- La comparación completa --------------------------------------------- `

` nativo: sin el script la tabla se abre igual, solo que de golpe. El alto lo interpola js/planes.js, misma técnica que el acordeón del FAQ —`height: auto` no es interpolable, así que se mide en JS. ------------------------------------------------------------------------ */ .comp { margin-top: var(--sp-32); border-radius: 18px; border: 1px solid var(--p-border); background: var(--p-surface); overflow: hidden; } .comp__boton { display: flex; align-items: center; justify-content: center; gap: var(--sp-12); padding: var(--sp-20); font-size: var(--text-body); font-weight: 500; color: var(--p-text); cursor: pointer; list-style: none; transition: background-color 0.2s ease; } /* Safari dibuja su propio triángulo si no se le quita el marcador. */ .comp__boton::-webkit-details-marker { display: none; } .comp__boton:hover { background: var(--p-bg); } .comp__boton svg { color: var(--p-sub); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); } .comp[open] .comp__boton svg { transform: rotate(180deg); } .comp__caja { overflow: hidden; } /* El estado cerrado se declara AQUÍ en vez de confiarlo al navegador. `

` esconde su contenido solo, sí, pero Chrome lo hace con `content-visibility` sobre un pseudo-elemento que además RECUERDA el último tamaño (`contain-intrinsic-size: auto`): medido, la caja informa del mismo alto abierta que cerrada. Eso no es un fallo de pintura —no se ve—, pero deja el estado dependiendo de un detalle interno de cada motor, y aquí ese alto lo usa un script para animar. Con `height: 0` y el `overflow` de arriba, cerrado significa cerrado en cualquier navegador. El alto en línea que escribe js/planes.js gana sobre esto mientras dura la animación, y al soltarlo vuelve a mandar esta regla. */ .comp:not([open]) .comp__caja { height: 0; } .comp.is-moviendo .comp__caja { transition: height 0.42s cubic-bezier(0.4, 0.35, 0.2, 1); } @media (prefers-reduced-motion: reduce) { .comp.is-moviendo .comp__caja, .comp__boton svg { transition: none; } } .comp__tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .comp__tabla th, .comp__tabla td { padding: 12px var(--sp-20); text-align: left; border-top: 1px solid var(--p-border); } .comp__tabla thead th { font-weight: 600; color: var(--p-text); background: var(--p-bg); } .comp__tabla tbody th { font-weight: 400; color: var(--p-sub); } .comp__tabla td { color: var(--p-text); font-weight: 500; } /* «No» no va en rojo: no es un error, es un hecho del plan. Y el «Sí» tampoco en verde — en este sistema el verde es de ingreso. Se distinguen por peso. */ .comp__tabla .es-no { color: var(--p-sub); font-weight: 400; } .comp__tabla .es-si { color: var(--p-text); } /* En móvil una tabla de tres columnas obliga a un scroll lateral dentro de la página, que es de las cosas que peor se manejan con el pulgar. Se parte en fichas y cada celda recupera su encabezado desde `data-th`, igual que las tablas de los documentos legales. */ @media (max-width: 700px) { .comp__tabla thead { display: none; } .comp__tabla tr { display: block; padding: var(--sp-16) var(--sp-20); border-top: 1px solid var(--p-border); } .comp__tabla th, .comp__tabla td { display: flex; justify-content: space-between; gap: var(--sp-16); padding: 0; border: 0; } .comp__tabla tbody th { margin-bottom: 8px; font-weight: 600; color: var(--p-text); } .comp__tabla td::before { content: attr(data-th); color: var(--p-sub); font-weight: 400; } } /* --- Aviso del cupo de IA (obligatorio, ver cabecera del archivo) --------- */ .plan__beta { display: flex; gap: 14px; align-items: flex-start; max-width: 720px; margin: clamp(40px, 6vh, 64px) auto 0; padding: var(--sp-20) var(--sp-24); border-radius: var(--r-card); border: 1px solid rgba(176, 132, 43, 0.32); background: rgba(176, 132, 43, 0.08); font-size: var(--text-sm); line-height: 1.55; color: var(--p-text); } /* Advertencia, no acento: este aviso dice que la IA tiene un tope mensual, y el sistema tiene un color exacto para eso. No es latón. */ .plan__beta svg { flex: none; margin-top: 2px; color: var(--sem-warn); } /* --------------------------------------------------------------------------- Preguntas frecuentes ---------------------------------------------------------------------------- Última sección de la página, justo encima del pie: no hay nada por debajo. Quien llega aquí ya vio el precio y la descarga y sigue con una duda; el sitio termina resolviéndola en vez de intentar venderle otra vez. Acordeón con

nativos: sin JavaScript, se abre con el teclado y funciona aunque el script falle. Misma decisión que el selector de ciclo de pago. ------------------------------------------------------------------------ */ .faq { background: transparent; color: var(--p-text); padding: clamp(64px, 10vh, 112px) 0; } /* Titular arriba y lista abajo, no en dos columnas. Con el texto a un lado la sección competía consigo misma: el ojo tenía que elegir entre leer el encabezado o empezar a abrir fichas. Apilado hay un solo orden de lectura, y la lista puede ocupar el ancho completo. */ .faq__inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } .faq__head { max-width: 640px; margin: 0 auto; text-align: center; } .faq__kicker { display: block; font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--p-sub); } .faq__title { margin-top: var(--sp-12); font-size: var(--text-h2); font-weight: 600; line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--p-text); text-wrap: balance; } /* --- El acordeón ------------------------------------------------------------ Deja de ser una lista de renglones separados por filetes y pasa a ser una PILA DE FICHAS que crecen. Tres cosas hacen el movimiento: 1. La ficha anima su ALTO. No es un `display` que se enciende: el cuerpo va en una caja con `overflow: hidden` cuya altura se interpola, así que la ficha empuja a las de abajo en vez de aparecer de golpe. Quien la mide y la mueve es js/faq.js; el CSS solo declara la transición. 2. El signo MÁS se convierte en MENOS girando, no cambiando de dibujo. 3. El cuerpo entra un pelín después que el alto, así que primero se abre el hueco y luego llega el texto. Abrir y cerrar no son simétricos: al cerrar el texto se va de inmediato, porque esperar a que se desvanezca antes de encoger se percibe como lentitud. Sigue siendo `

`/`

` nativo: se abre con el teclado, lo anuncia el lector de pantalla y funciona igual si el script no llega — simplemente sin la interpolación. ------------------------------------------------------------------------ */ .faq__list { max-width: 880px; margin: clamp(36px, 5vh, 56px) auto 0; display: flex; flex-direction: column; gap: 10px; } .faq__item { border: 1px solid var(--p-border); border-radius: 16px; background: var(--p-surface); overflow: hidden; transition: border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease; } .faq__item:hover { border-color: rgba(47, 62, 78, 0.45); box-shadow: 0 6px 20px rgba(23, 28, 34, 0.06); } .faq__item:has(summary:active) { border-color: var(--p-slate-deep); } .faq__item[open] { border-color: var(--p-slate); box-shadow: 0 10px 30px rgba(23, 28, 34, 0.08); } .faq__item summary { display: flex; align-items: center; gap: var(--sp-20); padding: var(--sp-20); list-style: none; cursor: pointer; font-size: var(--text-lg); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--p-text); text-wrap: pretty; transition: color 0.2s ease; } .faq__q { flex: 1; min-width: 0; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { color: var(--p-slate); } .faq__item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: 15px; } /* El signo. DOS movimientos distintos que no pueden compartir `transform`, y por eso hay un envoltorio: · el envoltorio gira UN CUARTO al pasar el ratón: 0° → 90°, hacia la derecha. Empieza y acaba siendo un más —las dos barras son iguales, así que a 90° el dibujo es idéntico—, y eso es justo la gracia: lo que se ve es el RECORRIDO, no el destino. Al retirar el ratón desanda esos 90° y queda exactamente igual que antes. · el clic añade el movimiento extra: 45° más, hasta 135°, y ahí el más sí se convierte en ASPA. O sea, abrir es «la vuelta del ratón y un poco más», en el mismo sentido y sin parar en medio. · dentro, la barra vertical se queda quieta a 90°. El signo nunca es un menos: es más o aspa. Es una TRANSICIÓN, no una animación, y eso importa: si el ratón entra y sale antes de completar el cuarto de vuelta, el giro se devuelve desde donde esté. En la referencia se ven ciclos que solo llegan a 45° o 62° y se dan la vuelta. Medido a 30 fps sobre la referencia: 400 ms para los 90°, y de once curvas candidatas la que menos error deja es `ease-out` (0,028 frente a 0,065 de la que usa el alto). El giro y el despliegue NO comparten curva. ------------------------------------------------------------------------ */ .faq__plus { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--p-bg); transition: transform 0.4s ease-out, background-color 0.24s ease; } .faq__item summary:hover .faq__plus { background: var(--p-slate-soft); } /* El cuarto de vuelta del ratón. Sigue siendo un más al llegar. */ .faq__item summary:hover .faq__plus { transform: rotate(90deg); } /* Y el movimiento extra del clic, en el mismo sentido. Va después de la regla del ratón para ganarle: con el puntero encima de una ficha abierta manda el aspa. Al cerrarla vuelve a 90° —otra vez un más— y al retirar el ratón, a 0°. Si se pulsa sin haber pasado antes por encima, el recorrido es 0° → 135° de una vez: la misma duración cubriendo medio giro más, que es exactamente por qué se percibe algo más rápido. */ .faq__item[open] .faq__plus, .faq__item[open] summary:hover .faq__plus { transform: rotate(135deg); } .faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--p-sub); transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.24s ease; } .faq__plus::after { transform: rotate(90deg); } /* El acento se ENSOMBRECE por pasos: reposo, ratón encima, y pulsado o abierto. Tres tonos del mismo color, no tres colores. */ .faq__item summary:hover .faq__plus::before, .faq__item summary:hover .faq__plus::after, .faq__item[open] .faq__plus::before, .faq__item[open] .faq__plus::after { background: var(--p-slate); } .faq__item summary:active .faq__plus::before, .faq__item summary:active .faq__plus::after { background: var(--p-slate-deep); } .faq__item summary:active .faq__plus { background: var(--p-border); } /* La caja que crece. El relleno inferior va en el último hijo y NO aquí: si estuviera en la caja, a altura 0 seguiría midiendo 24 px y la ficha no llegaría a cerrarse del todo. */ .faq__a { padding: 0 clamp(20px, 8vw, 72px) 0 var(--sp-20); max-width: 68ch; overflow: hidden; } .faq__a > :last-child { margin-bottom: var(--sp-24); } /* Mientras el alto se interpola no puede haber `height: auto` compitiendo. Duración y curva MEDIDAS sobre la referencia, no elegidas: se siguió a 30 fps el desplazamiento de una fila (140 px de recorrido) y salieron 517 ms con un arranque bastante más lento del que teníamos. Ajustando por mínimo error absoluto entre once curvas candidatas, `cubic-bezier(0.4, 0.35, 0.2, 1)` da 0,041 y la que usábamos antes —(0.2, 0.8, 0.2, 1)— daba 0,150: era la peor de todas. Se notaba como un tirón al principio. */ .faq__item.is-moving .faq__a { transition: height 0.52s cubic-bezier(0.4, 0.35, 0.2, 1); } .faq__a p { font-size: var(--text-body); line-height: 1.6; color: var(--p-sub); text-wrap: pretty; /* El contenido entra DETRÁS del hueco, no a la vez: 90 ms de retraso bastan para que se lea como «se abre y entonces aparece». */ opacity: 0; transform: translateY(6px); transition: opacity 0.36s ease 0.1s, transform 0.36s cubic-bezier(0.4, 0.35, 0.2, 1) 0.1s; } .faq__item[open] .faq__a p { opacity: 1; transform: none; } /* Al cerrar, el texto se va en el acto. Medido en la referencia: la respuesta pasa de visible a nada en UN fotograma (33 ms), antes de que el alto empiece a moverse. No se desvanece con la ficha: desaparece y luego la ficha encoge. */ .faq__item.is-closing .faq__a p { transition: opacity 0.1s ease, transform 0.1s ease; } .faq__a p + p { margin-top: var(--sp-12); } .faq__a b { color: var(--p-text); font-weight: 600; } /* Sin movimiento: la ficha abre y cierra en seco, que es exactamente lo que pide el ajuste. js/faq.js ni siquiera interviene. */ @media (prefers-reduced-motion: reduce) { .faq__item, .faq__plus, .faq__plus::before, .faq__plus::after, .faq__a p { transition: none; } .faq__item summary:hover .faq__plus { transform: none; } /* El aspa de la ficha abierta SÍ se queda: no es movimiento, es el estado. El cuarto de vuelta del ratón, en cambio, es movimiento puro y se retira. */ .faq__item[open] .faq__plus, .faq__item[open] summary:hover .faq__plus { transform: rotate(135deg); } .faq__a p { opacity: 1; transform: none; } } .faq__more { margin-top: var(--sp-24); font-size: var(--text-sm); color: var(--p-sub); } /* El relleno NO es decorativo: medido en Chrome este enlace quedaba en 17 px de alto, por debajo del mínimo de 24 que pide la WCAG, en TODOS los tamaños. Es el mismo defecto que ya se corrigió en los enlaces del pie (tail.css) y al que la web no puede ser más laxa que la app, que se exige 48 dp (utils/a11y.ts · MIN_TOUCH_DP). El margen negativo devuelve el relleno para que el párrafo no crezca ni empuje la línea de arriba. */ .faq__more a { display: inline-block; padding: 8px 6px; margin: -8px -6px; color: var(--p-slate); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 860px) { .faq__a { padding-right: var(--sp-20); } } /* --- Descarga ------------------------------------------------------------- */ /* El bloque de descarga cierra la página con el degradado Crepúsculo, que es como el sistema cierra sus piezas. El fondo lo declara css/brain.css (se carga después); aquí solo va la caja. */ .get { margin-top: clamp(64px, 10vh, 120px); padding: clamp(48px, 8vh, 96px) var(--gutter); text-align: center; /* El Crepusculo recorre mucho valor, y aqui el texto va CENTRADO: lo cruza entero. Con el secundario del modo oscuro (#94a0ae) el subtitulo se quedaba en 4,1:1 sobre la parte de pizarra. Sobre esta banda el secundario sube un escalon —sigue siendo un token del sistema— y pasa a 7,1:1. */ --fg-soft: var(--p-slate-deep-d); } .get__inner { max-width: 620px; margin: 0 auto; } .get__title { font-size: var(--text-h2); font-weight: 600; line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--fg); text-wrap: balance; } .get__sub { margin-top: var(--sp-16); font-size: var(--text-lg); color: var(--fg-soft); text-wrap: pretty; } .stores { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-16); margin-top: clamp(28px, 4vh, 40px); } /* Sobre la banda oscura la acción principal no puede ser pizarra sólida —se perdería—, así que se invierte igual que en el modo oscuro del producto: relleno claro y tinta oscura. Es lo mismo que hace la pieza de cierre del sistema visual. Los logotipos de tienda van sobre relleno claro a propósito: el de Google Play es multicolor y no se lleva con ningún fondo de marca. Antes de publicar hay que sustituirlos por las insignias oficiales de Apple y Google — sus guías lo exigen y no admiten versiones dibujadas a mano. */ .store { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px 12px 20px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--cta-bg); color: var(--cta-fg); text-align: left; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease; } .store:hover { transform: translateY(-2px); background: var(--cta-bg-hover); } .store--alt { background: transparent; border-color: var(--ghost-line); color: var(--fg); } .store--alt:hover { background: var(--ghost-wash); border-color: var(--fg); } .store svg { flex: none; width: 26px; height: 26px; } .store__txt { display: grid; line-height: 1.15; } /* 11 px es el suelo del sistema, y la opacidad se cambia por un tono propio: sobre un relleno claro, 0,75 de opacidad dejaba el contraste al azar. */ .store__txt small { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-sub); } .store--alt .store__txt small { color: var(--p-slate-d); } .store__txt strong { font-size: var(--text-body); font-weight: 600; letter-spacing: -0.01em; } .get__fine { margin-top: var(--sp-24); font-size: var(--text-caption); /* Medido: rgba(156,161,199,.72) sobre el lienzo daba 4,32:1 — por debajo de AA para 12 px. Este tono se queda apagado pero legible (5,1:1). */ color: #7f84ab; } /* --- Estrecho ------------------------------------------------------------- */ /* El corte de las dos tarjetas de plan vive junto a `.planes`, arriba: sube por encima de 768 para que un iPad en vertical lea una sola columna. */ @media (max-width: 760px) { .store { width: min(320px, 100%); justify-content: flex-start; } }