* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 72px; }
body { margin: 0; background: var(--bx-blanco); color: var(--bx-navy); font-family: var(--bx-letra);
font-size: 18px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--bx-azul); }
:focus-visible { outline: 2px solid var(--bx-azul); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--bx-letra-titulos); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 5.6vw, 60px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0; }
.ancho { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.seccion { padding: 112px 0; }
@media (max-width: 720px) { .seccion { padding: 72px 0; } }
.seccion.gris { background: var(--bx-fondo); }
.seccion.azul { background: var(--bx-azul); color: var(--bx-blanco); }
.titulo-seccion { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.titulo-seccion p { color: var(--bx-texto-2); margin-top: 10px; font-size: 18px; text-wrap: balance; }
.azul .titulo-seccion p { color: var(--bx-azul-100); }
.antetitulo { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--bx-azul); margin-bottom: 10px; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px;
border-radius: 12px; font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
border: 2px solid var(--bx-azul); background: var(--bx-azul); color: var(--bx-blanco); }
.boton:hover { background: var(--bx-azul-700); border-color: var(--bx-azul-700); }
.boton.lima { background: var(--bx-lima); border-color: var(--bx-lima); color: var(--bx-navy); }
.boton.lima:hover { background: #BBE11C; border-color: #BBE11C; }
.boton.sec { background: transparent; color: var(--bx-azul); }
.boton.sec:hover { background: var(--bx-azul-100); }
.azul .boton.sec { color: var(--bx-blanco); border-color: var(--bx-blanco); }
.azul .boton.sec:hover { background: rgba(255,255,255,.12); }
.boton.chico { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.debajo { font-size: 14px; color: var(--bx-texto-2); margin-top: 10px; }
.azul .debajo { color: var(--bx-azul-100); }
.arriba { position: sticky; top: 0; z-index: 20; background: var(--bx-azul); border-bottom: 1px solid rgba(255,255,255,.12); }
.arriba .ancho { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.arriba .logo img { width: 104px; display: block; }
.arriba nav { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.arriba nav a.link { color: var(--bx-blanco); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 10px; border-radius: 8px; }
.arriba nav a.link:hover { background: rgba(255,255,255,.14); }
.arriba .boton.chico { background: var(--bx-lima); border-color: var(--bx-lima); color: var(--bx-navy); }
.arriba .boton.chico:hover { background: #D8F55A; border-color: #D8F55A; }
.arriba :focus-visible { outline-color: var(--bx-blanco); }
@media (max-width: 720px) { .arriba nav a.link.ocultable { display: none; } }
.menu-boton { display: none; }
.menu-celu { display: none; }
@media (max-width: 720px) {
.arriba.con-menu nav a.entra-arriba { display: none; }
.arriba.con-menu .menu-boton { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px;
border: 0; background: none; border-radius: 10px; color: var(--bx-blanco); cursor: pointer; }
.menu-boton:hover { background: rgba(255,255,255,.14); }
.menu-boton svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.menu-boton .mb-cerrar, .menu-boton[aria-expanded="true"] .mb-abierto { display: none; }
.menu-boton[aria-expanded="true"] .mb-cerrar { display: inline; }
.menu-celu:not([hidden]) { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--bx-blanco);
border-bottom: 1px solid var(--bx-borde); box-shadow: 0 18px 30px rgba(11,16,38,.12); padding: 6px 16px 14px; }
.menu-celu a { display: flex; align-items: center; min-height: 48px; padding: 0 10px; border-radius: 10px;
color: var(--bx-navy); font-weight: 600; font-size: 17px; text-decoration: none; }
.menu-celu a:hover { background: var(--bx-fondo); }
.menu-celu a.separa { margin-top: 6px; border-top: 1px solid var(--bx-borde); border-radius: 0 0 10px 10px; color: var(--bx-azul); }
}
.portada { padding: 96px 0 112px; background: var(--bx-blanco); }
@media (max-width: 720px) { .portada { padding: 48px 0 72px; } }
.portada .ancho { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: center; }
.portada .bajada { font-size: 21px; color: var(--bx-texto-2); margin: 22px 0 34px; max-width: 520px; }
.portada .botones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada .mascota { justify-self: center; width: min(420px, 100%); }
.marca-lima { color: var(--bx-azul); background: linear-gradient(transparent 62%, var(--bx-lima) 62%); padding: 0 .08em; }
@media (max-width: 860px) {
.portada .ancho { grid-template-columns: minmax(0, 1fr); }
.portada .mascota { width: 220px; grid-row: 1; }
}
.grilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 900px) { .grilla.de-a-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarjeta { background: var(--bx-blanco); border: 1px solid var(--bx-borde); border-radius: 16px; padding: 24px; }
.tarjeta p { color: var(--bx-texto-2); margin-top: 8px; font-size: 16px; }
.icono-redondo { width: 44px; height: 44px; border-radius: 12px; background: var(--bx-azul-100); color: var(--bx-azul);
display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.icono-redondo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rubros { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.rubro { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; text-decoration: none;
color: var(--bx-navy); border: 2px solid var(--bx-borde); background: var(--bx-blanco); min-height: 132px; }
.rubro:hover { border-color: var(--bx-azul-300); box-shadow: 0 6px 20px rgba(30,69,251,.10); }
.rubro .nombre { font-family: var(--bx-letra-titulos); font-weight: 700; font-size: 20px; }
.rubro .estado { font-size: 14px; color: var(--bx-texto-2); }
.rubro.listo { border-color: var(--bx-azul); background: var(--bx-azul); color: var(--bx-blanco); }
.rubro.listo .estado { color: var(--bx-lima); font-weight: 700; }
.rubro .flecha { margin-top: auto; font-weight: 700; color: var(--bx-azul); }
.rubro.listo .flecha { color: var(--bx-blanco); }
.problema { background: var(--bx-blanco); border: 1px solid var(--bx-borde); border-radius: 16px; padding: 22px; }
.problema .te-pasa { font-style: italic; color: var(--bx-texto-2); font-size: 16px; }
.problema .te-pasa::before { content: "“"; } .problema .te-pasa::after { content: "”"; }
.problema h3 { margin-top: 10px; }
.problema p.como { color: var(--bx-navy); margin-top: 6px; font-size: 16px; }
.pantalla { background: var(--bx-blanco); border-radius: 14px; box-shadow: 0 20px 60px rgba(11,16,38,.18);
overflow: hidden; border: 1px solid var(--bx-borde); font-size: 14px; }
.pantalla .barra-nav { background: var(--bx-azul); color: #fff; display: flex; align-items: center; gap: 10px; padding: 9px 14px;
font-weight: 700; font-size: 13px; }
.pantalla .barra-nav .b { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.pantalla .barra-nav .b img { width: 11px; }
.pantalla .barra-nav .pest { margin-left: auto; display: flex; gap: 6px; }
.pantalla .barra-nav .pest span { padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.14); font-size: 11px; }
.pantalla .barra-nav .pest span.act { background: #fff; color: var(--bx-azul); }
.pantalla .cuerpo { padding: 14px; }
.pantalla table { width: 100%; border-collapse: collapse; }
.pantalla td { padding: 8px 6px; border-bottom: 1px solid var(--bx-borde); }
.pantalla td.cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pantalla .nota-recargo { display: block; font-size: 11px; font-weight: 700; color: var(--bx-azul-700); }
.pantalla .pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
background: var(--bx-fondo); flex-wrap: wrap; }
.pantalla .medios { display: flex; gap: 6px; flex-wrap: wrap; }
.pantalla .medios span { border: 1px solid var(--bx-borde); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 700; background: #fff; }
.pantalla .medios span.sel { border-color: var(--bx-azul); color: var(--bx-azul); box-shadow: 0 0 0 1px var(--bx-azul) inset; }
.pantalla .cobrar { background: var(--bx-lima); color: var(--bx-navy); font-weight: 800; border-radius: 10px; padding: 8px 14px; font-size: 15px; }
.pie-de-foto { text-align: center; font-size: 13px; color: var(--bx-texto-2); margin-top: 12px; }
.plan { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.plan .opciones { display: flex; flex-direction: column; gap: 12px; }
.opcion-plan { display: flex; gap: 14px; align-items: flex-start; background: var(--bx-blanco); border: 2px solid var(--bx-borde);
border-radius: 14px; padding: 18px; cursor: pointer; }
.opcion-plan:has(input:checked) { border-color: var(--bx-azul); box-shadow: 0 0 0 1px var(--bx-azul) inset; }
.opcion-plan input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--bx-azul); flex-shrink: 0; }
.opcion-plan .que { flex: 1; }
.opcion-plan .que b { font-size: 17px; }
.opcion-plan .que small { display: block; color: var(--bx-texto-2); font-size: 15px; margin-top: 3px; }
.opcion-plan .precio { font-weight: 800; white-space: nowrap; text-align: right; }
.opcion-plan .precio small { display: block; font-weight: 500; font-size: 13px; color: var(--bx-texto-2); }
.opcion-plan.fija { cursor: default; background: var(--bx-fondo); }
.opcion-plan .incluida { width: 24px; height: 24px; border-radius: 50%; background: var(--bx-azul); flex-shrink: 0;
display: grid; place-items: center; margin-top: 1px; }
.opcion-plan .incluida svg { width: 15px; height: 15px; fill: none; stroke: var(--bx-blanco); stroke-width: 3;
stroke-linecap: round; stroke-linejoin: round; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.plan-barra { display: none; }
@media (max-width: 860px) {
.plan-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; z-index: 30;
left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 10px 10px 10px 18px;
background: var(--bx-navy); color: var(--bx-blanco); border-radius: 16px; box-shadow: 0 10px 30px rgba(11,16,38,.28);
transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.plan-barra.ver { transform: none; visibility: visible; }
.plan-barra small { display: block; color: var(--bx-azul-200); font-size: 13px; }
.plan-barra b { font-family: var(--bx-letra); font-size: 22px; font-weight: 700; line-height: 1.15; }
.plan-barra .boton { min-height: 44px; white-space: nowrap; }
html.con-barra { scroll-padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .plan-barra { transition: none; } }
.incluye { columns: 2; column-gap: 24px; margin: 12px 0 0; padding-left: 20px; color: var(--bx-texto-2); font-size: 15px; }
.kioscos-plan { background: var(--bx-blanco); border: 2px solid var(--bx-borde); border-radius: 14px; padding: 16px 18px; margin-top: 12px; }
.kioscos-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 17px; }
.kioscos-num { font-weight: 800; color: var(--bx-azul); font-size: 20px; }
.kioscos-plan input[type=range] { width: 100%; height: 32px; margin: 10px 0 0; accent-color: var(--bx-azul); cursor: pointer; }
.kioscos-marcas { display: flex; justify-content: space-between; color: var(--bx-texto-2); font-size: 14px; }
.kioscos-plan .debajo { text-align: left; margin: 8px 0 0; }
.sin-limite { list-style: none; padding: 0; margin: 16px 0 0; font-size: 16px; }
.sin-limite li { display: flex; gap: 10px; padding: 4px 0; }
.sin-limite li::before { content: "✓"; color: var(--bx-azul); font-weight: 800; }
.total-plan li.desc { color: var(--bx-lima); }
.total-plan { position: sticky; top: 88px; background: var(--bx-navy); color: var(--bx-blanco); border-radius: 16px; padding: 26px; }
.total-plan .rotulo { color: var(--bx-azul-200); font-size: 15px; }
.total-plan .monto { font-family: var(--bx-letra); font-weight: 700; font-size: 46px; line-height: 1.1; margin: 6px 0 4px; }
.total-plan .por-mes { color: var(--bx-azul-200); }
.total-plan ul { list-style: none; padding: 0; margin: 18px 0; font-size: 15px; }
.total-plan li { display: flex; gap: 8px; padding: 4px 0; }
.total-plan li::before { content: "✓"; color: var(--bx-lima); font-weight: 800; }
.total-plan .boton { width: 100%; }
.total-plan .debajo { color: var(--bx-azul-200); text-align: center; }
@media (max-width: 860px) { .plan { grid-template-columns: minmax(0, 1fr); } .total-plan { position: static; } .incluye { columns: 1; } }
.pasos { counter-reset: paso; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.paso { position: relative; padding: 22px 22px 22px 22px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.paso::before { counter-increment: paso; content: counter(paso); display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%; background: var(--bx-lima); color: var(--bx-navy);
font-weight: 800; margin-bottom: 12px; }
.paso p { color: var(--bx-azul-100); margin-top: 6px; font-size: 16px; }
.preguntas { max-width: 820px; margin: 0 auto; }
.preguntas details { border-bottom: 1px solid var(--bx-borde); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 700; font-size: 18px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 26px; color: var(--bx-azul); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { color: var(--bx-texto-2); padding: 0 0 18px; }
.formulario { max-width: 560px; margin: 0 auto; background: var(--bx-blanco); border: 1px solid var(--bx-borde);
border-radius: 16px; padding: 26px; color: var(--bx-navy); }
.formulario label { display: block; font-weight: 600; font-size: 15px; margin: 14px 0 6px; }
.formulario label .opc { font-weight: 400; color: var(--bx-texto-2); }
.formulario input, .formulario textarea { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; color: var(--bx-navy);
border: 1px solid var(--bx-borde-campo); border-radius: 10px; background: var(--bx-blanco); }
.formulario input:focus, .formulario textarea:focus { border-color: var(--bx-azul); }
.formulario .boton { width: 100%; margin-top: 18px; }
.trampa { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.pie-web { background: var(--bx-azul); color: var(--bx-azul-100); padding: 40px 0; font-size: 15px; }
.pie-web .ancho { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pie-web img { width: 92px; display: block; }
.pie-web nav { display: flex; gap: 18px; flex-wrap: wrap; }
.pie-web a { color: var(--bx-blanco); }
.final { text-align: center; }
.final .mascota { width: 180px; display: block; margin: 0 auto 10px; }
.final h2 { max-width: 760px; margin: 0 auto; }
.final p.bajada { color: var(--bx-azul-100); font-size: 19px; margin: 14px auto 26px; max-width: 620px; }
.puntos { display: grid; gap: 48px 40px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.puntos.de-a-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .puntos, .puntos.de-a-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .puntos, .puntos.de-a-tres { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.punto h3 { font-size: 22px; }
.punto h3::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--bx-lima); margin-bottom: 16px; }
.punto p { color: var(--bx-texto-2); margin-top: 8px; }
ol.pasos { list-style: none; counter-reset: paso; display: flex; justify-content: center; gap: 56px; flex-wrap: wrap;
padding: 0; margin: 0 0 56px; }
ol.pasos li { counter-increment: paso; display: flex; align-items: flex-start; gap: 14px; font-size: 21px; font-weight: 700; }
ol.pasos li b { display: block; line-height: 1.2; padding-top: 7px; }
ol.pasos li::before { flex-shrink: 0; }
ol.pasos li span { display: block; max-width: 240px; font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--bx-texto-2); }
@media (max-width: 860px) { ol.pasos { flex-direction: column; align-items: center; gap: 24px; }
ol.pasos li { width: min(100%, 320px); } }
ol.pasos li::before { content: counter(paso); width: 40px; height: 40px; border-radius: 50%; background: var(--bx-azul);
color: var(--bx-blanco); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.centrado { text-align: center; }
ol.pasos-linea { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px;
max-width: 1100px; padding: 0; margin: 36px auto 48px; }
ol.pasos-linea li { counter-increment: paso; position: relative; text-align: center; }
ol.pasos-linea li::before { content: counter(paso); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; background: var(--bx-azul);
color: var(--bx-blanco); font-size: 24px; font-weight: 800; }
ol.pasos-linea li:not(:last-child)::after { content: ""; position: absolute; top: 29px; left: calc(50% + 46px);
width: calc(100% - 60px); height: 2px; background: #D5DBEA; }
ol.pasos-linea b { display: block; font-family: var(--bx-letra-titulos); font-size: 22px; font-weight: 800; line-height: 1.25; }
ol.pasos-linea span { display: block; margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--bx-texto-2); text-wrap: balance; }
@media (min-width: 1000px) { ol.pasos-linea b { white-space: nowrap; } }
#empezar .debajo { margin-top: 12px; font-size: 15px; }
@media (max-width: 760px) {
ol.pasos-linea { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 360px; margin: 28px auto 36px; }
ol.pasos-linea li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; text-align: left; align-items: start; }
ol.pasos-linea li::before { width: 52px; height: 52px; margin: 0; font-size: 21px; }
ol.pasos-linea li:not(:last-child)::after { top: 58px; left: 25px; width: 2px; height: calc(100% - 24px); }
ol.pasos-linea b { font-size: 19px; padding-top: 3px; }
ol.pasos-linea span { margin-top: 4px; font-size: 16px; }
}
.plan { max-width: 880px; margin: 0 auto; gap: 32px; align-items: start; }
.opcion-plan { border-width: 1px; border-radius: 14px; padding: 20px 22px; }
.opcion-plan:has(input:checked) { box-shadow: none; }
.opcion-plan .que small { font-size: 16px; }
.total-plan { border-radius: 20px; padding: 32px; }
.total-plan ul { margin: 20px 0 24px; }
.preguntas summary { font-weight: 600; padding: 22px 40px 22px 0; }
.formulario { border: none; padding: 0; background: transparent; }
.pie-web .derechos, .derechos { margin: 18px auto 0; max-width: 1100px; padding: 0 20px; font-size: 13px; opacity: .7; text-align: center; }
.boton.texto { background: transparent; border-color: transparent; color: var(--bx-azul); padding: 0 14px; }
.boton.texto:hover { background: var(--bx-azul-100); border-color: var(--bx-azul-100); }
.foto { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--bx-borde);
background: var(--bx-blanco); box-shadow: 0 24px 60px rgba(11,16,38,.12); }
.foto.angosta { max-width: 400px; justify-self: center; }
.portada .foto { box-shadow: 0 30px 80px rgba(11,16,38,.18); }
.portada:has(.foto) .ancho { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; }
@media (max-width: 860px) { .portada:has(.foto) .ancho { grid-template-columns: minmax(0, 1fr); } }
.escenas { display: flex; flex-direction: column; gap: 112px; }
.escena { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.escena:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.escena:nth-child(even) .texto-escena { order: 2; }
.escena h3 { font-size: clamp(26px, 2.8vw, 34px); }
.escena h3::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--bx-lima); margin-bottom: 18px; }
.escena p { color: var(--bx-texto-2); margin-top: 12px; font-size: 19px; max-width: 400px; }
.escenas + .pie-de-foto { margin-top: 72px; }
@media (max-width: 860px) {
.escenas { gap: 72px; }
.escena, .escena:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.escena:nth-child(even) .texto-escena { order: 0; }
}
.todo { display: grid; gap: 40px 32px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .todo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .todo { grid-template-columns: minmax(0, 1fr); } }
.todo h3 { font-size: 19px; }
.todo h3::before { content: ""; display: block; width: 24px; height: 4px; border-radius: 2px; background: var(--bx-lima); margin-bottom: 14px; }
.todo ul { list-style: none; padding: 0; margin: 12px 0 0; color: var(--bx-texto-2); font-size: 16px; line-height: 1.45; }
.todo li { padding: 6px 0; }
.portada-nueva .ancho { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; gap: 56px; }
.portada-nueva h1 { font-size: clamp(42px, 6.4vw, 76px); letter-spacing: -0.02em; line-height: 1.04; }
.portada-nueva .marca-lima { white-space: nowrap; }
.antetitulo.que-es { font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--bx-azul-700); background: var(--bx-azul-100);
padding: 6px 14px; border-radius: 99px; margin-bottom: 18px; }
@media (max-width: 560px) { .antetitulo.que-es { font-size: 15px; padding: 5px 12px; border-radius: 12px; } }
@media (min-width: 561px) { .antetitulo.que-es { font-size: 15.5px; padding: 6px 13px; } }
.portada .bajada { margin-bottom: 14px; }
.portada .para-quien { font-size: 17px; color: var(--bx-texto-2); margin: 0 0 32px; max-width: 520px; }
.debajo.con-icono { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-top: 22px; }
.debajo.con-icono svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--bx-texto-2);
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compu { position: relative; margin: 0; padding: 28px 0 0 56px; }
.compu-pantalla { background: var(--bx-navy); border-radius: 18px; padding: 12px; box-shadow: 0 30px 80px rgba(11,16,38,.20); }
.compu-pantalla img { display: block; width: 100%; height: auto; border-radius: 8px; }
.compu-pie { width: 26%; height: 18px; margin: 0 auto; background: linear-gradient(#C9CFE0, #E3E7F0);
border-radius: 0 0 10px 10px; }
.compu-mascota { position: absolute; left: -34px; bottom: 30px; width: 24%; max-width: 150px; height: auto;
filter: drop-shadow(0 12px 22px rgba(11,16,38,.18)); }
.compu figcaption { text-align: center; font-size: 13px; color: var(--bx-texto-2); margin-top: 14px; }
@media (max-width: 860px) {
.portada-nueva .ancho { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
.compu { padding: 58px 0 0 34px; }
.compu-mascota { left: -14px; bottom: 24px; width: 22%; }
}
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.dos-columnas h2 { max-width: 520px; font-size: clamp(28px, 3vw, 36px); }
.foto.en-columna { margin-top: 32px; }
.pie-de-foto.izq { text-align: left; }
.bajada-seccion { color: var(--bx-texto-2); font-size: 20px; margin-top: 18px; max-width: 500px; }
.tilde { display: flex; gap: 10px; margin-top: 24px; color: var(--bx-texto-2); font-size: 16px; }
.tilde::before { content: "✓"; color: var(--bx-azul); font-weight: 800; }
.beneficios { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 28px; }
.beneficios li { display: flex; gap: 18px; align-items: flex-start; }
.beneficios h3 { font-family: var(--bx-letra); font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.beneficios p { color: var(--bx-texto-2); margin-top: 4px; font-size: 16px; line-height: 1.55; }
.beneficios .icono-caja { width: 48px; height: 48px; border-radius: 12px; }
.beneficios .icono-caja svg { width: 24px; height: 24px; }
.icono-caja { flex-shrink: 0; width: 60px; height: 60px; border-radius: 16px; border: 1px solid var(--bx-borde);
background: var(--bx-blanco); display: flex; align-items: center; justify-content: center; color: var(--bx-azul); }
.icono-caja svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icono-caja.chico { width: 48px; height: 48px; border: 0; background: var(--bx-azul-100); border-radius: 12px; }
.icono-caja.chico svg { width: 24px; height: 24px; }
.cierre-ejemplo { max-width: 400px; width: 100%; justify-self: center; }
.cierre-tarjeta.mini-ventana { margin: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(11,16,38,.10); }
.cierre-cuerpo { padding: 20px 22px 22px; }
.cierre-titulo { color: var(--bx-navy); font-weight: 700; font-size: 18px; line-height: 1.3; margin: 0 0 12px; }
.cierre-cuenta { margin: 0 0 12px; }
.cierre-cuenta div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; color: var(--bx-texto-2); }
.cierre-cuenta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cierre-efectivo { margin: 0; background: #F5F7FB; border-radius: 12px; padding: 2px 14px; }
.cierre-efectivo div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0;
font-size: 17px; color: var(--bx-navy); }
.cierre-efectivo div + div { border-top: 1px solid var(--bx-borde); }
.cierre-efectivo dt { font-weight: 600; }
.cierre-efectivo dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cierre-lugar { display: grid; margin-top: 14px; }
.cierre-lugar > * { grid-area: 1 / 1; }
.cierre-molde { visibility: hidden; }
.cierre-resultado { margin: 0; padding: 12px 14px; border-radius: 12px; font-weight: 800; font-size: 19px; line-height: 1.25;
display: flex; flex-direction: column; justify-content: center; }
.cierre-resultado.bien { background: var(--bx-bien-fondo); color: var(--bx-bien-texto); }
.cierre-resultado.falta { background: var(--bx-atencion-fondo); color: var(--bx-atencion); }
.cierre-resultado small { display: block; font-weight: 500; font-size: 14px; margin-top: 2px; }
.cierre-botones { display: flex; gap: 4px; margin: 14px auto 0; padding: 4px; border-radius: 14px; background: #E8EBF3; max-width: 340px; }
.cierre-botones button { flex: 1; min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--bx-texto-2);
font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cierre-botones button[aria-pressed="true"] { background: var(--bx-blanco); color: var(--bx-azul); box-shadow: 0 1px 4px rgba(11,16,38,.10); }
.manera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
background: var(--bx-azul-100); border-radius: 28px; padding: 64px; }
@media (max-width: 860px) { .manera { grid-template-columns: minmax(0, 1fr); padding: 32px 20px; gap: 32px; border-radius: 20px; } }
.manera-tarjeta { background: var(--bx-blanco); border-radius: 22px; padding: 32px; border: 1px solid var(--bx-azul-200); }
.manera-tarjeta h3 { font-size: 22px; }
.manera-tarjeta > p { color: var(--bx-texto-2); font-size: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--bx-borde); }
.manera-item { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; }
.manera-item h4 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.manera-item p { color: var(--bx-texto-2); font-size: 16px; margin-top: 4px; }
.pantalla-dibujo { background: var(--bx-blanco); border-radius: 8px; padding: 28px 30px 26px; }
.pd-rotulo { color: var(--bx-texto-2); font-size: 16px; }
.pd-producto { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.pd-producto div { flex: 1; }
.pd-producto b { display: block; font-size: 20px; }
.pd-producto small { color: var(--bx-texto-2); font-size: 15px; }
.pd-plata { font-size: 22px !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-alfajor { width: 60px; height: 34px; flex-shrink: 0; border-radius: 17px / 50%; margin: 0 6px;
background: linear-gradient(#6B4428 0 40%, #F2D3A2 40% 58%, #5C3A24 58%);
box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 0 0 10px var(--bx-fondo); }
.pd-listo { margin-top: 22px; background: var(--bx-lima); color: var(--bx-navy); font-weight: 700; text-align: center;
border-radius: 12px; padding: 14px; font-size: 17px; }
.pd-stock { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px;
border-top: 1.5px dashed var(--bx-borde); color: var(--bx-texto-2); font-size: 16px; }
.pd-stock b { color: var(--bx-azul); }
.pd-flotante { position: absolute; right: -18px; top: 0; display: flex; align-items: center; gap: 12px;
background: var(--bx-blanco); border: 1px solid var(--bx-borde); border-radius: 16px; padding: 12px 18px;
box-shadow: 0 16px 40px rgba(11,16,38,.14); }
.pd-flotante small { display: block; color: var(--bx-texto-2); font-size: 14px; }
.pd-flotante b { color: var(--bx-azul); font-size: 22px; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .pd-flotante { right: -4px; top: 0; padding: 10px 14px; } .pd-flotante b { font-size: 19px; } }
@media (max-width: 520px) { .pantalla-dibujo { padding: 20px 18px; } .pd-alfajor { width: 48px; height: 28px; } }
.dibujo { background: var(--bx-blanco); border: 1px solid var(--bx-borde); border-radius: 22px; padding: 28px 30px;
box-shadow: 0 24px 60px rgba(11,16,38,.08); }
.dibujo.en-columna { margin-top: 32px; max-width: 480px; }
.dibujo-titulo { display: flex; align-items: center; gap: 10px; color: var(--bx-azul); font-weight: 700; font-size: 19px; }
.dibujo-titulo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dibujo-sub { color: var(--bx-texto-2); font-size: 16px; margin-top: 6px; }
.dibujo-lista { margin-top: 20px; border: 1px solid var(--bx-borde); border-radius: 16px; padding: 4px 20px; }
.dl-cab { font-weight: 700; font-size: 17px; padding: 16px 0 8px; }
.dl-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0;
border-bottom: 1px solid var(--bx-borde); }
.dl-fila b { display: block; font-size: 17px; }
.dl-fila small { color: var(--bx-texto-2); font-size: 15px; }
.etiqueta { border-radius: 8px; padding: 4px 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.etiqueta.roja { background: var(--bx-error-fondo); color: var(--bx-error-texto); }
.etiqueta.naranja { background: var(--bx-atencion-fondo); color: var(--bx-atencion); }
.dl-pie { color: var(--bx-azul); font-size: 16px; padding: 14px 0; }
.dos-columnas.al-reves > .dibujo { order: -1; }
@media (max-width: 860px) { .dos-columnas.al-reves > .dibujo { order: 0; } }
.factura-dibujo { max-width: 460px; width: 100%; justify-self: center; }
.opciones-dibujo { padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.opciones-dibujo button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; text-align: left;
border: 1px solid var(--bx-borde); border-radius: 12px; background: var(--bx-blanco);
font: inherit; font-size: 16px; color: var(--bx-texto); cursor: pointer; }
.opciones-dibujo button:hover { border-color: var(--bx-azul-200); }
.opciones-dibujo button::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bx-borde-campo);
flex-shrink: 0; box-sizing: border-box; }
.opciones-dibujo button[aria-pressed="true"] { border-color: var(--bx-azul); background: var(--bx-azul-100); color: var(--bx-azul-700); font-weight: 600; }
.opciones-dibujo button[aria-pressed="true"]::before { border: 6px solid var(--bx-azul); }
.facturas-ejemplo { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 8px; }
.facturas-ejemplo li { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap;
padding: 12px 16px; border-radius: 12px; background: var(--bx-fondo); color: var(--bx-texto-2); font-size: 15px;
transition: background .2s, color .2s; }
.facturas-ejemplo li.hecha { background: var(--bx-bien-fondo); color: var(--bx-bien-texto); }
.facturas-ejemplo b { white-space: nowrap; }
.vb-pausa { flex-shrink: 0; margin-left: -4px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
border: 1px solid var(--bx-borde); border-radius: 50%; background: var(--bx-blanco); color: var(--bx-texto-2); cursor: pointer; }
.vb-pausa:hover { color: var(--bx-azul); border-color: var(--bx-azul-200); }
.vb-pausa svg { width: 12px; height: 12px; fill: currentColor; }
.mini-ventana .vb-pausa { width: 24px; height: 24px; }
.vb-pausa { position: relative; }
.vb-pausa::before { content: ""; position: absolute; inset: -10px; }
.en-pausa *, .en-pausa *::before, .en-pausa *::after { animation-play-state: paused !important; }
.franja { background: var(--bx-fondo); border-top: 1px solid var(--bx-borde); border-bottom: 1px solid var(--bx-borde); }
.franja-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 30px; padding-bottom: 30px; }
.franja-datos > div { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 20px; }
.franja-datos > div + div { border-left: 1px solid var(--bx-borde); }
.fd-ic svg { display: block; width: 44px; height: 44px; fill: none; stroke: var(--bx-azul); stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; }
.franja-datos b { display: block; font-size: 19px; font-weight: 700; color: var(--bx-navy); line-height: 1.25; }
.franja-datos small { display: block; margin-top: 2px; font-size: 16px; color: var(--bx-texto-2); line-height: 1.35; }
@media (max-width: 860px) {
.franja-datos { grid-template-columns: minmax(0, 1fr); max-width: 340px; padding-top: 18px; padding-bottom: 18px; }
.franja-datos > div { justify-content: flex-start; padding: 12px 0; }
.franja-datos > div + div { border-left: 0; border-top: 1px solid var(--bx-borde); }
.fd-ic svg { width: 36px; height: 36px; }
.franja-datos b { font-size: 17px; }
.franja-datos small { font-size: 15px; }
}
.pd-codigo { width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; background: var(--bx-azul-100);
color: var(--bx-azul); display: grid; place-items: center; }
.pd-codigo svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.app-dibujo { position: relative; background: var(--bx-blanco); border-radius: 8px; padding: 16px 18px 18px;
display: grid; gap: 12px; overflow: hidden; font-size: 15px; }
.ad-barra { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bx-borde); }
.ad-logo { width: 26px; height: 26px; border-radius: 8px; background: var(--bx-azul); color: #fff; font-weight: 800;
display: grid; place-items: center; font-family: var(--bx-letra-titulos); font-size: 15px; }
.ad-tit { font-weight: 700; flex: 1; }
.ad-hora { color: var(--bx-texto-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ad-buscar { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--bx-azul); border-radius: 10px;
padding: 9px 12px; color: var(--bx-texto-2); transition: background .25s, color .25s; min-width: 0; }
.ad-buscar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-buscar svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--bx-azul); stroke-width: 1.8; stroke-linecap: round; }
.ad-buscar.bip { background: var(--bx-azul-100); color: var(--bx-navy); }
.ad-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 126px; align-content: start; }
.ad-items li { display: flex; justify-content: space-between; gap: 10px; background: var(--bx-fondo); border-radius: 9px; padding: 9px 12px; }
.ad-items li span { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ad-items li.entra { animation: adEntra .35s ease both; }
@keyframes adEntra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ad-pie { display: grid; gap: 10px; }
.ad-medios { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-medios span { border: 1px solid var(--bx-borde); border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--bx-texto-2); }
.ad-medios span.sel { border-color: var(--bx-azul); color: var(--bx-azul); font-weight: 600; background: var(--bx-azul-100); }
.ad-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ad-total small { display: block; color: var(--bx-texto-2); font-size: 12px; }
.ad-total b { font-size: 26px; font-variant-numeric: tabular-nums; font-family: var(--bx-letra-titulos); }
.ad-cobrar { background: var(--bx-azul); color: #fff; font-weight: 700; border-radius: 10px; padding: 12px 24px;
transition: transform .12s, box-shadow .2s; box-shadow: 0 6px 16px rgba(30,69,251,.28); }
.ad-cobrar.toca { transform: scale(.94); box-shadow: 0 0 0 6px rgba(30,69,251,.18); }
.ad-listo { position: absolute; left: 18px; right: 18px; bottom: 18px; margin: 0; background: var(--bx-lima); color: var(--bx-navy);
font-weight: 700; text-align: center; border-radius: 10px; padding: 12px; transition: opacity .3s, transform .3s; }
.ad-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; fill: var(--bx-navy); stroke: #fff; stroke-width: 1.4;
filter: drop-shadow(0 2px 3px rgba(11,16,38,.3)); opacity: 0; pointer-events: none;
transition: transform .8s cubic-bezier(.4,.1,.2,1), opacity .3s; }
.compu.anima .ad-listo { opacity: 0; transform: translateY(10px); }
.compu.anima .ad-listo.ver { opacity: 1; transform: none; }
.compu.anima .ad-cursor { opacity: 1; }
.compu.anima .ad-cursor.fuera { opacity: 0; }
.pd-flotante b { transition: color .3s; }
.pd-flotante.sube b { color: var(--bx-lima-900, #4D5E0A); }
@media (max-width: 560px) { .app-dibujo { padding: 12px; font-size: 14px; } .ad-total b { font-size: 22px; } .ad-items { min-height: 114px; } }
.acordeon { max-width: 760px; margin: 0 auto; display: grid; background: var(--bx-blanco); border: 1px solid var(--bx-borde);
border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(11,16,38,.05); }
.ac-item { position: relative; overflow: hidden; background: var(--bx-blanco); transition: background .3s; }
.ac-item + .ac-item { border-top: 1px solid var(--bx-borde); }
.ac-item.abierto { background: #FAFBFE; }
.ac-item h3 { margin: 0; font: inherit; }
.ac-boton { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 18px;
min-height: 64px; cursor: pointer; font-family: var(--bx-letra); font-weight: 700; font-size: 18px; line-height: 1.35;
color: var(--bx-navy); }
.ac-boton:hover .ac-texto { color: var(--bx-azul); }
.ac-boton:focus-visible { outline: 3px solid var(--bx-azul); outline-offset: -3px; border-radius: 10px; }
.ac-texto { flex: 1; transition: color .2s; }
.problemas .pb-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
background: #FFF6F1; color: var(--bx-atencion, #C2410C); }
.problemas .pb-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ac-signo { display: none; flex-shrink: 0; position: relative; width: 32px; height: 32px; border-radius: 50%;
background: var(--bx-fondo); transition: transform .3s, background .3s; }
.ac-signo::before, .ac-signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
border-radius: 2px; background: var(--bx-navy); transition: transform .3s; }
.ac-signo::after { transform: rotate(90deg); }
.ac-item.abierto .ac-signo { background: var(--bx-lima); transform: rotate(180deg); }
.ac-item.abierto .ac-signo::after { transform: rotate(0deg); }
.ac-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; }
.ac-panel > div { overflow: hidden; }
.ac-panel p { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0 18px 16px 72px; font-size: 16px; line-height: 1.5;
color: var(--bx-texto-2); }
.ac-panel p::before { content: "✓"; display: inline-grid; place-items: center; flex: 0 0 22px; height: 22px; margin-top: 2px;
border-radius: 50%; background: var(--bx-lima); color: var(--bx-navy); font-size: 13px; font-weight: 800; }
.ac-vivo .ac-signo { display: block; }
.ac-vivo .ac-item:not(.abierto) .ac-panel { grid-template-rows: 0fr; }
.ac-vivo .ac-item:not(.abierto) .ac-panel > div { visibility: hidden; transition: visibility 0s .4s; }
@media (max-width: 560px) {
.ac-boton { gap: 12px; padding: 11px 14px; font-size: 16px; }
.problemas .pb-ic { width: 36px; height: 36px; } .problemas .pb-ic svg { width: 20px; height: 20px; }
.ac-panel p { padding: 0 14px 14px 62px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .ac-panel { transition: none !important; } }
.js-anima .problemas .ac-item { opacity: 0; transform: translateY(18px); }
.js-anima .problemas .ac-item.visto { opacity: 1; transform: none;
transition: opacity .5s ease, transform .5s ease, background .3s; }
.seccion.compacta { padding-top: 72px; }
.seccion.compacta .titulo-seccion { margin-bottom: 28px; }
.seccion.compacta { padding-bottom: 0; }
.seccion.compacta + .seccion { padding-top: 88px; }
@media (max-width: 720px) { .seccion.compacta { padding-top: 48px; } .seccion.compacta .titulo-seccion { margin-bottom: 20px; }
.seccion.compacta + .seccion { padding-top: 48px; } }
.compu:not(.anima) .ad-listo { display: none; }
@media (max-width: 560px) { .compu-mascota { bottom: -8px; left: -10px; width: 19%; } }
.compu-pantalla.ventana { background: var(--bx-blanco); padding: 0; border-radius: 14px; overflow: hidden;
border: 1px solid var(--bx-borde); box-shadow: 0 30px 80px rgba(11,16,38,.16); }
.ventana-barra { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #EEF1F7;
border-bottom: 1px solid var(--bx-borde); }
.vb-puntos { display: flex; gap: 7px; flex-shrink: 0; }
.vb-puntos i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.vb-puntos i:nth-child(2) { background: #FEBC2E; }
.vb-puntos i:nth-child(3) { background: #28C840; }
.vb-url { flex: 1; min-width: max-content; max-width: 260px; background: var(--bx-blanco); border: 1px solid var(--bx-borde); border-radius: 99px;
padding: 4px 14px; font-size: 13px; color: var(--bx-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ventana .app-dibujo { border-radius: 0; }
@media (min-width: 1024px) {
.ventana .app-dibujo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas:
"barra barra" "buscar pie" "items pie"; grid-template-rows: auto auto 1fr;
column-gap: 18px; align-items: start; }
.ventana .ad-barra { grid-area: barra; }
.ventana .ad-buscar { grid-area: buscar; }
.ventana .ad-items { grid-area: items; }
.ventana .ad-pie { grid-area: pie; align-self: stretch; background: var(--bx-fondo); border-radius: 12px; padding: 14px;
display: flex; flex-direction: column; gap: 14px; }
.ventana .ad-cuenta { flex-direction: column; align-items: stretch; gap: 12px; margin-top: auto; }
.ventana .ad-cobrar { text-align: center; }
.ventana .ad-medios { flex-wrap: nowrap; gap: 2px; padding: 3px; background: var(--bx-blanco);
border: 1px solid var(--bx-borde); border-radius: 10px; }
.ventana .ad-medios span { flex: 1 1 auto; text-align: center; border: 0; border-radius: 7px; padding: 6px 4px; white-space: nowrap; }
.ventana .ad-buscar { font-size: 14px; gap: 8px; padding: 9px 10px; }
.ventana .ad-listo { grid-area: pie; left: 14px; right: 14px; bottom: 14px; padding: 8px 10px;
font-size: 14px; line-height: 1.3; }
.ventana .ad-listo .al-mas { display: block; font-weight: 500; }
.ventana .ad-listo i { display: none; }
}
.ad-listo i { font-style: normal; }
.mini-ventana { margin: 18px 0 14px; border: 1px solid var(--bx-borde); border-radius: 12px; overflow: hidden;
background: var(--bx-blanco); box-shadow: 0 14px 34px rgba(11,16,38,.08); }
.mini-ventana .ventana-barra { padding: 8px 12px; gap: 10px; }
.mini-ventana .vb-puntos { gap: 6px; }
.mini-ventana .vb-puntos i { width: 9px; height: 9px; }
.mini-ventana .vb-url { font-size: 12px; padding: 2px 12px; max-width: 200px; }
.mm-cuerpo { position: relative; padding: 16px; }
.mm-botones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
gap: 8px; transition: opacity .3s; }
.mm-botones.cambia { opacity: 0; }
.mm-botones li { border: 1px solid var(--bx-borde); background: var(--bx-fondo); border-radius: 10px; padding: 10px 4px;
text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap;
transition: opacity .35s, transform .35s, box-shadow .2s, border-color .2s, background .2s; }
.mm-botones li[hidden] { display: none; }
.mm-botones li.toca { transform: scale(.92); transition-duration: .12s; }
.mm-botones li { position: relative; }
.mm-botones li::after { content: "×"; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
background: var(--bx-navy); color: #fff; font-size: 15px; font-weight: 700; line-height: 19px; text-align: center;
opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s; pointer-events: none; }
.mm-botones.editando li::after { opacity: 1; transform: none; }
.mm-botones.editando li { animation: mmTiembla .3s ease-in-out infinite alternate; }
.mm-botones.editando li:nth-child(2n) { animation-delay: -.15s; }
.mm-botones.editando li.alza { animation: none; }
.mm-botones li.toca::after { background: var(--bx-atencion, #C2410C); transform: scale(.85); }
@keyframes mmTiembla { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
.mm-botones li.fuera { opacity: 0; transform: scale(.85); }
.mm-botones li.alza { position: relative; z-index: 2; background: var(--bx-blanco); border-color: var(--bx-azul);
box-shadow: 0 10px 24px rgba(11,16,38,.18);
transition: transform .8s cubic-bezier(.4,.1,.2,1), box-shadow .2s, border-color .2s, background .2s; }
.mini-ventana .ad-cursor { z-index: 3; }
.mini-ventana.anima .ad-cursor { opacity: 1; }
.mini-ventana.anima .ad-cursor.fuera { opacity: 0; }
@media (max-width: 560px) { .manera-tarjeta { padding: 22px; } .mm-cuerpo { padding: 12px; } }
.trae { max-width: 1040px; margin: 0 auto; }
.trae-pestanas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.trae-pestanas [role="tab"] { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
border-radius: 14px; border: 1.5px solid var(--bx-borde); background: transparent; cursor: pointer; font-weight: 700; font-size: 17px;
color: var(--bx-navy); transition: background .2s, border-color .2s, box-shadow .2s, color .2s; }
.trae-pestanas [role="tab"]:hover { background: var(--bx-blanco); }
.trae-pestanas [role="tab"]:focus-visible { outline: 3px solid var(--bx-azul); outline-offset: 2px; }
.trae-pestanas [role="tab"][aria-selected="true"] { background: var(--bx-blanco); border-color: var(--bx-azul); color: var(--bx-azul);
box-shadow: 0 10px 26px rgba(30,69,251,.12); }
.tp-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--bx-azul-100);
color: var(--bx-azul); transition: background .2s, color .2s; }
.tp-ic svg, .tg-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[aria-selected="true"] .tp-ic { background: var(--bx-azul); color: #fff; }
.trae-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center;
background: var(--bx-blanco); border: 1px solid var(--bx-borde); border-radius: 22px; padding: 36px 40px; }
.trae-panel + .trae-panel { margin-top: 16px; }
.trae-panel h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
.trae-grupos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.trae-grupos li { display: flex; gap: 14px; align-items: flex-start; }
.tg-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--bx-azul-100);
color: var(--bx-azul); }
.trae-grupos b { display: block; font-size: 17px; line-height: 1.35; }
.trae-grupos div > span { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.5; color: var(--bx-texto-2); }
.trae-mas { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; cursor: pointer;
font-weight: 700; font-size: 15.5px; color: var(--bx-azul); }
.trae-mas::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.trae-mas[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.trae-mas:hover { text-decoration: underline; }
.trae-mas:focus-visible { outline: 3px solid var(--bx-azul); outline-offset: 3px; border-radius: 6px; }
.trae-lista { list-style: none; margin: 14px 0 0; padding: 16px 0 0; border-top: 1px solid var(--bx-borde); columns: 2; column-gap: 28px;
font-size: 15px; line-height: 1.45; color: var(--bx-texto-2); }
.trae-lista li { break-inside: avoid; position: relative; padding: 0 0 8px 16px; }
.trae-lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--bx-azul); }
.trae-dibujo { margin: 0; width: 100%; max-width: 380px; justify-self: center; box-shadow: 0 24px 60px rgba(11,16,38,.10); }
.td-cuerpo { display: grid; gap: 8px; padding: 18px; font-size: 14.5px; }
.td-tit { margin: 0 0 4px; font-weight: 700; color: var(--bx-azul); }
.td-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
background: var(--bx-fondo); }
.td-fila span, .td-fila b { white-space: nowrap; }
.td-fila > span:first-child { color: var(--bx-texto-2); }
.td-pestanas, .td-medios { display: flex; gap: 6px; flex-wrap: wrap; }
.td-pestanas span, .td-medios span { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--bx-borde); font-size: 13px; color: var(--bx-texto-2); }
.td-pestanas span.sel, .td-medios span.sel { border-color: var(--bx-azul); color: var(--bx-azul); font-weight: 600; background: var(--bx-azul-100); }
.td-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; }
.td-total b { font-size: 24px; font-variant-numeric: tabular-nums; }
.td-ok { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bx-bien-fondo); color: var(--bx-bien-texto); font-weight: 700; }
.td-link { margin: 4px 0 0; color: var(--bx-azul); font-weight: 600; }
.td-llave { position: relative; flex-shrink: 0; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 99px;
background: var(--bx-borde); transition: background .25s, box-shadow .2s; }
.td-llave.toca { box-shadow: 0 0 0 7px rgba(30,69,251,.18); }
.td-llave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 2px rgba(11,16,38,.2); transition: left .2s ease; }
.td-llave.si { background: var(--bx-azul); }
.td-llave.si::after { left: 19px; }
.td-llave:focus-visible { outline: 3px solid var(--bx-azul); outline-offset: 2px; }
.td-nota { margin: 6px 2px 0; font-size: 14px; color: var(--bx-texto-2); min-height: 1.4em; }
.td-nota.listo { color: var(--bx-bien-texto); font-weight: 600; animation: tdEntra .35s ease both; }
.trae-dibujo.anima .td-cuerpo > *:not(.td-tit):not(.td-nota) { animation: tdEntra .45s ease both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
.trae-dibujo.anima .etiqueta, .trae-dibujo.anima .td-ok { animation: tdPop .4s cubic-bezier(.2, 1.4, .4, 1) both;
animation-delay: calc(var(--i, 0) * 110ms + 380ms); }
@keyframes tdEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tdPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .td-llave, .td-llave::after { transition: none; } }
.trae-panel.entra { animation: trEntra .35s ease both; }
@keyframes trEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
.trae-panel { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 22px 18px; }
.trae-dibujo { max-width: 340px; }
.trae-lista { columns: 1; }
}
@media (max-width: 760px) {
.trae-pestanas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trae-pestanas [role="tab"] { padding: 12px 10px; font-size: 14px; gap: 8px; }
.tp-ic { width: 34px; height: 34px; } .tp-ic svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .trae-panel.entra { animation: none; } }
.destacado { background: var(--bx-azul-100); border-radius: 28px; padding: 56px; }
@media (max-width: 860px) { .destacado { padding: 32px 20px; border-radius: 20px; } }
.mp-dibujo { margin: 0; width: 100%; max-width: 420px; justify-self: center; }
.mp-dibujo .mini-ventana { margin: 0; box-shadow: 0 24px 60px rgba(11,16,38,.12); }
.mp-cuerpo { display: grid; gap: 14px; padding: 20px; }
.mp-venta { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--bx-borde); border-radius: 12px; background: var(--bx-fondo); }
.mp-rot { font-size: 13px; font-weight: 600; color: var(--bx-texto-2); }
.mp-monto { font-size: 30px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mp-espera { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 14px; color: var(--bx-texto-2); }
.mp-espera.listo { color: #0A7C3D; font-weight: 700; }
.mp-espera .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mpPunto 1s ease-in-out infinite; }
.mp-espera .punto:nth-child(2) { animation-delay: .15s; } .mp-espera .punto:nth-child(3) { animation-delay: .3s; }
@keyframes mpPunto { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.mp-cartel { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; color: #fff;
background: #0A7C3D; border: 3px solid #076330; box-shadow: 0 16px 40px rgba(10,124,61,.30); }
.mp-cartel small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mp-cartel b { display: block; font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mp-cartel em { font-style: normal; font-size: 11.5px; font-weight: 700; opacity: .9; }
.mp-ic { position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
background: rgba(255,255,255,.18); }
.mp-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); opacity: 0; }
.mp-anima .mp-cartel { opacity: 0; transform: translateY(-10px) scale(.97); transition: opacity .25s ease, transform .25s ease; }
.mp-anima .mp-cartel.ver { opacity: 1; transform: none; }
.mp-anima .mp-cartel.ver .mp-ic svg { animation: mpCampana .5s ease-in-out 3; transform-origin: 50% 15%; }
.mp-anima .mp-cartel.ver .mp-onda { animation: mpOnda 1.1s ease-out 3; }
.mp-anima .mp-cartel.ver .mp-onda + .mp-onda { animation-delay: .35s; }
@keyframes mpCampana { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
@keyframes mpOnda { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .mp-espera .punto { animation: none; } }
.destacado h2 .marca-lima { white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px;
background: var(--bx-navy); color: var(--bx-blanco); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }
main:focus { outline: none; }
.trae-panel:focus-visible { outline: 3px solid var(--bx-azul); outline-offset: 6px; border-radius: 12px; }
.se-suma { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--bx-azul-100);
color: var(--bx-azul-700); font-size: 12.5px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
@media (max-width: 420px) {
.trae-pestanas [role="tab"] { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 12px 6px; min-width: 0; }
}
.chip-incluido { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--bx-azul-100);
color: var(--bx-azul-700); font-size: 12.5px; font-weight: 600; vertical-align: 2px; }
.logo-en-titulo { display: inline-block; height: .86em; width: auto; vertical-align: -0.08em; margin-left: .06em; }
.ptoggle { display: flex; width: max-content; max-width: 100%; margin: 0 auto 30px; padding: 4px; gap: 4px; background: #EEF1F7; border-radius: 99px; }
.ptoggle[hidden] { display: none; }
.ptg { border: 0; background: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--bx-navy); padding: 10px 18px;
border-radius: 99px; cursor: pointer; white-space: nowrap; }
.ptg em { font-style: normal; font-size: 12.5px; font-weight: 700; background: var(--bx-lima); color: var(--bx-navy); padding: 2px 8px;
border-radius: 99px; margin-left: 6px; }
.ptg[aria-pressed="true"] { background: var(--bx-blanco); box-shadow: 0 2px 8px rgba(11,16,38,.12); }
.planes2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 820px; margin: 0 auto 28px; }
.pcard { position: relative; background: var(--bx-blanco); border: 1px solid var(--bx-borde); border-radius: 20px; padding: 28px;
display: flex; flex-direction: column; }
.pcard.pro { border: 2px solid var(--bx-azul); box-shadow: 0 18px 40px rgba(30,69,251,.14); }
.pchip { position: absolute; top: -13px; left: 28px; background: var(--bx-lima); color: var(--bx-navy); font-weight: 700; font-size: 13px;
padding: 4px 12px; border-radius: 99px; }
.pcard h3 { font-size: 24px; }
.pdesc { color: var(--bx-texto-2); margin-top: 6px; }
@media (min-width: 721px) { .pdesc { min-height: 4.8em; } }
.pprecio { font-family: var(--bx-letra-titulos); font-weight: 800; font-size: 40px; margin-top: 18px; color: var(--bx-navy); white-space: nowrap; }
.pprecio small { font-family: var(--bx-letra); font-size: 16px; font-weight: 500; color: var(--bx-texto-2); margin-left: 8px; }
.panual { font-size: 15px; color: var(--bx-texto-2); margin: 4px 0 20px; min-height: 2.9em; }
.panual b { color: var(--bx-navy); }
.panual .nw { white-space: nowrap; }
.pcard .boton { margin-top: auto; }
.pbtn-sec { background: var(--bx-blanco); color: var(--bx-azul); border: 1.5px solid var(--bx-azul); }
.pbtn-sec:hover { background: var(--bx-azul-100); }
.pcomp { width: 100%; max-width: 820px; margin: 0 auto; border-collapse: separate; border-spacing: 0; background: var(--bx-blanco);
border: 1px solid var(--bx-borde); border-radius: 20px; overflow: hidden; }
.pcomp th, .pcomp td { padding: 13px 18px; border-top: 1px solid var(--bx-borde); text-align: center; font-size: 16px; }
.pcomp thead th, .pcomp thead td { border-top: 0; font-family: var(--bx-letra-titulos); font-size: 17px; }
.pcomp tbody th { text-align: left; font-weight: 500; color: var(--bx-navy); }
.pcomp td:nth-child(2), .pcomp thead th:nth-child(2) { width: 22%; }
.pcomp td:last-child, .pcomp .cpro { background: #F3F6FF; width: 22%; }
.pcomp .cpro { color: var(--bx-azul); }
.pi { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 14px; }
.pi.si { background: var(--bx-lima); color: var(--bx-navy); }
.pi.no { background: #EEF0F5; color: #8A91A8; font-size: 12px; }
#plan .debajo.centrado { margin-top: 16px; }
.chip-pro { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--bx-azul); color: var(--bx-blanco);
font-size: 12px; font-weight: 700; vertical-align: 2px; font-family: var(--bx-letra); }
@media (max-width: 720px) {
.planes2 { grid-template-columns: minmax(0, 1fr); }
.pcomp th, .pcomp td { padding: 11px 10px; font-size: 15px; }
.ptg { padding: 10px 14px; font-size: 14px; }
}
.ac-texto { display: flex; flex-direction: column; gap: 4px; }
.ac-etq { display: none; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; }
.ac-sin { color: var(--bx-atencion); }
.ac-con-etq { color: var(--bx-azul); }
.ac-con-etq .chip-pro { text-transform: none; letter-spacing: 0; vertical-align: 1px; }
.acordeon:not(.ac-vivo) .ac-etq, .ac-item.abierto .ac-etq { display: block; }
.ac-con { margin: 4px 18px 18px 56px; padding: 14px 16px; background: #F1F4FF; border-radius: 12px; }
.ac-con .ac-etq { margin-bottom: 6px; }
.ac-panel .ac-con p { display: block; padding: 0; margin: 0; font-size: 17px; line-height: 1.5; color: var(--bx-navy); font-weight: 400; }
.ac-panel .ac-con p::before { content: none; }
.ac-graf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; font-size: 14px; }
.ag-lista, .ag-cuenta { flex-direction: column; align-items: stretch; gap: 6px; }
.ag-lista span, .ag-cuenta span { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px;
border-radius: 9px; background: var(--bx-blanco); }
.ag-lista .etiqueta { font-size: 12.5px; padding: 2px 8px; }
.ag-falta { color: var(--bx-atencion); font-weight: 700; }
@media (max-width: 560px) {
.ac-boton { font-size: 16.5px; min-height: 56px; }
.ac-con { margin: 2px 14px 14px 46px; }
.ac-panel .ac-con p { font-size: 16px; }
.ac-graf { flex-direction: column; align-items: stretch; }
}
.td-fila > span:first-child b { color: var(--bx-navy); }
.td-fila small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 500; color: var(--bx-texto-2); }
#transferencia { padding-bottom: 48px; }
#transferencia + .seccion { padding-top: 48px; }
@media (max-width: 720px) { #transferencia { padding-bottom: 32px; } #transferencia + .seccion { padding-top: 32px; } }
.pie-web .derechos { opacity: .92; }
.pbajo { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--bx-texto-2); }
.portada .bajada .b-stock { display: block; margin-top: 8px; font-size: .86em; }
.compu-real .ver-grande { display: block; }
.compu-real .sistema-foto { display: block; width: 100%; height: auto; border-radius: 0; }
.chip-titulo { font-size: 14px; padding: 3px 10px; vertical-align: middle; position: relative; top: -4px; }
.trae-panel > .trae-muestra { justify-self: center; width: 100%; }
.trae-panel > .factura-dibujo { max-width: 420px; box-shadow: 0 24px 60px rgba(11,16,38,.08); }
.sistema-captura { margin: 0; max-width: 400px; }
.sistema-captura .mini-ventana { margin: 0; background: var(--bx-blanco); box-shadow: 0 24px 60px rgba(11,16,38,.10); }
.sistema-captura img { display: block; width: 100%; height: auto; }
.sistema-captura figcaption { margin-top: 12px; text-align: center; font-size: 14.5px; color: var(--bx-texto-2); }
.trae-panel.con-lista .trae-grupos { display: none; }
.trae-panel.con-lista .trae-lista { margin-top: 18px; }
.pcomp .pgrupo th { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--bx-azul-700); background: var(--bx-fondo); padding-top: 14px; padding-bottom: 10px; }
#plan .pprueba { margin: 22px auto 34px; max-width: 560px; font-size: 15px; }
.pcomp tbody th small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; line-height: 1.4;
color: var(--bx-texto-2); }
.form-nota { margin: 12px 0 0; font-size: 14px; color: var(--bx-texto-2); text-align: center; }
.franja-datos div, .planes2 > *, .trae-panel > * { min-width: 0; }
.pprecio { white-space: normal; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.pprecio small { margin-left: 0; white-space: nowrap; }
.arriba .boton.chico { white-space: nowrap; }
@media (max-width: 400px) {
.arriba .ancho { gap: 10px; }
.arriba .logo img { width: 88px; }
.arriba .boton.chico { padding: 0 12px; font-size: 14px; }
}
.debajo.condiciones { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.debajo.condiciones span::before { content: "✓"; margin-right: 6px; font-weight: 800; color: var(--bx-azul); }
.nota-chica { margin: 14px 0 0; font-size: 14px; color: var(--bx-texto-2); }
.pasa { list-style: none; max-width: 760px; margin: 0 auto; padding: 0; display: grid; gap: 14px; }
.pasa-item { display: flex; gap: 18px; align-items: flex-start; background: var(--bx-blanco); border: 1px solid var(--bx-borde);
border-radius: 16px; padding: 18px 22px; }
.pasa-item .pb-ic { flex-shrink: 0; margin-top: 2px; }
.pasa-prob { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--bx-navy); }
.pasa-con { position: relative; margin: 6px 0 0; padding-left: 22px; font-size: 16px; line-height: 1.45; color: var(--bx-azul-700); }
.pasa-con::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--bx-azul); }
.pasa-con .chip-pro { vertical-align: 1px; }
.cambia { max-width: 1000px; margin: 0 auto; background: var(--bx-blanco); border: 1px solid #DCE2F0; border-radius: 20px; overflow: hidden; }
.cambia ul { list-style: none; margin: 0; padding: 0; }
.cb-cab, .cb-fila { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.25fr); }
.cb-cab > span { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 28px;
font-family: var(--bx-letra-titulos); font-size: 19px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cb-cab > span:first-child { color: var(--bx-texto-2); grid-column: 1 / 3; }
.cb-cab > span:last-child { color: var(--bx-azul); background: #F4F7FF; }
.cb-ok { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bx-lima); }
.cb-ok svg { width: 17px; height: 17px; fill: none; stroke: var(--bx-navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cb-fila { border-top: 1px solid #E3E8F5; }
.cb-antes { margin: 0; padding: 26px 8px 26px 36px; align-self: center; font-size: 20px; font-weight: 500; line-height: 1.35; color: #2B3350;
text-wrap: balance; }
.cb-con > span:last-child, .cb-con b { text-wrap: balance; }
.cb-flecha { display: grid; place-items: center; }
.cb-flecha svg { width: 34px; height: 34px; fill: none; stroke: var(--bx-azul); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-con { padding: 24px 32px; background: #F4F7FF; }
.cb-con b { display: block; font-family: var(--bx-letra-titulos); font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--bx-navy); }
.cb-con b .chip-pro { vertical-align: 3px; margin-left: 6px; }
.cb-con > span:last-child { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--bx-texto-2); }
.cb-et { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) {
.cambia { border-radius: 16px; }
.cb-cab { display: none; }
.cb-fila { grid-template-columns: minmax(0, 1fr); }
.cb-fila:first-child { border-top: 0; }
.cb-flecha { display: none; }
.cb-antes { padding: 18px 18px 14px; font-size: 17px; }
.cb-con { padding: 14px 18px 18px; }
.cb-con b { font-size: 18px; }
.cb-con > span:last-child { font-size: 15.5px; }
.cb-et { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin-bottom: 4px;
font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A93AE; }
.cb-con .cb-et { color: var(--bx-azul); }
}
.js-anima .problemas .cb-fila { opacity: 0; transform: translateY(18px); }
.js-anima .problemas .cb-fila.visto { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.js-anima .problemas .pasa-item { opacity: 0; transform: translateY(18px); }
.js-anima .problemas .pasa-item.visto { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (max-width: 560px) {
.pasa-item { gap: 14px; padding: 16px; }
.pasa-prob { font-size: 17px; }
.pasa-con { font-size: 15.5px; }
}
.trae-panel > .trae-muestra { max-width: 330px; }
.trae-panel > .cierre-ejemplo.trae-muestra { max-width: 310px; }
.trae-panel .cierre-cuerpo { padding: 14px 16px 16px; }
.trae-panel .cierre-titulo { font-size: 15px; margin-bottom: 8px; }
.trae-panel .cierre-cuenta { margin-bottom: 8px; }
.trae-panel .cierre-cuenta div { font-size: 12.5px; padding: 2px 0; }
.trae-panel .cierre-efectivo { padding: 0 12px; border-radius: 10px; }
.trae-panel .cierre-efectivo div { font-size: 13.5px; padding: 7px 0; }
.trae-panel .cierre-lugar { margin-top: 10px; }
.trae-panel .cierre-resultado { font-size: 15px; padding: 9px 12px; border-radius: 10px; }
.trae-panel .cierre-resultado small { font-size: 12.5px; }
.trae-panel .cierre-botones { margin-top: 10px; border-radius: 12px; }
.trae-panel .cierre-botones button { min-height: 36px; font-size: 13.5px; border-radius: 9px; }
.trae-panel > .mm-muestra { margin: 0; background: var(--bx-blanco); box-shadow: 0 24px 60px rgba(11,16,38,.10); }
.trae-grupos div > span { font-size: 15px; }
.portada .bajada { text-wrap: balance; }
.pm-muestra { margin: 0; background: var(--bx-blanco); box-shadow: 0 24px 60px rgba(11,16,38,.10); }
.pm-cuerpo { padding: 14px 16px 8px; font-size: 14px; color: var(--bx-navy); }
.pm-cuerpo p { margin: 0; }
.pm-cab b { font-size: 16px; }
.pm-rol { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700;
background: var(--bx-azul-100); color: var(--bx-azul-700); vertical-align: 2px; }
.pm-dato { margin-top: 2px !important; font-size: 12.5px; color: var(--bx-texto-2); }
.pm-botones { display: flex; gap: 6px; margin: 9px 0 4px !important; }
.pm-b { border: 1px solid var(--bx-borde); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; }
.pm-b.pm-azul { border-color: var(--bx-azul); color: var(--bx-azul); }
.pm-lista { list-style: none; margin: 0; padding: 0; }
.pm-lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0;
border-bottom: 1px solid var(--bx-borde); }
.pm-lista .td-llave { width: 36px; height: 21px; }
.pm-lista .td-llave::after { width: 15px; height: 15px; }
.pm-lista .td-llave.si::after { left: 18px; }
.pm-cuerpo .td-nota { margin: 8px 0 2px; font-size: 13px; }
.rg-lista { list-style: none; margin: 10px 0 6px; padding: 0; }
.rg-lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0;
border-bottom: 1px solid var(--bx-borde); }
.rg-lista li:last-child { border-bottom: 0; }
.rg-hora { font-size: 12px; color: var(--bx-texto-2); line-height: 1.25; }
.rg-hora b { display: block; font-size: 13.5px; color: var(--bx-navy); font-variant-numeric: tabular-nums; }
.rg-que { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.rg-que small { display: block; font-weight: 400; font-size: 12.5px; color: var(--bx-texto-2); }
.rg-lista li.rg-oculto { visibility: hidden; }
.rg-lista li.rg-entra { animation: rg-entra .45s ease-out; }
@keyframes rg-entra { from { opacity: 0; transform: translateY(-8px); background: var(--bx-azul-100); }
to { opacity: 1; transform: none; background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rg-lista li.rg-entra { animation: none; } }
.ayuda-blue { display: flex; gap: 16px; align-items: center; }
.ayuda-blue img { flex-shrink: 0; width: 76px; height: 76px; object-fit: contain; }
.bo-pasos { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: bo; display: grid; gap: 14px; }
.bo-pasos li { counter-increment: bo; display: flex; gap: 14px; align-items: baseline; font-size: 17px; color: var(--bx-navy); }
.bo-pasos li::before { content: counter(bo); flex-shrink: 0; display: inline-grid; place-items: center; width: 30px; height: 30px;
border-radius: 50%; background: var(--bx-azul); color: var(--bx-blanco); font-weight: 800; font-size: 15px;
transform: translateY(-2px); }
.bo-escena { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px;
align-items: center; }
.bo-papel { background: #FFFDF6; border: 1px solid #E7E1D2; border-radius: 6px; padding: 14px 14px 12px; color: #2B2B2B;
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; line-height: 1.5;
transform: rotate(-3deg); box-shadow: 0 14px 30px rgba(11,16,38,.12); transition: transform .6s ease, opacity .6s ease; }
.bo-papel p { margin: 0; }
.bo-prov { font-weight: 800; font-size: 12px; text-align: center; }
.bo-sub { text-align: center; color: #6B6B6B; margin-bottom: 8px !important; }
.bo-papel table { width: 100%; border-collapse: collapse; border-top: 1px dashed #BDB6A6; border-bottom: 1px dashed #BDB6A6; }
.bo-papel td { padding: 3px 0; white-space: nowrap; }
.bo-papel td + td { text-align: right; padding-left: 6px; }
.bo-total { text-align: right; font-weight: 800; margin-top: 6px !important; }
.bo-pantalla { margin: 0; background: var(--bx-blanco); box-shadow: 0 24px 60px rgba(11,16,38,.10); }
.bo-cuerpo { padding: 12px 14px; font-size: 13px; }
.bo-tit { margin: 0 0 4px; font-weight: 700; color: var(--bx-azul); }
.bo-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; padding: 7px 9px;
border-radius: 8px; background: var(--bx-fondo); }
.bo-fila b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bo-fila i { font-style: normal; color: var(--bx-bien-texto); margin-left: 4px; }
.bo-fila.dudosa { background: var(--bx-atencion-fondo, #FFF4E0); }
.bo-si { padding: 3px 10px; border-radius: 7px; background: var(--bx-azul); color: var(--bx-blanco); font-size: 12px;
transition: transform .12s, box-shadow .2s; }
.bo-si.toca { transform: scale(.9); box-shadow: 0 0 0 6px rgba(30,69,251,.18); }
.bo-estado { min-height: 1.5em; margin: 9px 0 0; font-weight: 700; color: var(--bx-bien-texto); }
.bo-estado.lee { color: var(--bx-texto-2); font-weight: 600; }
.bo-escena.anima .bo-fila { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.bo-escena.anima .bo-fila.ver { opacity: 1; transform: none; }
.bo-escena.anima.leida .bo-lado > .bo-papel { transform: rotate(-3deg) scale(.95); opacity: .7; }
.bo-lado { position: relative; }
.bo-celu, .bo-soltar { display: none; }
.bo-escena.anima .bo-celu { display: block; position: absolute; left: 50%; top: 50%; z-index: 2; width: 52%; min-width: 118px; max-width: 150px;
aspect-ratio: 1 / 2; padding: 6px; border-radius: 22px; background: var(--bx-navy); box-shadow: 0 20px 44px rgba(11,16,38,.32);
opacity: 0; transform: translate(-28%, -40%) rotate(7deg) translateY(70px);
transition: transform .55s cubic-bezier(.3,.8,.3,1), opacity .35s; }
.bo-escena.celu-en .bo-celu { opacity: 1; transform: translate(-28%, -46%) rotate(7deg); }
.bo-celu-pantalla { position: relative; height: 100%; border-radius: 17px; overflow: hidden; background: #161B2E; }
.bo-visor { position: absolute; left: 0; right: 0; top: 12%; aspect-ratio: 3 / 4; }
.bo-visor::after { content: ""; position: absolute; inset: 8%; pointer-events: none;
background: linear-gradient(#fff, #fff) left top / 14px 2px, linear-gradient(#fff, #fff) left top / 2px 14px,
linear-gradient(#fff, #fff) right top / 14px 2px, linear-gradient(#fff, #fff) right top / 2px 14px,
linear-gradient(#fff, #fff) left bottom / 14px 2px, linear-gradient(#fff, #fff) left bottom / 2px 14px,
linear-gradient(#fff, #fff) right bottom / 14px 2px, linear-gradient(#fff, #fff) right bottom / 2px 14px;
background-repeat: no-repeat; }
.bo-disparo { position: absolute; left: 50%; bottom: 7%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #fff;
box-shadow: 0 0 0 3px #161B2E, 0 0 0 5px #fff; transition: transform .12s; }
.bo-disparo.toca { transform: scale(.8); }
.bo-celu-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.bo-celu-flash.dispara { animation: boFlash .5s ease-out; }
@keyframes boFlash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }
.bo-foto { position: absolute; inset: 0; overflow: hidden; background: #D8D1C1; }
.bo-foto .bo-papel { position: absolute; left: 50%; top: 50%; transition: none; box-shadow: 0 4px 10px rgba(11,16,38,.18); }
.bo-foto.vuela { inset: auto; z-index: 3; border: 3px solid #fff; border-radius: 6px; transform-origin: 0 0;
box-shadow: 0 16px 36px rgba(11,16,38,.30); }
.bo-filas { position: relative; }
.bo-escena.anima .bo-soltar { display: flex; position: absolute; inset: 6px 0 0; flex-direction: column; align-items: center;
justify-content: center; gap: 8px; border: 2px dashed #C5CEF3; border-radius: 10px; background: var(--bx-fondo);
color: var(--bx-texto-2); transition: opacity .35s, border-color .2s, background-color .2s; }
.bo-soltar.encima { border-color: var(--bx-azul); background: #EEF1FF; }
.bo-soltar.fuera { opacity: 0; }
.bo-lugar { position: relative; width: 58px; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden;
background: center / 28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3ADCC' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-2-1.5-2 1.5-2-1.5-2 1.5-2-1.5L6 21z'/%3E%3Cpath d='M9 8h6M9 11.5h6M9 15h4'/%3E%3C/svg%3E"); }
.bo-lugar .bo-foto { opacity: 0; }
.bo-soltar.con-foto .bo-lugar .bo-foto { opacity: 1; }
.bo-pasos.anima li::before { background: #E6EBFF; color: var(--bx-azul); transition: background-color .3s, color .3s, box-shadow .3s; }
.bo-pasos.anima li.ahora::before { background: var(--bx-azul); color: var(--bx-blanco); box-shadow: 0 0 0 5px rgba(30,69,251,.18); }
@media (max-width: 720px) {
.bo-escena { grid-template-columns: minmax(0, 1fr); }
.bo-lado { width: 100%; max-width: 240px; justify-self: center; }
}
.au-pantalla { margin: 0; background: var(--bx-blanco); box-shadow: 0 24px 60px rgba(11,16,38,.10); }
@media (min-width: 861px) { .au-columnas > .au-pantalla { order: -1; } }
.au-cuerpo { padding: 14px 16px 16px; font-size: 13px; }
.au-tit { margin: 0 0 10px; font-weight: 700; color: var(--bx-azul); }
.au-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.au-campo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--bx-borde-campo);
border-radius: 8px; background: var(--bx-blanco); color: var(--bx-navy); white-space: nowrap; }
.au-prov svg { width: 14px; height: 14px; fill: none; stroke: var(--bx-texto-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.au-pct { min-width: 64px; font-variant-numeric: tabular-nums; }
.au-pct.escribe { border-color: var(--bx-azul); box-shadow: 0 0 0 3px rgba(30,69,251,.16); }
.au-pct.escribe [data-pct]::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px;
vertical-align: -2px; background: var(--bx-navy); animation: auCursor 1s steps(1) infinite; }
@keyframes auCursor { 50% { opacity: 0; } }
.au-boton { padding: 7px 12px; border-radius: 8px; background: var(--bx-azul); color: var(--bx-blanco); font-weight: 700;
white-space: nowrap; transition: transform .12s, box-shadow .2s; }
.au-boton.toca { transform: scale(.94); box-shadow: 0 0 0 6px rgba(30,69,251,.18); }
.au-tabla { width: 100%; margin-top: 14px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.au-tabla th { padding: 0 6px 6px; text-align: right; font-size: 12px; font-weight: 600; color: var(--bx-texto-2); }
.au-tabla th:first-child, .au-tabla td:first-child { text-align: left; padding-left: 0; }
.au-tabla td { padding: 8px 6px; text-align: right; border-top: 1px solid #E6E9F2; white-space: nowrap; }
.au-tabla td:first-child { white-space: normal; }
.au-tabla td:last-child, .au-tabla th:last-child { padding-right: 0; }
.au-val, .au-gan { display: inline-block; padding: 1px 5px; margin-right: -5px; border-radius: 5px;
transition: background-color .5s ease, color .3s ease; }
.au-val { font-weight: 700; }
.au-val.sube { background: #E6EBFF; color: var(--bx-azul); }
.au-gan.igual { background: var(--bx-bien-fondo); color: var(--bx-bien-texto); font-weight: 700; }
.au-mas { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid #E6E9F2; color: var(--bx-texto-2); font-size: 12px; }
.au-estado { min-height: 1.5em; margin: 10px 0 0; font-weight: 700; color: var(--bx-bien-texto); }
.au-pantalla.anima .au-estado { opacity: 0; transition: opacity .35s; }
.au-pantalla.anima .au-estado.ver { opacity: 1; }
@media (max-width: 400px) {
.au-cuerpo { padding: 12px; font-size: 12.5px; }
.au-tabla td, .au-tabla th { padding-left: 3px; padding-right: 3px; }
}
.blue-saluda { transform-origin: 50% 90%; }
.preguntas details[open] .blue-saluda { animation: blueSaluda 1.6s ease-in-out 1, blueFlota 3.2s ease-in-out 1.6s infinite; }
@keyframes blueSaluda { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-10deg); } 30% { transform: rotate(8deg); }
45% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
@keyframes blueFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .preguntas details[open] .blue-saluda { animation: none; } }
.formulario .campo-ayuda { margin: -2px 0 8px; font-size: 14px; color: var(--bx-texto-2); line-height: 1.45; }
.antes-faq { margin-top: 6px !important; font-size: 15px !important; }
.ast { font-size: .8em; margin-left: 1px; color: var(--bx-azul); font-weight: 700; }
.nota-ast { margin-top: 18px; font-size: 13.5px; }
.pdest { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--bx-borde); display: grid; gap: 10px; }
.pdest li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.45; color: var(--bx-navy); }
.pdest li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--bx-azul); }
.pdest-pro li::before { color: var(--bx-lima-900, #4D5E0A); }
.compu-real .ver-grande { position: relative; overflow: hidden; }
.compu-real.con-replica .sistema-foto { visibility: hidden; }
.con-movimiento .compu-real .sistema-foto { visibility: hidden; }
.vr { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; transform-origin: 0 0;
transform: scale(var(--k, .6)); background: #F5F7FB; color: #0B1026; overflow: hidden; pointer-events: none;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 18px; line-height: 1.2;
-webkit-font-smoothing: antialiased; }
.vr * { box-sizing: border-box; }
.vr svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vr-cab { position: absolute; left: 0; top: 0; width: 1000px; height: 54px; background: #1E45FB; border-bottom: 3px solid #CDEB3C;
color: #fff; }
.vr-logo { position: absolute; left: 16px; top: 9px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #1E45FB;
font: 800 23px/34px "Sora", "Inter", sans-serif; text-align: center; }
.vr-nombre { position: absolute; left: 62px; top: 15px; font-size: 20px; font-weight: 700; }
.vr-fact { position: absolute; right: 18px; top: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.vr-fact small { font-size: 11px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.vr-fact span { font-size: 17px; font-weight: 700; border-radius: 6px; padding: 0 5px; margin-right: -5px; transition: background-color 1.2s; }
.vr-fact span.destello { background: rgba(205,235,60,.55); transition: none; }
.vr-buscar { position: absolute; left: 18px; right: 18px; top: 70px; height: 54px; border: 2px solid #C5C9D8; border-radius: 12px;
background: #fff; display: flex; align-items: center; padding: 0 18px; gap: 14px; font-size: 19px; color: #6B7280;
transition: border-color .15s, box-shadow .15s; }
.vr-buscar > svg { width: 24px; height: 24px; color: #8A93AE; }
.vr-buscar.foco { border-color: #1E45FB; box-shadow: 0 0 0 3px rgba(30,69,251,.12); }
.vr-txt.lleno { color: #0B1026; letter-spacing: .02em; }
.vr-tabla { position: absolute; left: 18px; right: 18px; top: 138px; height: 214px; background: #fff; border: 1px solid #DCE1EC;
border-radius: 14px; overflow: hidden; }
.vr-tcab { height: 38px; background: #F5F7FB; border-bottom: 1px solid #E3E7F0; position: relative; font-size: 15px; color: #5A6280; font-weight: 600; }
.vr-tcab > span { position: absolute; top: 10px; }
.vr-tcab .c-art { left: 18px; } .vr-tcab .c-cant { left: 616px; } .vr-tcab .c-sub { right: 22px; }
.vr-fila { position: relative; height: 58px; border-bottom: 1px solid #E3E7F0; transition: background-color 1.8s; }
.vr-fila.nueva { background: #EEF9CC; transition: none; }
.vr-fila > span { position: absolute; top: 50%; transform: translateY(-50%); }
.vr-art { left: 18px; font-weight: 700; font-size: 19px; white-space: nowrap; }
.vr-menos, .vr-mas { width: 32px; height: 32px; border-radius: 50%; background: #EEF0F5; color: #3D4350; display: grid;
place-items: center; font-size: 19px; font-weight: 700; }
.vr-menos { left: 576px; } .vr-mas { left: 678px; }
.vr-cant { left: 616px; width: 54px; height: 34px; border: 1.5px solid #9AA3B5; border-radius: 8px; display: grid; place-items: center;
font-weight: 800; font-size: 19px; background: #fff; }
.vr-sub { right: 22px; font-weight: 800; font-size: 20px; }
.vr-vacia { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.vr-vacia b { font-size: 21px; }
.vr-vacia span { font-size: 16px; color: #5A6280; }
.vr-tabla.vacia .vr-vacia { display: flex; }
.vr-tabla.vacia .vr-tcab { display: none; }
.vr-abajo { position: absolute; left: 18px; right: 18px; top: 366px; height: 245px; background: #fff; border: 1px solid #DCE1EC; border-radius: 16px; }
.vr-total { position: absolute; left: 104px; top: 14px; }
.vr-total > small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .3em; color: #4B5263; }
.vr-tl { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; }
.vr-tl > span { margin-top: 8px; font-size: 26px; font-weight: 800; color: #1E45FB; }
.vr-tl > b { font-size: 56px; font-weight: 800; color: #1A30C1; line-height: 1; letter-spacing: -.02em; }
.vr-arts { display: block; margin-top: 4px; font-size: 15px; color: #3D4350; }
.vr-abajo.cero .vr-arts { visibility: hidden; }
.vr-dg { position: absolute; left: 380px; top: 14px; width: 300px; transition: opacity .3s; }
.vr-q { margin: 0; font-size: 15px; font-weight: 600; color: #4B5263; }
.vr-paga { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.vr-input { width: 150px; height: 44px; border: 1.5px solid #C9CFE0; border-radius: 12px; display: grid; place-items: center;
font-size: 18px; color: #A9B0C5; background: #fff; transition: width .3s ease, border-color .2s; }
.vr-input.lleno { width: 110px; border: 2.5px solid #1E45FB; color: #0B1026; }
.vr-vuelto { font-size: 19px; font-weight: 800; color: #1E45FB; white-space: nowrap; }
.vr-raps { margin-top: 9px; display: flex; gap: 8px; transition: opacity .2s; }
.vr-raps span { height: 32px; padding: 0 13px; border: 1.5px solid #C9CFE0; border-radius: 999px; display: grid; place-items: center;
font-size: 15px; color: #3D4350; background: #fff; transition: transform .12s; }
.vr-raps span.aprieta { transform: scale(.94); background: #EEF1FF; }
.vr-abajo.cero .vr-raps { opacity: .4; }
.vr-abajo.sin-datos .vr-dg { opacity: 0; }
.vr-cobrar { position: absolute; right: 20px; top: 16px; width: 250px; height: 90px; border-radius: 14px; background: #4E5E09; color: #fff;
box-shadow: 0 0 0 5px #DCE2CB; display: grid; grid-template-columns: 46px 1fr; align-items: center; padding: 0 14px 0 18px;
transition: background-color .2s, box-shadow .2s, color .2s, transform .12s; }
.vr-cobrar.aprieta { transform: scale(.95); }
.vr-cob-ic { width: 30px; height: 30px; background: currentColor; -webkit-mask: url('ic/efectivo.png') center/contain no-repeat;
mask: url('ic/efectivo.png') center/contain no-repeat; opacity: .9; }
.vr-cobrar[data-medio="TRANSFERENCIA"] .vr-cob-ic { -webkit-mask-image: url('ic/transferencia.svg'); mask-image: url('ic/transferencia.svg'); width: 34px; height: 34px; }
.vr-cob-tx { display: flex; flex-direction: column; align-items: center; margin-left: -20px; }
.vr-cob-tx b { font-size: 22px; font-weight: 800; letter-spacing: .05em; }
.vr-cob-tx strong { font-size: 31px; font-weight: 800; line-height: 1.1; }
.vr-cobrar[data-medio="TRANSFERENCIA"] { background: #3D5DF5; box-shadow: 0 0 0 5px rgba(61,93,245,.16), 0 8px 24px rgba(61,93,245,.33); }
.vr-cobrar.apagado { background: #E9ECF3; color: #A9B0C5; box-shadow: none; }
.vr-raya { position: absolute; left: 20px; right: 20px; top: 126px; height: 1px; background: #E3E7F0; }
.vr-medios { position: absolute; left: 20px; right: 20px; top: 140px; height: 90px; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vr-m { position: relative; border: 1.5px solid #C9CFE0; border-radius: 12px; background: #fff; color: #5A6280; display: grid;
grid-template-rows: 36px auto; align-content: center; row-gap: 5px; align-items: center; justify-items: center; padding: 8px 6px;
transition: background-color .15s, border-color .15s, color .15s, transform .12s; }
.vr-m.aprieta { transform: scale(.96); }
.vr-ic { display: flex; align-items: center; justify-content: center; height: 36px; width: 100%; }
.vr-ic i { width: var(--t, 34px); height: var(--t, 34px); flex: none; background: currentColor; opacity: .8;
transform: translate(var(--dx, 0px), var(--dy, 0px));
-webkit-mask: var(--dib) center/contain no-repeat; mask: var(--dib) center/contain no-repeat; }
.vr-m b { font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.vr-m .vr-tic { position: absolute; top: 7px; right: 8px; width: 20px; height: 20px; stroke-width: 3.4; display: none; }
.vr-m.sel .vr-tic { display: block; }
.vr-m.sel .vr-ic i { opacity: 1; }
.vr-m[data-m="EFECTIVO"].sel { border-color: #4D5E0A; background: #F0FBCB; color: #4D5E0A; }
.vr-m[data-m="TRANSFERENCIA"].sel { border-color: #3D5DF5; background: #E3E8FD; color: #1633BF; }
.vr-m[data-m="EFECTIVO"] .vr-ic i { --dib: url('ic/efectivo.png'); --t: 44px; --dx: 1.7px; }
.vr-m[data-m="TRANSFERENCIA"] .vr-ic i { --dib: url('ic/transferencia.svg'); --t: 37px; }
.vr-m[data-m="DEBITO"] .vr-ic i { --dib: url('ic/debito.svg'); --t: 30px; }
.vr-m[data-m="QR"] .vr-ic i { --dib: url('ic/qr.png'); --t: 25px; }
.vr-toast { position: absolute; left: 50%; top: 548px; transform: translate(-50%, 14px); opacity: 0; background: #fff; border-left: 5px solid #1E45FB;
border-radius: 10px; padding: 12px 20px; font-size: 19px; font-weight: 700; white-space: nowrap;
box-shadow: 0 10px 30px rgba(11,16,38,.18); transition: opacity .25s, transform .25s; }
.vr-toast.ver { opacity: 1; transform: translate(-50%, 0); }
.vr-cursor { position: absolute; left: 0; top: 0; width: 46px; height: 46px; transition: transform .55s cubic-bezier(.45,.05,.25,1), opacity .3s;
filter: drop-shadow(0 3px 5px rgba(11,16,38,.35)); }
.vr-cursor.fuera { opacity: 0; }
.vr-cursor svg { width: 46px; height: 46px; fill: #fff; stroke: #0B1026; stroke-width: 1.6; transition: transform .12s; transform-origin: 6px 4px; }
.vr-cursor.aprieta svg { transform: scale(.82); }
.vr-cursor::after { content: ""; position: absolute; left: -30px; top: -32px; width: 72px; height: 72px; border-radius: 50%;
border: 4px solid rgba(30,69,251,.55); background: rgba(30,69,251,.18); transform: scale(0); opacity: 0; }
.vr-cursor.aprieta::after { animation: vrClic .55s ease-out; }
@keyframes vrClic { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }