/* =========================================================
   PROYECTÁ TU FUTURO — hoja de estilos única del ecosistema
   educativo de Río Negro.

   Cubre las tres páginas:
     · proyectar.html   → landing / home del ecosistema
     · orientacion.html → Proyectar Futuro (orientación vocacional)
     · becas.html       → Becas provinciales

   Todo va prefijado con pf- y scopeado bajo .pf-app para no
   colisionar con los estilos del sitio del Ministerio.

   ÍNDICE
     1. Variables y base
     2. Hero (grilla, tiles, logo, ruta y avión)
     3. Botones
     4. Secciones y títulos
     5. Tarjetas de programa
     6. Pasos / recorrido
     7. Intro + ficha lateral         (orientación y becas)
     8. Banda destacada               (orientación)
     9. Tarjetas de preguntas         (orientación)
    10. CTA y puente entre programas  (orientación y becas)
    11. Cifras destacadas             (becas)
    12. Cronograma                    (becas)
    13. Requisitos y aviso            (becas)
    14. Descargas                     (becas)
    15. Responsive
    16. Accesibilidad
   ========================================================= */

body.pf-app {
  --pf-blue: #007bd6;
  --pf-cyan: #22abff;
  --pf-green: #6abd4f;
  --pf-green-dark: #549a3d;
  --pf-salmon: #fc6363;
  --pf-ink: #1e1f1d;
  --pf-muted: #6d6f6c;
  --pf-grid: #ebebeb;
  --pf-soft: #f5f5f5;
  --pf-cell: 46px;
  /* tamaño de celda de la grilla del fondo y de los tiles */

  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--pf-ink);
  background: #fff;
}

h2.nexa-heavy.texto-verde-1 {
  display: none;
}

.pf-app h1,
.pf-app h2,
.pf-app h3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
}

/* ---------- HERO ---------- */
.pf-app .pf-hero {
  position: relative;
  overflow: hidden;
  /* el padding reserva las bandas de tiles: 2 filas de grilla arriba y abajo */
  padding: calc(var(--pf-cell) + 1.75rem) 0 calc(var(--pf-cell) + 1.5rem);
  background: #fff;
  /* las medidas del hero dependen de SU ancho, no del viewport:
     así funciona igual embebido dentro de un contenedor angosto */
  container-type: inline-size;
  container-name: hero;
}

/* layout propio: dos columnas que se apilan según el ancho del contenedor */
.pf-app .pf-hero-row {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.pf-app .pf-col {
  min-width: 0;
}

.pf-app .pf-col-texto {
  flex: 1 1 52%;
}

.pf-app .pf-col-ruta {
  flex: 1 1 48%;
}

/* grilla del banner, dibujada con gradientes */
.pf-app .pf-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--pf-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pf-grid) 1px, transparent 1px);
  background-size: var(--pf-cell) var(--pf-cell);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Los tiles viven en dos bandas (arriba y abajo) que el hero reserva con su
   padding, así nunca pisan el texto. Cada banda es un grid con la misma celda
   que el fondo, por eso los cuadrados calzan exactamente sobre la grilla. */
.pf-app .pf-tiles {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--pf-cell);
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--pf-cell));
  grid-auto-rows: var(--pf-cell);
  pointer-events: none;
  z-index: 0;
}

.pf-app .pf-tiles-top {
  top: 0;
}

.pf-app .pf-tiles-bottom {
  bottom: 0;
}

/* el contenido siempre por encima de la decoración */
.pf-app .pf-hero .container {
  position: relative;
  z-index: 1;
}

