/* Resmas PRO - hoja de estilos. Marca heredada de P3HUB: azul marino + naranjo, Inter. */
:root{
  --navy-dark:#1A2535; --navy:#243347; --navy-mid:#2E4160;
  --orange:#F97316; --orange-dark:#EA6C0A; --orange-soft:#FFF1E6;
  /* naranjo para TEXTO sobre fondo claro: el #F97316 no alcanza contraste */
  --orange-deep:#C2410C;
  --papel:#F7F5F0; --papel-alto:#FDFCFA;
  --ink:#111827; --gray:#5B6472; --gray-light:#8A93A1;
  --line:#E3E8EF; --paper:#FAFAF8; --white:#FFFFFF;
  --green:#0F7B4F; --green-soft:#E7F5EE;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(17,24,39,.06),0 8px 24px rgba(17,24,39,.06);
  --shadow-lg:0 2px 4px rgba(17,24,39,.05),0 18px 48px rgba(17,24,39,.12);
  --max:1140px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.18;margin:0;letter-spacing:-.02em;font-weight:800}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;font-weight:700}
.skip:focus{left:0}

.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:20px;height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;
  font-size:1.16rem;letter-spacing:-.03em;color:var(--navy-dark)}
.logo-mark{width:32px;height:32px;flex:0 0 32px}
.logo b{color:var(--orange)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;color:var(--gray);font-weight:600;font-size:.92rem;
  padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover,.nav a:focus-visible{color:var(--navy);border-bottom-color:var(--orange)}
.hdr .btn{margin-left:18px}
@media(max-width:880px){.nav{display:none}.hdr .btn{margin-left:auto}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 24px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  font-family:var(--font);font-size:.95rem;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--orange);color:#fff;box-shadow:0 4px 14px rgba(249,115,22,.3)}
.btn-pri:hover{background:var(--orange-dark);box-shadow:0 6px 20px rgba(249,115,22,.4)}
.btn-sec{background:var(--white);color:var(--navy);border-color:var(--line)}
.btn-sec:hover{border-color:var(--navy-mid);background:var(--paper)}
.btn-ghost{background:transparent;color:var(--navy);border-color:transparent;padding:10px 14px;min-height:40px}
.btn-ghost:hover{background:var(--paper)}
.btn-lg{min-height:56px;padding:16px 32px;font-size:1.02rem}
.btn-sm{min-height:44px;padding:11px 18px;font-size:.86rem}
/* En celular todo lo que se toca sube a 48px: el dedo no tiene punteria de mouse. */
@media(max-width:880px){.btn-sm{min-height:48px;padding:13px 20px}}
:where(a,button,input,select,summary):focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}

/* La portada es de papel, no un degradado oscuro con retícula.
   Vendemos resmas: el fondo lo dice. La franja de abajo son líneas finas muy
   juntas, que es como se ve el canto de una torre de resmas apilada. */
.hero{background:linear-gradient(180deg,var(--papel-alto) 0%,var(--papel) 100%);
  color:var(--ink);padding:76px 0 96px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 62% at 14% -8%,rgba(249,115,22,.09),transparent 62%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:190px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(26,37,53,.07) 0 1px,transparent 1px 5px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 88%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 88%)}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 430px;gap:56px;align-items:start}
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--orange-soft);
  border:1px solid #FFD3AF;color:var(--orange-deep);font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:22px}
.hero h1{font-size:clamp(2.05rem,4.6vw,3.35rem);color:var(--navy-dark);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--orange-deep)}
.hero-sub{font-size:1.12rem;color:var(--gray);max-width:33em;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-pts{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:.9rem;color:var(--gray);font-weight:600}
.hero-pts span{display:flex;align-items:center;gap:8px}
.hero-pts svg{flex:0 0 17px;color:var(--green)}
@media(max-width:980px){.hero{padding:52px 0 64px}.hero-in{grid-template-columns:1fr;gap:38px}}

.calc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 4px 10px rgba(17,24,39,.05),0 24px 60px rgba(17,24,39,.14);
  color:var(--ink);overflow:hidden;position:sticky;top:86px}
