/* =====================================================================
   IN STAGE — escuela.css
   Estilos propios de escuela.html (historia, pilares, equipo,
   instalaciones, opiniones y CTA). El resto vive en base.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO DE PÁGINA: historia + foto del equipo con arco y caption
--------------------------------------------------------------------- */
.hero-escuela{
  padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--seccion-y);
}
.hero-escuela h1{ margin-bottom: var(--sp-3); }
.hero-escuela__texto p{ margin-bottom: var(--sp-2); }
.hero-escuela__botones{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Figura con caption flotante solapada en la esquina inferior izquierda */
.hero-escuela__figura{ position: relative; }
.hero-escuela__figura .marco-arco img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.hero-escuela__figura .caption-flotante{
  left: -12px;
  bottom: 28px;
}
@media (max-width: 899px){
  .hero-escuela__figura .caption-flotante{ left: 8px; bottom: 16px; }
}

/* ---------------------------------------------------------------------
   01 · FILOSOFÍA — tarjetas de pilar con numeral editorial
--------------------------------------------------------------------- */
.pilar-tarjeta{
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pilar-tarjeta__num{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 2.75rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--rosa);
  user-select: none;
}
.pilar-tarjeta p{ color: var(--texto-suave); font-size: var(--fs-small); }

/* Lema destacado: cita grande con el eslogan de la escuela */
.lema{
  margin: 0 auto var(--sp-5);
  max-width: 42ch;
  text-align: center;
}
.lema__intro{
  color: var(--texto-suave);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-2);
}
.lema__cita{
  font-family: var(--font-display);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--morado);
}
.lema__cita .palabra-trazo{ font-style: italic; }
.lema__pie{
  margin-top: var(--sp-2);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rosa-tinta);
}
.lema__texto{
  max-width: 62ch;
  margin: 0 auto var(--sp-5);
  text-align: center;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   02 · EQUIPO — 5 fichas con foto real, chip sobre la foto y bio
--------------------------------------------------------------------- */
.grid-equipo{
  /* Dos por linea desde el movil: las fichas son pequenas porque la
     trayectoria va plegada, asi que caben de sobra. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 2.5vw, var(--gap-grid));
}
/* Cuatro profesores: dos por linea en movil y tableta, y los cuatro en fila
   a partir de 900 px. Con tres columnas se quedaba uno solo en la segunda
   fila. (Aqui habia dos reglas viejas que se pisaban entre ellas.) */
@media (min-width: 900px){ .grid-equipo{ grid-template-columns: repeat(4, 1fr); } }

.tarjeta-profe{ display: flex; flex-direction: column; overflow: hidden; }
.tarjeta-profe__media{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.tarjeta-profe__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top; /* retratos: que no se corte la cabeza */
  transition: transform 700ms var(--ease);
}
.tarjeta-profe:hover .tarjeta-profe__media img{ transform: scale(1.05); }
.tarjeta-profe__media .chip{ position: absolute; left: 14px; top: 14px; z-index: 1; }

.tarjeta-profe__cuerpo{
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.tarjeta-profe__rol{
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rosa-tinta);
}
/* Con dos fichas por linea, el cargo en mayusculas y espaciado se comia
   cinco o seis renglones. Aqui va en minusculas y mas ajustado: se lee
   igual de bien y las fichas quedan parejas. */
@media (max-width: 719px){
  .tarjeta-profe__rol{
    font-size: .78rem;
    text-transform: none;
    letter-spacing: .01em;
    line-height: 1.35;
  }
}
.tarjeta-profe__bio{ color: var(--texto-suave); font-size: var(--fs-small); }
.tarjeta-profe__frase{
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--morado);
}

/* ---------------------------------------------------------------------
   03 · INSTALACIONES — tarjetas de sala sobre sección morada
--------------------------------------------------------------------- */
.tarjeta-sala{ display: flex; flex-direction: column; overflow: hidden; }
.tarjeta-sala__media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tarjeta-sala__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.tarjeta-sala:hover .tarjeta-sala__media img{ transform: scale(1.05); }
.tarjeta-sala__media .chip{ position: absolute; left: 14px; top: 14px; z-index: 1; }

.tarjeta-sala__cuerpo{ padding: var(--sp-3) var(--sp-4) var(--sp-4); }
/* La tarjeta es blanca: recupera la tinta oscura dentro de la sección morada */
.seccion--morada .tarjeta-sala h3{ color: var(--negro); margin-bottom: var(--sp-2); }
.seccion--morada .tarjeta-sala li{ color: var(--tinta); font-size: var(--fs-small); }

/* Nota + botón de alquiler bajo las salas */
.instalaciones-pie{
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.instalaciones-pie p{ color: var(--lavanda-texto); max-width: 52ch; }

/* ---------------------------------------------------------------------
   04 · OPINIONES — franja de testimonios
--------------------------------------------------------------------- */
.tarjeta-testimonio{
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.tarjeta-testimonio blockquote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--tinta);
}
.tarjeta-testimonio footer{
  margin-top: auto;
  font-size: var(--fs-small);
  color: var(--texto-suave);
}
.testimonios-nota{
  margin-top: var(--sp-4);
  text-align: center;
  color: var(--texto-suave);
  font-size: var(--fs-small);
  max-width: none;
}

/* ---------------------------------------------------------------------
   CTA FINAL — foto real con overlay morado
--------------------------------------------------------------------- */
.cta-conocenos{
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 8.5rem);
  text-align: center;
}
.cta-conocenos__fondo{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Overlay morado corporativo por encima de la foto */
.cta-conocenos::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(66, 51, 89, .82);
  z-index: 1;
}
.cta-conocenos__inner{
  position: relative;
  z-index: 2;
}
.cta-conocenos h2{ color: var(--blanco); margin-bottom: var(--sp-2); }
.cta-conocenos p{
  color: var(--lavanda-texto);
  margin-inline: auto;
  max-width: 52ch;
}
.cta-conocenos__botones{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ---------------------------------------------------------------------
   TRAYECTORIA PLEGADA
   De la ficha se ve la foto, el nombre y el cargo. Lo demas se abre al
   pulsar: cuatro biografias seguidas hacian la seccion larguisima.
--------------------------------------------------------------------- */
/* Ningun cargo se sale de la tarjeta: si una palabra no cabe, parte. */
.tarjeta-profe__rol,
.tarjeta-profe__panel-rol{ overflow-wrap: break-word; }

/* 'Ver trayectoria' al fondo de la ficha. El cuerpo ya se estira (es flex
   column con flex:1 mas arriba); lo que faltaba era empujar el enlace hasta
   abajo, para que las cuatro fichas lo alineen aunque un cargo ocupe una
   linea y otro tres. */
.tarjeta-profe__abrir{ margin-top: auto; padding-top: 12px; }
.tarjeta-profe__abrir > summary{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--morado);
  padding: 4px 0;
}
.tarjeta-profe__abrir > summary::-webkit-details-marker{ display: none; }
.tarjeta-profe__abrir > summary::after{
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 250ms var(--ease);
}
.tarjeta-profe__abrir[open] > summary::after{ transform: rotate(-135deg) translate(-2px, -2px); }
.tarjeta-profe__abrir > summary:hover{ color: var(--rosa-tinta); }
.tarjeta-profe__abrir[open] > summary{ margin-bottom: 6px; }