.pf-app .pf-tile {
  grid-column: var(--col);
  grid-row: var(--row);
  width: var(--pf-cell);
  height: var(--pf-cell);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-app .pf-tile .ph {
  font-size: calc(var(--pf-cell) * .55);
  line-height: 1;
  color: var(--pf-ink);
}

.pf-app .pf-t-green {
  background: var(--pf-green);
}

.pf-app .pf-t-blue {
  background: var(--pf-blue);
}

.pf-app .pf-t-cyan {
  background: var(--pf-cyan);
}

.pf-app .pf-t-salmon {
  background: var(--pf-salmon);
}

.pf-app .pf-t-gray {
  background: #dcdcdc;
}

.pf-app .pf-eyebrow {
  margin-bottom: .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

.pf-app .pf-title {
  margin-bottom: 1.1rem;
}

.pf-app .pf-logo {
  width: clamp(210px, 28vw, 330px);
  height: auto;
  display: block;
}

.pf-app .pf-lead {
  font-size: 1rem;
  line-height: 1.45;
  max-width: 40rem;
  margin-bottom: 1.35rem;
}

/* botones */
.pf-app .pf-btn {
  display: inline-block;
  padding: .8rem 1.7rem;
  font-weight: 900;
  font-size: 1rem;
  color: var(--pf-ink);
  text-decoration: none;
  border: none;
  transition: filter .15s, transform .15s;
}

.pf-app .pf-btn:hover {
  filter: brightness(.92);
  transform: translateY(-1px);
  color: var(--pf-ink);
}

.pf-app .pf-btn-blue {
  background: var(--pf-cyan);
}

.pf-app .pf-btn-salmon {
  background: var(--pf-salmon);
}

.pf-app .pf-btn-green {
  background: var(--pf-green);
}

/* ruta punteada + avión de papel */
.pf-app .pf-ruta {
  width: 100%;
  height: auto;
  max-height: 230px;
  overflow: visible;
}

.pf-app .pf-ruta-line {
  fill: none;
  stroke: var(--pf-ink);
  stroke-width: 2.4;
  stroke-dasharray: 9 11;
  stroke-linecap: round;
}

.pf-app .pf-plane path {
  fill: #f6c945;
  stroke: var(--pf-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* ---------- SECCIONES ---------- */
.pf-app .pf-section {
  padding: 3.25rem 0;
}

/* secciones con fondo alternado */
.pf-app .pf-section-alt {
  background: var(--pf-soft);
}

.pf-app .pf-h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  line-height: 1.12;
  margin-bottom: .4rem;
}

.pf-app .pf-sub {
  color: var(--pf-muted);
  font-size: 1.22rem;
  max-width: 42rem;
  margin-bottom: 0;
}

/* ---------- TARJETAS DE PROGRAMA ---------- */
.pf-app .pf-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: none;
  transition: transform .16s, box-shadow .16s;
}

.pf-app .pf-card:hover,
.pf-app .pf-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .13);
  color: inherit;
}

.pf-app .pf-card-top {
  display: block;
  height: 54px;
}

.pf-app .pf-card-body {
  display: block;
  padding: 1.9rem 1.4rem 1.4rem;
  flex: 1 1 auto;
}

.pf-app .pf-card-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem;
}

.pf-app .pf-card-title {
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.04;
}

.pf-app .pf-card-sep {
  width: 2px;
  align-self: stretch;
  flex: 0 0 2px;
}

.pf-app .pf-card-desc {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.4;
}

.pf-app .pf-card-text {
  display: block;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--pf-muted);
}

/* pie: banda blanca con el rectángulo y el elemento gráfico en color */
.pf-app .pf-card-foot {
  display: flex;
  align-items: flex-end;
  height: 54px;
  background: #fff;
}

.pf-app .pf-foot-rect {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  height: 100%;
  align-self: stretch;
  padding-left: 1.4rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: .95rem;
}

/* al pasar por la tarjeta, el llamado se subraya */
.pf-app .pf-card:hover .pf-foot-rect {
  text-decoration: underline;
}

/* motivo gráfico de la marca */
.pf-app .pf-motif {
  display: block;
  flex: 0 0 auto;
}

.pf-app .pf-motif svg {
  display: block;
  height: 54px;
  width: auto;
  fill: currentColor;
}

/* color por programa (tarjetas y pasos) */
.pf-app .pf-c-blue .pf-card-top,
.pf-app .pf-c-blue .pf-foot-rect {
  background: var(--pf-blue);
}

.pf-app .pf-c-blue .pf-card-sep {
  background: var(--pf-blue);
}

