/* ==========================================================
   BATAI ANDES F.C. · Concepto "Noche de estadio"
   ========================================================== */
:root {
  --negro: #0B0810;
  --noche: #120D19;
  --noche-2: #1A1323;
  --panel: #1E1629;
  --panel-2: #2A1F38;
  --morado: #4F2877;
  --morado-2: #6C3AA6;
  --lila: #C2A6F0;
  --dorado: #F5A623;
  --dorado-2: #FFC629;
  --magenta: #E0197D;
  --rosa: #FF4FA3;
  --nieve: #F7F3FB;
  --gris: #B4AAC2;
  --error: #FF8595;
  --ok: #86DDAB;
  --display: 'Barlow Condensed', 'TeX Gyre Heros Cn', 'Arial Narrow', sans-serif;
  --texto: 'Barlow', 'Poppins', 'Segoe UI', Roboto, sans-serif;
  --ancho: 76rem;
  --r: 14px;
  --barra-movil: 0px;
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--negro); color: var(--nieve);
  font-family: var(--texto); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; padding-bottom: var(--barra-movil);
}
img { max-width: 100%; display: block; }
a { color: var(--lila); text-underline-offset: 3px; }
a:hover { color: var(--nieve); }
:focus-visible { outline: 3px solid var(--dorado-2); outline-offset: 3px; border-radius: 6px; }
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

/* Textura de grano sobre superficies oscuras */
.grano { position: relative; isolation: isolate; }
.grano::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grano); opacity: .07; mix-blend-mode: overlay;
}
.grano > * { position: relative; z-index: 1; }