/* ---------------------------------------------------------------------
   TRAYECTORIA A PANTALLA COMPLETA (movil)
   Con dos fichas por linea, desplegar el texto dentro dejaba una columna
   de cuatro palabras. Se abre encima de todo, se lee comodo y se cierra
   con la X de la esquina.
--------------------------------------------------------------------- */
.tarjeta-profe__cerrar{ display: none; }
/* la foto del panel solo existe en movil */
.tarjeta-profe__panel-media{ display: none; }
.tarjeta-profe__panel-nombre,
.tarjeta-profe__panel-rol{ display: none; }

@media (max-width: 719px){
  /* la etiqueta sobre la foto tapaba media imagen en una ficha pequena,
     y el cargo ya sale justo debajo del nombre */
  .tarjeta-profe__media .chip{ display: none; }

  /* IMPRESCINDIBLE: la tarjeta lleva un transform de la animacion de
     entrada, y un ancestro con transform hace que 'position: fixed' se
     ancle a el en vez de a la pantalla. Sin esto el panel se abria dentro
     de la ficha, en una columna de 158 px. */
  .tarjeta-profe:has(.tarjeta-profe__abrir[open]),
  .tarjeta-profe.esta-abierta{
    transform: none !important;
    z-index: 130;
  }

  .tarjeta-profe__abrir[open] .tarjeta-profe__panel{
    position: fixed;
    inset: 0;
    z-index: 130;
    background: var(--blanco);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* sin hueco arriba: la foto empieza pegada al borde */
    padding: 0 var(--pad-lateral) var(--sp-5);
    animation: panelProfe 220ms var(--ease);
  }
  /* La foto, en banda de arriba y de borde a borde. No a pantalla completa:
     el texto tiene que empezar sin tener que desplazarse. */
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel-media{
    display: block;
    position: relative;
    margin: 0 calc(var(--pad-lateral) * -1) var(--sp-3);
    height: clamp(190px, 34vh, 280px);
    overflow: hidden;
    background: var(--rosa-palo);
  }
  .tarjeta-profe__panel-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
  }
  .tarjeta-profe__panel-media .chip{
    display: inline-flex;
    position: absolute;
    left: var(--pad-lateral);
    bottom: 12px;
    z-index: 1;
  }
  @keyframes panelProfe{ from{ opacity: 0; transform: translateY(10px); } }

  .tarjeta-profe__abrir[open] .tarjeta-profe__cerrar{
    display: grid;
    place-items: center;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--gris-linea, rgba(66,51,89,.14));
    border-radius: 50%;
    background: var(--blanco);
    cursor: pointer;
    z-index: 131;
  }
  .tarjeta-profe__cerrar svg{ width: 20px; height: 20px; fill: none; stroke: var(--morado); stroke-width: 2; }

  .tarjeta-profe__abrir[open] .tarjeta-profe__panel-nombre{
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--tinta);
  }
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel-rol{
    display: block;
    margin: 6px 0 var(--sp-3);
    font-size: .82rem;
    font-weight: 700;
    color: var(--rosa-tinta);
  }
  .tarjeta-profe__abrir[open] .tarjeta-profe__bio{ font-size: 1rem; line-height: 1.65; }
  .tarjeta-profe__abrir[open] .tarjeta-profe__frase{ margin-top: var(--sp-3); }
}

