/* ==========================================================================
   wiio.online · bloques del constructor (páginas de embudos y lienzo del editor)
   Se apoya en publico.css (tokens, botones, formulario, video, FAQ, comparación).
   Jerarquía: .bs sección → .bf fila (12 columnas) → .bc columna → .be elemento.
   Móvil primero; en computadora (≥ 900 px) las filas usan columnas.
   ========================================================================== */

/* ── Temas del embudo (colores base; el principal y el acento vienen del CSS generado) ── */
.pub-embudo { --surface-suave: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.pub-embudo.tema-blanco { --canvas: #ffffff; }
.pub-embudo.tema-blanco, .theme-dark .pub-embudo.tema-blanco { background: var(--canvas); }
.pub-embudo.tema-durazno { --canvas: #fff6ef; }
.pub-embudo.tema-menta { --canvas: #f1fbf7; }
.pub-embudo.tema-oceano { --canvas: #f2f7ff; }
.pub-embudo.tema-lila { --canvas: #f7f3ff; }
.pub-embudo:is(.tema-durazno, .tema-menta, .tema-oceano, .tema-lila) { background: radial-gradient(1000px 600px at 88% -8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%), radial-gradient(800px 600px at -12% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--canvas); }
.pub-embudo.tema-noche {
  --canvas: #120a0e; --surface: #1d1216; --glass: rgba(40, 22, 29, .66); --glass-line: rgba(255, 255, 255, .08);
  --text: #f7eef0; --body: #d6c5ca; --muted: #a8949a; --line: rgba(255, 255, 255, .09); color-scheme: dark;
  background: radial-gradient(1000px 600px at 88% -8%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%), var(--canvas);
}
.theme-dark .pub-embudo:is(.tema-durazno, .tema-menta, .tema-oceano, .tema-lila, .tema-cristal) { background: radial-gradient(1000px 600px at 88% -8%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%), var(--canvas); }
.fuente-serif { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.fuente-redonda { font-family: ui-rounded, "SF Pro Rounded", "Nunito", var(--font); }
.fuente-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── Sección ─────────────────────────────────────────────────────────── */
.bs { position: relative; }
.bs--rel-xs { padding: 10px 0; } .bs--rel-s { padding: 22px 0; } .bs--rel-m { padding: 34px 0; } .bs--rel-l { padding: 48px 0; } .bs--rel-xl { padding: 68px 0; }
@media (min-width: 900px) { .bs--rel-s { padding: 28px 0; } .bs--rel-m { padding: 48px 0; } .bs--rel-l { padding: 72px 0; } .bs--rel-xl { padding: 104px 0; } }
.bs--fondo-blanco { background: var(--surface); }
.bs--fondo-suave { background: var(--surface-suave); }
.bs--fondo-degradado { background: var(--grad); }
.bs--fondo-oscuro { background: #140a0e; }
.bs--fondo-vidrio .bs__in { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-xl); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); padding-top: 26px; padding-bottom: 26px; }
.bs--claro { --text: #fff; --body: rgba(255, 255, 255, .9); --muted: rgba(255, 255, 255, .72); color: #fff; }
.bs--claro .plist li { color: rgba(255, 255, 255, .92); }
.bs--fijo { position: sticky; top: 0; z-index: 30; }
.bs--fijo.bs--fondo-transparente .bs__in { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-pill); box-shadow: 0 15px 30px rgba(255, 143, 194, .12); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); padding-top: 6px; padding-bottom: 6px; }
.bs__in { width: 100%; margin: 0 auto; padding: 0 var(--gut); }
.bs__in--angosto { max-width: 760px; } .bs__in--normal { max-width: 1160px; } .bs__in--ancho { max-width: 1320px; } .bs__in--completo { max-width: none; }
.bs__tarjeta { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 28px 20px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); width: calc(100% - 2 * var(--gut)); }
@media (min-width: 900px) { .bs__tarjeta { padding: 44px 48px; } }

/* ── Fila y columnas ─────────────────────────────────────────────────── */
.bf { display: grid; grid-template-columns: minmax(0, 1fr); }
.bf + .bf { margin-top: 22px; }
.bf--gap-s { gap: 12px; } .bf--gap-m { gap: 20px; } .bf--gap-l { gap: 28px; }
.bf--va-centro { align-items: center; } .bf--va-abajo { align-items: end; }
.bf--inv { display: flex; flex-direction: column-reverse; }
.bc { min-width: 0; }
@media (min-width: 600px) and (max-width: 899px) { .bf--3-3-3-3, .bf--4-4-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .bf, .bf--inv { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bf--gap-l { gap: 40px; }
  .bc--12 { grid-column: span 12; } .bc--8 { grid-column: span 8; } .bc--7 { grid-column: span 7; } .bc--6 { grid-column: span 6; }
  .bc--5 { grid-column: span 5; } .bc--4 { grid-column: span 4; } .bc--3 { grid-column: span 3; }
}

/* ── Elemento: espacios, visibilidad, animación ──────────────────────── */
.mt-0 { margin-top: 0; } .mt-xs { margin-top: 6px; } .mt-s { margin-top: 14px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; } .mt-xl { margin-top: 64px; }
.mb-0 { margin-bottom: 0; } .mb-xs { margin-bottom: 6px; } .mb-s { margin-bottom: 14px; } .mb-m { margin-bottom: 24px; } .mb-l { margin-bottom: 40px; } .mb-xl { margin-bottom: 64px; }
@media (max-width: 767px) { .oc-m { display: none !important; } }
/* Una columna cuyos bloques están TODOS ocultos en esa vista desaparece entera (sin dejar su espacio). */
@media (max-width: 767px) { .bc:has(> .be):not(:has(> .be:not(.oc-m))) { display: none; } }
@media (min-width: 768px) { .bc:has(> .be):not(:has(> .be:not(.oc-d))) { display: none; } }
@media (min-width: 768px) { .oc-d { display: none !important; } }
.an { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.an-subir { transform: translateY(26px); } .an-zoom { transform: scale(.94); }
.an.is-visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .an { opacity: 1; transform: none; } }

/* ── Texto ───────────────────────────────────────────────────────────── */
.al-izquierda { text-align: left; } .al-centro { text-align: center; } .al-derecha { text-align: right; }
.bt { line-height: 1.08; letter-spacing: -.03em; overflow-wrap: anywhere; }
.bt--h1 { font-size: clamp(34px, 8.6vw, 62px); } .bt--h2 { font-size: clamp(27px, 6.2vw, 44px); } .bt--h3 { font-size: clamp(21px, 4.6vw, 28px); } .bt--h4 { font-size: 19px; }
.bt--t-s { font-size: 21px; } .bt--t-m { font-size: clamp(24px, 5vw, 30px); } .bt--t-l { font-size: clamp(30px, 6.6vw, 46px); }
.bt--t-xl { font-size: clamp(36px, 8.8vw, 64px); } .bt--t-xxl { font-size: clamp(42px, 11vw, 88px); line-height: 1; }
.bt--p-normal { font-weight: 450; } .bt--p-semi { font-weight: 650; } .bt--p-bold { font-weight: 760; } .bt--p-black { font-weight: 860; }
.bp { color: var(--body); overflow-wrap: anywhere; }
.bp--t-s { font-size: 14.5px; } .bp--t-m { font-size: 16.5px; } .bp--t-l { font-size: 19px; } .bp--t-xl { font-size: 22px; }
.bp.al-centro, .bt.al-centro { margin-left: auto; margin-right: auto; }
.bp.al-centro { max-width: 680px; }
.bp a, .bt a, .btarj__txt a { color: var(--brand); text-decoration: underline; }
.col-primario, .c-primario { color: var(--brand); } .col-acento, .c-acento { color: var(--accent); }
.col-oscuro, .c-oscuro { color: #1d1416; } .col-claro, .c-claro { color: #fff; } .col-suave, .c-suave { color: var(--muted); }
.col-degradado { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca { background: color-mix(in srgb, var(--brand) 16%, transparent); padding: 0 .2em; border-radius: .2em; }
.be--etiqueta .eyebrow { justify-self: auto; }

/* ── Lista ───────────────────────────────────────────────────────────── */
.bl { max-width: 680px; }
.bl--al-centro { margin-left: auto; margin-right: auto; } .bl--al-derecha { margin-left: auto; }
.bl--ic-primario .i { color: var(--brand); } .bl--ic-exito .i { color: var(--ok); } .bl--ic-error .i { color: var(--err); } .bl--ic-suave .i { color: var(--muted); }
.bl--tarjetas li { padding: 14px 16px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); color: var(--text); font-weight: 500; }
@media (min-width: 600px) { .bl--c2 { grid-template-columns: 1fr 1fr; max-width: 900px; } }

/* ── Botón: tamaños, anchos y movimientos ────────────────────────────── */
.bb .pbtn { max-width: 100%; white-space: normal; text-align: center; }
.pbtn--s { height: 40px; padding: 0 16px; font-size: 14px; }
.pbtn--m { height: 48px; padding: 0 22px; }
.pbtn--l { min-height: 56px; height: auto; padding: 12px 28px; font-size: 17px; }
.pbtn--xl { min-height: 66px; height: auto; padding: 14px 34px; font-size: 19px; }
.pbtn--solido { background: var(--brand); color: #fff; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--brand) 80%, transparent); }
.pbtn--w-completo { width: 100%; }
@media (max-width: 767px) { .pbtn--w-movil { width: 100%; } }
.bb__sub { margin-top: 8px; font-size: 13px; color: var(--muted); }
.pbtn--anim-pulso { animation: b-pulso 2.2s var(--ease) infinite; }
@keyframes b-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.pbtn--anim-rebote { animation: b-rebote 2.6s ease-in-out infinite; }
@keyframes b-rebote { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } 90% { transform: translateY(0); } 95% { transform: translateY(-3px); } }
.pbtn--anim-flotar { animation: b-flotar 3.4s ease-in-out infinite; }
@keyframes b-flotar { 50% { transform: translateY(-5px); } }
.pbtn--anim-brillo { position: relative; overflow: hidden; isolation: isolate; }
.pbtn--anim-brillo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); animation: b-brillo 2.8s ease-in-out infinite; }
@keyframes b-brillo { 60%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .pbtn[class*="pbtn--anim-"], .pbtn--anim-brillo::after { animation: none; } }

/* ── Video e imagen ──────────────────────────────────────────────────── */
.bvid { margin: 0 auto; } .bvid--w100 { width: 100%; } .bvid--w80 { width: min(100%, 80%); } .bvid--w60 { width: min(100%, 60%); }
@media (max-width: 767px) { .bvid--w80, .bvid--w60 { width: 100%; } }
.vsl--9x16 { aspect-ratio: 9 / 16; max-width: 400px; margin: 0 auto; } .vsl--1x1 { aspect-ratio: 1; max-width: 560px; margin: 0 auto; } .vsl--4x5 { aspect-ratio: 4 / 5; max-width: 480px; margin: 0 auto; }
.vsl--sin-marco { box-shadow: none; border: 0; }
.bimgw { display: flex; } .bimgw.al-centro { justify-content: center; } .bimgw.al-derecha { justify-content: flex-end; }
.bimgw--w100 > * { width: 100%; } .bimgw--w75 > * { width: min(100%, 75%); } .bimgw--w50 > * { width: min(100%, 50%); } .bimgw--w30 > * { width: min(100%, 30%); }
@media (max-width: 767px) { .bimgw--w75 > *, .bimgw--w50 > * { width: 100%; } }
.bimg { width: 100%; height: auto; display: block; }
.bimg--r-s { border-radius: var(--r-md); } .bimg--r-l { border-radius: var(--r-xl); } .bimg--r-circulo { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.bimg--sombra { box-shadow: var(--shadow-lg); }

/* ── Formulario en página ────────────────────────────────────────────── */
.bform--tarjeta { padding: 24px 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); text-align: left; }
@media (min-width: 900px) { .bform--tarjeta { padding: 30px 28px; } }
.bform__tit { font-size: 22px; margin-bottom: 4px; }
.pcampo em { font-style: normal; font-weight: 450; color: var(--muted); font-size: 12px; }
.pcampo select { width: 100%; height: 50px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--canvas); font-size: 16px; }
.popc { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.popc legend { font-size: 13.5px; font-weight: 600; color: var(--body); margin-bottom: 6px; padding: 0; }
.popc__op { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--canvas); cursor: pointer; font-size: 15px; transition: border-color .15s, background .15s; }
.popc__op:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--canvas)); }
.popc__op input { accent-color: var(--brand); width: 18px; height: 18px; flex: none; }

