@import url("fuentes.css?v=fd9fffec");
/* ==========================================================================
Si Re Suena — landing de captación de centros
MUNDO: CARTULINA. Reescrito entero el 27-10-2026.
--------------------------------------------------------------------------
La escena: una coordinadora leyendo esto en el móvil, en un despacho con
fluorescente, entre dos actividades. Treinta segundos. No buscaba esto.
La página es el TABLÓN de un aula: un fondo de papel kraft y, encima,
cartulinas de color cortadas a tijera, montadas unas sobre otras. Los tres
colores de la marca entran como CAMPOS enteros —no como acentos—, que es
la única forma de que una página se parezca a un logotipo que es una
acuarela turquesa.
Lo que esta versión reemplaza, y por qué: hasta el 27-10 la página era
morado casi negro, rejilla suiza estricta y lados planos. Era el opuesto
exacto de la marca de la clienta, el turquesa salía UNA vez en 8.900 px, y
las dos fotos de música que ya existían estaban sin colocar. José, al
verla entera: «el diseño no me gusta — entra frío y oscuro, la rejilla
parece un esqueleto, falta gente y falta música». Las tres eran ciertas.
La anterior está congelada en ~/Archivo/Clientes/Si-Re-Suena/.
========================================================================== */
:root{
/* --- las cartulinas. Todas son campo, y todas llevan su tinta medida --- */
/* EL TABLÓN, y es más oscuro que las cartulinas a propósito. El primer
valor que puse aquí fue #F3EBDD y las fichas hueso encima daban 1,11:1
de separación: no se veían. Un corcho de verdad es bastante más oscuro
que lo que se clava en él, y si no, no hay nada clavado: hay una página
beige. Con #DCCBA8 la separación es 1,50:1 y la ficha existe. */
--papel:#DCCBA8; /* el kraft del tablón: el fondo de la página */
--hueso:#FBF7F0; /* la cartulina clara: fichas y formulario */
--turquesa:#00B2C0; /* la acuarela de su logo. El héroe, a sangre */
--morado:#611C70; /* el del nombre del logo */
--naranja:#DC690F; /* el pulso y el corazón del logo. El precio */
--accion:#BD590B; /* el mismo naranja del logo, bajado a 4,57:1 con
blanco. Era #B05209 (5,18:1) y Natalia lo pidio
«un poco mas naranja» el 03-11. NO es un tono
nuevo: es el #DC690F del logo oscurecido menos
que antes, un 30 % del camino de vuelta. Mas
naranja que esto NO CABE con texto blanco: el
logo puro da 3,46:1 y suspende. Si alguna vez se
quiere el naranja del logo entero en un boton,
hay que cambiar la tinta a oscura, y eso ya es
otra decision de diseño. El grano va en multiply
y oscurece, asi que lo pintado contrasta algo
mas que este numero. */
/* --- las tintas. Cada campo tiene la suya, medida sobre ese campo ------ */
--tinta:#241A2B; /* 14,1:1 sobre kraft · 6,46 sobre turquesa ·
15,6 sobre hueso · 4,83 sobre naranja */
--tinta-2:#4E442F; /* secundaria, 6,00:1 sobre el tablón y 9,4 sobre
la cartulina hueso. Es un pardo y no un gris:
un gris sobre kraft se ve sucio */
/* OJO: estos tres estan medidos sobre el campo PINTADO, no sobre el color
declarado. El grano se multiplica encima y oscurece la cartulina —el
turquesa #00B2C0 se pinta (0,170,183)—, asi que un tinte calculado sobre
el hexadecimal se queda corto. Los tres primeros valores que puse aqui
daban 4,77 / 6,43 / 4,52 en teoria y 3,84 / 7,14 / 3,70 en pantalla.
Si se toca el grano, hay que volver a medir estos tres. */
--sobre-turquesa-2:#0D2A2E; /* 5,36:1 sobre el turquesa pintado */
--sobre-morado-2:#D6BEDD; /* 7,14:1 sobre el morado pintado */
--sobre-naranja-2:#1D0C01; /* 5,04:1 sobre el naranja pintado */
/* --- los papeles del horario, que son tres y no uno ------------------- */
/* Los papeles del horario, TENIDOS HACIA EL CAMPO. Eran hueso, kraft y
turquesa palido —papel de verdad, pero diez cartulinas a todo contraste
sobre el turquesa son un mosaico, y la unica que tiene que ser figura es
la naranja—. Ahora los tres son tintes del propio campo: siguen siendo
bloques y siguen estando llenos, que es el argumento, pero dejan de
pelearse con la hora. No se les pone rotulo: ninguna fuente dice que
hace un centro a cada hora. */
--tira-1:#D4ECEF;
--tira-2:#B4E1E6;
--tira-3:#8FD5DC;
--tira-4:#E6DCEA; /* el cuarto papel: un morado lavadísimo, que los
dos recortes pequeños lleven tinte de marca */
--display:'Bricolage Grotesque',system-ui,sans-serif;
--texto:'Atkinson Hyperlegible Next',system-ui,-apple-system,sans-serif;
/* Escala modular, cuarta justa (1,333) desde 17px */
--t--1:0.78rem;
--t-0:1rem;
--t-1:1.333rem;
--t-2:1.777rem;
--t-3:2.369rem;
--t-4:3.157rem;
--medida:62ch;
--anchura:1180px;
--aire:clamp(3.5rem,8vw,6.5rem);
/* La unidad. Todo canto, todo relleno y todo hueco es múltiplo de ella: el
corte a tijera es una decisión y no un descuido, y lo que distingue las
dos cosas es que debajo haya un módulo. */
--u:0.5rem;
/* EL CORTE. En píxeles y no en porcentaje a propósito: unas tijeras
desvían lo mismo en una cartulina grande que en una pequeña, así que un
corte en % daría dentelladas enormes en los campos a sangre y nada en
una ficha. Tres variantes para que dos cantos vecinos no se repitan. */
--corte-a:polygon(
0 4px, 31% 0, 33% 1px, 79% 4px, 100% 1px,
calc(100% - 3px) 46%, 100% 49%, calc(100% - 2px) calc(100% - 3px),
62% calc(100% - 1px), 60% calc(100% - 4px), 12% calc(100% - 2px), 0 100%,
2px 58%, 1px 55%, 3px 22%);
--corte-b:polygon(
0 1px, 17% 4px, 19% 1px, 68% 3px, 100% 0,
calc(100% - 2px) 27%, calc(100% - 4px) 30%, 100% calc(100% - 1px),
43% calc(100% - 3px), 41% calc(100% - 1px), 9% calc(100% - 4px), 0 calc(100% - 2px),
3px 71%, 1px 68%);
--corte-c:polygon(
0 2px, 24% 5px, 57% 1px, 59% 4px, 100% 2px,
calc(100% - 4px) 18%, calc(100% - 1px) 64%, calc(100% - 4px) 100%,
71% calc(100% - 2px), 34% calc(100% - 5px), 31% calc(100% - 1px), 0 calc(100% - 3px),
4px 39%, 2px 36%);
--corte-d:polygon(
0 3px, 46% 1px, 48% 4px, 88% 0, 100% 3px,
calc(100% - 1px) 38%, calc(100% - 5px) 41%, calc(100% - 1px) 100%,
55% calc(100% - 4px), 22% calc(100% - 1px), 20% calc(100% - 4px), 0 calc(100% - 1px),
4px 81%, 1px 15%);
--corte-e:polygon(
0 5px, 11% 1px, 52% 4px, 54% 1px, 100% 4px,
calc(100% - 2px) 55%, calc(100% - 5px) 58%, calc(100% - 2px) calc(100% - 2px),
83% calc(100% - 1px), 37% calc(100% - 4px), 8% calc(100% - 1px), 0 calc(100% - 4px),
1px 47%, 4px 44%, 1px 12%);
}
/* NINGÚN CANTO SE REPITE AL LADO DE SÍ MISMO. Con un solo corte para toda
una familia de fichas, cinco cartulinas en fila salen calcadas y lo que se
lee no es «cortado a mano» sino «filtro». Se reparten los cinco por orden
de aparición, que es gratis y es lo que distingue el recurso del gesto. */
.quien > div:nth-child(5n+1),.tecnicas li:nth-child(5n+1),
.pasos li:nth-child(5n+1),
.cambia-rejilla > div:nth-child(5n+1),.dia > i:nth-child(5n+1){clip-path:var(--corte-a)}
.quien > div:nth-child(5n+2),.tecnicas li:nth-child(5n+2),
.pasos li:nth-child(5n+2),
.cambia-rejilla > div:nth-child(5n+2),.dia > i:nth-child(5n+2){clip-path:var(--corte-b)}
.quien > div:nth-child(5n+3),.tecnicas li:nth-child(5n+3),
.pasos li:nth-child(5n+3),
.cambia-rejilla > div:nth-child(5n+3),.dia > i:nth-child(5n+3){clip-path:var(--corte-c)}
.quien > div:nth-child(5n+4),.tecnicas li:nth-child(5n+4),
.pasos li:nth-child(5n+4),
.cambia-rejilla > div:nth-child(5n+4),.dia > i:nth-child(5n+4){clip-path:var(--corte-d)}
.quien > div:nth-child(5n),.tecnicas li:nth-child(5n),
.pasos li:nth-child(5n),
.cambia-rejilla > div:nth-child(5n),.dia > i:nth-child(5n){clip-path:var(--corte-e)}
/* Y la columna de al lado no empieza por el mismo: cada día desplaza uno. */
.dia:nth-child(2) > i:nth-child(5n+1){clip-path:var(--corte-c)}
.dia:nth-child(3) > i:nth-child(5n+1){clip-path:var(--corte-d)}
.dia:nth-child(4) > i:nth-child(5n+1){clip-path:var(--corte-e)}
.dia:nth-child(5) > i:nth-child(5n+1){clip-path:var(--corte-b)}
.citas-par blockquote:nth-child(2){clip-path:var(--corte-d)}
.musica figure:nth-child(2) img{clip-path:var(--corte-e)}
.musica figure:nth-child(3) img{clip-path:var(--corte-b)}
.tarifa.anual{clip-path:var(--corte-d)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* EL TABLÓN. El grano es un mosaico de 72 px de ruido con fibras largas,
3,7 KB, multiplicado sobre el color. Un campo plano de color a sangre en
pantalla se lee a plástico; con grano se lee a papel, que es de lo que va
esto. La regla vale para CUALQUIER cartulina: cada una pone su color y el
grano viene con la clase. */
body{
margin:0;
background-color:var(--papel);
background-image:url(img/grano.png);
background-size:72px 72px;
background-blend-mode:multiply;
color:var(--tinta);
font-family:var(--texto);
font-size:17px;
line-height:1.6;
text-rendering:optimizeLegibility;
}
.hoja{
background-color:var(--c,var(--papel));
background-image:url(img/grano.png);
background-size:72px 72px;
background-blend-mode:multiply;
}
img{max-width:100%;height:auto;display:block}
picture{display:block;max-width:100%;min-width:0}
p{margin:0 0 1em;max-width:var(--medida)}
h1,h2,h3{font-family:var(--display);margin:0 0 .5em;letter-spacing:-.025em}
h1{
font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
font-size:clamp(1.9rem,5vw,3.5rem);line-height:.98;
}
/* En caja baja y no en versales: en versales, «Lo que se trabaja el martes se
ve el jueves» son cuarenta y dos caracteres gritando. Las versales se
quedan donde caben de una vez, que es el titular de arriba. */
h2{font-weight:800;font-size:clamp(1.65rem,3.9vw,var(--t-3));line-height:1.06;max-width:20ch}
h3{font-weight:700;font-size:var(--t-1);line-height:1.2;letter-spacing:-.015em}
/* --- las superficies que pinta el navegador, y que no pinta nadie -------- */
a{color:var(--morado);text-underline-offset:.18em;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--accion);outline-offset:3px}
::selection{background:var(--turquesa);color:var(--tinta)}
input,select,textarea{caret-color:var(--accion)}
html{scrollbar-color:var(--morado) var(--papel)}
::marker{color:var(--naranja)}
.env{max-width:var(--anchura);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
section{padding-block:var(--aire)}
[id]{scroll-margin-top:7rem}
.entrada{font-size:var(--t-1);line-height:1.45;max-width:46ch}
/* ==========================================================================
BOTONES
El corte va en un ::before y no en el elemento, porque clip-path recorta
TAMBIÉN el contorno de foco y la sombra. Un botón con el canto cortado y
sin anillo de foco visible es justo el fallo que esta página no se puede
permitir: es una web sobre discapacidad leída por profesionales de la
discapacidad.
========================================================================== */
.btn{
position:relative;isolation:isolate;
display:inline-flex;align-items:center;justify-content:center;
padding:calc(var(--u)*2.2) calc(var(--u)*3.4);
border:0;background:none;
font-family:var(--display);font-size:var(--t-0);font-weight:700;
letter-spacing:-.01em;text-decoration:none;cursor:pointer;line-height:1.2;
transition:transform .12s cubic-bezier(.2,.7,.3,1);
}
.btn::before{
content:'';position:absolute;inset:0;z-index:-1;
clip-path:var(--corte-b);
background-color:var(--bc,var(--accion));
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
transition:background-color .14s ease;
}
.btn-1{color:#fff}
/* El hover oscurece la MISMA cartulina en vez de pintarla de otro color. Era
un #8C4107 escrito a mano, es decir un segundo naranja en el sistema que no
sale del logo y que habia que mantener a mano si cambiaba la accion. Un
filtro no tiene ese problema y da lo mismo en pantalla: #B05209 al 82 % es
(144,66,7), y el blanco encima sube de 5,18:1 a 6,47:1. */
.btn-1:hover::before{filter:brightness(.82)}
/* Sobre el turquesa del héroe: una cartulina hueso con tinta, no un contorno
transparente. En este mundo un botón es un trozo de cartón, no un borde. */
.btn-2,.btn-3{color:var(--tinta);--bc:var(--hueso)}
/* Y lo mismo con los secundarios, por la misma razon y con una ganancia de
propina: antes el hover iba de hueso a blanco puro, que sobre turquesa no
se distingue. Oscurecer un 4 % se ve mas que aclarar un papel que ya es
casi blanco, y encima se lee a carton apretado, que es el mundo. */
.btn-2:hover::before,.btn-3:hover::before{filter:brightness(.96)}
/* El acuse del dedo: en un móvil no hay hover, y hasta la revisión de octubre
ningún control de esta página acusaba que lo habías pulsado. La cartulina
se hunde, que es lo que hace un cartón cuando lo aprietas. */
.btn:active{transform:translateY(2px)}
.btn:disabled{color:#fff;cursor:default;transform:none}
.btn:disabled::before{--bc:#5A4F3A}
.acciones{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*4)}
/* ==========================================================================
CABECERA
Sin menú, y es regla del encargo: cada enlace de menú es una salida del
embudo. Lo que un menú sí resolvía —poder actuar sin recorrerse la página
entera— lo resuelve el botón. Va en hueso porque el logotipo es una
acuarela con alfa: sobre el turquesa no se sostendría.
========================================================================== */
.cabecera{
position:sticky;top:0;z-index:20;
background-color:var(--hueso);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
padding-block:calc(var(--u)*2);
border-bottom:3px solid var(--tinta);
}
.cabecera.compacta{padding-block:var(--u)}
.cabecera .env{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*2)}
.cabecera-acciones{display:flex;align-items:center;gap:clamp(.9rem,2.5vw,1.8rem)}
.btn-cab{padding:calc(var(--u)*1.5) calc(var(--u)*2.4);font-size:.95rem}
.cabecera img{display:block}
.cabecera .marca-completa{width:118px}
.cabecera .marca-sello{display:none;width:56px}
.cabecera.compacta .marca-completa{display:none}
.cabecera.compacta .marca-sello{display:block}
.cabecera .tel{
color:var(--morado);text-decoration:none;white-space:nowrap;
display:flex;align-items:baseline;gap:.45rem;
}
.cabecera .tel span{font-size:var(--t--1);color:var(--tinta-2)}
.cabecera .tel b{
font-family:var(--display);font-weight:700;
border-bottom:3px solid var(--naranja);padding-bottom:1px;
}
/* ==========================================================================
HÉROE — turquesa a sangre, y el horario en cartulinas
El color que de verdad domina su logo pasa a ser el primer pliegue entero.
Hasta el 27-10 salía una sola vez en toda la página, en una casilla de
70 px, mientras el campo era morado casi negro.
========================================================================== */
.heroe{--c:var(--turquesa);color:var(--tinta);padding-block:calc(var(--u)*7) var(--aire)}
.heroe-rejilla{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* El titular va DENTRO de la cartulina y lo recorta el mismo canto que a la
forma. Es la subida que donó el linograbado: una mano y una herramienta,
no una tipografía puesta al lado de unos recortes. */
/* El relleno baja de 4 u a 1,6 para que el canto pase PEGADO a las versales
y el titular quede dentro del material, no flotando en una caja acolchada:
es la subida que dono el linograbado, una mano y una herramienta. No se
recortan las letras: en una pagina que presume de legibilidad, comerle un
pico a una mayuscula es un chiste caro. */
.titular{
clip-path:var(--corte-a);
background-color:var(--hueso);
padding:calc(var(--u)*1.6) calc(var(--u)*2) calc(var(--u)*2);
}
.titular h1{margin:0}
/* EL TITULAR, EN DOS PISOS (03-11-2026). Natalia pidio que el nombre del
programa salga «al principio». El nombre va en VERSALES, que es justo donde
esta pagina las permite —un titular corto que cabe de una vez—, y el «que
es» baja a caja baja: son 78 caracteres y en versales serian un grito, que
es la regla que ya estaba escrita unas lineas mas arriba. El que-es va en
`--tinta-2`, que sobre la cartulina hueso da 9,4:1. */
.titular .programa{display:block}
.titular .que-es{
display:block;text-transform:none;
font-size:clamp(1rem,2.1vw,1.333rem);font-weight:700;
line-height:1.22;letter-spacing:-.01em;
margin-top:calc(var(--u)*1.6);color:var(--tinta-2);
}
.heroe .entrada{color:var(--sobre-turquesa-2);max-width:42ch;margin-top:calc(var(--u)*3)}
/* LA OFERTA, EN EL PRIMER PLIEGUE. «Sin coste y sin compromiso» aparecia a
un 80 % de profundidad, y el lector llega de un correo frio con treinta
segundos: no llegaba nunca. Son palabras que ya estaban en la pagina, en
el titular del cierre y en el paso 3. */
.sin-coste{
margin:calc(var(--u)*3) 0 0;font-size:var(--t-0);
color:var(--sobre-turquesa-2);max-width:40ch;
}
.sin-coste b{font-family:var(--display);font-weight:700;color:var(--tinta)}
/* Aqui habia TRES fichas iguales de cifra sobre rotulo —3 a 15 · 60 min ·
4 anos—, que es la plantilla de metrica de heroe que el suelo de calidad
rechaza por nombre. Las dos que son del horario se han mudado al horario y
son una frase; «4 anos» ya lo dice ella en su propio parrafo. */
/* --- EL HORARIO --------------------------------------------------------- */
/* Eran cuarenta rectángulos de blanco al 9-18 % sobre morado casi negro: no
se veían, y rectángulos apilados que no se ven son literalmente la
pantalla de carga de una aplicación. José: «parece un esqueleto». Ahora
cada bloque es una cartulina de uno de TRES papeles sobre el turquesa, con
su canto; y la hora es una cartulina naranja puesta FÍSICAMENTE encima,
girada, con sombra, y más grande que su hueco. */
.semana{margin:0}
.semana-titulo{
font-family:var(--display);font-weight:700;font-size:var(--t-0);
margin:0 0 calc(var(--u)*2);max-width:none;
}
.tablero{
display:grid;grid-template-columns:repeat(5,1fr);
gap:calc(var(--u)*.9);aspect-ratio:7/6;
}
/* Las separaciones entre dias, por el mismo motivo que la regla de arriba:
sin ellas las cartulinas flotan y no se lee una rejilla. Es un
pseudoelemento absoluto y NO un borde, porque un borde empujaria la columna
y descuadraria las seis filas. Va en el centro del hueco (-.45u es la mitad
del gap de .9u) y por debajo de las cartulinas, que es lo que lo hace
rejilla y no marco. */
.dia{display:grid;grid-template-rows:repeat(6,1fr);gap:calc(var(--u)*.9);position:relative}
.dia + .dia::before{
content:'';position:absolute;top:0;bottom:0;
left:calc(var(--u)*-.45);width:1px;
background:rgba(13,42,46,.2);
}
.dia > i{
grid-row:span var(--alto,1);display:block;
clip-path:var(--corte-b);
background-color:var(--p,var(--tira-1));
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
}
.dia > i.hueco{background:none;clip-path:none}
/* La única cartulina naranja de arriba, y la única sombra de la hoja. Las dos
dicen lo mismo: esta está ENCIMA de las otras. La sombra lleva desvío y
desenfoque porque es una sombra, no un halo de color. */
.suya{
grid-row:span 1;align-self:center;
clip-path:var(--corte-c);
background-color:var(--naranja);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
display:grid;place-items:center;
font-family:var(--display);font-weight:800;font-size:var(--t-0);
color:var(--tinta);
transform:rotate(-2.2deg) scale(1.14);
box-shadow:2px 5px 10px rgba(10,45,50,.38);
z-index:2;
}
/* Las cifras que la pagina tiene de VERDAD, a tamano de cifra y con sitio
fijo, que es lo que donaba el contador de tubos. No llevan hora del dia:
NINGUNA fuente dice a que hora abre un centro, y una rejilla con «10:00»
inventado seria un dato falso en la pieza que mas se mira. */
.semana-cifras{
margin:calc(var(--u)*2.5) 0 0;max-width:none;line-height:1.45;
color:var(--sobre-turquesa-2);
}
.semana-cifras b{
font-family:var(--display);font-weight:800;font-size:var(--t-1);
letter-spacing:-.03em;color:var(--tinta);
}
/* LA CABECERA DEL HORARIO (02-11-2026). Los dias iban DEBAJO del tablero y
sueltos; ahora van arriba y con una regla, que es como se lee una agenda
escolar. El gap sube de .75u a .9u para que cada rotulo caiga encima de su
columna: el tablero separa las columnas .9u, y con .75u los dias se
descuadraban un poco respecto a las cartulinas. */
.dias{
display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*.9);
margin:0 0 calc(var(--u)*1.25);padding-bottom:calc(var(--u)*.8);
border-bottom:2px solid rgba(13,42,46,.45);
}
.dias span{
text-align:center;font-family:var(--display);font-weight:700;
font-size:var(--t--1);color:var(--sobre-turquesa-2);
}
.semana-pie{
margin:calc(var(--u)*1.5) 0 0;font-size:var(--t--1);
color:var(--sobre-turquesa-2);max-width:none;line-height:1.5;
}
/* EL ÚNICO MOMENTO ORQUESTADO. Las cartulinas caen y la hora aterriza encima
al final. Arranca cuando el horario SE VE, no al cargar: en móvil queda por
debajo del primer pliegue y antes la secuencia entera se gastaba fuera de
pantalla. Sin JavaScript sale dibujado. */
.js .semana:not(.suena) .dia > i,
.js .semana:not(.suena) .suya{opacity:0}
.semana.suena .dia > i{animation:cae .42s cubic-bezier(.16,1,.3,1) forwards}
.semana.suena .suya{animation:posa .6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes cae{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes posa{
from{opacity:0;transform:rotate(-13deg) scale(1.5)}
to{opacity:1;transform:rotate(-2.2deg) scale(1.14)}
}
/* ==========================================================================
PARA QUIÉN — cuatro cartulinas desiguales, clavadas al tablón
No son cuatro fichas iguales con icono y titular: son cuatro recortes de
tamaño y papel distintos, montados, como lo que hay en un corcho de verdad.
========================================================================== */
.quien{
display:grid;grid-template-columns:repeat(6,1fr);
gap:calc(var(--u)*2);margin-top:calc(var(--u)*5);max-width:none;
}
.quien > div{
padding:calc(var(--u)*3);
clip-path:var(--corte-a);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
}
/* 4+2 y 2+4 sobre seis columnas: ninguna pareja se reparte la fila por la
mitad, que es lo que haría una rejilla de fichas. */
.quien > div:nth-child(1){grid-column:span 4;background-color:var(--hueso)}
.quien > div:nth-child(2){grid-column:span 2;background-color:var(--tira-4)}
.quien > div:nth-child(3){grid-column:span 2;background-color:var(--tira-3)}
.quien > div:nth-child(4){grid-column:span 4;background-color:var(--hueso)}
.quien > div:nth-child(2),.quien > div:nth-child(3){margin-top:calc(var(--u)*-1.5)}
.quien h3{margin:0 0 .35em;color:var(--morado)}
.quien > div:nth-child(3) h3{color:#0D3B40}
.quien p{margin:0;color:var(--tinta-2);max-width:40ch}
.quien > div:nth-child(3) p{color:#1C3F43}
/* --- el friso: una sesión de verdad, sin enseñar a nadie ---------------- */
/* Recortada por debajo de la cara, como manda el encargo —no se publica
ninguna foto en la que se reconozca a un usuario de un centro—. No es
decoración: dice «esto existe y pasa en un aula» sin una palabra.
El 29-10-2026 cambió de foto, y el motivo merece quedar escrito: la de
antes cumplía la regla —no había ni una cara— y aun así estaba mal. Eran
tres personas sentadas cortadas por la barbilla, o sea tres torsos y tres
pares de muslos, y con menores y personas con discapacidad eso no se lee a
discreción: se lee a cuerpo expuesto. Bajar el corte empeoraba la foto, no
la arreglaba. CUMPLIR LA REGLA NO BASTA: hay que mirar lo que queda. */
.friso{margin:calc(var(--u)*6) 0 0}
/* MAS ALTO DESDE EL 03-11-2026. Era 1127/234 (4,83:1) y en el movil quedaba
una rendija: Natalia dijo «es demasiado estrechita y no se entiende casi», y
despues «agrandala un poco para que se entienda mejor lo que es». El alto se
gano ESTRECHANDO POR LA DERECHA, nunca bajando el corte: debajo estan las
piernas del menor, que es lo que se quito el 29-10 y no se vuelve a meter. */
.friso img{width:100%;aspect-ratio:592/180;object-fit:cover;clip-path:var(--corte-c)}
.friso figcaption{font-size:var(--t--1);color:var(--tinta-2);margin-top:calc(var(--u)*1.5)}
/* ==========================================================================
QUÉ CAMBIA — campo morado, y CUATRO CARTULINAS MONTADAS
El contenido trae DOS ejes: la hora frente a los días siguientes, la
persona frente al conjunto. Dos columnas de texto corrido los tiraban los
dos, porque dos columnas independientes no comparten filas. El flujo va por
columnas para que al apilarse en móvil se lea «En la sala → Y en el grupo»
y la «Y» siga siendo una continuación.
========================================================================== */
/* Esta era la unica banda donde sobrevivia el mundo que se tiro: campo
oscuro, rejilla estricta y cuatro celdas separadas por filetes de 2 px. Lo
dijo la revision de acabado y era verdad. Dos cosas a la vez: contradecia
la tesis —la pagina es un tablon de cartulinas cortadas— y rompia la
subida que yo mismo habia escrito en el contrato, la de la colcha: cada
union es un suceso de material, nunca un filete.
Ahora son cuatro cartulinas con su corte, MONTADAS de verdad: cada una
pisa a su vecina por un margen negativo y sube en z. El campo morado sigue
siendo campo, que es lo que daba el pulso de color; lo que cambia es que
encima hay papel y no una tabla. */
.cambia{--c:var(--morado);color:#fff}
.cambia h2{color:#fff}
.cambia .entrada{color:var(--sobre-morado-2)}
.cambia-rejilla{
display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
grid-auto-flow:column;gap:0;margin-top:calc(var(--u)*5);
}
.cambia-rejilla > div{
position:relative;
padding:calc(var(--u)*3.5);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
}
.cambia-rejilla > div:nth-child(1){background-color:var(--hueso);z-index:1}
.cambia-rejilla > div:nth-child(2){
background-color:var(--tira-4);z-index:2;
margin-top:calc(var(--u)*-1.5);
}
.cambia-rejilla > div:nth-child(3){
background-color:var(--tira-3);z-index:3;
margin-left:calc(var(--u)*-2);
}
/* El canalon entre las dos columnas era el unico tope a hueso de la pagina:
la cartulina 2 se metia 16 px hacia dentro y la 4 solo salia 8, asi que
quedaba una raya recta de morado justo en la union que la subida de la
colcha mas quiere ver. Las dos columnas se pisan ahora por igual. */
.cambia-rejilla > div:nth-child(4){
background-color:var(--hueso);z-index:4;
margin-top:calc(var(--u)*-1.5);margin-left:calc(var(--u)*-2);
}
.cambia-rejilla h3{color:var(--morado);margin-bottom:.35em}
.cambia-rejilla > div:nth-child(3) h3{color:#0D3B40}
.cambia-rejilla > div p{margin:0;max-width:40ch;color:var(--tinta-2)}
.cambia-rejilla > div:nth-child(3) p{color:#1C3F43}
/* ==========================================================================
QUÉ PASA EN ESA HORA
========================================================================== */
.tecnicas{
list-style:none;padding:0;margin:calc(var(--u)*5) 0 0;
display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2);
}
.tecnicas li{
clip-path:var(--corte-b);
background-color:var(--hueso);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
padding:calc(var(--u)*3);
}
.tecnicas b{
font-family:var(--display);font-weight:700;font-size:var(--t-1);
display:block;color:var(--morado);letter-spacing:-.015em;margin-bottom:.25em;
}
.tecnicas p{color:var(--tinta-2);font-size:.98rem;margin:0;max-width:44ch}
/* --- las dos fotos de música, en pareja --------------------------------- */
/* Llevaban diez días en img/ sin colocar. Ninguna enseña una cara: una mano
en la guitarra, y las láminas del metalófono con las notas pintadas, que
deletrean el nombre de ella. Contestan «no hay que saber tocar nada» mejor
que el párrafo que lo dice. */
.musica{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*2.5);margin-top:calc(var(--u)*5)}
.musica figure{margin:0}
.musica img{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:var(--corte-a)}
.musica figcaption{font-size:var(--t--1);color:var(--tinta-2);margin-top:calc(var(--u)*1.2)}
/* EL REPARTO. Cinco cartulinas enfrente de UNA: la asimetría es el argumento
y no se compensa. Contesta la primera pregunta de verdad de un centro, que
no es el precio sino «¿y yo qué tengo que poner?». */
.reparto{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);margin-top:calc(var(--u)*7)}
.reparto h3{margin:0 0 calc(var(--u)*2)}
.reparto ul{list-style:none;padding:0;margin:0;display:grid;gap:calc(var(--u)*1.5)}
/* SIN CORTE, y es disciplina, no descuido. Una fila de una linea que no
monta nada ni lleva campo no tiene por que estar recortada: treinta y
cuatro cantos irregulares a la vez dejan de leerse a gesto y se leen a
textura, y se gastan antes de que la cartulina naranja del horario pueda
usarlos. El corte se reserva a lo que monta o lleva un campo dentro. */
.reparto li{
padding:calc(var(--u)*2) calc(var(--u)*2.5);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
}
.reparto-centro li{background-color:var(--hueso)}
.reparto-ella li{background-color:var(--turquesa)}
.reparto b{font-family:var(--display);font-weight:700;font-size:var(--t-1);display:block;letter-spacing:-.015em}
.reparto span{color:var(--tinta-2);font-size:.98rem}
.reparto-ella span{color:var(--sobre-turquesa-2)}
.banda{margin:calc(var(--u)*7) 0 0}
.banda img{width:100%;aspect-ratio:12/5;object-fit:cover;object-position:50% 62%;clip-path:var(--corte-c)}
.banda figcaption{font-size:var(--t--1);color:var(--tinta-2);margin-top:calc(var(--u)*1.5)}
/* ==========================================================================
QUIÉN SOY — cartulina hueso, el retrato recortado dentro
========================================================================== */
.yo{--c:var(--hueso)}
/* ==========================================================================
SU VOZ — campo turquesa, el vídeo y lo que dice
Turquesa porque es el color que de verdad manda en su logotipo, y porque
esta sección es ella hablando: el campo de marca y su voz, a la vez.
La cita al lado del vídeo hace DOS trabajos y los dos hacen falta:
llena el ancho que un vídeo vertical deja libre, y entrega el mensaje a
quien no le dé al play, que de un correo frio son la mayoria.
========================================================================== */
.voz{--c:var(--turquesa);color:var(--tinta)}
.voz-rejilla{
display:grid;grid-template-columns:minmax(0,20rem) 1fr;
gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:calc(var(--u)*5);
}
.loquedigo{margin:0}
.loquedigo p{
font-family:var(--display);font-weight:700;
/* El mismo cuerpo que la cita de cabeza de los testimonios: esto es una
declaracion, no un pie de foto. A 22ch dejaba 440 px de turquesa vacio. */
font-size:var(--t-2);line-height:1.3;letter-spacing:-.025em;
margin:0 0 .6em;max-width:26ch;
}
.loquedigo footer{font-size:.95rem;color:var(--sobre-turquesa-2)}
/* LA SECCIÓN DE ELLA. Retrato a la izquierda; a la derecha quién es, qué hace
y qué la acredita. El vídeo ya NO vive aquí: tenía su propia sección desde
el 29-10-2026, porque una foto y un vídeo de la misma persona, pegados, se
anulan. Con las credenciales de vuelta, las dos columnas se equilibran
solas y no hace falta la composición de emergencia que tuvo un rato. */
.yo-rejilla{display:grid;grid-template-columns:minmax(0,21rem) 1fr;grid-template-rows:auto 1fr;gap:0 clamp(2rem,5vw,4rem);align-items:start}
.yo-rejilla > h2{grid-column:2;grid-row:1;margin-top:0}
.yo-rejilla > picture{grid-column:1;grid-row:1 / span 2}
.yo-texto{grid-column:2;grid-row:2}
/* El nombre completo. Al pasar el titular a «Quién soy» se habría perdido de
la sección, y es lo que un centro busca en Google y lo que va en la factura. */
/* .yo .nombre y no .nombre a secas: es un dentro de .yo, y «.yo p» le
gana por especificidad. Sin esto el nombre sale en tinta secundaria. */
.yo .nombre{
font-family:var(--display);font-weight:700;font-size:1.3rem;
color:var(--tinta);margin:0 0 calc(var(--u)*2.5);
}
/* El 42 % horizontal no es el centro por capricho: en el original de 900×1125
la cara va descentrada a la izquierda, y un recorte centrado al 50 % se le
come media melena. */
.yo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:42% 22%;clip-path:var(--corte-a)}
.yo p{color:var(--tinta-2)}
.pieza{margin:0}
/* LA CARTULINA DE DEBAJO. El vídeo era el único elemento de la página que
tocaba el papel siendo un rectángulo pelado, sin canto ni solape. El corte
lo lleva esta, que puede permitírselo: dentro no hay nada enfocable salvo el
vídeo, y el relleno de 10 px deja sitio para que su anillo de foco quepa
entero sin que el clip-path lo toque. */
.mat{
/* KRAFT, no hueso. En hueso era invisible: esta seccion es .hoja y tambien
tira a hueso, asi que el canto cortado no se leia y parecia un borde. Es
EXACTAMENTE el fallo que ya costo una correccion en octubre, cuando las
cartulinas hueso sobre el kraft viejo #F3EBDD daban 1,11:1 y desaparecian.
El kraft da 1,50:1, que es el valor con el que se arreglo entonces, y de
paso iguala a .mat con las cartulinas de credenciales de al lado. */
background-color:var(--papel);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
clip-path:var(--corte-d);
/* 14 px y no 10: con 10 el canto cortado no llegaba a leerse y la cartulina
parecia un borde. Sigue sobrando sitio para el anillo de foco del video. */
padding:14px;
/* 17,5 rem = 5 tramos de 3,5: múltiplo del módulo, no una cifra suelta. A
21 rem (la columna entera) el vídeo vertical sacaba 250 px de papel muerto
al texto de al lado. */
max-width:17.5rem;
}
.pieza video{
width:100%;height:auto;aspect-ratio:478/850;display:block;
background-color:var(--tinta);
}
/* La transcripción: texto de verdad, agrandable y copiable, frente a un
subtítulo quemado que no es ninguna de las dos cosas. */
.transcripcion{margin-top:calc(var(--u)*1.5);max-width:17.5rem;font-size:var(--t--1)}
.transcripcion summary{
font-family:var(--display);font-weight:700;cursor:pointer;color:var(--tinta);
padding:calc(var(--u)*.5) 0;
}
.transcripcion > div{color:var(--tinta-2);margin-top:calc(var(--u)*1)}
/* LAS CREDENCIALES. Desde el 29-10-2026 viven con los testimonios, no en
«quién soy»: un máster y una lista de centros no presentan a nadie, son
prueba, y la prueba sirve cuando el lector ya se está decidiendo.
Dos consecuencias de la mudanza, y las dos había que tocarlas:
· El fondo pasa de --papel a --hueso. Antes la sección era hueso y las
fichas kraft se recortaban contra ella; ahora la sección ES kraft, y unas
fichas kraft sobre kraft no se verían. Es el mismo 1,50:1 de siempre, del
derecho en vez de del revés.
· Y pasan a tres columnas: en una sección a todo lo ancho, cinco fichas
apiladas son una tira de 700 px que nadie lee. */
.credenciales{display:grid;gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*4)}
.credenciales > div{
padding:calc(var(--u)*2) calc(var(--u)*2.5);
background-color:var(--papel);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
}
.credenciales b{font-family:var(--display);font-weight:700;display:block;margin-bottom:.15em}
.credenciales span{color:var(--tinta-2);font-size:.95rem}
/* El rotulo de «Centros que confian en nosotros» (02-11-2026). Sin color
propio: hereda el de la cartulina hueso de la seccion, que ya esta medido.
El margen de arriba es el doble que el de abajo para que se lea pegado a
SU lista y despegado de la titulacion, que es lo que no se entendia. */
.credenciales-rotulo{
font-family:var(--display);font-weight:700;font-size:var(--t-0);
margin:calc(var(--u)*4) 0 calc(var(--u)*1.5);
}
/* ==========================================================================
LO QUE DICEN — una de cabeza y una pareja
Tres citas de peso muy distinto en tres columnas iguales se nivelan solas:
la más corta ocupaba el mismo ancho que la única que cuenta algo entero. La
jerarquía se hace hacia ABAJO: la de cabeza se queda en --t-2 y la pareja
baja a --t-1. No se toca ni el texto ni la atribución, solo el orden.
========================================================================== */
.citas{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(1.5rem,4vw,3rem);margin-top:calc(var(--u)*5);align-items:start}
.citas-par{display:grid;gap:calc(var(--u)*2.5)}
.citas blockquote{
margin:0;padding:calc(var(--u)*3);
clip-path:var(--corte-a);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
}
.citas > blockquote{background-color:var(--turquesa)}
.citas-par blockquote{background-color:var(--hueso)}
/* 1,3 y no 1,22: son tres o cuatro lineas que alguien lee de verdad, no un
titular de una linea. */
.citas p{font-family:var(--display);font-weight:700;font-size:var(--t-2);line-height:1.3;letter-spacing:-.025em;margin:0 0 .5em;max-width:none}
.citas-par p{font-size:var(--t-1);line-height:1.3}
.citas footer{font-size:.95rem}
.citas > blockquote footer{color:var(--sobre-turquesa-2)}
.citas-par footer{color:var(--tinta-2)}
/* ==========================================================================
PRECIO — campo naranja, y la cifra a tamaño de cifra
El naranja de marca entra por fin como lo que es, un campo: con tinta
encima da 4,83:1. Antes solo existía rebajado a #B05209, para que un texto
blanco llegase a la AA.
========================================================================== */
.precio{--c:var(--naranja)}
.precio .entrada{color:var(--sobre-naranja-2)}
/* 900 px para dos cifras cortas dejaba media ficha vacia a la derecha de
«360 €». La cartulina se corta del tamano de lo que lleva dentro. */
.precio-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3);margin-top:calc(var(--u)*5);max-width:680px;align-items:start}
.tarifa{
padding:calc(var(--u)*4);
clip-path:var(--corte-a);
background-color:var(--hueso);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
}
.tarifa .modo{font-size:.95rem;color:var(--tinta-2);margin:0 0 .3em}
.tarifa .cifra{
font-family:var(--display);font-weight:800;
font-size:clamp(2.8rem,8vw,4.6rem);line-height:.92;
color:var(--morado);letter-spacing:-.045em;margin:0;max-width:none;
}
.tarifa.anual .cifra{font-size:clamp(2.2rem,5.5vw,3.1rem)}
.tarifa .iva{margin:.45em 0 0;font-size:.95rem;color:var(--tinta-2)}
.incluye{list-style:none;padding:0;margin:calc(var(--u)*5) 0 0;max-width:54ch;display:grid;gap:calc(var(--u)*1.5)}
.incluye li{
padding:calc(var(--u)*1.8) calc(var(--u)*2.5);
background-color:var(--hueso);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
color:var(--tinta-2);
}
.incluye b{color:var(--tinta)}
.matiz{margin-top:calc(var(--u)*3.5);color:var(--sobre-naranja-2);font-size:.95rem}
/* ==========================================================================
CONTACTO
========================================================================== */
.pasos{
list-style:none;margin:calc(var(--u)*5) 0 0;padding:0;counter-reset:p;
display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*2);
}
.pasos li{
counter-increment:p;
padding:calc(var(--u)*3);
clip-path:var(--corte-b);
background-color:var(--hueso);
background-image:url(img/grano.png);background-size:72px 72px;
background-blend-mode:multiply;
}
/* Numerados porque SON una secuencia; las cuatro técnicas de la sesión no lo
son, y por eso van sin número y sin viñeta. */
.pasos li::before{
content:counter(p);display:block;margin-bottom:calc(var(--u)*1.5);
font-family:var(--display);font-weight:800;font-size:var(--t-2);
line-height:1;color:var(--naranja);letter-spacing:-.04em;
}
.pasos b{display:block;font-family:var(--display);font-weight:700;font-size:var(--t-1);line-height:1.18;letter-spacing:-.015em;margin-bottom:.2em}
.pasos span{color:var(--tinta-2);font-size:.98rem}
.formulario{max-width:720px;margin-top:calc(var(--u)*6)}
/* El corte va en un ::before, igual que en el boton y por la misma razon
elevada al cuadrado: clip-path recorta a TODOS los descendientes, y aqui
dentro hay nueve controles. Con el corte en el propio