/* La foto crece desde su sitio en la ficha hasta la banda del panel.
   Es la misma foto, no una nueva: el navegador une las dos porque llevan
   el mismo nombre de transicion (se lo pone el JavaScript al vuelo). */
::view-transition-group(profe-foto){ animation-duration: 380ms; }
::view-transition-old(profe-foto),
::view-transition-new(profe-foto){
  animation-duration: 380ms;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}

/* La etiqueta se ajusta a la tarjeta. 'Contemporáneo · Modern' medía 230 px
   dentro de una ficha de 190 en pantallas de 900 a 1150, y se salía por la
   derecha. Ahora parte de línea antes de tocar el borde. */
.tarjeta-profe__media .chip{
  max-width: calc(100% - 28px);
  white-space: normal;
  line-height: 1.3;
  text-align: left;
}

/* ---------------------------------------------------------------------
   TRAYECTORIA EN VENTANA (tableta y ordenador)
   Antes se desplegaba dentro de la ficha: la biografia no cabia en 268 px
   y, como las cuatro fichas de la fila se igualan, se alargaban todas
   hasta casi 1.000 px. Ahora se abre una ventana centrada, con la foto a
   la izquierda y la trayectoria a la derecha, y las fichas no se mueven.
--------------------------------------------------------------------- */
.tarjeta-profe__cerrar svg{ width: 20px; height: 20px; fill: none; stroke: var(--morado); stroke-width: 2; }

