.quiro {
  --q-noche: #090717;
  --q-panel: #120d2a;
  --q-panel-2: #19113b;
  --q-violeta: #9c82ef;
  --q-violeta-vivo: #c5b2ff;
  --q-oro: #efc76d;
  --q-oro-claro: #ffe4a4;
  --q-crema: #fff9e9;
  --q-humo: #bdb5cd;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  color: var(--q-crema);
}
.quiro * { box-sizing: border-box; }
.quiro [hidden] { display: none !important; }
.quiro button { font: inherit; }

.quiro-inicio,
.quiro-mesa,
.quiro-resultado {
  overflow: hidden;
  border: 1px solid rgba(239, 199, 109, .28);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 50% 0, rgba(120, 85, 210, .18), transparent 39%),
    linear-gradient(150deg, var(--q-panel-2), var(--q-noche) 72%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  scroll-margin-top: 2rem;
}

/* Portada: una escena completa, no una fotografia colocada encima de un panel. */
.quiro-hero {
  position: relative;
  isolation: isolate;
  min-height: 530px;
  margin: 0;
  overflow: hidden;
  background: #070712;
}
.quiro-hero > img {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 69% 50%;
  transform: scale(1.14);
}
.quiro-hero-velo {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 5, 17, .96) 0%, rgba(8, 6, 23, .88) 36%, rgba(8, 6, 23, .38) 63%, rgba(8, 6, 23, .08) 100%),
    linear-gradient(0deg, rgba(8, 6, 20, .84), transparent 48%);
}
.quiro-hero figcaption {
  display: flex;
  min-height: 530px;
  max-width: 520px;
  padding: clamp(2rem, 5vw, 3.6rem);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
.quiro-sobretitulo,
.quiro-rotulo {
  color: var(--q-oro);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.quiro-hero h2 {
  max-width: 460px;
  margin: .65rem 0 .9rem;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.3rem, 5.7vw, 4.25rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.035em;
}
.quiro-intro {
  max-width: 34rem;
  margin: 0 0 1.15rem;
  color: #e0d9e8;
  font-size: 1rem;
  line-height: 1.72;
}
.quiro-promesas {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}
.quiro-promesas li {
  padding: .34rem .68rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2rem;
  background: rgba(5, 3, 15, .28);
  color: rgba(255, 255, 255, .82);
  font-size: .75rem;
}
.quiro-accion,
.quiro-acciones { margin: 0; text-align: center; }

.quiro-btn {
  display: inline-flex;
  min-height: 48px;
  padding: .76rem 1.45rem;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  border: 0;
  border-radius: 2rem;
  background: linear-gradient(180deg, var(--q-oro-claro), var(--q-oro));
  box-shadow: 0 9px 25px rgba(0, 0, 0, .33);
  color: #251805;
  font-weight: 780;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.quiro-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 13px 30px rgba(0, 0, 0, .38);
}
.quiro-btn:focus-visible,
.quiro-eleccion-compacta:focus-visible,
.quiro-forma:focus-visible,
.quiro-linea-tab:focus-visible,
.quiro-variante:focus-visible,
.quiro-indicador:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.quiro-btn.es-secundario {
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  box-shadow: none;
  color: var(--q-crema);
}
.quiro-btn:disabled {
  filter: grayscale(.3);
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.quiro-error {
  margin: .75rem 0 0;
  color: #ffd0c6;
  font-size: .84rem;
  text-align: center;
}
/* Referencias: fotografia/ilustracion realista + capas precisas. */
.qref {
  position: relative;
  display: block;
  width: 102px;
  height: 128px;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(197, 178, 255, .18);
  border-radius: .8rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(156, 130, 239, .22), transparent 62%),
    #080719;
}
.qref > img,
.qref > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.qref > img {
  object-fit: contain;
  filter: saturate(.92) contrast(1.03);
}
.qref > svg { overflow: visible; }
.qref-mirror > img,
.qref-mirror > svg { transform: scaleX(-1); }
.qref-atlas {
  background-image: var(--q-atlas);
  background-repeat: no-repeat;
  background-size: 400% 200%;
}
.qref-atlas.forma-tierra { background-position: 0 0; }
.qref-atlas.forma-aire { background-position: 33.333% 0; }
.qref-atlas.forma-fuego { background-position: 66.667% 0; }
.qref-atlas.forma-agua { background-position: 100% 0; }
.qtrazo {
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2.4px currentColor);
}
.qtrazo-corazon { color: #ff9cac; stroke: currentColor; }
.qtrazo-cabeza { color: #b9a6ff; stroke: currentColor; }
.qtrazo-vida { color: #ffd779; stroke: currentColor; }
.qtrazo-destino { color: #83ddcf; stroke: currentColor; }
.qtrazo-fino { stroke-width: 1.25; stroke-dasharray: 2.5 2.2; }
.qtrazo-ausente { color: rgba(255, 255, 255, .58); stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 3 3; }

/* Mesa interactiva: el usuario compone una sola palma, sin cuestionario lineal. */
.quiro-mesa { padding: clamp(1rem, 3.2vw, 2rem); }
.quiro-mesa-cabecera { max-width: 44rem; margin: 0 auto 1.45rem; text-align: center; }
.quiro-mesa-cabecera h2 {
  margin: .42rem 0 .55rem;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.quiro-mesa-cabecera h2:focus,
.quiro-arquetipo:focus { outline: none; }
.quiro-mesa-cabecera p { margin: 0; color: var(--q-humo); line-height: 1.62; }
.quiro-bloque {
  margin-top: .85rem;
  padding: clamp(.9rem, 2.4vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  background: rgba(4, 2, 16, .26);
}
.quiro-bloque > h3 {
  margin: 0 0 .8rem;
  color: var(--q-oro-claro);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.quiro-contexto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.quiro-selector > p { margin: 0 0 .5rem; color: rgba(255, 255, 255, .7); font-size: .82rem; }
.quiro-elecciones-compactas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .48rem; }
.quiro-eleccion-compacta,
.quiro-forma,
.quiro-variante {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(8, 5, 25, .58);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.quiro-eleccion-compacta:hover,
.quiro-forma:hover,
.quiro-variante:hover { border-color: rgba(255, 255, 255, .23); background: rgba(255, 255, 255, .035); transform: translateY(-1px); }
.quiro-eleccion-compacta[aria-checked="true"],
.quiro-forma[aria-checked="true"],
.quiro-variante[aria-checked="true"] {
  border-color: var(--q-oro);
  background: linear-gradient(145deg, rgba(156, 130, 239, .17), rgba(239, 199, 109, .07));
  box-shadow: inset 0 0 0 1px rgba(239, 199, 109, .17);
}
.quiro-eleccion-compacta {
  display: grid;
  grid-template-columns: 38px 1fr 18px;
  min-height: 74px;
  padding: .65rem .58rem;
  align-items: center;
  gap: .55rem;
  border-radius: .8rem;
}
.quiro-eleccion-simbolo {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(239, 199, 109, .35);
  border-radius: 50%;
  color: var(--q-oro-claro);
  font-family: Georgia, serif;
  font-weight: 700;
}
.quiro-eleccion-compacta b,
.quiro-forma b,
.quiro-variante b { display: block; color: #fff; font-size: .86rem; line-height: 1.3; }
.quiro-eleccion-compacta small,
.quiro-forma small,
.quiro-variante small { display: block; margin-top: .16rem; color: rgba(255, 255, 255, .6); font-size: .7rem; line-height: 1.38; }
.quiro-eleccion-compacta i,
.quiro-forma i,
.quiro-variante i { color: var(--q-oro-claro); font-size: .8rem; font-style: normal; opacity: 0; }
.quiro-eleccion-compacta[aria-checked="true"] i,
.quiro-forma[aria-checked="true"] i,
.quiro-variante[aria-checked="true"] i { opacity: 1; }
.quiro-formas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.quiro-forma {
  display: grid;
  grid-template-rows: 177px auto;
  min-height: 265px;
  padding: .55rem 1.65rem .72rem .55rem;
  border-radius: .85rem;
}
.quiro-forma .qref {
  width: 128px;
  height: 171px;
  max-width: 100%;
  justify-self: center;
  border-radius: .62rem;
}
.quiro-forma > span:nth-child(2) { align-self: center; padding: .45rem .18rem 0; }
.quiro-forma > i { position: absolute; right: .65rem; top: .65rem; }
.quiro-panel-ayuda { margin: -.35rem 0 .9rem; color: var(--q-humo); font-size: .85rem; }
.quiro-laboratorio {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(390px, 1.18fr);
  gap: 1rem;
  align-items: start;
}
.quiro-mapa,
.quiro-panel-linea {
  padding: .85rem;
  border: 1px solid rgba(239, 199, 109, .16);
  border-radius: .95rem;
  background: linear-gradient(145deg, rgba(39, 24, 76, .6), rgba(5, 3, 18, .72));
}
.quiro-palma-viva {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-radius: .8rem;
  background: radial-gradient(circle at 50% 50%, rgba(239, 199, 109, .1), transparent 30%), radial-gradient(circle at 50% 50%, rgba(156, 130, 239, .23), transparent 67%);
}
.quiro-palma-viva::before,
.quiro-palma-viva::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(239, 199, 109, .15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.quiro-palma-viva::before { width: 86%; aspect-ratio: 1; }
.quiro-palma-viva::after { width: 67%; aspect-ratio: 1; border-style: dashed; }
.quiro-palma-viva .qref-mesa {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: none;
}
.quiro-forma-elegida { margin: -.15rem 0 .75rem; color: var(--q-oro-claro); font-size: .78rem; font-weight: 700; text-align: center; }
.quiro-indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.quiro-indicador {
  display: grid;
  grid-template-columns: 8px 1fr;
  padding: .48rem .55rem;
  gap: 0 .45rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .65rem;
  background: rgba(5, 3, 18, .5);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.quiro-indicador > span { grid-row: 1 / span 2; width: 7px; height: 100%; min-height: 30px; border-radius: 1rem; background: var(--line-color); opacity: .42; }
.quiro-indicador b { color: rgba(255, 255, 255, .76); font-size: .7rem; line-height: 1.2; }
.quiro-indicador small { overflow: hidden; color: rgba(255, 255, 255, .47); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.quiro-indicador.esta-activo { border-color: rgba(197, 178, 255, .5); background: rgba(156, 130, 239, .09); }
.quiro-indicador.esta-completo > span { opacity: 1; box-shadow: 0 0 10px var(--line-color); }
.quiro-indicador.esta-completo small { color: rgba(255, 255, 255, .75); }
.quiro-linea-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.quiro-linea-tab {
  position: relative;
  display: grid;
  min-height: 74px;
  padding: .55rem .3rem;
  place-items: center;
  gap: .16rem;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: .7rem;
  background: rgba(4, 2, 16, .42);
  color: rgba(255, 255, 255, .64);
  cursor: pointer;
}
.quiro-linea-tab > span { color: var(--q-violeta-vivo); font-size: 1.18rem; }
.quiro-linea-tab b { font-size: .63rem; line-height: 1.15; text-align: center; }
.quiro-linea-tab i {
  position: absolute;
  right: .3rem;
  top: .3rem;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  font-size: .55rem;
  font-style: normal;
}
.quiro-linea-tab[aria-selected="true"] { border-color: var(--q-violeta-vivo); background: rgba(156, 130, 239, .13); color: #fff; }
.quiro-linea-tab.esta-completa i { background: var(--q-oro); color: #1b1004; font-weight: 800; }
.quiro-linea-cabecera { display: grid; grid-template-columns: 10px 1fr; gap: .7rem; margin: .9rem 0 .65rem; align-items: stretch; }
.quiro-linea-color { width: 8px; border-radius: 1rem; box-shadow: 0 0 12px currentColor; }
.quiro-linea-cabecera h4 { margin: 0 0 .15rem; color: #fff; font-family: Georgia, serif; font-size: 1.25rem; }
.quiro-linea-cabecera p { margin: 0; color: var(--q-humo); font-size: .78rem; line-height: 1.45; }
.quiro-variantes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.quiro-variante {
  display: grid;
  grid-template-columns: 82px 1fr 15px;
  min-height: 112px;
  padding: .48rem;
  align-items: center;
  gap: .55rem;
  border-radius: .75rem;
}
.quiro-variante .qref { width: 76px; height: 98px; border-radius: .55rem; }
.quiro-variante > i { align-self: start; margin-top: .2rem; }
.qref-ausencia {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 57%;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(6, 4, 18, .65);
  color: rgba(255, 255, 255, .72);
  transform: translate(-50%, -50%);
}
.quiro-mesa-final { display: grid; grid-template-columns: 1fr auto; gap: .8rem 1rem; margin-top: 1rem; align-items: center; }
.quiro-avance {
  position: relative;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 2rem;
  background: rgba(5, 3, 18, .6);
}
.quiro-avance span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(156, 130, 239, .55), rgba(239, 199, 109, .42));
  transition: width .3s ease;
}
.quiro-avance b {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  place-items: center;
  color: rgba(255, 255, 255, .78);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.quiro-mesa-final .quiro-error { grid-column: 1 / -1; grid-row: 2; margin: 0; }

/* Resultado: la palma se recompone con las elecciones reales. */
.quiro-resultado { padding: clamp(1.15rem, 4vw, 2.15rem); }
.quiro-retrato {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(320px, 1.22fr);
  align-items: center;
  gap: clamp(1.3rem, 4vw, 2.4rem);
  margin-bottom: 1.25rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(239, 199, 109, .24);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 18% 50%, rgba(156, 130, 239, .25), transparent 34%),
    linear-gradient(135deg, rgba(37, 23, 71, .88), rgba(10, 7, 24, .88));
}
.quiro-palma-final {
  position: relative;
  min-height: 390px;
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle at 50% 48%, rgba(239, 199, 109, .12), transparent 36%),
    radial-gradient(circle at 50% 52%, rgba(156, 130, 239, .25), transparent 67%);
}
.quiro-palma-final::before,
.quiro-palma-final::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(239, 199, 109, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.quiro-palma-final::before { width: 88%; aspect-ratio: 1; }
.quiro-palma-final::after { width: 70%; aspect-ratio: 1; border-style: dashed; }
.quiro-palma-final .qref-resultado {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  border-radius: 0;
}
.qref-resultado > img { padding: .2rem; }
.qref-resultado > svg { padding: .2rem; }
.quiro-retrato-copy { position: relative; z-index: 1; }
.quiro-rotulo { margin: 0 0 .55rem; }
.quiro-arquetipo {
  margin: 0 0 .45rem;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.1rem, 5.4vw, 3.65rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}
.quiro-mezcla {
  display: inline-flex;
  margin: 0 0 .85rem;
  padding: .28rem .72rem;
  border: 1px solid rgba(239, 199, 109, .36);
  border-radius: 2rem;
  color: var(--q-oro-claro);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.quiro-resumen {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  line-height: 1.68;
}
.quiro-basada {
  margin: 1.3rem 0 .7rem;
  color: rgba(255, 255, 255, .68);
  text-align: center;
}
.quiro-pistas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  margin-bottom: 1.45rem;
}
.quiro-sintesis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: .85rem;
}
.quiro-sintesis article {
  padding: 1.15rem;
  border: 1px solid rgba(197, 178, 255, .2);
  border-radius: .95rem;
  background: linear-gradient(145deg, rgba(156, 130, 239, .11), rgba(4, 2, 17, .32));
}
.quiro-sintesis article > span { color: var(--q-violeta-vivo); font-size: 1.25rem; }
.quiro-sintesis h3 { margin: .4rem 0 .45rem; color: #fff; font-size: 1rem; }
.quiro-sintesis p { margin: 0; color: rgba(255, 255, 255, .76); font-size: .87rem; line-height: 1.62; }
.quiro-pista {
  padding: .36rem .68rem;
  border: 1px solid rgba(239, 199, 109, .28);
  border-radius: 2rem;
  background: rgba(239, 199, 109, .07);
  font-size: .77rem;
}
.quiro-triada {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.65rem;
}
.quiro-triada article {
  padding: 1.05rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: .9rem;
  background: rgba(4, 2, 17, .28);
}
.quiro-triada article > span { color: var(--q-oro); font-size: 1.1rem; }
.quiro-triada h3 {
  margin: .4rem 0 .35rem;
  color: #fff;
  font-size: .98rem;
}
.quiro-triada p {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: .84rem;
  line-height: 1.56;
}
.quiro-detalles-titulo {
  margin: 0 0 .75rem;
  color: #fff;
  font-size: 1.18rem;
  text-align: center;
}
.quiro-detalles {
  display: grid;
  gap: .58rem;
  max-width: 48rem;
  margin: 0 auto 1.4rem;
}
.quiro-detalle {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: .8rem;
  padding: .78rem .9rem;
  border-left: 2px solid rgba(239, 199, 109, .5);
  background: rgba(255, 255, 255, .04);
}
.quiro-detalle .qref {
  width: 62px;
  height: 78px;
  border: 0;
  border-radius: .45rem;
}
.quiro-detalle h4 {
  display: block;
  margin: 0 0 .18rem;
  color: #fff;
  font-size: .88rem;
  line-height: 1.25;
}
.quiro-detalle p {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: .84rem;
  line-height: 1.52;
}
.quiro-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
}
.quiro-compartir-estado {
  min-height: 1.35rem;
  margin: .55rem 0 0;
  color: var(--q-oro-claro);
  font-size: .76rem;
  text-align: center;
}
.quiro-privacidad {
  margin: 1rem auto .25rem;
  color: rgba(255, 255, 255, .61);
  font-size: .77rem;
  text-align: center;
}
.quiro-aviso {
  max-width: 44rem;
  margin: .25rem auto 0;
  color: rgba(255, 255, 255, .48);
  font-size: .71rem;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 760px) {
  .qref { width: 88px; height: 116px; }
  .quiro-formas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiro-laboratorio { grid-template-columns: 1fr; }
  .quiro-palma-viva { min-height: 520px; }
  .quiro-retrato { grid-template-columns: 220px 1fr; }
  .quiro-palma-final { min-height: 340px; }
}
@media (max-width: 640px) {
  .quiro-inicio,
  .quiro-mesa,
  .quiro-resultado { scroll-margin-top: 1rem; }
  .quiro-hero { min-height: 610px; }
  .quiro-hero > img {
    height: 72%;
    object-position: 50% 38%;
    transform: scale(1.05);
  }
  .quiro-hero-velo {
    background:
      linear-gradient(0deg, rgba(7, 5, 18, .99) 0%, rgba(7, 5, 18, .94) 36%, rgba(7, 5, 18, .28) 69%, rgba(7, 5, 18, .05)),
      linear-gradient(90deg, rgba(7, 5, 18, .35), transparent, rgba(7, 5, 18, .35));
  }
  .quiro-hero figcaption {
    min-height: 610px;
    max-width: none;
    padding: 1.5rem 1.25rem 1.75rem;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
  }
  .quiro-hero h2 { max-width: 330px; font-size: 2.55rem; }
  .quiro-intro { max-width: 32rem; font-size: .94rem; line-height: 1.62; }
  .quiro-promesas { justify-content: center; }
  .qref { width: 82px; height: 106px; }
  .quiro-mesa { padding: .85rem; }
  .quiro-contexto-grid { grid-template-columns: 1fr; }
  .quiro-formas { grid-template-columns: 1fr; }
  .quiro-forma { grid-template-columns: 96px 1fr 16px; grid-template-rows: none; min-height: 126px; padding: .55rem; align-items: center; }
  .quiro-forma .qref { width: 90px; height: 120px; }
  .quiro-forma > span:nth-child(2) { padding: 0 .35rem; }
  .quiro-forma > i { position: static; }
  .quiro-linea-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiro-linea-tab { min-height: 64px; grid-template-columns: 28px 1fr; place-items: center start; }
  .quiro-linea-tab b { text-align: left; }
  .quiro-palma-viva { min-height: 430px; }
  .quiro-variantes { grid-template-columns: 1fr; }
  .quiro-variante { grid-template-columns: 88px 1fr 18px; min-height: 116px; }
  .quiro-variante .qref { width: 82px; height: 104px; }
  .quiro-mesa-final { grid-template-columns: 1fr; }
  .quiro-interpretar { width: 100%; }
  .quiro-mesa-final .quiro-error { grid-column: 1; grid-row: auto; }
  .quiro-retrato {
    grid-template-columns: 1fr;
    gap: .7rem;
    text-align: center;
  }
  .quiro-palma-final { min-height: 350px; }
  .quiro-retrato-copy { max-width: 33rem; margin: auto; }
  .quiro-mezcla { margin-inline: auto; }
  .quiro-sintesis { grid-template-columns: 1fr; }
  .quiro-triada { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .quiro-hero { min-height: 625px; }
  .quiro-hero h2 { font-size: 2.3rem; }
  .quiro-promesas li { font-size: .69rem; }
  .quiro-elecciones-compactas { grid-template-columns: 1fr; }
  .quiro-palma-viva { min-height: 390px; }
  .quiro-indicadores { grid-template-columns: 1fr; }
  .quiro-palma-final { min-height: 315px; }
  .quiro-detalle { grid-template-columns: 58px 1fr; padding-inline: .7rem; }
  .quiro-detalle .qref { width: 52px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .quiro *,
  .quiro *::before,
  .quiro *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}