/* ALP Public UI v23 */
:root{ --alp-red:#fc4b08; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#ffffff; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 16px; }

.topbar{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; }
.topbar a {
  text-decoration: none;
}


.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo{ width:44px; height:44px; border-radius:10px; background:var(--alp-red); color:#fff; display:grid; place-items:center; font-weight:900; letter-spacing:1px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text span{ color:var(--muted); font-size:.85rem; }

.main-nav a{ color:inherit; text-decoration:none; margin-right:14px; }
.main-nav a:last-child{ margin-right:0; }

.actions{ display:flex; gap:8px; }
.actions a {
  text-decoration: none;   /* quita el subrayado */
  font-size: 1 rem;       /* más grande */
  font-weight: bold;       /* negrita */
}


.btn{ border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 14px; cursor:pointer; transition:transform .08s ease, box-shadow .2s ease; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.btn.primary{ background:linear-gradient(180deg,#ff7c49,#fc4b08); color:#fff; border-color:transparent; }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(252,75,8,.25); }

.section{ padding:20px 0 36px; }
.footer{ border-top:1px solid var(--line); padding:16px 0; color:var(--muted); }
#year{ font-variant-numeric: tabular-nums; }

/* ===========================
   HERO (BANNER / CARRUSEL)
   =========================== */

/* Contenedor del banner: alto fijo y sin recortes en la imagen */
.hero{
  position: relative;
  width: 100%;
  height: 420px;          /* Ajusta 360–480px a gusto */
  max-height: 60vh;       /* Responsivo en pantallas bajas */
  border-radius: 18px;
  overflow: hidden;
  background: #fff;       /* Color de “barras” cuando sobra espacio */
  margin-top:14px;
  overflow: hidden;   /* importante para que el contenido quede recortado */
}

/* Cada slide ocupa todo el contenedor */
.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slide.active{ opacity: 1; }

/* Mostrar SIEMPRE COMPLETO (sin zoom ni recortes) */
.hero-slide img,
.hero-slide video{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* <- clave: no recorta */
  object-position: center;
  display: block;
  background: #fff;        /* relleno detrás de la imagen */
  border-radius: 18px; 
}

/* Dots del carrusel */
.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hero-dot{ width:8px; height:8px; border-radius:50%; background:#fff8; cursor:pointer }
.hero-dot.active{ background:#fff }

/* Altura menor en móviles */
@media (max-width: 640px){
  .hero{ height: 300px; }
}

/* ===========================
   GRID / CARDS
   =========================== */

.grid{ display:grid; gap:14px; grid-template-columns: repeat(4, 1fr); }
@media (max-width:1024px){ .grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width:720px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:460px){ .grid{ grid-template-columns: 1fr;} }

.card{ border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px; display:flex; flex-direction:column; gap:10px; box-shadow:0 8px 20px rgba(2,8,23,.04); }
.card .title{ margin:0; font-weight:800; font-size:1rem; }
.price{ font-weight:800; color:var(--alp-red); }

/* Tarjeta: contenedor de imagen */
.card .card-img{
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:12px;
  background:#f8fafc;
  overflow:hidden;
  display:block;
  border:1px solid var(--line);
}

/* Imagen de portada en tarjeta (sin recortes) */
.card .card-img img,
.card .cover{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  background:#f8fafc;
}

/* ===========================
   FORM / INPUTS
   =========================== */

.form .row{ display:grid; gap:6px; margin-bottom:10px; }
label{ font-weight:700; font-size:.92rem; color:#111827; }
.input, textarea, select{
  width:100%; padding:12px 14px; border:2px solid #eef2f6; border-radius:12px; background:#fff; outline:none; font-size:0.98rem;
  transition:border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.input:focus, textarea:focus, select:focus{ border-color:#ffd5c6; box-shadow:0 0 0 4px rgba(252,75,8,.12); }
textarea{ min-height:120px; resize:vertical; }

/* ===========================
   CARRITO
   =========================== */

.cart{ display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
@media(max-width:900px){ .cart{ grid-template-columns: 1fr; } }
.panel{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 8px 20px rgba(2,8,23,.04); }
.cart-item{ display:grid; grid-template-columns: 96px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.cart-item:last-child{ border-bottom:none; }
.cart-thumb{ width:100px; height:130px; border-radius:10px; background:#f3f4f6; overflow:hidden; border:1px solid var(--line); display: flex;align-items: center;justify-content: center;}
.cart-thumb img{ width:100%; height:100%; object-fit:contain;display: block; }
.qty{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:10px; padding:4px 8px; }
.qty button{ border:none; background:#f1f5f9; border-radius:8px; padding:4px 8px; cursor:pointer; }
.total{ font-size:1.2rem; font-weight:900; color:var(--alp-red); }

.pagar {
  font-size: 1 rem;   /* más grande */
  font-weight: bold;   /* negrita */
  text-align: center;
   text-decoration: none;  /* quita subrayado */
}


/* ===========================
   MODAL y CARRUSEL de producto
   =========================== */

.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:100; }
.overlay.hidden{ display:none; }
.overlay-bg{ position:absolute; inset:0; background:#0008; backdrop-filter: blur(2px); }
.overlay-card{ position:relative; background:#fff; border-radius:16px; padding:20px; width:min(900px, 96vw); box-shadow:0 30px 70px rgba(0,0,0,.45); }
.close{ position:absolute; right:10px; top:10px; border:none; background:transparent; font-size:22px; cursor:pointer; }

.carousel{ position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--line); width:100%; }
.car-track{ display:flex; transition: transform .4s ease; }
.car-slide{ flex:0 0 100%; display:flex; align-items:center; justify-content:center; }
.car-slide img{
  width:100%;
  height:420px;
  object-fit:contain;
  display:block;
  background:#f8fafc;
  border-radius:12px;
}
@media (max-width: 640px){
  .car-slide img{ height:260px; }
}
.car-btn{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:#0008; color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; }
.car-prev{ left:10px; }
.car-next{ right:10px; }
.car-dots{ display:flex; gap:6px; justify-content:center; margin-top:8px; }
.car-dot{ width:8px; height:8px; border-radius:50%; background:#ddd; }
.car-dot.active{ background:var(--alp-red); }

.preline { white-space: pre-line; }


.site-resumen p{ margin: 0 0 8px; }
.site-resumen ul{ margin: 8px 0 8px 20px; }



/* badge del carrito */
.cart-link{ position:relative; display:inline-block; }
.cart-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 6px;
  background:#fc4b08; color:#fff; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; border:2px solid #fff;
}
.hidden{ display:none !important; }

/* “bump” cuando se agrega algo */
@keyframes cart-bump {
  0%{ transform:scale(1); }
  20%{ transform:scale(1.12); }
  60%{ transform:scale(0.98); }
  100%{ transform:scale(1); }
}
.cart-link.bump{ animation: cart-bump 380ms ease-out; }

/* brilla si hay items */
.cart-link.has-items img{
  filter: drop-shadow(0 0 8px rgba(252,75,8,.35));
}






/* Botón en loading: oculta el texto y muestra un spinner que da vueltas */
.btn.loading{
  position: relative;
  pointer-events: none;     /* bloquea clicks */
  color: transparent !important; /* oculta texto */
  opacity: .95;
}
.btn.loading > *{ visibility:hidden; } /* por si el botón tiene spans internos */

.btn.loading::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:18px; height:18px;
  border-radius:999px;
  border:2.5px solid transparent;
  border-top-color:#fff;    /* spinner claro para .btn.primary */
  border-right-color:#fff;
  animation:spin .7s linear infinite;
}
.btn:not(.primary).loading::after{
  border-top-color:#0f172a; /* si el botón NO es .primary, que el spinner sea oscuro */
  border-right-color:#0f172a;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn[disabled]{ cursor:not-allowed; filter:saturate(.85); }



/* Wiggle que ya usas (lo repito por si no lo tenías igual) */
@keyframes cart-wiggle {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.12) rotate(-10deg); }
  40%  { transform: scale(1.12) rotate(10deg); }
  60%  { transform: scale(1.06) rotate(-6deg); }
  80%  { transform: scale(1.03) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.cart-link.bump img{
  animation: cart-wiggle 480ms ease-out;
  will-change: transform;
}

/* Parpadeo de color (glow) */
@keyframes cart-blink {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(252,75,8,0)) saturate(1) brightness(1); }
  50%      { filter: drop-shadow(0 0 16px rgba(252,75,8,.9)) saturate(1.35) brightness(1.05); }
}
.cart-link.blink img{
  animation: cart-blink 1.1s ease-in-out infinite;
}

/* Opcional: un anillo suave alrededor del contenedor mientras parpadea */
@keyframes cart-ring {
  0%   { box-shadow: 0 0 0 0 rgba(252,75,8,.50); }
  70%  { box-shadow: 0 0 0 10px rgba(252,75,8,.05); }
  100% { box-shadow: 0 0 0 0 rgba(252,75,8,0); }
}
.cart-link.blink::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  animation: cart-ring 1.1s ease-out infinite;
  pointer-events:none;
}




.fly-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition:
    transform 700ms cubic-bezier(.22,.61,.36,1),
    opacity   700ms cubic-bezier(.22,.61,.36,1);
}



/* Toast "Agregado al carrito" */
.toast-add {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 3000; pointer-events: none; /* no bloquea clics debajo */
}
.toast-add.hidden { display: none !important; }

.toast-card {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 18px 50px rgba(2,8,23,.18);
  transform: scale(.96); opacity: 0;
  animation: toast-in 160ms ease-out forwards;
}

.toast-card.out {
  animation: toast-out 180ms ease-in forwards;
}

.toast-icon {
  width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  background: #22c55e; /* verde */
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.toast-text { font-weight: 800; color: #0f172a; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(.98); }
}
/*------------------------------------*/
/* ===== Sucursales (front) ===== */
.branches-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
}
.branch-view{
  background:#fff; border:1px solid #e2e8f0; border-radius:16px;
  box-shadow:0 10px 30px rgba(2,8,23,.08); overflow:hidden;
  transition:.25s transform,.25s box-shadow;
}
.branch-view:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(2,8,23,.12); }
.branch-view .thumb{ width:100%; aspect-ratio:16/10; object-fit:cover; background:#f8fafc; display:block; }
.branch-view .box{ padding:12px 14px 14px; }
.branch-view .title{ font-weight:800; color:#0f172a; margin:2px 0 4px; }
.branch-view .meta{ color:#64748b; font-size:.94rem; }
.branch-view .actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.branch-view .btn{ border:1px solid #e2e8f0; background:#fff; color:#0f172a; }
.branch-view .btn.primary{ background:linear-gradient(180deg,#ff8c63,#fc4b08); color:#fff; border-color:transparent; }
.branch-view details{ margin-top:10px; }
.branch-view summary{ cursor:pointer; color:#0f172a; font-weight:700; list-style:none; }
.branch-view summary::-webkit-details-marker{ display:none; }
.branch-view .rich{ margin-top:8px; color:#0f172a; line-height:1.5; }
.branch-view .rich img{ max-width:100%; height:auto; border-radius:10px; }
.branch-empty{ color:#64748b; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:16px; padding:16px; }


/* Contenedor: que el bloque en sí quede centrado */
.uploader{
  width:100%;
  max-width:200px;
  margin:0 auto;            /* centra el bloque */
  display:flex;
  justify-content:center;   /* centra el tile si es más pequeño */
  /* si está dentro de una grid/flex y no se centra, añade: */
  justify-self:center;
  align-self:center;
}

/* Tarjeta: centra TODO su contenido */
.uploader-tile{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  border:2px dashed var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#fffdfb);
  display:flex;                 /* <— usa flex para centrar */
  flex-direction:column;
  align-items:center;           /* centra horizontal */
  justify-content:center;       /* centra vertical */
  gap:6px;
  text-align:center;            /* centra textos */
  cursor:pointer;
  transition:.18s ease;
  box-shadow:0 10px 22px rgba(2,8,23,.06);
  overflow:hidden;
}

/* (opcional) Asegura que la zona clicable cubra toda la tarjeta */
.uploader-input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* Tu estilo del “+” funciona tal cual, no hace falta cambiarlo */
.uploader-plus{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  font-size:36px; font-weight:900; color:#fc4b08; background:#fff7f2;
  box-shadow:0 0 0 5px #fff0ea inset, 0 0 0 1px #ffe2d6 inset;
  user-select:none;
}

/* Si usas este contenedor de llamada, también céntralo por si acaso */
.uploader-cta{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
}


/* estilos mínimos reusables */
.badge{ display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid #ddd; vertical-align:middle; }
.dep-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
.dep-card{ padding:12px; border:1px solid var(--line,#e9e9e9); border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(2,8,23,.05); }
.dep-card header{ font-size:1.02rem; margin-bottom:6px; }
.dep-row{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.dep-row span{ color:var(--muted,#667); min-width:80px; }
.dep-actions{ margin-top:6px; }
.btn.sm{ padding:6px 10px; font-size:.9rem; }
.btn.danger{ background:#fff0f0; border:1px solid #ffd6d6; color:#b00020; }
.input{ padding:8px 10px; border:1px solid var(--line,#e0e0e0); border-radius:10px; width:100%; }
.select{ padding:8px 10px; border:1px solid var(--line,#e0e0e0); border-radius:10px; width:100%; background:#fff; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding:10px; border-bottom:1px solid #eee; text-align:left; }
.table th{ background:#fafafa; position:sticky; top:0; z-index:1; }


/* ===== Tarjetas de cuentas para depósito ===== */
.dep-wrap{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.dep-card{
  display:grid; gap:10px; padding:12px; border:1px solid #e2e8f0; border-radius:14px; background:#fff;
  box-shadow:0 8px 22px rgba(2,8,23,.05);
}
.dep-head{ display:flex; align-items:center; gap:10px; }
.dep-chip{
  width:22px; height:22px; border-radius:6px; border:1px solid #e2e8f0; flex-shrink:0;
}
.dep-bank{ font-weight:800; }
.dep-small{ color:#64748b; font-size:.9rem; }
.dep-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dep-num{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.dep-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.dep-copy{
  border:1px solid #e2e8f0; background:#f8fafc; border-radius:10px; padding:6px 10px; cursor:pointer;
}
.dep-radio{ display:flex; align-items:center; gap:8px; }

  .preline{ white-space:pre-line; }

/* 3 columnas: brand | (auto) | actions  */
.topbar .wrap{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

/* Menú a la derecha dentro de su columna central */
.main-nav{ justify-self: end; }

/* Si quieres separar un poco del carrito */
.actions{ margin-left: 10px; }


/* ==== Ajustes franja social (iconos pequeños y blancos) ==== */
.social-footer{
  background:#fc4b08;           /* franja naranja sólida */
  color:#fff;
}
.social-wrap{ padding:18px 0; gap:10px; }

.social-texts h3{ font-size:1.05rem; margin:0; }
.social-contacts{ font-size:.92rem; margin:.25rem 0 0; }
.social-contacts a{ color:#fff; text-decoration:underline; }

/* Iconos más pequeños */
.social-icons{ gap:8px; margin-top:6px; }
.social-icons .ic{
  width:34px;                  /* antes 44px */
  height:34px;
  border-radius:20px;
  border:1.5px solid rgba(255,255,255,.75);
  background:transparent;      /* sobre la franja naranja */
  display:grid; place-items:center;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.social-icons .ic:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.18);
  border-color:#fff;
}
.social-icons .ic svg{
  width:18px;                  /* antes 22px */
  height:18px;
  fill:#fff;                   /* icono blanco */
}

/* Más compacto en móviles */
@media (max-width:640px){
  .social-wrap{ padding:14px 0; }
  .social-icons .ic{ width:30px; height:30px; }
  .social-icons .ic svg{ width:16px; height:16px; }
  .social-texts h3{ font-size:1rem; }
  .social-contacts{ font-size:.88rem; }
}

/* ==== Fuerza los iconos en horizontal ==== */
.social-icons{
  display: flex !important;      /* fila */
  flex-direction: row;
  align-items: center;
  justify-content: center;       /* pon 'flex-start' si los quieres a la izquierda */
  gap: 8px;
  flex-wrap: nowrap;             /* sin saltos de línea */
  overflow-x: auto;              /* si no caben, deslizar horizontal */
  -webkit-overflow-scrolling: touch;
}

/* scrollbar finito (opcional) */
.social-icons::-webkit-scrollbar{ height:6px; }
.social-icons::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.35);
  border-radius: 999px;
}


/* ===== Modal de anuncios ===== */
.ads-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:4000; }
.ads-overlay.hidden{ display:none; }
.ads-backdrop{ position:absolute; inset:0; background:#0b1220cc; backdrop-filter: blur(2px); animation: adsFadeIn .22s ease forwards; }

.ads-card{
  position:relative; z-index:1; width:min(640px, 56vw);
  background:rgba(0,0,0,.78); ; 
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; 
  overflow:hidden;
  box-shadow:0 30px 80px rgba(2,6,23,.45);
  transform: translateY(8px) scale(.98); opacity:0; animation: adsPopIn .24s ease forwards;
}

.ads-close{
  position:absolute; right:10px; top:10px; z-index:3;
  width:36px; height:36px; border:none; border-radius:10px; cursor:pointer;
  background:#ffffffee; color:#0f172a; font-size:24px; line-height:1;
  box-shadow:0 6px 18px rgba(2,6,23,.14);
}
.ads-close:hover{ filter:brightness(.96); }

/* Carrusel */
.ads-carousel{ position:relative; overflow:hidden; }
.ads-track{ display:flex; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.ads-slide{
  flex:0 0 100%; display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.ads-slide img{
  width:100%; height:70vh; max-height:500px; max-width: 990px; object-fit:contain; display:block; background:#fff;
}
@media (max-width:640px){ .ads-slide img{ height:60vh; } }

.ads-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px; height:40px; 
  border:none; 
  border-radius:50%;
  cursor:pointer;
  background:#0008; 
  color:#fff; 
  font-size:28px; line-height:1; display:grid; place-items:center;
  z-index:2;
}
.ads-prev{ left:10px; }
.ads-next{ right:10px; }
.ads-nav:hover{ background:#000c; }

.ads-dots{ display:flex; gap:8px; justify-content:center; padding:10px 0 14px; background:#fff; }
.ads-dot{
  width:8px; height:8px; border-radius:999px; background:#d1d5db; cursor:pointer;
}
.ads-dot.active{ background:#fc4b08; transform:scale(1.1); }

@keyframes adsFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes adsPopIn{ to{ transform: translateY(0) scale(1); opacity:1 } }