/* Upco WEB — sistema de diseño compartido (mismos tokens que Upco Homey e InsurGest,
   para que toda la gama Upco se sienta como un solo producto). Un solo lugar para
   tipografía, sombras y botones — cambiar aquí se refleja en todas las páginas del sitio. */

:root{
  --navy-950:#0a1c35;
  --navy-900:#10284A;
  --navy-800:#173863;
  --navy-700:#1f4a80;
  --navy-100:#E8EEF7;
  --amber-600:#B45309;
  --amber-500:#F59E0B;
  --amber-400:#FBBF24;
  --line:#DDE4EE;
  --line-soft:rgba(16,40,74,.08);
  --good:#16a34a;
  --danger:#dc2626;
  --shadow-sm:0 1px 2px rgba(16,28,53,.05);
  --shadow-md:0 3px 12px rgba(16,28,53,.07), 0 1px 3px rgba(16,28,53,.05);
  --shadow-lg:0 16px 36px rgba(16,28,53,.13), 0 2px 8px rgba(16,28,53,.06);
  --shadow-navy:0 10px 26px rgba(16,40,74,.24);
  --shadow-amber:0 8px 20px rgba(245,158,11,.28);
  --shadow-good:0 8px 20px rgba(22,163,74,.22);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --font-display:'Fraunces',ui-serif,Georgia,'Iowan Old Style',serif;
}

/* ============ LOGOTIPO "UPCO" EN TEXTO ============
   El logo real (logo-upco.png) tiene transparencia, así que se puede usar como máscara para
   dibujar exactamente sus mismas formas (incluido el acento sobre la "U") en cualquier color —
   sin esto, el "Upco" en los encabezados se escribía en Fraunces y no calzaba con el logotipo real.
   url() aquí es relativo a este archivo (raíz del repo), así que funciona igual sin importar
   desde qué carpeta se cargue estilos.css. */
.brand-logo{
  display:inline-block;vertical-align:middle;
  width:64px;height:24px;
  background-color:#fff;
  -webkit-mask-image:url(logo-upco.png);mask-image:url(logo-upco.png);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;text-wrap:balance}

/* ============ BOTONES ============
   El componente Boton (repetido en app/promotor/admin/p) le pone className="btn btn-<variante>"
   según el color que recibe — el fondo y la sombra viven aquí, no inline, para poder animar
   hover/active. El estado disabled se maneja completo en CSS: si Boton siguiera fijando el
   fondo inline cuando disabled, ganaría por especificidad y taparía esto sin avisar. */
.btn{
  border:none;border-radius:var(--radius-sm);padding:12px 20px;font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:disabled{
  background:#DDE4EE !important;color:#9ca3af !important;box-shadow:none !important;
  cursor:not-allowed;transform:none !important;filter:none !important;
}
.btn-navy{background:linear-gradient(180deg,var(--navy-800),#0d2140);color:#fff;box-shadow:var(--shadow-navy)}
.btn-navy:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 14px 30px rgba(16,40,74,.30)}
.btn-navy:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}

.btn-amber{background:linear-gradient(180deg,var(--amber-400),var(--amber-500));color:var(--navy-900);box-shadow:var(--shadow-amber)}
.btn-amber:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 12px 26px rgba(245,158,11,.34)}
.btn-amber:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}

.btn-neutral{background:#53647D;color:#fff;box-shadow:var(--shadow-sm)}
.btn-neutral:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.btn-neutral:active:not(:disabled){transform:translateY(0)}

.btn-good{background:linear-gradient(180deg,#22c55e,var(--good));color:#fff;box-shadow:var(--shadow-good)}
.btn-good:hover:not(:disabled){transform:translateY(-1.5px)}
.btn-good:active:not(:disabled){transform:translateY(0)}

/* ============ CAMPOS DE FORMULARIO ============
   Mejora global sin tener que tocar cada input del código: el foco ya se ve intencional
   en vez del contorno azul por default del navegador. !important porque el borde en reposo
   se sigue fijando inline (color por default) y de otro modo ganaría sobre el de aquí. */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--navy-700) !important;
  box-shadow:0 0 0 3px rgba(16,40,74,.13);
}

/* ============ ACCIONES DE LA TARJETA DIGITAL (WhatsApp / llamar / correo) ============
   Son <div> dentro de <a>, no <button>, así que no usan .btn — solo necesitan la misma
   sensación de "esto es interactivo" al pasar el mouse. */
.tarjeta-accion{transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 2px 8px rgba(16,28,53,.06)}
.tarjeta-accion:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,28,53,.15)}
.tarjeta-accion:active{transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none !important}
}

/* ============ BOTON FLOTANTE DE WHATSAPP ============
   En Mexico la PYME contacta por WhatsApp, no por correo. El sitio solo tenia enlaces
   mailto:, que en celular abren una app de correo que mucha gente no tiene configurada —
   los prospectos llegaban y no encontraban por donde escribir. Va en todas las paginas. */
.wa-flotante{
  position:fixed; right:18px; bottom:18px; z-index:900;
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#fff; text-decoration:none;
  padding:14px 18px; border-radius:100px; font-weight:700; font-size:15px;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-flotante:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.28); color:#fff; }
.wa-flotante:focus-visible{ outline:3px solid #10284A; outline-offset:3px; }
.wa-flotante svg{ width:26px; height:26px; flex:0 0 auto; }
/* En celular solo el icono: una etiqueta ancha tapa el contenido en pantallas chicas. */
@media (max-width:640px){
  .wa-flotante{ padding:15px; right:14px; bottom:14px; }
  .wa-flotante .wa-texto{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .wa-flotante{ transition:none; } }

/* ============ MUESTRAS DE TRABAJO ============ */
.demos{ max-width:1080px; margin:0 auto; padding:56px 20px 8px; }
.demos-cab{ text-align:center; margin-bottom:28px; }
.demos-cab h2{ font-size:clamp(24px,3.6vw,34px); margin:0 0 10px; }
.demos-cab p{ color:#53647D; max-width:60ch; margin:0 auto; }
.demos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; }
.demo-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-md); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.demo-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.demo-top{ background:linear-gradient(135deg,#173863,#0a1c35); padding:26px 22px; color:#fff; }
.demo-top .etiqueta{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#F59E0B; }
.demo-top h3{ margin:8px 0 0; font-size:20px; color:#fff; }
.demo-body{ padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; gap:14px; }
.demo-body p{ margin:0; color:#53647D; font-size:15px; line-height:1.6; }
.demo-body .btn{ align-self:flex-start; }
@media (prefers-reduced-motion:reduce){ .demo-card{ transition:none; } }