/* ── Tarjeta, pasos, testimonio, autor ───────────────────────────────── */
.btarj { height: 100%; padding: 22px 20px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.btarj.al-centro { justify-items: center; } .btarj.al-derecha { justify-items: end; }
.btarj__ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--brand) 70%, transparent); }
.btarj__ic .i { width: 22px; height: 22px; }
.btarj h3 { font-size: 19px; }
.btarj__txt { color: var(--body); font-size: 15px; }
.bs--claro .btarj { --glass: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .2); }
.bpasos--vertical { grid-template-columns: minmax(0, 1fr) !important; max-width: 640px; margin-left: auto; margin-right: auto; }
.btest { margin: 0; height: 100%; padding: 22px 20px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); display: grid; gap: 14px; align-content: start; }
.btest__est { display: flex; gap: 3px; color: #f5a524; } .btest__est .i { width: 17px; height: 17px; fill: currentColor; }
.btest blockquote { margin: 0; color: var(--text); font-size: 16px; line-height: 1.55; }
.btest figcaption { display: flex; align-items: center; gap: 12px; }
.btest figcaption img, .btest__ini { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--grad); }
.btest figcaption span { display: grid; } .btest figcaption em { font-style: normal; color: var(--muted); font-size: 13px; }
.autor__img { width: 104px; height: 104px; border-radius: 30px; object-fit: cover; box-shadow: var(--shadow-lg); }
@media (min-width: 760px) { .autor__img { width: 140px; height: 140px; border-radius: 38px; } }
.autor__bio { color: var(--body); }

