:root{
  --marino:#2d2e81;
  --accion:#2d2e81;
  --titulo:#2d2e81;
  --azul:#36a7df;
  --cyan:#25c4de;
  --teal:#28a1b7;
  --tinta:#3b4459;
  --tinta-suave:#646e83;
  --papel:#ffffff;
  --papel-t:rgba(255,255,255,.74);
  --papel-2:#f2f5fa;
  --linea:#dde4ef;
  --sombra:0 1px 2px rgba(45,46,129,.06), 0 8px 24px -12px rgba(45,46,129,.18);
  --amb:#b45309;
  --amb-bg:#fdf6e9;
  --ok:#0f766e;
  --ok-bg:#eaf6f4;
  --max:1180px;
  --font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --marino:#0e1030;
    --accion:#5a60e8;
  --titulo:#eaeefb;
    --titulo:#eaeefb;
    --azul:#4fb6e8;
    --cyan:#3fd2e8;
    --teal:#45b8cc;
    --tinta:#d6dcea;
    --tinta-suave:#9aa4bb;
    --papel:#14162f;
  --papel-t:rgba(20,22,47,.74);
    --papel-t:rgba(20,22,47,.74);
    --papel-2:#1b1e3d;
    --linea:#2b2f57;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --amb:#f0b45e;
    --amb-bg:#2e2412;
    --ok:#5fd0c0;
    --ok-bg:#102b2a;
  }
}
:root[data-theme="dark"]{
  --marino:#0e1030;
  --accion:#5a60e8;
  --azul:#4fb6e8;
  --cyan:#3fd2e8;
  --teal:#45b8cc;
  --tinta:#d6dcea;
  --tinta-suave:#9aa4bb;
  --papel:#14162f;
  --papel-2:#1b1e3d;
  --linea:#2b2f57;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --amb:#f0b45e;
  --amb-bg:#2e2412;
  --ok:#5fd0c0;
  --ok-bg:#102b2a;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:20px}
h1,h2,h3,h4{font-weight:900; color:var(--titulo); line-height:1.14; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}

/* ---------- aviso de maqueta ---------- */
.aviso{
  background:var(--amb-bg); color:var(--amb);
  border-bottom:1px solid color-mix(in srgb, var(--amb) 28%, transparent);
  font-size:13.5px; font-weight:700;
}
.aviso .wrap{padding-block:9px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.aviso span{font-weight:400; color:color-mix(in srgb, var(--amb) 82%, var(--tinta))}

/* ---------- encabezado ---------- */
header.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linea);
}
header.top .wrap{display:flex; align-items:center; gap:24px; padding-block:14px}
.marca{display:flex; align-items:center; gap:13px; text-decoration:none; flex:0 0 auto}
.marca svg{width:38px; height:auto; display:block; flex:0 0 auto}
.marca .txt{display:flex; flex-direction:column; gap:2px}
.marca b{font-weight:900; font-size:17.5px; letter-spacing:-.02em; color:var(--titulo); line-height:1}
.marca small{
  font-size:8.5px; font-weight:900; letter-spacing:.24em; color:var(--azul);
  border-top:2px solid var(--cyan); padding-top:3px; line-height:1;
}
nav.menu{margin-left:auto; display:flex; gap:20px; align-items:center; font-size:14px; font-weight:700; min-width:0}
nav.menu a{text-decoration:none; color:var(--tinta); white-space:nowrap}
nav.menu a:hover{color:var(--azul)}
@media (max-width:1220px){ nav.menu{gap:17px; font-size:13.5px} header.top .wrap{gap:16px} }
@media (max-width:1060px){ nav.menu{gap:13px; font-size:12.8px} }
@media (max-width:980px){ nav.menu{display:none} }

.wa{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accion); color:#fff; text-decoration:none;
  font-weight:900; font-size:14.5px; padding:10px 18px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.wa:hover{background:var(--azul)}
