:root{--ink:#141414;--text:#2b2b2b;--muted:#6b6b6b;--line:#e6e6e6;--red:#c7282b}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Montserrat,system-ui,sans-serif;color:var(--text);background:#fff;line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* Pantalla 1 */
.blank{height:100vh;height:100svh;position:relative;overflow:hidden;
  background:#fff}
/* Infinito blanco: un suelo blanco en perspectiva que se aleja hasta perderse en la niebla.
   El horizonte queda a la altura del logo, así las letras parecen suspendidas sobre el suelo. */
.floor{position:absolute;left:0;right:0;top:40%;bottom:0;perspective:620px;perspective-origin:50% 0;overflow:hidden;pointer-events:none}
.floor i{position:absolute;left:-150%;right:-150%;top:0;height:420%;transform-origin:50% 0;transform:rotateX(80deg);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.075) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.075) 0 1px, transparent 1px 64px),
    linear-gradient(#fff 0%, #f4f4f3 100%);
  background-position:50% var(--floor,0px),50% var(--floor,0px),0 0;
  -webkit-mask-image:linear-gradient(transparent 0%, #000 45%);mask-image:linear-gradient(transparent 0%, #000 45%)}
/* Niebla en el horizonte y en los laterales */
.floor:before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(#fff 0%, rgba(255,255,255,0) 30%),
  linear-gradient(90deg,#fff 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, #fff 100%)}
/* Con WebGL el suelo lo dibuja floor3d.js; el de CSS queda de reserva */
.floor3d{position:fixed;left:0;top:0;z-index:-1;display:block}   /* fijo: el suelo se queda y lo que se mueve es la profundidad */
.blank.gl{background:transparent}
.blank.gl .floor{display:none}
.blank.gl:after{display:none}   /* con el suelo 3D la rejilla sigue continua: sin franja blanca abajo */
/* Fundido a blanco abajo para enlazar con el resto de la web */
.blank:after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff)}
.scroll-hint{z-index:1;position:absolute;left:50%;bottom:32px;width:1px;height:48px;background:var(--line);overflow:hidden;opacity:0;animation:fade .6s 3s forwards}
.scroll-hint span{position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--red);animation:drop 1.6s 3s infinite}
@keyframes drop{to{top:100%}}
@media (max-width:760px){.scroll-hint{bottom:18vh}}   /* móvil: más arriba, lejos de la barra del navegador */
@keyframes fade{to{opacity:1}}

/* Pantalla 2: título tipo póster */
.hero{position:relative;overflow-x:clip;background:transparent;   /* sin fondo ni recorte: la imagen se funde con el suelo y no se nota el cambio de sección */
  min-height:100vh;min-height:100svh;display:flex;align-items:center}
/* Imagen del póster: a la derecha, a toda altura, con los bordes fundidos en blanco; el texto va por encima */
.hero-img{position:absolute;right:4vw;top:30vh;height:72vh;   /* baja: entra por debajo del título y se solapa con el programa */
  width:auto;max-width:none;z-index:0;will-change:transform;pointer-events:none;user-select:none}
.title{position:relative;z-index:1;width:100%;padding-top:10vh;padding-bottom:10vh}
/* ---- Ordenador: como estaba ---- */
.only-m{display:none!important}
.t-sub{margin-top:clamp(40px,7vh,72px);font-size:clamp(1.2rem,1.75vw,1.75rem);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);line-height:1.45}   /* separado y más grande */
.t-sub b{font-weight:700}
.t-levels{margin-top:14px;font-size:clamp(.95rem,1.1vw,1.15rem);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:14px}
.t-levels i{width:1px;height:14px;background:var(--red)}
/* ---- Móvil ---- */
@media (max-width:760px){
  .only-d{display:none!important}
  .t-sub3.only-m{display:block!important}
  .t-place.only-m{display:flex!important}
  .hero{display:block;min-height:0;--ind:calc(clamp(48px,10vw,132px)*0.09)}   /* sangría óptica: alinea con el asta de la E */
  .hero-img{position:absolute;top:auto;bottom:-40vw;right:-12vw;width:64vw;height:auto}
  .title{padding-top:14vh;padding-bottom:20vw}
  .t-place,.t-levels,.t-sub3{padding-left:var(--ind)}
  .t-place{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.7rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text);white-space:nowrap}
  .t-place i{width:22px;height:1px;background:currentColor}
  .t-levels{margin-top:3px;font-size:.7rem;letter-spacing:.14em;gap:10px}
  .t-sub3{margin-top:62px;text-transform:uppercase;color:var(--ink);line-height:1.35}
  .t-sub3 span{display:block;font-size:.82rem;letter-spacing:.22em;font-weight:400;color:var(--muted)}
  .t-sub3 b{display:block;font-size:1rem;letter-spacing:.08em;font-weight:700;margin-top:4px}
}
.t-curso{font-weight:300;font-size:clamp(28px,6vw,64px);letter-spacing:.04em;color:var(--ink);line-height:1}
h1{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:.9;margin-top:.1em}
h1 span{display:block;font-size:clamp(48px,10vw,132px);letter-spacing:.03em}
.t-eco{color:var(--ink)}
.t-facial{color:var(--red)}
/* "Medicina estética": etiqueta pequeña y gris encima de "CURSO DE", con la misma sangría óptica que la fecha */
.t-esp{padding-left:calc(clamp(28px,6vw,64px)*0.058 - 1px);   /* alineado con la tinta de la C de CURSO */
  margin-bottom:14px;font-family:Montserrat,system-ui,sans-serif;font-weight:400;font-size:clamp(.62rem,.9vw,.95rem);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1}