.pf-app .pf-c-blue .pf-motif {
  color: var(--pf-blue);
}

.pf-app .pf-c-green .pf-card-top,
.pf-app .pf-c-green .pf-foot-rect {
  background: var(--pf-green);
}

.pf-app .pf-c-green .pf-card-sep {
  background: var(--pf-green);
}

.pf-app .pf-c-green .pf-motif {
  color: var(--pf-green);
}

.pf-app .pf-c-salmon .pf-card-top,
.pf-app .pf-c-salmon .pf-foot-rect {
  background: var(--pf-salmon);
}

.pf-app .pf-c-salmon .pf-card-sep {
  background: var(--pf-salmon);
}

.pf-app .pf-c-salmon .pf-motif {
  color: var(--pf-salmon);
}

/* ---------- PASOS ---------- */
.pf-app .pf-pasos {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1rem;
}

.pf-app .pf-paso {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: #fff;
  border-left: 8px solid transparent;
  padding: 1.5rem 1.4rem;
}

.pf-app .pf-c-blue.pf-paso {
  border-left-color: var(--pf-blue);
}

.pf-app .pf-c-salmon.pf-paso {
  border-left-color: var(--pf-salmon);
}

.pf-app .pf-c-green.pf-paso {
  border-left-color: var(--pf-green);
}

.pf-app .pf-paso-num {
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  flex: 0 0 auto;
  color: #cfd1ce;
}

.pf-app .pf-c-blue .pf-paso-num {
  color: var(--pf-blue);
}

.pf-app .pf-c-salmon .pf-paso-num {
  color: var(--pf-salmon);
}

.pf-app .pf-c-green .pf-paso-num {
  color: var(--pf-green);
}

.pf-app .pf-paso-title {
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0 0 .35rem;
}

.pf-app .pf-paso-text {
  color: var(--pf-muted);
  font-size: .96rem;
  line-height: 1.45;
  margin: 0 0 .6rem;
}

.pf-app .pf-link {
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}

.pf-app .pf-c-blue .pf-link {
  color: var(--pf-blue);
}

.pf-app .pf-c-salmon .pf-link {
  color: #e04d4d;
}

.pf-app .pf-c-green .pf-link {
  color: var(--pf-green-dark);
}

.pf-app .pf-link:hover {
  border-bottom-width: 3px;
}

/* =========================================================
   PÁGINAS INTERNAS: orientación vocacional
   ========================================================= */

/* claim bajo el logo */
.pf-app .pf-claim {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--pf-ink);
}

.pf-app .pf-btn-cyan {
  background: var(--pf-green);
}

/* ---------- INTRO + FICHA ---------- */
.pf-app .pf-intro {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2.5rem;
  align-items: start;
}

.pf-app .pf-intro-texto p {
  font-size: 1.02rem;
  line-height: 1.55;
  margin-bottom: 1rem;
  text-align: justify;
}

.pf-app .pf-intro-texto p:last-child {
  margin-bottom: 0;
}

/* ficha de contacto con el lenguaje gráfico de las tarjetas */
.pf-app .pf-ficha {
  background: #fff;
  border: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
}

.pf-app .pf-ficha-top {
  display: block;
  height: 14px;
  background: var(--pf-blue);
}

.pf-app .pf-ficha-body {
  padding: 1.5rem 1.4rem 1.2rem;
}

.pf-app .pf-ficha-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0 0 .2rem;
}

.pf-app .pf-ficha-dato {
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.35;
  margin: 0 0 1.1rem;
  word-break: break-word;
}

.pf-app .pf-ficha-dato:last-child {
  margin-bottom: 0;
}

