/* ============================================================
   AYCOMER · Componentes reutilizables
   Archivo: componentes.css
   No edites colores aquí: todos viven en tokens.css
   ============================================================ */

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px;
  border:1.5px solid transparent;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-grad{background:var(--grad-btn);color:#fff;box-shadow:var(--sombra-marca)}
.btn-grad:hover{box-shadow:var(--sombra-marca-alta);filter:saturate(1.06)}
.btn-tinta{background:var(--texto);color:var(--fondo)}
.btn-linea{border-color:var(--linea-fuerte);color:var(--texto);background:var(--sup)}
.btn-linea:hover{border-color:var(--fucsia-txt);color:var(--fucsia-txt)}
.btn-fantasma{color:var(--texto-2)}
.btn-fantasma:hover{color:var(--fucsia-txt)}
.btn-bloque{width:100%}
.btn-s{padding:9px 14px;font-size:13px}
.btn-g{padding:15px 28px;font-size:15px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- chips / etiquetas ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:var(--sup);border:1.5px solid var(--linea);font-size:13px;font-weight:600;color:var(--texto-2);
  transition:.15s;
}
.chip:hover{border-color:var(--fucsia-txt);color:var(--fucsia-txt)}
.chip[aria-pressed="true"],.chip.on{background:var(--texto);border-color:var(--texto);color:var(--fondo)}
.etq{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.etq-oferta{background:var(--grad);color:#fff}
.etq-nuevo{background:var(--tinta);color:#fff}
[data-tema="noche"] .etq-nuevo{background:var(--miel);color:#14224F}
.etq-envio{background:rgba(15,138,95,.12);color:var(--exito-txt)}
.etq-local{background:rgba(251,176,59,.2);color:#8A5A00}
[data-tema="noche"] .etq-local{color:var(--miel-txt)}


/* ============================================================
   CAPAS: velo, cajón lateral, ventana
   ============================================================ */
.velo{position:fixed;inset:0;background:rgba(10,14,30,.55);backdrop-filter:blur(3px);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
.velo.on{opacity:1;pointer-events:auto}
.cajon{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--fondo);z-index:95;
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .32s cubic-bezier(.3,.8,.3,1);
  box-shadow:var(--sombra-l);
}
.cajon.on{transform:translateX(0)}
.cajon-izq{right:auto;left:0;transform:translateX(-102%)}
.cajon-izq.on{transform:translateX(0)}
.cajon-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid var(--linea);background:var(--sup)}
.cajon-cab h3{font-size:19px}
.cajon-cab p{margin:2px 0 0;font-size:12.5px;color:var(--texto-3);font-weight:600}
.cerrar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:1.5px solid var(--linea);flex:none;transition:.15s}
.cerrar:hover{background:var(--sup-2);border-color:var(--fucsia-txt)}
.cerrar svg{width:17px;height:17px;stroke:var(--texto);stroke-width:2.2}
.cajon-cuerpo{flex:1;overflow-y:auto;padding:18px 20px}
.cajon-pie{border-top:1px solid var(--linea);padding:18px 20px calc(18px + env(safe-area-inset-bottom));background:var(--sup)}

.ventana{
  position:fixed;inset:0;z-index:96;display:none;align-items:center;justify-content:center;padding:20px;
}
.ventana.on{display:flex}
.ventana-caja{
  background:var(--fondo);border-radius:var(--r-xl);width:min(940px,100%);max-height:min(88vh,860px);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra-l);
  animation:subir .3s cubic-bezier(.2,.9,.3,1);
}
.ventana-caja.chica{width:min(560px,100%)}
@keyframes subir{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.ventana-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 24px;border-bottom:1px solid var(--linea);background:var(--sup)}
.ventana-cuerpo{overflow-y:auto;padding:24px}

/* ---------- Territorio (ventana firma) ---------- */
.terr-mapa{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;min-height:0}
.terr-col{border:1px solid var(--linea);border-radius:var(--r-m);background:var(--sup);display:flex;flex-direction:column;overflow:hidden}
.terr-col h4{padding:12px 14px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3);border-bottom:1px solid var(--linea);font-family:var(--texto-f);font-weight:800}
.terr-col ul{overflow-y:auto;max-height:290px;padding:6px}
.terr-col button{width:100%;text-align:left;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--texto-2);display:flex;align-items:center;justify-content:space-between;gap:8px}
.terr-col button:hover{background:var(--sup-2);color:var(--texto)}
.terr-col button.on{background:var(--grad);color:#fff}
.terr-col button.on span{color:rgba(255,255,255,.8)}
.terr-col button span{font-size:11px;font-weight:700;color:var(--texto-3)}
.terr-resumen{
  margin-top:18px;padding:16px 18px;border-radius:var(--r-m);background:var(--grad-suave);
  border:1.5px solid rgba(175,39,125,.2);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.terr-resumen b{font-family:var(--display);font-size:17px}
.terr-resumen p{margin:2px 0 0;font-size:13px;color:var(--texto-2)}

/* ---------- Ficha de producto ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.pd-fotos{display:flex;flex-direction:column;gap:10px}
.pd-foto{aspect-ratio:1;border-radius:var(--r-l);position:relative;overflow:hidden}
.pd-miniaturas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pd-mini{aspect-ratio:1;border-radius:12px;position:relative;overflow:hidden;border:2px solid transparent;transition:.15s}
.pd-mini.on{border-color:var(--fucsia-txt)}
.pd-info h2{font-size:26px;margin:8px 0 10px;line-height:1.18}
.pd-vendedor{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-m);background:var(--sup);border:1px solid var(--linea);margin:16px 0}
.pd-vendedor .com-avatar{width:40px;height:40px;border-radius:13px;margin:0;border:0;font-size:16px}
.pd-vendedor b{font-size:14px;display:block}
.pd-vendedor small{font-size:12px;color:var(--texto-3);font-weight:600}
.pd-precio{font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1}
.pd-precio-fila{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 0 6px}
.pd-cuotas{font-size:13.5px;color:var(--texto-2);font-weight:600}
.pd-cuotas b{color:var(--exito-txt)}
.pd-var{margin:18px 0}
.pd-var h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);margin-bottom:9px;font-family:var(--texto-f);font-weight:800}
.pd-var-lista{display:flex;gap:8px;flex-wrap:wrap}
.pd-var-lista button{padding:8px 15px;border-radius:10px;border:1.5px solid var(--linea);font-size:13px;font-weight:700;color:var(--texto-2);transition:.15s}
.pd-var-lista button:hover{border-color:var(--fucsia-txt);color:var(--fucsia-txt)}
.pd-var-lista button.on{background:var(--texto);border-color:var(--texto);color:var(--fondo)}
.contador{display:inline-flex;align-items:center;border:1.5px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--sup)}
.contador button{width:42px;height:44px;display:grid;place-items:center;font-size:19px;font-weight:700;color:var(--texto-2);transition:.14s}
.contador button:hover{background:var(--sup-2);color:var(--fucsia-txt)}
.contador span{min-width:44px;text-align:center;font-weight:800;font-size:15px}
.pd-acciones{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}
.pd-acciones .btn{flex:1;min-width:150px}
.pd-entrega{border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;background:var(--sup)}
.pd-entrega-fila{display:flex;gap:12px;padding:13px 15px;border-bottom:1px solid var(--linea);align-items:flex-start}
.pd-entrega-fila:last-child{border-bottom:0}
.pd-entrega-fila svg{width:19px;height:19px;stroke:var(--fucsia-txt);fill:none;stroke-width:1.8;flex:none;margin-top:1px}
.pd-entrega-fila b{font-size:13.5px;display:block}
.pd-entrega-fila small{font-size:12.5px;color:var(--texto-3);font-weight:600}
.pestanas{display:flex;gap:4px;border-bottom:1.5px solid var(--linea);margin:30px 0 18px;overflow-x:auto;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{padding:12px 16px;font-size:14px;font-weight:700;color:var(--texto-3);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;white-space:nowrap}
.pestanas button.on{color:var(--fucsia-txt);border-color:var(--fucsia-txt)}
.tabla-specs{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla-specs td{padding:10px 12px;border-bottom:1px solid var(--linea)}
.tabla-specs td:first-child{color:var(--texto-3);font-weight:700;width:38%}
.resena{padding:16px 0;border-bottom:1px solid var(--linea)}
.resena:last-child{border-bottom:0}
.resena-cab{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.resena-cab b{font-size:13.5px}
.resena-cab small{font-size:12px;color:var(--texto-3);font-weight:600;margin-left:auto}
.resena p{margin:0;font-size:13.5px;color:var(--texto-2)}

/* ---------- Carrito ---------- */
.item{display:grid;grid-template-columns:82px minmax(0,1fr);gap:13px;padding:15px 0;border-bottom:1px solid var(--linea)}
.item-foto{aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden}
.item b{font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item small{font-size:11.5px;color:var(--texto-3);font-weight:700;display:block;margin-top:2px}
.item-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.item .contador{border-radius:10px}
.item .contador button{width:32px;height:32px;font-size:16px}
.item .contador span{min-width:32px;font-size:13.5px}
.item-precio{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.02em}
.quitar{font-size:12px;font-weight:700;color:var(--texto-3)}
.quitar:hover{color:var(--alerta-txt)}
.cupon{display:flex;gap:8px;margin-bottom:14px}
.cupon input{flex:1;padding:12px 14px;border-radius:12px;border:1.5px dashed var(--linea-fuerte);background:var(--sup-2);font-size:13.5px;font-weight:600;text-transform:uppercase}
.cupon input:focus{outline:none;border-color:var(--fucsia-txt);border-style:solid}
.resumen{font-size:14px}
.resumen div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;color:var(--texto-2);font-weight:600}
.resumen div.ahorro{color:var(--exito-txt)}
.resumen .total{border-top:1.5px solid var(--linea);margin-top:8px;padding-top:12px;color:var(--texto);font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.aviso{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:var(--grad-suave);font-size:12.5px;font-weight:600;color:var(--texto-2);margin-bottom:14px;align-items:flex-start}
.aviso svg{width:17px;height:17px;stroke:var(--fucsia-txt);fill:none;stroke-width:2;flex:none;margin-top:1px}
.barra-envio{height:7px;border-radius:9px;background:var(--linea);overflow:hidden;margin-top:8px}
.barra-envio i{display:block;height:100%;background:var(--grad);border-radius:9px;transition:width .4s}

/* ---------- Pago ---------- */
.pago-caja{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:26px;align-items:start}
.pasos{display:flex;align-items:center;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--texto-3)}
.paso i{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;border:1.8px solid var(--linea-fuerte);font-style:normal;font-size:12.5px;font-weight:800;flex:none}
.paso.on{color:var(--texto)}
.paso.on i{background:var(--grad);border-color:transparent;color:#fff}
.paso.listo i{background:var(--exito);border-color:var(--exito-txt);color:#fff}
.paso-linea{flex:1;height:1.8px;background:var(--linea);min-width:16px}
.tarjeta-form{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-l);padding:24px}
.tarjeta-form h3{font-size:19px;margin-bottom:5px}
.tarjeta-form > p{margin:0 0 20px;font-size:13.5px;color:var(--texto-2)}
.campos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3)}
.campo input,.campo select,.campo textarea{
  padding:13px 14px;border-radius:12px;border:1.5px solid var(--linea);background:var(--sup-2);
  font-size:14px;font-weight:600;transition:.15s;width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--fucsia-txt);background:var(--sup);box-shadow:0 0 0 4px rgba(175,39,125,.09)}
.campo input.mal,.campo select.mal{border-color:var(--alerta-txt);background:rgba(192,57,43,.05)}
.campo .error{font-size:11.5px;font-weight:700;color:var(--alerta-txt)}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6484' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
.opcion{
  display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:var(--r-m);
  border:1.8px solid var(--linea);background:var(--sup);cursor:pointer;transition:.16s;margin-bottom:10px;
}
.opcion:hover{border-color:var(--linea-fuerte)}
.opcion.on{border-color:var(--fucsia-txt);background:var(--grad-suave)}
.opcion .radio{width:21px;height:21px;border-radius:50%;border:2px solid var(--linea-fuerte);flex:none;display:grid;place-items:center;transition:.15s}
.opcion.on .radio{border-color:var(--fucsia-txt)}
.opcion.on .radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--grad)}
.opcion-txt{flex:1;min-width:0}
.opcion-txt b{font-size:14.5px;display:block}
.opcion-txt small{font-size:12.5px;color:var(--texto-3);font-weight:600}
.opcion .precio-op{font-family:var(--display);font-weight:800;font-size:15px;white-space:nowrap}
.logos-pago{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.logo-pago{height:26px;padding:0 9px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.02em;color:#fff}
.resumen-lateral{
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-l);padding:20px;
  position:sticky;top:calc(var(--hdr) + 12px);
}
.resumen-lateral h4{font-size:16px;margin-bottom:14px}
.mini-item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--linea);align-items:center}
.mini-item:last-of-type{border-bottom:0}
.mini-foto{width:46px;height:46px;border-radius:11px;position:relative;overflow:hidden;flex:none}
.mini-item b{font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-item small{font-size:11px;color:var(--texto-3);font-weight:700}
.mini-item .p{margin-left:auto;font-weight:800;font-size:13px;white-space:nowrap}
.candado{display:flex;align-items:center;gap:8px;justify-content:center;font-size:11.5px;color:var(--texto-3);font-weight:700;margin-top:12px}
.candado svg{width:14px;height:14px;stroke:var(--exito);fill:none;stroke-width:2.2}
.qr-caja{width:190px;height:190px;margin:0 auto 14px;border-radius:var(--r-m);background:#fff;padding:12px;display:grid;place-items:center}
.qr-caja svg{width:100%;height:100%}

/* Éxito del pedido */
.exito-caja{text-align:center;padding:14px 0 6px;max-width:520px;margin:0 auto}
.exito-sello{width:88px;height:88px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin:0 auto 20px;animation:sello .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes sello{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.exito-sello svg{width:42px;height:42px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.exito-caja h2{font-size:29px;margin-bottom:8px}
.exito-caja > p{color:var(--texto-2);margin:0 0 22px;font-size:15px}
.pedido-num{
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:12px;
  background:var(--sup);border:1.5px dashed var(--linea-fuerte);font-family:var(--display);font-weight:800;font-size:17px;margin-bottom:24px;
}
.linea-tiempo{text-align:left;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-l);padding:20px 22px;margin-bottom:20px}
.lt{display:flex;gap:14px;padding-bottom:18px;position:relative}
.lt:last-child{padding-bottom:0}
.lt::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--linea)}
.lt:last-child::before{display:none}
.lt i{width:24px;height:24px;border-radius:50%;border:2px solid var(--linea-fuerte);flex:none;display:grid;place-items:center;background:var(--sup);z-index:1;font-style:normal}
.lt.hecho i{background:var(--exito);border-color:var(--exito-txt)}
.lt.hecho i::after{content:"";width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg) translate(-1px,-1px)}
.lt b{font-size:14px;display:block}
.lt small{font-size:12.5px;color:var(--texto-3);font-weight:600}

.cargando{display:inline-block;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- Aviso flotante ---------- */
.avisos{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;width:min(420px,calc(100% - 32px))}
.aviso-flot{
  display:flex;align-items:center;gap:11px;padding:13px 18px;border-radius:14px;background:var(--tinta);color:#fff;
  font-size:13.5px;font-weight:600;box-shadow:var(--sombra-l);animation:entrar .3s cubic-bezier(.2,1,.3,1);width:100%;
}
[data-tema="noche"] .aviso-flot{background:var(--sup-2);border:1px solid var(--linea-fuerte)}
@keyframes entrar{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.aviso-flot svg{width:18px;height:18px;stroke:var(--miel);fill:none;stroke-width:2.2;flex:none}
.aviso-flot b{color:var(--miel-txt)}


.arte{position:absolute;inset:0}
[data-tema="noche"] .arte{filter:brightness(.32) saturate(1.5)}
.mini-foto .marco-foto,.item-foto .marco-foto,.pd-mini .marco-foto{inset:5px;border-width:1.5px;border-radius:9px}
.pastilla{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--texto-3)}
.pastilla svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.mini-tabla{width:100%;font-size:13px;border-collapse:collapse}
.mini-tabla td{padding:8px 0;border-bottom:1px solid var(--linea)}
.mini-tabla td:last-child{text-align:right;font-weight:700}
.ruta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--texto-3);font-weight:600;margin-bottom:16px;flex-wrap:wrap}
.ruta button:hover{color:var(--fucsia-txt)}
.ruta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}
.com-portada{border-radius:var(--r-xl);padding:34px;color:#fff;position:relative;overflow:hidden;margin-bottom:26px}
.com-portada h1{font-size:clamp(24px,3vw,36px);margin-bottom:8px}
.com-portada p{margin:0;opacity:.85;font-size:15px;max-width:52ch}
.com-portada .datos-territorio{border-color:rgba(255,255,255,.25);margin-top:20px}
.com-portada .datos-territorio span{color:rgba(255,255,255,.7)}

/* ============================================================
   CELEBRACIÓN DE COMPRA
   Solo se animan transform, opacity y filter: son las tres
   propiedades que la tarjeta gráfica resuelve sola, sin
   recalcular la página. Animar width, top o margin provoca
   tirones en celulares de gama baja.
   ============================================================ */
.celebracion{
  position:relative;text-align:center;padding:48px 20px 40px;
  max-width:640px;margin:0 auto;overflow:hidden
}

/* -- 1. El sello se dibuja solo -- */
.cel-sello{width:104px;height:104px;margin:0 auto 26px;position:relative}
.cel-sello svg{width:100%;height:100%;overflow:visible}
.cel-aro{
  fill:none;stroke:url(#gAy);stroke-width:5;
  stroke-dasharray:264;stroke-dashoffset:264;
  transform:rotate(-90deg);transform-origin:50% 50%
}
.cel-chulo{
  fill:none;stroke:url(#gAy);stroke-width:7;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:62;stroke-dashoffset:62
}
.cel-activa .cel-aro{animation:dibujarAro .62s cubic-bezier(.22,1,.36,1) forwards}
.cel-activa .cel-chulo{animation:dibujarChulo .38s cubic-bezier(.65,0,.35,1) .42s forwards}
@keyframes dibujarAro{to{stroke-dashoffset:0}}
@keyframes dibujarChulo{to{stroke-dashoffset:0}}

/* -- 2. El título entra desde abajo, el desenfoque se aclara -- */
.cel-titulo{
  font-size:clamp(26px,5.4vw,40px);line-height:1.08;margin:0 0 10px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(16px);filter:blur(6px)
}
.cel-sub{
  font-size:15.5px;color:var(--texto-2);margin:0 auto 30px;max-width:38ch;
  opacity:0;transform:translateY(12px)
}
.cel-activa .cel-titulo{animation:entrarSuave .68s cubic-bezier(.22,1,.36,1) .30s forwards}
.cel-activa .cel-sub{animation:entrarSuave .60s cubic-bezier(.22,1,.36,1) .44s forwards}
@keyframes entrarSuave{to{opacity:1;transform:translateY(0);filter:blur(0)}}

/* -- 3. El ahorro: la cifra que justifica todo -- */
.cel-ahorro{
  background:var(--sup-2);border:1.5px solid var(--linea);border-radius:var(--r-xl);
  padding:22px 24px;margin:0 auto 26px;max-width:400px;
  opacity:0;transform:translateY(18px) scale(.97)
}
.cel-activa .cel-ahorro{animation:entrarTarjeta .62s cubic-bezier(.22,1,.36,1) .56s forwards}
.cel-ahorro-rotulo{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:6px}
.cel-ahorro strong{display:block;font-family:var(--display);font-size:clamp(34px,8vw,52px);
  font-weight:800;letter-spacing:-.03em;color:var(--exito-txt);line-height:1}
.cel-ahorro-pie{display:block;font-size:13px;color:var(--texto-2);margin-top:8px}

/* -- 4. Tarjetas escalonadas: 70 ms entre una y otra -- */
.cel-tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.cel-tarjeta{
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-l);
  padding:15px 12px;opacity:0;transform:translateY(14px)
}
.cel-tarjeta span{display:block;font-size:11.5px;color:var(--texto-3);
  font-weight:600;margin-bottom:5px}
.cel-tarjeta strong{font-size:14.5px;color:var(--texto);word-break:break-word}
.cel-activa .cel-tarjeta{animation:entrarTarjeta .5s cubic-bezier(.22,1,.36,1) forwards}
.cel-activa .cel-tarjeta:nth-child(1){animation-delay:.72s}
.cel-activa .cel-tarjeta:nth-child(2){animation-delay:.79s}
.cel-activa .cel-tarjeta:nth-child(3){animation-delay:.86s}
@keyframes entrarTarjeta{to{opacity:1;transform:translateY(0) scale(1)}}

/* -- Confeti: cae, deriva y gira. Se retira solo a los 4 s -- */
.confeti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.confeti i{
  position:absolute;top:-24px;display:block;
  animation-name:caerConfeti;animation-timing-function:cubic-bezier(.35,.15,.55,1);
  animation-fill-mode:forwards
}
@keyframes caerConfeti{
  0%  {transform:translate3d(0,0,0) rotate(0);opacity:0}
  12% {opacity:1}
  100%{transform:translate3d(var(--deriva,0),480px,0) rotate(var(--giro,360deg));opacity:0}
}

@media (max-width:520px){
  .cel-tarjetas{grid-template-columns:1fr;gap:9px}
  .cel-tarjeta{display:flex;justify-content:space-between;align-items:center;text-align:left}
  .cel-tarjeta span{margin:0}
}

/* ============================================================
   Sin movimiento: se muestra el resultado final de una vez.
   No es un detalle opcional. Hay personas a las que el
   movimiento en pantalla les produce mareo real.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .cel-titulo,.cel-sub,.cel-ahorro,.cel-tarjeta{
    opacity:1 !important;transform:none !important;filter:none !important;animation:none !important
  }
  .cel-aro,.cel-chulo{stroke-dashoffset:0 !important;animation:none !important}
  .confeti{display:none}
}

/* ============================================================
   RULETA DE OFERTAS · lado del comprador
   La rueda gira con una sola transformación CSS. El ángulo final
   lo fija el JavaScript con el dato que dio el servidor: el
   navegador nunca decide qué premio sale.
   ============================================================ */
.ruleta-caja{position:relative;text-align:center;padding:26px 20px;background:var(--sup);
  border:1.5px solid var(--linea);border-radius:var(--r-xl);overflow:hidden}
.ruleta-caja h3{font-size:20px;margin:0 0 6px}
.ruleta-caja > p{font-size:14px;color:var(--texto-2);margin:0 auto 20px;max-width:40ch;line-height:1.6}

.ruleta-pista{position:relative;width:min(280px,78vw);aspect-ratio:1;margin:0 auto 22px}
.ruleta-aguja{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:19px solid var(--tinta);filter:drop-shadow(0 2px 3px rgba(20,34,79,.3))}
.ruleta-rueda{position:absolute;inset:0;border-radius:50%;background:var(--grad);
  border:6px solid var(--tinta);box-shadow:0 6px 22px rgba(20,34,79,.18);
  transform:rotate(0deg);will-change:transform}
.ruleta-rueda::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  margin:-22px 0 0 -22px;background:var(--sup);border-radius:50%;
  border:4px solid var(--tinta);z-index:2}
.ruleta-gajo{position:absolute;inset:0;transform-origin:50% 50%;
  display:flex;justify-content:center;pointer-events:none}
.ruleta-gajo em{font-style:normal;font-size:11.5px;font-weight:800;color:#fff;
  padding-top:16px;max-width:64px;text-align:center;line-height:1.15;
  text-shadow:0 1px 2px rgba(20,34,79,.45)}

.ruleta-pie{font-size:13px;color:var(--texto-2);margin:16px auto 0;max-width:38ch;line-height:1.6}
.ruleta-cupon{display:inline-block;margin-top:6px;font-family:var(--mono,monospace);
  font-size:16px;letter-spacing:2px;padding:6px 14px;border-radius:var(--r-m);
  background:var(--sup-2);border:1.5px dashed var(--fucsia);color:var(--fucsia-txt)}

@media (prefers-reduced-motion:reduce){
  .ruleta-rueda{transition:none !important}
}

/* ============================================================
   SEÑALES DE DECISIÓN

   Colores con sentido, no decorativos: rojo solo para lo que de
   verdad se está acabando, verde para lo que ya está resuelto.
   Si todo gritara, nada se leería.

   Cada señal lleva texto además del color. Alguien que no
   distingue el rojo del verde —una de cada doce personas con
   visión masculina— tiene que poder leer lo mismo.
   ============================================================ */
.senal{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
  padding:3px 9px;border-radius:99px;white-space:nowrap
}
.senal::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.senal-ultimas{background:rgba(192,57,43,.10); color:var(--alerta-txt)}
.senal-poco   {background:rgba(244,128,31,.12);color:var(--mandarina-txt)}
.senal-agotado{background:var(--sup-2);         color:var(--texto-3)}
.senal-social {background:rgba(110,42,156,.09); color:var(--uva-txt)}
.senal-hoy    {background:rgba(15,138,95,.10);  color:var(--exito-txt)}

/* Anclaje de precio: el número tachado es lo que da la medida.
   Va en gris y más pequeño, para que el precio real siga siendo
   el protagonista visual. */
.senal-ahorro{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.senal-antes{font-size:13.5px;color:var(--texto-3);text-decoration:line-through}
.senal-pct{font-size:12px;font-weight:800;padding:2px 8px;border-radius:6px;
  background:rgba(192,57,43,.10);color:var(--alerta-txt)}
.senal-detalle{flex-basis:100%;font-size:12px;color:var(--texto-2)}

/* Progreso hacia el envío gratis: una meta a medio camino
   motiva más que una sin empezar. El faltante es exacto, nunca
   una estimación. */
.senal-envio{display:flex;flex-direction:column;gap:6px;padding:11px 13px;
  background:var(--sup-2);border-radius:var(--r-m);margin:10px 0}
.senal-envio span{font-size:12.5px;color:var(--texto-2)}
.senal-envio.listo span{color:var(--exito-txt);font-weight:700}
.senal-barra{height:6px;border-radius:99px;background:var(--linea);overflow:hidden}
.senal-barra i{display:block;height:100%;border-radius:99px;background:var(--grad);
  transition:width .45s cubic-bezier(.22,1,.36,1)}
.senal-envio.listo .senal-barra i{background:var(--exito)}
.prod-senales{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px;min-height:0}
.prod-senales:empty{display:none}

/* ============================================================
   AGREGADO (15 ago 2026) · Fotos reales de producto
   Antes el sitio solo pintaba el marcador de color de marco(),
   así que el catálogo se veía sin imágenes aunque el vendedor ya
   hubiera subido fotos. Estas reglas hacen que la foto real llene
   su contenedor sin deformarse.
   Las fotos ya salen cuadradas (1200×1200) desde Imagen.php, pero
   se deja object-fit por si alguna llegara con otra proporción.
   ============================================================ */
.foto-real{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:var(--sup-2);
}
.mini-foto .foto-real,
.item-foto .foto-real{border-radius:inherit}

/* ============================================================
   MEJORAS DE BOTONES Y FORMULARIOS · 15 ago 2026

   Tres problemas que traía el sitio:

   1. TODOS los botones importantes eran degradado. Cuando todo
      grita, nada se oye: el ojo no sabía dónde hacer clic. Ahora
      el degradado es identidad de marca, y la ACCIÓN QUE VENDE
      tiene su propio color exclusivo (--cta).
   2. Los botones no daban señal de estar procesando. La persona
      volvía a hacer clic y se generaban pedidos repetidos.
   3. Los campos de formulario tenían muy poco contorno; en
      celular no se veía dónde había que escribir.
   ============================================================ */

/* ---------- El botón que vende ---------------------------------
   Se usa SOLO en: agregar al carrito, comprar, pagar.
   Si se usa en todas partes, deja de funcionar. */
.btn-cta{
  background:var(--cta);
  color:var(--cta-texto);
  border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(154,52,10,.55);
  font-weight:800;
  letter-spacing:.01em;
}
.btn-cta:hover{
  background:var(--cta-fuerte);
  box-shadow:0 12px 26px -10px rgba(154,52,10,.6);
}
.btn-cta:active{box-shadow:0 3px 10px -6px rgba(154,52,10,.7)}

/* Área de toque mínima de 44 px en celular: es la recomendación de
   accesibilidad de Apple y Google. Un botón de compra que falla al
   primer toque es una venta perdida. */
@media (max-width:760px){
  .btn{min-height:44px}
  .btn-s{min-height:40px}
}

/* ---------- Estado "procesando" --------------------------------
   Sin esto la gente hace doble clic en Pagar. */
.btn[aria-busy="true"]{
  pointer-events:none;
  position:relative;
  color:transparent !important;
}
.btn[aria-busy="true"]::after{
  content:"";
  position:absolute;
  width:17px;height:17px;
  border:2.5px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  color:var(--cta-texto);
  animation:btn-giro .6s linear infinite;
}
@keyframes btn-giro{to{transform:rotate(360deg)}}
/* Si la persona pidió menos movimiento en su sistema, se respeta:
   se muestra un punto fijo en vez de un giro. */
@media (prefers-reduced-motion:reduce){
  .btn[aria-busy="true"]::after{animation:none;border-top-color:currentColor;opacity:.6}
}

/* ---------- Foco visible con el teclado ------------------------
   Anillo doble para que se vea igual sobre fondo claro y oscuro.
   Con :focus-visible aparece al tabular, no al hacer clic. */
.btn:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{
  outline:3px solid var(--cta);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(194,65,12,.18);
}

/* ---------- Campos de formulario -------------------------------
   Más contorno, más alto y texto de 16 px: por debajo de 16 px
   Safari en iPhone hace zoom automático al tocar el campo, y la
   página "salta". Es la causa nº 1 de formularios que se sienten
   rotos en celular. */
.campo input,
.campo select,
.campo textarea{
  font-size:16px;
  min-height:46px;
  border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r-s);
  background:var(--sup);
  color:var(--texto);
  padding:11px 13px;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.campo input::placeholder,
.campo textarea::placeholder{color:var(--texto-3);opacity:1}
.campo input:hover,
.campo select:hover,
.campo textarea:hover{border-color:var(--texto-3)}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  border-color:var(--cta);
  box-shadow:0 0 0 4px rgba(194,65,12,.14);
  outline:none;
}
/* El error se marca con color Y con texto. Una de cada doce
   personas con visión masculina no distingue el rojo. */
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"]{
  border-color:var(--alerta);
  box-shadow:0 0 0 4px rgba(192,57,43,.14);
}
.campo .error-campo{
  display:flex;align-items:center;gap:5px;
  color:var(--alerta-txt);font-size:12.5px;font-weight:600;margin-top:5px;
}
.campo .error-campo::before{content:"⚠";font-size:13px}
.campo label{
  display:block;font-size:13px;font-weight:700;
  color:var(--texto-2);margin-bottom:5px;
}

