/* ===== Reusanza — tema "etiqueta de paquete / cinta de embalaje" ===== */
:root{
  --kraft:#b98b5e;
  --kraft2:#8d6742;
  --tinta:#23201d;
  --amarillo:#f2c14e;
  --papel:#f7f3ec;
  --verde:#4a6b4f;
  --linea:#d8c3a5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 8%, rgba(185,139,94,.08) 0 22%, transparent 23%),
    repeating-linear-gradient(0deg, rgba(141,103,66,.035) 0 1px, transparent 1px 26px),
    var(--papel);
  color:var(--tinta);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
}
.mono{font-family:"Courier New",Consolas,monospace;letter-spacing:.06em}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
a{color:var(--kraft2)}
a:hover{color:var(--tinta)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:1.9rem;letter-spacing:-.01em}
h2{font-size:1.32rem;border-bottom:2px dashed var(--linea);padding-bottom:.3em}
h3{font-size:1.06rem;color:var(--kraft2)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:.28em 0}
strong{color:#1a1815}
.eyebrow{font-family:"Courier New",monospace;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kraft2)}

/* ---------- Barra superior "cinta" ---------- */
.toptape{height:10px;background:repeating-linear-gradient(45deg,
  var(--amarillo) 0 14px, #e0ad35 14px 28px)}

/* ---------- NAVEGACIÓN: tira horizontal de etiquetas ---------- */
.navbar{background:linear-gradient(180deg,#efe6d7,#e6dac6);
  border-bottom:3px solid var(--kraft2);position:relative}
.navbar::after{content:"";display:block;height:8px;
  background:repeating-linear-gradient(90deg,var(--amarillo) 0 22px,#d9a835 22px 44px)}
.nav-etiquetas{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;
  padding:16px 18px 14px;max-width:1080px;margin:0 auto}
.marca{font-family:"Courier New",monospace;font-weight:700;letter-spacing:.08em;
  font-size:1rem;color:var(--tinta);text-decoration:none;margin-right:8px;
  padding:8px 10px;border:2px solid var(--tinta);border-radius:3px;
  background:var(--papel);box-shadow:3px 3px 0 var(--kraft2)}
.marca span{color:var(--kraft2)}
.etq{position:relative;display:block;text-decoration:none;color:var(--tinta);
  background:var(--papel);border:1px solid var(--kraft2);border-radius:2px;
  padding:9px 11px 7px;font-family:"Courier New",monospace;font-weight:600;
  font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 1px 0 rgba(35,32,29,.18);transition:transform .12s ease;}
.etq .bc{display:block;height:5px;margin-top:6px;
  background:repeating-linear-gradient(90deg,var(--tinta) 0 2px,transparent 2px 4px,
  var(--tinta) 4px 6px,transparent 6px 9px,var(--tinta) 9px 10px,transparent 10px 13px)}
.etq:hover{transform:translateY(-3px)}
.etq.activa{transform:translateY(-6px);border-bottom:7px solid var(--amarillo);
  box-shadow:0 5px 0 rgba(35,32,29,.22)}
.etq.activa .bc{background:repeating-linear-gradient(90deg,var(--kraft2) 0 2px,
  transparent 2px 4px,var(--kraft2) 4px 6px,transparent 6px 9px)}

/* ---------- CABECERA "shipping label" ---------- */
.remito{max-width:1080px;margin:22px auto 0;padding:0 18px}
.remito-caja{border:3px dashed var(--kraft2);background:var(--papel);
  border-radius:4px;display:grid;grid-template-columns:1.15fr .95fr auto;
  gap:14px 20px;padding:16px 18px;box-shadow:6px 6px 0 rgba(185,139,94,.28)}
.remito-campo .rotulo{font-family:"Courier New",monospace;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--kraft2);display:block;margin-bottom:2px}
.remito-campo .valor{font-weight:700;font-size:.98rem}
.remito-campo .valor small{display:block;font-weight:400;color:#5d564e;font-size:.78rem}
.remito-bc{display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.barras{height:46px;min-width:150px;
  background:repeating-linear-gradient(90deg,var(--tinta) 0 2px,transparent 2px 4px,
  var(--tinta) 4px 5px,transparent 5px 8px,var(--tinta) 8px 11px,transparent 11px 13px,
  var(--tinta) 13px 14px,transparent 14px 18px)}
.pie-etq{font-family:"Courier New",monospace;font-size:.62rem;color:#5d564e;letter-spacing:.08em}

/* ---------- Bloques de contenido ---------- */
main{max-width:1080px;margin:0 auto;padding:26px 18px 40px}
.lead{font-size:1.08rem;color:#3c3730}
.boton{display:inline-block;background:var(--verde);color:#fff;text-decoration:none;
  font-family:"Courier New",monospace;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:.82rem;padding:13px 20px;border:2px solid #35503a;
  border-radius:3px;box-shadow:4px 4px 0 rgba(35,32,29,.25);transition:transform .12s}
.boton:hover{transform:translate(-2px,-2px);color:#fff}
.boton.gris{background:var(--kraft2);border-color:#6e4f31}
.acciones{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0}

/* Rejillas + tarjetas "paquete" */
.rejilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin:22px 0}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.paquete{position:relative;background:var(--papel);border:1px solid var(--linea);
  border-radius:3px;padding:26px 18px 22px;overflow:hidden;
  box-shadow:0 2px 0 rgba(35,32,29,.08)}
.paquete::before{content:"";position:absolute;top:0;left:0;right:0;height:13px;
  background:repeating-linear-gradient(45deg,var(--kraft) 0 9px,var(--kraft2) 9px 18px)}
.paquete::after{content:"";position:absolute;bottom:5px;left:0;right:0;height:0;
  border-bottom:2px dashed var(--linea)}
.paquete h3{margin-top:.2em;margin-bottom:.35em}
.paquete p:last-child{margin-bottom:0}

/* Lista con viñetas tipo "línea de embalaje" */
.lista-rollo{list-style:none;padding:0;margin:0 0 1em}
.lista-rollo li{position:relative;padding-left:34px;margin:.55em 0}
.lista-rollo li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;
  border:2px solid var(--verde);border-right:0;border-top:0;transform:rotate(-45deg);
  border-radius:1px}

/* ---------- Iconos CSS ---------- */
.ico{display:inline-block;position:relative;width:34px;height:34px;flex:0 0 34px;
  margin-right:10px;vertical-align:middle}
.ico-caja{border:2px solid var(--kraft2);border-radius:2px;background:var(--papel)}
.ico-caja::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:var(--amarillo);transform:translateX(-50%)}
.ico-caja::after{content:"";position:absolute;left:0;right:0;top:42%;height:2px;background:var(--kraft2)}
.ico-camion{border:2px solid var(--tinta);border-radius:2px;height:24px;margin-top:6px;width:34px}
.ico-camion::before{content:"";position:absolute;right:-11px;top:8px;width:11px;height:16px;
  border:2px solid var(--tinta);border-left:0;border-radius:0 3px 3px 0;background:var(--papel)}
.ico-camion::after{content:"";position:absolute;left:4px;bottom:-6px;width:9px;height:9px;
  border-radius:50%;background:var(--tinta);box-shadow:17px 0 0 var(--tinta)}
.ico-balanza::before{content:"";position:absolute;left:50%;top:2px;width:2px;height:30px;
  background:var(--kraft2);transform:translateX(-50%)}
.ico-balanza::after{content:"";position:absolute;left:2px;right:2px;top:6px;height:2px;
  background:var(--kraft2);box-shadow:0 15px 0 -1px var(--tinta)}
.ico-moneda{border:2px solid var(--verde);border-radius:50%}
.ico-moneda::before{content:"";position:absolute;inset:7px;border:2px solid var(--verde);border-radius:50%}
.ico-reloj{border:3px solid var(--tinta);border-radius:50%}
.ico-reloj::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:11px;
  background:var(--tinta);transform-origin:bottom;transform:translate(-50%,-100%)}
.ico-reloj::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;
  background:var(--verde);transform-origin:left;transform:translate(0,-50%)}
.ico-etiqueta{border:2px solid var(--kraft2);border-radius:2px;background:var(--papel)}
.ico-etiqueta::before{content:"";position:absolute;left:5px;top:8px;right:5px;height:2px;
  background:var(--tinta);box-shadow:0 6px 0 var(--tinta),0 12px 0 var(--tinta)}
.ico-sello{border:2px dashed var(--verde);border-radius:50%}
.ico-sello::before{content:"";position:absolute;inset:7px;border:2px solid var(--verde);border-radius:50%}
.ico-flecha::before{content:"";position:absolute;left:2px;top:15px;width:24px;height:3px;background:var(--tinta)}
.ico-flecha::after{content:"";position:absolute;right:2px;top:9px;
  border:8px solid transparent;border-left:12px solid var(--tinta)}
.ico-check::before{content:"";position:absolute;left:8px;top:5px;width:14px;height:22px;
  border:3px solid var(--verde);border-left:0;border-top:0;transform:rotate(45deg)}
.ico-mano{border:2px solid var(--kraft2);border-radius:3px 3px 10px 10px}
.ico-mano::before{content:"";position:absolute;left:6px;top:-9px;width:4px;height:12px;
  background:var(--kraft2);border-radius:2px;box-shadow:7px 2px 0 var(--kraft2),14px 4px 0 var(--kraft2)}
.fila-ico{display:flex;align-items:flex-start;gap:0;margin-bottom:14px}
.fila-ico .txt{flex:1}
.fila-ico h3{margin:0 0 .2em}

/* Precios / cifras */
.cifra{font-family:"Courier New",monospace;font-size:1.9rem;font-weight:700;color:var(--verde)}
.cifra small{font-size:.62rem;color:#5d564e;display:block;letter-spacing:.1em}

/* Tablas */
.tabla{width:100%;border-collapse:collapse;margin:20px 0;font-size:.94rem;background:var(--papel)}
.tabla th,.tabla td{border:1px solid var(--linea);padding:10px 12px;text-align:left;vertical-align:top}
.tabla th{background:var(--kraft);color:#241f19;font-family:"Courier New",monospace;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.tabla tr:nth-child(even) td{background:#f2eadc}

/* Imágenes */
figure{margin:22px 0}
figure img{width:100%;height:auto;display:block;border:3px solid var(--papel);
  outline:1px solid var(--linea);border-radius:3px}
figcaption{font-family:"Courier New",monospace;font-size:.7rem;color:#5d564e;
  letter-spacing:.05em;margin-top:7px}
.fig-doble{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

/* Aviso / nota legal */
.nota{background:#eee4d2;border-left:6px solid var(--amarillo);padding:14px 16px;
  border-radius:0 3px 3px 0;margin:20px 0;font-size:.95rem}
.nota.verde{border-left-color:var(--verde);background:#e9efe7}

/* ---------- Formularios ---------- */
.form-caja{border:2px dashed var(--kraft2);background:var(--papel);border-radius:4px;
  padding:20px;margin:22px 0;box-shadow:5px 5px 0 rgba(185,139,94,.25)}
.campo{margin-bottom:15px}
.campo label{display:block;font-family:"Courier New",monospace;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--kraft2);margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;padding:11px 12px;font-size:1rem;
  border:2px solid var(--linea);border-radius:3px;background:#fffdf8;color:var(--tinta);
  font-family:inherit}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--kraft2)}
.campo.fila2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check input{width:auto;margin-top:5px}

/* ---------- Footer ---------- */
footer{background:#2b2724;color:#e8ded0;margin-top:40px;border-top:8px solid var(--amarillo)}
.foot-grid{max-width:1080px;margin:0 auto;padding:30px 18px;display:grid;
  grid-template-columns:1.3fr 1fr 1fr;gap:26px}
.foot-grid h4{font-family:"Courier New",monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amarillo);margin:0 0 .8em}
.foot-grid a{color:#e8ded0;text-decoration:none;display:block;margin:.3em 0;font-size:.9rem}
.foot-grid a:hover{color:var(--amarillo)}
.foot-grid p{font-size:.88rem;color:#c7bcae}
.foot-barra{background:#211e1b;color:#a89d8f;font-family:"Courier New",monospace;
  font-size:.7rem;text-align:center;padding:12px 18px;letter-spacing:.05em}

/* ---------- Cookie banner ---------- */
#cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:#2b2724;color:#efe6d7;border-top:6px solid var(--amarillo);
  padding:16px 18px;box-shadow:0 -4px 14px rgba(0,0,0,.3)}
#cookie-banner.visible{display:block}
#cookie-banner .cb-wrap{max-width:1080px;margin:0 auto;display:flex;gap:16px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
#cookie-banner p{margin:0;font-size:.88rem;max-width:640px}
#cookie-banner a{color:var(--amarillo)}
#cookie-banner button{background:var(--verde);color:#fff;border:2px solid #35503a;
  font-family:"Courier New",monospace;font-weight:700;text-transform:uppercase;
  font-size:.76rem;letter-spacing:.06em;padding:10px 18px;border-radius:3px;cursor:pointer}
#cookie-banner button.sec{background:transparent;border-color:#6d6357;color:#e8ded0}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .remito-caja{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .campo.fila2{grid-template-columns:1fr}
  .fig-doble{grid-template-columns:1fr}
  h1{font-size:1.55rem}
}
@media (max-width:640px){
  .nav-etiquetas{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  .marca{grid-column:1 / -1;margin:0 0 4px;text-align:center}
  .etq{font-size:.68rem;padding:8px 6px 6px;text-align:center}
  .etq.activa{transform:none;border-bottom:6px solid var(--amarillo)}
  body{font-size:16px}
}

/* ---------- Enlace de salto (accesibilidad) ---------- */
.salto{position:absolute;left:-9999px;top:0;background:var(--amarillo);color:var(--tinta);
  font-weight:700;padding:10px 16px;z-index:200;border:2px solid var(--tinta);border-radius:0 0 3px 0}
.salto:focus{left:0}
.crumb{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#6b625a;margin:0 0 14px}
.crumb a{color:var(--kraft2);text-decoration:none;border-bottom:1px dotted var(--kraft2)}