/* ==========================================================================
Rockschool Guadalmar — hoja de estilos
1. Tokens 9. Voces 17. Navegación (submenús)
2. Base 10. Acordeón 18. Páginas interiores
3. Utilidades 11. Contacto 19. Tarjetas
4. Cabecera 12. Pie 20. Listas, chips y bloques
5. Hero 13. Movimiento 21. Tablas
6. Cinta (marquee) 14. Precarga 22. Franja de contacto
7. Cursos 15. Aviso de cookies 23. Legales
8. Cifras 16. Navegación 24. Pantalla pequeña
25. Tema y cabecera 27. Interruptor 29. Galería y visor
26. WhatsApp 28. Cuestionario 30. Agenda
31. Varios
32. Conversión
33. Fondos de sección
34. Logotipo de la precarga
========================================================================== */
/* 1. Tokens ---------------------------------------------------------------- */
/* Satoshi, servida desde este dominio. Los tres archivos los genera
herramientas/fuentes.sh recortados a los caracteres que la web escribe: unos
10 KB cada uno en lugar de los 25 KB del original. Si algún día hay que
añadir texto con caracteres nuevos —otro alfabeto, símbolos que ahora no
aparecen—, hay que volver a ejecutar ese script o esas letras saldrán en la
tipografía del sistema.
El 600 no existe en Satoshi. Cinco reglas de esta hoja lo pedían y el
navegador venía resolviéndolas al 700 por la regla de emparejamiento de
pesos de CSS; ahora pone 700 directamente, que es lo que se veía. */
@font-face {
font-family: "Satoshi";
src: url("fuentes/satoshi-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("fuentes/satoshi-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("fuentes/satoshi-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
/* Controles nativos (desplegables, barras) en oscuro, a juego con la web. */
color-scheme: dark;
--fondo: #0a0a0a;
--fondo-2: #111110;
--tinta: #ffffff;
--tinta-2: rgba(255, 255, 255, 0.72);
--tinta-3: rgba(255, 255, 255, 0.55);
--acento: #08b1dd;
--linea: rgba(255, 255, 255, 0.14);
--linea-tenue: rgba(255, 255, 255, 0.06);
/* Una sola familia para titulares y texto. El contraste entre ambos lo
marcan el peso y el tamaño, no el cambio de familia: los titulares van a
700 y el cuerpo a 400. Si algún día se quiere volver a una display
aparte, basta con poner aquí su nombre y volver a añadir su en
generar.mjs. */
--display: "Satoshi", "DM Sans", system-ui, sans-serif;
--texto: "Satoshi", "DM Sans", system-ui, sans-serif;
--mono: "SFMono-Regular", ui-monospace, "Roboto Mono", monospace;
--salida: cubic-bezier(0.62, 0.01, 0.45, 0.98);
--entrada: cubic-bezier(0.22, 1, 0.36, 1);
/* El acento vivo es el del diseño; --acento es el que se puede usar debajo
de texto. Aquí coinciden porque sobre negro el azul de la marca da
7.87:1. En tema claro no puede coincidir: ese mismo azul sobre el hueso
del fondo se queda en 2.28:1, así que allí el acento baja a un azul
oscuro del mismo tono. */
--acento-vivo: #08b1dd;
--sombra: rgba(0, 0, 0, 0.55);
/* Velo de las secciones con foto de fondo. Son dos paradas de un degradado
y no un valor de opacidad suelto: así la imagen se intuye arriba y se
apaga abajo, y el texto siempre cae sobre la parte densa. */
--velo-1: rgba(10, 10, 10, 0.9);
--velo-2: rgba(10, 10, 10, 0.78);
/* El hero lleva su propio velo, más claro: allí la foto es la protagonista.
A cambio, todo su texto va en tinta plena, que es lo que lo hace seguro. */
--velo-heroe-1: rgba(10, 10, 10, 0.58);
--velo-heroe-2: rgba(10, 10, 10, 0.68);
--radio: 28px;
--canal: clamp(1.25rem, 4vw, 4rem);
--bloque: clamp(6rem, 12vh, 14rem);
--cabecera: 4.5rem;
}
/* Tema claro. El script del pone data-tema="claro" antes de pintar. */
:root[data-tema="claro"] {
color-scheme: light;
--fondo: #f4f4f0;
--fondo-2: #eaeae4;
--tinta: #0f0f0e;
--tinta-2: rgba(15, 15, 14, 0.76);
--tinta-3: rgba(15, 15, 14, 0.6);
/* El azul de la marca (#08b1dd) sobre el hueso del fondo se queda en
2.28:1, así que en claro se usa el mismo tono bajado de luminosidad:
#046a86 da 5.58:1 sobre --fondo y 5.10:1 sobre --fondo-2. */
--acento: #046a86;
--linea: rgba(15, 15, 14, 0.16);
--linea-tenue: rgba(15, 15, 14, 0.07);
--sombra: rgba(0, 0, 0, 0.18);
/* En claro el velo tiene que ser claro: si fuera oscuro, el pie entero se
pondría en modo oscuro dentro de una web clara. */
--velo-1: rgba(244, 244, 240, 0.92);
--velo-2: rgba(244, 244, 240, 0.78);
--velo-heroe-1: rgba(244, 244, 240, 0.56);
--velo-heroe-2: rgba(244, 244, 240, 0.66);
}
/* El grano ilumina sobre negro y ensucia sobre blanco: hay que invertirlo. */
:root[data-tema="claro"] .grano {
mix-blend-mode: multiply;
opacity: 0.045;
}
/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--fondo);
color: var(--tinta);
font-family: var(--texto);
font-size: clamp(1rem, 0.35vw + 0.92rem, 1.125rem);
line-height: 1.45;
text-wrap: pretty;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
button,
input,
textarea {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 3px;
border-radius: 2px;
}
::selection {
background: var(--acento-vivo);
color: #0a0a0a;
}
main,
.pie {
position: relative;
z-index: 1;
}
/* 3. Utilidades ------------------------------------------------------------ */
/* El interletrado negativo era de Clash Display, que es estrecha. Satoshi es
más ancha y con -0.06em las letras se solapaban en los cuerpos grandes. */
.display {
font-family: var(--display);
font-weight: 700;
letter-spacing: -0.032em;
line-height: 1.06;
text-wrap: balance;
}
.texto {
color: var(--tinta-2);
}
/* Etiquetas de sección: [ MARCA ‒ SECCIÓN / SUBSECCIÓN ] */
.etiqueta {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tinta-3);
margin-bottom: clamp(2rem, 5vw, 4rem);
}
/* Marcador de dato que falta. Visible a propósito: no se inventan datos. */
.pendiente {
color: var(--acento);
font-family: var(--mono);
font-size: 0.82em;
letter-spacing: 0.01em;
}
.seccion {
padding-block: var(--bloque);
padding-inline: var(--canal);
scroll-margin-top: calc(var(--cabecera) + 1rem);
}
.seccion__titulo {
font-size: clamp(2.25rem, 6vw, 6rem);
max-width: 18ch;
margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.nota {
max-width: 46ch;
font-size: 0.95rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.nota code {
font-family: var(--mono);
font-size: 0.9em;
color: var(--tinta);
}
/* Retícula visible: 6 columnas en escritorio, 2 en móvil. Una sola capa fija. */
.rejilla {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: linear-gradient(to right, var(--linea-tenue) 1px, transparent 1px);
background-size: calc(100% / 6) 100%;
}
/* Grano: sin él, el fondo negro se ve plano. "screen" es lo que lo hace visible
sobre fondo oscuro; con "overlay" sobre negro no se vería nada. */
.grano {
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: screen;
}
.cursor {
position: fixed;
top: 0;
left: 0;
z-index: 9500;
display: none;
width: 28px;
height: 28px;
margin: -14px 0 0 -14px;
border: 1px solid var(--acento);
border-radius: 50%;
pointer-events: none;
transition: width 0.3s var(--salida), height 0.3s var(--salida), margin 0.3s var(--salida);
}
.cursor--activo {
width: 52px;
height: 52px;
margin: -26px 0 0 -26px;
}
/* Enlace de salto: invisible hasta que recibe foco. */
.salto {
position: fixed;
top: 0;
left: 0;
z-index: 200;
padding: 0.75rem 1.25rem;
background: var(--acento);
color: var(--fondo);
transform: translateY(-120%);
}
.salto:focus {
transform: translateY(0);
}
/* 4. Cabecera -------------------------------------------------------------- */
.cabecera {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: var(--cabecera);
padding-inline: var(--canal);
background: rgba(10, 10, 10, 0.82); /* respaldo si no hay color-mix */
background: color-mix(in srgb, var(--fondo) 82%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color 0.4s var(--salida);
}
/* En la portada la cabecera flota sobre la foto del hero, sin fondo ni
desenfoque, para que imagen y menú sean una pieza. Al pasar de ahí recupera
el respaldo. */
.cabecera--sobre-foto:not(.cabecera--compacta) {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.cabecera--compacta {
border-bottom-color: var(--linea);
}
.marca {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
/* El logotipo es un logotipo con texto, así que la marca no repite el nombre
al lado: el nombre va en un span oculto para quien use lector de pantalla. */
.marca__logo {
display: block;
width: auto;
height: clamp(1.5rem, 4vw, 2rem);
}
.menu {
display: flex;
align-items: center;
gap: clamp(1.25rem, 3vw, 2.5rem);
}
.menu__lista {
display: flex;
gap: clamp(1.25rem, 3vw, 2.5rem);
font-size: 0.9rem;
}
.menu__lista a {
position: relative;
padding-block: 0.25rem;
color: var(--tinta-2);
transition: color 0.3s var(--salida);
}
/* Microinteracción: subrayado que crece desde la izquierda. */
.menu__lista a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--acento);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--salida);
}
.menu__lista a:hover,
.menu__lista a:focus-visible {
color: var(--tinta);
}
.menu__lista a:hover::after,
.menu__lista a:focus-visible::after {
transform: scaleX(1);
}
.menu__tel {
font-family: var(--mono);
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--tinta);
}
.menu-boton {
display: none;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.menu-boton__linea {
display: block;
width: 24px;
height: 1px;
margin: 6px auto;
background: var(--tinta);
transition: transform 0.4s var(--salida);
}
.cabecera--menu .menu-boton__linea:first-child {
transform: translateY(3.5px) rotate(45deg);
}
.cabecera--menu .menu-boton__linea:last-child {
transform: translateY(-3.5px) rotate(-45deg);
}
/* 5. Hero ------------------------------------------------------------------ */
.heroe {
min-height: calc(100vh - var(--cabecera)); /* respaldo */
min-height: calc(100svh - var(--cabecera));
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 3rem;
padding-block: clamp(3rem, 8vh, 7rem) clamp(2rem, 6vh, 4rem);
padding-inline: var(--canal);
scroll-margin-top: var(--cabecera);
}
/* Con foto detrás, el hero sube por debajo de la cabecera —que ahí va sin
fondo— para que la imagen y el menú sean una sola pieza. La altura no
cambia: sube lo mismo que se le quita por arriba, así el borde inferior
sigue cayendo justo en el pliegue. El relleno de arriba devuelve el hueco
que ahora ocupa la cabecera. */
.heroe--fondo {
margin-top: calc(-1 * var(--cabecera));
padding-block-start: calc(var(--cabecera) + clamp(1rem, 3vh, 2rem));
padding-block-end: clamp(1.5rem, 4vh, 2.5rem);
/* Sobre la foto el texto secundario sube a tinta plena. El velo del hero es
más claro que el de las demás bandas, porque aquí la foto es la
protagonista, y con ese velo el gris al 72% no llega a 4.5:1 sobre una
foto clara. La jerarquía la marcan el tamaño y el peso, no el color. */
--tinta-2: var(--tinta);
--tinta-3: var(--tinta);
}
.heroe__titulo {
/* 13rem llenaba la pantalla cuando el hero solo tenía el titular. Con los
botones debajo, el hero se salía de la ventana.
El tope por altura evita que en pantallas anchas y bajas el titular se
coma el sitio de los botones: ahí manda el vh, no el vw. */
font-size: clamp(2.5rem, min(9vw, 15vh), 8.5rem);
letter-spacing: -0.035em;
text-transform: uppercase;
max-width: 14ch;
}
/* SplitType envuelve cada palabra en .word y cada letra en .char.
nowrap evita que una palabra se parta por la mitad. */
.word {
display: inline-block;
white-space: nowrap;
}
.char {
display: inline-block;
}
.heroe__abajo {
display: grid;
gap: clamp(1.5rem, 4vw, 2.5rem);
}
.heroe__pie {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--linea);
}
.heroe__entrada {
max-width: 34ch;
}
.heroe__datos {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2rem;
font-family: var(--mono);
font-size: 0.85rem;
}
.heroe__datos a {
border-bottom: 1px solid var(--linea);
padding-bottom: 2px;
transition: border-color 0.3s var(--salida), color 0.3s var(--salida);
}
.heroe__datos a:hover {
color: var(--acento);
border-bottom-color: var(--acento);
}
.heroe__baja {
align-self: flex-start;
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tinta-3);
}
.heroe__baja span {
display: inline-block;
margin-right: 0.4rem;
animation: flotar 2.4s var(--salida) infinite;
}
/* En pantallas bajas el titular ya llena la ventana y esta señal es la
primera que se corta por abajo. Se retira antes de que asome a medias. */
@media (max-height: 780px) {
.heroe__baja {
display: none;
}
}
@keyframes flotar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(5px); }
}
/* 6. Cinta (marquee) ------------------------------------------------------- */
/* El contenido va duplicado exacto y se desplaza -50%: un juego completo.
Con -100% daría un salto. */
.cinta {
position: relative;
z-index: 1;
overflow: hidden;
padding-block: clamp(1.25rem, 3vh, 2.25rem);
border-block: 1px solid var(--linea);
mix-blend-mode: difference;
isolation: isolate;
}
.cinta__pista {
display: flex;
gap: 2rem;
width: max-content;
will-change: transform;
animation: cinta 32s linear infinite;
}
.cinta__grupo {
display: flex;
gap: 2rem;
font-family: var(--display);
font-weight: 500;
font-size: clamp(1.5rem, 4vw, 3.25rem);
letter-spacing: -0.02em;
white-space: nowrap;
}
@keyframes cinta {
to { transform: translateX(-50%); }
}
.cinta:hover .cinta__pista {
animation-play-state: paused;
}
/* 7. Sobre ----------------------------------------------------------------- */
.dos-columnas {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: start;
}
.dos-columnas__titulo {
font-size: clamp(2rem, 4.6vw, 4.5rem);
max-width: 16ch;
}
.dos-columnas__cuerpo {
display: grid;
gap: 1.25rem;
max-width: 52ch;
padding-top: 0.75rem;
}
/* El titular de `dos-columnas` no lleva margen inferior propio, así que una
rejilla de tarjetas puesta justo debajo se le pegaba al texto: quedaba a
cero píxeles mientras el resto de la sección respira a 48-64. */
.dos-columnas + .rejilla-tarjetas {
margin-top: clamp(2rem, 5vw, 4rem);
}
/* 8. Cursos ---------------------------------------------------------------- */
.cursos {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Tarjetas apiladas: cada una se fija un poco más abajo que la anterior. */
.curso {
position: sticky;
top: 15vh;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 4rem);
padding: clamp(1.75rem, 4vw, 3.5rem);
background: var(--fondo-2);
border: 1px solid var(--linea);
border-radius: var(--radio);
/* Squircle tipo iOS; si el navegador no lo soporta, queda el border-radius. */
corner-shape: superellipse(2);
}
.curso:nth-child(1) { top: 15vh; }
.curso:nth-child(2) { top: 18vh; }
.curso:nth-child(3) { top: 21vh; }
.curso__numero {
font-family: var(--mono);
font-size: 0.85rem;
letter-spacing: 0.1em;
color: var(--acento);
}
.curso__titulo {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.5rem, 3.4vw, 2.75rem);
letter-spacing: -0.025em;
line-height: 1.1;
margin-bottom: 1rem;
}
.curso__lista {
display: grid;
gap: 0.5rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--linea);
font-size: 0.95rem;
}
.curso__lista li::before {
content: "—";
margin-right: 0.6rem;
color: var(--tinta-3);
}
/* 9. Cifras ---------------------------------------------------------------- */
.cifras {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 1px;
background: var(--linea);
border-block: 1px solid var(--linea);
}
.cifra {
padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
background: var(--fondo);
}
.cifra__etiqueta {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-3);
margin-bottom: 1rem;
}
.cifra__valor {
font-family: var(--display);
font-weight: 700;
font-size: clamp(2.5rem, 6vw, 5rem);
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* 10. Voces ---------------------------------------------------------------- */
.seccion--larga {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
.voces {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
gap: clamp(2rem, 5vw, 4rem);
}
.voz {
padding-top: 2rem;
border-top: 1px solid var(--linea);
}
.voz__texto {
font-size: clamp(1.25rem, 2.4vw, 2rem);
max-width: 26ch;
margin-bottom: 2rem;
}
.voz__firma {
display: grid;
gap: 0.25rem;
font-family: var(--mono);
font-size: 0.82rem;
}
.voz__nombre {
color: var(--tinta);
}
.voz__cargo {
color: var(--tinta-3);
}
/* 11. Acordeón ------------------------------------------------------------- */
/* grid-template-rows 0fr → 1fr es la única forma de animar altura
sin medirla en JavaScript. */
.acordeon {
border-top: 1px solid var(--linea);
}
.acordeon__item {
border-bottom: 1px solid var(--linea);
}
.acordeon__cabecera {
font-size: inherit;
font-weight: inherit;
}
.acordeon__boton {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
padding: clamp(1.25rem, 3vw, 2rem) 0;
background: none;
border: 0;
text-align: left;
cursor: pointer;
font-family: var(--display);
font-weight: 500;
font-size: clamp(1.05rem, 2vw, 1.6rem);
letter-spacing: -0.02em;
transition: color 0.3s var(--salida);
}
.acordeon__boton:hover {
color: var(--acento);
}
/* Microinteracción: el signo gira de + a −. */
.acordeon__signo {
position: relative;
flex: 0 0 auto;
width: 14px;
height: 14px;
}
.acordeon__signo::before,
.acordeon__signo::after {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 1px;
background: currentColor;
transition: transform 0.4s var(--salida);
}
.acordeon__signo::after {
transform: rotate(90deg);
}
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after {
transform: rotate(0deg);
}
.acordeon__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s var(--salida);
}
.acordeon__item--abierto .acordeon__panel {
grid-template-rows: 1fr;
}
.acordeon__interior {
overflow: hidden;
}
.acordeon__interior > p {
max-width: 60ch;
padding-bottom: clamp(1.25rem, 3vw, 2rem);
}
.acordeon__interior a {
color: var(--acento);
border-bottom: 1px solid currentColor;
}
/* 12. Contacto ------------------------------------------------------------- */
.contacto {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: start;
}
.formulario {
display: grid;
gap: 1.5rem;
}
.campo {
display: grid;
gap: 0.5rem;
}
.campo label {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-3);
}
.campo__opcional {
text-transform: none;
letter-spacing: 0;
font-style: italic;
}
.campo input,
.campo textarea,
.campo select {
padding: 0.85rem 0;
background: none;
border: 0;
border-bottom: 1px solid var(--linea);
border-radius: 0;
transition: border-color 0.3s var(--salida);
}
.campo select {
appearance: none;
cursor: pointer;
/* Flecha dibujada, para no depender del estilo nativo del desplegable. */
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 0.75rem center, right 0.35rem center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 1.5rem;
}
.campo select option {
background: var(--fondo-2);
color: var(--tinta);
}
.campo textarea {
resize: vertical;
}
.campo input:hover,
.campo textarea:hover,
.campo select:hover {
border-bottom-color: var(--tinta-3);
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
outline: none;
border-bottom-color: var(--acento);
}
.campo input:focus-visible,
.campo textarea:focus-visible,
.campo select:focus-visible {
outline: none;
}
.formulario__legal {
font-size: 0.85rem;
}
.formulario__legal a {
color: var(--acento);
border-bottom: 1px solid currentColor;
}
.boton {
justify-self: start;
position: relative;
padding: 0.9rem 2rem;
background: var(--tinta);
color: var(--fondo);
border: 0;
border-radius: 999px;
cursor: pointer;
font-weight: 700;
letter-spacing: -0.01em;
transition: background-color 0.3s var(--salida), color 0.3s var(--salida);
}
.boton:hover {
background: var(--acento);
}
.formulario__aviso {
min-height: 1.5rem;
font-size: 0.9rem;
}
.datos__lista {
display: grid;
gap: 1.5rem;
}
.datos__lista dt {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-3);
margin-bottom: 0.4rem;
}
.datos__lista dd a {
border-bottom: 1px solid var(--linea);
transition: border-color 0.3s var(--salida), color 0.3s var(--salida);
}
.datos__lista dd a:hover {
color: var(--acento);
border-bottom-color: var(--acento);
}
/* 13. Pie ------------------------------------------------------------------ */
/* El pie llevaba una sola columna de navegación con los submenús dentro y
medía tres pantallas. Ahora son dos zonas —marca y enlaces— y los enlaces
se reparten solos en tantas columnas como quepan. */
.pie {
position: relative;
isolation: isolate;
overflow: hidden;
border-top: 1px solid var(--linea);
}
.pie__interior {
position: relative;
z-index: 1;
padding-inline: var(--canal);
}
.pie__alto {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
gap: clamp(2.5rem, 5vw, 5rem);
padding-block: clamp(3rem, 7vh, 5rem);
}
.pie__marca {
display: grid;
justify-items: start;
gap: 1.25rem;
align-content: start;
}
.pie__logotipo {
width: clamp(11rem, 22vw, 15rem);
height: auto;
}
/* Solo se muestra la versión que contrasta con el tema activo. El cambio se
hace aquí y no con ni prefers-color-scheme porque el tema es un
atributo que se pone antes de pintar, no una media query. */
.marca__logo--claro,
.pie__logotipo--claro,
.precarga__logo--claro {
display: none;
}
:root[data-tema="claro"] .marca__logo--oscuro,
:root[data-tema="claro"] .pie__logotipo--oscuro,
:root[data-tema="claro"] .precarga__logo--oscuro {
display: none;
}
:root[data-tema="claro"] .marca__logo--claro,
:root[data-tema="claro"] .pie__logotipo--claro,
:root[data-tema="claro"] .precarga__logo--claro {
display: block;
}
.pie__lema {
max-width: 22ch;
font-size: 0.95rem;
color: var(--tinta-2);
}
.pie__titulo {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-3);
margin-bottom: 1.25rem;
}
.pie__enlaces {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
}
.pie__grupo-titulo {
display: inline-block;
margin-bottom: 0.7rem;
font-weight: 700;
font-size: 0.95rem;
border-bottom: 1px solid var(--linea);
padding-bottom: 0.35rem;
}
.pie__sub,
.pie__contacto {
display: grid;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--tinta-2);
}
.pie__contacto {
max-width: 26ch;
}
/* Los dos enlaces de contacto del pie son objetivos independientes, no texto
dentro de una frase, así que no entran en la excepción de WCAG 2.5.8 y
necesitan 24 px de alto como mínimo. Se les da 44, el mismo alto que el
resto de controles del sitio, para que el dedo no falle. */
.pie__contacto a {
display: flex;
align-items: center;
min-height: 2.75rem;
}
.pie__grupo-titulo:hover,
.pie__sub a:hover,
.pie__contacto a:hover {
color: var(--acento);
}
.pie__marca .boton {
margin-top: 0.25rem;
}
/* Capa legal: sin blend, sin transform, contraste alto. Debe leerse siempre.
Los enlaces legales van en la misma banda que la línea obligatoria para no
añadir una fila más al pie. */
.pie__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 2rem;
padding-block: 1.5rem;
border-top: 1px solid var(--linea);
}
.pie__legales {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
font-size: 0.82rem;
color: var(--tinta-2);
}
.pie__legales a:hover {
color: var(--acento);
}
.pie__copyright {
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--tinta-2);
}
/* 14. Movimiento y adaptabilidad ------------------------------------------- */
@media (max-width: 900px) {
.dos-columnas,
.contacto {
grid-template-columns: minmax(0, 1fr);
}
.pie__alto {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.pie__marca {
grid-column: 1 / -1;
}
/* Curso en una sola columna: el número deja de reservar carril. */
.curso {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
}
@media (max-width: 810px) {
/* Ritmo vertical de móvil. El `--bloque` de escritorio son 12vh, que en un
teléfono de 844 px da 101 px arriba y 101 abajo en cada sección: con ocho
bandas seguidas son más de 1 500 px de aire, y la página se hace
interminable. A 8vh sigue habiendo separación clara entre secciones y se
recuperan unos 500 px por página. */
:root {
--bloque: clamp(3.5rem, 8vh, 14rem);
}
.rejilla {
background-size: calc(100% / 2) 100%;
}
.menu-boton {
display: block;
}
/* El panel ocupa la pantalla entera, así que la página de debajo se bloquea
mientras está abierto: sin esto un gesto fuera del panel desplazaba el
fondo y al cerrar aparecías en otro punto de la página, no donde estabas.
Va dentro de la consulta de móvil a propósito: si se gira el teléfono a
apaisado y el ancho pasa de 810 px el panel vuelve a ser una barra, y el
bloqueo se levanta solo. */
html.menu-abierto,
html.menu-abierto body {
overflow: hidden;
overscroll-behavior: none;
}
/* Con el panel abierto la franja de arriba no puede quedarse transparente.
En la portada la cabecera flota sobre la foto del hero, y sobre un panel
opaco se veía la foto asomar por la banda del logotipo. */
.cabecera--sobre-foto.cabecera--menu {
background: var(--fondo);
}
.menu {
position: fixed;
inset: var(--cabecera) 0 auto 0;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
/* `--hueco-aviso` lo mide el script al abrir el panel: es lo que ocupa el
aviso de cookies, que va por encima de la cabecera porque el
consentimiento no se puede tapar. Sin ese hueco, las últimas entradas
—Contacto y el teléfono— quedaban bajo el aviso y no había forma de
sacarlas: el panel no scrollea más allá de su contenido. */
padding: 1.5rem var(--canal) calc(2rem + var(--hueco-aviso, 0px));
background: var(--fondo);
border-bottom: 1px solid var(--linea);
/* El panel mide más que la pantalla: seis entradas a 1.5rem más los
submenús desplegados se van a 1 107 px sobre un viewport de 844. Sin
esto, las últimas entradas quedaban fuera y no había manera de
alcanzarlas. Ahora el propio panel scrollea; `dvh` va después de `vh`
para que los navegadores que no lo entienden se queden con el respaldo. */
max-height: calc(100vh - var(--cabecera));
max-height: calc(100dvh - var(--cabecera));
overflow-y: auto;
overscroll-behavior: contain;
transform: translateY(-100%);
visibility: hidden;
transition: transform 0.5s var(--salida), visibility 0s 0.5s;
}
.cabecera--menu .menu {
transform: translateY(0);
visibility: visible;
transition: transform 0.5s var(--salida), visibility 0s;
}
.menu__lista {
flex-direction: column;
gap: 0.35rem;
font-family: var(--display);
font-size: 1.5rem;
letter-spacing: -0.02em;
}
/* Las entradas de primer nivel también llegan a 44 px de alto: en un menú
táctil una fila de 43 px se falla con el dedo. El hueco entre entradas lo
da el `gap` de la lista y no el relleno, así el subrayado del elemento
activo queda como una regla bajo la fila y no pegado a la siguiente. */
.menu__lista a,
.menu__tel {
display: flex;
align-items: center;
min-height: 2.75rem;
}
/* Cursos dejan de apilarse: en pantalla pequeña el pinning estorba. */
.curso,
.curso:nth-child(1),
.curso:nth-child(2),
.curso:nth-child(3) {
position: static;
}
.pie__alto {
grid-template-columns: minmax(0, 1fr);
}
}
@media (hover: none) {
.cursor {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.cinta__pista {
animation: none;
}
.heroe__baja span {
animation: none;
}
/* Sin movimiento, la precarga no tiene nada que enseñar. */
.precarga {
display: none;
}
}
/* ==========================================================================
15. Precarga
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.precarga {
position: fixed;
inset: 0;
z-index: 9800;
display: grid;
place-items: center;
padding: var(--canal);
background: var(--fondo);
animation: precarga-salida 0.9s var(--salida) 2s forwards;
}
/* El estado final oculta y desactiva el puntero: no hace falta quitarlo del DOM. */
@keyframes precarga-salida {
to {
opacity: 0;
visibility: hidden;
}
}
/* Si ya se vio en esta sesión, no se muestra en absoluto. */
.sin-precarga .precarga {
display: none;
}
.precarga__texto {
font-size: clamp(1.75rem, 7vw, 5rem);
letter-spacing: -0.03em;
text-align: center;
max-width: 22ch;
}
/* ==========================================================================
16. Aviso de cookies
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.cookies {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9600;
padding: 1rem var(--canal);
/* El aviso se ancla abajo y crecía hacia arriba sin tope. Desplegado mide
665 px, así que en un iPhone SE (568 de alto) o con el móvil en apaisado
(390) la parte de arriba se quedaba fuera de la pantalla: no se podía leer
ni alcanzar, porque el aviso no scrollea. Ahora se limita al alto de la
ventana y scrollea por dentro.
Va sin media query a propósito: un móvil en apaisado mide 844 px de ancho y
no entra en ningún bloque de móvil, pero sufre el mismo problema. En
escritorio no cambia nada, porque allí el aviso nunca llega a ese alto.
`dvh` va detrás de `vh` para que quien no lo entienda se quede con el
respaldo, y sigue al teclado cuando aparece. */
max-height: 100vh;
max-height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
}
.cookies[hidden] {
display: none;
}
.cookies__caja {
display: grid;
gap: 1.25rem;
max-width: 62rem;
margin: 0 auto;
padding: clamp(1.25rem, 3vw, 1.75rem);
background: #141412;
border: 1px solid var(--linea);
border-radius: 24px;
corner-shape: superellipse(2);
}
.cookies__titulo {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-3);
margin-bottom: 0.5rem;
}
.cookies__texto {
font-size: 0.9rem;
color: var(--tinta-2);
max-width: 68ch;
}
.cookies__texto a {
color: var(--acento);
border-bottom: 1px solid currentColor;
}
.cookies__acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
}
.cookies__panel {
display: grid;
gap: 1rem;
padding-top: 1.25rem;
border-top: 1px solid var(--linea);
}
.cookies__panel[hidden] {
display: none;
}
/* Nombre y control en la misma fila, descripción debajo ocupando el ancho.
Con flex y `flex-wrap`, en un móvil la descripción se comía toda la fila y
el control caía solo a la línea siguiente, descolgado del nombre al que
pertenece. En rejilla la fila de arriba siempre es nombre y control. */
.cookies__categoria {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.4rem 1rem;
}
.cookies__detalle {
grid-column: 1 / -1;
}
.cookies__nombre {
font-weight: 700;
font-size: 0.95rem;
}
.cookies__detalle {
font-size: 0.85rem;
color: var(--tinta-3);
max-width: 52ch;
}
.cookies__estado {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-3);
border: 1px solid var(--linea);
border-radius: 999px;
padding: 0.25rem 0.75rem;
white-space: nowrap;
}
/* ==========================================================================
17. Navegación con submenús
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.menu__item {
position: relative;
display: flex;
align-items: center;
gap: 0.3rem;
}
.menu__mas {
display: grid;
place-items: center;
width: 20px;
height: 20px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
color: var(--tinta-3);
}
.menu__flecha {
width: 6px;
height: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform 0.3s var(--salida);
}
.menu__item--abierto .menu__flecha {
transform: rotate(225deg) translate(-1px, -1px);
}
.submenu {
position: absolute;
top: calc(100% + 0.75rem);
left: -0.75rem;
min-width: 13rem;
display: grid;
gap: 0.15rem;
padding: 0.5rem;
background: #141412;
border: 1px solid var(--linea);
border-radius: 18px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.28s var(--salida), transform 0.28s var(--salida), visibility 0s 0.28s;
}
.menu__item--hijos:hover .submenu,
.menu__item--hijos:focus-within .submenu,
.menu__item--abierto .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.28s var(--salida), transform 0.28s var(--salida), visibility 0s;
}
.submenu a {
display: block;
padding: 0.55rem 0.75rem;
border-radius: 12px;
font-size: 0.9rem;
color: var(--tinta-2);
transition: background-color 0.25s var(--salida), color 0.25s var(--salida);
}
.submenu a:hover,
.submenu a:focus-visible {
background: rgba(255, 255, 255, 0.06);
color: var(--tinta);
}
.menu__lista a[aria-current="page"] {
color: var(--tinta);
}
.menu__lista a[aria-current="page"]::after {
transform: scaleX(1);
}
/* ==========================================================================
18. Páginas interiores
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.cabecera-pagina {
padding-block: clamp(4rem, 10vh, 9rem) clamp(2.5rem, 6vh, 4rem);
padding-inline: var(--canal);
}
.cabecera-pagina--alta {
min-height: 70vh; /* respaldo */
min-height: 70svh;
display: flex;
flex-direction: column;
justify-content: center;
}
.cabecera-pagina__titulo {
font-size: clamp(2.25rem, 6.5vw, 7rem);
max-width: 20ch;
}
.cabecera-pagina__entradilla {
max-width: 56ch;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.migas {
margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.migas ol {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-3);
}
.migas li:not(:last-child)::after {
content: "/";
margin-left: 0.5rem;
color: rgba(255, 255, 255, 0.28);
}
.migas a:hover {
color: var(--acento);
}
.migas [aria-current="page"] {
color: var(--tinta-2);
}
.medio {
margin: 0;
padding-inline: var(--canal);
}
.medio img {
width: 100%;
/* `height: auto` no es decorativo: los ![]()
llevan width y height en el HTML
para reservar el hueco antes de cargar, y esos atributos fijan un alto real.
La aspect-ratio solo manda cuando el alto es auto, así que sin esta línea la
foto se pinta a su alto natural: 900 px en vez de 549. */
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radio);
corner-shape: superellipse(2);
/* Tratamiento editorial: la foto entra desaturada y recupera el color al pasar por encima. */
filter: grayscale(0.55) contrast(1.05) brightness(0.92);
transition: filter 0.7s var(--salida), transform 0.7s var(--salida);
}
.medio img:hover {
filter: none;
}
.medio--ancho {
padding-inline: 0;
}
.medio--ancho img {
border-radius: 0;
corner-shape: superellipse(1);
aspect-ratio: 21 / 9;
}
.medio--portada {
margin-block: clamp(2rem, 6vh, 4rem);
}
/* ==========================================================================
19. Tarjetas
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.rejilla-tarjetas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.rejilla-tarjetas--tres {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.tarjeta {
display: flex;
flex-direction: column;
background: var(--fondo-2);
border: 1px solid var(--linea);
border-radius: var(--radio);
corner-shape: superellipse(2);
overflow: hidden;
transition: border-color 0.4s var(--salida), transform 0.4s var(--salida);
}
.tarjeta:hover {
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-4px);
}
.tarjeta__medio {
margin: 0;
overflow: hidden;
}
/* 16/10 en vez de 4/3: la tarjeta medía casi dos veces y media su ancho útil
y en una rejilla de cuatro eso era más de una pantalla de scroll. */
.tarjeta__medio img {
width: 100%;
/* Ver la nota de .medio img: sin `height: auto`, los atributos width y height
del HTML ganan y la tarjeta se iba a 1 200 px de alto en móvil. */
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
filter: grayscale(0.6) brightness(0.9);
transition: filter 0.7s var(--salida), transform 0.7s var(--salida);
}
.tarjeta:hover .tarjeta__medio img {
filter: none;
transform: scale(1.03);
}
.tarjeta__cuerpo {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
padding: clamp(0.9rem, 2vw, 1.25rem);
}
.tarjeta__titulo {
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}
.tarjeta__texto {
font-size: 0.9rem;
}
.tarjeta__mas {
margin-top: auto;
padding-top: 0.6rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--acento);
}
.tarjeta--pendiente {
justify-content: center;
border-style: dashed;
}
.seccion__pie {
margin-top: clamp(2rem, 4vw, 3rem);
}
/* ==========================================================================
20. Listas, chips y bloques
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.enlace {
display: inline-block;
color: var(--tinta);
border-bottom: 1px solid var(--acento);
padding-bottom: 2px;
transition: color 0.3s var(--salida);
}
.enlace:hover {
color: var(--acento);
}
.enlace-boton {
padding: 0;
background: none;
border: 0;
color: var(--tinta-2);
font-size: 0.9rem;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color 0.3s var(--salida);
}
.enlace-boton:hover {
color: var(--acento);
}
.boton--fantasma {
background: none;
color: var(--tinta);
border: 1px solid var(--linea);
}
.boton--fantasma:hover {
background: none;
border-color: var(--tinta);
color: var(--tinta);
}
.visualmente-oculto {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.subetiqueta {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-3);
margin-bottom: 0.75rem;
}
.lista-temario {
display: grid;
}
.lista-temario li {
padding-block: 0.9rem;
border-top: 1px solid var(--linea);
font-size: 0.98rem;
color: var(--tinta-2);
}
.lista-temario li:last-child {
border-bottom: 1px solid var(--linea);
}
.lista-temario li::before {
content: "—";
margin-right: 0.6rem;
color: var(--acento);
}
.lista-marcada {
display: grid;
gap: 0.75rem;
color: var(--tinta-2);
font-size: 0.98rem;
}
.lista-marcada li::before {
content: "—";
margin-right: 0.6rem;
color: var(--acento);
}
/* Salidas de una sección: enlaces sueltos, uno por línea, con aire entre ellos
porque cada uno es un destino distinto y no una frase que sigue. */
.lista-enlaces {
display: grid;
gap: 0.5rem;
justify-items: start;
margin-top: 2rem;
}
.lista-enlaces a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.chip {
padding: 0.35rem 0.85rem;
border: 1px solid var(--linea);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tinta-2);
}
.bloques {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: clamp(1.5rem, 4vw, 3rem);
}
.bloque {
padding-top: 1.5rem;
border-top: 1px solid var(--linea);
}
.bloque__titulo {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.15rem, 2vw, 1.5rem);
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}
.valores {
display: grid;
gap: clamp(1.25rem, 3vw, 2rem);
}
.valor {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2rem);
padding-top: 1.5rem;
border-top: 1px solid var(--linea);
}
.valor__numero {
font-family: var(--mono);
font-size: 0.85rem;
color: var(--acento);
}
.valor__titulo {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.1rem, 2vw, 1.45rem);
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
}
.datos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 1px;
background: var(--linea);
border-block: 1px solid var(--linea);
}
.datos-grid > div {
padding: clamp(1.25rem, 3vw, 2rem);
background: var(--fondo);
}
.datos-grid dt {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-3);
margin-bottom: 0.6rem;
}
.datos-grid dd {
font-size: 1.05rem;
color: var(--tinta);
}
/* ==========================================================================
21. Tablas
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.tabla-envoltorio {
overflow-x: auto;
border: 1px solid var(--linea);
border-radius: var(--radio);
corner-shape: superellipse(2);
}
.tabla {
width: 100%;
min-width: 34rem;
border-collapse: collapse;
text-align: left;
}
.tabla th,
.tabla td {
padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.75rem);
border-bottom: 1px solid var(--linea);
font-weight: 400;
font-size: 0.95rem;
}
.tabla thead th {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-3);
}
.tabla tbody th {
color: var(--tinta);
}
.tabla tbody td {
color: var(--tinta-2);
}
.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
border-bottom: 0;
}
.tabla__importe {
font-family: var(--display);
font-size: 1.1rem;
color: var(--tinta);
white-space: nowrap;
}
/* La tabla de cookies tiene cuatro columnas y su ancho mínimo son 511 px: en
un móvil de 320 la tabla empujaba el documento entero hacia los lados. Como
la cabecera va pegada arriba, se quedaba quieta mientras el contenido se
desplazaba y parecía descolocada. Ahora scrollea la tabla por dentro. */
.tabla-legal-envoltorio {
overflow-x: auto;
}
.tabla-legal {
width: 100%;
border-collapse: collapse;
margin-block: 1rem;
font-size: 0.9rem;
}
.tabla-legal th,
.tabla-legal td {
padding: 0.6rem 0.9rem;
border: 1px solid var(--linea);
text-align: left;
vertical-align: top;
}
.tabla-legal thead th {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-3);
}
/* ==========================================================================
22. Franja de contacto
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.franja {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
padding: var(--bloque) var(--canal);
border-top: 1px solid var(--linea);
}
.franja__titulo {
font-size: clamp(2rem, 5.5vw, 5rem);
margin-bottom: 1rem;
}
.franja__acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
}
/* ==========================================================================
23. Legales
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.legal {
max-width: 72ch;
padding-inline: var(--canal);
}
.legal__bloque + .legal__bloque {
margin-top: clamp(2rem, 4vw, 3rem);
}
.legal__titulo {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.15rem, 2vw, 1.5rem);
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}
.legal p,
.legal ul,
.legal ol {
color: var(--tinta-2);
font-size: 0.98rem;
}
.legal p + p,
.legal p + ul,
.legal ul + p,
.legal table + p {
margin-top: 0.9rem;
}
.legal ul {
display: grid;
gap: 0.5rem;
padding-left: 1.1rem;
list-style: disc;
}
.legal ul li::marker {
color: var(--acento);
}
.legal a {
color: var(--acento);
border-bottom: 1px solid currentColor;
}
.legal code {
font-family: var(--mono);
font-size: 0.85em;
color: var(--tinta);
background: rgba(255, 255, 255, 0.06);
padding: 0.1rem 0.35rem;
border-radius: 4px;
}
.legal__fecha {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tinta-3);
}
/* ==========================================================================
24. Ajustes para pantalla pequeña
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
@media (max-width: 810px) {
/* En móvil el submenú deja de ser flotante: se ve siempre, indentado. */
.submenu {
position: static;
min-width: 0;
padding: 0;
margin: 0.25rem 0 0.5rem;
background: none;
border: 0;
border-radius: 0;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
/* Los enlaces del submenú medían 34 px de alto. Con el dedo eso se falla: el
objetivo táctil sube a 44 px como el resto de controles de la web. */
.submenu a {
display: flex;
align-items: center;
min-height: 2.75rem;
padding: 0.5rem 0 0.5rem 1rem;
font-family: var(--texto);
font-size: 1rem;
letter-spacing: 0;
}
.menu__item {
flex-direction: column;
align-items: flex-start;
}
.menu__mas {
display: none;
}
.curso,
.curso:nth-child(1),
.curso:nth-child(2),
.curso:nth-child(3) {
position: static;
}
.franja {
align-items: flex-start;
}
.cookies__categoria {
align-items: flex-start;
}
.medio--ancho img {
aspect-ratio: 4 / 3;
}
}
@media (max-width: 620px) {
.pie__alto {
grid-template-columns: minmax(0, 1fr);
padding-block: clamp(2rem, 5vh, 5rem);
}
/* Los grupos de enlaces del pie se reparten en dos columnas. En una sola
—que es lo que daba el `auto-fit` con mínimo de 14rem a este ancho— los
seis grupos se apilaban y el pie se iba a 1 434 px, casi dos pantallas. */
.pie__enlaces {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pie__legal {
padding-block: 1.25rem;
gap: 0.6rem 1.25rem;
}
/* El aviso de cookies ocupaba 341 px de un viewport de 844: el 40 % de la
pantalla. Se aprieta el relleno, la separación y el cuerpo del texto, y
los botones bajan de tamaño para caber en una fila en vez de partirse en
dos. Queda en unos 225 px, que es una cuarta parte de la pantalla. */
.cookies {
padding: 0.75rem var(--canal);
}
.cookies__caja {
gap: 0.9rem;
padding: 1rem;
border-radius: 20px;
}
.cookies__texto {
font-size: 0.85rem;
}
/* Los tres botones se reparten en dos filas: los dos de decisión arriba, a
mitades iguales, y «Configurar» debajo ocupando el ancho entero. Antes
«Configurar» era un enlace subrayado de 68x21 px, por debajo de los 44 px
de alto que pide cualquier guía de toque: en un móvil se falla al pulsarlo.
Al desplegar el panel se convierte en un botón de verdad. */
.cookies__acciones {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.cookies__acciones .boton {
padding: 0.75rem 0.5rem;
font-size: 0.85rem;
}
.cookies__acciones .enlace-boton {
grid-column: 1 / -1;
min-height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border: 1px solid var(--linea);
border-radius: 999px;
text-decoration: none;
}
}
/* ==========================================================================
25. Grupo derecho de la cabecera y botón de tema
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.cabecera__derecha {
display: flex;
align-items: center;
gap: clamp(0.5rem, 1.5vw, 1.25rem);
}
.tema {
/* Grid y no flex: los dos iconos se apilan en la misma celda para que el
sol y la luna se crucen en el mismo sitio al cambiar de tema. */
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
background: none;
border: 1px solid var(--linea);
border-radius: 50%;
color: var(--tinta);
cursor: pointer;
transition: border-color 0.3s var(--salida), background-color 0.3s var(--salida);
}
.tema:hover {
border-color: var(--acento);
}
/* Los dos iconos se dibujan con CSS: ni librería de iconos ni emojis. */
.tema__sol,
.tema__luna {
grid-area: 1 / 1;
display: block;
border-radius: 50%;
transition: transform 0.45s var(--salida), opacity 0.3s var(--salida);
}
.tema__sol {
width: 0.85rem;
height: 0.85rem;
background: currentColor;
box-shadow:
0 -0.62rem 0 -0.32rem currentColor,
0 0.62rem 0 -0.32rem currentColor,
0.62rem 0 0 -0.32rem currentColor,
-0.62rem 0 0 -0.32rem currentColor;
}
.tema__luna {
width: 0.95rem;
height: 0.95rem;
box-shadow: inset -0.3rem -0.18rem 0 0 currentColor;
opacity: 0;
transform: scale(0.4) rotate(-40deg);
}
:root[data-tema="claro"] .tema__sol {
opacity: 0;
transform: scale(0.4) rotate(40deg);
}
:root[data-tema="claro"] .tema__luna {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* ==========================================================================
26. WhatsApp flotante
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.whatsapp {
position: fixed;
right: var(--canal);
bottom: var(--canal);
z-index: 90;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.1rem;
background: var(--tinta);
color: var(--fondo);
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 6px 24px var(--sombra);
transition: transform 0.3s var(--entrada), opacity 0.3s var(--salida);
}
.whatsapp svg {
width: 1.15rem;
height: 1.15rem;
}
.whatsapp:hover {
transform: translateY(-3px);
}
.whatsapp:focus-visible {
outline-offset: 4px;
}
/* Mientras el aviso de cookies está abierto, el botón estorba y tapa texto. */
.con-aviso-cookies .whatsapp {
opacity: 0;
pointer-events: none;
}
/* ==========================================================================
27. Interruptor de cookies
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.interruptor {
display: inline-flex;
align-items: center;
cursor: pointer;
flex: none;
}
.interruptor input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.interruptor__pista {
position: relative;
display: block;
width: 3rem;
height: 1.6rem;
background: var(--linea);
border: 1px solid var(--linea);
border-radius: 999px;
transition: background-color 0.3s var(--salida), border-color 0.3s var(--salida);
}
.interruptor__pista::after {
content: "";
position: absolute;
top: 50%;
left: 3px;
width: 1.1rem;
height: 1.1rem;
margin-top: -0.55rem;
background: var(--tinta);
border-radius: 50%;
transition: transform 0.3s var(--salida), background-color 0.3s var(--salida);
}
.interruptor input:checked + .interruptor__pista {
background: var(--acento);
border-color: var(--acento);
}
.interruptor input:checked + .interruptor__pista::after {
background: var(--fondo);
transform: translateX(1.4rem);
}
.interruptor input:focus-visible + .interruptor__pista {
outline: 2px solid var(--acento);
outline-offset: 3px;
}
/* ==========================================================================
28. Cuestionario de orientación
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.cuestionario {
display: grid;
gap: var(--bloque);
}
.cuestionario__bloque {
margin: 0;
padding: 0;
border: 0;
}
.cuestionario__pregunta {
display: flex;
align-items: baseline;
gap: 0.9rem;
margin-bottom: 1.5rem;
font-family: var(--display);
font-size: clamp(1.4rem, 3vw, 2.2rem);
letter-spacing: -0.025em;
line-height: 1.1;
}
.cuestionario__numero {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--acento);
}
.cuestionario__opciones {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 0.75rem;
}
.opcion {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
border: 1px solid var(--linea);
border-radius: var(--radio);
cursor: pointer;
transition: border-color 0.3s var(--salida), background-color 0.3s var(--salida);
}
.opcion:hover {
border-color: var(--tinta-3);
}
.opcion input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.opcion__marca {
flex: none;
width: 0.9rem;
height: 0.9rem;
border: 1px solid var(--tinta-3);
border-radius: 50%;
transition: border-color 0.3s var(--salida), box-shadow 0.3s var(--salida);
}
.opcion input:checked ~ .opcion__marca {
border-color: var(--acento);
box-shadow: inset 0 0 0 3px var(--fondo), inset 0 0 0 12px var(--acento);
}
.opcion input:checked ~ .opcion__texto {
font-weight: 700;
}
.opcion:has(input:checked) {
border-color: var(--acento);
}
.opcion input:focus-visible ~ .opcion__marca {
outline: 2px solid var(--acento);
outline-offset: 3px;
}
.resultado {
margin-top: var(--bloque);
padding-top: 2.5rem;
border-top: 1px solid var(--linea);
}
.resultado__titulo {
font-size: clamp(2rem, 6vw, 4rem);
margin-block: 0.75rem 1rem;
}
.resultado__texto {
max-width: 46ch;
}
.resultado__acciones {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
/* ==========================================================================
29. Galería y visor
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: clamp(0.5rem, 1.5vw, 1rem);
}
.galeria__boton {
display: block;
width: 100%;
padding: 0;
background: none;
border: 0;
cursor: zoom-in;
overflow: hidden;
border-radius: var(--radio);
}
.galeria__boton img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.6s var(--entrada), filter 0.4s var(--salida);
}
.galeria__boton:hover img {
transform: scale(1.04);
}
.visor {
max-width: min(92vw, 68rem);
padding: 0;
background: none;
border: 0;
color: var(--tinta);
}
.visor::backdrop {
background: rgba(0, 0, 0, 0.86);
}
.visor__imagen {
width: 100%;
max-height: 76vh;
object-fit: contain;
border-radius: var(--radio);
}
.visor__pie {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.9rem;
text-align: center;
}
.visor__cerrar {
position: absolute;
top: 0;
right: 0;
padding: 0.5rem 1rem;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
cursor: pointer;
}
/* ==========================================================================
30. Agenda
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.eventos {
display: grid;
gap: 0;
}
.evento {
display: grid;
grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
gap: clamp(1rem, 4vw, 3rem);
padding-block: clamp(1.75rem, 4vw, 3rem);
border-top: 1px solid var(--linea);
}
.evento:last-child {
border-bottom: 1px solid var(--linea);
}
.evento__fecha {
font-family: var(--mono);
font-size: 0.85rem;
letter-spacing: 0.06em;
color: var(--tinta-2);
}
.evento__hora {
display: block;
margin-top: 0.35rem;
color: var(--acento);
}
.evento__titulo {
font-size: clamp(1.5rem, 3.5vw, 2.4rem);
margin-bottom: 0.5rem;
}
.evento__lugar {
margin-bottom: 0.75rem;
color: var(--tinta-3);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ==========================================================================
31. Pasos, fichas, notas de blog y mapa
5. Hero 10. Acordeón 15. Precarga 20. Listas y chips 25. Tema y cabecera 30. Agenda · 31. Varios
========================================================================== */
.pasos {
display: grid;
gap: 1.25rem;
counter-reset: paso;
}
.pasos li {
position: relative;
padding-left: 3.5rem;
counter-increment: paso;
}
.pasos li::before {
content: counter(paso, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.1em;
font-family: var(--mono);
font-size: 0.85rem;
color: var(--acento);
letter-spacing: 0.08em;
}
.fichas {
display: grid;
gap: 0;
}
.fichas__fila {
display: grid;
grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
gap: 1.5rem;
padding-block: 1.25rem;
border-top: 1px solid var(--linea);
}
.fichas__fila:last-child {
border-bottom: 1px solid var(--linea);
}
.fichas dt {
color: var(--tinta-3);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.tarjeta--texto {
border: 1px solid var(--linea);
border-radius: var(--radio);
}
.tarjeta__fecha {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.08em;
color: var(--tinta-3);
margin-bottom: 0.75rem;
}
.tarjeta__titulo a:hover {
color: var(--acento);
}
.legal__bloque ul {
list-style: disc;
padding-left: 1.25rem;
margin-block: 0.75rem;
}
.legal__bloque li {
margin-bottom: 0.4rem;
}
.legal__bloque strong {
color: var(--tinta);
}
.campo--trampa {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.formulario__aviso--error {
color: var(--acento);
}
.mapa {
border: 1px solid var(--linea);
border-radius: var(--radio);
overflow: hidden;
}
.mapa__hueco {
display: grid;
justify-items: start;
gap: 1rem;
padding: clamp(1.5rem, 5vw, 3rem);
}
.mapa__texto {
max-width: 46ch;
color: var(--tinta-2);
}
.mapa__alternativa {
font-size: 0.9rem;
}
.mapa__alternativa a {
color: var(--acento);
border-bottom: 1px solid transparent;
}
.mapa__alternativa a:hover {
border-bottom-color: var(--acento);
}
.mapa__marco {
display: block;
width: 100%;
height: clamp(18rem, 45vh, 28rem);
border: 0;
}
@media (max-width: 620px) {
.evento,
.fichas__fila {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
.whatsapp__texto {
display: none;
}
.whatsapp {
padding: 0.8rem;
}
}
/* Submenús del pie: un nivel más, en cuerpo menor y sin competir con el
enlace principal. */
.pie__sub {
margin-top: 0.5rem;
display: grid;
gap: 0.35rem;
font-size: 0.85rem;
color: var(--tinta-3);
}
.pie__sub a:hover {
color: var(--tinta);
}
/* ==========================================================================
32. Conversión: acciones y datos clave
========================================================================== */
.heroe__acciones,
.seccion__acciones,
.cabecera-pagina__acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
}
/* Dentro de .heroe__abajo la separación ya la pone el grid. */
.seccion__acciones,
.cabecera-pagina__acciones {
margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.seccion__acciones {
margin-top: clamp(2rem, 5vw, 3.5rem);
}
.boton--grande {
padding: 1.05rem 2.4rem;
font-size: 1.05rem;
}
/* Cuatro columnas para los datos de la titulación: en una tarjeta normal no
caben sin quedarse altísimas. */
.rejilla-tarjetas--cuatro {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.rejilla-tarjetas--dos {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.dato-clave {
padding: clamp(1rem, 2vw, 1.4rem);
border-top: 1px solid var(--acento);
}
.dato-clave__titulo {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.dato-clave__texto {
font-size: 0.9rem;
}
.bloque {
padding: clamp(1.25rem, 3vw, 1.75rem);
background: var(--fondo-2);
border: 1px solid var(--linea);
border-radius: var(--radio);
corner-shape: superellipse(2);
}
.bloque__etiqueta {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--acento);
margin-bottom: 0.5rem;
}
.bloque__titulo {
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
margin-bottom: 0.75rem;
}
.bloque__pie {
margin-top: 1rem;
padding-top: 0.85rem;
border-top: 1px solid var(--linea);
font-size: 0.9rem;
color: var(--tinta-2);
}
.subetiqueta {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tinta-3);
margin-right: 0.4rem;
}
.lista-marcada--ancha {
max-width: 68ch;
}
@media (max-width: 620px) {
.heroe__acciones .boton,
.seccion__acciones .boton,
.franja__acciones .boton {
width: 100%;
text-align: center;
}
}
/* ==========================================================================
33. Fondos de sección
Una banda con foto detrás. La foto se intuye bajo un velo del color del
fondo, así el texto de encima conserva el contraste: el velo es denso
arriba y se abre abajo, nunca al revés.
Son dos capas anidadas a propósito. `.fondo` es la que se desplaza con el
scroll y `.fondo__imagen` la que entra con el acercamiento; si las dos
escribieran `transform` en el mismo nodo, una pisaría a la otra.
========================================================================== */
.fondo {
position: absolute;
/* Sobresale por arriba y por abajo: así el desplazamiento del scroll nunca
llega a descubrir el borde de la foto.
A los lados se sale lo que mide el canal. Todas las bandas con foto
llevan `padding-inline: var(--canal)` en el elemento que las contiene, y
un elemento absoluto se coloca contra la caja de relleno: sin este
sangrado la foto quedaría metida hacia dentro y no llegaría a los
bordes. Lo que sobra lo recorta el `overflow: hidden` de la banda. */
inset: -6% calc(-1 * var(--canal));
z-index: 0;
overflow: hidden;
pointer-events: none;
}
/* El velo del hero es propio y más claro que el de las demás bandas, así que
aquí la foto no necesita el levantamiento de brillo: con él la imagen se
lavaba y el blanco de las luces de escenario se comía el titular. */
.heroe--fondo .fondo::after {
background: linear-gradient(to bottom, var(--velo-heroe-1), var(--velo-heroe-2));
}
.heroe--fondo .fondo__imagen {
filter: brightness(1.04);
}
.fondo__imagen {
width: 100%;
height: 100%;
object-fit: cover;
/* Las fotos de stock son de concierto y de sala cerrada: casi todas vienen
muy oscuras, y bajo el velo desaparecían del todo. Se levantan aquí.
Subir el brillo no puede romper el contraste: el velo está calculado
contra el peor caso posible, que es una foto completamente blanca. */
filter: brightness(1.25) contrast(1.03);
}
/* El velo va sobre la foto y por debajo del contenido. */
.fondo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, var(--velo-1), var(--velo-2));
}
.cabecera-pagina--fondo,
.seccion--fondo,
.heroe--fondo,
.franja--fondo,
.pie {
position: relative;
isolation: isolate;
overflow: hidden;
}
/* Todo lo que va dentro de una banda con foto tiene que quedar por encima del
velo. Se resuelve con un selector de hijos en vez de envolver el contenido
en un div: son bandas de plantillas distintas y así vale para todas. */
.cabecera-pagina--fondo > *:not(.fondo),
.seccion--fondo > *:not(.fondo),
.heroe--fondo > *:not(.fondo),
.franja--fondo > *:not(.fondo),
.pie > *:not(.fondo) {
position: relative;
z-index: 1;
}
/* 34. Logotipo de la precarga ---------------------------------------------- */
.precarga {
align-content: center;
gap: clamp(1.5rem, 4vw, 3rem);
}
.precarga__logo {
width: clamp(12rem, 34vw, 22rem);
height: auto;
}
/* En el pie la foto es textura, no protagonista: el desenfoque la aparta del
texto sin llegar a borrarla, y el velo va más cerrado que en una banda
porque aquí hay mucho texto seguido. */
.pie .fondo__imagen {
filter: blur(3px) brightness(1.25) saturate(0.8);
}
.pie .fondo::after {
background: linear-gradient(to bottom, var(--velo-1), var(--velo-1));
}
/* ==========================================================================
34. Tarjetas de precio
Van en dos bloques por familia, y cada bloque lleva su encabezado a la
vista: «Programa Inicial» y «Programa Individual inicial» se llaman casi
igual y sin el título no se sabe cuál es en grupo y cuál no.
Dentro de la tarjeta el orden es el de las preguntas que se hacen al
mirarlas: cuánto, qué matrícula, qué entra en el mes y a quién va dirigido.
========================================================================== */
.precios {
display: grid;
gap: clamp(2.5rem, 5vw, 4rem);
}
/* El encabezado de familia lleva el mismo tratamiento que `.etiqueta` —mono,
versalitas, espaciado— y no el de titular. Con cuerpo de titular quedaba más
grande que el nombre de las tarjetas que encabeza, y la jerarquía se leía al
revés. */
.precios__familia {
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tinta-3);
margin-bottom: clamp(0.85rem, 1.5vw, 1.25rem);
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--linea);
}
.precio {
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: clamp(1.25rem, 2.5vw, 1.85rem);
background: var(--fondo-2);
border: 1px solid var(--linea);
border-radius: var(--radio);
corner-shape: superellipse(2);
}
.precio__nombre {
font-size: clamp(1.3rem, 2.1vw, 1.7rem);
line-height: 1.1;
}
.precio__resumen {
font-size: 0.92rem;
}
/* La cuota abre el bloque económico con una línea por encima: separa el
precio de la descripción sin necesidad de un título. */
.precio__cuota {
display: flex;
align-items: baseline;
gap: 0.4rem;
margin-top: 0.15rem;
padding-top: 0.9rem;
border-top: 1px solid var(--linea);
}
.precio__importe {
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
}
.precio__periodo {
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--tinta-3);
}
.precio__matricula {
display: grid;
gap: 0.3rem;
font-size: 0.85rem;
color: var(--tinta-2);
}
/* La matrícula gratis es el argumento de venta de la tarjeta: va en acento y
en negrita. El acento da 7.50:1 sobre `--fondo-2` en oscuro y 5.10:1 en
claro, así que pasa en los dos temas. */
.precio__matricula p:first-child {
color: var(--acento);
font-weight: 700;
}
.precio__puntos {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9rem;
color: var(--tinta-2);
}
.precio__puntos li {
display: grid;
grid-template-columns: 0.9rem minmax(0, 1fr);
gap: 0.5rem;
align-items: start;
}
.precio__puntos li::before {
content: "";
width: 0.4rem;
height: 0.4rem;
margin-top: 0.45rem;
border-radius: 50%;
background: var(--acento);
}
.precio__edades {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--tinta-3);
}
/* `margin-top: auto` empuja el botón al fondo de la tarjeta. Como las de una
misma fila pueden tener distinta altura —unas llevan línea de edades y
otras no—, sin esto los cuatro botones quedarían a alturas distintas. */
.precio__accion {
margin-top: auto;
text-align: center;
}
/* En móvil el importe a 2rem y el nombre a 1.3rem ocupan tres líneas antes de
llegar a la matrícula, así que la tarjeta se aprieta un punto. */
@media (max-width: 620px) {
.precio__importe {
font-size: 1.9rem;
}
.precio__nombre {
font-size: 1.2rem;
}
}