/* IMPRESCINDIBLE, en todas las pantallas: con la trayectoria abierta, la
   ficha no puede tener transform NI estar a mitad de una transicion de
   transform. Al pulsar con el dedo o el raton la ficha se 'levanta'
   (:hover, :active) y tarda 0,6 s en volver; mientras tanto 'fixed' se
   ancla a la ficha y el panel salia metido en ella, de 110 px de ancho,
   y la foto crecia hacia ahi. Sin transicion, el cambio es inmediato. */
.tarjeta-profe:has(.tarjeta-profe__abrir[open]),
.tarjeta-profe.esta-abierta{
  transform: none !important;
  transition: none !important;
  z-index: 130;
}
.tarjeta-profe__abrir[open] > summary{ margin-bottom: 0; }

@media (min-width: 720px){
  /* igual que en movil: sin esto, 'fixed' se anclaria a la ficha */
  .tarjeta-profe:has(.tarjeta-profe__abrir[open]),
  .tarjeta-profe.esta-abierta{
    transform: none !important;
    z-index: 130;
  }

  /* El velo de detras. Es parte del <details>: tocarlo cierra la ventana. */
  .tarjeta-profe__abrir[open]::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 129;
    background: rgba(26, 20, 36, .62);
    cursor: pointer;
    animation: veloProfe 220ms var(--ease);
  }
  @keyframes veloProfe{ from{ opacity: 0; } }

  .tarjeta-profe__abrir[open] .tarjeta-profe__panel{
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 130;
    width: min(880px, calc(100vw - 64px));
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(220px, 38%) 1fr;
    align-content: start;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: 0 clamp(1.5rem, 3.5vw, 2.75rem) 0 0;
    background: var(--blanco);
    border-radius: var(--radio-m);
    box-shadow: 0 30px 80px rgba(26, 20, 36, .35);
    cursor: auto;
    animation: ventanaProfe 240ms var(--ease);
  }
  @keyframes ventanaProfe{ from{ opacity: 0; transform: translateY(12px); } }

  /* la foto ocupa la columna izquierda de arriba abajo */
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel-media{
    display: block;
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: stretch;
    min-height: 420px;
    overflow: hidden;
    background: var(--rosa-palo);
  }
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
  }
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel-media .chip{
    display: inline-flex;
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 1;
  }

  /* el texto, en la columna derecha */
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel > p{ grid-column: 2; }
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel-nombre{
    display: block;
    margin-top: clamp(2.25rem, 4vw, 3rem);
    padding-right: 52px;               /* sitio para la X */
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    line-height: 1.15;
    color: var(--tinta);
  }
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel-rol{
    display: block;
    margin: 6px 0 var(--sp-3);
    font-size: .82rem;
    font-weight: 700;
    color: var(--rosa-tinta);
  }
  .tarjeta-profe__abrir[open] .tarjeta-profe__bio{ font-size: 1rem; line-height: 1.7; }
  .tarjeta-profe__abrir[open] .tarjeta-profe__frase{ margin-top: var(--sp-3); }
  .tarjeta-profe__abrir[open] .tarjeta-profe__panel > p:last-child{ margin-bottom: clamp(2rem, 4vw, 2.75rem); }

  .tarjeta-profe__abrir[open] .tarjeta-profe__cerrar{
    display: grid;
    place-items: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(66, 51, 89, .14);
    border-radius: 50%;
    background: var(--blanco);
    cursor: pointer;
    z-index: 2;
  }
  .tarjeta-profe__abrir[open] .tarjeta-profe__cerrar:hover{ background: var(--rosa-palo); }
}