/* Entrum Software · web comercial. Los colores vienen de sitio.json (construir.py los rellena).
   Formas: botones y campos 10px, ventanas y planes 14px, teléfonos 40px. */

@font-face { font-family: "Bricolage Grotesque"; src: url("fuentes/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fuentes/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --tinta: #17191D;
  --fondo: #F3F4F1;
  --superficie: #FFFFFF;
  --acento: #2F5BEA;
  --permitida: #17915A;
  --denegada: #D0402B;
  --texto-2: #50565F;          /* texto secundario: 6,4:1 sobre el fondo */
  --linea: #DADCD6;
  --linea-fuerte: #8B9089;     /* bordes de campos: 3:1 sobre blanco */
  --sombra: 0 30px 60px -30px rgb(23 25 29 / .30), 0 2px 8px rgb(23 25 29 / .06);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  --suave: cubic-bezier(.16, 1, .3, 1);
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1.0625rem/1.6 var(--texto); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 750; }
h3 { font-size: 1.45rem; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--margen); }
.saltar { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 30; }
.saltar:focus { left: 12px; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 10px;
  font: 650 1rem var(--texto); text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s var(--suave), background-color .2s var(--suave), box-shadow .2s var(--suave); }
.boton:active { transform: translateY(1px) scale(.99); }
.boton-principal { background: var(--acento); color: #fff; box-shadow: 0 8px 20px -10px rgb(47 91 234 / .7); }
.boton-principal:hover { background: color-mix(in srgb, var(--acento) 86%, var(--tinta)); }
.boton-secundario { border-color: var(--tinta); color: var(--tinta); }
.boton-secundario:hover { background: var(--tinta); color: var(--fondo); }

/* ---------- cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fondo) 94%, transparent); border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: 28px; height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.3rem var(--display); letter-spacing: -.02em; }
.marca svg { width: 30px; height: 30px; flex-shrink: 0; }
.marca img { height: 32px; width: auto; }
.menu { display: none; gap: 26px; margin-left: auto; font-weight: 550; font-size: .97rem; }
.menu a { text-decoration: none; color: var(--texto-2); padding: 6px 0; }
.menu a:hover { color: var(--tinta); }
.boton-cabecera { margin-left: auto; min-height: 42px; padding: 0 18px; }
@media (min-width: 1080px) { .menu { display: flex; } .boton-cabecera { margin-left: 0; } }

/* ---------- marcos de las capturas ---------- */
.ventana { background: var(--superficie); border-radius: 14px; overflow: hidden; border: 1px solid rgb(23 25 29 / .10); box-shadow: var(--sombra); }
.ventana::before { content: ""; display: block; height: 14px; background: #ECEDE9; border-bottom: 1px solid rgb(23 25 29 / .06); }
.pie-captura { margin-top: 12px; font-size: .82rem; color: var(--texto-2); }
figure { margin: 0; }

.portatil-pantalla { background: var(--tinta); padding: 10px; border-radius: 16px 16px 6px 6px; box-shadow: var(--sombra); }
.portatil-pantalla img { border-radius: 5px; }
.portatil-base { height: 14px; margin: 0 -3%; background: linear-gradient(#D3D5D0, #B7BAB4); border-radius: 0 0 14px 14px; position: relative; }
.portatil-base::after { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 5px; background: #A6A9A3; border-radius: 0 0 6px 6px; }

/* ---------- 1. portada ---------- */
.portada { padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.portada-rejilla { display: grid; gap: 48px; align-items: center; }
.antetitulo { margin-bottom: 18px; font-weight: 650; font-size: .95rem; color: var(--acento); letter-spacing: .01em; }
.portada h1 { font-size: clamp(2.3rem, 4vw, 3.35rem); font-weight: 800; max-width: 17ch; }
.entradilla { margin-top: 22px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--texto-2); max-width: 34ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.portada-visual { position: relative; }
.tarjeta-denegada { position: relative; z-index: 2; width: 82%; margin: -14% 0 0 auto; }
.tarjeta-denegada img, .detalle-permitida img { border-radius: 14px; }
.tarjeta-denegada img { box-shadow: 0 36px 60px -28px rgb(208 64 43 / .5), 0 2px 8px rgb(23 25 29 / .08); }
.portada .pie-captura { text-align: right; }
@media (min-width: 1024px) {
  .portada-rejilla { grid-template-columns: 1fr 1fr; gap: 48px; }
  .portada-visual { margin-right: -5vw; padding-bottom: 8px; }
  .tarjeta-denegada { width: 54%; margin: -20% 0 0 -12%; }
  .portada .pie-captura { text-align: left; }
}

/* ---------- secciones ---------- */
.seccion { padding: clamp(64px, 8vw, 112px) 0; }
.seccion p + p { margin-top: 14px; }
.lista-puntos { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.lista-puntos li { padding-left: 22px; position: relative; color: var(--texto-2); }
.lista-puntos li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--tinta); }
.lista-puntos strong { color: var(--tinta); }

/* 2. recepción: detalle recortado sobre el historial */
.recepcion-rejilla { display: grid; gap: 32px; }
.recepcion-texto p { margin-top: 20px; color: var(--texto-2); max-width: 46ch; }
.detalle-permitida img { box-shadow: 0 40px 70px -30px rgb(23 145 90 / .45), 0 2px 8px rgb(23 25 29 / .08); }
@media (min-width: 1024px) {
  .recepcion-rejilla { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 0; }
  .recepcion-texto { grid-column: 1 / 6; grid-row: 1; align-self: center; padding-bottom: 96px; }
  .detalle-permitida { grid-column: 6 / 13; grid-row: 1; align-self: end; position: relative; z-index: 2; margin-bottom: -84px; }
  .recepcion-historial { grid-column: 4 / 13; grid-row: 2; }
  .recepcion-socio { grid-column: 1 / 5; grid-row: 2; align-self: end; position: relative; z-index: 3; margin-bottom: -48px; }
}

/* 3. socios y cobros: ventana ancha con piezas encima */
.socios { background: var(--superficie); border-block: 1px solid var(--linea); }
.socios-cabecera { max-width: 760px; }
.socios-cabecera p { margin-top: 18px; color: var(--texto-2); max-width: 54ch; }
.socios-composicion { display: grid; gap: 20px; margin-top: 56px; }
.datos-columnas { display: grid; gap: 28px; margin: 64px 0 0; }
.datos-columnas div { position: relative; padding-top: 16px; }
.datos-columnas div::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--tinta); transform-origin: left; }
.datos-columnas dt { font: 700 1.1rem var(--display); }
.datos-columnas dd { margin: 6px 0 0; color: var(--texto-2); }
@media (min-width: 720px) { .datos-columnas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .socios-composicion { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 0; }
  .socios-lista { grid-column: 1 / 10; grid-row: 1 / 3; align-self: start; }
  .socios-cobro { grid-column: 8 / 13; grid-row: 1; margin-top: 18%; position: relative; z-index: 2; }
  .socios-caja { grid-column: 6 / 11; grid-row: 2; align-self: end; margin-bottom: -10%; position: relative; z-index: 3; }
  .socios .pie-captura { margin-top: 72px; }
  .datos-columnas { grid-template-columns: repeat(4, 1fr); }
}

/* 4. clases: horario grande, texto y dos piezas abajo */
.clases-rejilla { display: grid; gap: 32px; }
.clases-texto p { margin-top: 20px; color: var(--texto-2); max-width: 44ch; }
.clases-lista { max-width: 320px; }
.clases-pie { margin-top: -20px; }
@media (min-width: 1024px) {
  .clases-rejilla { grid-template-columns: repeat(12, 1fr); column-gap: 28px; row-gap: 0; }
  .clases-horario { grid-column: 1 / 8; grid-row: 1; align-self: start; }
  .clases-texto { grid-column: 8 / 13; grid-row: 1; align-self: center; }
  .clases-lista { grid-column: 2 / 5; grid-row: 2; margin-top: -26%; position: relative; z-index: 2; align-self: start; max-width: none; }
  .clases-socios { grid-column: 6 / 13; grid-row: 2; margin-top: 56px; align-self: start; }
  .clases-pie { grid-column: 6 / 13; grid-row: 3; margin-top: 12px; }
  .portatil-base { margin: 0 -6%; }
}

/* 5. informes y avisos: dos columnas desplazadas */
.informes h2 { max-width: 20ch; }
.informes-dos { display: grid; gap: 40px; margin-top: 52px; }
.informes figcaption { margin-top: 16px; color: var(--texto-2); max-width: 52ch; }
.informes figcaption strong { color: var(--tinta); }
@media (min-width: 900px) {
  .informes-dos { grid-template-columns: 1fr 1fr; gap: 32px; }
  .informes-avisos { margin-top: 96px; }
}

/* 6. tus datos */
.datos-rejilla { display: grid; gap: 48px; align-items: center; }
.datos-lista { margin: 32px 0 0; display: grid; gap: 22px; }
.datos-lista dt { font: 700 1.15rem var(--display); }
.datos-lista dd { margin: 4px 0 0; color: var(--texto-2); max-width: 46ch; }
@media (min-width: 1024px) { .datos-rejilla { grid-template-columns: 5fr 7fr; gap: 64px; } }

/* 7. cambiarse */
.cambiarse { background: var(--superficie); border-block: 1px solid var(--linea); }
.cambiarse-intro { margin-top: 18px; color: var(--texto-2); max-width: 58ch; }
.cambiarse-rejilla { display: grid; gap: 40px; margin-top: 48px; align-items: start; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: paso; }
.pasos li { position: relative; padding: 18px 0; color: var(--texto-2); }
.pasos li::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--linea); transform-origin: left; }
.pasos li:first-child::before { height: 2px; background: var(--tinta); }
.pasos strong { display: block; color: var(--tinta); font: 700 1.15rem var(--display); margin-bottom: 2px; }
@media (min-width: 1024px) { .cambiarse-rejilla { grid-template-columns: 4fr 8fr; gap: 56px; } }

/* 8. móvil: la única sección oscura (las pantallas del móvil son oscuras) */
.movil { background: var(--tinta); color: var(--fondo); overflow: hidden; }
.movil-cabecera { max-width: 620px; }
.movil-cabecera p:not(.etiqueta) { margin-top: 16px; color: #B4B9C0; }
.etiqueta { display: inline-block; margin-bottom: 18px; padding: 5px 12px; border: 1px solid #4A4F57; border-radius: 10px; font-size: .85rem; font-weight: 650; color: #D6D9DD; }
.telefonos { display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 240px); gap: 24px; margin-top: 56px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.telefono { scroll-snap-align: start; background: #2A2D33; padding: 9px; border-radius: 40px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .08); }
.telefono img { border-radius: 32px; }
.movil .pie-captura { color: #9AA0A8; }
@media (min-width: 1024px) {
  .telefonos { grid-auto-flow: initial; grid-template-columns: repeat(4, 1fr); overflow: visible; gap: 32px; max-width: 1080px; }
  .telefono:nth-child(even) { transform: translateY(48px); }
  .movil .pie-captura { margin-top: 72px; }
}

/* 9. precios */
.aviso-precios { margin-top: 16px; display: inline-block; padding: 8px 14px; border-radius: 10px; background: #FFF4D6; color: #6B4A00; font-weight: 600; font-size: .95rem; }
.planes { display: grid; gap: 24px; margin-top: 44px; align-items: start; }
.plan { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 32px; }
.plan > p:not(.plan-precio):not(.plan-alta) { margin-top: 16px; color: var(--texto-2); }
.plan-precio { margin-top: 18px; font-size: 1.05rem; color: var(--texto-2); }
.plan-precio span { font: 800 clamp(2.4rem, 4vw, 3.2rem) var(--display); color: var(--tinta); letter-spacing: -.03em; margin-right: 4px; }
.plan-alta { margin-top: 4px; font-size: .95rem; color: var(--texto-2); }
.plan-capturas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.plan-capturas .ventana::before { height: 10px; }
.plan-destacado { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.plan-destacado .plan-precio span { color: #fff; }
.plan-destacado .plan-precio, .plan-destacado .plan-alta, .plan-destacado > p:not(.plan-precio):not(.plan-alta) { color: #C3C7CD; }
.plan-destacado .lista-puntos li { color: #C3C7CD; }
.plan-destacado .lista-puntos li::before { background: var(--fondo); }
.plan-destacado .boton { margin-top: 28px; }
.precios-notas { margin-top: 28px; color: var(--texto-2); font-size: .97rem; max-width: 70ch; }
@media (min-width: 1024px) { .planes { grid-template-columns: 7fr 5fr; } .plan-destacado { margin-top: 56px; } }

/* 10. preguntas */
.preguntas-lista { margin: 44px 0 0; display: grid; gap: 34px 56px; }
.preguntas-lista dt { font: 700 1.2rem var(--display); }
.preguntas-lista dd { margin: 8px 0 0; color: var(--texto-2); max-width: 52ch; }
@media (min-width: 900px) { .preguntas-lista { grid-template-columns: 1fr 1fr; } }

/* 11. pedir demo */
.demo { background: var(--superficie); border-top: 1px solid var(--linea); }
.demo-rejilla { display: grid; gap: 40px; }
.demo-texto p { margin-top: 18px; color: var(--texto-2); max-width: 40ch; }
.contacto-directo { margin-top: 28px; display: grid; gap: 6px; font-weight: 600; }
.formulario { display: grid; gap: 20px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 14px; padding: clamp(20px, 3vw, 36px); }
.campo { display: grid; gap: 8px; align-content: start; }
.campo label { font-weight: 650; }
.opcional { font-weight: 400; color: var(--texto-2); }
.campo input[type=text], .campo input[type=tel], .campo input[type=email], .campo textarea {
  width: 100%; font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: 10px; padding: 12px 14px; }
.campo textarea { resize: vertical; min-height: 110px; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.campo [aria-invalid=true] { border-color: var(--denegada); }
.campo-error { color: #B3301C; font-size: .92rem; font-weight: 600; }
.campo-ayuda { color: var(--texto-2); font-size: .9rem; }
.campo-pareja { display: grid; gap: 20px; }
.campo-casilla { grid-template-columns: auto 1fr; align-items: start; column-gap: 10px; }
.campo-casilla input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--acento); }
.campo-casilla label { font-weight: 400; }
.campo-casilla .campo-error { grid-column: 1 / -1; }
.formulario .boton { justify-self: start; }
.formulario .boton[disabled] { opacity: .7; cursor: progress; }
.formulario-estado { font-weight: 650; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-estado.ok { color: #0F6E43; }
.formulario-estado.error { color: #B3301C; }
@media (min-width: 640px) { .campo-pareja { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .demo-rejilla { grid-template-columns: 5fr 7fr; gap: 72px; } }

/* ---------- pie ---------- */
.pie { padding: 40px 0 48px; border-top: 1px solid var(--linea); }
.pie-fila { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; color: var(--texto-2); font-size: .95rem; }
.marca-pie { font-size: 1.15rem; color: var(--tinta); }
.pie nav { display: flex; gap: 20px; margin-left: auto; }
.pie nav a { color: var(--tinta); }
.pie-copy { width: 100%; font-size: .85rem; }

/* ---------- páginas legales ---------- */
.legal { padding: 56px 0 96px; max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.legal h2 { font-size: 1.35rem; margin-top: 36px; }
.legal p, .legal li { margin-top: 12px; color: var(--texto-2); }
.pendiente { background: #FFF4D6; color: #6B4A00; padding: 2px 6px; border-radius: 6px; font-weight: 650; }

/* ---------- animaciones ----------
   Todo se mueve con translate/scale/opacity (no recoloca la página) y solo si <html> lleva la clase «anim»,
   que se pone en el <head> cuando el visitante no ha pedido reducir el movimiento. Sin JS, todo se ve quieto. */

/* Portada: el texto sube, el portátil se asienta y llega la tarjeta de «Entrada denegada» con un pequeño «no» */
@keyframes subir { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes asentar { from { opacity: 0; translate: 0 48px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes denegar {
  0% { opacity: 0; translate: 0 40px; scale: .96; }
  55% { opacity: 1; translate: 0 0; scale: 1; }
  66% { translate: -9px 0; } 76% { translate: 7px 0; } 86% { translate: -4px 0; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.anim .antetitulo { animation: subir .9s var(--suave) 0s both; }
.anim .portada h1 { animation: subir .9s var(--suave) .05s both; }
.anim .entradilla { animation: subir .9s var(--suave) .18s both; }
.anim .acciones { animation: subir .9s var(--suave) .3s both; }
.anim .portatil { animation: asentar 1.2s var(--suave) .2s both; }
.anim .tarjeta-denegada { animation: denegar 1.3s var(--suave) 1s both; }
.anim .portada .pie-captura { animation: subir .8s var(--suave) 1.6s both; }

/* Al bajar: cada pieza aparece al entrar en pantalla, en cascada (web.js pone «revelar», «visto» y el retraso) */
.anim .revelar { opacity: 0; translate: 0 32px;
  transition: opacity .8s var(--suave) var(--retraso, 0s), translate 1s var(--suave) var(--retraso, 0s), scale 1s var(--suave) var(--retraso, 0s); }
.anim .revelar.visto { opacity: 1; translate: 0 0; }
.anim .ventana.revelar { translate: 0 56px; scale: .965; }
.anim .ventana.revelar.visto { translate: 0 0; scale: 1; }
.anim .ventana.revelar img { scale: 1.06; transition: scale 1.6s var(--suave) var(--retraso, 0s); }
.anim .ventana.revelar.visto img { scale: 1; }
.anim .detalle-permitida.revelar { translate: 0 64px; scale: .95; }
.anim .detalle-permitida.revelar.visto { translate: 0 0; scale: 1; }
.anim .telefono.revelar { translate: 0 80px; }
.anim .telefono.revelar.visto { translate: 0 0; }
/* Las líneas de las listas se dibujan de izquierda a derecha */
.anim :is(.datos-columnas div, .pasos li).revelar::before { transform: scaleX(0); transition: transform 1.1s var(--suave) calc(var(--retraso, 0s) + .15s); }
.anim :is(.datos-columnas div, .pasos li).revelar.visto::before { transform: scaleX(1); }

/* Cabecera: sombra al bajar y marca de la sección que se está viendo */
.cabecera { transition: box-shadow .3s var(--suave), background-color .3s var(--suave); }
.cabecera.bajada { box-shadow: 0 10px 30px -18px rgb(23 25 29 / .35); background: color-mix(in srgb, var(--fondo) 86%, transparent); backdrop-filter: blur(10px); }
.menu a { position: relative; transition: color .2s var(--suave); }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--acento); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--suave); }
.menu a[aria-current="true"] { color: var(--tinta); }
.menu a[aria-current="true"]::after, .menu a:hover::after { transform: scaleX(1); }

/* Al pasar el ratón: botones, capturas y planes se levantan un poco */
.boton { transition: translate .25s var(--suave), transform .2s var(--suave), background-color .2s var(--suave), box-shadow .25s var(--suave), color .2s var(--suave); }
.boton-principal:hover { translate: 0 -2px; box-shadow: 0 14px 28px -12px rgb(47 91 234 / .75); }
@media (hover: hover) and (pointer: fine) {
  .ventana, .plan, .telefono { transition: translate .5s var(--suave), box-shadow .5s var(--suave); }
  .ventana:hover { translate: 0 -6px; box-shadow: 0 44px 70px -30px rgb(23 25 29 / .38), 0 2px 8px rgb(23 25 29 / .06); }
  .plan:hover { translate: 0 -6px; box-shadow: 0 34px 60px -32px rgb(23 25 29 / .35); }
  .telefono:hover { translate: 0 -10px; }
  .plan .ventana:hover { translate: 0 0; }
  .anim :is(.ventana, .plan).revelar.visto:hover { translate: 0 -6px; }
  .anim .telefono.revelar.visto:hover { translate: 0 -10px; }
  .anim :is(.ventana, .plan, .telefono).revelar.visto { transition: opacity .8s var(--suave) var(--retraso, 0s), translate .5s var(--suave) var(--retraso, 0s), scale 1s var(--suave) var(--retraso, 0s), box-shadow .5s var(--suave); }
}
.campo input, .campo textarea { transition: border-color .2s var(--suave), box-shadow .2s var(--suave); }
.campo input:focus-visible, .campo textarea:focus-visible { box-shadow: 0 0 0 6px rgb(47 91 234 / .12); }
.lista-puntos li::before { transition: width .4s var(--suave); }
.lista-puntos li:hover::before { width: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}