/* 09 · Quem está por trás (prefijo qd-): porque confiar em Diana Garcia.
   Collage editorial con fotografías reales de Diana, credenciales (solo hechos facilitados por ella),
   cinco áreas de pensamiento y misión ligada a la oferta. Movimiento discreto. */
.qd { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 40% at 70% 18%, rgba(61, 220, 255, .09), transparent 70%), radial-gradient(ellipse 40% 35% at 10% 70%, rgba(42, 123, 255, .07), transparent 70%), #05070a; }
.qd-cab { max-width: 980px; margin: 0 auto 40px; text-align: center; display: grid; justify-items: center; gap: 14px; }
.qd-cab .lead { max-width: 64ch; color: #c9d3dc; }
.qd-quem { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font: 700 .7rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #dbe6ee; }
.qd-quem img { width: 30px; height: 30px; border-radius: 50%; }

/* ---------- Credenciales ---------- */
.qd-numeros { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line-2); }
.qd-numeros li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 24px 16px; text-align: center; }
.qd-numeros li + li { border-left: 1px solid var(--line-2); }
.qd-numeros b { font: 800 clamp(2.8rem, 5.6vw, 4.4rem)/1 var(--f-tit); color: #f2fdff; text-shadow: 0 0 4px rgba(255, 255, 255, .6), 0 0 14px var(--cyan), 0 0 36px rgba(61, 220, 255, .5); }
.qd-numeros__ico { display: grid; place-items: center; width: clamp(56px, 6vw, 70px); height: clamp(56px, 6vw, 70px); border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 18px rgba(61, 220, 255, .45), inset 0 0 14px rgba(61, 220, 255, .25); }
.qd-numeros__ico svg { width: 55%; height: 55%; color: #f2fdff; }
.qd-numeros span { max-width: 26ch; font: 700 .7rem/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #cdd8e1; }

/* ---------- Collage ---------- */
.qd-collage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(44px, 5.2vw, 66px); gap: 14px; margin-bottom: 72px; }
.qd-f { position: relative; margin: 0; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: #0d1218; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.qd-f img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.qd-f:hover img { transform: scale(1.04); }
.qd-f figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 7, 10, .75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(61, 220, 255, .35); font: 700 .62rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #e6f6fb; }
.qd-f--conferencia { grid-column: 1 / 5; grid-row: 1 / 5; }
.qd-f--vermelho { grid-column: 2 / 5; grid-row: 5 / 10; }
.qd-f--principal { grid-column: 5 / 9; grid-row: 1 / 10; border-color: rgba(61, 220, 255, .45); box-shadow: 0 0 0 1px rgba(61, 220, 255, .25), 0 0 60px rgba(61, 220, 255, .18), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.qd-f--principal img { object-position: 50% 20%; }
.qd-f--palco { grid-column: 9 / 13; grid-row: 1 / 5; }
.qd-f--palco img { object-position: 60% 30%; }
.qd-f--trabalho { grid-column: 9 / 12; grid-row: 5 / 10; }
.qd-f--trabalho img, .qd-f--vermelho img { object-position: 50% 20%; }
.qd-f--conferencia img { object-position: 30% 50%; }
.qd-f--trabalho figcaption { left: auto; right: 12px; bottom: auto; top: 12px; }

.qd-cartao { position: absolute; z-index: 2; border-radius: 16px; background: rgba(8, 12, 16, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(61, 220, 255, .4); box-shadow: 0 0 24px rgba(61, 220, 255, .18), 0 20px 40px -20px rgba(0, 0, 0, .9); color: #fff; }
.qd-cartao--anos { left: 27%; bottom: 8%; display: grid; gap: 4px; padding: 14px 18px; max-width: 210px; }
.qd-cartao--anos b { font: 800 2.4rem/1 var(--f-tit); color: var(--cyan); text-shadow: 0 0 18px rgba(61, 220, 255, .6); }
.qd-cartao--anos span { font: 700 .62rem/1.45 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #dbe6ee; }
.qd-cartao--prof { right: 27%; top: 6%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font: 700 .66rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.qd-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.qd-cartao--assin { right: 30%; bottom: -26px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; }
.qd-cartao--assin img { width: 30px; height: 30px; border-radius: 50%; }
.qd-cartao--assin span { display: grid; line-height: 1.15; }
.qd-cartao--assin b { font: 800 .9rem var(--f-tit); text-transform: uppercase; }
.qd-cartao--assin i { font: italic 400 .95rem var(--f-serif); color: var(--cyan); }

/* Entrada escalonada de las fotos */
.qd-collage .qd-f, .qd-collage .qd-cartao { opacity: 0; transform: translateY(24px); }
.qd-collage.visivel .qd-f, .qd-collage.visivel .qd-cartao { animation: qd-entra .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.qd-collage.visivel .qd-f--principal { animation-delay: .05s; }
.qd-collage.visivel .qd-f--conferencia { animation-delay: .15s; }
.qd-collage.visivel .qd-f--palco { animation-delay: .25s; }
.qd-collage.visivel .qd-f--vermelho { animation-delay: .35s; }
.qd-collage.visivel .qd-f--trabalho { animation-delay: .45s; }
.qd-collage.visivel .qd-cartao { animation: qd-entra .9s .6s cubic-bezier(.2, .7, .2, 1) forwards, qd-flutua 6s 1.6s ease-in-out infinite; }
@keyframes qd-entra { to { opacity: 1; transform: none; } }
@keyframes qd-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- Cinco áreas ---------- */
.qd-metodo { margin-bottom: 64px; }
.qd-metodo__cab { max-width: 760px; margin-bottom: 26px; display: grid; gap: 12px; }
.qd-metodo__cab h3, .qd-missao h3 { font: 800 clamp(1.6rem, 3.4vw, 2.6rem)/1.05 var(--f-tit); text-transform: uppercase; color: #fff; }
.qd-areas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.qd-area { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, #111920, #0b1015); transition: border-color .3s, transform .3s, box-shadow .3s; }
.qd-area::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), transparent); }
.qd-area:hover { border-color: rgba(61, 220, 255, .5); transform: translateY(-3px); box-shadow: 0 0 26px rgba(61, 220, 255, .14); }
.qd-area__n { font: 800 1.6rem/1 var(--f-tit); color: transparent; -webkit-text-stroke: 1px rgba(61, 220, 255, .7); }
.qd-area h4 { margin: 0; font: 800 1.02rem/1.15 var(--f-tit); text-transform: uppercase; color: #fff; }
.qd-area p { font-size: .93rem; line-height: 1.6; color: #c3ced8; }

/* ---------- Misión ---------- */
.qd-missao { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: 28px 48px; align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(ellipse 60% 100% at 100% 50%, rgba(61, 220, 255, .1), transparent 70%), #0a0f14; }
.qd-missao__txt { display: grid; gap: 14px; }
.qd-missao__txt > p { color: #d0dbe2; max-width: 62ch; }
.qd-missao__oferta { padding-left: 14px; border-left: 2px solid var(--cyan); }
.qd-missao__oferta b { color: #fff; }
.qd-preco { color: var(--verde) !important; }
.qd-missao__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.qd-site { color: var(--cyan); font-weight: 600; text-underline-offset: 4px; }
.qd-site:hover { color: #fff; }
.qd-missao .redes { margin-top: 4px; }
.qd-oferta { display: grid; gap: 10px; justify-items: start; padding: 26px; border-radius: 20px; text-decoration: none; color: #fff; background: linear-gradient(180deg, #0f1820, #080c10); border: 1px solid rgba(43, 245, 154, .45); box-shadow: 0 0 30px rgba(43, 245, 154, .15); transition: transform .25s, box-shadow .25s; }
.qd-oferta:hover { transform: translateY(-3px); box-shadow: 0 0 44px rgba(43, 245, 154, .28); }
.qd-oferta__marca { font: 700 .66rem var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.qd-oferta b { font: 800 clamp(3rem, 6vw, 4.4rem)/1 var(--f-tit); color: var(--verde); text-shadow: 0 0 24px rgba(43, 245, 154, .5); }
.qd-oferta span { color: #d0dbe2; }
.qd-oferta small { color: #aab8c0; font-size: .82rem; }
.qd-oferta .qd-oferta__ver { margin-top: 6px; font: 800 .8rem var(--f-tit); text-transform: uppercase; letter-spacing: .06em; color: var(--verde); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .qd-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qd-areas .qd-area:last-child { grid-column: 1 / -1; }
  .qd-missao { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .qd-cab { text-align: left; justify-items: start; }
  .qd-numeros { grid-template-columns: 1fr; }
  .qd-numeros li + li { border-left: 0; border-top: 1px solid var(--line-2); }
  .qd-numeros li { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; gap: 16px; padding: 18px 4px; }
  .qd-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; margin-bottom: 56px; }
  .qd-f--principal { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; }
  .qd-f--palco, .qd-f--conferencia { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .qd-f--vermelho, .qd-f--trabalho { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
  .qd-f--principal { order: 1; } .qd-cartao--prof { order: 2; } .qd-cartao--anos { order: 3; }
  .qd-f--palco { order: 4; } .qd-f--vermelho { order: 5; } .qd-f--trabalho { order: 6; } .qd-f--conferencia { order: 7; } .qd-cartao--assin { order: 8; }
  .qd-cartao { position: static; justify-self: stretch; }
  .qd-cartao--anos { max-width: none; grid-column: 1 / -1; }
  .qd-cartao--prof { grid-column: 1 / -1; justify-content: center; }
  .qd-cartao--assin { grid-column: 1 / -1; justify-content: center; }
  .qd-areas { grid-template-columns: 1fr; }
  .qd-missao__acoes .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .qd-collage .qd-f, .qd-collage .qd-cartao { opacity: 1; transform: none; }
  .qd-collage.visivel .qd-f, .qd-collage.visivel .qd-cartao { animation: none; }
  .qd-f img, .qd-area, .qd-oferta { transition: none; }
}

/* En móvil, los datos ya están en la franja de credenciales: no repetirlos sobre las fotos */
@media (max-width: 760px) { .qd-cartao--anos, .qd-cartao--prof { display: none; } }
.qd-site { overflow-wrap: anywhere; }
.qd-missao__txt, .qd-missao > * { min-width: 0; }