/* ---- ficha de producto ---- */
.prod{display:grid;grid-template-columns:1.25fr 1fr;gap:38px;padding:26px 0 0;align-items:start}
/* Los hijos de una rejilla NO se encogen por debajo de su contenido si no se
   les pone min-width:0. En Android bastaba con que una fila de packs o un
   precio largo midiera mas que la columna para que todo el bloque se saliera a
   la derecha; en iPhone no se notaba por la anchura del texto. */
.prod>*{min-width:0}
.prod img,.prod button{max-width:100%}
@media(max-width:900px){.prod{grid-template-columns:1fr;gap:26px;padding:18px 0 0}}
.miga{font-size:.8rem;color:var(--mut);padding:14px 0 0}
.miga a{text-decoration:none;color:var(--mut)}
/* galeria */
/* La foto principal se queda anclada mientras se lee la columna derecha, que
   es la larga: lleva el precio, el boton, las fotos y toda la descripcion. */
.gal{position:sticky;top:78px}
/* Las secundarias, ENTERAS y en la columna DERECHA: sin marco cuadrado y sin
   recorte. Son infografias de 1000x1500 y al cuadrarlas se perdia un tercio
   de texto, que es justo lo que hay que leer. */
.gpila{display:grid;gap:14px;margin:16px 0 0}
.gpila img{width:100%;height:auto;display:block;border:1px solid var(--bd);
     border-radius:14px;background:var(--sof)}
/* La tira de miniaturas sobra: repetia en pequeno lo que ya se ve entero. */
.gtira{display:none}
@media(max-width:900px){.gal{position:static}}
.gfoto{position:relative;border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:var(--sof);aspect-ratio:1/1;cursor:zoom-in}
.gfoto img{width:100%;height:100%;object-fit:cover;display:block}
/* ---- lupa de escritorio ----
   Capa encima con la MISMA imagen ampliada; se mueve el encuadre con el raton.
   No descarga nada: reusa el archivo que ya esta en pantalla. Solo donde hay
   raton de verdad: en un movil no existe "pasar por encima". */
.glupa{position:absolute;inset:0;background-repeat:no-repeat;background-size:230%;
  opacity:0;transition:opacity .15s ease;pointer-events:none}
@media(hover:hover) and (min-width:901px){
  .gfoto:hover .glupa{opacity:1}
  .gfoto:hover .gpista{opacity:0}
}
/* Aviso de que la foto se toca. En movil es la unica pista que tiene el cliente:
   sin el, nadie descubre que puede ampliarla. */
.gpista{position:absolute;left:10px;bottom:10px;background:rgba(17,24,39,.72);color:#fff;
  font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:999px;pointer-events:none;
  transition:opacity .15s ease}
