/* ═══════════════════════════════════════════════════════════
   APEX — Calculadora de lotaje pública (/calculadora-de-lotaje/) · 2026-10-13
   Plantilla: apex-calculadora-publica.php. Va DESPUÉS de apex-legal.css (nav, legal-wrap, pie).
   Todo con prefijo .apex-cpub; las reglas .apex-calc-* son copia de apex-start-content.css
   (la hoja de la app no se carga en esta página), acotadas a .apex-cpub.
   ⛔ Texto oscuro sobre lima en TODO estado (memoria feedback_lima_texto_oscuro_en_todo_estado):
   los enlaces-botón lima de esta página llevan su propio :hover/:focus/:active al final.
   ═══════════════════════════════════════════════════════════ */

.apex-cpub{max-width:1300px;margin:0 auto;padding:48px 24px 0}

/* ── Cabecera ── */
.apex-cpub-head{max-width:820px;margin:0 0 32px}
.apex-cpub-h1{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,4.4vw,52px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--text);margin:0 0 14px;text-wrap:balance}
.apex-cpub-intro{font-family:var(--font-body);font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--text);margin:0;max-width:720px}

/* ── Bloques: calculadora a la izquierda, video 9:16 a la derecha (en celular, el video debajo) ── */
.apex-cpub-bloque{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:32px;align-items:start;margin:0 0 40px}
.apex-cpub-col-calc{min-width:0}
.apex-cpub-col-video{position:sticky;top:84px}
.apex-cpub-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:24px}
.apex-cpub-card--pro{border-color:var(--accent-bd);box-shadow:0 0 0 1px rgba(200,255,0,.05),0 18px 40px rgba(0,0,0,.25)}
.apex-cpub-card-head{margin:0 0 20px}
.apex-cpub-chip{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);border:1px solid var(--border2);border-radius:999px;padding:4px 10px;margin:0 0 10px}
.apex-cpub-chip--pro{color:var(--accent-t);background:var(--accent);border-color:var(--accent)}
.apex-cpub-h2{font-family:var(--font-display);font-weight:900;font-size:28px;line-height:1.05;text-transform:uppercase;color:var(--text);margin:0 0 8px}
.apex-cpub-h2--pro{font-size:clamp(26px,3vw,34px);color:var(--accent);text-wrap:balance}
.apex-cpub-sub{font-size:15px;line-height:1.6;color:var(--gray);margin:0}
.apex-cpub-mas{margin:16px 0 0;font-size:14px}

/* ── Botón «Calcular» (un <button>: lima con texto oscuro en TODO estado) ── */
.apex-cpub-calcular-fila{margin-top:4px}
.apex-cpub button.apex-cpub-calcular{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 24px;border:0;border-radius:var(--radius-md);cursor:pointer;
  background:var(--accent);color:var(--accent-t);font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:.08em;text-transform:uppercase;box-shadow:none;transition:filter .15s,transform .1s}
.apex-cpub button.apex-cpub-calcular:is(:hover,:focus,:focus-visible,:active){background:var(--accent);color:var(--accent-t)}
.apex-cpub button.apex-cpub-calcular:hover{filter:brightness(1.06)}
.apex-cpub button.apex-cpub-calcular:active{transform:translateY(1px)}
.apex-cpub button.apex-cpub-calcular:focus-visible{outline:2px solid var(--text);outline-offset:3px}
/* Resaltado breve del resultado al tocar «Calcular» */
.apex-cpub .apex-calc-out{border-radius:var(--radius-md);transition:box-shadow .3s ease}
.apex-cpub .apex-calc-out.is-resaltado{box-shadow:0 0 0 3px var(--accent),0 0 24px rgba(200,255,0,.25)}
@media (prefers-reduced-motion:reduce){ .apex-cpub .apex-calc-out{transition:none} .apex-cpub button.apex-cpub-calcular{transition:none} }

