/* =============================================================================
 * quienes-somos.css — Fichas que se voltean y ventana de lectura
 * =============================================================================
 * Solo la carga esta página, así que el resto del sitio no paga por ella.
 *
 *   1. Portada y secciones      4. La ventana (modal)
 *   2. La ficha                 5. En el teléfono
 *   3. El volteo
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. PORTADA Y SECCIONES
 * -------------------------------------------------------------------------- */
.qs-portada {
  background: linear-gradient(135deg, var(--hospital) 0%, #0d2f5c 100%);
  color: #fff;
  padding: 3.5rem 0 3rem;
}
.qs-portada h1 { color: #fff; font-size: 2rem; margin-bottom: .6rem; line-height: 1.2; }
.qs-portada p  { opacity: .88; max-width: 46rem; line-height: 1.7; font-size: .9375rem; }

.qs-seccion { background: #fff; padding: 3.5rem 0; }
.qs-seccion-gris { background: var(--gray-50); }

.qs-cabecera { text-align: center; margin-bottom: 2.5rem; }
.qs-cabecera .kicker {
  display: block; font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hospital-cyan, var(--hospital)); margin-bottom: .5rem;
}
.qs-cabecera h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: .5rem; }
.qs-cabecera p  { color: var(--gray-600); font-size: .9375rem; }

.qs-rejilla { display: grid; gap: 1.5rem; }
.qs-rejilla-3     { grid-template-columns: repeat(3, 1fr); }
.qs-rejilla-marco { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

@media (max-width: 900px) {
  .qs-rejilla-3 { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
 * 2. LA FICHA
 * -------------------------------------------------------------------------- */
.qs-ficha { position: relative; }

/* Cada cara es un botón o un div, pero se ven igual: una tarjeta. */
.qs-cara {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .75rem; width: 100%; height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,32,56,.04);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.qs-cara:focus-visible { outline: 3px solid var(--hospital); outline-offset: 3px; }

/* Las de abajo se levantan un poco al pasar por encima; las de arriba no,
   porque su gracia es el volteo y las dos cosas juntas marean. */
/* Una línea de color crece por el borde de arriba al pasar el puntero, la
   tarjeta se levanta un poco y el ícono se enciende. Es poco movimiento a
   propósito: lo justo para que se note que la ficha responde. */
.qs-cara::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--hospital), var(--hospital-cyan, #35a3d9));
  border-radius: var(--radius) var(--radius) 0 0;
  transition: width .35s cubic-bezier(.22,.68,.28,1);
}
.qs-icono {
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

@media (hover: hover) {
  .qs-ficha:not(.qs-volteable) .qs-cara:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(16,32,56,.13);
    border-color: rgba(27,74,143,.35);
  }
  .qs-ficha:not(.qs-volteable) .qs-cara:hover::before { width: 100%; }
  .qs-ficha:not(.qs-volteable) .qs-cara:hover .qs-icono {
    background: var(--hospital); color: #fff; transform: scale(1.06);
  }
  .qs-ficha:not(.qs-volteable) .qs-cara:hover .qs-titulo { color: var(--hospital); }
}

@media (prefers-reduced-motion: reduce) {
  .qs-cara, .qs-cara::before, .qs-icono { transition: none; }
  .qs-ficha:not(.qs-volteable) .qs-cara:hover { transform: none; }
}

.qs-icono {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center;
  border-radius: .75rem;
  background: var(--hospital-light, #e8f0fb);
  color: var(--hospital);
}
.qs-icono svg { width: 1.375rem; height: 1.375rem; }

.qs-titulo {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.35;
  color: var(--gray-800); margin: 0;
}
.qs-breve {
  font-size: .875rem; line-height: 1.65; color: var(--gray-600); margin: 0;
}

/* "Ver más" se va al fondo para que todas las fichas terminen igual. */
.qs-pista {
  margin-top: auto; padding-top: .5rem;
  font-size: .8125rem; font-weight: 600; color: var(--hospital);
  display: inline-flex; align-items: center; gap: .3rem;
}
.qs-pista::after { content: "→"; transition: transform .2s ease; }
@media (hover: hover) {
  .qs-cara:hover .qs-pista::after { transform: translateX(3px); }
}

/* -----------------------------------------------------------------------------
 * 3. EL VOLTEO
 * -----------------------------------------------------------------------------
 * Las dos caras ocupan el mismo hueco y giran sobre el eje vertical. La de
 * atrás empieza girada media vuelta; al pasar el puntero, las dos giran a la
 * vez y se intercambian.
 *
 * Solo donde hay puntero: en una pantalla táctil no existe "pasar por
 * encima", y la ficha se quedaría a medio girar al tocarla.
 * -------------------------------------------------------------------------- */
.qs-volteable { perspective: 1400px; min-height: 15.5rem; }

.qs-volteable .qs-cara {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.22,.68,.28,1), box-shadow .2s ease;
}
.qs-volteable .qs-frente  { transform: rotateY(0deg); }
.qs-volteable .qs-reverso {
  transform: rotateY(180deg);
  background: var(--hospital);
  border-color: var(--hospital);
  color: #fff;
  justify-content: center;
  /* No recibe el clic: así, esté como esté girada, el toque llega siempre
     a la ficha y abre la ventana. */
  pointer-events: none;
}
.qs-volteable .qs-reverso .qs-breve { color: rgba(255,255,255,.92); font-size: .9375rem; }
.qs-volteable .qs-reverso .qs-pista { color: #fff; }

/* OJO CON EL FOCO: antes esto usaba :focus-within, y al cerrar la ventana se
   le devuelve el foco a la ficha desde la que se abrió. Resultado: la ficha
   se quedaba girada y quieta, sin volver, hasta pulsar en otro sitio.
   Con :has(:focus-visible) solo gira cuando el foco viene del teclado, que
   es cuando de verdad hace falta enseñar la frase de detrás. */
@media (hover: hover) {
  .qs-volteable:hover .qs-frente,
  .qs-volteable:has(.qs-frente:focus-visible) .qs-frente  { transform: rotateY(-180deg); }
  .qs-volteable:hover .qs-reverso,
  .qs-volteable:has(.qs-frente:focus-visible) .qs-reverso { transform: rotateY(0deg); }
  .qs-volteable:hover .qs-cara { box-shadow: 0 18px 36px rgba(16,32,56,.16); }
  .qs-volteable:hover { z-index: 2; }
}

/* Si alguien pidió en su sistema no ver animaciones, el volteo SIGUE
   funcionando —es lo que enseña la frase— pero sin el giro: las caras se
   cambian de golpe. Quitarlo del todo dejaría la ficha sin su contenido. */
@media (prefers-reduced-motion: reduce) {
  .qs-volteable .qs-cara { transition: none; }
}

/* Sin puntero no existe "pasar por encima": en una pantalla táctil la ficha
   se quedaría a medio girar. Ahí las dos caras se apilan y se ven como UNA
   sola tarjeta: la de arriba pierde su borde inferior y la de abajo el
   superior, y entre las dos cierran el recuadro. */
@media (hover: none) {
  .qs-volteable { perspective: none; min-height: 0; display: flex; flex-direction: column; }

  .qs-volteable .qs-cara {
    position: static; transform: none; transition: none;
    height: auto; backface-visibility: visible;
  }
  .qs-volteable .qs-frente {
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: .5rem;
  }
  .qs-volteable .qs-frente .qs-pista { display: none; }

  .qs-volteable .qs-reverso {
    background: #fff; border-top: 0; color: inherit;
    border-radius: 0 0 var(--radius) var(--radius);
    padding-top: 0; justify-content: flex-start;
    pointer-events: none;
  }
  .qs-volteable .qs-reverso .qs-breve { color: var(--gray-600); font-size: .875rem; }
  .qs-volteable .qs-reverso .qs-pista { color: var(--hospital); }
}

/* -----------------------------------------------------------------------------
 * 4. LA VENTANA
 * -------------------------------------------------------------------------- */
.qs-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: 1.5rem;
}
.qs-modal[hidden] { display: none; }

.qs-modal-fondo {
  position: absolute; inset: 0;
  background: rgba(9,20,38,.62);
  backdrop-filter: blur(3px);
  animation: qs-aparece .2s ease;
}

.qs-modal-caja {
  position: relative;
  width: min(46rem, 100%);
  max-height: min(85vh, 46rem);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 24px 60px rgba(9,20,38,.35);
  overflow: hidden;
  animation: qs-entra .25s cubic-bezier(.2,.7,.3,1);
}

.qs-modal-cabecera {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.35rem 1.5rem;
  background: var(--hospital); color: #fff;
  flex: none;
}
.qs-modal-cabecera h2 {
  font-size: 1.1875rem; font-weight: 700; line-height: 1.35;
  color: #fff; margin: 0; flex: 1;
  text-align: center;
  /* Se compensa el ancho de la X para que el título quede centrado respecto
     a la ventana entera, no al hueco que le deja el botón. */
  padding-left: 2.25rem;
}
.qs-modal-x {
  flex: none; width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer; transition: background .15s ease;
}
.qs-modal-x svg { width: 1.125rem; height: 1.125rem; }
.qs-modal-x:hover { background: rgba(255,255,255,.28); }
.qs-modal-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.qs-modal-cuerpo {
  padding: 1.75rem 1.75rem 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* El contenido llega de WordPress y ya lo viste wordpress.css; aquí solo se
   quita el aire de más del primer y del último elemento. */
.qs-modal-cuerpo > :first-child { margin-top: 0; }
.qs-modal-cuerpo > :last-child  { margin-bottom: 0; }

.qs-cargando, .qs-sin-pagina {
  color: var(--gray-500); font-size: .9375rem; text-align: center; padding: 2rem 0;
}
.qs-sin-pagina strong { display: block; color: var(--gray-700); margin-bottom: .35rem; }

/* Mientras la ventana está abierta, la página de detrás no se mueve. */
body.qs-abierto { overflow: hidden; }

@keyframes qs-aparece { from { opacity: 0 } to { opacity: 1 } }
@keyframes qs-entra {
  from { opacity: 0; transform: translateY(12px) scale(.98) }
  to   { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .qs-modal-fondo, .qs-modal-caja { animation: none; }
}

/* -----------------------------------------------------------------------------
 * 5. EN EL TELÉFONO
 * -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .qs-portada { padding: 2.5rem 0 2.25rem; }
  .qs-portada h1 { font-size: 1.625rem; }
  .qs-seccion { padding: 2.5rem 0; }

  /* La ventana ocupa casi todo, pero DEJANDO margen: pegada a los bordes
     parece que la pantalla se rompió. */
  .qs-modal { padding: 1rem .875rem; align-items: end; }
  .qs-modal-caja { max-height: 88vh; border-radius: calc(var(--radius) * 1.5); }
  .qs-modal-cabecera { padding: 1.1rem 1.1rem; }
  .qs-modal-cabecera h2 { font-size: 1.0625rem; }
  .qs-modal-cuerpo { padding: 1.25rem 1.1rem 1.75rem; }

  /* La primera ficha del carrusel: la presentación de la sección. */
  .qs-intro {
    background: linear-gradient(135deg, var(--hospital) 0%, #0d2f5c 100%);
    color: #fff; border-color: transparent;
  }
  .qs-intro .qs-titulo { color: #fff; font-size: 1.25rem; }
  .qs-intro .qs-breve  { color: rgba(255,255,255,.9); }
  .qs-intro .qs-icono  { background: rgba(255,255,255,.16); color: #fff; }
  .qs-intro .qs-pista  { color: #fff; }

  /* La descripción vive en esa primera ficha, así que en la banda azul no se
     repite: decir lo mismo dos veces seguidas hace bajar de más. */
  .qs-portada p { display: none; }

  /* Dentro del carrusel la ficha ocupa el ancho entero y todas miden igual. */
  #qs-carrusel .qs-ficha { height: 100%; }
  #qs-carrusel .qs-cara  { min-height: 15rem; }
}

/* -----------------------------------------------------------------------------
 * 6. EL BOTÓN DE ACCESIBILIDAD Y LA VENTANA
 * -----------------------------------------------------------------------------
 * El botón flotante de accesibilidad va fijo a la izquierda y a media altura.
 * Con la ventana abierta se le montaba encima del título y tapaba la primera
 * letra. No se esconde —es un control de accesibilidad, no puede desaparecer—
 * sino que pasa por debajo mientras la ventana está abierta, y vuelve a su
 * sitio al cerrarla.
 * -------------------------------------------------------------------------- */
body.qs-abierto .a11y-launcher { z-index: 1; }

/* -----------------------------------------------------------------------------
 * 7. EL CONTENIDO DENTRO DE LA VENTANA
 * -----------------------------------------------------------------------------
 * La ventana es estrecha comparada con una página. Lo que en la página del
 * hospital son dos columnas, aquí quedaba en dos tiras de texto apretadas,
 * una pisando a la otra. Dentro de la ventana todo va en una sola columna.
 * -------------------------------------------------------------------------- */
.qs-modal-cuerpo .wp-block-columns { display: block !important; }
.qs-modal-cuerpo .wp-block-column  { width: 100% !important; margin: 0 0 1.25rem; }
.qs-modal-cuerpo .wp-block-column:last-child { margin-bottom: 0; }

/* El título repetido ya NO se esconde aquí. Lo decide quienes-somos.js, que
   comprueba que de verdad diga lo mismo que la ficha; esconderlo a ciegas
   podía tragarse un apartado propio del documento sin que nadie lo notara. */

/* Un poco más de aire entre párrafos: aquí se lee de corrido. */
.qs-modal-cuerpo p { line-height: 1.75; }
.qs-modal-cuerpo > * + * { margin-top: 1.1rem; }

/* Nada de lo que venga de WordPress puede ensanchar la ventana. */
.qs-modal-cuerpo img,
.qs-modal-cuerpo iframe,
.qs-modal-cuerpo table { max-width: 100%; }