/* ── Menú superior y pie ─────────────────────────────────────────────── */
.bmenu { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.bmenu__nav { order: 3; position: relative; }
.bmenu__nav summary { list-style: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--body); }
.bmenu__nav summary::-webkit-details-marker { display: none; }
.bmenu__nav nav { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 2px; z-index: 5; }
.bmenu__nav nav a { padding: 10px 12px; border-radius: 10px; font-weight: 550; }
.bmenu__nav nav a:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); }
.bmenu__acc { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.bmenu__login { display: none; }
@media (min-width: 640px) { .bmenu__login { display: inline-flex; } }
@media (min-width: 1000px) {
  .bmenu__nav { order: 0; margin-left: 18px; }
  .bmenu__nav summary { display: none; }
  .bmenu__nav nav { position: static; display: flex !important; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }
  .bmenu__nav:not([open]) nav { display: flex; }
}
.bpie { display: grid; gap: 12px; justify-items: center; text-align: center; padding-top: 18px; border-top: 1px solid var(--line); }

/* ── Espacio y separador ─────────────────────────────────────────────── */
.besp--s { height: 16px; } .besp--m { height: 36px; } .besp--l { height: 64px; } .besp--xl { height: 104px; }
.bsep { border: 0; margin: 0 auto; height: 1px; background: var(--line); }
.bsep--degradado { height: 3px; border-radius: 3px; background: var(--grad); }
.bsep--puntos { height: 6px; background: radial-gradient(circle, var(--muted) 1.4px, transparent 1.6px) center / 14px 6px repeat-x; }
.bsep--w100 { width: 100%; } .bsep--w50 { width: 50%; } .bsep--w20 { width: 20%; }

/* ── Pestaña lateral de preferencias (día/noche e idioma) ────────────── */
.pref { position: fixed; top: 50%; z-index: 45; transform: translateY(-50%); }
.pref--der { right: 0; } .pref--izq { left: 0; }
.pref > summary { list-style: none; display: grid; gap: 8px; justify-items: center; padding: 12px 8px; cursor: pointer; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); color: var(--body); }
.pref--der > summary { border-radius: 16px 0 0 16px; border-right: 0; } .pref--izq > summary { border-radius: 0 16px 16px 0; border-left: 0; }
.pref > summary::-webkit-details-marker { display: none; }
.pref > summary .i { width: 16px; height: 16px; }
.pref__menu { position: absolute; top: 50%; transform: translateY(-50%); width: 200px; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 6px; }
.pref--der .pref__menu { right: calc(100% + 8px); } .pref--izq .pref__menu { left: calc(100% + 8px); }
.pref__tema { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: 14px; background: color-mix(in srgb, var(--brand) 7%, transparent); }
.pref__tema span.tema-sol { display: none; } .theme-dark .pref__tema span.tema-sol { display: inline; } .theme-dark .pref__tema span.tema-luna { display: none; }
.pref__idiomas { display: grid; gap: 2px; }
.pref__idiomas a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 550; }
.pref__idiomas a:hover, .pref__idiomas a[aria-current] { background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); }

