/* ============================================
   MAYORAZGO — Piezas compartidas por todas las páginas.
   La página de Auto (index.html) no carga sitio.css: lo que tiene que
   verse igual en las dos va acá.
   ============================================ */
:root { --bloque: clamp(72px, 8vw, 112px); --panel-r: clamp(24px, 2.8vw, 44px); --card-btn: 16px; }

/* ---------- Primera imagen: mismo oscurecido en todas las páginas ---------- */
.hero-film img { filter: brightness(.82); }
/* Auto e Inicio: sin zoom animado, porque ablanda la foto. La escala queda fija para cubrir el parallax */
.hero-key img { animation: none; will-change: auto; }

/* ---------- Último bloque: de corte a corte y más bajo ---------- */
.finale.finale-v3 { min-height: 0; margin-inline: 0; border-radius: 0; padding-block: clamp(48px, 5.4vw, 76px); }
.finale-v3 .finale-title { max-width: none; margin-bottom: 14px; font-size: clamp(34px, 4.2vw, 62px); }
.finale-v3 .finale-sub { max-width: none; margin-bottom: 22px; }
.finale-v3 .finale-actions { margin-bottom: 22px; }

/* ---------- "¿Te quedó otra duda?": va al final de todas las páginas ----------
   Tiene la impronta de AURA: la misma esfera del modo voz, el anillo de luz que gira
   de sus botones y una pregunta que se escribe sola. Panel gris liso, como el resto. */