/* ── Selector de idioma arriba (el oficial `apex_idioma_selector_html('completo')`; sus estilos base viven en apex-shell-nav.css, que esta página no carga) ── */
.apex-cpub-idiomas{margin:0 0 22px}
.apex-cpub-idiomas .apex-idioma-completo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;padding:0}
.apex-cpub-idiomas .apex-idioma-rotulo{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.apex-cpub-idiomas .apex-idioma-rotulo .apex-idioma-globo{color:var(--gray);opacity:1;margin:0}
.apex-cpub-idiomas .apex-idioma-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,400px)}
.apex-cpub-idiomas .apex-idioma-form{display:block;margin:0}
.apex-cpub-idiomas .apex-idioma-opcion{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:6px;border:1px solid var(--gray2);border-radius:var(--radius-md);
  background:var(--bg3);color:var(--text);box-shadow:none;font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:.02em;line-height:1.1;text-transform:none;cursor:pointer}
.apex-cpub-idiomas button.apex-idioma-opcion:is(:hover,:focus,:active){background:var(--bg4);color:var(--text);border-color:var(--text)}
.apex-cpub-idiomas button.apex-idioma-opcion:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.apex-cpub-idiomas .apex-idioma-opcion.is-actual,.apex-cpub-idiomas .apex-idioma-opcion[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-t);cursor:default}
.apex-cpub-sub--pro{font-size:17px;color:var(--text);font-weight:500}
.apex-cpub-sub2{font-size:13.5px;line-height:1.5;color:var(--gray);margin:6px 0 0}

/* ── Video 9:16 ── */
.apex-cpub-video{position:relative;width:100%;max-width:min(460px,calc((100vh - 130px) * 9 / 16));min-width:300px;aspect-ratio:9/16;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-deeper);border:1px solid var(--border2)}
.apex-cpub-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Póster (espacio reservado mientras no hay video): fondo propio, sin imagen externa. */
.apex-cpub-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center;
  background:radial-gradient(120% 70% at 50% 0%,rgba(200,255,0,.12),transparent 60%),linear-gradient(180deg,var(--bg3),var(--bg-deeper))}
.apex-cpub-poster-t{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1.05;text-transform:uppercase;color:var(--text);text-wrap:balance}
.apex-cpub-poster-logo{font-family:var(--font-display);font-weight:900;font-size:28px;color:var(--text);letter-spacing:.01em}
.apex-cpub-poster-logo .lx{color:var(--accent)}
.apex-cpub-poster-logo small{font-size:12px;letter-spacing:.22em;color:var(--gray);font-weight:600;text-transform:uppercase;margin-left:4px}
.apex-cpub-poster-campo{display:flex;flex-direction:column;gap:6px;width:100%;max-width:220px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.apex-cpub-poster-campo b{display:block;font-size:20px;letter-spacing:0;color:var(--text);background:var(--bg-deeper);border:1px solid var(--accent);border-radius:var(--radius-md);padding:10px 12px}
.apex-cpub-poster-lote{font-family:var(--font-display);font-weight:800;font-size:18px;text-transform:uppercase;color:var(--gray)}
.apex-cpub-poster-lote b{font-size:64px;line-height:1;color:var(--accent);display:block}

/* ── Calculadora Start (copia de apex-start-content.css, acotada) ── */
.apex-cpub .apex-calc-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.apex-cpub .apex-calc-field{display:flex;flex-direction:column;gap:6px}
.apex-cpub .apex-calc-field-wide{grid-column:1 / -1}
.apex-cpub .apex-calc-label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--gray)}
.apex-cpub .apex-calc-label em{font-style:normal;color:var(--gray2);text-transform:none;letter-spacing:0}
.apex-cpub .apex-calc-input{display:flex;align-items:center;gap:6px;background:var(--bg-deeper);border:1px solid var(--border2);border-radius:var(--radius-md);padding:0 12px;height:46px;transition:border-color .15s ease}
.apex-cpub .apex-calc-input:focus-within{border-color:var(--accent-bd)}
.apex-cpub .apex-calc-prefix,.apex-cpub .apex-calc-suffix{font-family:var(--font-mono);font-size:14px;color:var(--gray);flex:0 0 auto}
.apex-cpub .apex-calc-input input[type="text"]{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;outline:none;padding:0 !important;width:0 !important;flex:1 1 0%;min-width:0;
  font-family:var(--font-mono) !important;font-size:16px !important;font-weight:600;color:var(--text)}