.pf-app .pf-ficha-dato a {
  color: var(--pf-blue);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.pf-app .pf-ficha-foot {
  display: flex;
  align-items: flex-end;
  height: 46px;
  background: #fff;
  margin-top: auto;
  color: var(--pf-blue);
}

.pf-app .pf-ficha-foot .pf-foot-rect {
  background: var(--pf-blue);
}

.pf-app .pf-ficha-foot .pf-motif svg {
  height: 46px;
}

/* ---------- DESTACADO: a quién está destinado ---------- */
.pf-app .pf-destacado {
  background: var(--pf-blue);
  color: #fff;
  padding: 2.75rem 0;
}

.pf-app .pf-dest-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.pf-app .pf-dest-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-app .pf-dest-icon .ph {
  font-size: 34px;
  line-height: 1;
  color: #fff;
}

.pf-app .pf-dest-title {
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  line-height: 1.15;
  margin: 0 0 .5rem;
  color: #fff;
}

.pf-app .pf-dest-text {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.5;
  max-width: 54rem;
  color: #eaf4ff;
}

/* ---------- LAS PREGUNTAS ---------- */
.pf-app .pf-preguntas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.pf-app .pf-preg {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pf-app .pf-preg-top {
  display: block;
  height: 10px;
}

.pf-app .pf-preg-body {
  padding: 1.5rem 1.4rem 1.7rem;
}

.pf-app .pf-preg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
}

.pf-app .pf-preg-icon .ph {
  font-size: 30px;
  line-height: 1;
}

.pf-app .pf-preg-title {
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0 0 .6rem;
}

.pf-app .pf-preg-text {
  margin: 0;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--pf-muted);
  text-align: justify;
}

/* color por tarjeta */
.pf-app .pf-preg.pf-c-blue .pf-preg-top {
  background: var(--pf-blue);
}

.pf-app .pf-preg.pf-c-blue .pf-preg-icon {
  background: rgba(0, 123, 214, .12);
  color: var(--pf-blue);
}

.pf-app .pf-preg.pf-c-cyan .pf-preg-top {
  background: var(--pf-cyan);
}

.pf-app .pf-preg.pf-c-cyan .pf-preg-icon {
  background: rgba(34, 171, 255, .14);
  color: var(--pf-cyan);
}

.pf-app .pf-preg.pf-c-green .pf-preg-top {
  background: var(--pf-green);
}

.pf-app .pf-preg.pf-c-green .pf-preg-icon {
  background: rgba(106, 189, 79, .16);
  color: var(--pf-green-dark);
}

/* ---------- CTA plataforma ---------- */
.pf-app .pf-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--pf-soft);
  color: #000000;
  padding: 2rem;
}

.pf-app .pf-cta-title {
  font-size: 1.4rem;
  margin: 0 0 .25rem;
  color: #000000;
}

.pf-app .pf-cta-sub {
  margin: 0;
  color: #000000;
  font-size: .97rem;
}

/* ---------- puente a los otros programas ---------- */
.pf-app .pf-otros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.pf-app .pf-otro {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e6e6e6;
  transition: transform .15s, box-shadow .15s;
}

.pf-app .pf-otro:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .1);
  color: inherit;
}

.pf-app .pf-otro-bar {
  flex: 0 0 12px;
}

.pf-app .pf-c-salmon .pf-otro-bar {
  background: var(--pf-salmon);
}

.pf-app .pf-c-green .pf-otro-bar {
  background: var(--pf-green);
}

.pf-app .pf-c-blue .pf-otro-bar {
  background: var(--pf-blue);
}

.pf-app .pf-otro-cont {
  padding: 1.1rem 1.3rem;
}

.pf-app .pf-otro-title {
  display: block;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.1;
  margin-bottom: .2rem;
}

.pf-app .pf-otro-desc {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pf-muted);
  line-height: 1.35;
}

/* =========================================================
   PÁGINAS INTERNAS: becas
   ========================================================= */

.pf-app .pf-becas-wrap {
  padding: 2.5rem 1rem 3rem;
}

/* dos columnas: contenido a la izquierda, accesos y pago a la derecha */
.pf-app .pf-blayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3.5rem;
  align-items: start;
}

/* ---------- encabezado ---------- */
.pf-app .pf-bh {
  margin-bottom: 2rem;
}

.pf-app .pf-bh-title {
  margin: 0 0 .5rem;
  line-height: 1;
}

