/* ═══════════════════════════════════════════════════════════════
   PAPIROS — sistema de diseño base
   Color de marca: azul #0B1F3B · dorado #D8A43B · plata #D8DDE3
   Tipografía: Myriad Pro (familia completa) con respaldo del sistema
   ═══════════════════════════════════════════════════════════════ */

/* --- Fuentes Myriad Pro ---
   Cuando Papiros suba los archivos .woff2 a /assets/fonts/, descomenta este
   bloque y el sitio usará Myriad. Mientras tanto usa Source Sans 3 (casi
   idéntica), sin errores de carga.

@font-face{
  font-family:"Myriad Pro";
  src:url("../fonts/myriadpro-light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("../fonts/myriadpro-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("../fonts/myriadpro-semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("../fonts/myriadpro-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
*/

:root{
  /* colores de marca */
  --azul:#0B1F3B;
  --azul-2:#0F2748;
  --azul-3:#16335C;
  --oro:#D8A43B;
  --oro-claro:#E8C378;
  --oro-oscuro:#B8862A;
  --plata:#D8DDE3;

  /* neutros */
  --papel:#F7F6F3;
  --papel-2:#EDEBE6;
  --tinta:#182234;
  --tinta-media:#5A6373;
  --linea:#DCD9D2;
  --blanco:#fff;

  /* estado */
  --exito:#1E7A46;
  --alerta:#B54708;

  /* tipografía */
  --sans:"Myriad Pro","Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  /* medidas */
  --alto-header:74px;
  --radio:4px;
  --ancho:1180px;
  --sombra:0 10px 40px rgba(11,31,59,.12);
  --sombra-alta:0 24px 60px rgba(11,31,59,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--alto-header);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
/* red de seguridad: ningún ícono SVG se expande sin control */
svg{max-width:100%;max-height:100%}
.plat-ico svg,.datos .ico,.carrito-icono svg{width:24px;height:24px;flex:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 26px}

h1,h2,h3,h4{font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0}

/* ═══════ botones ═══════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15px var(--sans);padding:14px 26px;border-radius:var(--radio);
  border:1px solid transparent;cursor:pointer;transition:background .18s,transform .18s,border-color .18s,color .18s;
  text-align:center;white-space:nowrap}
.btn-oro{background:var(--oro);color:var(--azul)}
.btn-oro:hover{background:var(--oro-claro);transform:translateY(-1px)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-3)}
.btn-linea{border-color:rgba(216,221,227,.4);color:var(--plata)}
.btn-linea:hover{border-color:var(--oro);color:var(--oro-claro)}
.btn-linea-azul{border-color:var(--linea);color:var(--tinta);background:#fff}
.btn-linea-azul:hover{border-color:var(--azul);color:var(--azul)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1EBE5B;transform:translateY(-1px)}
.btn-grande{padding:16px 32px;font-size:16px}
.btn-bloque{width:100%}

/* ═══════ utilidades ═══════ */
.oculto{display:none!important}
.solo-lectura{cursor:default}
.centro{text-align:center}
.pill{display:inline-block;font:600 11.5px var(--sans);letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:2px}
.pill-oro{background:var(--oro);color:var(--azul)}
.pill-azul{background:var(--azul);color:var(--oro-claro)}

/* rótulo para espacios de imagen pendiente (los llena el editor) */
.img-slot{background:
    repeating-linear-gradient(45deg,#e9e7e1 0 12px,#efede8 12px 24px);
  display:flex;align-items:center;justify-content:center;color:#9a938a;
  font:500 13px var(--sans);text-align:center;padding:20px;
  border:1px dashed #cfc9bf;min-height:120px}
.img-slot span{max-width:24ch;line-height:1.4}
.img-slot small{display:block;margin-top:4px;font-size:11px;opacity:.7}

/* ═══════ moneda ═══════ */
.precio{font-variant-numeric:tabular-nums}