/* =========================================================================== GLOWUP STUDIO — sitio público La paleta sale del logotipo: el degradado morado → fucsia de la marca manda sobre todo lo demás, y el resto son neutros teñidos de ese morado para que nada compita con él. Dos temas, claro y oscuro, con los mismos tokens. =========================================================================== */ :root{ /* Neón, como la piel del móvil: violeta eléctrico, cian y un golpe fucsia. La tipografía acompaña — Space Grotesk en los titulares, sin serif. */ --lienzo:#F6F3FF; --papel:#EDE7FC; --carta:#FFFFFF; --tinta:#15102A; --suave:#5F5980; --linea:#E2D9F8; --uva:#7B3FE4; --fucsia:#E0399B; --brillo:#00C2D1; --degradado:linear-gradient(120deg,#7B3FE4,#00C2D1); --sombra:rgb(21 16 42 / .55); --velo:rgb(246 243 255 / .82); --serif:"Space Grotesk", system-ui, sans-serif; --sans:"Space Grotesk", "Inter", system-ui, sans-serif; --r:26px; color-scheme:light; } [data-theme="dark"]{ --lienzo:#0B0716; --papel:#140D26; --carta:#170F2E; --tinta:#F1ECFF; --suave:#9A92BC; --linea:rgb(241 236 255 / .13); --uva:#9D6BFF; --fucsia:#FF5FB8; --brillo:#2AE0F0; --degradado:linear-gradient(120deg,#9D6BFF,#2AE0F0); --sombra:rgb(0 0 0 / .7); --velo:rgb(11 7 22 / .84); color-scheme:dark; } *{box-sizing:border-box} body{margin:0;background:var(--lienzo);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased; transition:background-color .4s ease,color .4s ease} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.02em} h1{font-size:clamp(2.9rem,1.6rem + 4.6vw,5.6rem);letter-spacing:-.02em} h2{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.6rem);letter-spacing:-.015em} h3{font-size:1.35rem} em{font-style:italic;background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent} p{margin:0} .env{width:min(1240px,92vw);margin-inline:auto} .sec{padding-block:clamp(4.5rem,3rem + 6vw,8.5rem)} .rot{font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fucsia)} .mute{color:var(--suave)} /* Movimiento al entrar en pantalla y al saltar de sección. Todo apagado si el sistema pide menos animación. */ [data-reveal]{opacity:0;translate:0 26px;transition:opacity .8s ease,translate .8s cubic-bezier(.22,1,.36,1)} [data-reveal].is-visible{opacity:1;translate:0 0} html{scroll-behavior:smooth} section[id],main[id]{scroll-margin-top:5.5rem} @keyframes aterriza{from{opacity:.35;translate:0 14px}to{opacity:1;translate:0 0}} section.is-target > *{animation:aterriza .55s cubic-bezier(.22,1,.36,1)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} [data-reveal]{opacity:1;translate:0} section.is-target > *{animation:none} } /* botones */ .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.7rem;border-radius:999px;font-size:.92rem;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.25s ease;font-family:var(--sans)} .btn--marca{background:var(--degradado);color:#fff;box-shadow:0 14px 34px -18px var(--brillo)} .btn--marca:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn--linea{border-color:var(--linea);color:var(--tinta)} .btn--linea:hover{border-color:var(--fucsia);color:var(--fucsia)} /* cabecera */ .cab{position:fixed;inset:0 0 auto;z-index:50;transition:.35s ease} .cab.is-stuck{background:var(--velo);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)} .cab__fila{display:flex;align-items:center;gap:2.5rem;padding-block:1rem} .marca{display:inline-flex;align-items:center;text-decoration:none;flex:none} .marca img{height:74px;width:auto} @media(max-width:640px){.marca img{height:56px}} .marca .solo-claro{display:block} .marca .solo-oscuro{display:none} [data-theme="dark"] .marca .solo-claro{display:none} [data-theme="dark"] .marca .solo-oscuro{display:block} .nav{display:none;align-items:center;gap:1.9rem;font-size:1rem;margin-right:auto} .nav a{text-decoration:none;color:var(--suave);position:relative;padding-block:.2rem} .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--fucsia);transition:right .3s ease} .nav a:hover::after,.nav a.is-active::after{right:0} .nav a:hover,.nav a.is-active{color:var(--tinta)} .nav .btn{color:#fff} .nav .btn::after{display:none} .nav-acc{display:none;text-decoration:none;font-size:.95rem;color:var(--suave)} .nav-acc:hover{color:var(--tinta)} .nav-acc.btn{color:#fff} @media(min-width:1120px){.nav-acc{display:inline-flex}} @media(min-width:1120px){.nav{display:flex}} .tema{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--linea);border-radius:999px;background:transparent;color:var(--tinta);cursor:pointer;transition:.25s ease;flex:none} .tema:hover{border-color:var(--fucsia);color:var(--fucsia)} .tema svg{width:1.05rem;height:1.05rem} .tema .luna{display:none} [data-theme="dark"] .tema .sol{display:none} [data-theme="dark"] .tema .luna{display:block} .cab__acc{display:flex;align-items:center;gap:.6rem;flex:none} /* Conmutador de idioma: dos letras, la activa marcada. Es un enlace de verdad —no un botón— para que se pueda abrir en otra pestaña. */ .idioma{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:999px;overflow:hidden;font-size:.76rem;font-weight:600;letter-spacing:.06em} .idioma a{padding:.42rem .62rem;text-decoration:none;color:var(--suave);transition:.2s ease} .idioma a:hover{color:var(--fucsia)} .idioma a[aria-current]{background:var(--degradado);color:#fff} /* En el menú de móvil el idioma se escribe entero: ahí sobra el sitio y dos letras sueltas al final de una lista de enlaces no se leen como un mando. */ .menu__idioma{display:flex;gap:.5rem;margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--linea)} .menu__idioma a{flex:1;text-align:center;border:1px solid var(--linea);border-radius:999px; padding:.55rem .8rem;font-size:.86rem;font-weight:600;text-decoration:none;color:var(--suave)} .menu__idioma a[aria-current]{background:var(--degradado);color:#fff;border-color:transparent} .tema,.menu-btn{flex:none} .menu-btn{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--linea);border-radius:999px;background:transparent;color:inherit;cursor:pointer} @media(min-width:1120px){.menu-btn{display:none}} .menu{display:none;padding:0 0 1.4rem} .menu.is-open{display:grid;gap:.9rem} .menu a{text-decoration:none;font-size:1.1rem;font-family:var(--serif)} .menu .btn{font-family:var(--sans);justify-content:center} /* héroe */ .hero{position:relative;padding-top:9.5rem;padding-bottom:4.5rem;overflow:hidden} @media(max-width:959px){.hero{padding-top:7.5rem}} .hero::before{content:"";position:absolute;top:-18%;right:-12%;width:58vw;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--uva) 34%, transparent), color-mix(in srgb, var(--brillo) 20%, transparent) 45%, transparent 70%);z-index:-1} .hero__rejilla{display:grid;gap:3rem;align-items:center} @media(min-width:960px){.hero__rejilla{grid-template-columns:1.05fr .95fr;gap:4.5rem}} @media(max-width:959px){.marco{order:-1}.hero__rejilla{gap:2.6rem}} .hero__lista{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem} .pildora{padding:.42rem .95rem;border:1px solid var(--linea);border-radius:999px;font-size:.78rem;color:var(--suave);background:var(--carta)} .hero__acc{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem} .hero__nota{margin-top:1.6rem;font-size:.82rem;color:var(--suave)} /* comparador del héroe */ .marco{position:relative} .comp{--comp-radius:var(--r);--comp-accent:var(--fucsia)} .comp__box{box-shadow:0 40px 90px -50px var(--sombra)} .ia-btn{position:absolute;left:50%;bottom:-1.35rem;translate:-50% 0;z-index:8; display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;border:0;border-radius:999px;cursor:pointer; font-family:var(--sans);font-size:.85rem;font-weight:600;color:#fff; background:var(--degradado);box-shadow:0 16px 40px -16px var(--brillo)} .ia-btn:hover{filter:brightness(1.08)} .hero .comp__badge{bottom:3.6rem} .ia-btn svg{width:1rem;height:1rem} /* franja que corre */ .corre{border-block:1px solid var(--linea);background:var(--papel);overflow:hidden;padding-block:1.1rem} .corre__pista{display:flex;gap:3rem;width:max-content;animation:correr 34s linear infinite;font-family:var(--serif);font-size:1.5rem;font-style:italic;color:var(--fucsia)} .corre__pista span{display:flex;gap:3rem;align-items:center} @keyframes correr{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.corre__pista{animation:none}} /* pasos */ .pasos{display:grid;gap:2.5rem;margin-top:3.5rem} @media(min-width:820px){.pasos{grid-template-columns:repeat(3,1fr);gap:3rem}} .paso__n{font-family:var(--serif);font-size:3.6rem;font-style:italic;line-height:1;background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent} .paso h3{margin:.6rem 0 .5rem} /* catálogo con pestañas */ .tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:2.2rem 2.6rem} .tab{padding:.6rem 1.2rem;border:1px solid var(--linea);background:var(--carta);border-radius:999px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--suave);transition:.25s ease} .tab.is-active{background:var(--degradado);border-color:transparent;color:#fff} .panel{display:grid;gap:2.5rem;align-items:center} /* [hidden] no puede perder contra display:grid, o el catálogo entero se apila y la página se vuelve el doble de larga. */ .panel[hidden]{display:none} @media(min-width:900px){.panel{grid-template-columns:.9fr 1.1fr;gap:4rem}} .panel .comp{--comp-radius:var(--r)} .ficha__dato{display:flex;justify-content:space-between;gap:1rem;padding-block:.85rem;border-bottom:1px solid var(--linea);font-size:.92rem} .ficha__dato span{color:var(--suave)} /* galería */ .gal{display:grid;gap:1.6rem;margin-top:3.2rem} @media(min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}} .gal figcaption{margin-top:.9rem;font-size:.85rem;color:var(--suave)} .comp--mini{--comp-radius:20px} /* cifras */ .cifras{display:grid;gap:2rem;text-align:center} @media(min-width:720px){.cifras{grid-template-columns:repeat(4,1fr)}} .cifra b{display:block;font-family:var(--serif);font-size:3rem;line-height:1;background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent} /* Sólo el rótulo, no el contador: `.cifra span` alcanzaba también al de dentro del , lo partía en su propia línea y le quitaba el degradado — el número quedaba chico y gris y la unidad («s», «×») se quedaba sola a 3rem. */ .cifra > span{display:block;margin-top:.5rem;font-size:.85rem;color:var(--suave)} /* la app */ .app{display:grid;gap:3.5rem;align-items:center} @media(min-width:940px){.app{grid-template-columns:.85fr 1.15fr;gap:5rem}} .tel{position:relative;width:min(272px,74vw);margin-inline:auto;padding:.7rem;border-radius:42px;background:var(--tinta);box-shadow:0 50px 90px -50px var(--sombra)} .tel__pantalla{border-radius:34px;overflow:hidden;background:var(--carta)} .tel__barra{display:flex;justify-content:space-between;padding:.7rem 1.1rem;font-size:.7rem;color:var(--suave)} .tel__pie{display:flex;gap:.4rem;padding:.7rem} .tel__pie span{flex:1;text-align:center;padding:.55rem;border-radius:14px;font-size:.68rem;background:var(--carta);border:1px solid var(--linea);color:var(--suave)} .vent{display:grid;gap:1.6rem} @media(min-width:640px){.vent{grid-template-columns:1fr 1fr;gap:2rem}} .vent h3{font-size:1.15rem} .vent p{margin-top:.4rem;font-size:.92rem;color:var(--suave)} .pieles{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.5rem} .piel{display:flex;align-items:center;gap:.6rem;padding:.55rem .95rem .55rem .6rem;border:1px solid var(--linea);border-radius:999px;background:var(--carta);font-size:.84rem} .piel i{width:1.1rem;height:1.1rem;border-radius:999px;display:block} /* precios */ /* Conmutador mensual / anual. Es un grupo de dos botones y no un desplegable: son dos opciones y la barata tiene que verse sin abrir nada. Lo que enseña cada plan lo decide `data-planes` en el contenedor, así que sin JavaScript se queda en el mensual, que es el precio que nadie discute. */ .ciclo{display:flex;justify-content:center;gap:.3rem;margin-top:2.6rem; padding:.3rem;border:1px solid var(--linea);border-radius:999px; width:max-content;margin-inline:auto;background:var(--carta)} .ciclo button{display:inline-flex;align-items:center;gap:.5rem; padding:.6rem 1.2rem;border:0;border-radius:999px;background:transparent; color:var(--suave);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer; transition:.25s ease} .ciclo button:hover{color:var(--tinta)} .ciclo button.is-active{background:var(--degradado);color:#fff} .ciclo__ahorro{padding:.16rem .5rem;border-radius:999px;font-size:.7rem;font-weight:700; letter-spacing:.02em;background:color-mix(in srgb,var(--fucsia) 16%,transparent); color:var(--fucsia)} .ciclo button.is-active .ciclo__ahorro{background:rgb(255 255 255 / .22);color:#fff} /* Un plan trae los dos precios escritos y sólo se enseña el del ciclo elegido: así el cambio es instantáneo y no hay que recalcular nada en el navegador, que es donde se cuelan los redondeos que no cuadran con la factura. */ .planes[data-planes="mes"] [data-precio="ano"]{display:none} .planes[data-planes="ano"] [data-precio="mes"]{display:none} .plan__nota{font-size:.78rem;color:var(--suave);margin-top:.5rem} .plan--destacado .plan__nota{color:rgb(255 255 255 / .82)} .planes{display:grid;gap:1.6rem;margin-top:3.2rem} @media(min-width:900px){.planes{grid-template-columns:repeat(3,1fr)}} .plan{padding:2.2rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--carta);display:flex;flex-direction:column;gap:1.1rem} .plan--destacado{border-color:transparent;background:var(--degradado);color:#fff} .plan--destacado .rot,.plan--destacado .mute,.plan--destacado li{color:rgb(255 255 255 / .8)} .plan__precio{font-family:var(--serif);font-size:2.6rem;line-height:1} .plan__precio small{font-family:var(--sans);font-size:.8rem;color:var(--suave)} .plan--destacado .plan__precio small{color:rgb(255 255 255 / .7)} .plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9rem;color:var(--suave)} .plan li{padding-left:1.3rem;position:relative} .plan li::before{content:"—";position:absolute;left:0;color:var(--fucsia)} .plan--destacado li::before{color:#fff} .plan .btn{justify-content:center;margin-top:auto} .plan--destacado .btn{background:#fff;color:var(--uva);border-color:#fff} .plan--destacado .btn:hover{filter:none;background:rgb(255 255 255 / .88)} /* paquetes adicionales */ .paquetes{margin-top:3.5rem;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden} .paquetes__fila{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1rem;padding:1.1rem 1.5rem;font-size:.92rem;align-items:center} .paquetes__fila + .paquetes__fila{border-top:1px solid var(--linea)} .paquetes__fila--cab{background:var(--papel);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);font-weight:600} .paquetes__fila b{font-family:var(--serif);font-size:1.25rem;font-weight:500} .paquetes__fila i{font-style:normal;color:var(--fucsia);font-size:.82rem} /* faq */ .faq{margin-top:2.5rem;border-top:1px solid var(--linea)} .faq__item{border-bottom:1px solid var(--linea)} .faq__item button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.4rem 0;background:none;border:0;cursor:pointer;font:inherit;text-align:left;font-family:var(--serif);font-size:1.2rem;color:var(--tinta)} .faq__item button i{font-style:normal;color:var(--fucsia);transition:rotate .3s ease} .faq__item.is-open button i{rotate:45deg} .faq__cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease} .faq__item.is-open .faq__cuerpo{grid-template-rows:1fr} .faq__cuerpo>div{overflow:hidden} .faq__cuerpo p{padding-bottom:1.4rem;color:var(--suave);font-size:.95rem;max-width:62ch} /* contacto */ .contacto{display:grid;gap:3rem;align-items:start} @media(min-width:900px){.contacto{grid-template-columns:.9fr 1.1fr;gap:4.5rem}} .form{display:grid;gap:1rem} @media(min-width:640px){.form{grid-template-columns:1fr 1fr}.form .campo--ancho{grid-column:1/-1}} /* El hueco del aviso se reserva desde el principio: `padding-bottom` deja la línea libre bajo cada campo y el aviso va posicionado dentro de ella, así que aparecer no empuja el resto del formulario ni cambia el alto de la página. */ .campo{display:grid;gap:.4rem;font-size:.82rem;color:var(--suave); position:relative;padding-bottom:1.25rem} .campo input,.campo textarea{padding:.9rem 1.1rem;border:1px solid var(--linea);border-radius:16px; background:var(--carta);color:var(--tinta);font:inherit;font-size:.95rem;outline:none;transition:border-color .25s ease} .campo input:focus,.campo textarea:focus{border-color:var(--fucsia)} .campo textarea{resize:vertical;min-height:7.5rem} /* El aviso vive debajo de los campos, no al lado del botón: es donde la persona está mirando cuando acaba de escribir. */ .form__pie{display:grid;gap:.9rem;justify-items:start} /* El aviso de cada campo, en el hueco que ya tenía reservado debajo. Va absoluto para que un aviso de dos renglones tampoco mueva nada. */ .campo__error{position:absolute;left:0;right:0;bottom:0; font-size:.8rem;line-height:1.25rem;color:#D6455E} .campo input[aria-invalid],.campo textarea[aria-invalid]{border-color:#D6455E} /* Dos renglones reservados: el aviso de error nombra el correo de contacto y en pantalla estrecha, o en español, no cabe en uno. */ .form__estado{min-height:2.6rem;font-size:.88rem;line-height:1.3rem;color:var(--fucsia)} .form__estado[data-tono="error"]{color:#D6455E} /* cierre */ .cierre{position:relative;border-radius:var(--r);overflow:hidden;color:#fff;text-align:center;padding:clamp(4.5rem,3rem + 7vw,9rem) 1.5rem} .cierre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .cierre::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(46 12 60 / .62),rgb(83 26 135 / .82));z-index:-1} .cierre h2{color:#fff} .cierre em{-webkit-text-fill-color:#fff;color:#fff;background:none} .cierre .btn--marca{background:#fff;color:var(--uva)} .cierre .btn--linea{border-color:rgb(255 255 255 / .5);color:#fff} /* pie */ .pie{border-top:1px solid var(--linea);margin-top:5rem;padding-block:3.5rem 2.5rem} /* Cuatro columnas: la marca con lo que hace la empresa, y tres listas cortas. Antes era una sola línea con cinco enlaces separados por puntos, que a la vista es un párrafo, no un mapa del sitio. */ .pie__rejilla{display:grid;gap:2.5rem} @media(min-width:760px){.pie__rejilla{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem}} .pie__marca{display:grid;justify-items:start;gap:1rem;max-width:30ch} .pie__marca p{margin:0;font-size:.88rem;color:var(--suave);line-height:1.6} .pie__col{display:grid;align-content:start;gap:.6rem;font-size:.88rem} .pie__col h3{margin:0 0 .3rem;font-size:.78rem;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--tinta)} .pie__col a{color:var(--suave);text-decoration:none} .pie__base{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--linea); display:grid;gap:.5rem;font-size:.8rem;color:var(--suave)} .pie__base p{margin:0} .pie img{height:52px;width:auto} .pie a:hover{color:var(--fucsia)} /* =========================================================================== PANTALLAS DE ACCESO Entrar y darse de alta no llevan menú ni pie: son un formulario y nada más. Con la cabecera puesta, la pantalla ofrecía cinco salidas a quien ya había decidido entrar, y en el móvil el formulario empezaba fuera de la vista. El logotipo se queda —y enlaza a la portada— porque es la única prueba de dónde está quien escribe su contraseña. =========================================================================== */ .acceso{min-height:100dvh;display:grid;align-content:center;padding:3rem 1.25rem} /* La caja hereda la tipografía de los legales, pero no su hueco de cabecera: aquí no hay cabecera que esquivar. */ .acceso .legal{padding:0} .acceso__caja{width:min(430px,92vw);margin-inline:auto} .acceso__marca{margin-bottom:1.5rem} .acceso__pie{display:flex;justify-content:center;margin-top:1.8rem} /* =========================================================================== DOCUMENTOS LEGALES Términos, privacidad y eliminación de cuenta. Viven en React pero visten la misma piel que la portada: cargan esta hoja y usan estas clases, para que pasar de la portada a los términos no parezca cambiar de empresa. El texto se lee a lo largo, así que la columna es más estrecha que la del sitio. =========================================================================== */ .legal{padding-top:9.5rem;padding-bottom:5rem} @media(max-width:959px){.legal{padding-top:7.5rem}} .legal__doc{width:min(720px,92vw);margin-inline:auto} /* Una columna estrecha para las páginas que son un formulario y no un texto. */ .legal__caja{width:min(460px,92vw);margin-inline:auto} .legal__caja h1,.acceso__caja h1{font-size:clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem)} /* Una columna: el formulario del sitio es de dos porque vive en una sección ancha, y aquí la caja mide 460 px — dos columnas dejarían campos de 200. */ .legal__caja .form,.acceso__caja .form{margin-top:1.8rem;grid-template-columns:1fr} .legal__caja .btn,.acceso__caja .btn{width:100%;justify-content:center} .legal h1{font-family:var(--serif);font-size:clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); line-height:1.05;letter-spacing:-.02em;color:var(--tinta);margin:0} .legal__fecha{margin-top:.9rem;font-size:.9rem;color:var(--suave)} .legal section{margin-top:2.6rem} .legal h2{font-family:var(--serif);font-size:1.35rem;line-height:1.25;color:var(--tinta); margin:0 0 .8rem} .legal p{margin:0 0 1rem;color:var(--suave);line-height:1.7} /* La viñeta se declara: el preflight de Tailwind, que carga con la aplicación, deja ul y ol sin marcador y la lista se leía como párrafos sangrados. */ .legal ul{list-style:disc} .legal ol{list-style:decimal} .legal ul,.legal ol{margin:0 0 1rem;padding-left:1.3rem;color:var(--suave);line-height:1.7} .legal li{margin-bottom:.6rem} .legal li::marker{color:var(--fucsia)} .legal strong{color:var(--tinta);font-weight:600} .legal a{color:var(--fucsia);text-decoration:underline;text-underline-offset:3px} /* Un enlace con forma de botón no es un enlace de texto: ni subrayado ni el fucsia de los enlaces, que sobre el degradado de la marca se leía a duras penas. */ .legal a.btn{text-decoration:none} .legal a.btn--marca{color:#fff} .legal a:hover{opacity:.8} .legal__nota{font-size:.9rem;color:var(--suave)} /* Un botón que es en realidad un enlace: mismo aspecto que el resto del texto enlazado, sin la caja ni el fondo que trae un