dentro de
.historia-texto, así que con `.historia-firma` a secas perdía por
especificidad y se quedaba con la mayúscula, el cuerpo y el negro del
párrafo. */
.historia-texto .historia-firma {
/* La firma se queda en caja baja: es lo único que dice una persona en su
propia voz, y el contraste con el bloque la separa del relato. */
text-transform: none;
/* 17px, el mismo cuerpo que el cuerpo de texto de las opiniones. A 14px se
quedaba en nada al lado de un párrafo que ahora llega a 50px. */
font-size: 17px;
line-height: 1.4;
letter-spacing: 0;
color: var(--gray-2);
max-width: none;
margin: 2.4em 0 0;
}
/* El encendido palabra a palabra lo monta scroll-effects.js: parte cada
párrafo en y las lleva de apagadas a tinta plena
con la rueda. Sin JS, sin GSAP o con reduced-motion no se parte nada y el
texto se lee entero desde el principio, que es su estado natural aquí. */
.historia-texto .palabra { opacity: 1; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
/* Sin filas, la lista dejaría suelto su border-top: una raya sola bajo la
historia. Se esconde entera, y vuelve sola en cuanto se añada un año. */
.timeline:not(:has(li)) { display: none; }
.timeline li {
display: flex;
align-items: baseline;
gap: 28px;
padding: 16px var(--pad-x);
border-bottom: 1.5px solid var(--ink);
}
/* El filete de cierre lo pone el border-top de Contacto: si no, doble línea */
.timeline li:last-child { border-bottom: none; }
.timeline-year { font-size: 22px; font-weight: 700; min-width: 90px; }
.timeline-hoy { color: var(--accent); }
.timeline-event { font-size: 15px; color: var(--gray-1); }
@media (max-width: 768px) {
.team-grid { grid-template-columns: 1fr; }
/* La ficha pasa a FILA: retrato cuadrado a la izquierda, texto al lado.
En una sola columna el retrato conservaba su aspect-ratio 1/1, así que
medía de alto lo que mide de ancho la pantalla: en un móvil de 430 px eran
430 px de cara por persona, casi metro y medio de fotos seguidas antes de
llegar a leer un nombre.
Se resuelve estrechando el retrato, no aplastándolo: si se le cambiara la
proporción a apaisada, el object-fit: cover recortaría por arriba y por
abajo y les cortaría la frente y la barbilla. Son fotos de estudio
cuadradas y aquí se mantienen cuadradas, solo que pequeñas. */
.team-card {
flex-direction: row;
/* flex-start y no stretch: con stretch la foto se estira hasta la altura
de la ficha, así que cada una medía distinto — la de Cecilia 36 px más
alta, porque su rol ocupa dos líneas. Con flex-start cada foto se queda
con el alto que se le da abajo, y las tres miden igual. */
align-items: flex-start;
border-right: none;
/* Los hijos de una rejilla y de un flex arrancan con min-width: auto, o
sea negándose a bajar de su ancho de contenido. Con textos editables
desde el panel (un apellido largo, un rol de tres líneas) eso acaba
sacando la ficha de la pantalla. Va aquí y en .team-info por si acaso;
con los textos de hoy no hace falta. */
min-width: 0;
}
.team-photo {
/* Ancho y alto de la MISMA expresión, en vez de dejar que el alto salga
del aspect-ratio. Safari no recalcula el aspect-ratio de un elemento
flex cuando cambia su base al redimensionar la ventana: se quedaba con
la altura vieja hasta recargar la página. Chrome sí lo recalcula, así
que el fallo solo se veía en Safari. Con las dos medidas escritas no
hay nada que recalcular: siempre es cuadrada.
38vw porque en móvil la rejilla va a sangre y la ficha mide una
pantalla; si algún día se le pone margen lateral, hay que revisarlo. */
flex: none;
width: min(38vw, 190px);
height: min(38vw, 190px);
/* El filete separador va en .team-info y no aquí: con la foto alineada
arriba, un borde en la foto solo llegaría hasta donde llega la foto y
dejaría la ficha partida a media altura. */
border-bottom: none;
}
/* A la izquierda va menos aire porque ya lo pone el filete; a la derecha se
mantiene el margen de página para que la columna de texto cierre donde
cierran las demás secciones. */
/* .team-meta sí necesita envolver: son dos textos con space-between y en una
columna estrecha no caben en la misma línea — el rol de Cecilia («directora
y profesora de teórica y prácticas») se le echaba encima a «Algeciras». */
.team-info { flex: 1 1 auto; min-width: 0; padding: 14px var(--pad-x) 16px 18px; border-left: 1.5px solid var(--ink); }
.team-meta { flex-wrap: wrap; gap: 4px 12px; }
.timeline li { gap: 16px; }
.timeline-year { min-width: 64px; font-size: 18px; }
}
/* Opiniones — pantalla oscura, hermana de la del vídeo: una sola opinión a
la vez, tratada como un titular más de la página. Se lee el gancho a
cuerpo grande y el resto se despliega con "seguir leyendo".
El HTML nace con .is-static (las nueve seguidas, sin mandos, que es lo
que ve quien llega sin JS o con reduced-motion); main.js quita la clase
solo cuando monta el rotador. Mismo trato que .video-jara.
No lleva filete superior: contra el negro no se vería, y el cambio de
color ya separa la sección. */
.opiniones {
position: relative;
background: var(--ink);
color: #fff;
min-height: var(--vis-h);
display: flex;
flex-direction: column;
padding: var(--head-top) var(--pad-x) 28px;
/* CUÁNTO SE MARCA LA TRAMA SOBRE EL NEGRO: sube o baja solo este número.
0.06 apenas se intuye · 0.12 discreta · 0.17 marcada · 0.25 evidente */
--trama-negro: 0.06;
}
/* La misma rejilla de la sección del video, sobre el negro. Aquí no hay
imagen debajo que haga crecer o encoger el punto, así que no hay umbral:
solo la trama. Y va en claro sobre oscuro —al revés que sobre el video—
porque un punto negro sobre negro no se vería. */
.opiniones::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, var(--trama-negro)) 0%, transparent 60%);
background-size: var(--vj-dot) var(--vj-dot);
}
/* El contenido, por encima de la trama */
.opiniones > * { position: relative; z-index: 1; }
.opiniones .kicker { color: var(--mustard); }
.op-stage {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 0;
}
.op-list { list-style: none; margin: 0; padding: 0; }
/* Solo la opinión activa ocupa sitio; el resto ni se maqueta */
.op-item { display: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.op-item.is-active { display: block; }
.op-item.out { opacity: 0; transform: translateY(14px); }
.op-quote { margin: 0; }
/* El gancho es lo único que se ve siempre: mismo formato que .headline.
Los hay de una línea y de tres, así que main.js marca el tramo en
data-len y el largo baja un punto de cuerpo. */
.op-hook {
display: block;
font-weight: 700;
font-size: clamp(26px, 3.6vw, 50px);
line-height: 1.12;
letter-spacing: -0.03em;
max-width: 20ch;
}
.op-item[data-len="media"] .op-hook {
font-size: clamp(22px, 2.6vw, 36px);
line-height: 1.18;
max-width: 30ch;
}
/* Punto rojo si la opinión cabe entera (como los titulares de la página);
suspensivos rojos si hay resto, que desaparecen al desplegarlo. */
.op-dot { color: var(--accent); }
.op-item.abierta .op-dot { display: none; }
/* Recortador con la altura animada por JS, igual que el acordeón de
permisos: el padding vive dentro para que 0 sea 0. */
.op-rest-wrap {
height: 0;
overflow: hidden;
transition: height 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.op-rest-wrap p {
margin: 0;
padding-top: 18px;
font-size: 17px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
max-width: 60ch;
}
/* Los botones de la sección son los de la casa (.btn .btn-ghost): mismo
filete, mismo radio y el mismo relleno que sube al pasar el ratón. Sobre
negro solo cambia el color del filete y del texto, porque el borde de
tinta no se vería. */
.opiniones .btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.opiniones .btn-ghost:hover { border-color: var(--mustard); }
.op-more { margin-top: 24px; }
.op-who { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 30px 0 0; }
/* El nombre repite la caja verde inclinada del hero (.tilt) y de JARA */
.op-name {
display: inline-block;
background: var(--brand);
color: #fff;
padding: 2px 12px;
rotate: -2deg;
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
}
.op-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
border-top: 1.5px solid rgba(255, 255, 255, 0.25);
padding-top: 18px;
}
.op-idx { font-size: 13px; font-family: ui-monospace, monospace; color: rgba(255, 255, 255, 0.6); }
.op-idx b { color: #fff; }
.op-nav { display: flex; gap: 10px; }
/* Las flechas son el mismo botón, en cuadrado */
.op-btn { width: 46px; height: 46px; padding: 0; justify-content: center; font-size: 18px; }
/* Barra del turno: avanza sola y se congela mientras haya un resto abierto */
.op-prog { height: 3px; background: rgba(255, 255, 255, 0.18); margin-top: 16px; }
.op-prog i { display: block; height: 100%; width: 0; background: var(--accent); }
/* Llamada a dejar reseña en Google, al cierre de las opiniones. Mismo filete
blanco translúcido que .op-bar para que se lea como parte de la sección y no
como un añadido. Solo existe si hay enlace: el panel deja la región vacía. */
.op-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 20px;
flex-wrap: wrap;
border-top: 1.5px solid rgba(255, 255, 255, 0.25);
margin-top: 22px;
padding-top: 20px;
}
.op-cta-texto { font-size: 16px; color: rgba(255, 255, 255, 0.7); margin: 0; max-width: 470px; }
.op-cta-texto strong { color: #fff; font-weight: 600; }
.op-cta-botones { display: flex; gap: 10px; flex-wrap: wrap; }
/* Estado estático: las nueve opiniones seguidas, en párrafo corrido y sin
mandos (las flechas no harían nada sin JS). */
.opiniones.is-static .op-stage { justify-content: flex-start; }
.opiniones.is-static .op-item { display: block; }
.opiniones.is-static .op-item + .op-item {
margin-top: 26px;
padding-top: 26px;
border-top: 1.5px solid rgba(255, 255, 255, 0.22);
}
.opiniones.is-static .op-quote {
font-size: clamp(19px, 2.2vw, 27px);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
max-width: 46ch;
}
.opiniones.is-static .op-quote::before { content: "“"; }
.opiniones.is-static .op-quote::after { content: "”"; }
.opiniones.is-static .op-hook {
display: inline;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
max-width: none;
}
.opiniones.is-static .op-who { margin-top: 16px; }
.opiniones.is-static .op-idx,
.opiniones.is-static .op-nav,
.opiniones.is-static .op-prog { display: none; }
@media (prefers-reduced-motion: reduce) {
.op-item, .op-rest-wrap, .op-more, .op-btn { transition: none; }
}
@media (max-width: 768px) {
.op-stage { padding: 28px 0; }
.op-who { gap: 10px; }
.op-btn { width: 42px; height: 42px; }
.op-bar { gap: 12px; }
}
/* Contacto: pantalla completa — los mapas absorben el alto sobrante */
.contacto {
min-height: var(--vis-h);
display: flex;
flex-direction: column;
}
.sedes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1.5px solid var(--ink);
flex: 1;
}
.sede-card { display: flex; flex-direction: column; }
.sede-card:first-child { border-right: 1.5px solid var(--ink); }
/* El embed de Google trae su propia paleta (agua azul, POIs de colores) que
compite con el rojo de los teléfonos. Lo pasamos a gris para que el único
color de la ficha sea el de la marca. */
.sede-map {
width: 100%;
height: 320px;
border: 0;
display: block;
border-bottom: 1.5px solid var(--ink);
filter: grayscale(1) contrast(1.05) brightness(1.02);
}
/* El mapa ya no absorbe el alto sobrante: lo absorben los datos, y los chips
se anclan al filete inferior para no dejar una cola de blanco muerto. */
.sede-datos {
flex: 1;
display: flex;
flex-direction: column;
padding: 22px var(--pad-x) 28px;
}
/* En columna flex el botón se estiraría a todo el ancho: lo dejamos con su
ancho natural, como el resto de botones de la página. */
.sede-datos .btn { align-self: flex-start; }
.sede-nombre { font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.sede-dir { color: var(--gray-1); font-size: 14px; margin: 4px 0 18px; }
.sede-horario { font-size: 14px; color: var(--gray-1); line-height: 1.7; margin: 18px 0; }
.sede-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; margin-top: auto; }
.chip {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1.5px solid var(--ink);
border-radius: 999px;
padding: 6px 14px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.chip:hover { background: var(--ink); color: #fff; }
/* Confirmación de "copiado" en escritorio (main.js): en vez de inventar otro
estado, se dispara el mismo relleno que el botón ya hace en hover. */
.btn.copiado::before { transform: translateY(0); }
.telefono-band.copiado .telefono-nota { color: #fff; }
.telefono-band {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
background: var(--brand);
color: #fff;
padding: 40px var(--pad-x);
}
.telefono-num { font-size: clamp(40px, 7vw, 88px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.telefono-nota { font-size: 14px; color: rgba(255, 255, 255, 0.8); }
@media (max-width: 768px) {
.sedes-grid { grid-template-columns: 1fr; }
.sede-card:first-child { border-right: none; border-bottom: 1.5px solid var(--ink); }
.sede-map { height: 220px; }
.telefono-band { padding: 28px var(--pad-x); }
}
/* AEOL Cloud (aeol.html) — la única página aparte del sitio. No estrena
lenguaje: filetes de 1.5px, cabeceras .section-head y la caja verde inclinada
de la marca. Todo lo de aquí vive fuera de la home y no la afecta. */
/* La cabecera de la página lleva el h1, así que respira un poco más que una
cabecera de sección normal antes del primer filete. La mitad derecha, que si
no quedaría vacía, la ocupa el botón de entrar: alineado abajo con el final
del texto, para que los dos apoyen en la misma línea. */
.aeol-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: 32px;
}
.aeol-intro .section-head { padding-bottom: calc(var(--head-bottom) + 20px); }
.aeol-acceso {
padding: 0 var(--pad-x) calc(var(--head-bottom) + 20px);
text-align: right;
}
.aeol-acceso-txt { font-size: 15px; color: var(--gray-1); margin: 0 0 14px; }
/* Los tres pasos: la misma rejilla con filetes de .team-grid, sin fotos. */
.pasos-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1.5px solid var(--ink);
}
.paso-card {
padding: 28px var(--pad-x) 34px;
border-right: 1.5px solid var(--ink);
}
.paso-card:nth-child(3n) { border-right: none; }
/* El número mostaza grande del acordeón de permisos, un punto más pequeño:
aquí van tres en fila y a 60px se comerían el texto. */
.paso-num {
display: block;
font-size: 44px;
font-weight: 700;
line-height: 1;
color: var(--mustard);
}
.paso-titulo { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 14px 0 0; }
.paso-text { font-size: 15px; color: var(--gray-1); line-height: 1.6; margin: 8px 0 0; max-width: 340px; }
/* Los dos precios, en la rejilla de dos con filete de .sedes-grid. */
.precio-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1.5px solid var(--ink);
}
/* Columna flex + margin-top:auto en el botón: los dos botones quedan a la misma
altura aunque un texto ocupe una línea más que el otro (el truco de .sede-chips). */
.precio-card {
display: flex;
flex-direction: column;
padding: 26px var(--pad-x) 34px;
}
.precio-card:first-child { border-right: 1.5px solid var(--ink); }
.precio-card .btn { align-self: flex-start; margin-top: auto; }
.precio-quien {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gray-1);
margin: 0 0 14px;
}
/* El precio de alumno va en la caja verde inclinada, el mismo gesto que el
APRUEBA de la portada y el rótulo del vídeo: es la oferta que se destaca.
El otro va en negro plano, para que la jerarquía se lea de un vistazo. */
.precio-num {
font-size: clamp(52px, 8vw, 96px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
margin: 0;
}
.precio-num-plano { color: var(--ink); }
.precio-cuando { font-size: 14px; color: var(--gray-2); margin: 12px 0 0; }
.precio-detalle { font-size: 15px; color: var(--gray-1); line-height: 1.6; margin: 16px 0 26px; max-width: 420px; }
.precio-detalle strong { color: var(--ink); font-weight: 600; }
.precio-avisos { padding: 26px var(--pad-x) 40px; display: grid; gap: 18px; }
.precio-nota {
font-size: 14px;
color: var(--gray-1);
line-height: 1.7;
max-width: 520px;
margin: 0;
padding-left: 16px;
border-left: 1.5px solid var(--gray-border);
}
/* Dudas: cuatro pares en dos columnas. Un basta, sin acordeón: las
respuestas son de dos líneas y esconderlas solo añadiría clics. */
.dudas-lista {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin: 0;
border-top: 1.5px solid var(--ink);
}
.duda {
padding: 24px var(--pad-x) 28px;
border-right: 1.5px solid var(--ink);
border-bottom: 1.5px solid var(--ink);
}
.duda:nth-child(2n) { border-right: none; }
/* Si las dudas son impares, la última se queda sola en su fila: que ocupe el
ancho entero en vez de dejar medio hueco vacío con el filete colgando. */
.duda:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
.duda-p { font-size: 17px; font-weight: 600; margin: 0; }
.duda-r { font-size: 15px; color: var(--gray-1); line-height: 1.6; margin: 8px 0 0; max-width: 420px; }
/* El teléfono de la respuesta se subraya: dentro de un párrafo, sin subrayado
no se distingue de la frase. En escritorio main.js lo pasa a copiar. */
.duda-r a, .paso-text a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aeol-legal {
font-size: 12px;
color: var(--gray-2);
line-height: 1.6;
margin: 0;
padding: 22px var(--pad-x) 30px;
max-width: 640px;
}
@media (max-width: 768px) {
/* Ya no cabe la columna del botón al lado del titular: se apila debajo, y el
aire que sobra lo quita la cabecera para no dejar un hueco muerto. */
.aeol-intro { grid-template-columns: 1fr; }
.aeol-intro .section-head { padding-bottom: 20px; }
.aeol-acceso { text-align: left; padding-bottom: var(--head-bottom); }
.pasos-grid, .dudas-lista, .precio-grid { grid-template-columns: 1fr; }
.paso-card, .duda { border-right: none; }
.paso-card { border-bottom: 1.5px solid var(--ink); }
.paso-card:last-child { border-bottom: none; }
.precio-card:first-child { border-right: none; border-bottom: 1.5px solid var(--ink); }
}
/* ═══════════════════════════════════════════════════════════════════════════
Footer, consentimiento de cookies y páginas legales
═══════════════════════════════════════════════════════════════════════════ */
/* Footer — cierra las cinco páginas. Va DESPUÉS de , no dentro: la
banda verde del teléfono sigue siendo lo último del contenido. */
.footer {
border-top: 1.5px solid var(--ink);
padding: 32px var(--pad-x) 36px;
font-size: 13px;
line-height: 1.7;
color: var(--gray-1);
display: grid;
grid-template-columns: 1fr auto;
gap: 12px 32px;
align-items: start;
}
.footer-identidad { margin: 0; max-width: 520px; }
/* La razón social y el CIF son lo que exige la LSSI: se leen en negro, no en
gris, porque son el dato identificativo y no una nota al pie. */
.footer-razon { color: var(--ink); font-weight: 600; }
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
margin: 0;
padding: 0;
list-style: none;
justify-self: end;
}
.footer-legal a,
.footer-cookies-btn {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
font-size: 13px;
font-weight: 500;
}
/* El de cookies es un