@property --pt-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pt-aura { margin-top: var(--bloque); }
.pt-aura-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 28px clamp(40px, 6vw, 88px); padding: clamp(32px, 4.4vw, 64px); border-radius: var(--panel-r); background: var(--panel-claro, #F3F6F9); }
.pt-aura-intro { display: flex; flex-direction: column; align-items: flex-start; }
.pt-aura-h { font-family: 'Fraunces', Georgia, serif; font-size: clamp(36px, 4.6vw, 70px); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; color: var(--tinta); text-wrap: balance; }
.pt-aura-sub { margin-top: 12px; font-size: 19px; line-height: 1.45; color: #3E5266; text-wrap: balance; }

/* La esfera: base azul, un remolino que gira despacio y un brillo arriba */
.pt-aura-orb { position: relative; flex: none; width: 92px; height: 92px; margin-bottom: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.pt-aura-orb::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; filter: blur(14px); background: radial-gradient(circle, rgba(125, 211, 252, .55) 0%, rgba(52, 211, 153, .2) 48%, transparent 72%); }
.pt-aura-orb-body { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 34%, #7DD3FC 0%, #1C7BBE 60%, #16659E 100%); box-shadow: inset 0 0 22px rgba(18, 50, 74, .25), 0 14px 30px -12px rgba(28, 123, 190, .7); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.pt-aura-orb-body::before { content: ""; position: absolute; inset: -30%; filter: blur(12px); background: conic-gradient(from 0deg, #1C7BBE, #7DD3FC, #5EEAD4, #5BB4F0, #2B6CC4, #1C7BBE); opacity: .9; }
.pt-aura-orb-body::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 45%); }
.pt-aura-orb-mic { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .24); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pt-aura-orb-mic svg { width: 20px; height: 20px; }
.pt-aura-twinkle { position: absolute; display: grid; color: #5BB4F0; pointer-events: none; }
.pt-aura-twinkle svg { width: 100%; height: 100%; }
.pt-aura-twinkle-1 { top: -10px; right: -16px; width: 22px; height: 22px; }
.pt-aura-twinkle-2 { bottom: 2px; left: -18px; width: 14px; height: 14px; color: #34D399; }

/* La caja de pregunta: blanca, con el borde de luz de los botones de AURA */
.pt-aura-box {
  --pt-a: 0deg;
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 10px 10px 10px 22px;
  border: 2.5px solid transparent; border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--pt-a), #7DD3FC, #34D399, #FFFFFF, #5BB4F0, #7DD3FC) border-box;
  box-shadow: 0 0 22px rgba(125, 211, 252, .45), 0 0 52px rgba(52, 211, 153, .16), 0 18px 34px -24px rgba(18, 50, 74, .55);
  font: inherit; font-weight: 600; color: var(--tinta); text-align: left; cursor: pointer;
  transition: box-shadow .25s ease;
}
.pt-aura-box-ic { flex: none; display: grid; color: #1C7BBE; }
.pt-aura-box-ic svg { width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgba(125, 211, 252, .9)); }
.pt-aura-box-txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 18px; color: #3E5266; }
.pt-aura-type.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: #1C7BBE; animation: pt-caret 1s steps(1) infinite; }
@keyframes pt-caret { 50% { opacity: 0; } }
.pt-aura-box-go { flex: none; display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: linear-gradient(135deg, #0E2A40, #163F62); color: #fff; font-weight: 700; white-space: nowrap; transition: background .25s ease; }

/* Preguntas listas: cápsulas blancas con la chispa de AURA */
.pt-aura-box:focus-visible, .pt-aura-chips button:focus-visible, .pt-aura-orb:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
.pt-aura-card > div:last-child { display: contents; }
.pt-aura-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.pt-aura-chips button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -18px rgba(18, 50, 74, .55); font: inherit; font-weight: 600; color: var(--tinta); cursor: pointer; transition: background-color .25s ease, box-shadow .25s ease; }
.pt-aura-chips button::before { content: ""; flex: none; width: 15px; height: 15px; background: #5BB4F0; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l1.9 6.1 6.1 1.9-6.1 1.9L12 18.5l-1.9-6.1-6.1-1.9 6.1-1.9z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l1.9 6.1 6.1 1.9-6.1 1.9L12 18.5l-1.9-6.1-6.1-1.9 6.1-1.9z'/></svg>") center / contain no-repeat; }
@media (hover: hover) {
  .pt-aura-box:hover { box-shadow: 0 0 30px rgba(125, 211, 252, .7), 0 0 68px rgba(52, 211, 153, .26), 0 18px 34px -22px rgba(18, 50, 74, .6); }
  .pt-aura-box:hover .pt-aura-box-go { background: linear-gradient(135deg, #163F62, #1C5A8A); }
  .pt-aura-orb:hover .pt-aura-orb-body { transform: scale(1.06); }
  .pt-aura-chips button:hover { background: #EAF5FD; box-shadow: 0 0 0 1.5px #7DD3FC, 0 12px 26px -18px rgba(28, 123, 190, .7); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .pt-aura-box { animation: pt-ring 4s linear infinite; }
  html:not(.no-anim) .pt-aura-orb-body::before { animation: pt-spin 12s linear infinite; }
  html:not(.no-anim) .pt-aura-orb::before { animation: pt-breathe 4s ease-in-out infinite; }
  html:not(.no-anim) .pt-aura-twinkle { animation: pt-twinkle 3.2s ease-in-out infinite; }
  html:not(.no-anim) .pt-aura-twinkle-2 { animation-delay: 1.6s; }
  @keyframes pt-ring { to { --pt-a: 360deg; } }
  @keyframes pt-spin { to { transform: rotate(360deg); } }
  @keyframes pt-breathe { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
  @keyframes pt-twinkle { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
}
@media (max-width: 700px) {
  .pt-aura-card { grid-template-columns: minmax(0, 1fr); padding: 32px 20px 24px; }
  .pt-aura-orb { width: 72px; height: 72px; margin-bottom: 18px; }
  .pt-aura-orb-mic { width: 34px; height: 34px; }
  .pt-aura-orb-mic svg { width: 17px; height: 17px; }
  .pt-aura-sub { font-size: 18px; }
  .pt-aura-box { min-height: 64px; padding-left: 16px; gap: 10px; }
  .pt-aura-box-txt { font-size: 16px; }
  .pt-aura-box-go { min-height: 44px; padding: 0 18px; }
  .pt-aura-chips button { flex: 1 1 auto; }
}
.pt-aura-chips button, .pt-aura-box-go { font-size: var(--card-btn); }
@media (min-width: 1024px) {
  .pt-aura-chips { flex-wrap: nowrap; }
  .pt-aura-chips button { flex: 1 1 auto; white-space: nowrap; }
}

/* ---------- Pie de Auto: el mismo espacio que respeta el resto de los bloques ---------- */
.footer:not(.ft) { margin-top: var(--bloque); }

/* 2026-11-07: la esfera de AURA con sus órbitas. Tres anillos que salen de la esfera sin parar, como en el modo voz */
.pt-aura-orb { margin-bottom: 30px; }
.pt-aura-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(91, 180, 240, .8); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .pt-aura-ring { animation: pt-orbita 3.6s cubic-bezier(.4, 0, .2, 1) infinite; }
  html:not(.no-anim) .pt-aura-ring-2 { animation-delay: 1.2s; }
  html:not(.no-anim) .pt-aura-ring-3 { animation-delay: 2.4s; }
  @keyframes pt-orbita { 0% { transform: scale(1); opacity: .85; } 90%, 100% { transform: scale(1.6); opacity: 0; } }
}