.apex-cpub .apex-calc-input input[type="text"]:focus{box-shadow:none !important;border:0 !important}
.apex-cpub .apex-calc-select{padding:0}
.apex-cpub .apex-calc-select select{flex:1;min-width:0;width:100%;background:transparent;border:none;outline:none;cursor:pointer;font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--text);padding:0 34px 0 12px;height:46px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8a8f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.apex-cpub .apex-calc-select select option{background:var(--bg-deeper);color:var(--text)}
.apex-cpub .apex-calc-instr-nota{font-family:var(--font-mono);font-size:11px;color:var(--gray2);line-height:1.5;margin:-8px 0 16px}
.apex-cpub .apex-calc-instr-nota:empty{display:none;margin:0}
.apex-cpub .apex-calc-disclaimer{margin-top:14px;font-size:11px;color:var(--gray2);line-height:1.5;font-style:italic}
.apex-cpub .apex-calc-out{min-height:60px}
.apex-cpub .apex-calc-placeholder{font-size:13px;color:var(--gray2);line-height:1.5;text-align:center;padding:18px 12px;border:1px dashed var(--border2);border-radius:var(--radius-md);margin:0}
.apex-cpub .apex-calc-error{font-size:13px;color:var(--red);line-height:1.5;padding:14px;background:var(--red-bg);border:1px solid var(--red);border-radius:var(--radius-md);margin:0}
.apex-cpub .apex-calc-result{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.apex-cpub .apex-calc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}
.apex-cpub .apex-calc-row:last-child{border-bottom:none}
.apex-cpub .apex-calc-row.is-primary{background:var(--accent-bg);padding:16px 14px}
.apex-cpub .apex-calc-k{font-size:13px;color:var(--gray);line-height:1.3}
.apex-cpub .apex-calc-v{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text);text-align:right}
.apex-cpub .apex-calc-row.is-primary .apex-calc-k{color:var(--text);font-weight:600}
.apex-cpub .apex-calc-row.is-primary .apex-calc-v{font-family:var(--font-display);font-size:20px;font-weight:900;color:var(--accent)}
.apex-cpub .apex-calc-aviso{font-size:12px;color:var(--warning);line-height:1.5;margin:10px 0 0;padding:10px 12px;background:rgba(243,156,18,.08);border:1px solid rgba(243,156,18,.25);border-radius:var(--radius-md)}
.apex-cpub-explica{margin:14px 0 0;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;background:var(--bg3)}
.apex-cpub-explica summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text)}
.apex-cpub-explica p{font-size:13px;line-height:1.6;color:var(--gray);margin:10px 0 0}
.apex-cpub-explica b{color:var(--text)}

