/* ==========================================================
   PC Fighter — estilos
   Paleta tomada del manual de marca (violeta #4310A2 + magenta
   + azul) y del cian de los fondos de líneas.
   ========================================================== */

@font-face {
  font-family: "Jersey Sharp";
  /* Versión con tildes, Ñ, Ü, ¿ ¡ y · agregadas con la geometría de la fuente original */
  src: url("../fonts/jersey-sharp-es.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Alien Encounters";
  src: url("../fonts/alien-encounters-italic.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* Marca */
  --violeta: #4310a2;
  --violeta-claro: #7b4ee0;
  --magenta: #9b3592;
  --azul: #5866e0;
  --cian: #3fd8f0;

  /* Superficies */
  --fondo: #0a0820;
  --fondo-alterno: #110c2e;
  --superficie: #18123d;
  --borde: #2d2462;

  /* Texto */
  --texto: #eeebfa;
  --texto-suave: #aaa4c9;

  --degradado: linear-gradient(100deg, var(--violeta-claro), var(--magenta) 55%, var(--azul));

  --fuente-titulo: "Jersey Sharp", "Saira Semi Condensed", sans-serif;
  --fuente-display: "Alien Encounters", "Jersey Sharp", sans-serif;
  --fuente-texto: "Saira Semi Condensed", system-ui, sans-serif;

  --radio: 10px;
  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1.075rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: .02em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); text-transform: uppercase; }
h3 { font-size: 1.35rem; text-transform: uppercase; }
p { margin: 0; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }

.icono {
  width: 1.5em; height: 1.5em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* El logo es negro sobre blanco: invertido + screen queda blanco sobre oscuro */
.logo-oscuro { filter: invert(1); mix-blend-mode: screen; }

.sobretitulo {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .95rem;
  color: var(--cian);
  margin-bottom: .75rem;
}
.acento {
  background: var(--degradado);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.display {
  display: block;
  font-family: var(--fuente-display);
  text-transform: uppercase;
  background: linear-gradient(180deg, #b48cff, var(--violeta-claro) 45%, var(--magenta));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
  /* La fuente es cursiva y la última letra sobresale de su caja: sin este margen
     el degradado (que se pinta solo dentro de la caja) le corta la punta.
     El margen negativo compensa, para que el texto no se corra de lugar */
  padding-right: .35em;
  margin-right: -.35em;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border: 0; border-radius: var(--radio);
  background: var(--degradado);
  color: #fff;
  font: 600 1rem var(--fuente-texto);
  text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 8px 28px -10px var(--magenta);
  transition: transform .2s, box-shadow .2s;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -8px var(--magenta); }
.boton:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cian); outline-offset: 3px;
}
.boton--chico { padding: .55rem 1.1rem; font-size: .9rem; }
.boton--ancho { width: 100%; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgb(10 8 32 / .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.marca img { height: 52px; width: auto; }
.menu { display: flex; align-items: center; gap: 1.75rem; }
.menu a:not(.boton) {
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .95rem;
  color: var(--texto-suave); transition: color .2s;
}
.menu a:not(.boton):hover, .menu a[aria-current="page"] { color: var(--texto); }
.menu a[aria-current="page"] { box-shadow: inset 0 -2px var(--magenta); }
.menu-toggle { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem); }
.hero__fondo {
  position: absolute; inset: 0;
  background: url("../img/fondo-lineas.jpg") center top / cover no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
}
.hero__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 60%, rgb(10 8 32 / .9), transparent 70%);
}
.hero__contenido { position: relative; max-width: 860px; margin-left: max(16px, (100% - var(--ancho)) / 2); }
.hero__titulo { margin-bottom: 1.5rem; }
.hero__chico { display: block; font-size: clamp(1.6rem, 4vw, 2.6rem); text-transform: uppercase; }
.hero__titulo .display { font-size: clamp(3.2rem, 11vw, 7.5rem); }
.hero__bajada { font-size: 1.2rem; color: var(--texto-suave); max-width: 620px; margin-bottom: 2.25rem; }
.hero--pagina { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.hero--pagina .hero__titulo .display { font-size: clamp(2.8rem, 9vw, 6rem); }

/* ---------- Portada: elegí tu esquina ---------- */
.ring { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); min-height: calc(100vh - 72px); display: grid; align-content: center; gap: clamp(2rem, 4vw, 3rem); }
.ring__fondo {
  position: absolute; inset: 0;
  background: url("../img/fondo-lineas.jpg") center top / cover no-repeat;
  opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 85%);
}
.ring__titulo { position: relative; text-align: center; }
.ring__titulo h1 { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .9rem; margin-bottom: 1rem; }
.ring__titulo .display { display: inline-block; font-size: clamp(2.6rem, 8vw, 5.5rem); }
.ring__bajada { color: var(--texto-suave); font-size: 1.15rem; max-width: 640px; margin-inline: auto; }
.ring__bajada strong { color: var(--texto); }