.wa.ghost{background:transparent; color:var(--titulo); border-color:var(--linea)}
.wa.ghost:hover{border-color:var(--azul); color:var(--azul); background:transparent}
.wa.claro{background:#fff; color:var(--accion)}
.wa.claro:hover{background:var(--cyan); color:#fff}
header .wa{margin-left:0}
.wa.entrar{background:transparent; color:var(--titulo); border-color:var(--linea); display:inline-flex; align-items:center; gap:7px; padding:9px 15px; font-size:14px}
.wa.entrar:hover{border-color:var(--azul); color:var(--azul); background:transparent}
nav.menu a.solo-movil{display:none}
@media (max-width:980px){
  header .wa.entrar{margin-left:auto}
  nav.menu a.solo-movil{display:block}
}
@media (max-width:620px){ .wa.entrar{padding:9px 13px; font-size:13.5px} }
@media (max-width:460px){ .marca .txt small{display:none} header .txt-largo{display:none} .wa.entrar{padding:8px 13px; font-size:13px; gap:6px} }

/* ---------- ola ---------- */
.ola{display:block; width:100%; height:auto; margin:0}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(120% 140% at 88% 8%, color-mix(in srgb, var(--cyan) 22%, transparent) 0%, transparent 56%),
    linear-gradient(152deg, var(--marino) 0%, color-mix(in srgb, var(--marino) 72%, var(--azul)) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.hero .cruces{position:absolute; inset:0; width:100%; height:100%; opacity:.06; z-index:0; pointer-events:none}
.hero .wrap{position:relative; padding-block:clamp(48px,7vw,84px) clamp(40px,5vw,64px)}
.hero h1{color:#fff; font-size:clamp(31px,4.6vw,54px); letter-spacing:-.025em; max-width:15ch}
.eyebrow{
  display:inline-block; font-size:11px; font-weight:900; letter-spacing:.2em;
  background:var(--azul); color:#0e1030; padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.hero .bajada{margin-top:20px; max-width:56ch; font-size:clamp(16.5px,1.7vw,19px); color:rgba(255,255,255,.9)}
.hero .acciones{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

.barra{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; overflow:hidden; margin-top:38px;
}
.barra div{background:color-mix(in srgb, var(--marino) 82%, #000); padding:16px 18px}
.barra dt{font-size:10.5px; font-weight:900; letter-spacing:.14em; color:var(--cyan); margin:0 0 5px}
.barra dd{margin:0; font-size:14.5px; font-weight:700; color:#fff; line-height:1.35}
@media (max-width:760px){ .barra{grid-template-columns:1fr 1fr} }

/* ---------- secciones ---------- */
section{padding-block:clamp(52px,6vw,84px)}
section.gris{background:var(--papel-2)}
.titulo{max-width:62ch}
.titulo .kicker{
  font-size:11px; font-weight:900; letter-spacing:.2em; color:var(--azul);
  display:block; margin-bottom:12px;
}
.titulo h2{font-size:clamp(25px,3.1vw,36px); letter-spacing:-.02em}
.titulo p{margin-top:14px; color:var(--tinta-suave); font-size:17px}

/* rutas por público */
.rutas{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
@media (max-width:900px){ .rutas{grid-template-columns:1fr} }
.ruta{
  background:var(--papel); border:1px solid var(--linea); border-radius:16px;
  padding:26px 24px 24px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--sombra);
}
.ruta .num{
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--azul);
  letter-spacing:.08em;
}
.ruta h3{font-size:20px}
.ruta p{color:var(--tinta-suave); font-size:15.5px; flex:1}
.ruta a{
  font-weight:900; font-size:14.5px; color:var(--titulo); text-decoration:none;
  border-bottom:2px solid var(--cyan); align-self:flex-start; padding-bottom:2px;
}
.ruta a:hover{color:var(--azul); border-color:var(--azul)}

/* ---------- tabla técnica ---------- */
.tablabox{margin-top:32px; border:1px solid var(--linea); border-radius:16px; background:var(--papel); overflow:hidden}
.tablacab{
  padding:18px 22px; border-bottom:1px solid var(--linea);
  display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
}
.tablacab h3{font-size:18px}
.tablacab span{font-size:13px; color:var(--tinta-suave)}
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:660px; font-size:14.5px}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--linea); vertical-align:top}
thead th{
  font-size:10.5px; font-weight:900; letter-spacing:.12em; color:var(--tinta-suave);
  background:var(--papel-2); white-space:nowrap;
}
tbody th{font-weight:900; color:var(--titulo); white-space:nowrap}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13.5px}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:0}
.pie-tabla{padding:14px 22px; background:var(--papel-2); font-size:12.5px; color:var(--tinta-suave); border-top:1px solid var(--linea)}

.chip{
  display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:.08em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.chip.iso{background:var(--ok-bg); color:var(--ok)}
.chip.baja{background:color-mix(in srgb, var(--azul) 13%, transparent); color:var(--azul)}
.chip.macro{background:var(--ok-bg); color:var(--ok)}
.chip.lineal{background:var(--amb-bg); color:var(--amb)}

/* ---------- dos columnas ---------- */
.dos{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start}
@media (max-width:900px){ .dos{grid-template-columns:1fr; gap:30px} }
.lista{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.lista li{display:flex; gap:12px; font-size:15.5px}
.lista svg{flex:0 0 auto; margin-top:3px}
.nota{
  background:var(--amb-bg); border-left:3px solid var(--amb); border-radius:0 12px 12px 0;
  padding:18px 20px; font-size:14.5px;
}
.nota > b:first-child{color:var(--amb); display:block; margin-bottom:6px; font-size:11px; letter-spacing:.14em}
.nota b{color:var(--titulo)}

/* ---------- catálogo de consumibles ---------- */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px}
@media (max-width:980px){ .grid4{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .grid4{grid-template-columns:1fr} }
.item{
  border:1px solid var(--linea); border-radius:14px; padding:20px; background:var(--papel);
  display:flex; flex-direction:column; gap:7px;
}
.item h4{font-size:16px}
.item p{font-size:14px; color:var(--tinta-suave)}
.item .marcas{font-family:var(--mono); font-size:12px; color:var(--azul); margin-top:auto; padding-top:8px}

/* ---------- equipo mayor ---------- */
.equipos{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:34px}
@media (max-width:820px){ .equipos{grid-template-columns:1fr} }
.equipo{
  border:1px solid var(--linea); border-radius:16px; background:var(--papel);
  overflow:hidden; display:flex; flex-direction:column;
}
.equipo .cab{
  padding:20px 22px 18px; border-bottom:1px solid var(--linea);
  background:linear-gradient(150deg, color-mix(in srgb,var(--marino) 5%, transparent), transparent);
}
.equipo .cab h3{font-size:19px}
.equipo .cab .rango{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--azul);
  margin-top:7px; display:block;
}
.equipo .cuerpo{padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px; flex:1}
.equipo .cuerpo > p{font-size:15px; color:var(--tinta-suave)}
.specs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px}
.specs li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline}
.specs b{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  color:var(--tinta-suave); white-space:nowrap; min-width:74px;
}
.equipo .pie{
  margin-top:auto; padding-top:16px; border-top:1px dashed var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.equipo .pie a{
  font-weight:900; font-size:14px; color:var(--titulo); text-decoration:none;
  border-bottom:2px solid var(--cyan); padding-bottom:2px;
}
.equipo .pie a:hover{color:var(--azul); border-color:var(--azul)}
.sello{
  display:inline-block; font-size:10px; font-weight:900; letter-spacing:.1em;
  padding:4px 10px; border-radius:999px; background:color-mix(in srgb,var(--teal) 14%, transparent); color:var(--teal);
}

/* ---------- cero helio ---------- */
.helio{
  background:
    radial-gradient(100% 120% at 85% 0%, color-mix(in srgb, var(--teal) 30%, transparent) 0%, transparent 58%),
    linear-gradient(160deg, var(--marino), color-mix(in srgb,var(--marino) 76%, #000));
  color:#fff;
}
.helio .titulo h2{color:#fff}
.helio .titulo p{color:rgba(255,255,255,.82)}
.helio .titulo .kicker{color:var(--cyan)}
.helio .dos{margin-top:36px}
.sincosa{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.sincosa li{
  display:grid; grid-template-columns:78px 1fr; gap:18px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.sincosa li:last-child{border-bottom:0}
.sincosa .no{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  color:var(--cyan); text-transform:uppercase;
}
.sincosa b{display:block; color:#fff; font-size:15.5px}
.sincosa span{font-size:14.5px; color:rgba(255,255,255,.78)}
.aclara{
  border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:22px;
  background:rgba(255,255,255,.05);
}
.aclara h4{color:var(--cyan); font-size:11px; letter-spacing:.14em; margin-bottom:10px}
.aclara p{font-size:14.5px; color:rgba(255,255,255,.86)}
.aclara p + p{margin-top:12px}

.galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
@media (max-width:900px){ .galeria{grid-template-columns:1fr 1fr} }
.galeria figure{margin:0; background:#05060f; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.14)}
.galeria img{display:block; width:100%; height:210px; object-fit:contain; background:#05060f}
.galeria figcaption{padding:11px 13px 13px; border-top:1px solid rgba(255,255,255,.12)}
.galeria figcaption b{display:block; font-size:13.5px; color:#fff}
.galeria figcaption span{
  display:block; font-family:var(--mono); font-size:11px; color:var(--cyan); margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.tecno{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px}
@media (max-width:900px){ .tecno{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .tecno{grid-template-columns:1fr} }
.tecno div{border-top:2px solid var(--cyan); padding-top:13px}
.tecno b{display:block; font-size:14.5px; color:#fff; margin-bottom:5px}
.tecno span{font-size:13.5px; color:rgba(255,255,255,.76)}

/* ---------- portal ---------- */
.portal{
  background:linear-gradient(140deg, var(--marino), color-mix(in srgb,var(--marino) 70%, var(--teal)));
  color:#fff; border-radius:20px; padding:clamp(28px,4vw,44px); position:relative; overflow:hidden;
}
.portal h2{color:#fff; font-size:clamp(23px,2.8vw,31px); max-width:20ch}
.portal p{color:rgba(255,255,255,.86); max-width:54ch; margin-top:14px}
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px}
@media (max-width:800px){ .pasos{grid-template-columns:1fr} }
.paso{border-top:2px solid var(--cyan); padding-top:14px}
.paso b{display:block; font-family:var(--mono); font-size:12px; color:var(--cyan); margin-bottom:6px}
.paso span{font-size:14.5px; color:rgba(255,255,255,.9)}
/* ---------- vista previa del portal de clientes ---------- */
.previo{margin-top:38px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 26px 60px rgba(4,10,40,.34); color:var(--tinta)}
:root[data-theme="dark"] .previo{background:var(--papel); border:1px solid var(--linea)}
.previo .cromo{display:flex; align-items:center; gap:10px; padding:11px 16px; background:#eef2f8; border-bottom:1px solid var(--linea)}
:root[data-theme="dark"] .previo .cromo{background:var(--papel-2)}
.previo .puntos{display:flex; gap:6px}
.previo .puntos i{width:10px; height:10px; border-radius:50%; background:#cdd6e4; display:block}
.previo .url{flex:1; text-align:center; font-family:var(--mono); font-size:11.5px; color:var(--tinta-suave); background:#fff; border:1px solid var(--linea); border-radius:999px; padding:5px 12px; max-width:330px; margin:0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
:root[data-theme="dark"] .previo .url{background:var(--papel)}
.previo .marca-previo{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; font-weight:700; color:#fff; background:var(--azul); border-radius:999px; padding:4px 10px; white-space:nowrap}

.pestanas{display:flex; gap:0; border-bottom:1px solid var(--linea); overflow-x:auto; -webkit-overflow-scrolling:touch}
.pestanas button{flex:0 0 auto; appearance:none; background:none; border:0; border-bottom:2px solid transparent; padding:14px 18px; font:inherit; font-size:13.5px; font-weight:700; color:var(--tinta-suave); cursor:pointer; white-space:nowrap}
.pestanas button[aria-selected="true"]{color:var(--titulo); border-bottom-color:var(--azul)}
.pestanas button:focus-visible{outline:2px solid var(--azul); outline-offset:-2px}
.lamina{padding:30px; display:none}
.lamina[data-activa]{display:block}
@media (max-width:620px){ .lamina{padding:20px 16px} }

.acceso{max-width:360px; margin:14px auto 26px; text-align:center}
.acceso .sello-p{width:54px; height:54px; border-radius:16px; background:linear-gradient(150deg,var(--marino),var(--azul)); display:grid; place-items:center; margin:0 auto 16px}
.acceso h4{font-size:20px; color:var(--titulo)}
.acceso p{font-size:14px; color:var(--tinta-suave); margin-top:7px}
.campo{text-align:left; margin-top:15px}
.campo label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--tinta-suave); font-weight:700; margin-bottom:6px}
.campo .caja{border:1px solid var(--linea); border-radius:10px; padding:11px 13px; font-size:14.5px; color:var(--tinta-suave); background:var(--papel-2)}
.boton-p{display:block; width:100%; margin-top:20px; background:var(--marino); color:#fff; border:0; border-radius:10px; padding:13px; font:inherit; font-size:15px; font-weight:700; cursor:default}
.acceso .pie-p{font-size:12.5px; color:var(--tinta-suave); margin-top:16px}

.pedido{display:grid; grid-template-columns:1.35fr .65fr; gap:26px}
@media (max-width:820px){ .pedido{grid-template-columns:1fr} }
.pedido h4{font-size:17px; color:var(--titulo); margin-bottom:4px}
.pedido .sub-p{font-size:13px; color:var(--tinta-suave); margin-bottom:16px}
.renglon{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid var(--linea)}
.renglon b{font-size:14.5px; color:var(--titulo); display:block}
.renglon span{font-family:var(--mono); font-size:11.5px; color:var(--tinta-suave)}
.contador{display:flex; justify-self:end; width:max-content; align-items:center; gap:0; border:1px solid var(--linea); border-radius:9px; overflow:hidden}
.contador i{width:30px; height:32px; display:grid; place-items:center; font-style:normal; font-weight:900; color:var(--azul); background:var(--papel-2); font-size:15px}
.contador em{width:40px; text-align:center; font-style:normal; font-family:var(--mono); font-size:14px; font-weight:700; color:var(--titulo)}
.resumen{background:var(--papel-2); border:1px solid var(--linea); border-radius:14px; padding:20px; align-self:start}
.resumen h5{font-size:13px; color:var(--titulo); margin-bottom:12px}
.resumen ul{list-style:none; font-size:13.5px}
.resumen li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--linea); color:var(--tinta-suave)}
.resumen li b{color:var(--titulo); font-family:var(--mono); font-size:13px}
.aviso-p{margin-top:14px; font-size:12.5px; color:var(--tinta-suave); line-height:1.55; border-left:2px solid var(--azul); padding-left:11px}

.facturas{width:100%; border-collapse:collapse; font-size:14px; min-width:0}
.facturas th{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--tinta-suave); text-align:left; padding:0 12px 10px; font-weight:900; background:none; white-space:nowrap}
.facturas td{padding:13px 12px; border-top:1px solid var(--linea); vertical-align:middle}
.facturas td.n{font-family:var(--mono); font-size:12.5px; color:var(--tinta-suave); white-space:nowrap}
.facturas td b{color:var(--titulo); font-size:14px}
.chip-e{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; font-weight:700; border-radius:999px; padding:4px 9px; white-space:nowrap}
.chip-e.ok{background:color-mix(in srgb, var(--teal) 16%, transparent); color:#0d6b5c}
.chip-e.esp{background:color-mix(in srgb, #e8a33d 22%, transparent); color:#8a5a09}
.descarga{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--azul); border:1px solid color-mix(in srgb,var(--azul) 34%, transparent); border-radius:8px; padding:6px 11px; white-space:nowrap}
.sello-precio{display:inline-flex; align-items:center; gap:8px; margin-top:18px; border:1px solid color-mix(in srgb,var(--azul) 30%, transparent); background:color-mix(in srgb,var(--azul) 7%, transparent); border-radius:999px; padding:8px 15px; font-size:13.5px; color:var(--titulo); font-weight:600}
.sello-precio svg{flex:0 0 auto; color:var(--azul)}
.sello-precio a{color:var(--azul); font-weight:700}
.renglon{grid-template-columns:1fr auto auto}
/* ---------- navegación por páginas ---------- */
.pagina[hidden]{display:none !important}
header.top nav.menu a[aria-current="page"]{color:var(--titulo); font-weight:900}
@media (min-width:861px){
  header.top nav.menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--azul)}
}

.enlace-item{text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:border-color .16s ease, transform .16s ease}
.enlace-item:hover{border-color:var(--azul); transform:translateY(-2px)}
.enlace-item .ir{font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:700; color:var(--azul); display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:6px}
.enlace-item .ir::after{content:"\2192"; font-family:var(--font); font-size:15px}
.hay{display:inline-flex; align-items:center; gap:6px; font-family:var(--font); font-size:12.5px;
  font-weight:700; border-radius:999px; padding:3px 10px; margin-top:6px; width:max-content}
.hay::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.hay.ok{color:var(--ok); background:var(--ok-bg)}
.hay.poco{color:var(--amb); background:var(--amb-bg)}
.hay.sobre{color:var(--tinta-suave); background:var(--papel-2); border:1px solid var(--linea)}
.barra-exist{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; padding:16px 0 4px;
  font-size:13px; color:var(--tinta-suave); border-bottom:1px solid var(--linea)}
.barra-exist .pt{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:-8px}
.barra-exist .pt.ok{background:var(--ok)}
.barra-exist .pt.poco{background:var(--amb)}
.barra-exist .pt.sobre{background:var(--tinta-suave)}
.barra-exist em{font-style:normal; margin-left:auto; font-family:var(--mono); font-size:12px}
.barra-exist em b{color:var(--tinta)}
.catalogo-app .renglon > div:first-child{display:flex; flex-direction:column; gap:1px}
/* ================= PORTAL: pantalla de acceso ================= */
.acceso-pantalla{min-height:100vh; display:grid; place-items:center; align-content:center; gap:18px;
  padding:40px 20px; background:linear-gradient(160deg,#1b1d52 0%, var(--marino) 45%, #101233 100%)}
.acceso-caja{width:100%; max-width:460px; background:var(--papel); border-radius:20px; padding:38px 34px 32px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.55); position:relative}
.acceso-volver{position:absolute; top:-34px; left:2px; color:rgba(255,255,255,.82); font-size:14px; text-decoration:none}
.acceso-volver:hover{color:#fff}
.acceso-logo{width:52px; color:var(--azul)}
.acceso-logo svg{width:100%; height:auto; display:block}
.acceso-caja h1{font-size:27px; margin-top:16px}
.acceso-sub{font-size:15.5px; color:var(--tinta-suave); margin-top:8px}
.acceso-form{display:flex; flex-direction:column; gap:6px; margin-top:26px}
.acceso-form label{font-size:14.5px; font-weight:700; color:var(--titulo); margin-top:12px}
.acceso-form input{font:inherit; font-size:16.5px; padding:14px 15px; border:1.5px solid var(--linea);
  border-radius:11px; background:var(--papel-2); color:var(--tinta)}
.acceso-form input:focus{outline:none; border-color:var(--azul); background:var(--papel)}
.acceso-boton{margin-top:24px; font:inherit; font-size:17px; font-weight:900; cursor:pointer;
  background:var(--accion); color:#fff; border:0; border-radius:12px; padding:16px; min-height:54px}
.acceso-boton:hover{background:color-mix(in srgb, var(--accion) 85%, #000)}
.acceso-ayuda{display:flex; gap:10px; justify-content:center; margin-top:18px; font-size:14px; color:var(--tinta-suave)}
.acceso-ayuda a{color:var(--azul)}
.acceso-nota{margin-top:22px; padding-top:18px; border-top:1px solid var(--linea);
  font-size:13.5px; color:var(--tinta-suave); line-height:1.6}
.acceso-nota b{color:var(--tinta)}
.acceso-maqueta{color:rgba(255,255,255,.62); font-size:13px; text-align:center; max-width:460px}
.acceso-maqueta b{color:rgba(255,255,255,.9)}

/* ---------- moléculas flotando en los espacios vacíos ---------- */
#moleculas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
main#paginas, header.top, footer, .aviso{position:relative; z-index:1}
/* capa para las secciones que sí pintan fondo, para que no tapen las moléculas */
.capa-mol{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
section.gris, section.tira-cta, footer{position:relative}
section.gris > .wrap, section.tira-cta > .wrap, footer > .wrap{position:relative; z-index:1}
.hero > .wrap{position:relative; z-index:1}
body.en-portal #moleculas{display:none}
@media print{ #moleculas, .capa-mol{display:none} }
/* cajas de contenido translucidas: dejan ver las moleculas por detras */
.especial, .frasco, .tablabox{background:var(--papel-t)}

/* ================= PORTAL: solicitud de alta ================= */
.alta-pantalla{min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center;
  align-content:start; gap:16px;
  padding:56px 20px 48px; background:linear-gradient(160deg,#1b1d52 0%, var(--marino) 45%, #101233 100%)}
.alta-hoja{width:100%; max-width:960px; min-width:0; background:var(--papel); border-radius:20px; padding:40px clamp(20px,3.4vw,46px) 38px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.55); position:relative}
.alta-enc{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap}
.alta-enc .acceso-logo{flex:0 0 auto}
.alta-enc h1{font-size:clamp(24px,2.7vw,31px); line-height:1.2}
.alta-enc p{font-size:16px; color:var(--tinta-suave); margin-top:9px; max-width:62ch; line-height:1.6}
.alta-pasos{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; padding-bottom:26px; border-bottom:1px solid var(--linea)}
.alta-pasos span{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--tinta-suave);
  background:var(--papel-2); border:1px solid var(--linea); border-radius:999px; padding:9px 15px}
.alta-pasos span b{display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:var(--azul); color:#fff; font-size:12.5px}
section.alta-bloque{padding-block:0; margin-top:38px}
.alta-bloque{margin-top:38px}
.alta-bloque > h2{font-size:20px; display:flex; align-items:center; gap:11px; color:var(--titulo)}
.alta-n{display:grid; place-items:center; width:29px; height:29px; border-radius:9px; flex:0 0 auto;
  background:var(--accion); color:#fff; font-size:15px; font-weight:900}
.alta-bloque > p{font-size:15.5px; color:var(--tinta-suave); margin-top:10px; max-width:70ch; line-height:1.62}
.alta-bloque > p b{color:var(--tinta)}
.alta-campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:20px}
.alta-campos > label, .alta-campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.alta-campos .ancho{grid-column:1 / -1}
.alta-campos span, .alta-campo > span{font-size:14.5px; font-weight:700; color:var(--titulo)}
.alta-campos small{font-size:13px; color:var(--tinta-suave); font-weight:400}
.alta-campos input, .alta-campos select, .alta-campo input, .alta-campo select{font:inherit; font-size:16px; padding:13px 14px;
  border:1.5px solid var(--linea); border-radius:10px; background:var(--papel-2); color:var(--tinta); width:100%; min-width:0}
.alta-campos input:focus, .alta-campos select:focus, .alta-campo input:focus{outline:none; border-color:var(--azul); background:var(--papel)}
.alta-tipo{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.alta-tipo label{display:inline-flex; align-items:center; gap:10px; font-size:15.5px; font-weight:700; cursor:pointer;
  border:1.5px solid var(--linea); border-radius:11px; padding:13px 17px; background:var(--papel-2); color:var(--tinta)}
.alta-tipo label:has(input:checked){border-color:var(--azul); background:var(--papel); color:var(--titulo);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent)}
.alta-tipo input{width:19px; height:19px; accent-color:var(--azul)}
.alta-docs{list-style:none; margin-top:22px; border:1px solid var(--linea); border-radius:14px; overflow:hidden}
.alta-docs li{display:grid; grid-template-columns:1fr auto auto; gap:14px 18px; align-items:center;
  padding:17px 20px; border-bottom:1px solid var(--linea); background:var(--papel)}
.alta-docs li:last-child{border-bottom:0}
.alta-docs li.oculto{display:none}
.alta-doc-n{min-width:0}
.alta-doc-n b{display:block; font-size:16px; color:var(--titulo)}
.alta-doc-n span{display:block; font-size:13.5px; color:var(--tinta-suave); margin-top:3px; line-height:1.5}
.alta-doc-n em{display:block; font-style:normal; font-family:var(--mono); font-size:12.5px; color:var(--azul); margin-top:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.alta-vence{display:flex; flex-direction:column; gap:4px}
.alta-vence span{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-suave); font-weight:700}
.alta-vence input{font:inherit; font-size:14.5px; padding:9px 11px; border:1.5px solid var(--linea);
  border-radius:9px; background:var(--papel-2); color:var(--tinta)}
.alta-subir{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:15px; font-weight:900; cursor:pointer;
  background:var(--papel-2); color:var(--titulo); border:1.5px solid var(--linea); border-radius:10px;
  padding:12px 17px; min-height:46px; white-space:nowrap}
.alta-subir:hover{border-color:var(--azul); color:var(--azul)}
.alta-subir svg{width:16px; height:16px}
.alta-subir input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.oculto-vis{display:inline-block; width:1px; height:1px; overflow:hidden; white-space:nowrap; color:transparent}
.alta-quitar:disabled{opacity:.3; cursor:default}
.alta-quitar:disabled:hover{background:none; color:var(--tinta-suave)}
.alta-subir:focus-within{outline:2px solid var(--azul); outline-offset:2px}
.alta-docs li.listo .alta-subir{border-color:#1e8f6e; color:#1e8f6e}
.alta-avance{display:flex; align-items:center; gap:14px; margin-top:16px; font-size:14.5px; color:var(--tinta-suave); flex-wrap:wrap}
.alta-avance .riel{flex:1; min-width:150px; height:9px; border-radius:99px; background:var(--linea); overflow:hidden}
.alta-avance .riel i{display:block; height:100%; width:0; background:var(--azul); transition:width .25s ease}
.alta-avance b{color:var(--titulo)}
.alta-tabla{width:100%; border-collapse:collapse; margin-top:20px; font-size:15px}
.alta-tabla th{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-suave); text-align:left; padding:0 12px 11px; font-weight:900; white-space:nowrap}
.alta-tabla td{padding:9px 12px; border-top:1px solid var(--linea); vertical-align:middle}
.alta-tabla input, .alta-tabla select{font:inherit; font-size:15px; padding:11px 12px; border:1.5px solid var(--linea);
  border-radius:9px; background:var(--papel-2); color:var(--tinta); width:100%; min-width:0}
.alta-tabla input:focus, .alta-tabla select:focus{outline:none; border-color:var(--azul); background:var(--papel)}
.alta-quitar{appearance:none; background:none; border:0; cursor:pointer; color:var(--tinta-suave);
  font-size:21px; line-height:1; padding:6px 9px; border-radius:8px}
.alta-quitar:hover{background:var(--papel-2); color:#c0392b}
.alta-mas{margin-top:16px; font:inherit; font-size:15px; font-weight:900; cursor:pointer; background:var(--papel-2);
  color:var(--titulo); border:1.5px dashed var(--linea); border-radius:10px; padding:13px 18px; min-height:48px}
.alta-mas:hover{border-color:var(--azul); color:var(--azul)}
.alta-envoltura{display:block; overflow-x:auto; margin-top:4px; max-width:100%}
.alta-envoltura .alta-tabla{min-width:760px; table-layout:fixed}
.alta-tabla col.c-nom{width:22%}
.alta-tabla col.c-pue{width:16%}
.alta-tabla col.c-cor{width:22%}
.alta-tabla col.c-lim{width:15%}
.alta-tabla col.c-pap{width:20%}
.alta-tabla col.c-qui{width:5%}
.alta-tabla th{white-space:normal}
.alta-convenio{margin-top:20px; border:1px solid var(--linea); border-radius:14px; background:var(--papel-2);
  padding:22px 24px; max-height:270px; overflow-y:auto; font-size:14.5px; line-height:1.68; color:var(--tinta-suave)}
.alta-convenio h3{font-size:14px; color:var(--titulo); margin-bottom:10px}
.alta-convenio ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:11px}
.alta-convenio b{color:var(--tinta)}
.alta-acepto{display:flex; gap:14px; align-items:flex-start; margin-top:22px; padding:19px 21px;
  border:1.5px solid var(--linea); border-radius:13px; background:var(--papel); cursor:pointer}
.alta-acepto:has(input:checked){border-color:var(--azul); background:color-mix(in srgb, var(--azul) 7%, var(--papel))}
.alta-acepto input{width:23px; height:23px; flex:0 0 auto; margin-top:1px; accent-color:var(--azul); cursor:pointer}
.alta-acepto span{font-size:15.5px; line-height:1.6; color:var(--tinta)}
.alta-acepto b{color:var(--titulo)}
.alta-enviar{margin-top:22px; width:100%; font:inherit; font-size:17.5px; font-weight:900; cursor:pointer;
  background:var(--accion); color:#fff; border:0; border-radius:12px; padding:18px; min-height:60px}
.alta-enviar:hover:not(:disabled){background:color-mix(in srgb, var(--accion) 85%, #000)}
.alta-enviar:disabled{background:var(--linea); color:var(--tinta-suave); cursor:not-allowed}
.alta-pie{margin-top:16px; font-size:14px; color:var(--tinta-suave); line-height:1.62; text-align:center}
.alta-pie a{color:var(--azul)}
.alta-hecho{margin-top:26px; border:1.5px solid #1e8f6e; border-radius:16px; padding:26px 28px;
  background:color-mix(in srgb, #1e8f6e 8%, var(--papel))}
.alta-hecho h2{font-size:21px; color:#15795c}
.alta-hecho p{font-size:15.5px; color:var(--tinta-suave); margin-top:10px; line-height:1.62; max-width:64ch}
.alta-hecho .folio{display:inline-block; margin-top:16px; font-family:var(--mono); font-size:15px; font-weight:700;
  color:var(--titulo); background:var(--papel); border:1px solid var(--linea); border-radius:9px; padding:11px 17px}
@media (max-width:760px){
  .alta-pantalla{padding:40px 14px 36px}
  .alta-hoja{padding:30px 18px 28px; border-radius:16px}
  .alta-docs li{grid-template-columns:1fr; gap:12px}
  .alta-docs li .alta-subir{justify-content:center}
  .alta-vence{max-width:200px}
}

/* ================= PORTAL: la terminal ================= */
body.en-portal header.top, body.en-portal footer, body.en-portal #arriba,
body.en-portal #whats, body.en-portal .aviso{display:none !important}
.app{display:grid; grid-template-columns:262px 1fr; min-height:100vh; background:var(--papel-2)}
.app > *{min-width:0}
.app-lado{background:var(--marino); color:#fff; display:flex; flex-direction:column; padding:22px 16px;
  position:sticky; top:0; height:100vh}
.app-marca{display:flex; align-items:center; gap:11px; padding:0 8px 22px; border-bottom:1px solid rgba(255,255,255,.14)}
.app-marca svg{width:26px; height:auto; color:#fff; flex:0 0 auto}
.app-marca span{font-weight:900; font-size:15px; letter-spacing:-.01em; line-height:1.15}
.app-nav{display:flex; flex-direction:column; gap:4px; margin-top:18px; flex:1}
.app-nav button{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  font:inherit; font-size:16px; font-weight:700; color:rgba(255,255,255,.78);
  background:none; border:0; border-radius:11px; padding:0 14px; min-height:52px}
.app-nav button .ic{width:22px; height:22px; flex:0 0 22px; display:inline-flex; align-items:center; justify-content:center; opacity:.72}
.app-nav button .ic svg{width:21px; height:21px; display:block}
.app-nav button:hover{background:rgba(255,255,255,.09); color:#fff}
.app-nav button.activo{background:#fff; color:var(--marino)}
.app-nav button.activo .ic{opacity:1}
.app-nav button:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.app-salir{margin-top:14px; text-align:center; font-size:14.5px; font-weight:700; text-decoration:none;
  color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.28); border-radius:11px; padding:13px}
.app-salir:hover{color:#fff; border-color:rgba(255,255,255,.6)}

.app-cuerpo{display:flex; flex-direction:column; min-width:0}
.app-top{display:flex; align-items:center; gap:16px; background:var(--papel); border-bottom:1px solid var(--linea);
  padding:16px 30px; position:sticky; top:0; z-index:5}
.app-menu{display:none; font-size:22px; background:none; border:1px solid var(--linea); border-radius:10px;
  width:44px; height:44px; cursor:pointer; color:var(--titulo)}
.app-quien{flex:1; min-width:0}
.app-quien b{display:block; font-size:16px; color:var(--titulo); line-height:1.25}
.app-quien span{font-size:13px; color:var(--tinta-suave); font-family:var(--mono)}
.app-accion{flex:0 0 auto; text-decoration:none; font-weight:900; font-size:15px; background:var(--accion);
  color:#fff; border-radius:11px; padding:13px 20px; min-height:48px; display:inline-flex; align-items:center}
.app-accion:hover{background:color-mix(in srgb, var(--accion) 85%, #000)}

.app-main{padding:30px; max-width:1240px; width:100%}
.vista{display:none}
.vista.activa{display:block}
.vista h2{font-size:27px}
.vista-sub{font-size:16px; color:var(--tinta-suave); margin-top:8px; max-width:70ch; line-height:1.6}
.vista-sub b{color:var(--tinta)}

.fichas{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:24px}
.ficha{background:var(--papel); border:1px solid var(--linea); border-radius:14px; padding:18px 20px}
.ficha span{display:block; font-size:13.5px; color:var(--tinta-suave)}
.ficha b{display:block; font-size:30px; color:var(--titulo); line-height:1.15; margin-top:6px}

.bloque-app{background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:24px 26px; margin-top:20px}
.bloque-app h3{font-size:19px}
.linea-dato{font-family:var(--mono); font-size:13px; color:var(--tinta-suave); margin-top:6px}
.lista-simple{list-style:none; margin-top:16px}
.lista-simple li{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--linea); font-size:15.5px; color:var(--tinta-suave)}
.lista-simple li:last-child{border-bottom:0}
.lista-simple b{color:var(--titulo); font-family:var(--mono); font-size:15px; white-space:nowrap}
.acciones-app{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.boton-app{font:inherit; font-size:16px; font-weight:900; cursor:pointer; background:var(--accion); color:#fff;
  border:0; border-radius:11px; padding:14px 22px; min-height:50px}
.boton-app:hover{background:color-mix(in srgb, var(--accion) 85%, #000)}
.boton-app.claro{background:var(--papel-2); color:var(--titulo); border:1px solid var(--linea)}
.boton-app.claro:hover{background:var(--papel); border-color:var(--azul)}
.boton-app.grande{width:100%; margin-top:18px; font-size:17px; min-height:56px}
.aviso-app{background:var(--ok-bg); border-color:color-mix(in srgb, var(--ok) 30%, transparent)}
.aviso-app h3{color:var(--ok)}
.aviso-app p{font-size:15.5px; color:var(--tinta-suave); margin-top:8px; line-height:1.6}

.pasos{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.paso{display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; color:var(--tinta-suave);
  background:var(--papel); border:1px solid var(--linea); border-radius:999px; padding:9px 16px}
.paso b{display:grid; place-items:center; width:23px; height:23px; border-radius:50%;
  background:var(--linea); color:var(--tinta-suave); font-size:13px}
.paso.activo{color:var(--titulo); border-color:var(--azul)}
.paso.activo b{background:var(--azul); color:#fff}

.pedido-app{display:grid; grid-template-columns:1fr 330px; gap:22px; margin-top:24px; align-items:start}
.pedido-app > *{min-width:0}
.catalogo-app{background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:8px 24px 20px}
.resumen-app{background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:22px 22px 24px; position:sticky; top:96px}
.resumen-app h3{font-size:17px}
.resumen-app ul{list-style:none; margin-top:14px}
.resumen-app li{display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px dashed var(--linea); font-size:14.5px; color:var(--tinta-suave)}
.resumen-app li b{color:var(--titulo); font-family:var(--mono); font-size:14.5px}
.resumen-app li.vacio{color:var(--tinta-suave); border-bottom:0; font-style:italic}
.subtotal-app{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--linea)}
.subtotal-app span{font-family:var(--mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-suave); font-weight:700}
.subtotal-app b{font-family:var(--mono); font-size:19px; color:var(--titulo)}
.iva-app{font-size:12.5px; color:var(--tinta-suave); margin-top:5px; text-align:right}
.nota-app{font-size:13px; color:var(--tinta-suave); line-height:1.6; margin-top:14px}
.nota-app b{color:var(--tinta)}

/* catálogo dentro del portal: controles grandes */
.catalogo-app .renglon{grid-template-columns:1fr auto auto; gap:18px; padding:16px 0}
.catalogo-app .renglon b{font-size:16.5px}
.catalogo-app .renglon span{font-size:12.5px}
.catalogo-app .precio{font-size:14px; min-width:128px}
.catalogo-app .contador{border-radius:11px; border-width:1.5px}
.catalogo-app .contador i{width:44px; height:46px; font-size:21px; cursor:pointer; user-select:none}
.catalogo-app .contador i:hover{background:var(--linea)}
.catalogo-app .contador em{width:50px; font-size:16.5px}
.catalogo-app .grupo-p{margin-top:26px}
.catalogo-app .grupo-p b{font-size:13px}

.tabla-app{width:100%; border-collapse:collapse; margin-top:20px; background:var(--papel); font-size:15px}
.tabla-app th{text-align:left; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tinta-suave); padding:14px 16px; border-bottom:2px solid var(--linea); white-space:nowrap}
.tabla-app td{padding:16px; border-bottom:1px solid var(--linea); color:var(--tinta-suave); vertical-align:top}
.tabla-app td.n{font-family:var(--mono); font-size:13.5px; color:var(--titulo); white-space:nowrap}

.datos-app{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:16px}
.datos-app div{display:flex; flex-direction:column; gap:3px}
.datos-app dt{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); font-family:var(--mono)}
.datos-app dd{margin:0; font-size:16px; color:var(--titulo); font-weight:700}

.enviado-app{background:var(--ok-bg); border:1px solid color-mix(in srgb,var(--ok) 34%, transparent);
  border-radius:16px; padding:28px; margin-top:24px}
.enviado-app h3{color:var(--ok); font-size:21px}
.enviado-app p{font-size:15.5px; color:var(--tinta-suave); margin-top:10px; line-height:1.6; max-width:62ch}
.enviado-app .folio{font-family:var(--mono); font-size:15px; color:var(--titulo); font-weight:700;
  background:var(--papel); border:1px solid var(--linea); border-radius:9px; padding:8px 14px; display:inline-block; margin-top:14px}

.pie-app{margin-top:30px; font-size:13px; color:var(--tinta-suave); border-top:1px solid var(--linea); padding-top:16px}

@media (max-width:980px){
  .pedido-app{grid-template-columns:1fr}
  .resumen-app{position:static}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .app-lado{position:fixed; inset:0 auto 0 0; width:264px; transform:translateX(-100%);
    transition:transform .22s ease; z-index:60; height:100vh}
  .app-lado.abierto{transform:none; box-shadow:0 0 0 100vw rgba(4,8,30,.5)}
  .app-menu{display:grid; place-items:center}
  .app-top{padding:14px 18px}
  .app-main{padding:20px 18px}
  .app-accion{display:none}
  .catalogo-app .renglon{grid-template-columns:1fr auto; row-gap:12px}
  .catalogo-app .renglon > div:first-child{grid-column:1 / -1}
}
/* ---------- venta cruzada al pie de las páginas de contraste ---------- */
.cruce{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:52px; padding-top:34px; border-top:1px solid var(--linea)}
.cruce > *{min-width:0}
.sin-foto-aviso{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; margin-top:26px;
  background:var(--amb-bg); border:1px dashed color-mix(in srgb, var(--amb) 45%, transparent);
  border-radius:12px; padding:14px 18px}
.sin-foto-aviso b{color:var(--amb); font-size:14px}
.sin-foto-aviso span{color:color-mix(in srgb, var(--amb) 80%, var(--tinta)); font-size:13.5px; flex:1; min-width:240px}
@media (max-width:760px){ .cruce{grid-template-columns:1fr} }
/* ---------- banner de producto (páginas de contraste) ---------- */
.bp{display:grid; grid-template-columns:1.05fr .95fr; border-radius:20px; overflow:hidden;
  background:var(--marino); color:#fff; box-shadow:0 24px 60px -30px rgba(45,46,129,.55);
  min-height:420px; margin-top:30px}
.bp > *{min-width:0}
.bp-texto{align-self:center; padding:clamp(28px,3.4vw,50px)}
.bp-texto .kicker{color:var(--cyan)}
.bp-texto h2{color:#fff; font-size:clamp(23px,2.7vw,35px); margin-top:12px}
.bp-texto p{color:rgba(255,255,255,.82); font-size:clamp(14px,1.2vw,16px); margin-top:14px; max-width:46ch}
.bp-texto p b{color:#fff}
.bp-datos{list-style:none; display:flex; gap:26px; flex-wrap:wrap; margin-top:24px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.18)}
.bp-datos li{display:flex; flex-direction:column; gap:3px}
.bp-datos b{font-size:21px; font-weight:900; color:#fff; line-height:1}
.bp-datos span{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.62)}
.botones-bp{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.botones-bp .wa{background:#fff; color:var(--marino); border-color:#fff}
.botones-bp .wa.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.botones-bp .wa.ghost:hover{border-color:#fff}
.bp-arte{position:relative; overflow:hidden; min-height:420px;
  background:linear-gradient(155deg, #36a7df 0%, #2d2e81 58%, #1d1f5e 100%)}
.bp-arte .fondo{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.bp-arte .pote{position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%);
  height:78%; width:auto; max-width:70%; filter:drop-shadow(0 18px 32px rgba(0,0,0,.32))}
@media (max-width:820px){
  .bp{grid-template-columns:1fr; min-height:0}
  .bp-arte{order:-1; min-height:320px}
  .bp-arte .pote{height:82%}
}
/* ---------- banner grande del inicio ---------- */
.banner-inicio{padding-block:40px 8px}
.carrusel{position:relative; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px -28px rgba(45,46,129,.5)}
.pista{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.pista::-webkit-scrollbar{display:none}
.lamina-b{position:relative; flex:0 0 100%; scroll-snap-align:center; min-width:0;
  aspect-ratio:1400/620; display:grid; isolation:isolate}
.lamina-b .fondo-b{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.lamina-b .velo-b{position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(14,16,48,.93) 0%, rgba(14,16,48,.80) 38%, rgba(14,16,48,.30) 68%, rgba(14,16,48,.10) 100%)}
.texto-b{position:relative; z-index:2; align-self:center; padding:40px clamp(22px,4vw,54px); max-width:660px; color:#fff}
.texto-b .kicker{color:var(--cyan)}
.texto-b h2{color:#fff; font-size:clamp(24px,3.1vw,40px); margin-top:12px}
.texto-b p{color:rgba(255,255,255,.84); font-size:clamp(14px,1.25vw,16.5px); margin-top:14px; max-width:52ch}
.texto-b .falta-b{font-family:var(--mono); font-size:12px; color:var(--amb); background:rgba(0,0,0,.32);
  border:1px dashed color-mix(in srgb, var(--amb) 55%, transparent); border-radius:7px; padding:6px 10px; display:inline-block; margin-top:14px}
.botones-b{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.botones-b .wa{background:#fff; color:var(--marino); border-color:#fff}
.botones-b .wa.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.botones-b .wa.ghost:hover{border-color:#fff}
.nav-b{position:absolute; bottom:18px; z-index:3; appearance:none; cursor:pointer;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--marino);
  background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.6); backdrop-filter:blur(6px)}
.nav-b svg{width:20px; height:20px}
.nav-b:hover{background:#fff}
.nav-b:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.nav-b.ant{right:70px} .nav-b.sig{right:18px}
.puntos-b{position:absolute; z-index:3; left:clamp(22px,4vw,54px); bottom:32px; display:flex; gap:8px; align-items:center}
.puntos-b button{appearance:none; cursor:pointer; width:9px; height:9px; padding:0; border-radius:50%;
  border:0; background:rgba(255,255,255,.42); transition:width .2s ease, background .2s ease}
.puntos-b button[aria-selected="true"]{width:26px; border-radius:999px; background:#fff}
.puntos-b button:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:760px){
  .lamina-b{aspect-ratio:auto; min-height:480px}
  .texto-b{padding:30px 20px 88px; align-self:end}
  .lamina-b .velo-b{background:linear-gradient(180deg, rgba(14,16,48,.55) 0%, rgba(14,16,48,.72) 45%, rgba(14,16,48,.95) 100%)}
  .nav-b{width:38px; height:38px; bottom:14px} .nav-b.ant{right:58px} .nav-b.sig{right:12px}
  .puntos-b{left:20px; bottom:26px}
}
@media (prefers-reduced-motion: reduce){ .pista{scroll-behavior:auto} }
/* ---------- el banner manda arriba del inicio ---------- */
.banner-inicio.arriba{padding-block:0}
.banner-inicio.arriba > .wrap{max-width:none; padding-inline:0}
.banner-inicio.arriba .carrusel{border-radius:0; box-shadow:none}
.banner-inicio.arriba .lamina-b{aspect-ratio:auto; height:clamp(400px,43vw,600px)}
.banner-inicio.arriba .texto-b,
.banner-inicio.arriba .puntos-b{padding-inline:0; margin-inline:auto; width:100%; max-width:var(--max); box-sizing:border-box}
.banner-inicio.arriba .texto-b{padding:0 20px; max-width:calc(var(--max) - 0px)}
.banner-inicio.arriba .texto-b > *{max-width:640px}
.banner-inicio.arriba .puntos-b{left:0; right:0; padding:0 20px}
.banner-inicio.arriba .nav-b{bottom:26px}
@media (max-width:760px){
  .banner-inicio.arriba .lamina-b{height:auto; min-height:470px}
  .banner-inicio.arriba .texto-b{align-self:end; padding:0 20px 92px}
  .banner-inicio.arriba .nav-b{bottom:14px}
}
.hero > canvas.capa-mol{z-index:1}
.hero > .wrap{z-index:2}
.hero-tira-env{display:block; margin:clamp(22px,2.6vw,34px) 0 clamp(22px,2.6vw,32px)}
.hero-tira{display:block; width:100%; height:auto; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 22px 56px -28px rgba(0,0,0,.65);
  margin:0}
@media (max-width:760px){ .hero-tira{max-width:460px; margin-inline:auto} }
.hero.bajo h1{max-width:34ch}
.hero.bajo .bajada{max-width:78ch}
.hero.bajo .cruces{display:none}
.hero.bajo .barra{background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.22)}
.hero.bajo .barra div{background:rgba(14,16,48,.58); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hero.bajo .barra div{background:rgba(14,16,48,.82)}
}
.hero.bajo .wrap{padding-block:clamp(32px,4.2vw,54px) clamp(32px,4vw,52px)}
.hero.bajo h1{font-size:clamp(26px,3.3vw,40px); max-width:28ch}
.hero.bajo .bajada{font-size:clamp(15.5px,1.5vw,17.5px); max-width:62ch}
.hero.bajo .acciones{margin-top:26px}
.hero.bajo .barra{margin-top:30px}

/* ---------- mapa de tarjetas del inicio ---------- */
.mapa{display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:18px}
.mapa > *{min-width:0}
.tarj{display:flex; flex-direction:column; gap:10px; text-decoration:none;
  background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:24px 22px 20px;
  box-shadow:var(--sombra); transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease}
.tarj:hover{transform:translateY(-3px); border-color:var(--azul); box-shadow:0 14px 34px -16px rgba(45,46,129,.34)}
.tarj:focus-visible{outline:2px solid var(--azul); outline-offset:3px}
.tarj svg{width:30px; height:30px; color:var(--azul); flex:0 0 auto}
.tarj h3{font-size:18px; line-height:1.22}
.tarj p{font-size:14.5px; color:var(--tinta-suave); flex:1}
.tarj p b{color:var(--tinta)}
.tarj .ir{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:700; color:var(--azul); display:inline-flex; align-items:center; gap:7px; margin-top:2px}
.tarj .ir::after{content:"\2192"; font-family:var(--font); font-size:15px; transition:transform .16s ease}
.tarj:hover .ir::after{transform:translateX(4px)}
.tarj.destacar{border-color:color-mix(in srgb, var(--cyan) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--cyan) 7%, var(--papel)), var(--papel))}
.tarj.plana{box-shadow:none; background:var(--papel-2)}
.tarj.plana:hover{background:var(--papel)}
.mapa.tres{grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
#ademas-home{padding-block:62px}

/* ---------- tira de cierre del inicio ---------- */
.tira-cta{background:var(--marino); color:#fff; padding-block:52px}
.tira-cta .wrap{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.tira-cta h2{color:#fff; font-size:26px}
.tira-cta p{color:rgba(255,255,255,.78); font-size:15px; margin-top:8px; max-width:46ch}
.botones-cta{display:flex; gap:10px; flex-wrap:wrap}
.tira-cta .wa{background:#fff; color:var(--marino); border-color:#fff}
.tira-cta .wa.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.tira-cta .wa.ghost:hover{border-color:#fff}
@media (max-width:700px){ .tira-cta .wrap{flex-direction:column; align-items:flex-start} }
/* ---------- par de fotos de producto ---------- */
.par-fotos{margin-top:34px}
.par-fotos > div{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.par-fotos > div > *{min-width:0}
.par-fotos img{width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 14px 34px -18px rgba(45,46,129,.38)}
.par-fotos figcaption{margin-top:14px; font-size:14px; color:var(--tinta-suave); max-width:78ch}
.par-fotos figcaption b{color:var(--tinta)}
@media (max-width:620px){ .par-fotos > div{grid-template-columns:1fr; gap:12px} }
/* ---------- aviso de privacidad ---------- */
#privacidad{padding-block:64px 54px}
.legalito{max-width:74ch; font-size:14.5px; line-height:1.72; color:var(--tinta-suave)}
.legalito p{margin-bottom:14px}
.legalito b{color:var(--tinta)}
.legalito mark.pendiente{background:var(--amb-bg); color:var(--amb); font-weight:700; padding:1px 6px; border-radius:5px; border:1px dashed color-mix(in srgb, var(--amb) 45%, transparent)}
.legalito .fecha-av{margin-top:20px; padding-top:14px; border-top:1px solid var(--linea); font-family:var(--mono); font-size:12.5px}
.aviso-f a{color:var(--azul); text-decoration:underline; text-underline-offset:2px}
.prueba.invertida{margin-top:44px}
.prueba{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:center; margin:36px 0 10px}
.prueba > *{min-width:0}
.prueba img{width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 18px 44px -20px rgba(45,46,129,.42)}
.prueba figcaption > b:first-child{display:block; font-weight:900; font-size:20px; color:var(--titulo); line-height:1.2; margin-bottom:12px}
.prueba figcaption p{font-size:15.5px; color:var(--tinta-suave); margin-bottom:12px}
.prueba figcaption p b{color:var(--tinta)}
.prueba .pie-prueba{font-size:13.5px; color:var(--tinta-suave); border-left:3px solid var(--azul); padding-left:12px; margin-bottom:0}
@media (max-width:820px){ .prueba{grid-template-columns:1fr; gap:22px} }
.precio{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--titulo); background:var(--papel-2); border:1px solid var(--linea); border-radius:7px; padding:7px 12px; white-space:nowrap; min-width:118px; text-align:right; display:inline-flex; align-items:baseline; justify-content:flex-end; gap:6px}
.precio i{font-style:normal; font-weight:400; font-size:10.5px; letter-spacing:.04em; color:var(--tinta-suave)}
.precio.total{font-size:15px; min-width:0; border:0; background:none; padding:0}
.grupo-p{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:22px; padding-bottom:7px; border-bottom:2px solid var(--marino)}
.grupo-p:first-child{margin-top:14px}
.grupo-p b{font-size:12px; font-family:var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--titulo)}
.grupo-p span{font-size:12px; color:var(--tinta-suave)}
.precio-hueco{font-family:var(--mono); font-size:12.5px; color:var(--tinta-suave); background:var(--papel-2); border:1px dashed var(--linea); border-radius:7px; padding:7px 12px; white-space:nowrap; min-width:96px; text-align:right}
@media (max-width:620px){
  .renglon{grid-template-columns:1fr auto; row-gap:9px; align-items:center}
  .renglon > div:first-child{grid-column:1 / -1}
  .precio-hueco{justify-self:start; text-align:left; min-width:0}
  .precio{justify-self:start; text-align:left; min-width:0; justify-content:flex-start}
  .contador{justify-self:start; width:max-content}
}
/* ---------- portal: ventana de acceso ---------- */
.velo-portal{position:fixed; inset:0; z-index:200; background:rgba(4,8,30,.62); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px; overflow-y:auto}
.velo-portal[hidden]{display:none !important}
.velo-portal .previo{margin-top:0; width:100%; max-width:960px; animation:sube .22s ease}
@keyframes sube{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.cerrar-portal{appearance:none; background:none; border:0; color:var(--tinta-suave); font-size:22px; line-height:1;
  cursor:pointer; padding:2px 6px; border-radius:8px}
.cerrar-portal:hover{color:var(--titulo); background:var(--papel-2)}
.previo .cromo .salir{appearance:none; background:none; border:1px solid var(--linea); border-radius:999px;
  font:inherit; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  color:var(--tinta-suave); padding:5px 11px; cursor:pointer; white-space:nowrap}
.previo .cromo .salir:hover{border-color:var(--azul); color:var(--azul)}
.paso-portal[hidden]{display:none !important}
.boton-p{cursor:pointer}
.cta-portal{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
/* ---------- formulario con protección anti-spam ---------- */
.formulario{margin:34px auto 0; max-width:720px; text-align:left;
  background:linear-gradient(160deg, var(--marino), color-mix(in srgb, var(--marino) 72%, var(--azul)));
  border-radius:20px; padding:30px; color:#fff; box-shadow:0 22px 50px rgba(12,18,60,.26)}
@media (max-width:620px){ .formulario{padding:20px 16px} }
.rejilla-f{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:700px){ .rejilla-f{grid-template-columns:1fr} }
.campo-f{display:flex; flex-direction:column; gap:6px; min-width:0}
.campo-f.ancho{grid-column:1 / -1}
.campo-f label{font-family:var(--mono); font-size:10px; letter-spacing:.11em; font-weight:700; color:rgba(255,255,255,.74)}
.campo-f input, .campo-f textarea{
  font:inherit; font-size:15px; color:#fff; background:rgba(4,8,30,.42);
  border:1px solid rgba(255,255,255,.26); border-radius:10px; padding:11px 13px; width:100%;
}
.campo-f textarea{min-height:88px; resize:vertical}
.campo-f input::placeholder, .campo-f textarea::placeholder{color:rgba(255,255,255,.44)}
.campo-f input:focus, .campo-f textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(37,196,222,.24)}
.campo-f .pista{font-size:12px; color:rgba(255,255,255,.58)}
.trampa{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.humano{grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:rgba(4,8,30,.38); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:14px 16px}
.humano label{font-family:inherit; font-size:14.5px; letter-spacing:0; color:#fff; font-weight:600}
.humano input{width:92px; text-align:center; font-family:var(--mono); font-weight:700; font-size:15px; color:#fff;
  background:rgba(4,8,30,.5); border:1px solid rgba(255,255,255,.26); border-radius:9px; padding:9px 10px}
.humano input:focus{outline:none; border-color:var(--cyan)}
.humano .nota-h{font-size:12px; color:rgba(255,255,255,.58); flex:1 1 190px; min-width:0}
.envio-f{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px}
.envio-f button{font:inherit; font-weight:900; font-size:15px; cursor:pointer;
  background:#fff; color:var(--marino); border:0; border-radius:999px; padding:13px 26px; white-space:nowrap}
.envio-f button:hover{background:var(--cyan); color:#fff}
.envio-f .aviso-f{font-size:12.5px; color:rgba(255,255,255,.62); flex:1 1 240px; min-width:0; text-align:left}
.mensaje-f{margin-top:16px; border-radius:12px; padding:13px 16px; font-size:14px; display:none}
.mensaje-f[data-tipo="ok"]{display:block; background:rgba(37,196,222,.2); border:1px solid rgba(37,196,222,.55); color:#fff}
.mensaje-f[data-tipo="error"]{display:block; background:rgba(255,120,120,.18); border:1px solid rgba(255,120,120,.55); color:#fff}
.pie-previo{padding:16px 30px 22px; border-top:1px solid var(--linea); font-size:12.5px; color:var(--tinta-suave); background:var(--papel-2)}
@media (max-width:620px){ .pie-previo{padding:14px 16px 18px} }

/* ---------- cierre ---------- */
.cierre{text-align:center}
.cierre h2{font-size:clamp(25px,3.2vw,38px); max-width:18ch; margin-inline:auto}
.cierre p{color:var(--tinta-suave); max-width:50ch; margin:16px auto 0}
.cierre .acciones{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}

/* ---------- pie ---------- */
footer{background:var(--marino); color:rgba(255,255,255,.75); font-size:14px}
footer .wrap{padding-block:40px 32px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px}
@media (max-width:800px){ footer .wrap{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ footer .wrap{grid-template-columns:1fr} }
footer h5{font-size:10.5px; font-weight:900; letter-spacing:.16em; color:var(--cyan); margin:0 0 12px}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
footer a{color:rgba(255,255,255,.75); text-decoration:none}
footer a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.14)}
.legal .wrap{padding-block:18px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,.55)}
.legal b{color:rgba(255,255,255,.8); font-weight:900}

/* ---------- foto de producto ---------- */
.foto{
  background:linear-gradient(170deg, #f7f9fc, #e9eff7);
  border-bottom:1px solid var(--linea); display:block; width:100%;
  aspect-ratio:16/10; height:auto; object-fit:cover; object-position:center; padding:0;
}

:root[data-theme="dark"] .foto, :root:not([data-theme="light"]) .foto{background:linear-gradient(170deg,#1b1e3d,#0f1230)}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .foto{background:linear-gradient(170deg,#f7f9fc,#e9eff7)} }

/* tarjeta destacada de cero helio dentro del catálogo */
.destacada{
  grid-column:1/-1; border:2px solid var(--azul); border-radius:18px; overflow:hidden;
  background:var(--papel); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  box-shadow:var(--sombra);
}
@media (max-width:900px){ .destacada{grid-template-columns:1fr} }
.destacada .imagen{background:linear-gradient(150deg,#0a1030,#16265f); display:flex; align-items:stretch; padding:14px}
:root[data-theme="dark"] .destacada .imagen{background:linear-gradient(150deg,#181b38,#0e1130)}
.destacada .imagen img{width:100%; height:100%; min-height:280px; object-fit:cover; object-position:center; display:block; border-radius:12px}
.destacada .txt{padding:28px 30px; display:flex; flex-direction:column; gap:14px}
.destacada h3{font-size:23px}
.destacada .rango{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--azul)}
.destacada p{font-size:15.5px; color:var(--tinta-suave)}

/* ---------- frascos de contraste ---------- */
.frascos{display:grid; grid-template-columns:repeat(auto-fit,minmax(198px,1fr)); gap:14px; margin-top:32px}
.frasco{border:1px solid var(--linea); border-radius:14px; overflow:hidden; background:var(--papel); display:flex; flex-direction:column}
.frasco img{display:block; width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; object-position:center}
.frasco .cap{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px}
.frasco .sinfoto{
  aspect-ratio:4/5; display:grid; place-items:center; padding:16px 14px;
  background:linear-gradient(168deg, #05071f 0%, #0d1442 32%, #182a6e 66%, #23568f 100%);
  border-bottom:1px solid var(--linea); position:relative; overflow:hidden;
}
.frasco .sinfoto::after{
  content:""; position:absolute; inset:auto -30% -55% -30%; height:70%;
  background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.13), transparent 70%); pointer-events:none;
}
.frasco .sinfoto .fondo{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.frasco .sinfoto .pote{
  width:100%; height:100%; display:block; position:relative; z-index:1;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.34));
}
.frasco .sinfoto small{
  display:block; margin-top:12px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  color:var(--cyan); font-weight:600; position:relative; z-index:1; flex:0 0 auto;
}
.frasco .sinfoto .propia-tag{
  position:absolute; top:11px; left:11px; z-index:2; font-family:var(--mono); font-size:8.5px; letter-spacing:.12em;
  font-weight:700; color:var(--marino); background:var(--cyan); border-radius:999px; padding:4px 9px;
}
.frasco b{font-size:15.5px; color:var(--titulo)}
.frasco span{font-size:13px; color:var(--tinta-suave)}
.frasco .mol{font-family:var(--mono); font-size:11.5px; color:var(--azul); margin-top:2px}


/* ---------- apartados especiales de producto ---------- */
.especial{margin-top:56px; border-radius:20px; overflow:hidden; border:1px solid var(--linea); background:var(--papel)}
.especial > .cabezal{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
  padding:26px 30px; border-bottom:1px solid var(--linea);
}
@media (max-width:620px){ .especial > .cabezal{grid-template-columns:1fr} }
.especial .mini{width:128px; aspect-ratio:4/5; height:auto; object-fit:cover; object-position:center; border-radius:14px; display:block}
.especial h3{font-size:26px; margin-bottom:4px}
.especial .cabezal .sub{font-family:var(--mono); font-size:12.5px; color:var(--azul); font-weight:600}
.especial .cuerpo2{padding:28px 30px 30px; display:grid; grid-template-columns:1.1fr .9fr; gap:36px}
@media (max-width:860px){ .especial .cuerpo2{grid-template-columns:1fr; gap:26px} }
.especial p{font-size:15.5px}
.especial p + p{margin-top:13px}
.tabla-min{width:100%; border-collapse:collapse; font-size:14px; margin-top:16px}
.tabla-min th, .tabla-min td{padding:10px 12px; border-bottom:1px solid var(--linea); text-align:left}
.tabla-min thead th{font-size:10px; letter-spacing:.1em; color:var(--tinta-suave); font-weight:900}
.tabla-min td.n{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.tabla-min tr.destacar td, .tabla-min tr.destacar th{background:color-mix(in srgb,var(--azul) 9%, transparent); font-weight:900; color:var(--titulo)}
.cifra{border-left:3px solid var(--azul); padding:4px 0 4px 16px; margin-top:18px}
.cifra b{display:block; font-size:30px; color:var(--titulo); line-height:1.1; font-variant-numeric:tabular-nums}
.cifra span{font-size:13.5px; color:var(--tinta-suave)}
.fuentes{margin-top:20px; font-size:12px; color:var(--tinta-suave); line-height:1.55}
.fuentes b{color:var(--tinta); font-size:10px; letter-spacing:.1em; display:block; margin-bottom:5px}

html{scroll-padding-top:86px}
section[id], article[id]{scroll-margin-top:86px}
.especial .mini.ancha{width:212px; aspect-ratio:16/10; border-radius:12px}
@media (max-width:620px){ .especial .mini.ancha{width:100%} }
.limite{margin-top:18px; border:1px dashed var(--linea); border-radius:12px; padding:14px 16px; background:color-mix(in srgb,var(--azul) 5%, transparent)}
.limite > b{display:block; font-size:10px; letter-spacing:.12em; color:var(--tinta-suave); margin-bottom:6px}
.limite span{font-size:13.5px; color:var(--tinta-suave); line-height:1.6}
.envuelve{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
/* --- contención en móvil: ningún hijo de rejilla se estira con su contenido --- */
.especial .cuerpo2 > *, .dos > *, .propia > *, .destacada > *, .riesgo > *{min-width:0}
.tablabox{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabla-min{min-width:0}
@media (max-width:640px){
  table{min-width:520px}
  .especial h3{font-size:21px}
  .especial .cabezal .sub{font-size:11px}
}
.portada-helio{position:relative; margin:34px 0 4px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:#05071f}
.portada-helio img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center}
.portada-helio .velo{position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,8,30,.42) 0%, rgba(4,8,30,0) 34%, rgba(4,8,30,.10) 62%, rgba(4,8,30,.86) 100%); pointer-events:none}
.portada-helio .rotulo{position:absolute; left:0; right:0; bottom:0; padding:26px 30px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.portada-helio .rotulo .texto{max-width:640px}
.portada-helio .rotulo b{display:block; font-size:clamp(19px,2.4vw,27px); color:#fff; line-height:1.2; letter-spacing:-.015em; max-width:600px}
.portada-helio .rotulo span{display:block; margin-top:7px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--cyan); font-weight:600}
.portada-helio .marca{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 12px; white-space:nowrap}
@media (max-width:700px){
  .portada-helio .velo{background:linear-gradient(180deg, rgba(4,8,30,.30) 0%, rgba(4,8,30,0) 40%)}
  .portada-helio .rotulo{position:static; padding:18px; background:#070b26; border-top:1px solid rgba(255,255,255,.14); align-items:flex-start}
  .portada-helio .rotulo b{font-size:17px}
  .portada-helio .marca{align-self:flex-start}
}
.compara{width:100%; min-width:0; border-collapse:collapse; margin-top:30px; font-size:14.5px; color:#fff}
.compara th,.compara td{padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.16); text-align:left; vertical-align:top}
.compara thead th{font-size:10.5px; letter-spacing:.1em; color:rgba(255,255,255,.72); font-weight:900; background:rgba(255,255,255,.06); white-space:normal}
.compara thead th.sel{color:var(--cyan)}
.compara td.eti{color:rgba(255,255,255,.6); font-size:11px; letter-spacing:.08em; font-weight:800; white-space:nowrap}
.compara td.sel{background:rgba(54,167,223,.13); font-weight:700}
@media (max-width:700px){ .compara{font-size:12.5px; min-width:560px} .compara th,.compara td{padding:9px 10px} }
.riesgo{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px}
@media (max-width:880px){ .riesgo{grid-template-columns:1fr} }
.riesgo .r{border:1px solid var(--linea); border-radius:16px; padding:24px; background:var(--papel)}
.riesgo .r > b{display:block; font-size:17px; color:var(--titulo); margin-bottom:9px; line-height:1.3}
.riesgo .r > span{font-size:14.5px; color:var(--tinta-suave); line-height:1.62; display:block}
.franja{margin-top:30px; border-left:3px solid var(--azul); padding:14px 0 14px 18px}
.franja p{font-size:16px}


/* ---------- producto de línea propia ---------- */
.propia{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:0;
  border:1px solid var(--linea); border-radius:18px; overflow:hidden; margin-top:34px;
  background:var(--papel); box-shadow:var(--sombra);
}
@media (max-width:860px){ .propia{grid-template-columns:1fr} }
.propia .lado{background:linear-gradient(160deg,#f4f7fb,#e6edf6); display:flex; align-items:center; justify-content:center; padding:20px}
:root[data-theme="dark"] .propia .lado{background:linear-gradient(160deg,#181b38,#0e1130)}
.propia .lado img{width:100%; max-width:380px; height:auto; display:block; border-radius:10px}
.propia .info{padding:30px 32px; display:flex; flex-direction:column; gap:15px}
.propia h3{font-size:25px}
.registro{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  background:var(--ok-bg); color:var(--ok); border-radius:10px; padding:9px 14px;
  font-family:var(--mono); font-size:12.5px; font-weight:600;
}
.datos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 22px}
@media (max-width:560px){ .datos{grid-template-columns:1fr} }
.datos dt{font-size:10.5px; font-weight:900; letter-spacing:.12em; color:var(--tinta-suave); margin-bottom:3px}
.datos dd{margin:0; font-size:14.5px; color:var(--titulo); font-weight:700}

/* ---------- volver arriba y whatsapp ---------- */
#arriba{
  position:fixed; right:18px; bottom:80px; z-index:80;
  width:50px; height:50px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accion); color:#fff; box-shadow:0 6px 20px rgba(45,46,129,.34);
  display:grid; place-items:center; opacity:0; transform:translateY(14px); pointer-events:none;
}
#arriba.ver{opacity:1; transform:none; pointer-events:auto}
#arriba:hover{background:var(--azul)}
#arriba svg{width:20px; height:20px}
@media (prefers-reduced-motion:no-preference){ #arriba{transition:opacity .22s ease, transform .22s ease, background .18s ease} }

#whats{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:52px; height:52px; border-radius:50%; text-decoration:none;
  background:#25D366; color:#fff; box-shadow:0 6px 20px rgba(37,211,102,.42);
  display:grid; place-items:center;
}
#whats:hover{background:#1ebe5a}
#whats svg{width:27px; height:27px; display:block}
@media (prefers-reduced-motion:no-preference){ #whats{transition:background .18s ease, transform .18s ease} #whats:hover{transform:translateY(-2px)} }

/* ---------- menú en celular ---------- */
#abremenu{display:none; margin-left:auto; background:none; border:1px solid var(--linea); border-radius:10px; padding:8px 10px; cursor:pointer; color:var(--titulo)}
#abremenu svg{display:block; width:20px; height:20px}
@media (max-width:860px){
  #abremenu{display:block}
  nav.menu{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--papel); border-bottom:1px solid var(--linea);
    flex-direction:column; gap:0; padding:6px 20px 14px; align-items:stretch;
  }
  nav.menu.abierto{display:flex}
  nav.menu a{padding:12px 2px; border-bottom:1px solid var(--linea)}
  nav.menu a:last-child{border-bottom:0}
  header.top .wrap{position:relative; flex-wrap:wrap}
  header .wa{order:3; margin-left:0; flex:1 1 0; width:auto; min-width:0; justify-content:center; margin-top:6px}
  header .wa.entrar{flex:0 0 auto; padding-inline:18px}
  header.top .wrap{column-gap:10px}
}

:focus-visible{outline:3px solid var(--cyan); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:no-preference){
  .wa, nav.menu a, .ruta a{transition:background .18s ease, color .18s ease, border-color .18s ease}
}