/* ---------- Inicio de sesión -----------------------------------
   Antes era un formulario suelto dentro de una ventana. Ahora
   lleva el logo arriba, para que se vea de quién es la página
   donde uno escribe su contraseña: es la señal de confianza que
   más pesa a la hora de decidir si uno se registra o se va. */
.acceso-marca{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;margin-bottom:20px;
}
.acceso-marca img{width:56px;height:56px;display:block}
.acceso-marca b{font-family:var(--display);font-size:19px;letter-spacing:-.02em;color:var(--texto)}
.acceso-marca small{color:var(--texto-3);font-size:12.5px}

.acceso-seguro{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:14px;font-size:12px;color:var(--texto-3);
}
.acceso-seguro svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* Medidor de fortaleza de la contraseña. Se exige largo (10) y que
   no sea una contraseña obvia, que es lo que recomienda hoy el
   NIST, en vez del clásico "una mayúscula y un símbolo" — esa
   regla produce Aycomer1!, que se adivina sola. */
.clave-fuerza{display:flex;gap:4px;margin-top:7px}
.clave-fuerza span{
  height:4px;flex:1;border-radius:999px;background:var(--linea);
  transition:background .2s;
}
.clave-fuerza[data-nivel="1"] span:nth-child(1){background:var(--alerta)}
.clave-fuerza[data-nivel="2"] span:nth-child(-n+2){background:var(--miel-txt)}
.clave-fuerza[data-nivel="3"] span:nth-child(-n+3){background:var(--exito)}
.clave-fuerza[data-nivel="4"] span{background:var(--exito)}