/* ── Calculadora Pro (ejemplo): datos bloqueados + el stop ── */
.apex-cpub-fijos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px}
.apex-cpub-fijo:first-child{grid-column:1 / -1}
.apex-cpub-fijo{background:var(--bg-deeper);border:1px dashed var(--border2);border-radius:var(--radius-md);padding:9px 12px;min-width:0}
.apex-cpub-fijo dt{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray2);margin:0 0 3px}
.apex-cpub-fijo dd{margin:0;font-size:13px;color:var(--gray);overflow-wrap:anywhere}
.apex-cpub-fijo dd b{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text)}
.apex-cpub-fuente{font-size:11px;color:var(--gray2);white-space:nowrap}
.apex-cpub-lock{flex:0 0 auto;color:var(--gray2)}
.apex-cpub-bloq-nota{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--gray2);margin:0 0 16px}
.apex-cpub-stop{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.apex-cpub-stop .apex-calc-label{color:var(--text)}
.apex-cpub-tuyo{font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--accent-t);background:var(--accent);border-radius:999px;padding:2px 8px;margin-left:6px}
.apex-cpub .apex-cpub-stop-in{height:56px;border:2px solid var(--accent);box-shadow:0 0 0 4px rgba(200,255,0,.08)}
.apex-cpub .apex-cpub-stop-in input[type="text"]{font-size:22px !important}
.apex-cpub-res{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.apex-cpub-lote{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;padding:18px 16px;background:var(--accent-bg);border-bottom:1px solid var(--border)}
.apex-cpub-lote-n{font-family:var(--font-display);font-weight:900;font-size:52px;line-height:1;color:var(--accent)}
.apex-cpub-lote-u{font-family:var(--font-display);font-weight:800;font-size:20px;text-transform:uppercase;color:var(--text)}
.apex-cpub-dir{margin-left:auto;align-self:center;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text);border:1px solid var(--border2);border-radius:999px;padding:4px 10px}
.apex-cpub-res > .apex-cpub-dir{display:inline-block;margin:12px 14px 0}
.apex-cpub-res > .apex-calc-aviso{margin:10px 14px 14px}

/* ── Botón a Pro (pago en la web) ── */
.apex-cpub-cta-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:20px 0 0}
.apex-cpub a.apex-cpub-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:var(--radius-md);background:var(--accent);color:var(--accent-t);
  font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:filter .15s,transform .15s}
.apex-cpub-cta-nota{flex:1 1 220px;margin:0;font-size:13px;line-height:1.5;color:var(--gray)}
.apex-cpub a.apex-cpub-enlace{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:600}

