@font-face {
  font-family: "Archivo";
  src: url("/web/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root {
  --noche: #0E1217; --lima: #B7F652; --lima-hover: #D4FF8A; --lima-presionado: #9FDC3C;
  --gris: #F2F3F6; --texto2: #4B5260; --texto2-oscuro: #C9CFD8; --texto3-oscuro: #AEB5C0;
  --linea: #DDE0E5; --linea-oscura: #2A323D; --alerta: #C8372D;
  --f: "Archivo", system-ui, sans-serif;
  --lado: max(20px, (100% - 640px) / 2);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--noche); color: var(--noche); font-family: var(--f); -webkit-font-smoothing: antialiased; }
body.menu-abierto { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font-family: inherit; }
h1, h2, p { margin: 0; }
[id] { scroll-margin-top: 72px; }

/* --- Tipografía --- */
.ceja { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto2); }
.ceja.lima { color: var(--lima); }
.h2 { font-size: 44px; line-height: .9; font-weight: 900; font-stretch: 64%; text-transform: uppercase; text-wrap: balance; }
.etiqueta { align-self: flex-start; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; background: var(--noche); color: #fff; font-size: 12px; font-weight: 900; font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.etiqueta.alerta { background: var(--alerta); }
.etiqueta.lima { background: var(--lima); color: var(--noche); }

/* --- Botones: el principal es un paralelogramo dentro de otro (el foco no
   puede usar outline por el recorte: se ve el contenedor en blanco) --- */
.btn { --c: 14px; display: inline-flex; padding: 3px; text-decoration: none; outline: none; clip-path: polygon(calc(var(--c) + 2px) 0, 100% 0, calc(100% - var(--c) - 2px) 100%, 0 100%); }
.btn > span { flex: 1; height: 56px; padding: 0 36px; display: flex; align-items: center; justify-content: center; background: var(--lima); color: var(--noche); font-size: 18px; font-weight: 900; font-stretch: 72%; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(var(--c) 0, 100% 0, calc(100% - var(--c)) 100%, 0 100%); }
.btn:hover > span { background: var(--lima-hover); }
.btn:active > span { background: var(--lima-presionado); transform: translateY(1px); }
.btn:focus-visible { background: #fff; }
.btn.noche > span { background: var(--noche); color: var(--lima); }
.btn.noche:hover > span { background: #262E39; }
.btn.chico { --c: 10px; }
.btn.chico > span { height: 42px; padding: 0 16px; font-size: 13px; }
.btn.medio { --c: 12px; }
.btn.medio > span { height: 50px; padding: 0 18px; font-size: 16px; }
.btn.ancho { display: flex; }
.btn2 { height: 56px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; }
.btn2:hover { background: rgba(255,255,255,.12); }
.btn2:active { background: rgba(255,255,255,.2); }
.btn2:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
.btn-borde { height: 52px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--noche); border-radius: 12px; font-size: 16px; font-weight: 900; font-stretch: 72%; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.btn-borde:hover { background: var(--noche); color: #fff; }
.btn-borde:focus-visible { outline: 3px solid var(--noche); outline-offset: 3px; }

/* --- Encabezado y menú móvil --- */
.top { position: sticky; top: 0; z-index: 20; background: var(--noche); color: #fff; border-bottom: 1px solid var(--linea-oscura); }
.top-in { height: 64px; padding: 0 12px 0 16px; display: flex; align-items: center; gap: 8px; max-width: 1440px; margin: 0 auto; }
.top .logo img { height: 21px; width: auto; }
.top nav, .top .entrar { display: none; }
.top .acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid #3A4350; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.menu-btn[aria-expanded="true"] { border-color: var(--lima); }
.menu-btn:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.menu-btn .barras, .menu-btn .barras::before, .menu-btn .barras::after { width: 18px; height: 2px; background: #fff; display: block; position: relative; content: ""; }
.menu-btn .barras::before { position: absolute; top: -6px; }
.menu-btn .barras::after { position: absolute; top: 6px; }
.menu-btn[aria-expanded="true"] .barras { background: transparent; }
.menu-btn[aria-expanded="true"] .barras::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .barras::after { top: 0; transform: rotate(-45deg); }
.menu { position: fixed; inset: 64px 0 0; background: var(--noche); padding: 8px 20px 24px; display: flex; flex-direction: column; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu .item { min-height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--linea-oscura); color: #fff; text-decoration: none; font-size: 30px; font-weight: 900; font-stretch: 66%; text-transform: uppercase; }
.menu .item::after { content: "→"; font-size: 20px; color: var(--lima); }
.menu .panel { min-height: 56px; display: flex; align-items: center; font-size: 17px; font-weight: 700; }
.menu .pie-menu { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }

/* --- Secciones --- */
.sec { padding: 56px var(--lado); display: flex; flex-direction: column; gap: 22px; }
.sec.blanca { background: #fff; }
.sec.gris { background: var(--gris); }
.sec.noche { background: var(--noche); color: #fff; }

/* Hero */
.hero { background: var(--noche); color: #fff; overflow: hidden; }
.hero-txt { padding: 36px var(--lado) 0; display: flex; flex-direction: column; gap: 18px; }
.hero h1 { font-size: 52px; line-height: .88; font-weight: 900; font-stretch: 62%; text-transform: uppercase; text-wrap: balance; }
.hero h1 em, .og h1 em { font-style: normal; color: var(--lima); }
.hero p { font-size: 17px; line-height: 1.5; color: var(--texto2-oscuro); text-wrap: pretty; }
.hero .botones { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.hero .botones .btn { display: flex; }
.hero .nota { font-size: 14px; color: var(--texto3-oscuro); text-align: center; }
.escena { position: relative; width: 390px; max-width: 100%; height: 430px; margin: 28px auto 0; }
.banda { position: absolute; background: var(--lima); }
.hero .banda { left: 150px; top: 0; bottom: 0; width: 240px; clip-path: polygon(90px 0, 100% 0, 150px 100%, 0 100%); }
.hero .panel-mini { position: absolute; left: 110px; top: 24px; --s: .5; }
.hero .cel-hero { position: absolute; left: 24px; top: 64px; --s: .6; }

/* Escalado de las piezas de la escena (se dibujan a tamaño real y se achican) */
.escala { width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s)); overflow: hidden; }
.escala > * { transform: scale(var(--s)); transform-origin: 0 0; }
.cel { --w: 414px; --h: 869px; }
.cel > div { width: 414px; height: 869px; border-radius: 62px; background: var(--noche); padding: 12px; box-shadow: 0 0 0 1.5px #3A4350; }
.cel img { width: 390px; height: 845px; border-radius: 50px; object-fit: cover; }
.panel-mini { --w: 760px; --h: 540px; border-radius: 8px; }

/* Panel en miniatura (recreación de "Programación") */
.pm { width: 760px; height: 540px; border-radius: 16px; overflow: hidden; background: #F3F4F6; display: grid; grid-template-columns: 150px minmax(0, 1fr) 232px; color: var(--noche); box-shadow: 0 0 0 1.5px #3A4350; text-align: left; }
.pm-lat { background: #fff; border-right: 1px solid var(--linea); padding: 16px 10px; display: flex; flex-direction: column; gap: 14px; }
.pm-marca { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; font-weight: 900; font-stretch: 66%; letter-spacing: .02em; }
.pm-marca svg { width: 28px; height: 13px; }
.pm-club { display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: 10px; background: #EEF0F3; font-size: 11px; font-weight: 800; }
.pm-club small { display: block; font-size: 9.5px; font-weight: 400; color: var(--texto2); }
.pm-escudo { width: 26px; height: 26px; border-radius: 50%; background: #0D0F3C; box-shadow: inset 0 0 0 2.5px #2CD67D; color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 900; }
.pm-nav div { height: 28px; padding: 0 10px; display: flex; align-items: center; font-size: 11px; font-weight: 600; }
.pm-nav .activo { font-weight: 900; font-stretch: 75%; letter-spacing: .05em; text-transform: uppercase; background: var(--lima); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.pm-centro { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm-ceja { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto2); }
.pm-titulo { font-size: 28px; line-height: .9; font-weight: 900; font-stretch: 66%; text-transform: uppercase; }
.pm-tabla { background: #fff; border-radius: 12px; overflow: hidden; }
.pm-fila { display: grid; grid-template-columns: minmax(0, 1fr) 40px 74px 46px; gap: 6px; padding: 0 10px; height: 30px; align-items: center; border-top: 1px solid #EEF0F3; font-size: 11px; }
.pm-fila > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-fila.cab { height: auto; padding: 8px 10px; border-top: 0; border-bottom: 1px solid var(--linea); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto2); }
.pm-dia { padding: 7px 10px 3px; font-size: 11px; font-weight: 900; font-stretch: 70%; text-transform: uppercase; }
.pm-hora { font-size: 14px; font-weight: 850; font-stretch: 62%; font-variant-numeric: tabular-nums; }
.pm-sede { color: var(--texto2); }
.pm-ok { font-size: 10px; font-weight: 800; color: #2E7D4F; }
.pm-publicar { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--texto2); }
.pm-publicar span { height: 34px; padding: 0 18px; display: flex; align-items: center; background: var(--lima); color: var(--noche); font-size: 12px; font-weight: 900; font-stretch: 72%; letter-spacing: .06em; text-transform: uppercase; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.pm-der { background: #fff; border-left: 1px solid var(--linea); padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.wa { background: #E2F5D3; border-radius: 10px; padding: 10px; font-size: 10.5px; line-height: 1.45; }
.wa b { display: block; font-weight: 800; }
.wa .sep { height: 6px; }
.pm-copiar { height: 30px; border-radius: 8px; border: 1.5px solid var(--noche); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.pm-ig { display: grid; grid-template-columns: 52px 1fr; gap: 8px; margin-top: 4px; }
.pm-ig div { height: 92px; border-radius: 6px; background: #0D0F3C; position: relative; overflow: hidden; color: #fff; font-size: 15px; font-weight: 900; font-stretch: 62%; line-height: 1; padding: 8px 6px; }
.pm-ig .circulo::after { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #2CD67D; right: -24px; bottom: -20px; }
.pm-ig .franja { font-stretch: 66%; padding: 8px; }
.pm-ig .franja::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: #2CD67D; }

/* ¿Te suena? */
.escenas { display: flex; flex-direction: column; gap: 24px; }
.escena-txt { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--noche); padding-top: 16px; }
.escena-txt div:last-child { font-size: 32px; line-height: .95; font-weight: 900; font-stretch: 66%; text-transform: uppercase; text-wrap: balance; }
.remate { font-size: 19px; line-height: 1.45; font-weight: 600; padding-top: 8px; text-wrap: pretty; }
.remate b { font-weight: 900; }

/* Cómo funciona */
.sec.como { gap: 36px; }
.cabeza { display: flex; flex-direction: column; gap: 10px; }
.pasos { display: flex; flex-direction: column; gap: 40px; }
.paso { display: flex; flex-direction: column; gap: 14px; }
.paso-cab { display: flex; align-items: center; gap: 14px; }
.paso-n { flex: none; width: 64px; height: 64px; background: var(--lima); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); display: grid; place-items: center; font-size: 46px; line-height: 1; font-weight: 900; font-stretch: 62%; }
.paso-t { font-size: 30px; line-height: .92; font-weight: 900; font-stretch: 66%; text-transform: uppercase; text-wrap: balance; }
.paso p { font-size: 17px; line-height: 1.5; color: var(--texto2); text-wrap: pretty; }
.paso-ilu { margin-top: auto; background: var(--gris); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 214px; }
.archivo { height: 42px; background: #fff; border-radius: 10px; padding: 0 10px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.archivo i { font-style: normal; flex: none; height: 22px; width: 36px; display: grid; place-items: center; border: 1.5px solid var(--noche); border-radius: 5px; font-size: 10px; font-weight: 900; font-stretch: 75%; letter-spacing: .04em; }
.leidos { display: flex; align-items: center; gap: 8px; padding: 8px 2px 0; font-size: 15px; font-weight: 800; }
.leidos span { font-size: 14px; font-weight: 400; color: var(--texto2); }
.paso-ilu .wa { border-radius: 12px 12px 12px 4px; padding: 12px 14px; font-size: 14px; }
.paso-ilu .wa .sep { height: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.chips span { height: 30px; padding: 0 10px; display: flex; align-items: center; background: #fff; border-radius: 8px; font-size: 13px; font-weight: 700; }
.noti { background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.noti.tenue { opacity: .85; gap: 4px; }
.noti-cab { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--texto2); }
.noti-icono { width: 24px; height: 24px; border-radius: 6px; background: var(--noche); color: var(--lima); display: grid; place-items: center; }
.noti-icono svg { width: 17px; height: 8px; }
.noti-txt { font-size: 15px; line-height: 1.3; font-weight: 800; }
.noti.tenue .noti-txt { font-weight: 700; }
.noti-pie { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto2); }
.noti-pie .etiqueta { height: 22px; padding: 0 8px; font-size: 10px; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }

/* Familias */
.familias { padding-bottom: 0; overflow: hidden; }
.familias .h2 { color: #fff; }
.tiendas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tienda { height: 56px; border-radius: 12px; background: #fff; color: var(--noche); text-decoration: none; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; }
.tienda small { font-size: 11px; font-weight: 600; }
.tienda b { font-size: 19px; line-height: 1.05; font-weight: 800; }
.tienda:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
span.tienda { opacity: .55; }
.familias-txt { display: flex; flex-direction: column; gap: 22px; }
.buscar { display: flex; flex-direction: column; gap: 8px; }
.buscar label { font-size: 14px; font-weight: 800; }
.buscar-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.buscar input { height: 56px; border-radius: 12px; border: 0; padding: 0 16px; font-size: 17px; background: #fff; color: var(--noche); min-width: 0; }
.buscar input:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.buscar button { border: 0; background: none; cursor: pointer; }
.ventajas { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; list-style: none; margin: 0; padding-left: 0; }
.ventajas li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 17px; line-height: 1.4; font-weight: 600; }
.ventajas li::before { content: "✓"; width: 28px; height: 28px; background: var(--lima); color: var(--noche); display: grid; place-items: center; font-size: 15px; font-weight: 900; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.ventajas li span { padding-top: 3px; }
.familias .escena { height: 360px; margin-top: 16px; }
.familias .banda { left: 120px; top: 0; bottom: 0; width: 240px; clip-path: polygon(80px 0, 100% 0, 160px 100%, 0 100%); }
.familias .cel { position: absolute; left: 70px; top: 20px; --s: .6; }

/* Todo lo que hace */
.sec.rasgos-sec { gap: 18px; }
.rasgos { display: flex; flex-direction: column; gap: 18px; }
.rasgo { background: #fff; border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; align-items: center; }
.rasgo p { font-size: 16px; line-height: 1.4; font-weight: 600; text-wrap: pretty; }
.mini { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.fed { height: 26px; padding: 0 7px; display: flex; align-items: center; border: 1.5px solid var(--noche); border-radius: 5px; font-size: 11px; font-weight: 900; font-stretch: 75%; letter-spacing: .04em; }
.fed.ia { border: 0; padding: 0 10px; background: var(--lima); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.num { font-size: 26px; line-height: 1; font-weight: 900; font-stretch: 62%; font-variant-numeric: tabular-nums; }
.num.tachado { color: #B42A20; text-decoration: line-through; }
.flecha { font-size: 15px; font-weight: 800; }
.mini .etiqueta { height: 24px; padding: 0 9px; font-size: 11px; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.mini small { font-size: 12px; font-weight: 700; color: var(--texto2); }
.url { height: 32px; padding: 0 10px; display: flex; align-items: center; background: var(--gris); border-radius: 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ig { display: flex; gap: 6px; align-items: flex-end; }
.ig span { display: block; height: 44px; border-radius: 4px; background: #0D0F3C; position: relative; overflow: hidden; }
.ig .a { width: 26px; }
.ig .a::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #2CD67D; right: -12px; bottom: -10px; }
.ig .b { width: 36px; color: #fff; font-size: 11px; font-weight: 900; font-stretch: 62%; padding: 5px 4px; }
.ig .b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: #2CD67D; }
.gano { width: 26px; height: 26px; border-radius: 5px; background: #2E7D4F; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; margin-right: 2px; }
.cal { width: 42px; height: 44px; border: 2px solid var(--noche); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cal small { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--noche); }
.cal b { font-size: 20px; font-weight: 900; font-stretch: 62%; }
.deportes { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; }
.deportes-t { font-size: 22px; line-height: 1; font-weight: 900; font-stretch: 66%; text-transform: uppercase; }
.deportes ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.deportes li { height: 40px; padding: 0 14px; display: flex; align-items: center; border: 2px solid var(--noche); border-radius: 10px; font-size: 15px; font-weight: 800; }

/* Confianza */
.confianza { display: flex; flex-direction: column; gap: 22px; }
.confianza > div { border-top: 3px solid var(--noche); padding-top: 14px; font-size: 21px; line-height: 1.3; font-weight: 800; text-wrap: pretty; }
.usan { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.usan-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.club-usa { height: 84px; padding: 0 18px 0 14px; border: 1.5px solid var(--linea); border-radius: 16px; display: flex; align-items: center; gap: 14px; }
.club-usa .escudo { width: 52px; height: 52px; border-radius: 12px; background: var(--c1); box-shadow: inset 0 -9px 0 var(--c2), 0 0 0 2px #C9CED6; color: #fff; display: grid; place-items: center; font-size: 19px; font-weight: 900; font-stretch: 66%; padding-bottom: 6px; }
.club-usa b { display: block; font-size: 20px; font-weight: 900; font-stretch: 70%; text-transform: uppercase; }
.club-usa small { font-size: 14px; color: var(--texto2); }
.proximo { height: 84px; padding: 0 18px; border: 2px dashed #9AA1AC; border-radius: 16px; display: flex; align-items: center; font-size: 16px; font-weight: 800; text-decoration: none; }
.proximo:hover { border-color: var(--noche); }
.proximo:focus-visible { outline: 3px solid var(--noche); outline-offset: 3px; }

/* Precios */
.sec.precios { gap: 18px; }
.gratis { background: var(--noche); color: #fff; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.gratis .etiqueta { height: 28px; padding: 0 11px; font-size: 13px; font-stretch: 72%; }
.gratis p { font-size: 19px; line-height: 1.35; font-weight: 700; text-wrap: pretty; }
.planes { display: flex; flex-direction: column; gap: 18px; }
.plan { background: #fff; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.plan.destacado { background: var(--noche); color: #fff; }
.plan-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.plan-nombre { font-size: 28px; line-height: 1; font-weight: 900; font-stretch: 66%; text-transform: uppercase; }
.plan-equipos { font-size: 16px; color: var(--texto2); margin-top: 4px; }
.plan.destacado .plan-equipos, .plan.destacado .plan-anual { color: var(--texto2-oscuro); }
.plan-precio { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 700; }
.plan-precio b { font-size: 60px; line-height: .85; font-weight: 900; font-stretch: 62%; font-variant-numeric: tabular-nums; }
.plan-anual { font-size: 14px; color: var(--texto2); }
.plan .btn, .plan .btn-borde { margin-top: auto; }
.plan .btn > span { height: 50px; font-size: 16px; }
.que-es-equipo { font-size: 16px; line-height: 1.45; color: var(--texto2); text-wrap: pretty; }
.que-es-equipo b { color: var(--noche); }
.fundadores { background: var(--lima); padding: 18px 26px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); display: flex; flex-direction: column; gap: 6px; }
.fundadores b { font-size: 20px; line-height: 1; font-weight: 900; font-stretch: 66%; text-transform: uppercase; }
.fundadores p { font-size: 15px; line-height: 1.4; font-weight: 600; }
.fundadores a { font-size: 16px; font-weight: 900; }

/* Preguntas */
.sec.preguntas { gap: 18px; }
.faq { border-bottom: 1px solid var(--linea); }
.faq > div { border-top: 1px solid var(--linea); }
.faq button { width: 100%; min-height: 68px; background: none; border: 0; padding: 12px 0; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 12px; align-items: center; text-align: left; cursor: pointer; color: var(--noche); font-size: 18px; line-height: 1.3; font-weight: 800; }
.faq button:focus-visible { outline: 3px solid var(--noche); outline-offset: 2px; }
.faq button i { font-style: normal; width: 32px; height: 32px; border-radius: 8px; background: var(--gris); display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.faq button[aria-expanded="true"] i { background: var(--noche); color: var(--lima); }
.faq .resp { padding: 0 44px 20px 0; font-size: 17px; line-height: 1.5; color: var(--texto2); }
.faq .resp[hidden] { display: none; }

/* Cierre y pie */
.cierre { padding: 56px var(--lado); background: var(--noche); }
.cierre-banda { background: var(--lima); padding: 30px 30px 34px; clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%); display: flex; flex-direction: column; gap: 22px; }
.cierre-banda div { font-size: 46px; line-height: .88; font-weight: 900; font-stretch: 62%; text-transform: uppercase; color: var(--noche); }
.cierre-banda .btn { display: flex; }
.pie { border-top: 1px solid var(--linea-oscura); padding: 36px var(--lado) 40px; display: flex; flex-direction: column; gap: 22px; color: #fff; }
.pie img { height: 24px; width: auto; align-self: flex-start; }
.pie .contacto { display: flex; flex-direction: column; gap: 22px; }
.pie .contacto .btn2 { height: 52px; }
.pie .mail { font-size: 17px; font-weight: 700; }
.pie .links { display: flex; gap: 20px; font-size: 15px; color: var(--texto2-oscuro); }
.pie .hecho { font-size: 14px; color: var(--texto3-oscuro); }

/* --- Escritorio --- */
@media (min-width: 1200px) {
  :root { --lado: max(80px, (100% - 1280px) / 2); }
  [id] { scroll-margin-top: 92px; }
  .ceja { font-size: 14px; }
  .h2 { font-size: 72px; line-height: .88; }
  .top-in { height: 84px; padding: 0 var(--lado); gap: 40px; max-width: none; }
  .top .logo img { height: 28px; }
  .top nav { display: flex; gap: 32px; margin-left: 24px; }
  .top nav a { font-size: 15px; font-weight: 600; text-decoration: none; }
  .top nav a:hover { color: var(--lima); }
  .top .acciones { gap: 24px; }
  .top .entrar { display: inline; font-size: 15px; font-weight: 700; }
  .top .btn.chico { --c: 11px; }
  .top .btn.chico > span { height: 44px; padding: 0 24px; font-size: 15px; }
  .menu-btn, .menu { display: none !important; }

  .hero-in { position: relative; height: 860px; max-width: 1440px; margin: 0 auto; }
  .hero-txt { position: absolute; left: 80px; top: 104px; width: 590px; padding: 0; gap: 26px; }
  .hero h1 { font-size: 96px; line-height: .86; }
  .hero p { font-size: 20px; max-width: 520px; }
  .hero .botones { flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 8px; }
  .hero .botones .btn { display: inline-flex; }
  .hero .nota { font-size: 15px; text-align: left; }
  .hero .escena { position: absolute; left: 690px; top: 0; width: 750px; height: 860px; margin: 0; max-width: none; }
  .hero .banda { left: 240px; width: 360px; clip-path: polygon(150px 0, 100% 0, 210px 100%, 0 100%); }
  .hero .panel-mini { left: 110px; top: 92px; --s: .82; border-radius: 13px; }
  .hero .cel-hero { left: 0; top: 248px; --s: .66; }

  .escenas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .sec { padding-top: 112px; padding-bottom: 112px; gap: 32px; }
  .escena-txt { gap: 16px; padding-top: 20px; }
  .escena-txt .etiqueta { height: 28px; padding: 0 11px; font-size: 13px; }
  .escena-txt div:last-child { font-size: 42px; line-height: .94; }
  .remate { font-size: 24px; line-height: 1.4; padding-top: 16px; }

  .sec.como { gap: 56px; }
  .cabeza { gap: 12px; }
  .pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: stretch; }

  .familias { padding: 0 var(--lado); display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 80px; height: 780px; }
  .familias .escena { grid-column: 1; grid-row: 1; height: 780px; width: 520px; margin: 0; }
  .familias .banda { left: 150px; width: 300px; clip-path: polygon(110px 0, 100% 0, 190px 100%, 0 100%); }
  .familias .cel { left: 100px; top: 96px; --s: .74; }
  .familias-txt { grid-column: 2; grid-row: 1; padding: 112px 0; display: flex; flex-direction: column; gap: 28px; max-width: 600px; }
  .familias .ventajas { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; padding-top: 0; }
  .familias .cabeza { order: -2; }
  .tiendas { display: flex; gap: 12px; }
  .tienda { width: 180px; padding: 0 16px; }
  .tienda b { font-size: 20px; }
  .buscar-fila { gap: 10px; max-width: 520px; }
  .buscar input { padding: 0 18px; }
  .buscar .btn.medio { --c: 11px; }
  .buscar .btn.medio > span { padding: 0 24px; }

  .sec.rasgos-sec { gap: 40px; }
  .rasgos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .rasgo { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 22px; }
  .deportes { flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 16px; }
  .deportes-t { font-size: 26px; }
  .deportes li { height: 44px; padding: 0 16px; font-size: 16px; }

  .sec.confianza-sec { gap: 48px; }
  .sec.confianza-sec .h2 { max-width: 900px; }
  .confianza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .confianza > div { padding-top: 18px; font-size: 26px; line-height: 1.25; }
  .usan { flex-direction: row; align-items: center; gap: 24px; padding-top: 8px; }
  .usan .ceja { width: 120px; }
  .usan-fila { gap: 12px; }
  .club-usa { height: 88px; padding: 0 24px 0 16px; }
  .club-usa .escudo { width: 54px; height: 54px; font-size: 20px; box-shadow: inset 0 -10px 0 var(--c2), 0 0 0 2px #C9CED6; padding-bottom: 7px; }
  .club-usa b { font-size: 21px; }
  .proximo { height: 88px; padding: 0 24px; font-size: 17px; }

  .sec.precios { gap: 32px; }
  .gratis { flex-direction: row; align-items: center; gap: 20px; height: 84px; padding: 0 32px; border-radius: 20px; }
  .gratis .etiqueta { height: 34px; padding: 0 13px; font-size: 15px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
  .gratis p { font-size: 22px; }
  .planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .plan { padding: 32px; gap: 18px; }
  .plan-cab { min-height: 62px; }
  .plan-nombre { font-size: 32px; }
  .plan-equipos { font-size: 17px; margin-top: 6px; }
  .plan-precio { gap: 10px; font-size: 17px; }
  .plan-precio b { font-size: 76px; }
  .plan-anual { font-size: 15px; }
  .que-es-equipo { font-size: 18px; }
  .plan .btn > span, .plan .btn-borde { height: 52px; }
  .fundadores { flex-direction: row; align-items: center; gap: 24px; height: 88px; padding: 0 48px; clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }
  .fundadores b { font-size: 28px; white-space: nowrap; }
  .fundadores p { font-size: 18px; }
  .fundadores a { margin-left: auto; white-space: nowrap; }

  .sec.preguntas { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 80px; align-items: start; }
  .faq button { min-height: 76px; padding: 14px 0; grid-template-columns: minmax(0, 1fr) 36px; gap: 16px; font-size: 21px; }
  .faq button i { width: 36px; height: 36px; font-size: 22px; }
  .faq .resp { padding: 0 52px 24px 0; font-size: 18px; max-width: 720px; }

  .cierre { padding: 96px var(--lado); }
  .cierre-banda { height: 300px; padding: 0 96px; clip-path: polygon(64px 0, 100% 0, calc(100% - 64px) 100%, 0 100%); flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .cierre-banda div { font-size: 88px; line-height: .86; max-width: 760px; }
  .cierre-banda .btn { display: inline-flex; flex-shrink: 0; }
  .cierre-banda .btn > span { height: 60px; padding: 0 40px; font-size: 19px; }

  .pie { padding: 48px var(--lado); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center; }
  .pie img { height: 28px; }
  .pie .contacto { flex-direction: row-reverse; align-items: center; gap: 24px; }
  .pie .contacto .btn2 { height: 48px; padding: 0 20px; font-size: 15px; }
  .pie .links { gap: 28px; }
}
/* Entre 1200 y 1440 el hero se achica entero para no romper la composición */
@media (min-width: 1200px) and (max-width: 1339px) { .hero-in { zoom: .84; } }
@media (min-width: 1340px) and (max-width: 1439px) { .hero-in { zoom: .93; } }