/* ---------- Tipografía ---------- */
.titulo {
  font-family: var(--display); font-weight: 800; font-style: italic;
  text-transform: uppercase; line-height: .88; letter-spacing: -.005em; margin: 0 0 1rem;
}
h2.titulo { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
.firma {
  font-family: var(--display); font-weight: 700; font-style: italic; text-transform: uppercase;
  letter-spacing: .14em; font-size: 1rem; color: var(--dorado); margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.firma::before, .firma::after { content: "★"; font-size: .8em; }
.bajada { color: var(--gris); max-width: 40rem; margin: 0 0 2.2rem; font-size: 1.12rem; }

/* ---------- Trazo de pincel ---------- */
.pincel { position: relative; display: inline-block; white-space: nowrap; padding: .06em .35em .02em .2em; margin-left: -.2em; color: var(--negro); z-index: 0; }
.pincel > svg { position: absolute; inset: -12% -6% -14% -4%; width: 110%; height: 126%; z-index: -1; }
.pincel.rosa { color: #fff; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.35rem;
  text-transform: uppercase; letter-spacing: .03em; min-height: 3.3rem; padding: .7rem 1.9rem;
  border-radius: 6px; border: 2px solid transparent; text-decoration: none; cursor: pointer;
  transform: skewX(-8deg); transition: transform .15s ease, background-color .15s ease, box-shadow .2s ease;
}
.boton > * { transform: skewX(8deg); }
.boton svg { width: 1.3em; height: 1.3em; flex: none; }
.boton:active { transform: skewX(-8deg) scale(.97); }
.boton-dorado { background: var(--dorado); color: var(--negro); box-shadow: 0 10px 30px -10px rgba(245, 166, 35, .8); }
.boton-dorado:hover { background: var(--dorado-2); color: var(--negro); box-shadow: 0 14px 40px -10px rgba(245, 166, 35, 1); }
.boton-linea { border-color: rgba(247, 243, 251, .6); color: var(--nieve); background: rgba(11, 8, 16, .35); }
.boton-linea:hover { background: var(--nieve); color: var(--negro); }
.boton-verde { background: #1FAF5B; color: #fff; }
.boton-verde:hover { background: #25C466; color: #fff; }
.boton-rosa { background: var(--magenta); color: #fff; }
.boton-rosa:hover { background: #FF2E93; color: #fff; }
.boton[disabled] { opacity: .6; cursor: progress; }

/* ---------- Barra superior ---------- */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 30; border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s; }
.barra.solida { background: rgba(11, 8, 16, .9); backdrop-filter: blur(14px); border-color: rgba(194, 166, 240, .12); }
.barra .contenedor { display: flex; align-items: center; gap: 1.8rem; height: 4.6rem; }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--nieve); }
.marca img { width: 2.7rem; height: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.marca span { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.5rem; text-transform: uppercase; white-space: nowrap; letter-spacing: .01em; }
.menu { display: flex; gap: 1.7rem; margin-left: auto; }
.menu a { color: var(--nieve); text-decoration: none; font-family: var(--display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.12rem; letter-spacing: .04em; opacity: .82; }
.menu a:hover { opacity: 1; color: var(--dorado-2); }
.barra .boton { min-height: 2.6rem; padding: .35rem 1.2rem; font-size: 1.1rem; }

/* ---------- Portada: noche de estadio ---------- */
.portada {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100svh, 50rem); display: flex; align-items: flex-end;
  background:
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(26, 72, 46, .55), transparent 70%),
    radial-gradient(ellipse 70% 60% at 80% 35%, rgba(108, 58, 166, .45), transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(79, 40, 119, .5), transparent 60%),
    linear-gradient(180deg, #07050B 0%, #140C22 45%, #0E1410 100%);
}
.reflector { position: absolute; top: 5.2rem; width: 17rem; height: 7rem; z-index: -1; opacity: .85; }
.reflector.izq { left: -3rem; }
.reflector.der { right: -3rem; }
.reflector .luces {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, #fff 0 16%, rgba(255, 255, 255, .5) 24%, transparent 52%);
  background-size: 2rem 2rem; filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 26px rgba(210, 190, 255, .9));
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 75%);
          mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 75%);
}
.haz {
  position: absolute; top: 8rem; width: 55vw; height: 120%; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(225, 210, 255, .28), rgba(225, 210, 255, 0) 75%);
  filter: blur(24px); opacity: .8;
}
.haz.izq { left: 0; clip-path: polygon(8% 0, 22% 0, 100% 100%, 40% 100%); }
.haz.der { right: 0; clip-path: polygon(78% 0, 92% 0, 60% 100%, 0 100%); }
.cancha { position: absolute; inset: auto 0 0 0; width: 100%; height: 46%; z-index: -1; opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%); }
.portada::after { /* grano fotográfico */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grano); opacity: .09; mix-blend-mode: overlay;
}
.portada-contenido {
  position: relative; z-index: 2; width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; padding-top: 7rem;
}
.portada-texto { padding-bottom: clamp(4rem, 9vh, 6rem); }
.portada h1 { font-size: clamp(3.4rem, 8vw, 7.4rem); margin: 0 0 1.4rem; text-shadow: 0 6px 40px rgba(0, 0, 0, .55); }
.portada h1 .linea { display: block; }
.portada p.intro { font-size: clamp(1.1rem, 1.5vw, 1.25rem); max-width: 32rem; margin: 0 0 2.2rem; color: #E9E1F2; }
.acciones { display: flex; flex-wrap: wrap; gap: 1rem; }
.mascota { position: relative; align-self: end; }
.mascota::before {
  content: ""; position: absolute; left: 50%; bottom: 8%; width: 90%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(245, 166, 35, .45), rgba(108, 58, 166, .25) 45%, transparent 70%);
  filter: blur(10px); z-index: -1;
}
.mascota img {
  width: auto; max-width: 100%; max-height: min(68svh, 38rem); margin-left: auto;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.4)) drop-shadow(-12px 0 30px rgba(108, 58, 166, .55)) drop-shadow(14px 0 30px rgba(245, 166, 35, .35)) drop-shadow(0 30px 40px rgba(0,0,0,.6));
  animation: entra 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes entra { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }

/* Franja diagonal de lemas */
.franja {
  position: relative; z-index: 5; margin-top: -2.2rem; transform: rotate(-2deg); overflow: hidden;
  background: var(--dorado); color: var(--negro); box-shadow: 0 16px 40px -12px rgba(0,0,0,.8);
}
.franja p {
  margin: 0; padding: .65rem 0; white-space: nowrap; font-family: var(--display); font-weight: 800; font-style: italic;
  text-transform: uppercase; font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: .04em;
}
.franja span { margin: 0 1.1rem; }
.franja .estrella { color: var(--morado); }

/* ---------- Hoy en la cancha ---------- */
.hoy { background: var(--noche); padding: clamp(4.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); }
.hoy-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 2rem; margin-bottom: 1.6rem; }
.hoy-cabeza h2 { margin: 0; }
.hoy-fecha { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.6rem; margin: 0; color: var(--dorado-2); text-transform: uppercase; letter-spacing: .03em; }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.turno {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: linear-gradient(135deg, var(--panel-2), var(--panel) 60%);
  border: 1px solid rgba(194, 166, 240, .12);
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.2rem; align-items: center; padding: 1.1rem 1.3rem 1.1rem 1.5rem;
}
.turno::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--color, var(--dorado)); }
.turno .hora { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 2.6rem; line-height: .9; margin: 0; letter-spacing: -.01em; }
.turno .hora small { display: block; font-size: 1rem; color: var(--dorado); font-weight: 700; letter-spacing: .04em; margin-top: .2rem; }
.turno .quien { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; margin: 0 0 .35rem; }
.turno .donde { color: var(--gris); font-size: .98rem; display: flex; align-items: center; gap: .35rem; margin: 0; }
.turno .fin { color: var(--gris); font-size: .9rem; margin: .1rem 0 0; }
.turno.pasado { opacity: .5; }
.icono { width: 1.05rem; height: 1.05rem; color: var(--dorado); flex: none; }
.etiqueta {
  display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle;
  font-family: var(--texto); font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: 4px; margin-left: .4rem;
}
.en-curso { background: #E8233F; color: #fff; }
.en-curso::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #fff; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .2; } }
.terminado { background: var(--panel-2); color: var(--gris); }
.es-hoy-tag { background: var(--dorado); color: var(--negro); }
.vacio { background: var(--panel); border-radius: var(--r); padding: 1.3rem 1.5rem; color: var(--gris); margin: 0; border-left: 7px solid var(--morado-2); }
.vacio strong { color: var(--nieve); }
.estado { color: var(--gris); margin: 0; }
.estado.error { color: var(--error); }

/* ---------- La semana (estilo de las piezas del club) ---------- */
.seccion { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.fondo-2 { background: var(--noche-2); }
.selector { display: flex; gap: .6rem; overflow-x: auto; padding: .3rem .1rem 1rem; margin: 0 0 1.2rem; scrollbar-width: thin; }
.chip {
  flex: none; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--nieve); background: var(--panel); border: 2px solid rgba(194, 166, 240, .18); border-radius: 6px;
  padding: .55rem 1.1rem; cursor: pointer; min-height: 3rem; display: inline-flex; align-items: center; gap: .55rem;
  transform: skewX(-8deg); transition: background-color .15s, border-color .15s;
}
.chip span { transform: skewX(8deg); display: inline-flex; align-items: center; gap: .55rem; }
.chip span::before { content: ""; width: .75rem; height: .75rem; border-radius: 2px; background: var(--color); }
.chip:hover { border-color: var(--color); }
.chip[aria-pressed="true"] { background: var(--color); border-color: var(--color); color: #fff; box-shadow: 0 10px 26px -10px var(--color); }
.chip[aria-pressed="true"] span::before { background: #fff; }

.semana { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .9rem; }
.dia {
  border-radius: var(--r); overflow: hidden; background: #0F0B15;
  border: 1.5px solid color-mix(in srgb, var(--color) 70%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 20px 40px -24px var(--color);
  display: flex; flex-direction: column;
}
.dia-cabeza {
  display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color) 55%, #1a1224), color-mix(in srgb, var(--color) 25%, #1a1224));
  font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.7rem; line-height: 1;
}
.dia-cabeza svg { width: 1.6rem; height: 1.6rem; color: var(--dorado); flex: none; }
.dia-cuerpo { padding: .9rem 1rem 1.1rem; display: grid; gap: .5rem; }
.dia .sede { display: flex; align-items: center; gap: .45rem; margin: 0; padding-bottom: .6rem; border-bottom: 1.5px solid color-mix(in srgb, var(--color) 60%, transparent);
  font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; }
.dia .sede .icono { width: 1.3rem; height: 1.3rem; }
.dia .reloj { display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem; align-items: center; margin: 0; }
.dia .reloj svg { width: 2rem; height: 2rem; color: var(--color); grid-row: span 2; filter: brightness(1.4); }
.dia .reloj span { font-family: var(--display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: .95rem; color: var(--gris); letter-spacing: .06em; }
.dia .reloj strong { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.55rem; line-height: 1; color: var(--dorado-2); }
.dia .junto { margin: .2rem 0 0; font-size: .88rem; color: var(--gris); }
.dia.descanso { border-color: rgba(194, 166, 240, .1); box-shadow: none; background: var(--panel); opacity: .6; }
.dia.descanso .dia-cabeza { background: transparent; color: var(--gris); }
.dia.descanso .dia-cuerpo { padding-top: 0; color: var(--gris); font-size: .95rem; }
.dia.hoy-marca { outline: 2px solid var(--dorado); outline-offset: 3px; }
.nota { color: var(--gris); font-size: .95rem; margin: 1.6rem 0 0; }

/* ---------- Marcador ---------- */
.marcador { background: var(--negro); border-block: 1px solid rgba(194, 166, 240, .1); }
.marcador ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.marcador li { padding: 2rem 1rem; text-align: center; border-left: 1px solid rgba(194, 166, 240, .1); }
.marcador li:first-child { border-left: 0; }
.marcador strong { display: block; font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: .9; color: var(--dorado-2); }
.marcador span { font-family: var(--display); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-size: 1.05rem; }
@media (max-width: 700px) { .marcador ul { grid-template-columns: 1fr 1fr; } .marcador li:nth-child(3) { border-left: 0; } .marcador li:nth-child(n+3) { border-top: 1px solid rgba(194, 166, 240, .1); } }

/* ---------- El club ---------- */
.club {
  background:
    radial-gradient(ellipse 50% 70% at 85% 50%, rgba(245, 166, 35, .16), transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 0%, rgba(79, 40, 119, .45), transparent 60%),
    var(--noche);
}
.club-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.club p { max-width: 37rem; color: #E4DCEE; }
.escudo-grande { width: min(100%, 24rem); margin: 0 auto; filter: drop-shadow(0 0 60px rgba(245, 166, 35, .35)) drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.valores { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.valores li {
  font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.25rem;
  padding: .35rem 1rem; border: 2px solid var(--dorado); color: var(--dorado-2); transform: skewX(-8deg);
}
.categorias { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.categorias li { background: var(--panel-2); border-radius: 4px; padding: .3rem .8rem; font-weight: 600; font-size: .95rem; }
@media (max-width: 860px) { .club-grid { grid-template-columns: 1fr; } .escudo-grande { width: 14rem; order: -1; } }

/* ---------- Femenina ---------- */
.femenina {
  background:
    radial-gradient(ellipse 55% 70% at 90% 30%, rgba(224, 25, 125, .5), transparent 60%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(108, 58, 166, .4), transparent 60%),
    #150A16;
}
.femenina-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.femenina .titulo { font-size: clamp(3rem, 8vw, 6rem); }
.femenina .firma { color: var(--rosa); }
.femenina p { max-width: 34rem; color: #F2DDEB; font-size: 1.12rem; }
.mini-horario { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.mini-horario li {
  background: rgba(11, 8, 16, .65); border: 1.5px solid rgba(255, 79, 163, .45); border-radius: var(--r);
  display: grid; grid-template-columns: 8rem 1fr; align-items: center; overflow: hidden;
}
.mini-horario strong { align-self: stretch; display: flex; align-items: center; padding: .8rem 1rem; background: rgba(224, 25, 125, .35);
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.45rem; line-height: 1; }
.mini-horario div { padding: .75rem 1rem; }
.mini-horario span { display: block; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.35rem; color: var(--rosa); line-height: 1.05; }
.mini-horario em { font-style: normal; color: var(--gris); font-size: .95rem; display: flex; gap: .35rem; align-items: center; }
.mini-horario .icono { color: var(--rosa); }
@media (max-width: 860px) { .femenina-grid { grid-template-columns: 1fr; } }

/* ---------- Inscripción ---------- */
.pasos { list-style: none; counter-reset: paso; margin: 0 0 2.4rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.pasos li {
  counter-increment: paso; position: relative; overflow: hidden; border-radius: var(--r);
  background: linear-gradient(160deg, var(--panel-2), var(--panel)); padding: 5.6rem 1.3rem 1.4rem;
  border: 1px solid rgba(194, 166, 240, .1);
}
.pasos li::before {
  content: "0" counter(paso); position: absolute; top: -.2rem; right: .6rem;
  font-family: var(--display); font-weight: 800; font-style: italic; font-size: 4.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(245, 166, 35, .55);
}
.pasos li::after { content: ""; position: absolute; left: 1.3rem; top: 1.6rem; width: 2.2rem; height: 5px; background: var(--dorado); transform: skewX(-20deg); }
.pasos strong { display: block; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; margin-bottom: .45rem; }
.pasos span { color: var(--gris); font-size: .98rem; }
.incluye {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; border-radius: var(--r); padding: 1.6rem 1.8rem;
  background: linear-gradient(100deg, rgba(79, 40, 119, .55), rgba(30, 22, 41, .9)); border: 1px solid rgba(194, 166, 240, .16);
}
.incluye p { margin: 0; flex: 1 1 20rem; }
@media (max-width: 960px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .pasos { grid-template-columns: 1fr; } }

/* ---------- Preguntas ---------- */
.preguntas-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; }
.otra-duda { border-radius: var(--r); padding: 1.8rem; background: linear-gradient(150deg, rgba(79, 40, 119, .6), var(--panel)); border: 1px solid rgba(194, 166, 240, .18); position: sticky; top: 6rem; }
.otra-duda h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 2rem; line-height: 1; margin: 0 0 .7rem; }
.otra-duda p { color: var(--gris); margin: 0 0 1.4rem; }
@media (max-width: 860px) { .preguntas-grid { grid-template-columns: 1fr; } .otra-duda { position: static; } }
.preguntas { display: grid; gap: .6rem; max-width: 52rem; }
.preguntas details { background: var(--panel); border-radius: var(--r); border: 1px solid rgba(194, 166, 240, .1); }
.preguntas details[open] { border-color: rgba(245, 166, 35, .45); }
.preguntas summary { cursor: pointer; list-style: none; padding: 1.1rem 3.4rem 1.1rem 1.4rem; font-weight: 700; font-size: 1.08rem; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--dorado); line-height: 1; transition: transform .2s;
}
.preguntas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.preguntas details p { margin: 0; padding: 0 1.4rem 1.3rem; color: var(--gris); }

/* ---------- Pie ---------- */
.pie { background: var(--negro); padding: 3.8rem 0 2.2rem; color: var(--gris); font-size: .98rem; border-top: 4px solid var(--dorado); }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.pie .marca img { width: 3.8rem; }
.pie .lema { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; color: var(--dorado-2); font-size: 1.5rem; margin: .9rem 0 0; line-height: 1; }
.pie h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; color: var(--nieve); margin: 0 0 .7rem; font-size: 1.35rem; letter-spacing: .03em; }
.pie p { margin: 0 0 .45rem; }
.pie .legal { border-top: 1px solid rgba(194, 166, 240, .12); margin-top: 2.4rem; padding-top: 1.3rem; font-size: .9rem; }
@media (max-width: 760px) { .pie-grid { grid-template-columns: 1fr; } }

/* ---------- Celular ---------- */
.barra-movil { display: none; }
@media (max-width: 760px) {
  :root { --barra-movil: calc(4.5rem + env(safe-area-inset-bottom)); }
  .menu { display: none; }
  .barra .contenedor { height: 4rem; gap: 1rem; }
  .marca span { font-size: 1.25rem; }
  .marca img { width: 2.3rem; }
  .barra .boton { margin-left: auto; font-size: 1rem; padding: .3rem .9rem; }
  .portada { min-height: 0; }
  .portada-contenido { grid-template-columns: 1fr; padding-top: 5.8rem; }
  .portada-texto { padding-bottom: 1rem; }
  .portada .acciones .boton { flex: 1 1 auto; }
  .portada p.intro { font-size: 1.05rem; }
  .mascota img { width: 78%; max-height: none; margin: 0 auto; }
  .reflector { width: 12rem; height: 6rem; }
  .haz { width: 90vw; }
  .franja { margin-top: -1.2rem; }
  .barra-movil {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; inset: auto 0 0 0; z-index: 40;
    background: rgba(11, 8, 16, .96); backdrop-filter: blur(14px); border-top: 1px solid rgba(194, 166, 240, .16);
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
  }
  .barra-movil a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.6rem;
    border-radius: 8px; text-decoration: none; color: var(--nieve); font-family: var(--display); font-style: italic;
    font-weight: 800; text-transform: uppercase; font-size: .95rem; letter-spacing: .03em;
  }
  .barra-movil a svg { width: 1.45rem; height: 1.45rem; }
  .barra-movil a.principal { background: var(--dorado); color: var(--negro); margin: 0 .25rem; }
  .barra-movil a.whatsapp svg { color: #34D17A; }
}
@media (max-width: 380px) { .marca span { font-size: 1.05rem; } }
@media (max-width: 760px) { .reflector { top: 4.4rem; } }

/* ---------- Páginas de acceso ---------- */
.acceso {
  min-height: 100svh; display: grid; place-items: center; padding: 2rem 1.25rem; position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(26, 72, 46, .5), transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(108, 58, 166, .55), transparent 65%),
    linear-gradient(180deg, #07050B, #140C22 55%, #0E1410);
}
.acceso::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grano); opacity: .09; mix-blend-mode: overlay; }
.tarjeta {
  position: relative; z-index: 1; width: min(100%, 27rem); background: rgba(22, 16, 30, .9); backdrop-filter: blur(14px);
  border-radius: 18px; padding: 2.3rem 1.9rem 1.8rem; border: 1px solid rgba(194, 166, 240, .2); border-top: 4px solid var(--dorado);
  box-shadow: 0 40px 90px -25px rgba(0, 0, 0, .9);
}
.tarjeta .escudo { width: 6rem; margin: 0 auto 1rem; filter: drop-shadow(0 0 30px rgba(245, 166, 35, .35)); }
.tarjeta h1 { text-align: center; font-size: 3rem; }
.tarjeta .sub { text-align: center; color: var(--gris); margin: -.4rem 0 1.6rem; }
.campo { display: grid; gap: .35rem; margin-bottom: 1rem; }
.campo label { font-weight: 600; font-size: .95rem; }
.campo input { font: inherit; font-size: 1.05rem; color: var(--nieve); background: var(--negro); border: 2px solid var(--panel-2); border-radius: 10px; padding: .8rem .95rem; min-height: 3.1rem; width: 100%; }
.campo input:focus { border-color: var(--dorado); outline: none; }
.clave-caja { position: relative; }
.clave-caja input { padding-right: 5.5rem; }
.ver-clave { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--lila); font: 600 .9rem var(--texto); padding: .5rem .6rem; cursor: pointer; border-radius: 8px; }
.tarjeta .boton { width: 100%; margin-top: .4rem; }
.mensaje { min-height: 1.5rem; margin: .9rem 0 0; font-size: .95rem; text-align: center; }
.mensaje.error { color: var(--error); }
.mensaje.ok { color: var(--ok); }
.enlaces { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.3rem; font-size: .95rem; }
.enlaces button { background: none; border: 0; padding: 0; font: inherit; color: var(--lila); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.datos { background: var(--negro); border-radius: 12px; padding: 1rem 1.1rem; margin: 1rem 0 1.2rem; }
.datos p { margin: .25rem 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mascota img, .en-curso::before { animation: none; }
  .boton, .chip, .barra, .preguntas summary::after { transition: none; }
}