.pf-app .pf-bh-block {
  display: inline-block;
  background: var(--pf-green);
  color: var(--pf-ink);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  line-height: 1;
  padding: .12em .3em;
}

.pf-app .pf-bh-sub {
  font-weight: 900;
  font-size: .95rem;
  margin: 0 0 .9rem;
}

.pf-app .pf-bh-p {
  text-align: justify;
  font-size: .98rem;
  line-height: 1.5;
  margin: 0 0 .6rem;
}

.pf-app .pf-bh-p:last-child {
  margin-bottom: 0;
}

/* ---------- tarjetas: banda verde de título + texto debajo ---------- */
.pf-app .pf-bcard {
  margin-bottom: 2rem;
}

.pf-app .pf-bcard-head {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-bottom: 1rem;
}

.pf-app .pf-bcard-icon {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pf-green);
}

.pf-app .pf-bcard-icon .ph {
  font-size: 24px;
  line-height: 1;
  color: var(--pf-ink);
}

.pf-app .pf-bcard-title {
  flex: 1 1 auto;
  margin: 0;
  padding: .55rem 1.1rem;
  background: var(--pf-green);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--pf-ink);
  display: flex;
  align-items: center;
}

.pf-app .pf-bcard-body p {
  text-align: justify;
  font-size: .98rem;
  line-height: 1.5;
  margin: 0 0 .6rem;
}

.pf-app .pf-bcard-body p:last-child {
  margin-bottom: 0;
}

/* ---------- grilla decorativa (franja sobre los accesos) ---------- */
.pf-app .pf-bh-grid {
  --bcell: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--bcell));
  grid-template-rows: repeat(2, var(--bcell));
  border: 1px solid var(--pf-grid);
  background:
    linear-gradient(var(--pf-grid) 1px, transparent 1px) 0 0 / var(--bcell) var(--bcell),
    linear-gradient(90deg, var(--pf-grid) 1px, transparent 1px) 0 0 / var(--bcell) var(--bcell);
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.pf-app .pf-bh-tile {
  grid-column: var(--c);
  grid-row: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-app .pf-bh-tile .ph {
  font-size: calc(var(--bcell) * .6);
  line-height: 1;
  color: var(--pf-ink);
}

/* ---------- accesos en 2x2 ----------
   Los paneles viven DENTRO de la misma grilla que los botones y ocupan las
   dos columnas, así el contenido se despliega justo debajo de la fila del
   botón que lo abrió y a todo el ancho. */
.pf-app .pf-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
}

.pf-app .pf-tab-wrap {
  display: flex;
  flex-direction: column;
}

.pf-app .pf-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  border: none;
  padding: 1rem 1.2rem;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  text-align: center;
  color: var(--pf-ink);
  transition: filter .15s, transform .15s, box-shadow .15s;
}

.pf-app .pf-tab:hover {
  filter: brightness(.94);
  transform: translateY(-2px);
}