/* Aviso de la vista previa del administrador */
.vista-aviso { position: sticky; top: 0; z-index: 60; padding: 8px 14px; text-align: center; font-size: 12.5px; font-weight: 650; color: #fff; background: #1d1416; }
.bmenu .pub-logo { white-space: nowrap; flex: none; }
.bmenu .pub-logo em { white-space: nowrap; }
@media (max-width: 400px) { .bmenu .pub-logo em { display: none; } }

/* Fila de una sola columna: sin la cuadrícula de 12 (sus 11 espacios no caben en una ventana angosta como la emergente). */
.bf.bf--12 { grid-template-columns: minmax(0, 1fr); } .bf--12 > .bc--12 { grid-column: auto; }
.pmodal .bf { grid-template-columns: minmax(0, 1fr); } .pmodal .bc { grid-column: auto; }

/* Orden propio en celular y tableta: las columnas «se abren» y cada bloque toma su lugar (order lo pone css_documento). */
@media (max-width: 899px) {
  .bf.bf--movil { display: flex; flex-direction: column; align-items: stretch; gap: 0; }   /* a lo ancho: un video al 80 % no se encoge a nada */
  .bf--movil > .bc { display: contents; }
}

/* Barra fija con fondo propio (p. ej. degradado con la cuenta regresiva): de lado a lado, sin la cápsula de vidrio del menú. */
.bs--fijo:not(.bs--fondo-transparente) { box-shadow: 0 8px 24px rgba(29, 20, 22, .12); }
.bs--fijo:not(.bs--fondo-transparente) .bs__in { padding-top: 2px; padding-bottom: 2px; }

/* ── Cuenta regresiva (16/10/2026) ── */
.bcuenta { display: grid; gap: 10px; }
.bcuenta.al-centro { justify-items: center; text-align: center; } .bcuenta.al-izquierda { justify-items: start; } .bcuenta.al-derecha { justify-items: end; text-align: right; }
.bcuenta__tit { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.bs--claro .bcuenta__tit { color: inherit; opacity: .9; }
.bcuenta__reloj { display: flex; gap: 10px; }
.bcuenta__u { display: grid; justify-items: center; gap: 4px; min-width: 66px; padding: 12px 8px 10px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.bcuenta__u b { font-family: var(--font-num, inherit); font-size: 30px; line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bcuenta__u em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bs--claro .bcuenta__u { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); box-shadow: none; }
.bs--claro .bcuenta__u b { background: none; color: #fff; } .bs--claro .bcuenta__u em { color: rgba(255, 255, 255, .8); }
.bcuenta__fin { margin: 0; font-weight: 700; }
/* En una línea: para barras fijas arriba */
.bcuenta--linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bcuenta--linea.al-centro { justify-content: center; }
.bcuenta--linea .bcuenta__tit { text-transform: none; letter-spacing: 0; font-size: 14px; color: inherit; }
.bcuenta--linea .bcuenta__reloj { gap: 4px; }
.bcuenta--linea .bcuenta__u { display: inline-flex; align-items: baseline; gap: 2px; min-width: 0; padding: 4px 8px; border-radius: 10px; box-shadow: none; }
.bcuenta--linea .bcuenta__u b { font-size: 16px; }
.bcuenta--linea .bcuenta__u em { font-size: 10px; text-transform: none; letter-spacing: 0; }
@media (max-width: 560px) {
  .bcuenta__reloj { gap: 6px; } .bcuenta__u { min-width: 60px; padding: 10px 6px 8px; } .bcuenta__u b { font-size: 25px; }
  .bcuenta--linea { gap: 6px 8px; } .bcuenta--linea .bcuenta__tit { font-size: 12.5px; } .bcuenta--linea .bcuenta__u { padding: 3px 6px; } .bcuenta--linea .bcuenta__u b { font-size: 14px; }
}
/* Celular: la cuenta en una línea queda compacta (04d 05h 06m 57s) para que la barra fija ocupe una sola línea. */
@media (max-width: 560px) {
  .bcuenta--linea { flex-wrap: nowrap; justify-content: center; }
  .bcuenta--linea .bcuenta__tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .bcuenta--linea .bcuenta__reloj { flex: none; }
  .bcuenta--linea .bcuenta__u { padding: 3px 5px; }
  .bcuenta--linea .bcuenta__u em { display: none; }
  .bcuenta--linea [data-u="d"]::after { content: "d"; } .bcuenta--linea [data-u="h"]::after { content: "h"; }
  .bcuenta--linea [data-u="m"]::after { content: "m"; } .bcuenta--linea [data-u="s"]::after { content: "s"; }
  .bcuenta--linea [data-u]::after { font-size: .72em; font-weight: 600; margin-left: 1px; opacity: .85; }
}

/* ── Bandera y mapa del país (lote PV) ────────────────────────────────────
   Base = estado final (sin JS o con «reducir movimiento» el mapa se ve completo y quieto). publico.js agrega .pv--listo al
   entrar en pantalla y .is-visto al verlo: ahí se dibuja la ruta, el contorno y laten las ciudades. Sin estilos en línea (CSP). */
.pv { --pv-1: var(--brand); --pv-2: #fff; --pv-3: var(--brand); --pv-a: var(--brand); --pv-play: running; }
.pv--PE { --pv-1: #d91023; --pv-2: #fff; --pv-3: #d91023; --pv-a: #d91023; }
.pv--MX { --pv-1: #006847; --pv-2: #fff; --pv-3: #ce1126; --pv-a: #0a8a5c; }
.pv--CO { --pv-1: #fcd116; --pv-2: #003893; --pv-3: #ce1126; --pv-a: #d9a400; }
.pv--CL { --pv-1: #0039a6; --pv-2: #fff; --pv-3: #d52b1e; --pv-a: #d52b1e; }
.pv--AR { --pv-1: #74acdf; --pv-2: #fff; --pv-3: #74acdf; --pv-a: #4a95d0; }
.pv--EC { --pv-1: #fcd116; --pv-2: #003893; --pv-3: #ce1126; --pv-a: #d9a400; }
.pv--UY { --pv-1: #fff; --pv-2: #0038a8; --pv-3: #fcd116; --pv-a: #2a5fd0; }
.pv--PY { --pv-1: #d52b1e; --pv-2: #fff; --pv-3: #0038a8; --pv-a: #d52b1e; }
.pv--US { --pv-1: #b22234; --pv-2: #fff; --pv-3: #3c3b6e; --pv-a: #3c3b6e; }
.theme-dark .pv--US { --pv-a: #8b8fe6; } .theme-dark .pv--UY { --pv-a: #6f93f2; } .theme-dark .pv--CL, .theme-dark .pv--PY { --pv-a: #ff6b5e; } .theme-dark .pv--PE { --pv-a: #ff4d5e; }
.pv-vacio { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px; border: 1.5px dashed var(--line); border-radius: var(--r-md); color: var(--muted); font-size: 14px; }

/* Bandera (portada) */
.pv--bandera { display: flex; }
.pv--bandera.al-centro { justify-content: center; } .pv--bandera.al-derecha { justify-content: flex-end; }
.pv__chip { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 7px 20px 10px 8px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); overflow: hidden; animation: pv-entra .7s var(--ease) both; }
.pv__bandera { position: relative; flex: none; display: block; width: 42px; height: 28px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 5px 12px -4px rgba(0, 0, 0, .35); }
.pv__bandera svg { display: block; width: 100%; height: 100%; }
.pv__bandera::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .26), transparent 55%); }
.pv__bandera::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%); transform: translateX(-130%); animation: pv-brillo 1.3s .7s var(--ease) both; }
.pv__chip-txt { display: grid; line-height: 1.2; }
.pv__chip-txt b { font-size: 14.5px; font-weight: 650; color: var(--text); }
.pv__chip-txt em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.pv__franja { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: flex; }
.pv__franja i { flex: 1; } .pv__franja i:nth-child(1) { background: var(--pv-1); } .pv__franja i:nth-child(2) { background: var(--pv-2); } .pv__franja i:nth-child(3) { background: var(--pv-3); }
@keyframes pv-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes pv-brillo { to { transform: translateX(130%); } }

/* Mapa (ruta + país + ficha) */
.pv--mapa { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); padding: 24px 16px 18px; text-align: left; }
.pv--mapa > .pv__franja { top: 0; bottom: auto; height: 4px; }
.pv__cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pv__tit { font-size: 18px; font-weight: 650; letter-spacing: -.02em; color: var(--text); line-height: 1.2; }
.pv__sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.pv__mapas { display: grid; gap: 14px; }
.pv__fig { margin: 0; min-width: 0; }
.pv__lienzo { position: relative; aspect-ratio: 1000 / 389; }
.pv__mundo { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv__lienzo .pv__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pv__fig--pais { display: flex; justify-content: center; }
.pv__fig--pais .pv__svg { display: block; height: auto; max-width: 100%; max-height: 340px; overflow: visible; }
.pv__nota { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.pv__ficha { display: grid; gap: 12px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--line); }
.pv__ficha > div { display: grid; gap: 2px; padding-left: 11px; border-left: 3px solid var(--pv-a); }
.pv__ficha dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pv__ficha dd { margin: 0; font-size: 14.5px; color: var(--text); line-height: 1.4; }
.pv__ficha dd b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pv__ficha dd small { color: var(--muted); font-size: 12.5px; }
@media (min-width: 700px) { .pv__ficha { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
@media (min-width: 900px) {
  .pv--mapa { padding: 28px 30px 24px; }
  .pv__tit { font-size: 21px; }
  .pv__mapas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 28px; }
}

/* Trazos del SVG */
.pv-pais-mundo { fill: var(--pv-a); fill-opacity: .6; }
.pv-arco-base { fill: none; stroke: var(--pv-a); stroke-opacity: .25; stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.pv-arco { fill: none; stroke: var(--pv-a); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pv-flujo { fill: none; stroke: #fff; stroke-opacity: .9; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .012 .048; }
.pv-punto { fill: var(--pv-a); stroke: var(--surface); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.pv-onda { fill: var(--pv-a); fill-opacity: 0; transform-box: fill-box; transform-origin: center; }
.pv-rotulo { font: 650 36px var(--font); fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 8; stroke-linejoin: round; }
.pv-contorno { fill: var(--pv-a); fill-opacity: .14; stroke: var(--pv-a); stroke-width: 1.7; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pv-nombre { font: 600 13px var(--font); fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 4; stroke-linejoin: round; }
.pv-c1 { --pv-d: 1.5s; } .pv-c2 { --pv-d: 1.7s; } .pv-c3 { --pv-d: 1.9s; } .pv-c4 { --pv-d: 2.1s; } .pv-c5 { --pv-d: 2.3s; } .pv-c6 { --pv-d: 2.5s; } .pv-c7 { --pv-d: 2.7s; }
@media (min-width: 900px) { .pv-rotulo { font-size: 24px; stroke-width: 6; } }

/* Movimiento: solo si publico.js lo activó (.pv--listo) y cuando el bloque entra en pantalla (.is-visto) */
.pv--listo:not(.is-visto) { --pv-play: paused; }
.pv--listo .pv-pais-mundo { animation: pv-aparece .9s ease .1s both; }
.pv--listo .pv-arco-base { animation: pv-aparece .6s ease .2s both; }
.pv--listo .pv-arco { animation: pv-dibujar 1.7s cubic-bezier(.65, 0, .35, 1) .5s both; }
.pv--listo .pv-flujo { animation: pv-aparece .4s ease 2.2s both, pv-flujo 2.6s linear 2.2s 4 both; }
.pv--listo .pv-pto--origen .pv-punto { animation: pv-pop .5s var(--ease) .2s both; }
.pv--listo .pv-pto--origen .pv-onda { animation: pv-onda 2.2s ease-out .5s 3 both; }
.pv--listo .pv-pto--destino .pv-punto { animation: pv-pop .5s var(--ease) 2.1s both; }
.pv--listo .pv-pto--destino .pv-onda { animation: pv-onda 2.2s ease-out 2.2s 3 both; }
.pv--listo .pv-pto--origen .pv-rotulo { animation: pv-aparece .5s ease .4s both; }
.pv--listo .pv-pto--destino .pv-rotulo { animation: pv-aparece .5s ease 2.3s both; }
.pv--listo .pv-contorno { animation: pv-dibujar 2.2s cubic-bezier(.65, 0, .35, 1) .1s both, pv-relleno 1s ease 1.4s both; }
.pv--listo .pv-ciudad .pv-punto { animation: pv-pop .5s var(--ease) var(--pv-d) both; }
.pv--listo .pv-ciudad .pv-onda { animation: pv-onda 2.2s ease-out calc(var(--pv-d) + .2s) 3 both; }
.pv--listo .pv-nombre { animation: pv-aparece .5s ease calc(var(--pv-d) + .15s) both; }
@keyframes pv-dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pv-relleno { from { fill-opacity: 0; } }
@keyframes pv-aparece { from { opacity: 0; } }
@keyframes pv-pop { from { opacity: 0; transform: scale(.2); } }
@keyframes pv-onda { 0% { transform: scale(.6); fill-opacity: .5; } 100% { transform: scale(3.4); fill-opacity: 0; } }
@keyframes pv-flujo { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -.18; } }
/* Debe ir después de los «animation»: el atajo reinicia el estado de reproducción. */
.pv--listo .pv__svg :is(path, circle, text, g) { animation-play-state: var(--pv-play); }
@media (prefers-reduced-motion: reduce) { .pv *, .pv *::before, .pv *::after { animation: none !important; transition: none !important; } }