/* ── Franja «También en tu celular» ── */
.apex-cpub-apps{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;margin:0 0 8px;padding:20px 24px;background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-md)}
.apex-cpub-apps-h{font-family:var(--font-display);font-weight:900;font-size:22px;text-transform:uppercase;color:var(--text);margin:0 0 4px}
.apex-cpub-apps-txt p{margin:0;font-size:14px;line-height:1.5;color:var(--gray)}
.apex-cpub-apps-btns{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
/* Distintivo oficial de Apple: sin recolorear ni recortar; alto 48 px; margen libre alrededor. */
.apex-cpub .apex-cpub-store{display:inline-block;line-height:0;margin:0}
.apex-cpub .apex-cpub-store img{display:block;height:48px;width:auto}
.apex-cpub .apex-cpub-store:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px}
.apex-cpub-and{position:relative}
.apex-cpub-and-b{display:inline-flex;align-items:center;gap:10px;min-width:170px;height:48px;padding:0 16px 0 12px;border-radius:10px;background:rgba(6,15,20,.72);border:1px solid rgba(255,255,255,.22);color:var(--text);text-align:left;cursor:pointer;font:inherit}
.apex-cpub-and-b svg{color:var(--accent);flex:0 0 auto}
.apex-cpub-and-b span{display:flex;flex-direction:column;line-height:1.1}
.apex-cpub-and-b small{font-size:10px;letter-spacing:.04em;color:var(--gray)}
.apex-cpub-and-b b{font-family:var(--font-display);font-weight:900;font-size:17px;text-transform:uppercase;color:var(--text)}
.apex-cpub-and-b:hover,.apex-cpub-and-b:focus-visible,.apex-cpub-and-b[aria-expanded="true"]{border-color:var(--accent);color:var(--text);background:rgba(6,15,20,.72)}
.apex-cpub-and-pop{position:absolute;right:0;top:calc(100% + 10px);width:min(310px,calc(100vw - 32px));z-index:20;background:var(--bg2);border:1px solid var(--accent-bd);border-radius:12px;padding:14px 16px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.apex-cpub-and-pop[hidden]{display:none}
.apex-cpub-and-pop p{margin:0 0 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.apex-cpub-and-pop ol{margin:0;padding-left:18px}
.apex-cpub-and-pop li{font-size:12.5px;line-height:1.5;color:var(--gray);margin-bottom:5px}
.apex-cpub-and-pop li b{color:var(--text)}

/* ── Guía (texto real) ── */
.apex-cpub .apex-cpub-guia{max-width:820px;margin:0;padding:48px 0 72px}
.apex-cpub-formula{font-family:var(--font-mono) !important;font-size:15px !important;color:var(--accent) !important;background:var(--bg2);border:1px solid var(--accent-bd);border-radius:var(--radius-md);padding:14px 16px}
.apex-cpub-ejemplos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px}
.apex-cpub-ejemplo{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px}
.apex-cpub-ejemplo h3{font-family:var(--font-display);font-weight:900;font-size:18px;text-transform:uppercase;color:var(--text);margin:0 0 6px}
.apex-cpub .apex-cpub-ejemplo p{font-size:14px;line-height:1.6;margin:0;color:var(--gray)}
.apex-cpub-faq-q{font-family:var(--font-body);font-weight:700;font-size:17px;color:var(--text);margin:22px 0 6px}
.apex-cpub .apex-cpub-aviso{font-size:12.5px;line-height:1.55;color:var(--gray2);margin:2.4rem 0 0;padding-top:1rem;border-top:1px solid var(--border)}
.apex-cpub-cta-fila--guia{margin:8px 0 0}

/* ⛔ Texto oscuro sobre lima en todo estado (le gana a `a:hover{color:#fff}` de style.css y a `.legal-wrap a`). */
.apex-cpub a.apex-cpub-cta:is(:hover,:focus,:focus-visible,:active),
.apex-cpub-body .nav a.btn-accent,
.apex-cpub-body .nav a.btn-accent:is(:hover,:focus,:focus-visible,:active){color:var(--accent-t);text-decoration:none}
.apex-cpub a.apex-cpub-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.apex-cpub a.apex-cpub-cta:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.apex-cpub a.apex-cpub-enlace:is(:hover,:focus,:focus-visible,:active){color:var(--accent)}

/* ── Escritorio angosto / tablet ── */
@media (max-width:1000px){
  .apex-cpub-bloque{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
  .apex-cpub-ejemplos{grid-template-columns:1fr}
}
/* ── Celular: cada video DEBAJO de su calculadora ── */
@media (max-width:760px){
  .apex-cpub{padding:32px 16px 0}
  .apex-cpub-bloque{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .apex-cpub-col-video{position:static;display:flex;justify-content:center}
  .apex-cpub-video{max-width:min(360px,100%);min-width:0}
  .apex-cpub-card{padding:18px 16px}
  .apex-cpub-fijos{grid-template-columns:1fr 1fr}
  .apex-cpub-lote-n{font-size:44px}
  .apex-cpub-dir{margin-left:0}
  .apex-cpub .apex-cpub-guia{padding:36px 0 56px}
  .apex-cpub-apps{padding:18px 16px}
  .apex-cpub-and-pop{right:auto;left:0}
}
@media (max-width:340px){
  .apex-cpub-fijos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .apex-cpub a.apex-cpub-cta{transition:none} .apex-cpub a.apex-cpub-cta:hover{transform:none} }

/* 2026-10-13 · Sergio: «¿por qué sale su fondo blanco? horrible». La plantilla dibuja su propio <body> y ninguna hoja le daba
   fondo: el navegador ponía blanco (rgb 247,250,252 medido en producción). Fondo y texto de la marca, en <html> y <body>. */
html:has(body.apex-cpub-body),body.apex-cpub-body{background:var(--bg,#0a1e26);color:var(--text,#e8f0f0)}
/* 2026-10-13 · Sergio: «que diga arriba video explicativo». Rótulo sobre cada video (Start y Pro). */
.apex-cpub-video-rotulo{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#C8FF00)}
@media (max-width:760px){.apex-cpub-col-video{flex-direction:column;align-items:center}}