/* el botón abierto queda marcado, para saber de cuál salió el panel */
.pf-app .pf-tab[aria-expanded="true"] {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.pf-app .pf-p-cyan {
  background: var(--pf-cyan);
}

.pf-app .pf-p-green {
  background: var(--pf-green);
}

.pf-app .pf-p-salmon {
  background: var(--pf-salmon);
}

.pf-app .pf-p-gray {
  background: #d7d7d7;
}

.pf-app .pf-p-blue {
  background: var(--pf-blue);
  color: #fff;
}

/* chevron debajo del botón */
.pf-app .pf-tab-chev {
  display: flex;
  justify-content: center;
  padding: .4rem 0;
  color: var(--pf-ink);
  pointer-events: none;
}

.pf-app .pf-tab-chev .ph {
  display: block;
  font-size: 20px;
  line-height: 1;
  transition: transform .2s;
}

.pf-app .pf-tab-wrap:has(.pf-tab[aria-expanded="true"]) .pf-tab-chev .ph,
.pf-app .pf-tab-wrap.pf-abierto .pf-tab-chev .ph {
  transform: rotate(180deg);
}

/* el panel ocupa las dos columnas de la grilla */
.pf-app .pf-tab-body {
  grid-column: 1 / -1;
  background: transparent;
}

/* color del panel según el botón del que sale */
.pf-app .pf-tab-body.pf-p-cyan {
  --tab-color: var(--pf-cyan);
  background: transparent;
}

.pf-app .pf-tab-body.pf-p-green {
  --tab-color: var(--pf-green);
  background: transparent;
}

.pf-app .pf-tab-body.pf-p-gray {
  --tab-color: #b5b5b5;
  background: transparent;
}

.pf-app .pf-tab-body.pf-p-salmon {
  --tab-color: var(--pf-salmon);
  background: transparent;
}

.pf-app .pf-tab-body.pf-p-blue {
  --tab-color: var(--pf-blue);
  background: transparent;
}

.pf-app .pf-tab-cont {
  position: relative;
  background: #f2f2f2;
  border-top: 5px solid var(--tab-color);
  padding: 1.4rem 1.5rem;
}

/* pico que apunta al botón de origen */
.pf-app .pf-tab-cont::before {
  content: "";
  position: absolute;
  top: -5px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 13px solid var(--tab-color);
  transform: translate(-50%, -100%);
}

.pf-app .pf-desde-izq .pf-tab-cont::before {
  left: 25%;
}

.pf-app .pf-desde-der .pf-tab-cont::before {
  left: 75%;
}

.pf-app .pf-panel-dato {
  margin: 0 0 .6rem;
  font-size: .96rem;
  line-height: 1.5;
}

.pf-app .pf-panel-label {
  margin: 1rem 0 .55rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

.pf-app .pf-reqs {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .93rem;
  line-height: 1.45;
}

.pf-app .pf-reqs li {
  margin-bottom: .45rem;
}

/* enlace de descarga */
.pf-app .pf-dl {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  border: 1px solid #dcdcdc;
  padding: .65rem 1rem;
  font-weight: 700;
  font-size: .93rem;
  color: var(--pf-ink);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}

.pf-app .pf-dl:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .1);
  color: var(--pf-ink);
}

.pf-app .pf-dl-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: var(--pf-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.pf-app .pf-dl-icon .ph {
  font-size: 17px;
  line-height: 1;
}

.pf-app .pf-dl-tipo {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--pf-muted);
  border: 1px solid #d6d6d6;
  padding: .05rem .4rem;
  margin-left: .35rem;
}

/* ---------- detalle del pago (columna derecha) ---------- */
.pf-app .pf-pago {
  margin-top: 1.75rem;
}

.pf-app .pf-cuotas {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin: 0 0 1rem;
}

.pf-app .pf-cuotas-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: var(--pf-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-app .pf-cuotas-icon .ph {
  font-size: 25px;
  line-height: 1;
  color: var(--pf-ink);
}

.pf-app .pf-cuotas-title {
  margin: 0 0 .15rem;
  font-weight: 900;
  font-size: .98rem;
  line-height: 1.3;
}

.pf-app .pf-cuotas-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .98rem;
  line-height: 1.4;
}

.pf-app .pf-pago-p {
  font-size: .98rem;
  line-height: 1.5;
  margin: 0 0 .5rem;
}

/* ---------- consultas y aviso ---------- */
.pf-app .pf-bpie {
  border-top: 1px solid var(--pf-grid);
  padding-top: 1.25rem;
  margin-top: 2.25rem;
}

.pf-app .pf-bpie-mail {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.05rem;
  margin: 0;
}

.pf-app .pf-bpie-icon {
  flex: 0 0 auto;
  display: flex;
  color: var(--pf-ink);
}

.pf-app .pf-bpie-icon .ph {
  font-size: 22px;
  line-height: 1;
}

.pf-app .pf-bpie-mail a {
  font-weight: 900;
  color: var(--pf-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--pf-green);
}

