/* Hybred · Para quién es Hybred (para-quien-es.html)
   Toma de styles.css las fuentes, los botones y el logo, y de paginas.css la paleta clara, la barra
   superior, el pie y las entradas (.reveal). Aquí van sus secciones: portada con la tenista, los
   ocho perfiles de estudiantes y por qué elegir Hybred. */

.pq-title, .pq-sub, .pq-profiles h2, .pq-why h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}
.pq-title span, .pq-profiles h2 span, .pq-why h2 span { display: block; }
.pq-kicker {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Portada ---------- */
.pq-hero {
  min-height: min(100vh, 960px);
  min-height: min(100svh, 960px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 3vw, 40px);
  padding: 100px 0 32px var(--pad);        /* la raqueta llega hasta el borde derecho */
  overflow: hidden;
}
.pq-title { font-size: clamp(3rem, 6.2vw, 6rem); }
.pq-title span { white-space: nowrap; }
.pq-title .pq-brand { position: relative; font-size: 1.3em; line-height: 0.82; color: var(--celeste); }
/* el punto de "Hybred." es una esfera de luz celeste y violeta */
.pq-title .pq-dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.05em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #8FE3F6, #40CCED 35%, #4A1C93 100%);
  box-shadow: 0 0 0.12em rgba(64, 204, 237, 0.55);
  vertical-align: baseline;
}
.pq-sub { margin-top: 22px; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 0.95; }
.pq-lead { margin: 18px 0 0; max-width: 30rem; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; color: var(--fg); }
.pq-btn { margin-top: 28px; padding: 1em 1.9em; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.88rem; }
.pq-hero-photo {
  justify-self: end;
  margin: 0;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1059 / 1387;
  max-height: calc(100svh - 120px);
}
.pq-hero-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; }

.js .pq-title span, .js .pq-sub, .js .pq-lead, .js .pq-btn { animation: pg-rise 700ms var(--ease-out) both; }
.js .pq-title span:nth-child(1) { animation-delay: 80ms; }
.js .pq-title span:nth-child(2) { animation-delay: 160ms; }
.js .pq-sub { animation-delay: 260ms; }
.js .pq-lead { animation-delay: 340ms; }
.js .pq-btn { animation-delay: 420ms; }
/* la tenista entra con el golpe: desde la derecha y un poco abajo */
.js .pq-hero-photo img { animation: pq-swing 1000ms var(--ease-out) 120ms both; }
@keyframes pq-swing { from { opacity: 0; transform: translate(40px, 24px) rotate(2deg); } to { opacity: 1; transform: none; } }
.js .pq-dot { animation: pq-dot 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms both; }
@keyframes pq-dot { from { transform: scale(0); } to { transform: none; } }

/* ---------- Nuestros estudiantes ---------- */
.pq-profiles { padding: 40px var(--pad) 56px; }
.pq-profiles h2 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.pq-note { margin: 14px 0 0; font-size: 0.8rem; }
.pq-grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pq-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 20px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(43, 16, 86, 0.07);
  overflow: hidden;
}
.pq-card.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
.pq-photo { aspect-ratio: 1.26; overflow: hidden; background: #E9E4F5; }
.pq-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.pq-photo.is-vacia { background: linear-gradient(135deg, #F2EEFA, #E6DFF5); }   /* perfil sin foto: el espacio queda en lila */
.pq-card h3 {
  margin: 16px 18px 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.pq-card p { margin: 8px 18px 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }

/* ---------- Por qué elegir Hybred ---------- */
.pq-why {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.05fr);
  align-items: center;
  column-gap: clamp(20px, 3vw, 44px);
  padding: 24px var(--pad) 80px;
}
.pq-why h2 { font-size: clamp(2.3rem, 3.6vw, 3.5rem); }
.pq-why h2 span { white-space: nowrap; }
.pq-why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why { padding: 6px clamp(12px, 1.6vw, 24px); border-left: 1px solid var(--line); text-align: center; }
.why.reveal { transition-delay: calc(var(--i, 0) * 80ms); }
.why-ico { width: 40px; height: 40px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.why h3 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.why p { margin: 8px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }

/* ---------- Hover solo con mouse ---------- */
@media (hover: hover) and (pointer: fine) {
  .pq-card:hover .pq-photo img { transform: scale(1.05); }
}

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1100px) {
  .pq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pq-card.reveal { transition-delay: calc(var(--i, 0) * 40ms); }
  .pq-why { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .why:first-child { border-left: 0; }
}

/* ---------- Tablet en vertical: la tenista arriba, grande; el texto debajo ---------- */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .pq-hero { display: flex; flex-direction: column; justify-content: center; padding: 108px var(--pad) 56px; }
  .pq-hero-photo { order: -1; align-self: flex-end; width: min(74%, 580px); max-height: 48svh; margin: 0 calc(-1 * var(--pad)) 20px 0; }
  .pq-title { font-size: clamp(3.8rem, 9vw, 5.8rem); }
  .pq-sub { font-size: clamp(2.2rem, 4.6vw, 3rem); }
  .pq-lead { max-width: 36rem; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  .pq-hero { display: flex; flex-direction: column; min-height: 0; padding: 84px var(--gutter) 32px; }
  .pq-hero-photo { order: -1; align-self: flex-end; width: min(92%, 400px); max-height: none; margin: 0 calc(-1 * var(--gutter)) 12px 0; }
  .pq-title { font-size: clamp(2.6rem, 12.4vw, 3.6rem); }
  .pq-sub { margin-top: 16px; font-size: clamp(1.6rem, 7.6vw, 2.2rem); }
  .pq-lead { font-size: 0.98rem; }
  .pq-btn { width: 100%; }
  .pq-profiles { padding: 24px var(--gutter) 40px; }
  .pq-profiles h2 { font-size: clamp(2.3rem, 11vw, 3.1rem); }
  .pq-grid { gap: 10px; }
  .pq-card { padding-bottom: 14px; border-radius: 14px; }
  .pq-card h3 { margin: 12px 12px 0; font-size: 1.05rem; }
  .pq-card p { margin: 6px 12px 0; font-size: 0.8rem; }
  .pq-why { padding: 16px var(--gutter) 56px; }
  .pq-why h2 { font-size: clamp(2.2rem, 10.6vw, 3rem); }
  .pq-why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .why:nth-child(3) { border-left: 0; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .pq-title span, .js .pq-sub, .js .pq-lead, .js .pq-btn, .js .pq-hero-photo img { animation: pg-fade-only 300ms ease both; }
  .js .pq-dot { animation: none; }
  .pq-card:hover .pq-photo img { transform: none; }
}