@media(max-width:980px){.calc{position:static}}
.calc-hd{background:var(--paper);border-bottom:1px solid var(--line);padding:18px 22px}
.calc-hd h2{font-size:1.06rem;margin-bottom:3px}
.calc-hd p{font-size:.83rem;color:var(--gray)}
.calc-bd{padding:22px}
.fld{margin-bottom:17px}
.fld label{display:block;font-size:.79rem;font-weight:700;color:var(--gray);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.fld select,.fld input[type=number],.fld input[type=text]{width:100%;min-height:48px;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);font-family:var(--font);
  font-size:1rem;color:var(--ink);background:var(--white);transition:border-color .15s}
.fld select:hover,.fld input:hover{border-color:var(--gray-light)}
.fld select:focus,.fld input:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.qty-row{display:flex;gap:9px;align-items:stretch}
.qty-row input{flex:1;text-align:center;font-weight:700;font-size:1.1rem}
.step{width:48px;flex:0 0 48px;border:1.5px solid var(--line);background:var(--paper);
  border-radius:var(--radius-sm);font-size:1.35rem;font-weight:700;color:var(--navy);cursor:pointer;
  line-height:1;transition:background .15s,border-color .15s}
.step:hover{background:var(--white);border-color:var(--navy-mid)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.chip{padding:7px 13px;border:1.5px solid var(--line);background:var(--white);border-radius:999px;
  font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--gray);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.chip[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#fff}

.result{background:var(--navy-dark);color:#fff;border-radius:var(--radius-sm);padding:19px;margin-top:4px}
/* El precio nunca se parte en dos lineas: si no cabe con la insignia al lado,
   la insignia baja sola. Un precio cortado a la mitad se lee como error. */
.result-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px 12px;margin-bottom:4px;flex-wrap:wrap}
.result-unit{font-size:2.15rem;font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.result-unit small{font-size:.9rem;font-weight:600;color:#9AA6B7;letter-spacing:0;white-space:nowrap}
.badge-save{background:var(--green);color:#fff;font-size:.76rem;font-weight:700;
  padding:5px 11px;border-radius:999px;white-space:nowrap}
.result-tier{font-size:.83rem;color:#9AA6B7;margin-bottom:15px}
.result-lines{border-top:1px solid rgba(255,255,255,.13);padding-top:13px;font-size:.9rem}
.rline{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:#C3CCDA}
.rline b{color:#fff;font-weight:600}
.rline.total{border-top:1px solid rgba(255,255,255,.13);margin-top:9px;padding-top:12px;font-size:1.06rem}
.rline.total b{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.rline.total span{align-self:center}
.iva{font-size:.76rem;color:#8792A5;text-align:right;margin-top:5px}

.nudge{display:flex;gap:10px;align-items:flex-start;background:var(--orange-soft);
  border:1px solid #FFD3AF;border-radius:var(--radius-sm);padding:12px 14px;margin-top:14px;
  font-size:.87rem;color:#8A4200;line-height:1.45}
.nudge svg{flex:0 0 17px;margin-top:2px;color:var(--orange-dark)}
.nudge button{background:none;border:none;padding:0;font:inherit;font-weight:700;
  color:var(--orange-dark);text-decoration:underline;cursor:pointer}
.ok-free{display:flex;gap:10px;align-items:center;background:var(--green-soft);
  border:1px solid #B7E0CB;border-radius:var(--radius-sm);padding:12px 14px;margin-top:14px;
  font-size:.87rem;color:#0B5537;font-weight:600}
.ok-free svg{flex:0 0 17px;color:var(--green)}
.calc-actions{display:grid;gap:9px;margin-top:16px}

section{padding:78px 0}
section.tight{padding:56px 0}
.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{max-width:44rem;margin-bottom:42px}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:block;font-size:.79rem;font-weight:700;color:var(--orange);
  text-transform:uppercase;letter-spacing:.11em;margin-bottom:12px}
.shead h2{font-size:clamp(1.62rem,3.2vw,2.3rem);margin-bottom:14px;color:var(--navy-dark)}
.shead p{color:var(--gray);font-size:1.05rem}

.tabla-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{padding:14px 18px;text-align:right;border-bottom:1px solid var(--line);font-size:.94rem}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--navy-dark);color:#fff;font-weight:700;font-size:.83rem;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:none;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--paper)}
tbody tr.destacado{background:var(--orange-soft)}
tbody tr.destacado:hover{background:#FFE8D5}
td b{font-weight:700;color:var(--navy-dark)}
.cotizar-cell{color:var(--orange-dark);font-weight:700}
.tabla-nota{font-size:.85rem;color:var(--gray);margin-top:14px}

.grid{display:grid;gap:22px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:640px){.g4,.g2{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:var(--navy-mid);box-shadow:var(--shadow);transform:translateY(-2px)}
.card-tag{display:inline-block;align-self:flex-start;background:var(--orange-soft);color:var(--orange-dark);
  font-size:.71rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;margin-bottom:13px}
.card-tag.eco{background:var(--green-soft);color:var(--green)}
.card h3{font-size:1.09rem;margin-bottom:6px;color:var(--navy-dark)}
.card .fmt{font-size:.81rem;color:var(--gray-light);font-weight:600;margin-bottom:11px}
.card p{font-size:.9rem;color:var(--gray);margin-bottom:18px;flex:1}
.card-price{border-top:1px solid var(--line);padding-top:15px;margin-bottom:15px}
.card-price .from{font-size:.76rem;color:var(--gray-light);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;display:block;margin-bottom:2px}
.card-price .val{font-size:1.62rem;font-weight:800;color:var(--navy-dark);letter-spacing:-.02em}
.card-price .val small{font-size:.82rem;font-weight:600;color:var(--gray);letter-spacing:0}

.razon{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.razon-ico{width:44px;height:44px;border-radius:11px;background:var(--orange-soft);color:var(--orange-dark);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.razon h3{font-size:1.04rem;margin-bottom:8px;color:var(--navy-dark)}
.razon p{font-size:.92rem;color:var(--gray)}

.zonas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.zonas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.zonas{grid-template-columns:1fr}}
.zona{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:19px}
.zona h4{font-size:.98rem;margin-bottom:5px;color:var(--navy-dark)}
.zona .dias{font-size:.85rem;color:var(--gray);margin-bottom:9px}
.zona .flete{font-size:.85rem;font-weight:700;color:var(--green)}
.zona .flete.pago{color:var(--gray)}

.faq{max-width:48rem;margin:0 auto}
details{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:11px;background:var(--white)}
details[open]{border-color:var(--navy-mid)}
summary{padding:17px 21px;cursor:pointer;font-weight:700;font-size:1rem;color:var(--navy-dark);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:52px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--orange);
  flex:0 0 auto;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details .ans{padding:0 21px 19px;color:var(--gray);font-size:.95rem}
details .ans p+p{margin-top:11px}

.cierre{background:linear-gradient(160deg,var(--navy-dark),var(--navy-mid));color:#fff;text-align:center}
.cierre h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:#fff;margin-bottom:16px}
.cierre p{color:#C3CCDA;font-size:1.08rem;max-width:34em;margin:0 auto 30px}
.cierre-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cierre .btn-sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.cierre .btn-sec:hover{background:rgba(255,255,255,.09);border-color:#fff}

.ftr{background:var(--navy-dark);color:#8792A5;padding:52px 0 28px;font-size:.9rem}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px}
@media(max-width:780px){.ftr-top{grid-template-columns:1fr;gap:26px}}
.ftr h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.ftr a{color:#8792A5;text-decoration:none;transition:color .15s}
.ftr a:hover{color:var(--orange)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:9px}
.ftr-marca{color:#C3CCDA;max-width:26em}
.ftr-marca strong{color:#fff;display:block;font-size:1.05rem;margin-bottom:8px;letter-spacing:-.02em}
.ftr-bot{border-top:1px solid rgba(255,255,255,.11);padding-top:22px;text-align:center;font-size:.85rem}
.ftr-bot .credito{margin-top:9px}
.ftr-bot .credito a{color:var(--orange);font-weight:600}

.fab{position:fixed;bottom:22px;z-index:80;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(17,24,39,.26);
  transition:transform .16s}
.fab:hover{transform:scale(1.06)}
.fab-wa{right:22px;width:60px;height:60px;background:#25D366}
.fab-chat{left:22px;width:60px;height:60px;background:var(--navy-dark);color:#fff}
.fab-chat::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--orange);opacity:.55;animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{transform:scale(.86);opacity:.6}70%{transform:scale(1.16);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.fab-chat::before{animation:none;opacity:0}
  html{scroll-behavior:auto}*{transition:none!important}}
.teaser{position:fixed;left:92px;bottom:34px;z-index:79;background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:14px 14px 14px 3px;box-shadow:var(--shadow-lg);
  padding:12px 38px 12px 15px;font-size:.87rem;font-weight:600;max-width:230px;cursor:pointer;
  animation:aparece .35s ease-out}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.teaser .cerrar{position:absolute;top:5px;right:7px;background:none;border:none;font-size:1.15rem;
  line-height:1;color:var(--gray-light);cursor:pointer;padding:3px 6px}
@media(max-width:520px){.teaser{left:14px;bottom:96px;max-width:210px}}

.panel{position:fixed;left:22px;bottom:94px;z-index:81;width:min(360px,calc(100vw - 44px));
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  overflow:hidden;display:flex;flex-direction:column;max-height:min(540px,calc(100vh - 130px))}
.panel[hidden]{display:none}
.panel-hd{background:var(--navy-dark);color:#fff;padding:15px 17px;display:flex;align-items:center;gap:11px}
.panel-hd .av{width:38px;height:38px;border-radius:50%;background:var(--orange);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 38px}
.panel-hd strong{display:block;font-size:.96rem}
.panel-hd span{font-size:.78rem;color:#9AA6B7}
.panel-hd .cerrar{margin-left:auto;background:none;border:none;color:#9AA6B7;
  font-size:1.4rem;line-height:1;cursor:pointer;padding:4px 8px}
.panel-bd{padding:16px;overflow-y:auto;flex:1;background:var(--paper)}
.msg{margin-bottom:12px;font-size:.9rem;line-height:1.5}
.msg .burbuja{display:inline-block;padding:10px 14px;border-radius:14px;max-width:88%}
.msg.bot .burbuja{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.yo{text-align:right}
.msg.yo .burbuja{background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.panel-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--paper)}
.panel-chips .chip:disabled{opacity:.5;cursor:default}
.panel-ft{border-top:1px solid var(--line);padding:11px 13px;background:var(--white)}
.panel-entrada{display:flex;gap:8px;align-items:stretch}
.panel-entrada input{flex:1;min-width:0;min-height:44px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:999px;font-family:var(--font);
  font-size:.93rem;color:var(--ink);background:var(--white);transition:border-color .15s}
.panel-entrada input:focus{border-color:var(--orange);outline:none;
  box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.panel-entrada input:disabled{background:var(--paper);color:var(--gray-light)}
.panel-enviar{flex:0 0 44px;width:44px;height:44px;border:none;border-radius:50%;
  background:var(--orange);color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .15s,transform .12s}
.panel-enviar:hover:not(:disabled){background:var(--orange-dark)}
.panel-enviar:active:not(:disabled){transform:scale(.94)}
.panel-enviar:disabled{background:var(--gray-light);cursor:default}
.panel-wa{display:block;width:100%;margin-top:9px;background:none;border:none;
  font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--gray);
  cursor:pointer;padding:6px;text-decoration:underline;text-underline-offset:3px}
.panel-wa:hover{color:var(--orange-dark)}

/* Tres puntos mientras el asistente piensa. */
.msg.escribiendo .burbuja{display:inline-flex;gap:4px;align-items:center;padding:13px 15px}
.msg.escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--gray-light);
  animation:latir 1.3s ease-in-out infinite}
.msg.escribiendo i:nth-child(2){animation-delay:.18s}
.msg.escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes latir{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.msg.escribiendo i{animation:none;opacity:.6}}
@media(max-width:520px){.panel{left:14px;bottom:92px}}

@media print{
  .hdr,.fab,.teaser,.panel,.hero-cta,.calc-actions,.cierre,.skip{display:none!important}
  body{font-size:12pt}
  .hero{background:none;padding:20px 0}
  .hero::before,.hero::after{display:none}
  section{padding:18px 0;break-inside:avoid}
}