.t-meta{margin-top:40px;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.t-meta i{width:24px;height:1px;background:var(--red)}
.hero .t-meta i{background:currentColor}   /* línea de Málaga: todo en el mismo color */
.hero .t-meta{margin-top:24px;font-size:clamp(.85rem,.95vw,1rem)}   /* justo debajo del título */
@media (min-width:761px){   /* solo ordenador */
  .hero .t-levels{margin-top:6px;font-size:clamp(.85rem,.95vw,1rem)}
  .hero .t-meta,.hero .t-levels,.hero .t-sub{padding-left:calc(clamp(48px,10vw,132px)*0.09)}   /* sangría óptica: alineado con el asta de la E */
}

/* Bloques */
.block{padding-top:90px;padding-bottom:10px;position:relative;z-index:1}   /* el texto siempre por encima de la imagen */
h2{font-size:.8rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--red);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:8px}
h3{font-family:"Playfair Display",Georgia,serif;font-weight:600;color:var(--ink);font-size:1.45rem;line-height:1.2}
.modules{list-style:none}
.modules li{display:flex;gap:28px;padding:26px 0;border-bottom:1px solid var(--line)}
.modules li>span{font-weight:300;color:var(--red);font-size:1.6rem;min-width:44px}
.modules p{color:var(--muted);margin-top:6px;max-width:620px}
.people .t-meta{margin-top:14px;font-size:.72rem;letter-spacing:.16em;line-height:1.6}   /* títulos con el mismo formato que la fecha */
.t-list{flex-direction:column;align-items:flex-start;gap:8px}
.t-list span{display:grid;grid-template-columns:18px 1fr;column-gap:10px;align-items:baseline}
.t-list span:before{content:"";height:1px;background:var(--red);transform:translateY(-.3em)}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;padding-top:28px}
.cta{text-align:center}
.cta h2{border:0;padding-bottom:6px}
.cta p{color:var(--muted);margin:6px 0 30px}
.btn{display:inline-block;border:1px solid var(--ink);color:var(--ink);text-decoration:none;padding:15px 34px;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;font-weight:500;transition:.25s}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.foot{color:var(--muted);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-align:center;padding-top:100px;padding-bottom:40px}

/* Retratos del profesorado: mismo encuadre, blanco y negro armonizado con la web; color al pasar el ratón */
.pp-ph{margin:0 0 22px;aspect-ratio:4/5;overflow:hidden;background:#fff}
.pp-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transform:scale(1.001);transition:filter .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pp:hover .pp-ph img,.pp.on .pp-ph img{filter:grayscale(0);transform:scale(1.03)}
@media (hover:none){.pp:hover .pp-ph img{filter:grayscale(1);transform:scale(1.001)}.pp.on .pp-ph img{filter:grayscale(0);transform:scale(1.03)}}
@media (max-width:760px){
  /* móvil: menos aire entre el cierre del programa y Profesorado */
  #programa + .block{padding-top:44px}
  /* móvil: los tres profesores en fila, como en la web */
  .people{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:22px}
  .pp-ph{margin:0 0 12px}
  .pp h3{font-size:.86rem;line-height:1.2;min-height:2.4em}
  .people .t-meta{margin-top:8px;font-size:.5rem;letter-spacing:.1em;line-height:1.45}
  .people .t-list{gap:6px}
  .people .t-list span{display:block}
  .people .t-list span:before{display:block;width:10px;margin:0 0 5px;transform:none}
}