/* ---- visor a pantalla completa ---- */
.gvis{position:fixed;inset:0;background:#000;z-index:10002;display:none;touch-action:none}
.gvis.abierto{display:block}
.gvisc{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.gvisc img{max-width:100%;max-height:100%;width:auto;height:auto;transform-origin:center center;
  transition:transform .2s ease;will-change:transform;cursor:zoom-in}
.gvisc img.ampliada{cursor:grab;transition:none}
.gvisx{position:absolute;top:10px;right:14px;z-index:3;background:rgba(255,255,255,.16);border:0;
  color:#fff;font-size:2rem;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer}
.gvisnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.16);
  border:0;color:#fff;font-size:2rem;line-height:1;width:44px;height:60px;border-radius:10px;cursor:pointer}
.gvisant{left:10px}.gvissig{right:10px}
@media(max-width:600px){.gvisnav{display:none}}
.gviscont{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:.82rem;
  font-weight:600;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.gtira{display:flex;gap:9px;margin-top:11px;overflow-x:auto;scrollbar-width:none}
.gtira::-webkit-scrollbar{display:none}
/* Las miniaturas NO elegidas van en gris: asi se ve de un golpe cual se esta
   mirando, sin tener que comparar bordes. La elegida recupera el color. */
.gtira button{flex:0 0 66px;height:66px;border:2px solid var(--bd);border-radius:9px;overflow:hidden;background:none;padding:0;cursor:pointer;
  filter:grayscale(1);opacity:.55;transition:filter .25s ease,opacity .25s ease,border-color .25s ease}
.gtira button:hover{filter:grayscale(.35);opacity:.85}
.gtira button[aria-current="true"]{border-color:var(--tx);filter:none;opacity:1}
.gtira img{width:100%;height:100%;object-fit:cover}
/* datos */
.tit{font-size:1.62rem;line-height:1.22;margin:6px 0 10px;letter-spacing:-.02em}
@media(max-width:600px){.tit{font-size:1.34rem}}
.sub{color:var(--mut);margin:0 0 14px;font-size:.95rem}
.estr{display:flex;align-items:center;gap:7px;font-size:.87rem;color:var(--mut);margin:0 0 12px}
.estr b{color:var(--tx)}
.st{color:var(--oro);letter-spacing:1px}
/* Etiqueta de oferta: fondo negro, "#Precio de" en blanco y "Oferta" en amarillo */
.oferta{display:inline-block;background:#111;font-size:.78rem;font-weight:800;padding:5px 12px;border-radius:7px;margin:0 0 9px;letter-spacing:.01em}
.oferta .o1{color:#fff}
.oferta .o2{color:#FECB07}
.precio{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 4px}
.precio .n{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--ok);line-height:1}
/* Los centimos: pequeños, arriba y con una raya debajo. */
.precio .cent{font-size:.42em;font-weight:800;vertical-align:super;margin-left:2px;border-bottom:2px solid currentColor;padding-bottom:1px;line-height:1}
.precio .antes{color:var(--mut);font-size:.85rem;font-weight:700;letter-spacing:.03em;display:inline-flex;align-items:baseline;gap:5px}
.precio .antes s{font-size:1.15rem;font-weight:600}
.badge{background:#DCFCE7;color:#166534;font-size:.76rem;font-weight:800;padding:4px 9px;border-radius:999px}
.impu{color:var(--mut);font-size:.8rem;margin:0 0 18px}
/* packs */
.packs{display:grid;gap:9px;margin:0 0 18px}
/* SIN transicion, a proposito. Esto no es un adorno, es el indicador de que
   estas comprando: si la animacion se queda a medias —pasa cuando el navegador
   va justo o la pestaña no se esta pintando— el pack elegido se ve apagado y el
   cliente cree que marco otro. Medido: la transicion no siempre llega al final.
   El cambio instantaneo nunca miente. */
.pk{display:flex;align-items:center;gap:11px;border:2px solid var(--bd);border-radius:12px;padding:11px 13px;cursor:pointer;background:#fff;text-align:left;width:100%}
.pk[aria-checked="true"]{border-color:var(--tx);background:#F9FAFB}
/* El pack que NO esta elegido se va a gris, igual que las miniaturas de la
   galeria. Con tres opciones a color compitiendo (foto, precio tachado y el
   distintivo rojo) no se ve de un golpe cual esta marcada; en gris, la elegida
   es la unica que tiene color y se reconoce sin leer. */
.pk[aria-checked="false"]{filter:grayscale(1);opacity:.62}
.pk[aria-checked="false"]:hover{filter:grayscale(.4);opacity:.9}
.pk .rb{width:19px;height:19px;border:2px solid #CBD5E1;border-radius:50%;flex:0 0 19px;position:relative}
.pk[aria-checked="true"] .rb{border-color:var(--tx)}
.pk[aria-checked="true"] .rb:after{content:"";position:absolute;inset:3px;background:var(--tx);border-radius:50%}
.pk img{width:42px;height:42px;border-radius:7px;object-fit:cover;flex:0 0 42px}
.pk .tx{flex:1;min-width:0}
.pk .tx b{display:block;font-size:.93rem}
.pk .tx span{color:var(--mut);font-size:.79rem}
.pk .pz{text-align:right}
.pk .pz b{font-size:1.02rem}
.pk .pz span{display:block;color:var(--mut);font-size:.73rem}
/* Distintivo del pack recomendado: rojo chino con borde dorado y letra blanca.
   display:inline-block y no en la misma linea del texto para que en movil, si
   la etiqueta del pack es larga, caiga debajo entera en vez de partirse. */
.masv{
  display:inline-block;margin-top:4px;
  background:linear-gradient(180deg,#E23B2E 0%,#C1121F 100%) !important;
  color:#fff !important;font-size:.68rem;font-weight:900;letter-spacing:.06em;
  padding:4px 11px;border-radius:999px;
  border:2px solid #F5C542;
  box-shadow:0 2px 8px rgba(193,18,31,.45);
  white-space:nowrap;vertical-align:middle;text-transform:uppercase;
}
/* La estrella en AMARILLO sobre el rojo: es lo que hace que el distintivo se
   lea de un vistazo aunque la fila tenga foto y precio compitiendo al lado. */
.masv .mvs{color:#FFD24A !important;font-style:normal;font-size:1.05em;line-height:1}
/* El pack recomendado tambien se resalta entero, para que se vea de un vistazo
   en el movil sin tener que leer las tres opciones. */
.pk.destacado{border-color:#D4A413;background:#FFFBEA}
/* boton: mismo degradado verde de la referencia, que es donde va toda la fuerza */
.cta{position:relative;overflow:hidden;isolation:isolate;width:100%;padding:15px;border:0;border-radius:11px;background:linear-gradient(180deg,var(--btn,var(--acc)) 0%,var(--btn2,var(--acc2)) 97%);color:var(--acctx);font-size:1.06rem;font-weight:800;cursor:pointer;line-height:1.25;box-shadow:0 3px 10px rgba(180,140,10,.34);
  animation:ctaLatido 2.6s ease-in-out infinite;will-change:transform}
.cta small{display:block;font-size:.76rem;font-weight:600;opacity:.95;margin-top:2px}
.cta:hover{filter:brightness(1.08)}
.cta:active{animation:none;transform:scale(.985)}
/* Latido: sube un 2,5% y vuelve. Solo transform, que la pinta la tarjeta grafica
   y no obliga al navegador a recalcular la maqueta en cada fotograma. */
@keyframes ctaLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
/* Destello que cruza el boton cada pocos segundos, como el reflejo de una luz.
   Va en un ::after para no tocar el contenido; pointer-events:none para que no
   se coma el clic justo cuando pasa por encima. */
.cta::after{
  content:"";position:absolute;top:-60%;left:-70%;width:42%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-22deg);pointer-events:none;z-index:-1;
  animation:ctaBrillo 3.4s ease-in-out infinite;
}
@keyframes ctaBrillo{0%{left:-70%}55%,100%{left:135%}}
/* Halo que respira detras del boton: se anima la OPACIDAD de una sombra fija,
   que es barato; animar la sombra en si obliga a repintar y da tirones. */
.ctaenv{position:relative}
.ctaenv:before{
  content:"";position:absolute;inset:-3px;border-radius:14px;
  box-shadow:0 0 22px 4px rgba(76,175,80,.55);
  animation:ctaHalo 2.6s ease-in-out infinite;pointer-events:none;
}
@keyframes ctaHalo{0%,100%{opacity:.25}50%{opacity:.7}}
/* ZOOM al azar: cada pocos segundos el boton pega un salto y vuelve, con un
   rebote corto. Es un golpe de atencion distinto del latido, que por repetirse
   siempre igual el ojo acaba ignorando. Al llevar clase propia PISA al latido
   mientras dura, y al terminar el latido vuelve solo. */
@keyframes ctaZoom{
  0%{transform:scale(1)}
  22%{transform:scale(1.085)}
  44%{transform:scale(.975)}
  66%{transform:scale(1.04)}
  84%{transform:scale(.995)}
  100%{transform:scale(1)}
}
.cta.zoom,.fija button.zoom{animation:ctaZoom .72s cubic-bezier(.34,1.56,.64,1)}
/* Quien pide en su sistema que se reduzca el movimiento (mareos, migranas) no
   deberia ver nada de esto: el boton se queda quieto y sigue funcionando. */
@media(prefers-reduced-motion:reduce){
  .cta,.cta::after,.ctaenv:before{animation:none}
}
.segu{display:flex;gap:14px;justify-content:center;color:var(--mut);font-size:.78rem;margin:13px 0 0;flex-wrap:wrap}
/* garantias */
.gars{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--bd)}
.gars div{display:flex;gap:9px;align-items:flex-start}
.gars .ic{font-size:1.25rem;line-height:1}
.gars b{display:block;font-size:.85rem}
.gars p{margin:1px 0 0;color:var(--mut);font-size:.78rem;line-height:1.4}
@media(max-width:600px){.gars{grid-template-columns:1fr}}
/* ---- video de demostracion ----
   Va DEBAJO de las garantias: en movil aparece justo despues del boton, que es
   cuando el cliente quiere ver el producto funcionando antes de decidir; y en
   escritorio llena la columna derecha, que mide 2900 px contra los 700 de la
   foto. La proporcion la manda el JSON: si no coincide con la del archivo, el
   navegador recorta y se ve medio producto. */
.vdemo{position:relative;margin:22px 0 0;border-radius:14px;overflow:hidden;background:#000;
  aspect-ratio:var(--vd-ratio,1/1);border:1px solid var(--bd)}
.vdemo video{width:100%;height:100%;object-fit:cover;display:block}
/* secciones inferiores. Dentro de la columna derecha van a su ancho; las que
   salen fuera (.secancha) se centran a lo ancho de la pagina. */
.sec{padding:34px 0 0}
.secancha{max-width:820px;margin:0 auto}
.sec h2{font-size:1.2rem;margin:0 0 12px}
/* Bloques ilustrados de la descripcion: la imagen a todo el ancho de la columna,
   que son verticales y es donde se leen bien. */
.secojo{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc2);margin:0 0 3px}
.seclead{color:#374151;margin:0 0 12px;font-size:.94rem;line-height:1.55}
/* La foto opcional de un bloque de texto. Como .secimg pero con hueco debajo:
   aqui va seguida de la lista, no sola en su seccion. */
.blimg{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--bd);margin:0 0 14px}
.secimg{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--bd)}
.sec ul{padding-left:19px;margin:0 0 14px}
.sec li{margin:0 0 7px;color:#374151}
.tab{width:100%;border-collapse:collapse;font-size:.9rem}
.tab td{padding:9px 0;border-bottom:1px solid var(--bd);vertical-align:top}
.tab td:first-child{color:var(--mut);width:42%}
.faq{border-bottom:1px solid var(--bd)}
.faq summary{cursor:pointer;padding:13px 0;font-weight:600;font-size:.95rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+ ";color:var(--mut)}
.faq[open] summary:before{content:"− "}
.faq p{margin:0 0 13px;color:#374151;font-size:.92rem}
/* resenas */
.rev{display:flex;gap:11px;padding:14px 0;border-bottom:1px solid var(--bd)}
.rev .av{width:38px;height:38px;border-radius:50%;background:var(--sof);flex:0 0 38px;display:grid;place-items:center;font-weight:700;color:var(--mut)}
.rev b{font-size:.9rem}
.rev .vc{color:var(--ok);font-size:.72rem;font-weight:700;margin-left:6px}
.rev p{margin:4px 0 0;font-size:.89rem;color:#374151}
.rev .lu{color:var(--mut);font-size:.76rem;margin-top:4px}
/* ---- encabezado discreto de resenas ---- */
.estr{text-decoration:none}
.estr:hover span:last-child{text-decoration:underline}
.revcab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.revcab h2{margin:0}
.revmini{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;color:var(--mut)}
.revmini b{color:var(--tx)}
.revminin{color:var(--mut)}
.revtog{margin-left:auto;background:none;border:1px solid var(--bd);color:var(--mut);border-radius:99px;padding:6px 14px;font-size:.82rem;font-weight:600;cursor:pointer}
.revtog:hover{border-color:var(--tx);color:var(--tx)}
/* ---- carrusel de resenas con foto ---- */
.revsub{color:var(--mut);font-size:.86rem;margin:0 0 12px}
.revwrap{position:relative}
/* Flechas translucidas sobre la tira, SOLO en escritorio: en movil se desliza
   con el dedo y unas flechas ahi solo taparian fotos. */
.revflecha{display:none}
@media(min-width:761px){
  .revflecha{
    display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:56px;border:0;border-radius:10px;cursor:pointer;z-index:3;
    background:rgba(17,24,39,.45);color:#fff;font-size:1.9rem;line-height:1;
    backdrop-filter:blur(2px);transition:background .18s ease,opacity .18s ease;opacity:.85;
  }
  .revflecha:hover{background:rgba(17,24,39,.72);opacity:1}
  .revizq{left:-6px}
  .revder{right:-6px}
}
.revtira{display:flex;gap:12px;overflow-x:auto;scroll-behavior:auto;padding:2px 0 10px;scrollbar-width:none}
.revtira::-webkit-scrollbar{display:none}
.revcard{flex:0 0 150px;border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:#fff;padding:0 0 9px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:transform .18s ease,box-shadow .18s ease}
.revcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.revcard img{width:150px;height:150px;object-fit:cover;display:block}
.revcardn{font-size:.82rem;font-weight:700;padding:0 8px}
.revcarde{font-size:.76rem;color:var(--oro);padding:0 8px}
/* visor a pantalla completa */
.revvis{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:10000;display:none;align-items:center;justify-content:center;padding:16px}
.revvis.abierto{display:flex}
.revvisc{max-width:760px;width:100%;max-height:92vh;overflow-y:auto;text-align:center}
.revvisc img{max-width:100%;max-height:62vh;width:auto;margin:0 auto;border-radius:12px}
.revvistx{color:#fff;text-align:left;max-width:560px;margin:16px auto 0;padding:0 4px}
.revvistx b{font-size:1rem}
.revvistx .st{font-size:.9rem;margin:4px 0}
.revvistx p{margin:6px 0 0;color:#E5E7EB;font-size:.95rem;line-height:1.55}
.revvistx .lu{color:#9CA3AF;font-size:.82rem;margin-top:7px}
.revx{position:absolute;top:12px;right:16px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;z-index:2}
.revnav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:0;color:#fff;font-size:2.2rem;line-height:1;width:46px;height:60px;border-radius:10px;cursor:pointer;z-index:2}
.revnav:hover{background:rgba(255,255,255,.26)}
.revant{left:10px}.revsig{right:10px}
@media(max-width:600px){
  .revcard{flex:0 0 128px}.revcard img{width:128px;height:128px}
  .revnav{width:38px;height:52px;font-size:1.8rem}
  .revvisc img{max-height:52vh}
}
/* ---- modal de pedido ---- */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:none;overflow-y:auto;padding:16px}
.ov.abierto{display:block}
/* La ventana entera en celeste. Es lo que hace que el resumen, los datos y el
   boton se lean como UN formulario y no como tres bloques sueltos apilados. Lo
   que va ENCIMA del celeste —el ticket, los campos— se queda en blanco, y eso
   es lo que los separa del fondo sin necesidad de mas cajas. */
.ovcaja{background:#EDF4FB;max-width:470px;margin:24px auto;border-radius:16px;padding:20px 18px 24px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ovx{position:absolute;top:8px;right:10px;background:none;border:0;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--mut)}
.ovcaja h3{margin:0 0 3px;font-size:1.24rem}
.ovsubtit{margin:0 0 14px;color:var(--mut);font-size:.87rem}
/* Barra de estado del pedido: PEGADA arriba mientras se desplaza el modal.
   Mercado Pago lo pide en sus guias de UX y tiene sentido: el total es el dato
   que el cliente quiere tener a la vista mientras rellena, y si se le va de la
   pantalla vuelve a subir a comprobarlo — o se cae. Lleva ademas el paso en el
   que esta, para que sepa cuanto le queda. Ocupa lo mismo que antes. */
.ovselretirada{position:sticky;top:0;z-index:6;background:#F0FDF4;border:1px solid #BBF7D0;color:#166534;
  border-radius:10px;padding:10px 12px;font-weight:700;font-size:.92rem;margin:0 0 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.06)}
/* EL PRODUCTO ELEGIDO, pegado arriba mientras se rellena. Bajando a poner la
   direccion el cliente pierde de vista QUE esta comprando y por cuanto. */
.ovprod{position:sticky;top:0;z-index:7;display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #DBE7F3;border-radius:11px;padding:8px 11px;margin:0 0 12px;
  box-shadow:0 4px 12px rgba(16,42,74,.09)}
.ovprod[hidden]{display:none}
.ovprod img{width:40px;height:40px;flex:0 0 40px;border-radius:8px;object-fit:cover;background:#F1F5F9}
.ovprodt{flex:1;min-width:0;line-height:1.25}
.ovprodt b{display:block;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovprodt small{display:block;color:var(--mut);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovprodp{font-weight:800;font-size:1.02rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ok)}
/* LEGIBILIDAD DE LOS CAMPOS.
   Estaba del reves: la PREGUNTA ("Ciudad") en gris claro de 12.8px y la PISTA
   de dentro en negro de 16px. Lo importante mas pequeno y mas flojo que lo
   secundario. En un movil, y sobre todo para un cliente mayor, eso se lee mal
   y hace dudar. Ahora la etiqueta es lo que mas pesa. */
.ovf{margin:0 0 15px}
.ovf label{display:block;font-size:1rem;line-height:1.3;color:var(--tx,#111827);font-weight:700;margin:0 0 6px}
.ovf label .op{font-weight:500;font-size:.88rem;color:var(--mut,#6B7280)}
/* 17px (por debajo de 16 el iPhone hace zoom al tocar), mas aire dentro y un
   borde que se ve: el #CBD5E1 de antes casi no existia sobre el fondo claro. */
.ovf input,.ovf select{width:100%;padding:15px 13px;border:1.5px solid #94A3B8;border-radius:10px;font-size:17px;line-height:1.25;color:#111827;background:#fff}
.ovf input::placeholder{color:#78889B;opacity:1}
.ovf input:focus,.ovf select:focus{outline:2px solid var(--acc);border-color:var(--acc)}
/* Un dibujito a la izquierda dice de un vistazo que pide cada casilla sin tener
   que leer. Va por CSS: no hay que envolver ningun campo. */
.ovf input#f_nombre,.ovf input#f_cel,.ovf input#f_dir{padding-left:44px;background-repeat:no-repeat;background-position:13px center;background-size:20px 20px}
.ovf input#f_nombre{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10' cy='6.6' r='3.3'/%3E%3Cpath d='M3.8 17.2c0-3.5 2.9-5.4 6.2-5.4s6.2 1.9 6.2 5.4'/%3E%3C/svg%3E")}
.ovf input#f_cel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.2 8.6 7 6.9 9c.9 2 2.1 3.2 4.1 4.1L13 11.4l3.8 2.2c.3 1.6-.8 3.2-2.6 3.3C8.3 17.2 2.8 11.7 2.9 5.8 3 4 4.7 2.9 6.4 3.2z'/%3E%3C/svg%3E")}
.ovf input#f_dir{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M10 17.6s5.9-5.1 5.9-9.2A5.9 5.9 0 0 0 4.1 8.4c0 4.1 5.9 9.2 5.9 9.2z'/%3E%3Ccircle cx='10' cy='8.3' r='2.2'/%3E%3C/svg%3E")}
/* Sin 'min-height': reservaba su hueco debajo de CADA campo tuviera aviso o no,
   y eso abria un vacio entre Ciudad y Direccion que las hacia parecer de dos
   secciones distintas. */
.ovhint{font-size:.85rem;color:var(--mut);margin-top:4px}
.ovhint:empty{display:none}
.ovhint.malo{color:#DC2626;font-weight:600}
.ovgps{width:100%;padding:11px;border:1px dashed #DCC77A;background:#FFFBEA;color:#7A5E00;border-radius:10px;font-weight:600;cursor:pointer;font-size:.86rem;margin:0 0 12px}
.ovgps.ok{border-style:solid;background:#DCFCE7}
/* cupon */
.ovcup{display:flex;gap:6px;margin:10px 0 2px}
.ovcup input{flex:1;min-width:0;padding:8px 10px;border:1px solid #CBD5E1;border-radius:7px;font-size:14px;text-transform:uppercase}
.ovcup button{padding:8px 13px;border:0;border-radius:7px;background:#475569;color:#fff;font-weight:700;cursor:pointer;white-space:nowrap;font-size:.78rem}
.ovcup button:disabled{opacity:.55;cursor:default}
.ovcupmsg{font-size:.76rem;min-height:15px;margin:0 0 4px;font-weight:600}
.ovcupmsg.ok{color:#059669}
.ovcupmsg.malo{color:#DC2626}
/* Los datos ya no van en su propia caja: dos recuadros seguidos se leen como
   dos formularios distintos y el cliente da por terminado el primero. */
.ovdatos{background:transparent;border:0;border-radius:0;padding:0;margin:0 0 12px}
/* EL ROTULO, centrado y con el carrito. En el dorado de la marca, no en un
   color inventado; el rayo va un tono mas claro y es el unico golpe de color:
   dice "rapido" sin escribirlo. */
.ovdatit{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.06rem;font-weight:800;color:#8A6A00;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;margin:0 0 4px}
.ovdatico{flex:0 0 34px;line-height:0}
.ovdatico svg{display:block;overflow:visible}
.ovdatico .car{fill:none;stroke:#8A6A00;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ovdatico .ray{fill:#D9A21B}
.ovdatico .est{fill:none;stroke:#D9A21B;stroke-width:1.9;stroke-linecap:round;opacity:0}
/* Entra por la IZQUIERDA, frena, se queda y sale por la derecha; apunta hacia
   la derecha, asi que viniendo del otro lado pareceria ir marcha atras. Cada 6
   segundos: el reparto es lo que se esta prometiendo. */
@keyframes ovcarro{
  0%{transform:translateX(-26px);opacity:0}
  9%{transform:translateX(2px);opacity:1}
  13%{transform:translateX(0);opacity:1}
  86%{transform:translateX(0);opacity:1}
  95%{transform:translateX(28px);opacity:0}
  100%{transform:translateX(-26px);opacity:0}}
@keyframes ovestela{
  0%{opacity:0;transform:translateX(7px)}
  5%{opacity:.9}
  13%{opacity:0;transform:translateX(-9px)}
  100%{opacity:0;transform:translateX(-9px)}}
/* Arranca al abrirse el modal: mientras esta en display:none la animacion no
   corre, asi que se reproduce sola cada vez que el cliente lo abre. */
.ov.abierto .ovdatico .mov{animation:ovcarro 6s cubic-bezier(.2,.85,.3,1) infinite}
.ov.abierto .ovdatico .est{animation:ovestela 6s ease-out infinite}
@media(prefers-reduced-motion:reduce){
  .ov.abierto .ovdatico .mov{animation:none}
  .ov.abierto .ovdatico .est{animation:none;opacity:1}
}
/* Resumen con aspecto de ticket: bordes dentados arriba y abajo, tipografia
   de ancho fijo en los importes y el IGV desglosado. Compacto para que en
   movil no empuje el boton fuera de la pantalla. */
/* EL RESUMEN, como el ticket de un datafono: hoja blanca, cabecera centrada
   entre rayas de puntos, importes alineados a la derecha y el borde de abajo
   dentado, como arrancado del rollo. Se entiende de un vistazo, que es lo que
   hace falta justo antes de dar los datos. */
.ovres{background:#fff;border:0;border-radius:10px 10px 0 0;padding:14px 15px 15px;font-size:.88rem;margin:0 0 24px;display:none;position:relative;box-shadow:0 4px 14px rgba(16,42,74,.09)}
.ovres::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px;
  background:linear-gradient(-45deg,#fff 8px,transparent 0) 0 8px,
             linear-gradient(45deg,#fff 8px,transparent 0) 0 8px;
  background-size:16px 16px;background-repeat:repeat-x}
.ovres.ver{display:block}
.ovres .gratis{color:#059669;font-weight:800;letter-spacing:.03em}
.ovres .pagas{display:block;text-align:center;color:var(--mut);font-size:.79rem;margin-top:8px;border-top:1px dashed var(--bd);padding-top:8px}
.ovres:before,.ovres:after{content:"";position:absolute;left:0;right:0;height:6px;
  background:radial-gradient(circle at 5px 0,transparent 5px,#fff 5px) repeat-x;background-size:10px 6px}
.ovres:before{top:-1px;transform:rotate(180deg)}
.ovres:after{bottom:-1px}
.ovrestit{text-align:center;font-weight:800;font-size:.74rem;letter-spacing:.15em;color:#334155;text-transform:uppercase;margin:0 0 10px;padding-bottom:9px;border-bottom:1px dashed #94A3B8}
.ovres div{display:flex;justify-content:space-between;margin:4px 0;font-variant-numeric:tabular-nums}
.ovres .cupfila{display:flex;gap:6px;margin:8px 0 2px;padding-top:8px;border-top:1px dashed #E2E8F0}
.ovres .cupfila input{flex:1;min-width:0;padding:7px 9px;border:1px solid #CBD5E1;border-radius:6px;font-size:13px;text-transform:uppercase}
.ovres .cupfila button{padding:7px 12px;border:0;border-radius:6px;background:#475569;color:#fff;font-weight:700;cursor:pointer;font-size:.74rem;white-space:nowrap}
.ovres .igv{color:var(--mut);font-size:.78rem}
.ovres .tot{font-weight:800;font-size:1.2rem;border-top:1px dashed #94A3B8;padding-top:10px;margin-top:10px;letter-spacing:.01em}
/* El descuento por producto adicional lleva el MISMO tratamiento que el envio
   gratis —verde y en negrita— porque es el mismo tipo de argumento: algo que el
   cliente se lleva por hacer el pedido asi y no de otra manera. */
.ovres .dto{color:#059669;font-weight:800;letter-spacing:.03em}
.ovres .cant{color:var(--mut);font-weight:600}
/* ---- foto del producto en el ticket ----
   Con varios productos, el nombre escrito no basta: el cliente mayor no
   recuerda cual añadio y en la duda no compra. La foto la reconoce de un golpe.
   Se agranda al acercar el raton y, sobre todo, al TOCARLA — que en un movil es
   la unica forma, y es justo quien peor ve el que mas la necesita. */
/* Fila de producto: nombre arriba, pack debajo en gris, importe en su columna.
   Los nombres reales son largos ("CONVERSOR DE CORRIENTE PARA AUTO 150W · 2
   conversores · ahorras S/ 9") y en una sola linea empujaban el precio fuera de
   la columna, que es justo lo que hace que un ticket deje de leerse. */
.ovres .ovresf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:7px 0}
.ovresp{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.ovrestx{min-width:0}
.ovrestx b{display:block;font-weight:600;line-height:1.3}
.ovreslb{display:block;color:var(--mut);font-size:.79rem;line-height:1.35;margin-top:1px}
/* flex:none para que el importe NUNCA se encoja ni se parta, pase lo que pase
   con el nombre; tabular-nums para que los digitos caigan unos sobre otros. */
.ovresi{flex:none;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ovresim{width:36px;height:36px;flex:none;border-radius:7px;object-fit:cover;background:#fff;
  border:1px solid var(--bd);cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){
  .ovresim:hover{transform:scale(2.8);transform-origin:left center;box-shadow:0 12px 32px rgba(0,0,0,.4);position:relative;z-index:6}
}
@media(prefers-reduced-motion:reduce){.ovresim{transition:none}}
/* Lupa a pantalla completa: la foto grande con el nombre debajo. */
.ovlupa{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10001;display:none;align-items:center;justify-content:center;padding:18px}
.ovlupa.abierta{display:flex}
.ovlupac{max-width:520px;width:100%;text-align:center}
.ovlupac img{max-width:100%;max-height:66vh;border-radius:14px;background:#fff}
.ovlupat{color:#fff;font-weight:700;margin:14px 0 0;font-size:1rem;line-height:1.4}
.ovlupap{color:#D1D5DB;font-size:.9rem;margin:4px 0 0}
.ovlupax{position:absolute;top:10px;right:16px;background:none;border:0;color:#fff;font-size:2.6rem;line-height:1;cursor:pointer}
.overr{color:#DC2626;font-size:.85rem;font-weight:600;margin:0 0 10px;display:none}
/* Aviso de adelanto: SOLO sale al elegir una ciudad de provincia. Discreto, al
   estilo de la linea de "tus datos solo se usan...": informa sin asustar. Si
   saliera desde el principio, el 100% de la gente leeria una condicion que solo
   afecta a una parte, y eso se paga en pedidos que no se llegan a hacer. */
.ovadel{background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:.8rem;color:#78350F;line-height:1.45}
.ovadel .t{display:block;font-size:.83rem;font-weight:800;margin-bottom:3px}
.ovadel .o{display:block;margin-top:7px;padding-top:7px;border-top:1px dashed #FDE68A}
.ovadel[hidden]{display:none}
/* Datos ya guardados: en vez del formulario entero, dos lineas y un "Cambiar".
   Volver a escribir la direccion es justo donde se cae la segunda compra. */
.ovdatres{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.45}
.ovdatres[hidden]{display:none}
.ovdatres .v{flex:1;min-width:0}
.ovdatres .v b{display:block}
.ovdatres .v span{color:var(--mut);display:block}
.ovcambiar{background:none;border:0;color:#8A6A00;font-weight:700;font-size:.8rem;cursor:pointer;padding:2px;text-decoration:underline;flex:none}
/* Aviso de privacidad: dentro del bloque de datos, justo debajo de lo ultimo que
   se le pide al cliente. Discreto pero legible — es un aviso legal, no letra
   pequeña para esconderlo. */
.ovpriv{margin:10px 0 0;color:var(--mut);font-size:.76rem;line-height:1.5;text-align:center}
/* Debajo del rotulo, no al final: es donde el cliente empieza a dar sus datos. */
.ovprivtop{margin:0 0 12px}
/* La politica completa, lo ultimo de todo. */
.ovprivlink{margin:9px 0 0;text-align:center;font-size:.76rem}
.ovprivlink a{color:#8A6A00;font-weight:600}
/* Los sellos del modal, mas pegados al boton. */
.ovsegu{margin:10px 0 0}
/* El enlace va DEBAJO, en su propia linea. Al costado se partia a mitad de
   palabra y quedaba feo justo en el aviso legal, que es donde peor se ve. */
.ovpriv a{display:block;margin-top:3px;color:#8A6A00;font-weight:600}
/* Anadir otro producto es un ENLACE, no un boton: en el modal manda UN solo
   boton, el de comprar. Un segundo boton con borde compite por el mismo clic y
   parte la decision en dos justo cuando ya estaba tomada. */
/* Boton FANTASMA: transparente en reposo, para que no compita con el verde
   macizo de comprar, y se pinta entero al pasar el raton o al pulsarlo, que es
   justo cuando el cliente necesita saber que eso se toca. El borde tenue lo
   deja claro tambien en movil, donde no hay raton que acercar. */
/* CELESTE, no verde. En verde se confundia con el boton de pagar y alguien podia
   pulsarlo creyendo que compraba. Otra accion, otro color. */
.ovmaslink{display:block;width:100%;text-align:center;margin:10px 0 0;padding:11px;background:#FFFBEA;border:1px solid #E7D9A6;border-radius:11px;color:#7A5E00;font-weight:700;font-size:.88rem;text-decoration:none;cursor:pointer;line-height:1.3;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.ovmaslink:hover,.ovmaslink:focus-visible,.ovmaslink:active{background-color:#8A6A00;border-color:#8A6A00;color:#fff;text-decoration:none}
.ovmaslink:hover small,.ovmaslink:focus-visible small,.ovmaslink:active small{color:rgba(255,255,255,.92)}
.ovmaslink small{display:block;color:#3B6FA8;font-weight:600;font-size:.74rem;margin-top:2px;text-decoration:none;transition:color .18s ease}
.ovmaslink[hidden]{display:none !important}
/* ---- jerarquia de las formas de pago ----
   Contra entrega es LA via de esta tienda, y con tres botones apilados se leia
   como una opcion mas: el cliente podia pensar que solo se acepta pago online.
   Se agranda el principal y se separan las alternativas con una linea que dice
   lo que son. */
/* Lo que tiene que saltar a la vista es "PAGAS AL RECIBIR": es LO QUE DIFERENCIA
   a esta tienda de las que exigen pagar antes, y es lo que se perdia entre los
   otros dos botones de pago. El "COMPRAR AHORA" se deja en un tamaño que quepa
   en UNA linea — agrandarlo lo partia en dos y el boton se veia peor. */
#ovSend{padding:17px 14px;font-size:1.02rem;letter-spacing:-.01em}
#ovSend small{font-size:1.08rem;font-weight:800;opacity:1;margin-top:6px;letter-spacing:.01em}
.ovopago{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--mut);
  font-size:.78rem;font-weight:600}
.ovopago:before,.ovopago:after{content:"";flex:1;height:1px;background:var(--bd)}
/* Pagar por adelantado con Mercado Pago: blanco en reposo y AMARILLO —el color
   de la marca, que el cliente peruano reconoce— al acercar el raton o pulsar.
   Blanco y no verde para que no se confunda con contra entrega, que sigue
   siendo la via principal: esta es para quien prefiere pagar antes. */
.ovmplink{display:block;width:100%;text-align:center;margin:9px 0 0;padding:11px;background:#fff;
  border:1px solid #CBD5E1;border-radius:11px;color:#1F2937;font-weight:700;font-size:.88rem;
  cursor:pointer;line-height:1.3;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.ovmplink:hover,.ovmplink:focus-visible,.ovmplink:active{background:#FFE600;border-color:#E0CA00;color:#111}
.ovmplink small{display:block;color:var(--mut);font-weight:600;font-size:.74rem;margin-top:2px;transition:color .18s ease}
.ovmplink:hover small,.ovmplink:focus-visible small,.ovmplink:active small{color:#4A3F00}
/* Panel de pago con Mercado Pago. Sustituye a los datos y a los botones: quien
   llega aquí ya decidió pagar, y dejar el resto a la vista solo da por dónde
   distraerse. */
.ovmp{border:1px solid #FDE68A;background:#FFFDF5;border-radius:12px;padding:14px 12px;margin:12px 0 0}
.ovmp[hidden]{display:none}
.ovmphead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 2px}
.ovmptit{font-weight:800;font-size:.95rem;display:inline-flex;align-items:center}
/* Dentro del titulo el logo no lleva el desplazamiento vertical del boton. */
.ovmptit .ovlogo{vertical-align:0}
.ovmpsub{color:var(--mut);font-size:.83rem;margin:0 0 12px}
.ovmpmsg{font-size:.84rem;font-weight:600;margin:10px 0 0;min-height:18px}
.ovmpmsg.malo{color:#DC2626}
.ovmpmsg.ok{color:#059669}
/* Arriba y pequeño, no debajo del botón Pagar y a todo el ancho. */
.ovmpvolver{flex:none;background:none;border:0;color:var(--mut);font-size:.8rem;font-weight:600;
  cursor:pointer;text-decoration:underline;padding:4px}
/* Mientras se cobra, NADA de salir: ni volver, ni cerrar, ni tocar el fondo. */
.ovmpvolver[disabled]{opacity:.35;cursor:not-allowed;text-decoration:none}
.ov.pagando .ovx{display:none}
.ovmpcupon{display:block;text-align:center;margin:12px 0 0;padding:12px;border-radius:10px;
  background:#FFE600;color:#111;font-weight:800;text-decoration:none}
/* Yape: mismo boton fantasma, con SU morado. Es el medio con el que mas paga la
   gente en Peru en estos importes, asi que va visible y no escondido. */
.ovyape{display:block;width:100%;text-align:center;margin:9px 0 0;padding:11px;background:#fff;
  border:1px solid #D9C2E4;border-radius:11px;color:#6B2E86;font-weight:700;font-size:.88rem;
  cursor:pointer;line-height:1.3;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.ovyape:hover,.ovyape:focus-visible,.ovyape:active{background:#742284;border-color:#742284;color:#fff}
.ovyape small{display:block;color:var(--mut);font-weight:600;font-size:.74rem;margin-top:2px;transition:color .18s ease}
.ovyape:hover small,.ovyape:focus-visible small,.ovyape:active small{color:#EBD9F2}
/* Los dos logos de marca, al MISMO tamaño en los dos botones. Si uno se ve mas
   grande que el otro, el pequeño parece la opcion de segunda y deja de generar
   la confianza que se busca. Se fija la ALTURA y el ancho se ajusta solo, que es
   como se maquetan marcas con proporciones distintas. */
/* Misma ALTURA no basta: el de Mercado Pago es apaisado y ocupa 84 px de ancho,
   el de Yape es cuadrado y con 22 px de alto se veia diminuto al lado. Al de
   Yape se le da mas altura para que los dos PESEN igual en la pantalla, que es
   lo que de verdad importa para que ninguno parezca la opcion de segunda. */
.ovlogo{height:22px;width:auto;vertical-align:-6px;margin-right:8px}
.ovlogo-yape{height:30px;margin-right:9px}
/* El logo y el texto en UNA linea, centrados juntos. Con inline suelto el logo
   se caia a su propio renglon y el boton se veia partido en dos. El <small> de
   debajo sigue a lo ancho, por eso el envoltorio es flex-wrap. */
.ovmplink,.ovyape{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}
.ovmplink small,.ovyape small{flex:1 0 100%}
/* Medios que acepta Mercado Pago, bajo su boton. Cada uno en una caja del MISMO
   tamaño con object-fit:contain: asi Visa (apaisada) y Yape (cuadrada) ocupan
   igual y la fila sale simetrica, en vez de un logo gigante al lado de otro
   diminuto. */
.ovmedios{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 0}
.ovmedios img{width:42px;height:26px;object-fit:contain;background:#fff;border:1px solid var(--bd);
  border-radius:5px;padding:3px}
.ovmediostx{display:block;text-align:center;color:var(--mut);font-size:.72rem;margin:9px 0 0}
.ovyapep{background:#FCF9FE;border-color:#E4D2EE}
.ovyapep .cta{margin-top:4px}
/* "Ver mi carrito" vive DENTRO del ticket, justo debajo del total: es donde el
   cliente acaba de leer lo que va a pagar. Discreto, que es una salida. */
.ovres .ovresver{display:block;text-align:center;margin:9px 0 0;padding-top:8px;border-top:1px dashed #E2E8F0;
  color:#8A6A00;font-size:.81rem;font-weight:600;text-decoration:none}
.ovres .ovresver:hover{text-decoration:underline}
.ovclientes{margin:16px auto 0;border-radius:10px;max-width:100%;height:auto}
/* confirmacion */
.ovok{text-align:center;padding:16px 0 4px}
.ovokic{font-size:2.6rem}
.ovok h4{margin:6px 0 4px;font-size:1.15rem}
.ovok p{color:var(--mut);margin:0 0 14px;font-size:.92rem}
.ovokwa{display:inline-block;background:#25D366;color:#fff;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:10px}
/* aviso al anadir al carrito */
.addok{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:grid;place-items:center;padding:18px}
/* El atributo hidden NO basta: cualquier regla con display lo pisa y el aviso
   salia siempre, tapando la pagina entera. Hay que apagarlo explicitamente. */
.addok[hidden]{display:none !important}
.addokc{background:#fff;border-radius:16px;padding:24px 20px;max-width:380px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.addokic{font-size:2.6rem}
.addokc b{display:block;font-size:1.12rem;margin:4px 0 6px}
.addokc p{color:var(--mut);font-size:.9rem;margin:0 0 16px;line-height:1.5}
.addokb{display:block;background:linear-gradient(180deg,var(--btn,var(--acc)) 0%,var(--btn2,var(--acc2)) 97%);color:var(--acctx);text-decoration:none;font-weight:800;padding:13px;border-radius:11px}
.addokv{display:block;margin-top:9px;border:1px solid var(--bd);color:var(--tx);text-decoration:none;font-weight:600;padding:11px;border-radius:11px}
.addokx{display:block;width:100%;margin-top:9px;background:none;border:0;color:var(--mut);font-size:.85rem;cursor:pointer;padding:6px}
/* barra fija */
/* Se esconde hasta que el boton de verdad se va de pantalla. Antes vivia
   clavada abajo TODA la visita, incluso con el boton de comprar a la vista dos
   dedos mas arriba: dos botones iguales a la vez comiendose pantalla. */
.fija{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--bd);padding:9px 14px;display:flex;gap:11px;align-items:center;justify-content:center;z-index:50;box-shadow:0 -3px 14px rgba(0,0,0,.07);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.fija.sever{opacity:1;visibility:visible;transform:translateY(0)}
/* El subtitulo tambien aqui: lo que quita el miedo a comprarle a un desconocido
   no es el titular, es el "PAGA al recibir". */
.fija button small{display:block;font-size:.78rem;font-weight:600;opacity:.95;margin-top:2px}
.fija .p{font-weight:800;font-size:1.06rem;white-space:nowrap;color:var(--ok)}
.fija button{position:relative;overflow:hidden;isolation:isolate;flex:1;padding:13px;border:0;border-radius:10px;background:linear-gradient(180deg,var(--btn,var(--acc)) 0%,var(--btn2,var(--acc2)) 97%);color:var(--acctx);font-weight:800;cursor:pointer;
  animation:ctaLatido 2.6s ease-in-out infinite;will-change:transform}
.fija button:active{animation:none;transform:scale(.985)}
.fija button::after{
  content:"";position:absolute;top:-60%;left:-70%;width:42%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-22deg);pointer-events:none;z-index:-1;
  animation:ctaBrillo 3.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.fija button,.fija button::after{animation:none}}
body{padding-bottom:76px}
@media(min-width:901px){.fija{display:none}body{padding-bottom:0}}

/* MOVIL: ANCHO Y ALTO.
   En un telefono de 390px se perdian 96 —un cuarto de la pantalla— en tres
   rellenos metidos uno dentro de otro: el fondo del modal, la caja blanca y el
   recuadro azul de los datos. Recortandolos el campo gana unos 70px, que es lo
   que hace que "San Juan de Lurigancho" quepa sin cortarse.
   El alto se recorta quitando AIRE, no tamano de letra: agrandarla es lo que
   hacia falta para que se leyera. */
@media(max-width:600px){
  .ov{padding:0}
  .ovcaja{margin:0 auto;padding:14px 12px 22px;border-radius:0;min-height:100%;box-shadow:none}
  .ovcaja h3{font-size:1.15rem}
  /* Sin caja ni relleno propio, el campo ocupa TODO el ancho util por si solo. */
  .ovdatos{margin:0 0 10px;padding:0}
  .ovdatit{margin:0 0 9px}
  .ovf{margin:0 0 11px}
  .ovf label{margin:0 0 4px}
  .ovf input,.ovf select{padding:13px 12px}
  .ovhint{margin-top:3px}
  .ovgps{padding:10px;margin:0 0 9px;font-size:.9rem}
  .ovpriv{margin:8px 0 0}
}