.esquinas {
  position: relative;
  width: min(var(--ancho), 100% - 32px); margin-inline: auto;
  display: flex; gap: 1.25rem; align-items: stretch;
}
.esquina {
  --tono: var(--magenta);
  --tono-2: var(--violeta);
  position: relative; flex: 1 1 0; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: clamp(320px, 46vh, 460px);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--borde); border-radius: 18px;
  background: var(--superficie);
  transition: flex-grow .45s ease, border-color .3s, transform .3s, opacity .3s;
}
.esquina--empresa { --tono: var(--cian); --tono-2: var(--azul); align-items: flex-end; text-align: right; }
.esquina::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at var(--x, 15%) 110%, color-mix(in srgb, var(--tono) 55%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--tono-2) 35%, transparent), transparent 60%);
  opacity: .7; transition: opacity .35s;
}
.esquina--empresa::before { --x: 85%; }
.esquina::after { /* esquinero del ring */
  content: ""; position: absolute; top: 18px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--tono); box-shadow: 0 0 18px var(--tono);
}
.esquina--hogar::after { left: 18px; }
.esquina--empresa::after { right: 18px; }
.esquina__etiqueta { font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: var(--tono); margin: 0 1.5rem 1.5rem; }
.esquina__icono { width: 3.2rem; height: 3.2rem; color: var(--tono); margin-bottom: auto; }
.esquina__nombre { font-size: clamp(3rem, 8vw, 5.5rem); margin: 1.5rem 0 .75rem; }
.esquina--empresa .esquina__nombre { background-image: linear-gradient(180deg, #b9f4ff, var(--cian) 45%, var(--azul)); }
.esquina__lista { color: var(--texto-suave); font-size: 1.05rem; max-width: 30ch; margin-bottom: 1.5rem; }
.esquina__entrar { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tono); }
.esquina__entrar .icono { transition: transform .25s; }

.esquina:hover, .esquina:focus-visible { flex-grow: 1.3; border-color: var(--tono); }
.esquina:hover::before, .esquina:focus-visible::before { opacity: 1; }
.esquina:hover .esquina__entrar .icono { transform: translateX(6px); }
.esquinas:has(.esquina:hover) .esquina:not(:hover) { opacity: .55; }

.esquinas__vs {
  position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--fondo); border: 1px solid var(--borde);
  color: var(--texto); pointer-events: none;
  font-family: var(--fuente-display); font-size: 1.35rem;
}

.esquina.llamando { animation: llamar 1s ease-in-out 2; border-color: var(--tono); }
@keyframes llamar {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 55%, transparent), 0 0 40px color-mix(in srgb, var(--tono) 45%, transparent); transform: translateY(-4px); }
}

/* ---------- Cartel "Seleccioná tu esquina" ---------- */
.modal {
  width: min(560px, 100% - 32px); max-height: calc(100% - 32px);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7), 0 0 60px -20px var(--violeta-claro);
  text-align: center;
}
.modal::backdrop { background: rgb(6 4 20 / .75); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-entra .25s ease-out; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.modal h2 { margin-bottom: .6rem; font-size: clamp(1.9rem, 6vw, 2.6rem); }
.modal__bajada { color: var(--texto-suave); margin-bottom: 1.75rem; }
.modal__cerrar {
  position: absolute; top: .9rem; right: .9rem;
  display: grid; place-items: center; width: 40px; height: 40px;
  background: none; border: 1px solid var(--borde); border-radius: 50%;
  color: var(--texto-suave); cursor: pointer; transition: color .2s, border-color .2s;
}
.modal__cerrar:hover { color: var(--texto); border-color: var(--texto-suave); }
.modal__cerrar .icono { width: 18px; height: 18px; }
.modal__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal__opcion {
  --tono: var(--magenta);
  display: grid; justify-items: center; gap: .35rem;
  padding: 1.5rem 1rem;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.modal__opcion--empresa { --tono: var(--cian); }
.modal__opcion .icono { width: 2.6rem; height: 2.6rem; color: var(--tono); margin-bottom: .25rem; }
.modal__opcion strong { font-family: var(--fuente-titulo); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; }
.modal__opcion small { color: var(--texto-suave); font-size: .95rem; }
.modal__opcion:hover, .modal__opcion:focus-visible {
  border-color: var(--tono); transform: translateY(-3px);
  box-shadow: 0 0 30px -8px var(--tono);
}

/* ---------- Seguimiento de servicio ---------- */
.seguimiento .hero__contenido { max-width: 640px; }
.seguimiento__form { position: relative; margin-top: .5rem; }
.seguimiento__pronto {
  position: absolute; top: -.8rem; right: 1.25rem;
  padding: .2rem .8rem; border-radius: 999px;
  background: var(--degradado); color: #fff;
  font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem;
}
.seguimiento__aviso { color: var(--texto-suave); font-size: .98rem; }
.campo input:disabled { opacity: .55; cursor: not-allowed; }
/* "Muy pronto" o el aviso del comprobante, según si el seguimiento está conectado */
.seguimiento__form[data-estado="activo"] [data-solo="pronto"],
.seguimiento__form:not([data-estado="activo"]) [data-solo="activo"] { display: none; }

/* Resultado de la consulta: el trabajo en sus rounds */
.ticket {
  --tono: var(--violeta-claro);
  position: relative; margin-top: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: 0 0 60px -30px var(--tono);
}
.ticket:focus { outline: none; }
.ticket::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--degradado); border-radius: 14px 14px 0 0;
}
.ticket[data-etapa="listo"] { --tono: var(--cian); }
.ticket[data-etapa="cancelado"] { --tono: var(--texto-suave); }
/* El número en Saira: en Jersey Sharp el 0 se lee como una D */
.ticket__numero { font-family: var(--fuente-texto); font-weight: 600; }
.ticket__titulo { font-size: clamp(2rem, 6vw, 2.8rem); text-transform: uppercase; color: var(--tono); margin-bottom: .5rem; }
.ticket__equipo { color: var(--texto-suave); }
.ticket__rounds { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.ticket__rounds li {
  padding: .75rem .9rem; border-radius: var(--radio);
  border: 1px solid var(--borde); color: var(--texto-suave);
  display: grid; gap: .15rem; font-size: .95rem;
}
.ticket__round { font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.ticket__rounds li.hecho { border-color: var(--magenta); color: var(--texto); background: rgb(155 53 146 / .15); }
.ticket__rounds li[aria-current="step"] { border-color: var(--tono); box-shadow: 0 0 22px -6px var(--tono); background: rgb(123 78 224 / .22); }
.ticket__rounds li.hecho .ticket__round { color: var(--cian); }
.ticket__datos { display: grid; gap: .6rem; margin: 0 0 1.5rem; }
.ticket__dato { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borde); }
.ticket__dato dt { color: var(--texto-suave); }
.ticket__dato dd { margin: 0; }
.ticket__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.seccion--alterna { background: var(--fondo-alterno); border-block: 1px solid var(--borde); }
.encabezado { text-align: center; max-width: 720px; margin: 0 auto 3rem; }

.oferta, .motivo {
  position: relative;
  padding: 1.75rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio);
  transition: border-color .25s, transform .25s;
}
.oferta::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--degradado); border-radius: var(--radio) var(--radio) 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.oferta:hover { border-color: var(--violeta-claro); transform: translateY(-4px); }
.oferta:hover::before { transform: scaleX(1); }
.oferta .icono, .motivo .icono { width: 2.4rem; height: 2.4rem; color: var(--cian); margin-bottom: 1rem; }
.oferta h3, .motivo h3 { margin-bottom: .5rem; }
.oferta p, .motivo p { color: var(--texto-suave); font-size: 1rem; }

/* Ofertas (páginas hogar / empresa) */
.ofertas-grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.motivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.motivo { background: transparent; text-align: center; }
.motivo .icono { margin-inline: auto; }

/* Nosotros */
.nosotros { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.nosotros__imagen {
  border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--violeta), var(--fondo) 75%);
  border: 1px solid var(--borde);
}
.nosotros__texto h2 { margin-bottom: 1.25rem; }
.nosotros__texto > p { color: var(--texto-suave); margin-bottom: 1.5rem; }
.valores { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.valores li { display: flex; align-items: center; gap: .75rem; font-weight: 500; }
.valores .icono { color: var(--cian); width: 1.3em; height: 1.3em; }

/* Proceso en rounds */
.rounds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: r; }
.rounds li { padding: 1.75rem 1.5rem; border-left: 2px solid var(--borde); position: relative; }
.rounds li::before {
  content: ""; position: absolute; left: -7px; top: 1.9rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--magenta); box-shadow: 0 0 0 4px rgb(155 53 146 / .25);
}
.rounds__num { font-family: var(--fuente-display); font-size: .9rem; color: var(--violeta-claro); text-transform: uppercase; display: block; margin-bottom: .5rem; }
.rounds h3 { margin-bottom: .5rem; }
.rounds p { color: var(--texto-suave); font-size: 1rem; }

