/* Hipatia STEM · landing * Los tokens (:root) viven en el CSS critico del , no aqui: si se * redefinieran en este fichero, la primera pintura usaria unos valores y la * segunda otros, y eso se ve como un parpadeo de color. * Aqui va todo lo que queda por debajo del primer pantallazo. * OJO: las paginas de /legal/ NO usan este fichero y repiten los tokens en * legal/estilos-legal.css, porque no tienen el CSS critico de index.html. Si * cambia la paleta, hay que cambiarla alli tambien. * --------------------------------------------------------------------- */ /* Utilidad: visible solo para lectores de pantalla. La usamos para las cabeceras de la tabla de planes y para los «Incluido / No incluido», que en pantalla son una marca grafica pero deben leerse como palabras. */ .vo{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* Bloques ---------------------------------------------------------------- */ .bloque{padding-block:clamp(3rem,1.5rem + 6vw,5.5rem)} .bloque.alt{background:var(--superficie)} .bloque h2{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.5rem); font-weight:800} .entradilla{color:var(--texto-2); font-size:clamp(1rem,.97rem + .3vw,1.12rem); margin-bottom:2.4rem} .nota{color:var(--texto-2); font-size:.92rem; margin-top:1.4rem} /* Iconos: cuadrados suaves con el trazo en indigo. Son SVG propios, no una fuente de iconos: una fuente son 40 KB y una peticion mas. */ .ico{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:12px; background:var(--lavanda); color:#4338CA; margin-bottom:1rem; } .ico svg{width:23px; height:23px} @media (prefers-color-scheme:dark){ .ico{background:rgba(167,139,250,.16); color:#C4B5FD} } /* 2 · Como funciona ------------------------------------------------------ */ .pasos{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; counter-reset:paso} .pasos li{ position:relative; background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--r-m); padding:1.6rem 1.5rem 1.4rem; counter-increment:paso; } .pasos li::after{ content:counter(paso); position:absolute; top:1.3rem; right:1.4rem; font-size:2.6rem; font-weight:800; line-height:1; color:var(--borde); font-variant-numeric:tabular-nums; } .pasos h3{font-size:1.16rem; font-weight:700; margin-bottom:.4rem; padding-right:2.2rem} .pasos p{color:var(--texto-2); margin:0; font-size:.98rem} @media (min-width:760px){ .pasos{grid-template-columns:repeat(3,1fr)} } /* 3 · Que hay dentro ----------------------------------------------------- */ .rejilla{display:grid; gap:1.4rem} .tarjeta{ background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--r-m); padding:1.6rem 1.5rem 1.3rem; } .bloque.alt .tarjeta{background:var(--fondo)} .tarjeta h3{font-size:1.1rem; font-weight:700; margin-bottom:.45rem} .tarjeta p{color:var(--texto-2); margin:0; font-size:.97rem} @media (min-width:720px){ .rejilla{grid-template-columns:repeat(2,1fr)} } @media (min-width:1060px){ .rejilla{grid-template-columns:repeat(3,1fr)} } /* 4 · Las ramas ---------------------------------------------------------- */ .ramas{list-style:none; margin:0; padding:0; display:grid; gap:.7rem} .ramas li{ display:flex; align-items:center; gap:.9rem; min-width:0; background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--r-s); padding:.75rem 1rem; } .ramas .n{ flex:none; min-width:2.5rem; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; font-size:.9rem; padding:.2rem .45rem; border-radius:999px; background:var(--suave); color:var(--texto-2); } @media (prefers-color-scheme:dark){ .ramas .n{background:#0F172A; color:#94A3B8} } .ramas b{font-weight:600; font-size:.98rem; min-width:0} @media (min-width:640px){ .ramas{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .ramas{grid-template-columns:repeat(3,1fr)} } /* 5 · Planes ------------------------------------------------------------- */ .planes{width:100%; border-collapse:collapse; margin-top:.5rem; font-size:.96rem} .planes .pn{display:block; font-size:1.15rem; font-weight:800; letter-spacing:-.02em} .planes .pd{display:block; font-weight:400; font-size:.85rem; color:var(--texto-2); margin-top:.2rem} .planes .precio{font-size:1.7rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums} .planes .mes{color:var(--texto-2); font-size:.82rem; display:block} .cinta{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#fff; background:var(--indigo); padding:.18rem .55rem; border-radius:999px; margin-bottom:.45rem; } .pendiente{ display:inline-block; font-size:.76rem; font-weight:700; line-height:1.25; color:#92400E; background:#FEF3C7; border:1px solid #FDE68A; padding:.2rem .5rem; border-radius:999px; } @media (prefers-color-scheme:dark){ .pendiente{color:#FCD34D; background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.35)} } /* La marca de incluido / no incluido. El color nunca va solo: al lado hay siempre un texto .vo para el lector de pantalla, y la forma (circulo lleno frente a raya) distingue los dos estados sin depender del color. */ .planes td.si::before, .planes td.no::before{ content:""; display:inline-block; vertical-align:middle; } .planes td.si::before{ width:18px; height:18px; border-radius:50%; background:var(--indigo); clip-path:polygon(18% 52%, 8% 62%, 40% 92%, 92% 28%, 82% 18%, 39% 70%); } .planes td.no::before{width:14px; height:3px; border-radius:2px; background:var(--borde)} @media (prefers-color-scheme:dark){ .planes td.si::before{background:var(--indigo-claro)} .planes td.no::before{background:#334155} } .btn-3{background:transparent; color:var(--enlace); border-color:var(--borde)} .btn-3:hover{background:var(--suave); color:var(--enlace)} @media (prefers-color-scheme:dark){ .btn-3:hover{background:rgba(255,255,255,.07)} } .aviso{ border-left:3px solid var(--violeta); padding-left:1rem; margin-top:1.8rem; max-width:68ch; } /* Movil: la tabla se despliega en bloques, uno por caracteristica, y cada celda se etiqueta con el nombre de su plan. Es la unica forma de comparar cuatro columnas a 320 px sin desplazamiento lateral, que aqui esta prohibido. */ @media (max-width:899px){ .planes, .planes tbody, .planes tr, .planes td, .planes th{display:block; width:auto} .planes thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)} .planes tr{ background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--r-m); padding:1rem 1.1rem; margin-bottom:.9rem; } .bloque.alt .planes tr{background:var(--fondo)} .planes tbody th{font-weight:700; text-align:left; margin-bottom:.6rem; font-size:1rem} .planes td{ display:flex; align-items:baseline; gap:.6rem; padding:.3rem 0; border-top:1px solid var(--borde); } .planes td::after{ content:attr(data-plan); order:-1; flex:none; min-width:7.5rem; color:var(--texto-2); font-size:.85rem; font-weight:600; } .planes td.si::before, .planes td.no::before{order:1} .planes .fila-precio td{align-items:center} .planes .fila-boton td{border-top:0; padding-top:.5rem} .planes .fila-boton td::after{display:none} .planes .fila-boton .btn{width:100%} .planes .fila-boton th{display:none} /* El plan recomendado sigue distinguiendose cuando ya no hay columnas. */ .planes tr.fila-precio td.destacado .precio{color:var(--enlace)} } /* Escritorio: tabla de verdad, con la columna recomendada resaltada. */ @media (min-width:900px){ .planes{margin-top:1rem} .planes th, .planes td{ padding:.85rem 1rem; text-align:center; vertical-align:middle; border-bottom:1px solid var(--borde); } .planes thead th{vertical-align:bottom; padding-bottom:1.1rem; border-bottom:2px solid var(--borde)} .planes tbody th{ text-align:left; font-weight:600; color:var(--texto); width:31%; } .planes td[data-plan]::after{content:none} /* La columna recomendada se tina de indigo en lugar de cambiar de gris: en modo oscuro dos grises contiguos no se distinguen. */ .planes .destacado{background:rgba(79,70,229,.07)} .planes thead .destacado{border-radius:var(--r-m) var(--r-m) 0 0} .planes .fila-boton td{border-bottom:0; padding-top:1.2rem} .planes .fila-boton .destacado{border-radius:0 0 var(--r-m) var(--r-m)} .planes .fila-boton .btn{width:100%; padding-inline:.8rem} } /* 6 · Honestidad --------------------------------------------------------- */ .honestidad .panel{ border:1px solid var(--borde); border-left:5px solid var(--violeta); border-radius:var(--r-m); padding:clamp(1.5rem,1rem + 2.5vw,2.6rem); background:var(--tarjeta); } .honestidad h2{font-size:clamp(1.4rem,1.15rem + 1.3vw,2rem); margin-bottom:1rem} .honestidad p{color:var(--texto-2)} .honestidad p.ultima{color:var(--texto); font-weight:600; margin-bottom:0} /* 7 · Cierre ------------------------------------------------------------- */ .cierre{ background:var(--nocturno); color:#F8FAFC; text-align:center; padding-block:clamp(3rem,1.5rem + 6vw,5rem); } .cierre h2{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.4rem); font-weight:800} .cierre p{color:#CBD5E1; margin:0 auto 1.8rem; max-width:46ch} /* Pie -------------------------------------------------------------------- */ .pie{background:var(--nocturno); color:#94A3B8; border-top:1px solid rgba(255,255,255,.1); padding-block:1.8rem; font-size:.9rem} .pie .env{display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; justify-content:space-between} .pie p{margin:0; max-width:none} .pie nav{display:flex; flex-wrap:wrap; gap:1.2rem} .pie a{color:#CBD5E1; text-decoration:none} .pie a:hover{color:#fff; text-decoration:underline} /* Movimiento ------------------------------------------------------------- */ /* El anillo gira muy despacio, como en la app. Si el sistema pide movimiento reducido no es que se ralentice: se para. */ @media (prefers-reduced-motion:no-preference){ .mascota .orbita{transform-origin:120px 130px; animation:vaiven 14s ease-in-out infinite} .mascota .antena{transform-origin:139.8px 36.3px; animation:latido 6s ease-in-out infinite} .btn, .entrar, .ramas li, .tarjeta{transition:background .15s, border-color .15s, transform .15s} .ramas li:hover, .tarjeta:hover{border-color:var(--violeta)} } @keyframes vaiven{ 0%,100%{transform:rotate(-2.5deg)} 50% {transform:rotate(2.5deg)} } @keyframes latido{ 0%,100%{transform:translateY(0) scale(1)} 50% {transform:translateY(-2px) scale(1.06)} } /* Impresion: sin fondos oscuros ni degradados, que se comen el toner. */ @media print{ .heroe,.cierre,.cabecera,.pie{background:#fff!important; color:#000!important} .heroe::before,.idiomas,.acciones{display:none} .bloque{padding-block:1.5rem} } /* Banner de consentimiento de medicion. Las dos opciones tienen el MISMO peso visual a proposito: un «aceptar» destacado junto a un «rechazar» apagado no es una eleccion libre. */ .consentimiento { position: fixed; inset: auto 1rem 1rem 1rem; z-index: 60; max-width: 34rem; margin-inline: auto; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; background: var(--superficie, #fff); color: var(--texto, #0F172A); border: 1px solid var(--borde, #E2E8F0); border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); } .consentimiento p { margin: 0; flex: 1 1 18rem; font-size: .95rem; line-height: 1.5; color: var(--texto-suave, #64748B); } .consentimiento-acciones { display: flex; gap: .5rem; flex-wrap: wrap; } .consentimiento-acciones .boton { min-height: 44px; } @media (prefers-reduced-motion: no-preference) { .consentimiento { animation: consentimiento-entra .24s ease-out; } @keyframes consentimiento-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }