/* ==========================================================================
   COMMARS · maqueta v5
   Paleta del logo: #005095 navy · #008ED2 azul · #71797C gris · #E6EBEF claro
   ========================================================================== */
:root{
  --navy:#005095;
  --ink:#002A50;
  --blue:#008ED2;
  --blue-d:#0079B4;
  --sky:#E6EBEF;
  --sky-2:#F5F8FA;
  --gray:#71797C;
  --gray-d:#4C5A66;
  --line:#DBE3E9;
  --line-2:#EDF1F4;
  --gold:#F0A22E;
  --gold-d:#B87610;
  --ok:#1E9E5A;

  --ui:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;

  --r:4px; --r-l:8px;
  --sh1:0 1px 2px rgba(0,42,80,.05);
  --sh2:0 2px 6px rgba(0,42,80,.06), 0 14px 30px -16px rgba(0,42,80,.24);
  --sh3:0 4px 12px rgba(0,42,80,.09), 0 30px 60px -22px rgba(0,42,80,.34);
  --nav:64px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; overflow-x:hidden}
body{margin:0; background:#fff; color:var(--ink); font-family:var(--ui); font-size:16px;
  font-weight:380; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------------- tipografía ---------------- */
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.026em; line-height:1.06}
h1{font-size:clamp(2.2rem,4.6vw,3.9rem); letter-spacing:-.032em; line-height:1.02}
h2{font-size:clamp(1.65rem,3vw,2.5rem)}
h3{font-size:1.16rem; letter-spacing:-.018em}
h4{font-size:1rem; font-weight:600; letter-spacing:-.012em}
p{margin:0}
.rot{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase}
.lead{font-size:clamp(1rem,1.2vw,1.13rem); color:var(--gray-d); max-width:58ch; font-weight:370}
.sm{font-size:.9rem; color:var(--gray)}
.xs{font-size:.8rem; color:var(--gray)}
.mono{font-family:var(--mono); font-size:.8rem}
.tab{font-variant-numeric:tabular-nums}