/* Cruce hogar ↔ empresa */
.cruce { border-block: 1px solid var(--borde); background: var(--fondo-alterno); }
.cruce__fila { display: flex; justify-content: center; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1.75rem 0; font-size: 1.15rem; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; color: var(--cian); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.enlace-flecha:hover .icono { transform: translateX(4px); }
.enlace-flecha .icono { transition: transform .2s; }

/* Contacto */
.contacto { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contacto__info h2 { margin-bottom: 1rem; }
.contacto__info > p { color: var(--texto-suave); margin-bottom: 2rem; }
.datos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.datos li { display: flex; align-items: center; gap: .9rem; }
.datos .icono { color: var(--cian); }

.formulario {
  display: grid; gap: 1.1rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
}
.segmento { border: 0; padding: 0; margin: 0; display: flex; gap: .75rem; flex-wrap: wrap; }
.segmento legend { width: 100%; margin-bottom: .5rem; font-weight: 600; }
.segmento label {
  flex: 1; min-width: 120px; text-align: center; cursor: pointer;
  padding: .7rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio);
  transition: border-color .2s, background .2s;
}
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento label:has(input:checked) { border-color: var(--magenta); background: rgb(155 53 146 / .18); }
.segmento label:has(input:focus-visible) { outline: 2px solid var(--cian); outline-offset: 2px; }
.campo { display: grid; gap: .4rem; font-weight: 500; }
.campo[hidden] { display: none; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .75rem .9rem;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
  font: inherit; font-weight: 400;
}
.campo textarea { resize: vertical; }
.campos-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.campo small { color: var(--texto-suave); font-weight: 400; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__estado { padding: .75rem 1rem; border-radius: 8px; font-size: .98rem; }
.formulario__estado.ok { background: rgb(63 216 240 / .12); border: 1px solid rgb(63 216 240 / .4); color: var(--cian); }
.formulario__estado.error { background: rgb(255 120 160 / .1); border: 1px solid rgb(255 120 160 / .4); color: #ff9dbb; }
.formulario__botones { display: grid; grid-template-columns: 1.4fr 1fr; gap: .75rem; }
.boton--secundario { white-space: nowrap; background: transparent; border: 1px solid var(--borde); box-shadow: none; }
.boton--secundario:hover { border-color: var(--cian); box-shadow: none; }
.boton[disabled] { opacity: .6; cursor: wait; transform: none; }

/* Pie */
.pie { border-top: 1px solid var(--borde); padding: 2.5rem 0; text-align: center; color: var(--texto-suave); }
.pie__fila { display: grid; justify-items: center; gap: .75rem; }
.pie__logo { width: 160px; }
.pie__copy { font-size: .9rem; }

/* Aparición al hacer scroll */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.revelar.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rounds { grid-template-columns: repeat(2, 1fr); }
  .nosotros, .contacto { grid-template-columns: 1fr; }
  .nosotros__imagen { max-width: 360px; }
}
@media (max-width: 780px) {
  .menu-toggle {
    display: grid; gap: 5px; padding: 10px;
    background: none; border: 1px solid var(--borde); border-radius: 8px; cursor: pointer;
  }
  .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--texto); transition: transform .25s, opacity .25s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 16px 1.25rem;
    background: var(--fondo); border-bottom: 1px solid var(--borde);
    display: none;
  }
  .menu.abierto { display: flex; }
  .menu a:not(.boton) { padding: .9rem 0; border-bottom: 1px solid var(--borde); }
  .menu a[aria-current="page"] { box-shadow: none; color: var(--cian); }
  .menu .boton { margin-top: 1rem; }
  .ring { min-height: 0; }
  .esquinas { flex-direction: column; }
  .esquina { flex: none; min-height: 0; }
  .esquina__nombre { margin-top: 1rem; }
  .esquina:hover, .esquina:focus-visible { flex-grow: 1; }
  .esquinas:has(.esquina:hover) .esquina:not(:hover) { opacity: 1; }
  .esquina__icono { margin-bottom: 0; }
  .campos-dobles, .formulario__botones { grid-template-columns: 1fr; }
  .ticket__rounds { grid-template-columns: 1fr 1fr; }
  .ticket__dato { grid-template-columns: 1fr; gap: .15rem; }
  .modal__opciones { grid-template-columns: 1fr; }
  .rounds { grid-template-columns: 1fr; }
  .ofertas-grilla { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .revelar { opacity: 1; transform: none; }
  .esquina.llamando, .modal[open] { animation: none; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }