/* ============================================================================
AdminGYM — Landing de campaña · sistema de diseño "Iron & Volt"
----------------------------------------------------------------------------
Misma identidad del brochure y del panel web: chasis casi negro, acento volt
(#B8E62E), tipografía condensada pesada y dos motivos que se repiten en toda
la página —la CINTA VOLT (franjas diagonales tipo cinta de precaución) y el
RIEL con nodos encendidos (la "corriente" que baja por el costado).
Orden del archivo:
1. Tokens 6. Riel y cinta 11. WhatsApp
2. Base 7. Encabezado 12. Portal / web / sedes
3. Tipografía 8. Portada (hero) 13. Precios
4. Botones 9. Dolores + cobertura 14. Proceso y FAQ
5. Piezas 10. Acceso y módulos 15. Cierre, pie y móvil
16. Formulario y gracias
========================================================================== */
@import url("fuentes.css?v=2e1c0ab4af");
/* ============================================================================
RESPALDOS CON MÉTRICAS AJUSTADAS
----------------------------------------------------------------------------
Mientras baja la webfont, el navegador pinta con la fuente del sistema. Barlow
Semi Condensed mide 87.5% del ancho de Segoe UI al mismo tamaño (medido, no a
ojo), así que el texto provisional salía 14% más ancho, rewrapeaba y al llegar
la fuente real TODA la página daba un salto: 0.247 de CLS, el mayor lastre de
rendimiento de la landing.
Con size-adjust el respaldo ocupa casi exactamente el mismo espacio que la
fuente definitiva y el cambio deja de notarse. Cuesta cero bytes.
========================================================================== */
/* Uno por peso: si se declaran los tres juntos, el navegador toma la REGULAR del
sistema y le finge la negrita, que sale más ancha que la negrita de verdad y el
ajuste deja de servir. Los porcentajes salen de medir cada peso contra su
equivalente real del sistema. */
@font-face {
font-family: "Barlow respaldo";
src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
size-adjust: 87.5%;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Barlow respaldo";
src: local("Segoe UI Semibold"), local("Segoe UI"), local("Arial");
size-adjust: 87.8%;
font-weight: 500 600;
font-display: swap;
}
@font-face {
font-family: "Barlow respaldo";
src: local("Segoe UI Bold"), local("Arial Bold"), local("Arial");
size-adjust: 86.6%;
font-weight: 700 900;
font-display: swap;
}
/* Archivo Black y Arial Black miden lo mismo (100%): el respaldo va sin ajuste. */
@font-face {
font-family: "Archivo respaldo";
src: local("Arial Black"), local("Segoe UI Black"), local("Impact");
size-adjust: 100%;
font-display: swap;
}
/* ---------------------------------------------------------------- 1. Tokens */
:root {
/* La landing es oscura a propósito; le decimos al navegador que no la
"auto-oscurezca" ni la invierta. */
color-scheme: dark;
--ground: #0f1013;
--ground-2: #131417;
--card: #17191e;
--card-2: #1c1f25;
--card-3: #22262d;
--ink: #eceef1;
--ink-2: #9aa1ad;
/* #6A7079 se veía bien pero no pasaba de 3.8:1 contra ningún fondo del tema.
#8A9199 alcanza 4.8:1 o más en todos y mantiene la jerarquía de tres grises. */
--ink-3: #8a9199;
--volt: #b8e62e;
--volt-claro: #d4f75e;
--volt-tenue: #7fa023;
--volt-hondo: #4d7c0f;
--linea: #282b31;
--linea-2: #34383f;
--alerta: #d4553f;
--fuente-ui: "Barlow Semi Condensed", "Barlow respaldo", "Segoe UI", system-ui, sans-serif;
--fuente-display: "Archivo Black", "Archivo respaldo", "Arial Black", sans-serif;
/* Un solo ritmo de espaciado para toda la página. */
--e1: 0.5rem;
--e2: 1rem;
--e3: 1.5rem;
--e4: 2.5rem;
--e5: 4rem;
--e6: 6.5rem;
--ancho: 1200px;
--canal: clamp(1.25rem, 5vw, 4rem);
--radio: 10px;
--radio-chico: 6px;
--sombra: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
--sombra-volt: 0 0 0 1px rgba(184, 230, 46, 0.25), 0 18px 50px -18px rgba(184, 230, 46, 0.35);
--transicion: 180ms cubic-bezier(0.32, 0.72, 0.35, 1);
}
/* ------------------------------------------------------------------ 2. Base */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
/* Solo para quien no haya pedido menos movimiento: el desplazamiento animado
marea a algunas personas y el salto instantáneo funciona igual de bien. */
scroll-behavior: auto;
/* El encabezado es fijo: sin esto, los enlaces de ancla dejan el título debajo. */
scroll-padding-top: 84px;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--ground);
color: var(--ink);
font-family: var(--fuente-ui);
font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Textura: una rejilla técnica muy tenue + grano. Da "chasis" sin pesar un byte
extra de imagen (todo es CSS). */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 75%);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
img,
svg,
video {
display: block;
max-width: 100%;
}
/* Red de seguridad: los atributos width/height del ![]()
(que están para reservar el
hueco y evitar saltos) también cuentan como estilo. Si más adelante alguien fija el
ancho por CSS y se olvida de la altura, la imagen se estira. Con height:auto el
navegador usa la proporción de los atributos y nunca deforma. */
img {
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
::selection {
background: var(--volt);
color: #0b0c0e;
}
:focus-visible {
outline: 2px solid var(--volt);
outline-offset: 3px;
border-radius: 2px;
}
/* Salto al contenido: lo primero que encuentra quien navega con teclado. */
.saltar {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -120%);
z-index: 200;
background: var(--volt);
color: #0b0c0e;
font-weight: 700;
padding: 0.6rem 1.4rem;
border-radius: 0 0 var(--radio-chico) var(--radio-chico);
transition: transform var(--transicion);
}
.saltar:focus {
transform: translate(-50%, 0);
}
.oculto-visual {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ------------------------------------------------------------ 3. Tipografía */
.display {
font-family: var(--fuente-display);
font-weight: 400; /* Archivo Black ya es negra: pedirle 700 la falsifica */
letter-spacing: -0.02em;
line-height: 0.98;
text-transform: uppercase;
text-wrap: balance;
}
h1.display {
/* El tope lo manda la línea más larga del titular ("DE LA PUERTA"): por encima de
~68px se parte en dos y se pierde el ritmo de tres líneas del brochure. */
font-size: clamp(2.5rem, 1.7rem + 3.5vw, 4.25rem);
}
h2.display {
font-size: clamp(2rem, 1.4rem + 2.8vw, 3.375rem);
}
h3 {
font-family: var(--fuente-ui);
font-weight: 700;
font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
line-height: 1.15;
letter-spacing: 0.005em;
}
/* El navegador aplica `bolder` a y , que es RELATIVO al peso heredado:
sobre 400 pide 700 y sobre 700 pide 900. Archivo Black solo existe en 400 y Barlow
llega a 700, así que el navegador engordaba los trazos a la fuerza — justo en el
precio y en los cuatro datos duros, que es donde más se nota. */
b,
strong {
font-weight: 700;
}
.prueba b,
.tarifa__precio b {
font-weight: 400;
}
.v {
color: var(--volt);
}
.eyebrow {
display: flex;
align-items: center;
gap: 0.7rem;
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--volt);
}
.eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--volt);
flex: none;
}
.entrada {
color: var(--ink-2);
font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
max-width: 56ch;
text-wrap: pretty;
}
.mini {
font-size: 0.875rem;
color: var(--ink-3);
letter-spacing: 0.02em;
}
/* --------------------------------------------------------------- 4. Botones */
.btn {
--btn-fondo: transparent;
--btn-tinta: var(--ink);
--btn-borde: var(--linea-2);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.95rem 1.7rem;
background: var(--btn-fondo);
color: var(--btn-tinta);
border: 1px solid var(--btn-borde);
border-radius: var(--radio-chico);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.1;
cursor: pointer;
position: relative;
isolation: isolate;
transition: transform var(--transicion), box-shadow var(--transicion),
background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.btn svg {
flex: none;
width: 1.25em;
height: 1.25em;
}
.btn:hover {
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
.btn--volt {
--btn-fondo: var(--volt);
--btn-tinta: #0b0c0e;
--btn-borde: var(--volt);
box-shadow: 0 10px 30px -12px rgba(184, 230, 46, 0.55);
}
.btn--volt:hover {
--btn-fondo: var(--volt-claro);
--btn-borde: var(--volt-claro);
box-shadow: 0 16px 38px -12px rgba(184, 230, 46, 0.75);
}
.btn--linea:hover {
--btn-borde: var(--volt);
--btn-tinta: var(--volt);
}
.btn--grande {
padding: 1.15rem 2.2rem;
font-size: 1.1875rem;
}
.btn--ancho {
width: 100%;
}
/* El botón principal "respira" una vez al cargar para llevarse la vista. */
@media (prefers-reduced-motion: no-preference) {
.btn--volt.btn--pulso::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid var(--volt);
z-index: -1;
animation: pulso 3.4s cubic-bezier(0.22, 1, 0.36, 1) 1.2s 3;
}
}
@keyframes pulso {
0% {
opacity: 0.9;
transform: scale(1);
}
60%,
100% {
opacity: 0;
transform: scale(1.22);
}
}
/* --------------------------------------------------------------- 5. Piezas */
.envoltura {
width: min(100% - var(--canal) * 2, var(--ancho));
margin-inline: auto;
position: relative;
z-index: 1;
}
section {
position: relative;
padding-block: clamp(3.5rem, 2rem + 6vw, var(--e6));
}
/* La medida del titular NO es la medida del párrafo. Con un tope común de 62ch —que
se resuelve contra la fuente del contenedor— los h2 en Archivo Black no cabían y
nueve de once se partían en líneas que nadie eligió. Ahora cada pieza lleva su
propia medida, y el aire entre ellas crece con la jerarquía en vez de ser el mismo
para una etiqueta de 13px y un titular de 54px. */
.encabezado-seccion {
display: flex;
flex-direction: column;
gap: 0;
max-width: none;
margin-bottom: var(--e4);
}
.encabezado-seccion > .eyebrow {
margin-bottom: 0.6rem;
}
.encabezado-seccion > .display {
max-width: 30ch;
}
.encabezado-seccion > .display + .entrada {
margin-top: clamp(1rem, 0.5rem + 1.3vw, 1.75rem);
}
/* Placa: la tarjeta base de toda la página. Borde de 1px, no sombras blandas. */
.placa {
background: linear-gradient(180deg, var(--card-2), var(--card));
border: 1px solid var(--linea);
border-radius: var(--radio);
padding: var(--e3);
position: relative;
transition: border-color var(--transicion), transform var(--transicion);
}
.placa--viva:hover {
border-color: var(--linea-2);
transform: translateY(-3px);
}
/* Marco de captura: integra pantallazos de UI clara sobre el fondo oscuro. */
.marco {
border: 1px solid var(--linea-2);
border-radius: var(--radio);
overflow: hidden;
background: var(--card);
box-shadow: var(--sombra);
position: relative;
}
.marco--volt {
border-color: rgba(184, 230, 46, 0.35);
}
.marco img {
width: 100%;
height: auto;
}
.marco__barra {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.85rem;
background: var(--ground-2);
border-bottom: 1px solid var(--linea);
}
.marco__barra i {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--linea-2);
}
.marco__barra span {
margin-left: 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
}
.pie-figura {
margin-top: 0.7rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
}
/* Fichas informativas de una línea. */
.fichas {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ficha {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--linea-2);
border-radius: 999px;
background: var(--card);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink);
}
.ficha::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--volt);
box-shadow: 0 0 8px rgba(184, 230, 46, 0.9);
flex: none;
}
/* ------------------------------------------------------- 6. Riel y cinta */
/* CINTA VOLT — franjas diagonales tipo cinta de precaución. Firma de la marca. */
.cinta {
height: 10px;
background: repeating-linear-gradient(
-45deg,
var(--volt) 0 12px,
var(--ground) 12px 24px
);
}
.cinta--fina {
height: 6px;
background: repeating-linear-gradient(
-45deg,
var(--volt) 0 8px,
transparent 8px 16px
);
}
/* RIEL — línea vertical con nodos que se encienden al pasar cada sección.
Es decorativo, así que se oculta a lectores de pantalla desde el HTML. */
.riel {
position: fixed;
left: max(1rem, calc((100vw - var(--ancho)) / 2 - 2.5rem));
top: 0;
bottom: 0;
width: 1px;
z-index: 3;
pointer-events: none;
background: linear-gradient(
180deg,
transparent,
var(--linea-2) 12%,
var(--linea-2) 88%,
transparent
);
}
/* La parte ya recorrida del riel se ilumina: hace de barra de avance. */
.riel__progreso {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 0;
background: linear-gradient(180deg, transparent, var(--volt-tenue) 20%, var(--volt));
}
.riel__nodo {
position: absolute;
left: -3.5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--linea-2);
transition: background-color 400ms ease, box-shadow 400ms ease, transform 400ms ease;
}
.riel__nodo.encendido {
background: var(--volt);
box-shadow: 0 0 12px rgba(184, 230, 46, 0.75);
transform: scale(1.15);
}
@media (max-width: 1180px) {
.riel {
display: none;
}
}
/* Aparición al hacer scroll. Sin JS o con "reducir movimiento", todo queda visible. */
@media (prefers-reduced-motion: no-preference) {
.js .revelar {
opacity: 0;
transform: translateY(22px);
transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js .revelar.dentro {
opacity: 1;
transform: none;
}
}
/* --------------------------------------------------------- 7. Encabezado */
.cabecera {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
background: rgba(15, 16, 19, 0.72);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
border-bottom: 1px solid transparent;
transition: background-color var(--transicion), border-color var(--transicion);
}
.cabecera.pegada {
background: rgba(15, 16, 19, 0.94);
border-bottom-color: var(--linea);
}
.cabecera__fila {
display: flex;
align-items: center;
gap: var(--e3);
height: 68px;
}
.marca {
display: flex;
align-items: center;
gap: 0.6rem;
padding-block: 0.45rem;
flex: none;
}
.marca img {
width: 30px;
height: 30px;
}
.marca__texto {
font-family: var(--fuente-display);
font-size: 1.3125rem;
letter-spacing: -0.01em;
line-height: 1;
text-transform: uppercase;
}
.nav {
display: flex;
gap: 1.6rem;
margin-left: auto;
font-weight: 600;
font-size: 1.0625rem;
}
.nav a {
color: var(--ink-2);
position: relative;
padding-block: 0.35rem;
transition: color var(--transicion);
}
.nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: var(--volt);
transition: width var(--transicion);
}
.nav a:hover {
color: var(--ink);
}
.nav a:hover::after {
width: 100%;
}
.cabecera .btn {
padding: 0.6rem 1.15rem;
font-size: 0.9375rem;
}
.menu-boton {
display: none;
margin-left: auto;
width: 44px;
height: 44px;
border: 1px solid var(--linea-2);
border-radius: var(--radio-chico);
align-items: center;
justify-content: center;
}
.menu-boton span,
.menu-boton span::before,
.menu-boton span::after {
display: block;
width: 18px;
height: 2px;
background: var(--ink);
transition: transform var(--transicion), opacity var(--transicion);
}
.menu-boton span::before,
.menu-boton span::after {
content: "";
position: absolute;
}
.menu-boton span::before {
transform: translateY(-6px);
}
.menu-boton span::after {
transform: translateY(6px);
}
.menu-boton[aria-expanded="true"] span {
background: transparent;
}
.menu-boton[aria-expanded="true"] span::before {
transform: rotate(45deg);
}
.menu-boton[aria-expanded="true"] span::after {
transform: rotate(-45deg);
}
/* --------------------------------------------------------- 8. Portada */
.portada {
padding-top: clamp(6.5rem, 4rem + 8vw, 9.5rem);
padding-bottom: clamp(3rem, 2rem + 5vw, 5.5rem);
overflow: hidden;
}
/* Resplandor volt detrás de la captura. */
.portada::after {
content: "";
position: absolute;
top: -12%;
right: -12%;
width: min(60vw, 720px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(184, 230, 46, 0.24), transparent 66%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.portada__rejilla {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
gap: clamp(2rem, 1rem + 4vw, 4.5rem);
align-items: center;
}
.portada__texto > * + * {
margin-top: var(--e3);
}
.portada h1 {
margin-top: 0.6rem;
}
.portada__acciones {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: var(--e4);
}
.portada__aval {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 1.4rem;
margin-top: var(--e3);
color: var(--ink-3);
font-size: 0.9375rem;
font-weight: 600;
}
.portada__aval span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.portada__aval svg {
width: 1.05em;
height: 1.05em;
color: var(--volt);
}
.portada__visual {
position: relative;
}
/* Etiqueta "acceso autorizado" flotando sobre la captura del kiosko. */
/* Cuelga del borde inferior izquierdo del marco para no tapar la captura. */
.sello {
position: absolute;
left: -1.25rem;
bottom: -1.5rem;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.7rem 1.1rem;
background: var(--ground-2);
border: 1px solid rgba(184, 230, 46, 0.4);
border-radius: var(--radio-chico);
box-shadow: var(--sombra);
font-weight: 700;
font-size: 0.9375rem;
letter-spacing: 0.02em;
}
.sello small {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.sello__luz {
width: 10px;
height: 10px;
border-radius: 50%;
/* --luz la pone el estado de la pantalla de acceso animada (abajo); por omisión, volt. */
background: var(--luz, var(--volt));
box-shadow: 0 0 10px var(--luz, var(--volt));
transition: background-color 0.4s ease, box-shadow 0.4s ease;
flex: none;
}
@media (prefers-reduced-motion: no-preference) {
.sello__luz {
animation: latido 2.4s ease-in-out infinite;
}
}
@keyframes latido {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
/* Cintillo de recorrido bajo la portada: puerta → socio → caja → reporte. */
.cintillo {
border-block: 1px solid var(--linea);
background: var(--ground-2);
padding-block: 1.1rem;
overflow: hidden;
}
.cintillo__pista {
display: flex;
align-items: center;
gap: 2.2rem;
font-weight: 700;
font-size: 0.9375rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
flex-wrap: wrap;
justify-content: center;
}
.cintillo__pista b {
color: var(--ink);
font-weight: 700;
}
.cintillo__pista i {
color: var(--volt);
font-style: normal;
}
/* --------------------------------------------------------------- 9. Dolores */
.dolores {
background: var(--ground-2);
border-block: 1px solid var(--linea);
}
.comparativa {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--e3);
}
.columna-dolor,
.columna-alivio {
border-radius: var(--radio);
padding: var(--e3);
border: 1px solid var(--linea);
}
.columna-dolor {
background: var(--card);
}
.columna-alivio {
background: linear-gradient(180deg, rgba(184, 230, 46, 0.07), rgba(184, 230, 46, 0));
border-color: rgba(184, 230, 46, 0.3);
}
.columna-dolor h3,
.columna-alivio h3 {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: var(--e2);
font-size: 0.875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
}
.columna-dolor h3 {
color: var(--ink-3);
}
.columna-alivio h3 {
color: var(--volt);
}
.lista-marcada {
list-style: none;
display: grid;
gap: 0.85rem;
}
.lista-marcada li {
display: grid;
grid-template-columns: 1.4rem 1fr;
gap: 0.7rem;
align-items: start;
color: var(--ink-2);
line-height: 1.45;
}
.lista-marcada svg {
width: 1.15rem;
height: 1.15rem;
margin-top: 0.25em;
}
/* Grosor por tamaño óptico: los iconos chicos necesitan más trazo para leerse, los
grandes menos para no verse toscos. Antes todos iban a 1.4-2.2 sin criterio. */
.lista-marcada svg,
.portada__aval svg {
stroke-width: 2;
}
.lector__icono {
stroke-width: 1.6;
}
.modulo__icono {
stroke-width: 1.75;
}
.columna-dolor .lista-marcada svg {
color: var(--alerta);
}
.columna-alivio .lista-marcada svg {
color: var(--volt);
}
.columna-alivio .lista-marcada li {
color: var(--ink);
}
/* Banda de credibilidad: cuatro datos duros, sin adornos. */
.pruebas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 1px;
background: var(--linea);
border-block: 1px solid var(--linea);
}
.prueba {
background: var(--ground);
padding: var(--e3) var(--e2);
display: grid;
gap: 0.35rem;
align-content: start;
}
.prueba b {
font-family: var(--fuente-display);
font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
line-height: 0.9;
color: var(--volt);
letter-spacing: -0.03em;
}
.prueba span {
color: var(--ink-2);
font-size: 1rem;
line-height: 1.4;
max-width: 30ch;
}
/* El sangrado se saca con un margen negativo del contenedor y no con una excepción
al primer hijo: así el primer dato de CADA fila queda alineado con el texto,
aunque la rejilla baje a tres, dos o una columna. */
@media (min-width: 640px) {
.pruebas {
margin-inline: calc(var(--e2) * -1);
}
.prueba {
padding-inline: var(--e2);
}
}
/* ------------------------------------------------- 9b. Cobertura (el mapa) */
/* Mapa de la República con los estados donde ya hay gimnasios. Es SVG en línea
—no una imagen— porque cada estado se enciende por separado.
El encendido va en ONDA desde Villahermosa: el generador ordena los estados por
distancia a la casa matriz y escribe ese índice en la variable --i de cada trazo.
No es adorno; el sistema salió de ahí y de ahí se fue extendiendo.
El estado ENCENDIDO es el valor por omisión, y el apagado vive detrás de `.js` +
"no-preference", igual que .revelar: sin JavaScript o con movimiento reducido el
mapa se ve completo desde el primer cuadro, no vacío. */
/* El resplandor se pinta en la SECCIÓN y no dentro del SVG: dentro habría que
pintarlo sobre un rectángulo, y como el foco cae junto a una esquina (Villahermosa)
el degradado llega vivo al borde y se ve la caja. Aquí el único corte posible es
el filo de la propia franja, que ya lleva su línea. */
#cobertura {
background-image: radial-gradient(
ellipse 62% 78% at 66% 76%,
rgba(184, 230, 46, 0.075),
transparent 68%
);
}
.cobertura__lienzo {
position: relative;
max-width: 960px;
margin-inline: auto;
}
.mapa {
width: 100%;
height: auto;
/* Los halos de los nodos del borde (Sonora, Yucatán) se salen del viewBox. */
overflow: visible;
}
.mapa__tierra path {
fill: #191c21;
stroke: var(--ground);
/* Sin esto la costura entre estados se afina hasta desaparecer en el celular y
engorda en pantalla grande: el mapa escala de 340 a 1020 px. */
vector-effect: non-scaling-stroke;
stroke-width: 1.1;
}
/* Volt al 18% sobre el gris del mapa. Un relleno sólido y no un rgba: así la
transición interpola entre dos colores opacos y no arrastra transparencia. */
.mapa__tierra .mapa__on {
fill: #364023;
stroke: rgba(184, 230, 46, 0.42);
}
/* Los nodos escalan con el mapa, y a 390 px un punto de 8 unidades acaba midiendo
3 px: invisible. La variable --nodo los agranda en pantalla chica.
Va en la propiedad `scale` y no en `transform` a propósito: `transform` lo usa la
aparición (de escala 0 a normal) y las dos se multiplican sin estorbarse.
transform-box: fill-box ancla el origen en el centro del propio nodo. Sin eso el
origen sería el centro del viewBox y al aparecer los puntos saldrían disparados
desde la mitad del mapa en vez de crecer en su sitio. */
.mapa {
--nodo: 1;
}
.mapa__nodo,
.mapa__pulso {
transform-box: fill-box;
transform-origin: center;
}
.mapa__nodo {
scale: var(--nodo);
}
@media (max-width: 900px) {
.mapa {
--nodo: 1.35;
}
}
@media (max-width: 620px) {
.mapa {
--nodo: 1.8;
}
}
.mapa__punto {
fill: var(--volt);
}
.mapa__halo {
fill: var(--volt);
opacity: 0.13;
}
.mapa__casa .mapa__punto {
fill: var(--volt-claro);
}
/* El anillo que late sobre Villahermosa. Sin animación no aporta nada y parece un
defecto, así que solo existe cuando hay movimiento. */
.mapa__pulso {
display: none;
fill: none;
stroke: var(--volt);
stroke-width: 1.6;
vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
.js .mapa__tierra .mapa__on {
fill: #191c21;
stroke: var(--ground);
transition: fill 520ms ease, stroke 520ms ease;
transition-delay: calc(300ms + var(--i) * 52ms);
}
.js .cobertura.dentro .mapa__tierra .mapa__on {
fill: #364023;
stroke: rgba(184, 230, 46, 0.42);
}
.js .mapa__nodo {
transform: scale(0);
transition: transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(430ms + var(--i) * 52ms);
}
.js .cobertura.dentro .mapa__nodo {
transform: none;
}
.mapa__pulso {
display: block;
animation: latido 3s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
}
@keyframes latido {
0% {
transform: scale(1);
opacity: 0.7;
}
65%,
100% {
transform: scale(3.6);
opacity: 0;
}
}
/* --- Rótulo de la casa matriz ---------------------------------------------- */
/* Coordenadas del nodo de Villahermosa en el lienzo del mapa (804.1 / 627 de alto),
más un desplazamiento para que el texto arranque a la derecha del punto. */
.cobertura__casa {
display: none;
position: absolute;
left: 81.5%;
top: 79.1%;
font-size: 0.75rem;
line-height: 1.35;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
}
.cobertura__casa span {
display: block;
color: var(--volt-claro);
letter-spacing: 0.08em;
}
@media (min-width: 1080px) {
.cobertura__casa {
display: block;
}
}
/* --- Las dos cifras -------------------------------------------------------- */
.cobertura__cifras {
display: grid;
gap: var(--e3);
margin-top: var(--e3);
}
.cifra {
display: grid;
gap: 0.35rem;
}
.cifra b {
font-family: var(--fuente-display);
/* Archivo Black solo trae el peso 400: con el "bolder" que heredan los el
navegador le finge la negrita y sale sucia. */
font-weight: 400;
font-size: clamp(3rem, 2rem + 3.4vw, 4.5rem);
line-height: 0.82;
letter-spacing: -0.045em;
color: var(--volt);
font-variant-numeric: tabular-nums;
}
.cifra span {
color: var(--ink-2);
line-height: 1.35;
max-width: 24ch;
}
@media (min-width: 560px) {
.cobertura__cifras {
grid-template-columns: 1fr 1fr;
}
}
/* De aquí para arriba las cifras se meten DENTRO del mapa, en el Pacífico: es el
único hueco grande que deja la silueta y evita repetir el aire dos veces. */
@media (min-width: 1080px) {
.cobertura__cifras {
position: absolute;
left: 0;
bottom: 1%;
width: 32%;
grid-template-columns: 1fr;
gap: var(--e2);
margin-top: 0;
}
.cifra b {
font-size: 3.75rem;
}
.cifra span {
font-size: 0.9375rem;
max-width: 20ch;
}
}
/* --- Pie: el listado de estados y la pregunta ------------------------------ */
.cobertura__pie {
margin-top: var(--e4);
padding-top: var(--e3);
border-top: 1px solid var(--linea);
display: flex;
flex-wrap: wrap;
gap: var(--e2) var(--e4);
justify-content: space-between;
align-items: end;
}
.cobertura__lista {
color: var(--ink-2);
font-size: 0.9375rem;
line-height: 1.65;
max-width: 64ch;
}
.cobertura__marca {
display: block;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 0.3rem;
}
.cobertura__pregunta {
color: var(--ink-3);
font-size: 0.9375rem;
flex: none;
}
.cobertura__pregunta a {
color: var(--volt);
border-bottom: 1px solid rgba(184, 230, 46, 0.4);
padding-bottom: 2px;
transition: border-color var(--transicion);
}
.cobertura__pregunta a:hover {
border-bottom-color: var(--volt);
}
/* --------------------------------------------------- 10. Acceso y módulos */
.acceso__rejilla {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--e2);
margin-bottom: var(--e4);
}
.lector {
display: grid;
gap: 0.75rem;
padding: var(--e3);
background: var(--card);
border: 1px solid var(--linea);
border-radius: var(--radio);
position: relative;
overflow: hidden;
}
/* Barra volt superior que crece en hover: "el lector se activa". */
.lector::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 34px;
background: var(--volt);
transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lector:hover::before {
width: 100%;
}
.lector__icono {
width: 42px;
height: 42px;
color: var(--volt);
}
.lector h3 {
font-size: 1.3125rem;
}
.lector p {
color: var(--ink-2);
font-size: 1rem;
}
.lector__dato {
margin-top: auto;
padding-top: 0.6rem;
border-top: 1px solid var(--linea);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
/* Flujo: rostro/huella/tarjeta → valida → abre. */
.flujo {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem 1rem;
padding: var(--e3);
border: 1px solid var(--linea-2);
border-radius: var(--radio);
background: var(--ground-2);
}
.flujo__paso {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.9375rem;
}
.flujo__paso b {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(184, 230, 46, 0.14);
color: var(--volt);
font-size: 0.8125rem;
}
.flujo__flecha {
color: rgba(184, 230, 46, 0.55);
flex: none;
}
/* 330px de mínimo = 3 columnas en el ancho del contenedor: los 6 módulos quedan
en dos filas parejas de 3, sin la celda vacía que dejaba una rejilla de 4. */
.modulos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
gap: 1px;
background: var(--linea);
border: 1px solid var(--linea);
border-radius: var(--radio);
overflow: hidden;
}
.modulo {
background: var(--card);
padding: var(--e3);
display: grid;
gap: 0.6rem;
align-content: start;
transition: background-color var(--transicion);
}
.modulo:hover {
background: var(--card-2);
}
.modulo__icono {
width: 34px;
height: 34px;
color: var(--volt);
margin-bottom: 0.2rem;
}
.modulo p {
color: var(--ink-2);
font-size: 1rem;
line-height: 1.5;
}
/* Rejilla de "también incluye": lista densa a tres columnas. */
.incluye {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 0.7rem 2rem;
margin-top: var(--e4);
}
.incluye li {
display: grid;
grid-template-columns: 1.1rem 1fr;
gap: 0.65rem;
align-items: start;
color: var(--ink-2);
font-size: 1.0625rem;
padding-bottom: 0.7rem;
border-bottom: 1px solid var(--linea);
}
/* Antes era un "✓" tipográfico, que en Barlow dibuja una palomita distinta a la de
los 37 iconos SVG de la página. Ahora es LA MISMA, recortada con máscara. */
.incluye li::before {
content: "";
width: 1.05rem;
height: 1.05rem;
margin-top: 0.2em;
background-color: var(--volt);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ------------------------------------------------- 11. Bloques alternados */
.bloque {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: clamp(2rem, 1rem + 4vw, 4rem);
align-items: center;
}
.bloque__texto > * + * {
margin-top: var(--e2);
}
.bloque__texto .lista-marcada,
.bloque__texto .fichas {
margin-top: var(--e3);
}
.bloque--invertido .bloque__visual {
order: -1;
}
@media (max-width: 780px) {
.bloque--invertido .bloque__visual {
order: 0;
}
}
/* Muestra a ancho completo: texto corto arriba y la captura grande abajo. Es para
las pantallas del programa de escritorio, que traen la ventana entera y a media
columna quedaban ilegibles. */
.muestra {
margin-top: var(--e5);
}
.muestra__texto {
max-width: 72ch;
margin-bottom: var(--e3);
}
.muestra__texto h3 {
margin-bottom: 0.6rem;
}
/* Conversación de WhatsApp: la plantilla real que manda el sistema. */
.chat {
max-width: 420px;
margin-inline: auto;
background: #0b141a;
border: 1px solid var(--linea-2);
border-radius: 16px;
padding: 1rem;
box-shadow: var(--sombra);
display: grid;
gap: 0.7rem;
}
.chat__cabecera {
display: flex;
align-items: center;
gap: 0.7rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chat__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--volt);
color: #0b0c0e;
display: grid;
place-items: center;
font-weight: 700;
font-size: 0.8125rem;
flex: none;
}
.chat__cabecera b {
display: block;
font-size: 1rem;
}
.chat__cabecera small {
color: #8696a0;
font-size: 0.8125rem;
}
.burbuja {
background: #1f2c33;
color: #e9edef;
padding: 0.7rem 0.9rem;
border-radius: 8px 8px 8px 2px;
font-size: 1rem;
line-height: 1.45;
max-width: 92%;
position: relative;
}
.burbuja--saliente {
background: #005c4b;
border-radius: 8px 8px 2px 8px;
margin-left: auto;
}
.burbuja time {
display: block;
text-align: right;
font-size: 0.6875rem;
color: #8696a0;
margin-top: 0.25rem;
}
/* El verde de la burbuja saliente es más oscuro: la hora necesita aclararse
para seguir siendo legible. */
.burbuja--saliente time {
color: #bfcbd1;
}
/* Dos teléfonos lado a lado: la agenda de clases y la rutina. El segundo va un poco
más abajo y girado, para que se lean como un par y no como dos imágenes pegadas. */
.telefonos {
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(0.75rem, 2vw, 1.5rem);
}
.telefonos .telefono {
width: min(240px, 42vw);
margin: 0;
flex: none;
}
.telefonos .telefono:first-child {
transform: rotate(-2deg);
}
.telefonos .telefono:last-child {
margin-top: clamp(1.5rem, 4vw, 3rem);
transform: rotate(2deg);
}
@media (prefers-reduced-motion: reduce) {
.telefonos .telefono {
transform: none;
}
}
/* Marco de teléfono para las capturas verticales del portal del socio. */
.telefono {
width: min(280px, 74vw);
margin-inline: auto;
/* El bisel de arriba es más alto a propósito: ahí vive la muesca. Antes caía
sobre la propia captura y tachaba la línea "ADMINGYM · Socio #2684". */
padding: 22px 10px 16px;
background: linear-gradient(160deg, #2a2e36, #15171b 45%, #101216);
border: 1px solid #3c414a;
border-radius: 34px;
box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, 0.14);
position: relative;
}
.telefono::before {
content: "";
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 56px;
height: 4px;
border-radius: 3px;
background: #000;
z-index: 2;
}
/* El height:auto NO es decorativo: los atributos width/height del ![]()
valen como
estilo del navegador. Al poner width:100% se pisaba el ancho pero la altura se
quedaba en los 1212 px del atributo, y la captura salía estirada al doble. */
.telefono img {
border-radius: 24px;
width: 100%;
height: auto;
}
/* Tres teléfonos (la app del socio): los de los lados bajan y se abren en abanico, el
del centro queda derecho y arriba. 27vw es lo que cabe en un celular de 320 px con
los canales y los dos huecos; arriba de eso manda el tope de 172 px. */
.telefonos--tres {
gap: clamp(0.5rem, 1.5vw, 1rem);
}
.telefonos--tres .telefono {
width: min(172px, 27vw);
padding: 16px 7px 12px;
border-radius: 26px;
}
.telefonos--tres .telefono::before {
top: 6px;
width: 40px;
}
.telefonos--tres .telefono img {
border-radius: 18px;
}
.telefonos--tres .telefono:first-child {
margin-top: clamp(1.5rem, 4vw, 3rem);
transform: rotate(-3deg);
}
.telefonos--tres .telefono:nth-child(2) {
margin-top: 0;
transform: none;
}
.telefonos--tres .telefono:last-child {
margin-top: clamp(1.5rem, 4vw, 3rem);
transform: rotate(3deg);
}
@media (prefers-reduced-motion: reduce) {
.telefonos--tres .telefono:first-child,
.telefonos--tres .telefono:last-child {
transform: none;
}
}
/* Botones de las tiendas de la app, debajo del texto de entrada de la sección. */
.tiendas {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
margin-top: var(--e3);
}
/* Sedes: tarjetas conectadas por el riel volt. */
/* Mínimo chico a propósito: las sedes deben caber en UNA fila para que los puntos
volt que las unen se lean como una cadena y no como una lista suelta. */
.sedes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
gap: var(--e2);
margin-top: var(--e3);
}
.sede {
padding: 1rem 1.1rem;
border: 1px solid var(--linea);
border-radius: var(--radio-chico);
background: var(--card);
position: relative;
}
.sede b {
display: block;
font-size: 1.0625rem;
}
.sede span {
font-size: 0.9375rem;
color: var(--ink-3);
}
.sede::after {
content: "";
position: absolute;
top: 1.35rem;
right: -0.55rem;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--volt);
box-shadow: 0 0 8px rgba(184, 230, 46, 0.8);
}
.sede:last-child::after {
display: none;
}
/* ------------------------------------------------------------- 12. Hardware */
/* Igual que los módulos: 6 piezas en dos filas de 3, no 4 + 2 huérfanas. */
.hardware {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
gap: var(--e2);
}
.pieza {
display: grid;
gap: 0.45rem;
padding: 1.15rem;
border: 1px solid var(--linea);
border-left: 3px solid rgba(184, 230, 46, 0.45);
border-radius: var(--radio-chico);
background: var(--card);
transition: border-left-color var(--transicion);
}
.pieza:hover {
border-left-color: var(--volt);
}
.pieza b {
font-size: 1.0625rem;
}
.pieza span {
color: var(--ink-2);
font-size: 0.9375rem;
line-height: 1.45;
}
/* -------------------------------------------------------------- 13. Precios */
/* Un solo precio, no una tabla de planes: la cifra a la izquierda con el acento volt
y lo que incluye a la derecha. El visitante no tiene que elegir nada para escribir. */
.tarifa {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
gap: 1px;
background: var(--linea);
border: 1px solid var(--linea);
border-radius: var(--radio);
overflow: hidden;
box-shadow: var(--sombra-volt);
}
.tarifa__cifra {
display: grid;
align-content: start;
gap: var(--e2);
padding: var(--e4) var(--e3);
background: linear-gradient(180deg, rgba(184, 230, 46, 0.08), var(--card) 60%);
text-align: center;
}
.tarifa__incluye {
padding: var(--e4) var(--e3);
background: var(--card);
}
.tarifa__incluye h3 {
margin-bottom: var(--e2);
}
.tarifa__etiqueta {
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--volt);
}
.tarifa__precio {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.tarifa__precio b {
font-family: var(--fuente-display);
font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem);
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--volt);
}
.tarifa__precio span {
color: var(--ink-2);
font-size: 0.9375rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: left;
line-height: 1.35;
}
.tarifa__nota {
color: var(--ink-2);
font-size: 1rem;
padding-bottom: var(--e2);
border-bottom: 1px solid var(--linea);
}
@media (max-width: 780px) {
.tarifa {
grid-template-columns: 1fr;
}
.tarifa__cifra,
.tarifa__incluye {
padding: var(--e3) var(--e2);
}
}
.nota-precio {
margin-top: var(--e3);
max-width: 62ch;
padding: 1rem 1.2rem;
border: 1px solid var(--linea);
border-left: 3px solid var(--volt);
border-radius: var(--radio-chico);
background: var(--ground-2);
color: var(--ink-2);
font-size: 1rem;
}
/* --------------------------------------------------------- 14. Proceso y FAQ */
.pasos {
list-style: none;
counter-reset: paso;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: var(--e3);
}
.paso {
counter-increment: paso;
position: relative;
padding-top: var(--e3);
border-top: 1px solid var(--linea);
}
.paso::before {
content: counter(paso, decimal-leading-zero);
display: block;
font-family: var(--fuente-display);
font-size: 2.25rem;
line-height: 1;
color: var(--volt);
margin-bottom: 0.6rem;
letter-spacing: -0.03em;
}
.paso h3 {
margin-bottom: 0.4rem;
}
.paso p {
color: var(--ink-2);
font-size: 1rem;
}
.faq {
display: grid;
gap: 0;
border-top: 1px solid var(--linea);
max-width: 900px;
}
.faq details {
border-bottom: 1px solid var(--linea);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e2);
padding: 1.2rem 0.25rem;
cursor: pointer;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.3;
list-style: none;
transition: color var(--transicion);
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary:hover {
color: var(--volt);
}
.faq summary::after {
content: "";
flex: none;
width: 13px;
height: 13px;
border-right: 2px solid var(--volt);
border-bottom: 2px solid var(--volt);
transform: rotate(45deg) translate(-3px, -3px);
transition: transform var(--transicion);
}
.faq details[open] summary::after {
transform: rotate(-135deg) translate(-3px, -3px);
}
.faq details p {
color: var(--ink-2);
padding: 0 0.25rem 1.4rem;
/* 78ch daba renglones de 183 caracteres: el ojo pierde el hilo al volver. */
max-width: 62ch;
}
.faq details p + p {
padding-top: 0;
margin-top: -0.6rem;
}
/* ------------------------------------------------- 15. Cierre, pie y móvil */
.cierre {
position: relative;
background: var(--ground-2);
border-block: 1px solid var(--linea);
overflow: hidden;
}
.cierre::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 120% at 50% 118%, rgba(184, 230, 46, 0.28), transparent 68%);
pointer-events: none;
}
.cierre__caja {
text-align: center;
display: grid;
justify-items: center;
gap: var(--e3);
}
.cierre__acciones {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
justify-content: center;
}
.contacto-directo {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 2.5rem;
margin-top: var(--e2);
}
/* El padding vertical no es estético: es para que el dedo tenga a dónde pegarle.
Sin él, estos enlaces medían 23 px de alto y quedaban por debajo del mínimo
recomendado para objetivos táctiles. */
.contacto-directo a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding-block: 0.6rem;
color: var(--ink-2);
font-weight: 600;
transition: color var(--transicion);
}
.contacto-directo a:hover {
color: var(--volt);
}
.contacto-directo svg {
width: 1.1em;
height: 1.1em;
color: var(--volt);
}
.pie {
padding-block: var(--e4) var(--e3);
color: var(--ink-3);
font-size: 0.9375rem;
}
.pie__fila {
display: flex;
flex-wrap: wrap;
gap: var(--e3);
justify-content: space-between;
align-items: flex-start;
}
.pie__marca {
display: grid;
gap: 0.5rem;
max-width: 34ch;
}
.pie__enlaces {
display: flex;
flex-wrap: wrap;
gap: 0 1.4rem;
}
.pie__enlaces a {
padding-block: 0.6rem;
}
/* En la línea legal el enlace convive con texto del mismo color y tamaño: sin
subrayado no había forma de saber que era un enlace. */
.pie__legal a {
text-decoration: underline;
text-underline-offset: 3px;
}
.pie__legal a:hover {
color: var(--volt);
}
.pie__enlaces a:hover {
color: var(--volt);
}
.pie__legal {
margin-top: var(--e3);
padding-top: var(--e2);
border-top: 1px solid var(--linea);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 1.5rem;
}
/* ------------------------------------------------- Botón flotante de WhatsApp */
/* Vive en la esquina inferior derecha del escritorio, que es donde la página no
tiene ningún CTA fijo. En el celular NO se muestra: ahí manda la barra de abajo,
y dos botones de WhatsApp encimados restan en vez de sumar. */
.flotante {
position: fixed;
right: clamp(1.25rem, 2.5vw, 2.25rem);
bottom: clamp(1.25rem, 2.5vw, 2.25rem);
z-index: 95;
width: 60px;
height: 60px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--volt);
color: #0b0c0e;
box-shadow: 0 12px 30px -8px rgba(184, 230, 46, 0.55), 0 4px 12px rgba(0, 0, 0, 0.5);
/* Arranca escondido: aparece cuando el visitante deja atrás la portada. */
opacity: 0;
visibility: hidden;
transform: translateY(14px) scale(0.85);
transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 260ms, background-color var(--transicion);
}
.flotante.a-la-vista {
opacity: 1;
visibility: visible;
transform: none;
}
.flotante:hover {
background: var(--volt-claro);
}
.flotante svg {
width: 32px;
height: 32px;
}
/* La etiqueta sale del propio botón al pasar el ratón. */
.flotante__globo {
position: absolute;
right: calc(100% + 12px);
white-space: nowrap;
background: var(--card-2);
color: var(--ink);
border: 1px solid var(--linea-2);
border-radius: 999px;
padding: 0.5rem 0.95rem;
font-size: 0.9375rem;
font-weight: 600;
box-shadow: var(--sombra);
opacity: 0;
transform: translateX(8px);
pointer-events: none;
transition: opacity var(--transicion), transform var(--transicion);
}
.flotante:hover .flotante__globo,
.flotante:focus-visible .flotante__globo {
opacity: 1;
transform: none;
}
/* Anillo que late un par de veces al aparecer, para que se note sin ser molesto. */
@media (prefers-reduced-motion: no-preference) {
.flotante.a-la-vista::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--volt);
animation: pulso 2.6s cubic-bezier(0.22, 1, 0.36, 1) 2;
}
}
@media (max-width: 860px) {
.flotante {
display: none;
}
}
/* Barra fija de acción en el celular: la conversión principal siempre a la mano. */
.barra-movil {
display: none;
position: fixed;
inset: auto 0 0 0;
z-index: 90;
padding: 0.65rem var(--canal) calc(0.65rem + env(safe-area-inset-bottom));
background: rgba(15, 16, 19, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--linea);
gap: 0.6rem;
}
.barra-movil .btn {
flex: 1;
padding: 0.9rem 0.75rem;
font-size: 1rem;
}
.barra-movil .btn--linea {
flex: 0 0 auto;
padding-inline: 1.1rem;
}
/* ------------------------------------------------------------- Adaptación */
@media (max-width: 980px) {
.portada__rejilla {
grid-template-columns: 1fr;
}
.portada__visual {
max-width: 620px;
}
.sello {
left: 0.75rem;
}
}
@media (max-width: 860px) {
.menu-boton {
display: flex;
}
.cabecera .btn--volt {
display: none;
}
.nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
margin: 0;
/* El bloque contenedor es .cabecera__fila, que también es .envoltura: sin los
márgenes negativos el panel se quedaba corto y el fondo no llegaba a los
bordes de la pantalla. */
margin: 0 calc(var(--canal) * -1);
padding: 0.5rem calc(var(--canal) * 2) 1.25rem;
/* Opaco de verdad: el menú se despliega encima del titular del hero y con
cualquier transparencia las dos capas de texto se encimaban. */
background: var(--ground);
border-bottom: 1px solid var(--linea);
box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.9);
display: none;
}
.nav.abierto {
display: flex;
}
.nav a {
padding: 0.85rem 0;
border-bottom: 1px solid var(--linea);
font-size: 1.125rem;
}
.nav a::after {
display: none;
}
.barra-movil {
display: flex;
}
/* Que la barra fija no tape el final del contenido —solo en la página que la
trae; el aviso de privacidad y el 404 no la tienen. */
body:has(.barra-movil) {
padding-bottom: 76px;
}
html {
scroll-padding-top: 76px;
/* Y que tampoco tape lo que se acaba de enfocar con el teclado ni el
destino de un ancla. */
scroll-padding-bottom: 84px;
}
.sede::after {
display: none;
}
}
@media (max-width: 560px) {
.portada__acciones .btn {
width: 100%;
}
.cierre__acciones .btn {
width: 100%;
}
.sello {
position: static;
margin-top: 0.9rem;
width: fit-content;
}
}
/* ============================================================================
16. CAPA VISUAL
----------------------------------------------------------------------------
Todo lo de aquí abajo es atmósfera: grano, resplandores que respiran, luz que
sigue al cursor, el cintillo que corre solo y el barrido sobre el titular.
Ninguno cambia la maquetación —solo pintan— y todos se apagan con
"prefers-reduced-motion", así que no cuestan ni un punto de rendimiento ni de
accesibilidad.
========================================================================== */
/* ---- Grano. Le quita el plano digital al negro y hace que se sienta impreso. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
background-size: 140px 140px;
}
/* ---- Resplandores que respiran, detrás de la portada y del cierre. */
@media (prefers-reduced-motion: no-preference) {
.portada::after {
animation: respirar 14s ease-in-out infinite alternate;
}
.cierre::before {
animation: respirar 18s ease-in-out infinite alternate-reverse;
}
}
@keyframes respirar {
from {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.75;
}
to {
transform: translate3d(-4%, 3%, 0) scale(1.14);
opacity: 1;
}
}
/* ---- Luz que sigue al cursor sobre las tarjetas.
js/app.js escribe --mx/--my; sin JS simplemente no se enciende. */
.modulo,
.lector,
.pieza,
.plan,
.paso {
position: relative;
}
.modulo::after,
.lector::after,
.pieza::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
260px circle at var(--mx, 50%) var(--my, 50%),
rgba(184, 230, 46, 0.13),
transparent 65%
);
opacity: 0;
transition: opacity 260ms ease;
}
.modulo:hover::after,
.lector:hover::after,
.pieza:hover::after {
opacity: 1;
}
/* ---- Barrido de luz sobre la palabra en volt del titular. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
@media (prefers-reduced-motion: no-preference) {
h1.display .v,
.cierre .display .v {
background-image: linear-gradient(
100deg,
var(--volt) 30%,
#f2ffc4 45%,
var(--volt) 60%
);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: barrido 7s ease-in-out 1.2s infinite;
}
}
}
@keyframes barrido {
0%,
55% {
background-position: 120% 0;
}
100% {
background-position: -30% 0;
}
}
/* ---- Cintillo que corre solo, como un tablero de gimnasio. */
.cintillo {
--marquesina: 42s;
}
.cintillo__pista {
flex-wrap: nowrap;
justify-content: flex-start;
width: max-content;
/* El hueco final va DENTRO de cada copia, no entre las dos: así ambas miden
exactamente lo mismo y el desplazamiento del 50% cae justo, sin costura. */
padding-right: 2.2rem;
}
.cintillo .envoltura {
width: 100%;
max-width: none;
overflow: hidden;
/* Se difumina en los extremos para que no se corte en seco. */
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cintillo__cinta {
display: flex;
width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
.cintillo__cinta {
animation: correr var(--marquesina) linear infinite;
}
.cintillo:hover .cintillo__cinta {
animation-play-state: paused;
}
}
@keyframes correr {
to {
transform: translateX(-50%);
}
}
/* Aquí vivía un borde cónico giratorio en la tarjeta de precio. Se quitó: al ser un
pseudo-elemento con z-index negativo se salía del recorte de la tarjeta y lanzaba
un haz verde sobre el titular de la sección. La tarjeta ya destaca de sobra con su
sombra volt, así que no valía la pena pelearse con el apilamiento. */
/* ---- Las capturas grandes suben un poco al entrar: profundidad al hacer scroll.
Es una animación guiada por el scroll NATIVA: cero JavaScript. Los navegadores
que no la soportan simplemente no la aplican. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.muestra .marco,
#panel-web > .envoltura > .marco {
animation: emerger linear both;
animation-timeline: view();
animation-range: entry 10% cover 45%;
}
}
}
/* Solo movimiento, sin fundido: al bajar la opacidad, el texto dentro del marco
(el rótulo de la barra) quedaba por debajo del contraste mínimo mientras duraba
la animación, y las herramientas de accesibilidad lo marcaban con razón. El
desplazamiento da la misma sensación de profundidad y no toca la legibilidad. */
@keyframes emerger {
from {
transform: translateY(26px) scale(0.985);
}
to {
transform: none;
}
}
/* ---- Canto de luz.
En interfaz oscura el peso NO se hace con sombra negra —sobre un fondo casi negro
es invisible— sino con un filo de luz arriba y una caída corta abajo. Es lo que
convierte un rectángulo dibujado en una pieza montada sobre un chasis. */
.lector,
.pieza,
.sede,
.placa {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 1px 2px rgba(0, 0, 0, 0.55);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}
/* Estas dos viven en rejillas de gap:1px sobre --linea: la sombra exterior
ensuciaría las costuras, así que solo llevan el filo. */
.modulo,
.prueba {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* En .marco el filo interior no se ve (overflow:hidden y la imagen lo tapa), así que
la luz va en el borde superior, que ya existía. */
.marco {
border-top-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
}
.marco--volt {
border-top-color: rgba(184, 230, 46, 0.55);
}
/* ---- Respuesta al dedo. En el celular no existe :hover, y la única regla de
pulsación que había deshacía el hover: al tocar el botón de la conversión no
pasaba nada y con red lenta se sentía roto. */
.btn:active {
transform: translateY(1px) scale(0.985);
}
.btn--volt:active {
box-shadow: 0 6px 18px -10px rgba(184, 230, 46, 0.6);
}
.barra-movil .btn:active {
transform: scale(0.97);
}
@media (hover: none) {
.btn {
-webkit-tap-highlight-color: transparent;
transition-duration: 90ms;
}
.faq summary:active,
.contacto-directo a:active,
.pie__enlaces a:active {
color: var(--volt);
}
}
@media (prefers-reduced-motion: reduce) {
.btn:active,
.barra-movil .btn:active {
transform: none;
}
}
/* ---- El acordeón del FAQ se despliega en vez de saltar. Sigue siendo
nativo: cero JavaScript. Los navegadores que aún no soportan ::details-content
se quedan con la apertura instantánea de siempre, nunca con contenido escondido. */
@media (prefers-reduced-motion: no-preference) {
:root {
interpolate-size: allow-keywords;
}
.faq details::details-content {
block-size: 0;
overflow: clip;
transition: block-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
content-visibility 300ms allow-discrete;
}
.faq details[open]::details-content {
block-size: auto;
}
}
/* --------------------------------------------------- Páginas de texto legal */
.legal {
padding-block: clamp(6.5rem, 4rem + 8vw, 9rem) var(--e5);
}
.legal .envoltura {
max-width: 760px;
}
.legal h1 {
margin: var(--e2) 0 var(--e3);
}
.legal h2 {
font-family: var(--fuente-ui);
font-weight: 700;
font-size: 1.375rem;
margin-top: var(--e4);
margin-bottom: 0.6rem;
padding-top: var(--e2);
border-top: 1px solid var(--linea);
}
.legal p,
.legal li {
color: var(--ink-2);
max-width: 72ch;
}
.legal p + p,
.legal ul + p {
margin-top: var(--e2);
}
.legal ul {
margin: var(--e2) 0 0 1.2rem;
display: grid;
gap: 0.7rem;
}
.legal strong {
color: var(--ink);
}
.legal a {
color: var(--volt);
text-decoration: underline;
text-underline-offset: 3px;
}
/* En el celular los
se SUMAN al corte automático y el titular sale en cinco
líneas desiguales. Debajo de 700px manda text-wrap:balance, que ya está declarado
en .display y existe justo para esto. */
@media (max-width: 700px) {
.display br {
display: none;
}
}
/* Seis pasos en una rejilla de cuatro dejaban dos celdas huérfanas. 6 se divide
entre 3 y entre 2: no sobra ninguna en ningún escalón. */
@media (min-width: 900px) {
.pasos {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--e4);
}
}
@media (min-width: 560px) and (max-width: 899px) {
.pasos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* #portal trae el visual primero en el DOM, así que sin esto quedarían dos bloques
invertidos seguidos y se perdería la alternancia. order en grid no toca el orden
de lectura ni el del teclado. */
@media (min-width: 781px) {
#portal .bloque__visual {
order: 1;
}
/* El segundo bloque de #portal (la app del personal) sí va invertido: así los
dos teléfonos de la sección quedan uno a cada lado. */
#portal .bloque--invertido .bloque__visual {
order: -1;
}
}
/* ------------------------------------------- 16. Formulario de contacto */
/* El bloque vive dentro del cierre, debajo del botón de WhatsApp. El separador
con la palabra "o" no es adorno: deja claro de un vistazo que esto es la vía
alterna y no un segundo trámite que hay que hacer además del chat. */
.respaldo {
width: min(100%, 30rem);
margin-top: var(--e2);
text-align: left;
}
.respaldo__o {
display: flex;
align-items: center;
gap: var(--e2);
margin-bottom: var(--e3);
color: var(--ink-3);
font-size: 0.9375rem;
text-align: center;
}
.respaldo__o::before,
.respaldo__o::after {
content: "";
flex: 1;
height: 1px;
background: var(--linea-2);
}
.lead {
display: grid;
gap: var(--e2);
}
.lead__campos {
display: grid;
gap: 0.85rem;
}
.campo {
display: grid;
gap: 0.35rem;
}
.campo label {
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink-2);
letter-spacing: 0.01em;
}
.campo__opcional {
font-weight: 400;
color: var(--ink-3);
}
.campo input {
width: 100%;
padding: 0.9rem 1rem;
background: var(--ground);
color: var(--ink);
border: 1px solid var(--linea-2);
border-radius: var(--radio-chico);
font-family: inherit;
/* 16px o más: por debajo de eso, Safari en iPhone hace zoom al enfocar el
campo y deja la página descuadrada a media captura de datos. */
font-size: 1.0625rem;
line-height: 1.3;
transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input::placeholder {
color: var(--ink-3);
opacity: 0.7;
}
.campo input:focus-visible {
outline: none;
border-color: var(--volt);
box-shadow: 0 0 0 3px rgba(184, 230, 46, 0.18);
}
/* El campo se marca en rojo solo DESPUÉS de intentar enviar (lo pone app.js).
Con :invalid a secas, el formulario nace todo en rojo antes de que la persona
escriba una letra, que es la forma más rápida de que se vaya. */
.campo input[aria-invalid="true"] {
border-color: var(--alerta);
}
.campo__error {
margin-top: 0.15rem;
color: var(--alerta);
font-size: 0.875rem;
font-weight: 600;
}
/* Fuera de la pantalla, no display:none: hay bots que descartan lo que está
oculto con display, y este campo solo sirve si parece real. */
.trampa {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.lead__turnstile:not(:empty) {
margin-block: 0.25rem;
}
.lead__nota {
color: var(--ink-3);
font-size: 0.875rem;
line-height: 1.45;
text-align: center;
}
.lead__nota a {
color: var(--ink-2);
text-decoration: underline;
text-underline-offset: 2px;
}
.lead__nota a:hover {
color: var(--volt);
}
/* Vacío no ocupa espacio: sin esto el formulario "salta" al aparecer el mensaje. */
.lead__estado:empty {
display: none;
}
.lead__estado {
padding: 0.85rem 1rem;
border: 1px solid var(--linea-2);
border-radius: var(--radio-chico);
background: var(--card);
font-size: 0.9375rem;
line-height: 1.45;
}
.lead__estado--error {
border-color: var(--alerta);
color: var(--ink);
}
.lead__estado a {
color: var(--volt);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.lead[data-enviando] .lead__campos,
.lead[data-enviando] button {
opacity: 0.55;
pointer-events: none;
}
.enlace-sutil {
color: var(--ink-2);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--linea-2);
transition: color var(--transicion), text-decoration-color var(--transicion);
}
.enlace-sutil:hover {
color: var(--volt);
text-decoration-color: var(--volt);
}
/* ------------------------------------------------------- Página de gracias */
.gracias {
min-height: 70vh;
display: grid;
align-content: center;
justify-items: center;
text-align: center;
gap: var(--e3);
/* Arriba lleva más aire que abajo: la cabecera es fija y se come los primeros
~84 px, así que con el mismo padding en los dos lados el contenido queda
pegado a ella y visualmente descentrado. */
padding-block: calc(var(--e5) + 84px) var(--e5);
}
.gracias__marca {
display: grid;
place-items: center;
width: 84px;
height: 84px;
border-radius: 50%;
background: rgba(184, 230, 46, 0.12);
border: 1px solid rgba(184, 230, 46, 0.4);
color: var(--volt);
}
.gracias__marca svg {
width: 40px;
height: 40px;
}
.gracias .entrada {
margin-inline: auto;
}
/* ============================================================================
PANTALLA DE ACCESO ANIMADA (portada, 13 oct 2026)
----------------------------------------------------------------------------
La ventana del kiosko del escritorio (PantallaSocioWindow, 1.0.101+) rehecha
en HTML: su lienzo de 1280x720 se dibuja en unidades de 1/1280 del ancho del
marco (--u, con unidades de contenedor), así que se ve igual de grande o de
chica, como el Viewbox del original. Colores, medidas, iconos y tiempos salen
de PantallaSocioWindow.xaml(.cs): si cambian allá, se cambian aquí. Los casos
y el ciclo los pone js/app.js.
========================================================================== */
@font-face {
font-family: "Inter Kiosko";
src: url("../fonts/inter-500-latin.woff") format("woff");
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Inter Kiosko";
src: url("../fonts/inter-600-latin.woff") format("woff");
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Inter Kiosko";
src: url("../fonts/inter-700-latin.woff") format("woff");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Inter Kiosko";
src: url("../fonts/inter-800-latin.woff") format("woff");
font-weight: 800;
font-display: swap;
}
.kiosko {
container-type: inline-size;
}
.kiosko__lienzo {
--u: calc(100cqw / 1280);
--estado: #30d158;
--brillo: rgba(48, 209, 88, 0.16);
--secundario: rgba(235, 235, 245, 0.62);
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
overflow: hidden;
font-family: "Inter Kiosko", "Segoe UI", system-ui, sans-serif;
font-weight: 500;
line-height: 1.21;
letter-spacing: 0;
text-transform: none;
color: #f5f5f7;
background:
radial-gradient(45% 60% at 50% 50%, var(--brillo), transparent 72%),
radial-gradient(60% 70% at 10% 0%, rgba(184, 230, 46, 0.16), transparent 70%),
radial-gradient(55% 70% at 96% 100%, rgba(10, 132, 255, 0.16), transparent 70%),
linear-gradient(#14161a, #0a0b0d);
}
.kiosko__lienzo[data-estado="no"] {
--estado: #ff453a;
--brillo: rgba(255, 69, 58, 0.16);
}
.kiosko__lienzo[data-estado="personal"] {
--estado: #0a84ff;
--brillo: rgba(10, 132, 255, 0.16);
}
.kiosko__lienzo[data-estado="salida"] {
--estado: #bf5af2;
--brillo: rgba(191, 90, 242, 0.16);
}
.kiosko [hidden] {
display: none !important;
}
.kiosko svg {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
.kiosko__barra {
position: absolute;
top: calc(26 * var(--u));
left: calc(44 * var(--u));
right: calc(44 * var(--u));
display: flex;
align-items: center;
height: calc(36 * var(--u));
font-size: calc(20 * var(--u));
font-weight: 600;
}
.kiosko__marca {
display: grid;
place-items: center;
width: calc(36 * var(--u));
height: calc(36 * var(--u));
margin-right: calc(12 * var(--u));
border-radius: calc(10 * var(--u));
background: rgba(118, 118, 128, 0.24);
}
.kiosko__marca svg {
width: calc(20 * var(--u));
height: calc(20 * var(--u));
stroke: #b8e62e;
stroke-width: 2.2;
}
.kiosko__hora {
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.kiosko__pase {
box-sizing: border-box;
display: grid;
grid-template-columns: calc(256 * var(--u)) 1fr;
column-gap: calc(48 * var(--u));
align-items: center;
width: calc(980 * var(--u));
margin-bottom: calc(44 * var(--u));
padding: calc(44 * var(--u)) calc(52 * var(--u));
border: max(1px, var(--u)) solid rgba(255, 255, 255, 0.09);
border-radius: calc(44 * var(--u));
background: rgba(28, 28, 30, 0.8);
}
.kiosko__foto {
position: relative;
width: calc(256 * var(--u));
height: calc(256 * var(--u));
}
.kiosko__anillo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.kiosko__pista,
.kiosko__trazo {
stroke: var(--estado);
stroke-width: 14;
}
.kiosko__pista {
opacity: 0.24;
}
/* 742 = la vuelta completa (2·π·118); se dibuja desde arriba, como el RotateTransform -90 del original. */
.kiosko__trazo {
stroke-dasharray: 742 742;
stroke-dashoffset: 0;
transform: rotate(-90deg);
transform-box: fill-box;
transform-origin: center;
}
/* Sin acceso, el anillo queda vacío: solo su pista tenue. */
.kiosko__lienzo[data-estado="no"] .kiosko__trazo {
visibility: hidden;
}
.kiosko__disco {
position: absolute;
top: calc(20 * var(--u));
left: calc(20 * var(--u));
display: grid;
place-items: center;
width: calc(216 * var(--u));
height: calc(216 * var(--u));
overflow: hidden;
border-radius: 50%;
background: #2c2c2e;
}
.kiosko__iniciales {
font-size: calc(96 * var(--u));
font-weight: 800;
color: var(--secundario);
}
.kiosko__retrato,
.kiosko__retrato img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.kiosko__insignia {
position: absolute;
right: calc(4 * var(--u));
bottom: calc(4 * var(--u));
box-sizing: border-box;
display: grid;
place-items: center;
width: calc(64 * var(--u));
height: calc(64 * var(--u));
border: calc(5 * var(--u)) solid #1c1c1e;
border-radius: 50%;
background: var(--estado);
}
.kiosko__insignia svg {
width: calc(30 * var(--u));
height: calc(30 * var(--u));
stroke: #fff;
stroke-width: 3;
}
.kiosko__info p {
margin: 0;
}
.kiosko__saludo {
display: flex;
align-items: center;
gap: calc(10 * var(--u));
font-size: calc(30 * var(--u));
font-weight: 700;
color: var(--estado);
}
.kiosko__saludo svg {
width: calc(28 * var(--u));
height: calc(28 * var(--u));
stroke: currentColor;
stroke-width: 2.8;
}
.kiosko__info .kiosko__nombre {
margin-top: calc(14 * var(--u));
font-size: calc(56 * var(--u));
font-weight: 700;
line-height: calc(58 * var(--u));
}
.kiosko__linea {
height: max(1px, var(--u));
margin: calc(20 * var(--u)) 0;
border: 0;
background: rgba(84, 84, 88, 0.65);
}
.kiosko__mensaje {
font-size: calc(30 * var(--u));
color: var(--secundario);
}
.kiosko__campos {
display: flex;
gap: calc(52 * var(--u));
}
.kiosko__mensaje:not([hidden]) + .kiosko__campos {
margin-top: calc(14 * var(--u));
}
.kiosko__campos span {
display: block;
font-size: calc(20 * var(--u));
color: var(--secundario);
}
.kiosko__campos b {
display: block;
margin-top: calc(2 * var(--u));
font-size: calc(34 * var(--u));
font-weight: 600;
}
.kiosko__info .kiosko__chip {
display: flex;
align-items: center;
margin-top: calc(18 * var(--u));
padding: calc(14 * var(--u)) calc(20 * var(--u));
border-radius: calc(18 * var(--u));
background: rgba(255, 159, 10, 0.16);
font-size: calc(24 * var(--u));
font-weight: 600;
color: #ff9f0a;
}
.kiosko__chip svg {
width: calc(26 * var(--u));
height: calc(26 * var(--u));
stroke: currentColor;
stroke-width: 2.2;
}
.kiosko__chip span {
margin-left: calc(12 * var(--u));
}
.kiosko__chip b {
margin-left: auto;
font-weight: 600;
color: #ffd08a;
}
.kiosko__firma {
position: absolute;
left: 0;
right: 0;
bottom: calc(22 * var(--u));
margin: 0;
text-align: center;
font-size: calc(16 * var(--u));
}
.kiosko__firma b,
.kiosko__firma span {
display: block;
}
.kiosko__firma b {
font-weight: 600;
color: var(--secundario);
}
.kiosko__firma span {
color: rgba(235, 235, 245, 0.4);
}
/* La animación al marcar, con los tiempos de Animar() del escritorio: el pase aparece (260 ms) y sube
36 px (420 ms, CubicEase), el anillo se dibuja de los 120 a los 770 ms y la insignia brinca de los 380
a los 800 ms (BackEase, amplitud 0.6, muestreada en linear()). Al irse, el pase se desvanece rápido. */
@media (prefers-reduced-motion: no-preference) {
.kiosko--entra .kiosko__pase {
animation:
kiosko-aparece 260ms linear both,
kiosko-sube 420ms cubic-bezier(0.33, 1, 0.68, 1) both;
}
.kiosko--entra .kiosko__trazo {
animation: kiosko-anillo 650ms cubic-bezier(0.33, 1, 0.68, 1) 120ms both;
}
.kiosko--entra .kiosko__insignia {
animation: kiosko-brinco 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 380ms both;
animation-timing-function: linear(0, 0.2318, 0.4379, 0.6174, 0.7701, 0.8963, 0.9968, 1.073, 1.126, 1.16, 1.175, 1.176, 1.164, 1.144, 1.119, 1.09, 1.063, 1.037, 1.018, 1.005, 1);
}
.kiosko--sale .kiosko__pase {
animation: kiosko-se-va 180ms ease-in both;
}
}
@keyframes kiosko-aparece {
from {
opacity: 0;
}
}
@keyframes kiosko-sube {
from {
transform: translateY(calc(36 * var(--u)));
}
}
@keyframes kiosko-anillo {
from {
stroke-dashoffset: 742;
}
}
@keyframes kiosko-brinco {
from {
transform: scale(0);
}
}
@keyframes kiosko-se-va {
to {
opacity: 0;
transform: translateY(calc(-12 * var(--u)));
}
}
.kiosko__puntos {
position: absolute;
right: 0.7rem;
bottom: 0.55rem;
z-index: 1;
display: flex;
gap: 0.1rem;
}
.kiosko__puntos[hidden] {
display: none;
}
.kiosko__puntos button {
display: grid;
place-items: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.kiosko__puntos button::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: rgba(238, 240, 242, 0.38);
transition: width 0.3s ease, background-color 0.3s ease;
}
.kiosko__puntos button[aria-current="true"]::before {
width: 18px;
background: var(--volt);
}
.kiosko__puntos button:focus-visible {
outline: 2px solid var(--volt);
outline-offset: 1px;
border-radius: 6px;
}
/* El sello toma el color del estado, como el anillo: verde entra, rojo no entra, azul personal, morado
salida. Con un ancho mínimo para que no brinque entre textos. */
.sello {
min-width: min(20.5rem, calc(100vw - 2.5rem));
transition: border-color 0.4s ease;
}
.sello[data-estado="no"] {
--luz: #ff453a;
border-color: rgba(255, 69, 58, 0.5);
}
.sello[data-estado="personal"] {
--luz: #0a84ff;
border-color: rgba(10, 132, 255, 0.5);
}
.sello[data-estado="salida"] {
--luz: #bf5af2;
border-color: rgba(191, 90, 242, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
.sello--cambio > span:last-child {
animation: asomar 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
}
@keyframes asomar {
from {
transform: translateY(0.45rem);
}
}
@media print {
.cabecera,
.barra-movil,
.riel {
display: none;
}
body {
background: #fff;
color: #000;
}
}