/* ---------------- estructura ---------------- */
.w{width:min(1160px,82vw); margin-inline:auto}
/* en móvil el aire lateral del escritorio desperdicia demasiado ancho */
@media (max-width:700px){.w{width:91vw}}
.sec{padding:clamp(50px,6vw,96px) 0}
.sec--sky{background:var(--sky-2)}
.sec--navy{background:var(--navy); color:#fff}
.cab{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; margin-bottom:clamp(26px,3.4vw,46px)}
.cab h2{margin-top:12px}
@media (max-width:800px){.cab{grid-template-columns:1fr}}

/* ---------------- botones ---------------- */
.bt{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px;
  border:1.5px solid transparent; border-radius:var(--r); font-size:.88rem; font-weight:600;
  letter-spacing:-.008em; white-space:nowrap; transition:.16s ease}
.bt:active{transform:translateY(1px)}
.bt--navy{background:var(--navy); color:#fff}
.bt--navy:hover{background:var(--ink)}
.bt--blue{background:var(--blue); color:#fff}
.bt--blue:hover{background:var(--blue-d)}
.bt--out{border-color:var(--line); background:#fff; color:var(--navy)}
.bt--out:hover{border-color:var(--navy)}
.bt--ghost{border-color:rgba(255,255,255,.45); color:#fff}
.bt--ghost:hover{background:#fff; color:var(--navy); border-color:#fff}
.bt--wa{background:var(--ok); color:#fff}
.bt--wa:hover{background:#17864C}
.bt--gold{background:var(--gold); color:#2A1B00}
.bt--gold:hover{background:#E09314}
.bt--sm{padding:9px 15px; font-size:.79rem}
.bt--w{width:100%}
.lk{display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:600; color:var(--blue);
  transition:gap .16s}
.lk:hover{gap:12px}

/* ---------------- nav ---------------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:70; background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line);
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease}
.nav .w{display:flex; align-items:center; gap:18px; min-height:var(--nav); position:relative}
.mk{display:flex; align-items:center; gap:10px; margin-right:auto}
.mk svg{width:34px; height:34px; flex:none}
.mk img{height:40px; width:auto; flex:none; transition:filter .3s ease}
.mk b{font-size:1.24rem; font-weight:800; letter-spacing:-.035em; color:var(--navy); line-height:1}
.mk b i{font-style:normal; color:var(--blue)}
.mk s{display:block; text-decoration:none; font-family:var(--mono); font-size:.5rem; letter-spacing:.2em;
  color:var(--gray); margin-top:3px}
.lks{display:flex; gap:2px}
.lks a{padding:9px 13px; border-radius:var(--r); font-size:.88rem; font-weight:500; color:var(--gray-d);
  transition:.15s}
.lks a:hover{background:var(--sky-2); color:var(--navy)}
.lks a.on{color:var(--navy); background:var(--sky)}
.nav-r{display:flex; align-items:center; gap:9px}
.cot{display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border:1.5px solid var(--line);
  border-radius:var(--r); font-size:.83rem; font-weight:600; transition:.16s}
.cot:hover{border-color:var(--navy)}
.cot.hay{border-color:var(--blue); background:#EAF6FD; color:var(--navy)}
.cot b{min-width:20px; height:20px; border-radius:10px; background:var(--blue); color:#fff; display:grid;
  place-items:center; font-size:.72rem; font-weight:700}
.brg{display:none; width:42px; height:42px; border:1.5px solid var(--line); border-radius:var(--r);
  align-items:center; justify-content:center}
.brg i,.brg i::before,.brg i::after{display:block; width:17px; height:1.6px; background:var(--ink)}
.brg i{position:relative}
.brg i::before,.brg i::after{content:""; position:absolute; left:0}
.brg i::before{top:-5.5px}.brg i::after{top:5.5px}

/* estado transparente: solo en Inicio, antes de hacer scroll */
.nav.transp{background:transparent; backdrop-filter:none; border-bottom-color:transparent}
.nav.transp .mk img{filter:brightness(0) invert(1)}
.nav.transp .lks a{color:rgba(255,255,255,.85)}
.nav.transp .lks a:hover{background:rgba(255,255,255,.14); color:#fff}
.nav.transp .lks a.on{background:rgba(255,255,255,.18); color:#fff}
.nav.transp .cot{border-color:rgba(255,255,255,.4); color:#fff}
.nav.transp .cot:hover{border-color:#fff}
.nav.transp .cot.hay{border-color:#7FD0F5; background:rgba(0,142,210,.22); color:#fff}
.nav.transp .brg{border-color:rgba(255,255,255,.4)}
.nav.transp .brg i,.nav.transp .brg i::before,.nav.transp .brg i::after{background:#fff}

@media (max-width:1100px){
  .lks{position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; padding:10px;
    border-bottom:1px solid var(--line); box-shadow:var(--sh2); display:none}
  .lks.on{display:flex}
  .lks a{padding:13px}
  .nav.transp .lks a{color:var(--gray-d)}
  .nav.transp .lks a:hover{background:var(--sky-2); color:var(--navy)}
  .nav.transp .lks a.on{background:var(--sky); color:var(--navy)}
  .brg{display:flex}
  .nav-r .bt--wa{display:none}
}

/* ---------------- HERO con fotografía ---------------- */
.hero{position:relative; overflow:hidden; background:var(--ink); color:#fff; isolation:isolate;
  display:grid; align-content:center; min-height:100vh; min-height:100svh}
.hero-foto{position:absolute; inset:0; z-index:0}
.hero-foto img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
.hero-scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(97deg, rgba(0,42,80,.97) 0%, rgba(0,42,80,.9) 34%,
    rgba(0,42,80,.62) 60%, rgba(0,42,80,.22) 88%, rgba(0,42,80,.1) 100%)}
.hero-scrim::after{content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,32,62,.6) 0%, transparent 42%)}
.hero-in{position:relative; z-index:2; padding:clamp(calc(var(--nav) + 14px),8.5vw,132px) 0 clamp(78px,9vw,146px)}
.hero-in .rot{color:#7FD0F5}
.hero h1{margin:18px 0 0; max-width:19ch}
.hero h1 em{font-style:normal; color:#4FC3F5}
.hero .lead{color:#CFE2EE; margin-top:22px; max-width:47ch}
.hero .bts{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}

/* ---------------- TARJETA DE PRODUCTO + PANEL HIJO ---------------- */
.grid-p{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(14px,1.6vw,22px)}
.pcard{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  display:flex; flex-direction:column; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease}
.pcard:hover{border-color:#C2D5E3; box-shadow:var(--sh2); transform:translateY(-3px); z-index:20}
.pcard .lienzo{position:relative; border-radius:var(--r-l) var(--r-l) 0 0; overflow:hidden; background:var(--sky-2)}
.pcard .lienzo img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .lienzo img{transform:scale(1.06)}
.pcard .cuerpo{padding:15px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.pcard .mrc{font-family:var(--mono); font-size:.63rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue)}
.pcard h3{font-size:1.04rem}
.pcard .pr{margin-top:auto; padding-top:10px}
.pcard .pr b{display:block; font-size:.95rem; font-weight:700; color:var(--navy)}
.pcard .pr span{font-size:.78rem; color:var(--gray)}
.pcard .acc{display:flex; gap:7px; padding:0 16px 16px}
.badge{position:absolute; top:10px; left:10px; z-index:2; padding:5px 9px; border-radius:3px;
  font-family:var(--mono); font-size:.58rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  background:var(--navy); color:#fff}
.badge--gold{background:var(--gold); color:#2A1B00}

/* panel hijo de especificaciones */
.pspec{position:absolute; top:-1px; left:calc(100% + 12px); width:290px; z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh3);
  padding:18px 19px 17px; opacity:0; visibility:hidden; transform:translateX(-8px) scale(.985);
  transform-origin:left center; pointer-events:none;
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.7,.3,1), visibility .16s;
  transition-delay:.12s}
.pspec::before{content:""; position:absolute; left:-6px; top:26px; width:10px; height:10px; background:#fff;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); z-index:1}
/* puente invisible sobre el hueco tarjeta↔panel: sin él, al mover el cursor
   hacia el panel se pasa por la tarjeta vecina y ésta roba el hover */
.pspec::after{content:""; position:absolute; top:-12px; bottom:-12px; left:-16px; width:16px}
.pcard[data-flip="1"] .pspec{left:auto; right:calc(100% + 12px); transform:translateX(8px) scale(.985);
  transform-origin:right center}
.pcard[data-flip="1"] .pspec::before{left:auto; right:-6px;
  border-left:0; border-bottom:0; border-right:1px solid var(--line); border-top:1px solid var(--line)}
.pcard[data-flip="1"] .pspec::after{left:auto; right:-16px}
.pspec h4{margin-bottom:3px}
.pspec .cat-tag{display:inline-block; margin:8px 0 12px; padding:3px 8px; border-radius:3px;
  background:var(--sky); font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy)}
.pspec dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0}
.pspec dt,.pspec dd{padding:6px 0; border-top:1px solid var(--line-2); margin:0; font-size:.79rem}
.pspec dt{color:var(--gray); padding-right:14px; white-space:nowrap}
.pspec dd{text-align:right; font-family:var(--mono); font-size:.74rem}
.pspec .desc{font-size:.83rem; color:var(--gray-d); line-height:1.5; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--line-2)}
.pspec .acc2{display:flex; gap:7px; margin-top:14px}
@media (hover:hover) and (min-width:1100px){
  .pcard:hover .pspec,.pcard:focus-within .pspec{opacity:1; visibility:visible;
    transform:none; pointer-events:auto; transition-delay:.09s}
}
/* en pantallas sin hover, las especificaciones se muestran dentro de la tarjeta */
.pcard .specs-in{display:none; border-top:1px solid var(--line-2); margin-top:10px; padding-top:10px}
.pcard .specs-in div{display:flex; justify-content:space-between; gap:12px; font-size:.78rem; padding:3px 0}
.pcard .specs-in span:first-child{color:var(--gray)}
.pcard .specs-in span:last-child{font-family:var(--mono); font-size:.73rem}
@media (max-width:1099px),(hover:none){
  .pcard .specs-in{display:block}
  .pspec{display:none}
}

/* ---------------- catálogo con rail de filtros ---------------- */
.miga{display:flex; gap:8px; flex-wrap:wrap; font-size:.82rem; color:var(--gray); margin-bottom:18px}
.miga a:hover{color:var(--blue)}
.cat-lay{display:grid; grid-template-columns:236px minmax(0,1fr); gap:clamp(20px,2.6vw,40px); align-items:start}
.rail{position:sticky; top:calc(var(--nav) + 16px)}
.rail-b{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:18px}
.rail-b + .rail-b{margin-top:12px}
.rail-b h4{font-size:.76rem; font-family:var(--mono); font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gray); margin-bottom:12px}
.chk{display:flex; align-items:center; gap:10px; padding:5px 0; cursor:pointer; font-size:.9rem}
.chk input{accent-color:var(--navy); width:16px; height:16px; flex:none}
.chk .n{margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--gray)}
.busca{position:relative}
.busca input{width:100%; padding:11px 12px 11px 36px; border:1.5px solid var(--line); border-radius:var(--r);
  font-size:.9rem; background:#fff}
.busca input:focus{border-color:var(--blue); outline:none}
.busca svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.45}
.cat-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:18px}
.cat-bar select{padding:10px 34px 10px 12px; border:1.5px solid var(--line); border-radius:var(--r);
  background-color:#fff; font-size:.86rem; color-scheme:light; background-position:right 12px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371797C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition:border-color .15s ease, box-shadow .15s ease}
.cat-bar select:hover{border-color:#C2D5E3}
.cat-bar select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,142,210,.13); outline:none}
.vacio{border:1.5px dashed var(--line); border-radius:var(--r-l); padding:52px 24px; text-align:center; background:#fff}
@media (max-width:1000px){
  .cat-lay{grid-template-columns:1fr}
  .rail{position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
  .rail-b + .rail-b{margin-top:0}
}

/* ---------------- FICHA estilo Mercado Libre ---------------- */
.ml{display:grid; grid-template-columns:minmax(0,1fr) 350px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); overflow:hidden}
.ml-main{padding:clamp(18px,2.4vw,32px); border-right:1px solid var(--line); min-width:0}
.ml-buy{padding:clamp(18px,2.2vw,26px)}
.gal-vis{position:relative; background:var(--sky-2); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; cursor:zoom-in}
.gal-vis img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.gal-vis:hover img{transform:scale(1.5)}
.gal-zoom{position:absolute; right:10px; bottom:10px; font-size:.72rem; color:var(--gray);
  background:rgba(255,255,255,.9); padding:4px 9px; border-radius:3px; border:1px solid var(--line)}
.carac{width:100%; border-collapse:collapse; border-radius:var(--r); overflow:hidden}
.carac tr:nth-child(odd){background:var(--sky-2)}
.carac th{width:38%; text-align:left; padding:11px 14px; font-size:.86rem; font-weight:500; color:var(--gray)}
.carac td{padding:11px 14px; font-size:.9rem}
.buy-mrc{font-size:.8rem; color:var(--gray)}
.buy-mrc a{color:var(--blue); font-weight:600}
.buy h1{font-size:clamp(1.4rem,2.2vw,1.85rem); margin:6px 0 12px; letter-spacing:-.028em}
.buy .precio{font-size:1.9rem; font-weight:300; letter-spacing:-.03em; line-height:1.1}
.buy .precio small{display:block; font-size:.82rem; font-weight:400; color:var(--gray); margin-top:6px;
  letter-spacing:0}
.buy .env{display:flex; gap:9px; align-items:flex-start; margin:16px 0; font-size:.86rem}
.buy .env b{color:var(--ok); font-weight:600}
.stp{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:#fff}
.stp button{width:38px; height:42px; color:var(--navy); font-size:1.05rem}
.stp button:hover{background:var(--sky-2)}
.stp span{width:46px; text-align:center; font-family:var(--mono); font-size:.86rem}
.vend{border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-top:18px; background:var(--sky-2)}
.vend .fila{display:flex; align-items:center; gap:10px}
.vend .fila svg{width:30px; height:30px; flex:none}
.vend .fila img{width:30px; height:30px; object-fit:contain; background:#fff; border-radius:50%; padding:3px; flex:none}
.entregas-mini{margin-top:16px; display:grid; gap:9px}
.entregas-mini div{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:.84rem; color:var(--gray-d)}
.entregas-mini b{font-family:var(--mono); font-size:.7rem; color:var(--navy)}
@media (max-width:1000px){
  .ml{grid-template-columns:1fr}
  .ml-main{border-right:0; border-bottom:1px solid var(--line)}
}

/* ---------------- OFERTAS ESPECIALES (vistoso) ---------------- */
.of-dest{position:relative; display:grid; grid-template-columns:300px minmax(0,1fr);
  border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh2); background:#fff; border:1px solid var(--line)}
.of-izq{position:relative; overflow:hidden; padding:30px 26px; color:#fff;
  background:linear-gradient(145deg, var(--blue) 0%, var(--navy) 62%, var(--ink) 100%)}
.of-izq::after{content:""; position:absolute; top:-40%; left:-60%; width:55%; height:190%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg)}
@media (prefers-reduced-motion:no-preference){
  .of-izq::after{animation:brillo 4.6s ease-in-out infinite}
}
@keyframes brillo{0%,62%{left:-60%} 100%{left:150%}}
.of-izq .flag{display:inline-block; background:var(--gold); color:#2A1B00; font-family:var(--mono);
  font-size:.58rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px;
  border-radius:3px; position:relative; z-index:1}
.of-num{position:relative; z-index:1; font-size:clamp(3.6rem,7vw,5.6rem); font-weight:800; line-height:.9;
  letter-spacing:-.05em; margin:20px 0 4px; display:flex; align-items:flex-start; gap:2px}
.of-num small{font-size:.4em; font-weight:700; margin-top:.24em}
.of-izq .qt{position:relative; z-index:1; font-size:.94rem; font-weight:600; color:#9FDCF7}
.of-izq .pz{position:absolute; right:-26px; bottom:-30px; width:150px; opacity:.16; z-index:0}
.of-der{padding:30px 32px 30px 36px; position:relative}
.of-der::before{content:""; position:absolute; left:0; top:16px; bottom:16px; border-left:2px dashed var(--line)}
.of-der h3{font-size:clamp(1.3rem,2.2vw,1.75rem); margin-bottom:8px}
.of-vig{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.06em; color:var(--gold-d); background:#FEF3E0; padding:5px 10px; border-radius:3px}
.of-der p{color:var(--gray-d); margin:14px 0 22px; max-width:56ch}
.notch{position:absolute; left:calc(300px - 11px); width:22px; height:22px; border-radius:50%;
  background:var(--sky-2); border:1px solid var(--line); z-index:3}
.notch--t{top:-12px} .notch--b{bottom:-12px}
@media (max-width:860px){
  .of-dest{grid-template-columns:1fr}
  .of-der::before{left:16px; right:16px; top:0; bottom:auto; border-left:0; border-top:2px dashed var(--line)}
  .of-der{padding:32px 24px 28px}
  .notch{display:none}
}
.of-min{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(14px,1.8vw,22px)}
.of-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:24px 24px 24px; overflow:hidden; transition:.2s ease}
.of-card:hover{box-shadow:var(--sh2); transform:translateY(-3px); border-color:#C2D5E3}
.of-card .cinta{position:absolute; top:14px; right:-38px; width:150px; text-align:center; transform:rotate(38deg);
  background:var(--gold); color:#2A1B00; font-family:var(--mono); font-size:.56rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 0}
.of-card .v{font-size:2.6rem; font-weight:800; letter-spacing:-.04em; line-height:.9; color:var(--navy)}
.of-card h4{margin:14px 0 6px; font-size:1.1rem}
.of-card p{font-size:.88rem; color:var(--gray-d); margin:10px 0 18px}
@media (max-width:700px){.of-min{grid-template-columns:1fr}}

/* ---------------- mapa ---------------- */
.mapa-b{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.mapa-hd{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 20px}
.mapa{display:block; width:100%; height:280px; border:0; border-top:1px solid var(--line)}

/* ---------------- categorías ---------------- */
.cats{display:grid}
.cat-n{display:flex; align-items:baseline; gap:7px; margin-top:14px}
.cat-n b{font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:#4FC3F5; line-height:1}
.cat-n span{font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:#9CBCD3}
.cat-feat{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:stretch;
  border-radius:var(--r-l); overflow:hidden; background:linear-gradient(150deg, var(--navy) 0%, var(--ink) 100%);
  box-shadow:var(--sh2); transition:.2s ease}
.cat-feat:hover{box-shadow:var(--sh3); transform:translateY(-3px)}
.cat-feat-img{height:210px; overflow:hidden; background:var(--sky-2)}
.cat-feat-img img{width:100%; height:100%; object-fit:cover}
.cat-feat-tx{padding:18px 22px; color:#fff; display:flex; flex-direction:column; justify-content:center}
.cat-feat-tx h3{font-size:clamp(1.2rem,1.8vw,1.5rem); color:#fff}
.cat-feat-tx p{font-size:.92rem; color:#CFE2EE; margin-top:7px}
.cat-min{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(14px,1.8vw,22px)}
.cat-card{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; transition:.2s ease}
.cat-card:hover{box-shadow:var(--sh2); transform:translateY(-3px); border-color:#C2D5E3}
.cat-card-img{height:210px; overflow:hidden; background:var(--sky-2)}
.cat-card-img img{width:100%; height:100%; object-fit:cover}
.cat-card-tx{padding:16px 18px 20px}
.cat-card-tx h4{font-size:1rem; color:var(--ink)}
.cat-card-tx p{font-size:.85rem; color:var(--gray-d); margin-top:5px}
.cat-card .cat-n b{color:var(--navy)}
.cat-card .cat-n span{color:var(--gray)}
@media (max-width:760px){
  .cat-feat{grid-template-columns:1fr}
  .cat-min{grid-template-columns:1fr}
}
@media (min-width:761px) and (max-width:1000px){.cat-min{grid-template-columns:repeat(2,1fr)}}

/* ---------------- proceso / nosotros ---------------- */
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.paso{background:#fff; padding:24px 22px 26px}
.paso .n{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--blue); display:block;
  margin-bottom:10px}
.paso h4{margin-bottom:6px}
.paso p{font-size:.89rem; color:var(--gray-d)}
.paso ol{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:7px}
.paso ol li{display:grid; grid-template-columns:18px 1fr; gap:8px; font-size:.85rem; color:var(--gray-d)}
.paso ol b{font-family:var(--mono); font-size:.7rem; color:var(--navy)}
@media (max-width:900px){.pasos{grid-template-columns:1fr}}
/* ---------------- redes sociales ---------------- */
.rs{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.rs::before{content:""; position:absolute; right:-10%; top:-34%; width:56%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(0,142,210,.5), rgba(0,142,210,0) 66%); pointer-events:none}
.rs::after{content:""; position:absolute; left:-14%; bottom:-46%; width:40%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.1); pointer-events:none}
.rs-g{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,4.6vw,84px); align-items:center}
.rs-g h2{margin:14px 0 18px}
.rs-g h2 em{font-style:normal; color:#7FD0F5}
.rs-g .lead{color:#CFE2EE}
.rs-cards{display:grid; gap:10px; margin:30px 0 26px; max-width:440px}
.rs-card{display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:15px; align-items:center;
  padding:13px 16px; border:1.5px solid rgba(255,255,255,.19); border-radius:var(--r);
  background:rgba(255,255,255,.05); transition:.2s ease}
.rs-card:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); transform:translateX(5px)}
.rs-ic{width:46px; height:46px; border-radius:var(--r); display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff; transition:.2s ease}
.rs-card:hover .rs-ic{background:var(--brand)}
.rs-card b{display:block; font-size:.96rem; font-weight:600; letter-spacing:-.012em}
.rs-card .hd{font-family:var(--mono); font-size:.7rem; color:#9FDCF7}
.rs-card .go{font-size:1.05rem; color:#7FD0F5; transition:transform .2s ease}
.rs-card:hover .go{transform:translateX(4px)}

/* maqueta de teléfono con el feed */
.rs-fono{display:flex; justify-content:center; position:relative}
.fono{width:min(296px,84%); padding:9px; border-radius:36px; border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(158deg,#12456D 0%,#00223F 100%); transform:rotate(-3deg);
  box-shadow:0 46px 76px -32px rgba(0,16,32,.72), inset 0 0 0 1px rgba(255,255,255,.07)}
@media (prefers-reduced-motion:no-preference){
  .fono{animation:flota 7.5s ease-in-out infinite alternate}
}
@keyframes flota{from{transform:rotate(-3deg) translateY(6px)} to{transform:rotate(-3deg) translateY(-12px)}}
.fono-p{background:#fff; border-radius:28px; overflow:hidden; color:var(--ink)}
.fono-top{height:24px; display:grid; place-items:center}
.fono-top i{display:block; width:54px; height:5px; border-radius:3px; background:#DDE4EA}
.fono-perfil{display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:8px 12px 12px}
.fono-perfil svg{width:40px; height:40px}
.fono-perfil img{width:40px; height:40px; object-fit:contain; background:#fff; border-radius:50%; padding:4px; flex:none}
.fono-perfil b{display:block; font-size:.79rem; letter-spacing:-.015em}
.fono-perfil span{display:block; font-family:var(--mono); font-size:.56rem; color:var(--gray); margin-top:2px}
/* con más peso que ".fono-perfil span", que si no le impone el gris y el botón no se lee */
.fono-perfil .fono-seguir{background:var(--blue); color:#fff; font-family:var(--ui); font-size:.62rem;
  font-weight:700; padding:6px 11px; border-radius:3px; white-space:nowrap; margin-top:0}
.fono-tabs{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-2)}
.fono-tabs span{padding:8px 0; display:grid; place-items:center; border-bottom:2px solid transparent; color:#B7C3CC}
.fono-tabs span.on{border-color:var(--ink); color:var(--ink)}
.feed{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:2px 0}
.feed a{display:block; background:var(--sky-2); overflow:hidden}
.feed a img{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.feed a:hover img{transform:scale(1.12)}
.rs-nota{position:relative; z-index:1; margin-top:clamp(26px,3.4vw,44px); padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16); display:flex; justify-content:space-between; gap:16px;
  flex-wrap:wrap; align-items:center}
.rs-nota p{color:#CFE2EE; font-size:.92rem; max-width:60ch}
@media (max-width:960px){
  .rs-g{grid-template-columns:1fr}
  .rs-fono{order:-1}
  .fono{transform:none; animation:none}
  .rs-cards{max-width:none}
}

/* ---------------- anuncios ---------------- */
.av{display:grid; grid-template-columns:130px 1fr auto; gap:clamp(16px,2.4vw,38px); padding:24px 0;
  border-top:1px solid var(--line); align-items:start}
.av .f{font-family:var(--mono); font-size:.72rem; color:var(--blue)}
.av p{font-size:.93rem; color:var(--gray-d); margin-top:6px; max-width:64ch}
@media (max-width:760px){.av{grid-template-columns:1fr; gap:8px}}

/* ---------------- cotización ---------------- */
.ct{display:grid; grid-template-columns:minmax(0,1.55fr) .95fr; gap:clamp(22px,2.8vw,40px); align-items:start}
.hoja{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh2)}
.hoja .hd{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 26px;
  border-bottom:1px solid var(--line)}
.hoja .hd h3{font-size:1.14rem; letter-spacing:-.02em}
.hoja .hd .cnt{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  padding:0 6px; border-radius:20px; background:var(--sky); color:var(--navy); font-family:var(--mono);
  font-size:.72rem; font-weight:600; margin-right:8px}
.hd-stats{display:flex; gap:24px; flex:none}
.hd-stats div{text-align:right}
.hd-stats b{display:block; font-size:1.2rem; font-weight:800; color:var(--navy); letter-spacing:-.025em; line-height:1}
.hd-stats span{display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gray); margin-top:5px}
@media (max-width:520px){.hoja .hd{flex-wrap:wrap} .hd-stats{gap:18px}}
.ren{display:grid; grid-template-columns:64px minmax(0,1fr) auto auto 36px; gap:18px; align-items:center;
  padding:18px 26px; border-bottom:1px solid var(--line-2); transition:background .15s ease}
.ren:hover{background:var(--sky-2)}
.ren:last-child{border-bottom:0}
.ren .th{display:block; width:64px; height:64px; border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; background:var(--sky-2); flex:none}
.ren .th img{width:100%; height:100%; object-fit:cover}
.ren b{display:block; font-size:.98rem; font-weight:600; letter-spacing:-.015em}
.ren b a:hover{color:var(--blue)}
.ren .mt{font-family:var(--mono); font-size:.67rem; color:var(--gray); margin-top:4px; letter-spacing:.01em}
.ren .kg{font-family:var(--mono); font-size:.8rem; color:var(--gray-d); text-align:right; white-space:nowrap}
.ren .x{width:30px; height:30px; display:grid; place-items:center; border:1px solid transparent;
  border-radius:var(--r); color:var(--gray); background:none; transition:.15s}
.ren .x:hover{background:#FBEAEA; color:#B23B3B}
.mstp{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); background:#fff}
.mstp button{width:28px; height:32px; color:var(--navy); font-weight:600}
.mstp button:hover{background:var(--sky-2)}
.mstp span{width:32px; text-align:center; font-family:var(--mono); font-size:.8rem; font-weight:600}
.pnl{background:linear-gradient(160deg, var(--navy) 0%, var(--ink) 100%); color:#fff; border-radius:var(--r-l);
  padding:0; position:sticky; top:calc(var(--nav) + 16px); box-shadow:var(--sh3); overflow:hidden}
.pnl-in{padding:26px 26px 24px}
.pnl-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:22px}
.pnl-head svg{flex:none; width:20px; height:20px; margin-top:2px; color:#7FD0F5}
.pnl-head h3{font-size:1.1rem; letter-spacing:-.02em}
.pnl-head p{font-size:.8rem; color:#9CBCD3; margin-top:3px}
.pnl-sec{display:flex; flex-direction:column; gap:13px; border-top:1px solid rgba(255,255,255,.12);
  margin-top:20px; padding-top:20px}
.pnl-sec:first-of-type{border-top:0; margin-top:0; padding-top:0}
.cmp label{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  color:#9FDCF7; margin-bottom:6px}
.cmp input,.cmp select,.cmp textarea{width:100%; padding:11px 13px; border-radius:var(--r);
  border:1.5px solid rgba(255,255,255,.18); background-color:rgba(255,255,255,.06); color:#fff; font-size:.92rem;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease}
.cmp textarea{min-height:70px; resize:vertical}
.cmp input::placeholder,.cmp textarea::placeholder{color:rgba(255,255,255,.35)}
.cmp input:focus,.cmp select:focus,.cmp textarea:focus{border-color:#7FD0F5;
  background-color:rgba(255,255,255,.1); outline:none}
.par{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cmp-cl label{color:var(--gray)}
.cmp-cl input,.cmp-cl select,.cmp-cl textarea{background-color:#fff; border-color:var(--line); color:var(--ink)}
.cmp-cl input::placeholder,.cmp-cl textarea::placeholder{color:#A9B6C0}
.cmp-cl input:focus,.cmp-cl select:focus,.cmp-cl textarea:focus{background-color:#fff; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,142,210,.13)}

/* ---------------- desplegables ----------------
   El navegador dibuja la lista desplegable, no el CSS. Con color-scheme se le
   indica en qué tema pintarla (oscura en el panel navy, clara en los formularios)
   y con appearance:none se sustituye el chevron nativo, que va muy pegado al borde. */
.cmp select,.cat-bar select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-repeat:no-repeat; background-size:11px auto}

.cmp select{color-scheme:dark; padding-right:38px; background-position:right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FDCF7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.cmp select:hover{border-color:rgba(255,255,255,.42); background-color:rgba(255,255,255,.1)}
.cmp select option{background-color:#00304F; color:#fff}

.cmp-cl select{color-scheme:light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371797C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.cmp-cl select:hover{border-color:#C2D5E3}
.cmp-cl select option{background-color:#fff; color:var(--ink)}

/* formulario de contacto */
#form-cont{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh2);
  overflow:hidden}
.fc-hd{padding:22px 24px; border-bottom:1px solid var(--line-2); background:var(--sky-2)}
.fc-hd h3{font-size:1.14rem}
.fc-body{padding:24px; display:flex; flex-direction:column; gap:16px}
.req{color:#C0492F; font-weight:700}
.inp{position:relative; display:flex; align-items:center}
.inp svg{position:absolute; left:12px; width:16px; height:16px; color:var(--gray); pointer-events:none;
  transition:color .15s ease}
.inp input{padding-left:38px}
.inp:focus-within svg{color:var(--blue)}
#form-cont textarea{min-height:132px; line-height:1.55}
.fc-acc{display:flex; gap:11px; flex-wrap:wrap; margin-top:2px}
.fc-acc .bt{flex:1; min-width:170px}
.fc-pie{display:flex; align-items:flex-start; gap:10px; padding-top:16px; border-top:1px solid var(--line-2)}
.fc-pie svg{flex:none; width:15px; height:15px; margin-top:2px; color:var(--gray)}
.fc-pie p{font-size:.78rem; color:var(--gray); line-height:1.5}
#estado:empty{display:none}
.cmp-cl input.mal{border-color:#C0492F; background:#FDF6F5}
.cmp-cl input.mal:focus{box-shadow:0 0 0 3px rgba(192,73,47,.13)}
.inp:has(input.mal) svg{color:#C0492F}
.aviso{display:flex; align-items:flex-start; gap:9px; padding:12px 14px; border-radius:var(--r);
  font-size:.85rem; line-height:1.45; border:1px solid}
.aviso--ok{background:#EEF9F2; border-color:#B9E3CB; color:#166B3E}
.aviso--mal{background:#FDF1EF; border-color:#F0C7BE; color:#9B3A24}
.pnl-cta{margin-top:22px}
.util-row{display:flex; align-items:center; justify-content:center; gap:4px; margin-top:12px; flex-wrap:wrap}
.util-row button{display:inline-flex; align-items:center; gap:6px; padding:9px 10px; border-radius:var(--r);
  color:#BFDAEA; font-size:.78rem; font-weight:500; transition:.15s}
.util-row button:hover{color:#fff; background:rgba(255,255,255,.08)}
.util-row button svg{width:14px; height:14px}
.util-row .sep{width:1px; height:14px; background:rgba(255,255,255,.16)}
.trust{display:flex; align-items:center; gap:9px; margin-top:20px; padding:12px 14px; border-radius:var(--r);
  background:rgba(255,255,255,.06)}
.trust svg{flex:none; width:15px; height:15px; color:#7FD0F5}
.trust p{font-size:.77rem; color:#BFDAEA; line-height:1.45}
@media (max-width:1000px){.ct{grid-template-columns:1fr}.pnl{position:static}}
@media (max-width:640px){
  .ren{grid-template-columns:52px 1fr auto; gap:12px}
  .ren .th{width:52px; height:52px}
  .ren .kg{grid-column:2/-1; text-align:left}
  .ren .x{grid-row:1; grid-column:3}
  .par{grid-template-columns:1fr}
}

/* ---------------- historia (nosotros) + contacto ---------------- */
.hist-g{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,3.4vw,60px); align-items:start}
.cont-g{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,56px); align-items:start}
@media (max-width:900px){
  .hist-g,.cont-g{grid-template-columns:1fr}
}

/* ---------------- pie ---------------- */
.pie{background:var(--ink); color:#A9C4D6; padding:40px 0 0}
.pie-g{display:grid; grid-template-columns:1.4fr .8fr .9fr 1.2fr; gap:clamp(20px,2.6vw,44px);
  padding-bottom:28px}
.pie h4{font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:#fff; margin-bottom:13px}
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.9rem}
.pie a:hover{color:#fff}
.pie .mk b{color:#fff}.pie .mk b i{color:#4FC3F5}.pie .mk s{color:#7FA0B6}
.pie .tel{font-family:var(--mono); font-size:.98rem; color:#fff}
.pie .dm{font-size:.84rem; line-height:1.55; margin-top:8px}
.rds{display:flex; gap:8px; margin-top:14px}
.rds a{width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); display:grid;
  place-items:center; transition:.16s}
.rds a:hover{background:var(--blue); border-color:var(--blue); color:#fff}
.pie-l{border-top:1px solid rgba(255,255,255,.14); padding:14px 0 20px; display:flex;
  justify-content:space-between; gap:14px; flex-wrap:wrap}
.pie-l span,.pie-l a{font-size:.75rem}
@media (max-width:900px){.pie-g{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pie-g{grid-template-columns:1fr; gap:24px}}

/* ---------------- utilidades ---------------- */
.v{display:none}
.v.on{display:block}
.v:not(#v-inicio){padding-top:var(--nav)}
.rv{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
.sb{animation:sb .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes sb{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:#fff; padding:10px 16px}
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,150%); z-index:120; background:var(--ink);
  color:#fff; border-radius:var(--r); padding:13px 20px; display:flex; align-items:center; gap:16px;
  font-size:.85rem; box-shadow:var(--sh3); opacity:0; visibility:hidden; pointer-events:none;
  max-width:calc(100vw - 28px); box-sizing:border-box;
  transition:transform .28s cubic-bezier(.2,.8,.25,1), opacity .28s ease, visibility .28s}
.toast.on{transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto}
.toast a{color:#7FD0F5; font-weight:600}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
@media print{.nav,.pie,.toast,.v:not(.on),.pnl{display:none !important} .sec{padding:0}}