.pf-app .pf-bpie-aviso {
  color: #e01b1b;
  font-weight: 700;
  font-size: .72rem;
  line-height: 1.4;
  margin: 1.25rem 0 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* --- responsive: base y hero --- */

/* En contenedores angostos las bandas se achican a una fila para no comer
   tanto alto; los tiles de la segunda fila se ocultan. */
@container hero (max-width: 700px) {
  .pf-app {
    --pf-cell: 38px;
  }

  .pf-app .pf-hero {
    padding: calc(var(--pf-cell) + 1rem) 0;
  }
}

/* con poco ancho, la ruta se va y el texto ocupa todo */
@container hero (max-width: 860px) {
  .pf-app .pf-col-ruta {
    display: none;
  }

  .pf-app .pf-hero-row {
    gap: 0;
  }
}

@container hero (max-width: 620px) {
  .pf-app .pf-hero {
    padding: 2.5rem 0 2rem;
  }
}

/* Respaldo para navegadores sin container queries: se rigen por el viewport */
@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    .pf-app .pf-col-ruta {
      display: none;
    }
  }
}

@media (max-width: 991px) {
  .pf-app .pf-hero {
    padding: 3rem 0 2.5rem;
  }
}

@media (max-width: 767px) {
  .pf-app .pf-hero-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .pf-app .pf-section {
    padding: 3rem 0;
  }

  .pf-app .pf-paso {
    flex-direction: column;
    gap: .5rem;
  }

  .pf-app .pf-btn {
    width: 100%;
    text-align: center;
  }
}

/* --- responsive: orientación --- */
@media (max-width: 991px) {
  .pf-app .pf-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pf-app .pf-ficha {
    max-width: 420px;
  }

  .pf-app .pf-preguntas {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .pf-app .pf-dest-row {
    flex-direction: column;
    gap: 1rem;
  }

  .pf-app .pf-otros {
    grid-template-columns: 1fr;
  }

  .pf-app .pf-cta {
    padding: 1.5rem 1.3rem;
  }

  .pf-app .pf-cta .pf-btn {
    width: 100%;
    text-align: center;
  }
}

/* --- responsive: becas --- */
@media (max-width: 991px) {
  .pf-app .pf-blayout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* la franja de grilla es ornamento: fuera cuando el espacio se achica */
  .pf-app .pf-bh-grid {
    display: none;
  }

  /* en una columna, consultas va al final de todo */
  .pf-app .pf-bcol-main .pf-bpie {
    order: 2;
  }
}

@media (max-width: 767px) {
  .pf-app .pf-tabs {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .pf-app .pf-tab {
    min-height: 0;
    padding: .85rem 1.1rem;
  }

  /* en una columna, cada panel se reordena para quedar bajo SU botón */
  .pf-app .pf-tabs>*:nth-child(1) {
    order: 1;
  }

  .pf-app .pf-tabs>*:nth-child(3) {
    order: 2;
  }

  .pf-app .pf-tabs>*:nth-child(2) {
    order: 3;
  }

  .pf-app .pf-tabs>*:nth-child(4) {
    order: 4;
  }

  .pf-app .pf-tabs>*:nth-child(5) {
    order: 5;
  }

  .pf-app .pf-tabs>*:nth-child(7) {
    order: 6;
  }

  .pf-app .pf-tabs>*:nth-child(6) {
    order: 7;
  }

  .pf-app .pf-tabs>*:nth-child(8) {
    order: 8;
  }

  /* el pico va centrado: el botón ocupa todo el ancho */
  .pf-app .pf-desde-izq .pf-tab-cont::before,
  .pf-app .pf-desde-der .pf-tab-cont::before {
    left: 50%;
  }

  .pf-app .pf-tab-cont {
    padding: 1.2rem 1.2rem;
  }

  .pf-app .pf-bh-p,
  .pf-app .pf-bcard-body p {
    text-align: left;
  }

  .pf-app .pf-cuotas {
    flex-direction: column;
    gap: .6rem;
  }

  .pf-app .pf-dl {
    width: 100%;
  }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

/* accesibilidad */
.pf-app a:focus-visible,
.pf-app button:focus-visible {
  outline: 3px solid var(--pf-cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pf-app * {
    animation: none !important;
    transition: none !important;
  }
}