/* ============================================================
   COMPONENTS.CSS
   Todos los bloques visuales del sitio, en el mismo orden en
   que aparecen al recorrer la página.
   ============================================================ */


/* ============================================================
   1 · ENCABEZADO Y NAVEGACIÓN
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  min-height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;
  width:min(var(--wrap),var(--gutter));
  margin:0 auto;gap:1rem;
}
.mark{
  display:inline-flex;align-items:center;
  text-decoration:none;
  flex:0 0 auto;              /* el flex nunca lo encoge */
  min-width:0;
}
/* ANCHO Y ALTO EXPLÍCITOS, a propósito.
   Antes esto era height + width:auto, y el logo daba un salto al
   cargar: los atributos del HTML decían 513x120, así que el
   navegador lo pintaba enorme hasta que aplicaba el CSS. Con las
   dos medidas fijas el tamaño es el mismo desde el primer frame.
   La proporción real del archivo es 4.275:1 y estas medidas la
   respetan; object-fit:contain absorbe el redondeo.
   max-width:none anula el img{max-width:100%} de base.css, que
   era lo único capaz de aplastar el ancho dejando el alto fijo. */
.mark img{
  width:128px;height:30px;
  max-width:none;
  flex-shrink:0;
  display:block;
  object-fit:contain;
}

.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto}

.nav-link{
  display:inline-flex;align-items:center;
  background:none;border:0;
  font-family:inherit;font-size:.92rem;font-weight:500;
  color:var(--muted);cursor:pointer;text-decoration:none;
  padding:.55rem .9rem;border-radius:100px;
  white-space:nowrap;
  transition:color .2s,background .2s;
}
.nav-link:hover{color:var(--navy);background:var(--paper)}
.nav-link[aria-current="page"]{color:var(--navy)}

.nav-cta{
  background:var(--orange);color:#fff;
  padding:.62rem 1.3rem;margin-left:.5rem;
}
.nav-cta:hover{background:var(--orange-2);color:#fff}


/* ============================================================
   2 · BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.02rem 1.85rem;border:1px solid transparent;
  font-family:inherit;font-size:.98rem;font-weight:500;line-height:normal;
  cursor:pointer;text-decoration:none;border-radius:100px;
  transition:background .22s var(--ease),transform .22s var(--ease),color .22s,border-color .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-2)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-outline{border-color:var(--line);color:var(--navy);background:#fff}
.btn-outline:hover{border-color:var(--navy);background:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.3rem}


/* ============================================================
   3 · FOTOGRAFÍAS
   El contenedor .shot da la proporción y el recorte;
   la <img> de adentro es el archivo real de /assets/images/.
   ============================================================ */
.shot{
  position:relative;overflow:hidden;
  background:var(--paper);
}
.shot img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* velo de color de marca sobre cada foto */
.shot::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 70% 25%,rgba(8,52,80,.10),transparent 62%),
             linear-gradient(155deg,rgba(224,76,1,.07),transparent 55%);
}


/* ============================================================
   4 · HERO
   ============================================================ */
.hero{padding:9rem 0 0;background:var(--white)}
.hero h1{max-width:15ch}
.hero .lede{margin-top:1.9rem}
.hero-media{
  margin-top:3.5rem;
  height:clamp(320px,56vh,600px);
  height:clamp(320px,56svh,600px);
  border-radius:var(--radius-lg);
}

/* entrada escalonada de los hijos directos del hero */
.stage>*{opacity:0;transform:translateY(28px);animation:rise .95s var(--ease) forwards}
.stage>*:nth-child(1){animation-delay:.10s}
.stage>*:nth-child(2){animation-delay:.28s}
.stage>*:nth-child(3){animation-delay:.42s}
.stage>*:nth-child(4){animation-delay:.54s}
@keyframes rise{to{opacity:1;transform:none}}


/* ============================================================
   5 · MARQUESINA DE MARCAS
   ============================================================ */
/* ============================================================
   5 · PRUEBA SOCIAL · "Marcas que ya hicieron check-in"
   Dos rieles infinitos en direcciones opuestas. El mismo bloque
   se usa en las tres paginas; solo cambia el aria-label.
   ============================================================ */
.proof{
  /* --pf-h es la altura del LIENZO de 200px de cada archivo, no la
     del logotipo. Cada archivo lleva su propio multiplicador --m
     (ver bloque .pf-* mas abajo) para que la altura OPTICA real
     quede entre 32px y 46px en desktop sin deformar a nadie. */
  --pf-h:clamp(41px,3.6vw,50px);
  padding:clamp(4.5rem,7.5vw,6rem) 0 0;
  background:var(--white);
}
.proof-title{
  margin:0;max-width:13.2em;   /* en em, no en px: el corte de linea
     ("...ya hicieron / check-in con nosotros") se mantiene igual en
     todos los anchos porque el limite escala con la tipografia */
  font-size:clamp(1.75rem,3.4vw,2.9rem);
  line-height:1.08;letter-spacing:-.042em;font-weight:700;
  color:var(--ink);   /* el mismo de todos los titulos del sitio.
     Con --navy quedaba visiblemente mas azul que el h2 de la
     seccion siguiente, que va justo debajo. */
}
.proof-sub{
  margin:.9rem 0 0;max-width:700px;
  font-size:clamp(.95rem,1.18vw,1.16rem);
  line-height:1.6;color:var(--muted);
}
.proof-rails{
  margin-top:clamp(2rem,3.4vw,2.75rem);
  display:flex;flex-direction:column;gap:12px;
}

/* ---------- capsula ---------- */
.rail{
  position:relative;display:flex;align-items:center;
  height:clamp(66px,6vw,86px);
  border-radius:clamp(20px,2vw,28px);
  background:rgba(245,247,248,.92);
  border:1px solid rgba(15,45,65,.05);
  box-shadow:0 8px 24px rgba(15,35,50,.035);
  overflow:hidden;
}
/* el degradado de los extremos sustituye a cualquier borde duro */
.rail-view{
  flex:1 1 auto;min-width:0;overflow:hidden;
  /* En px y no en %, para que el fundido mida lo mismo en cualquier
     ancho. Es corto a proposito: solo suaviza la entrada y la salida
     contra el borde redondeado, sin comerse ancho util. */
  --fa:clamp(8px,1vw,14px);   /* fin del tramo casi transparente */
  --fb:clamp(40px,4.4vw,64px);/* inicio del tramo opaco          */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.05) var(--fa),#000 var(--fb),#000 calc(100% - var(--fb)),rgba(0,0,0,.05) calc(100% - var(--fa)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.05) var(--fa),#000 var(--fb),#000 calc(100% - var(--fb)),rgba(0,0,0,.05) calc(100% - var(--fa)),transparent 100%);
}

/* ---------- riel infinito ----------
   El track lleva el conjunto A dos veces. Desplazarlo -50% mueve
   exactamente un conjunto, asi que el segundo ocupa el lugar del
   primero y el ciclo no tiene salto ni hueco. */
.rail-track{
  display:flex;align-items:center;width:max-content;
  will-change:transform;
  animation:pf-slide 46s linear infinite;
}
.rail-track.is-ltr{animation-name:pf-slide-back}
@keyframes pf-slide     {from{transform:translateX(0)}      to{transform:translateX(-50%)}}
@keyframes pf-slide-back{from{transform:translateX(-50%)}   to{transform:translateX(0)}}
.rail:hover .rail-track{animation-play-state:paused}

/* ---------- logotipos ---------- */
.pf-logo{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:0 clamp(1.5rem,2.4vw,2.6rem);
}
.pf-logo img{
  height:calc(var(--pf-h) * var(--m,1));
  width:auto;max-width:220px;   /* anula el img{max-width:100%} de base */
  object-fit:contain;display:block;flex-shrink:0;
}

/* Multiplicador por archivo. Se calcula como r^-0.62, donde r es la
   proporcion alto-contenido / alto-lienzo de cada PNG. Es un punto
   intermedio entre igualar ALTURA (que agranda de mas los logotipos
   anchos) e igualar AREA (que deja diminutos a los muy horizontales). */
.pf-bacardi-coca-cola{--m:1.157}
.pf-barcel{--m:1.195}
.pf-big-bola{--m:1.712}
.pf-big-mix{--m:1.259}
.pf-bushmills{--m:1.38}
.pf-chips{--m:1.185}
.pf-dobel-50{--m:1.917}
.pf-dominos{--m:1.9}
.pf-don-justo{--m:1.587}
.pf-heineken{--m:1.449}
.pf-indio{--m:1.556}
.pf-jose-cuervo{--m:1.162}
.pf-maestro-dobel-atelier{--m:1.629}
.pf-maison-perrier{--m:1.127}
.pf-p-and-g{--m:1.185}
.pf-penafiel{--m:1.3}
.pf-perrier{--m:1.409}
.pf-reserva-cristalino{--m:1.457}
.pf-runners{--m:1.387}
.pf-schweppes{--m:1.237}
.pf-starbucks{--m:1.185}
.pf-teremana{--m:1.852}
.pf-uber{--m:1.641}
.pf-uber-eats{--m:2.088}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .rail-track{animation:none;transform:none}
  .rail-view{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}


/* ============================================================
   6 · BANDAS
   ============================================================ */
.band{padding:clamp(4.2rem,10vh,7.5rem) 0}
.band-paper{background:var(--paper)}
.band-navy{background:var(--navy);color:#fff}


/* ============================================================
   7 · SCROLL NARRATIVO · "El recorrido del huésped"
   ============================================================ */
.story-title{margin-bottom:2.5rem}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}

.story-visual{
  position:sticky;
  top:calc(50vh - 29vh);top:calc(50svh - 29svh);
  height:58vh;height:58svh;border-radius:var(--radius-md);overflow:hidden;
}
.layer{
  position:absolute;inset:0;opacity:0;
  transition:opacity .7s var(--ease),transform 1.1s var(--ease);
  transform:scale(1.05);
}
.layer.on{opacity:1;transform:scale(1)}
.layer .stamp{
  position:absolute;left:1.5rem;bottom:1.3rem;z-index:2;color:#fff;
  font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.04em;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.layer .stamp small{
  display:block;font-size:.85rem;font-weight:400;letter-spacing:0;
  margin-top:.3rem;opacity:.92;
}

.chapters{padding:4vh 0 16vh;padding:4svh 0 16svh}
.chapter{
  min-height:58vh;min-height:58svh;
  display:flex;flex-direction:column;justify-content:center;
  opacity:.3;transition:opacity .5s var(--ease);
}
.chapter.on{opacity:1}
.chapter .tick{color:var(--orange);font-weight:700;font-size:.92rem;margin-bottom:.9rem}
.chapter p{color:var(--muted);margin-top:1rem;max-width:44ch}


/* ============================================================
   8 · REVELADO AL HACER SCROLL
   ============================================================ */
.rv{
  opacity:0;transform:translateY(32px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:var(--d,0s);
}
.rv.in{opacity:1;transform:none}

.rv-wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease);transition-delay:var(--d,0s)}
.rv-wipe.in{clip-path:inset(0 0 0 0)}


/* ============================================================
   9 · CONTRASTE "afuera / adentro"
   ============================================================ */
.contrast{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line);margin-top:3rem;
  border-radius:var(--radius-md);overflow:hidden;
}
.side{background:var(--white);padding:2.6rem 2.3rem}
.side.now{background:var(--navy);color:#fff}
.side h3{font-size:1.28rem;margin-bottom:1rem}
.side li{padding:.72rem 0;border-bottom:1px solid var(--line);font-size:.97rem;color:var(--muted)}
.side.now li{border-bottom-color:rgba(255,255,255,.16);color:var(--muted-d)}
.side li:last-child{border-bottom:0}


/* ============================================================
   10 · TARJETAS RESUMEN (marcas / propiedades)
   ============================================================ */
.summ{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;margin-top:3rem}
.card{
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--white);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
.card .shot{height:230px;flex:0 0 auto}
.card-body{padding:2.2rem 2.1rem 2.4rem;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.5rem;letter-spacing:-.035em}
.card p{color:var(--muted);margin-top:.9rem;font-size:1rem}
.card ul{margin:1.6rem 0 2rem}
.card li{padding:.66rem 0;border-bottom:1px solid var(--line);font-size:.96rem;display:flex;gap:.85rem}
.card li::before{
  content:"";flex:0 0 7px;height:7px;margin-top:.55rem;
  background:var(--orange);border-radius:50%;
}
.card .btn{align-self:flex-start;margin-top:auto}


/* ============================================================
   11 · LISTA DE CAPACIDADES NUMERADA
   ============================================================ */
.caps{margin-top:2.8rem;border-top:1px solid var(--line)}
.cap{
  display:grid;grid-template-columns:56px 1fr 1.4fr;gap:2rem;align-items:baseline;
  padding:1.8rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.cap:hover{padding-left:1rem}
.cap .n{color:var(--orange);font-weight:700;font-size:.94rem}
.cap p{color:var(--muted);font-size:.98rem}

.band-navy .caps{border-top-color:rgba(255,255,255,.16)}
.band-navy .cap{border-bottom-color:rgba(255,255,255,.16)}
.band-navy .cap p{color:var(--muted-d)}


/* ============================================================
   12 · RED DE ADMINISTRADORES Y COBERTURA
   ============================================================ */
.net{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.4rem}
.partner{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.8rem 1.5rem;background:var(--white);
  transition:border-color .3s,transform .3s var(--ease);
}
.partner:hover{border-color:var(--navy);transform:translateY(-4px)}
.partner b{display:block;font-size:1.22rem;letter-spacing:-.035em;color:var(--ink)}
.partner span{display:block;margin-top:.55rem;font-size:.92rem;color:var(--muted)}

.cov{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.6rem}
.place{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.6rem 1.5rem;background:var(--white);
}
.place b{display:block;font-size:1.12rem;letter-spacing:-.03em}
.place span{display:block;margin-top:.5rem;font-size:.92rem;color:var(--muted)}


/* ============================================================
   13 · CASOS DE CAMPAÑA
   ============================================================ */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.case{
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:2rem 1.8rem;background:var(--white);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow-tile)}
.case .brand{font-size:1.28rem;font-weight:700;letter-spacing:-.035em;line-height:1.6}
.case .kind{font-size:.86rem;color:var(--orange);font-weight:500;margin-top:.35rem}
.case p{font-size:.95rem;color:var(--muted);margin-top:1.1rem}
.case .out{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.94rem}
.case .out b{display:block;font-size:.86rem;color:var(--muted);font-weight:500;margin-bottom:.35rem}


/* ============================================================
   14 · FORMATOS POR TIPO DE ESTANCIA
   ============================================================ */
.tier{margin-top:2.4rem}
.tier + .tier{margin-top:3.2rem}
.tier-head{
  display:flex;align-items:baseline;gap:1.3rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:2px solid var(--navy);
}
.tier-head p{color:var(--muted);font-size:.95rem;max-width:56ch}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.8rem}
.band > .wrap > .packs{margin-top:2.4rem}
.pack{
  background:var(--white);padding:2rem 1.7rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pack:hover{transform:translateY(-6px);box-shadow:var(--shadow-tile)}
.pack h3{font-size:1.06rem;padding-bottom:.85rem;border-bottom:1px solid var(--line);margin-bottom:.85rem}
.pack li{font-size:.92rem;color:var(--muted);padding:.42rem 0}
.pack.custom{background:var(--navy);border-color:var(--navy);color:#fff}
.pack.custom h3{border-bottom-color:rgba(255,255,255,.2)}
.pack.custom li{color:var(--muted-d)}


/* ============================================================
   15 · REJILLAS DE CONTENIDO
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;margin-top:3rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}

.item h3{margin-bottom:.6rem}
.item p{color:var(--muted);font-size:.97rem}
.stack .item{padding:1.6rem 0;border-bottom:1px solid var(--line)}
.stack .item:last-child{border-bottom:0}
.band-navy .stack .item{border-bottom-color:rgba(255,255,255,.16)}
.band-navy .item p{color:var(--muted-d)}

.facts{border-top:2px solid var(--orange);margin-top:2rem}
.fact{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line);font-size:.96rem;
}
.fact dt{color:var(--muted)}
.fact dd{margin:0;font-weight:700;text-align:right}
.band-navy .fact{border-bottom-color:rgba(255,255,255,.16)}
.band-navy .fact dt{color:var(--muted-d)}


/* ============================================================
   16 · SPLIT TEXTO + FOTO
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.split .shot{height:clamp(260px,40vh,420px);height:clamp(260px,40svh,420px);border-radius:var(--radius-md)}


/* ============================================================
   17 · GALERÍA Y MATERIALES
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.gal figure{margin:0}
.gal .shot{height:260px;border-radius:var(--radius-sm)}
.gal figcaption{font-size:.94rem;color:var(--muted);margin-top:.85rem}
.band-navy .gal figcaption{color:var(--muted-d)}

.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.mat{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--white);
}
.mat .shot{height:180px}
.mat .txt{padding:1.3rem 1.4rem 1.5rem}
.mat h3{font-size:1.02rem;margin-bottom:.45rem}
.mat p{font-size:.93rem;color:var(--muted)}


/* ============================================================
   18 · FAQ
   ============================================================ */
.faq{margin-top:2.6rem;border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{
  cursor:pointer;list-style:none;
  padding:1.5rem 2.5rem 1.5rem 0;
  font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
  position:relative;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";position:absolute;right:.4rem;top:1.85rem;
  width:11px;height:11px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.q[open] summary::after{transform:rotate(-135deg)}
.q p{padding:0 3rem 1.6rem 0;color:var(--muted);font-size:.98rem;max-width:70ch}


/* ============================================================
   19 · CIERRE / CONTACTO
   ============================================================ */
.close{
  position:relative;padding:clamp(5rem,13vh,9rem) 0;
  background:var(--navy);overflow:hidden;text-align:center;color:#fff;
  scroll-margin-top:var(--nav-h);
}
.close .glow{
  position:absolute;width:70vw;height:70vw;left:50%;top:60%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(224,76,1,.32),transparent 62%);
  filter:blur(22px);
}
.close-inner{position:relative;z-index:2}
.close .lede{color:var(--muted-d);margin:1.2rem auto 0}

.contact-lines{max-width:520px;margin:2.4rem auto 0;border-top:1px solid rgba(255,255,255,.2)}
.contact-lines a{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem .2rem;border-bottom:1px solid rgba(255,255,255,.2);
  color:#fff;text-decoration:none;font-weight:500;
  transition:padding .3s var(--ease),color .3s;
}
.contact-lines a:hover{padding-left:1rem;color:var(--orange)}
.contact-lines a span{color:var(--muted-d);font-weight:400;font-size:.9rem;white-space:nowrap}


/* ============================================================
   20 · PIE DE PÁGINA
   ============================================================ */
.foot{
  background:var(--white);color:var(--muted);
  padding:2.6rem 0;font-size:.87rem;border-top:1px solid var(--line);
}
.foot-inner{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--navy)}


/* ============================================================
   21 · DOCK INFERIOR · SOLO MÓVIL

   Cápsula flotante fija al pie, estilo iOS. Cuatro iconos, sin
   texto. El activo va dentro de una burbuja blanca luminosa.

   Aquí sólo vive el componente, OCULTO por defecto. Se enciende
   en responsive.css de 768 px hacia abajo, así el escritorio no
   lo ve nunca.
   ============================================================ */
.dock{
  display:none;                    /* se enciende en responsive.css */
  position:fixed;
  left:16px;right:16px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:200;                     /* por encima del nav fijo (100) */
  /* ANCHO FIJO, a propósito. La simetría óptica de la cápsula
     activa depende de que el ancho del dock sea conocido.

     Con los cuatro items en flex:1 dentro de un dock de ancho W
     y padding lateral p:

        hueco exterior = p + (slot - cápsula)/2
        hueco entre    = slot - cápsula        , slot = (W-2p)/4

     Para que la cápsula de Inicio y la de Contacto respiren igual
     que las centrales, hace falta  p = (slot - cápsula)/2, y de ahí
     p = (W - 4·cápsula)/10. O sea que p DEPENDE del ancho: con un
     dock fluido nunca cuadra en todos los tamaños. Con W=340 y
     cápsula=60 la solución exacta es p=10, y los cinco huecos
     quedan en 20 px clavados.

     Ojo con el borde: box-sizing es border-box y el borde de 1 px
     suma al hueco exterior pero no al de entre cápsulas, así que
     entra en la ecuación:  p + 1 + (S-C)/2 = S - C,  S = (W-2-2p)/4.
     Con W=340 y C=60 eso da p=9 exacto: los cinco huecos en 20 px.

     Antes el dock era fluido hasta 400 px y el desbalance llegaba
     a 12 px en pantallas de 430. */
  max-width:340px;
  margin-inline:auto;
  height:70px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;

  /* --- cristal claro ---
     Blanco muy translúcido: sobre una foto se ve el fondo pasar,
     que es lo que lo hace parecer vidrio y no una barra sólida.
     La saturación alta evita que el desenfoque lo deje lavado. */
  background:rgba(255,255,255,.38);
  backdrop-filter:blur(24px) saturate(185%);
  -webkit-backdrop-filter:blur(24px) saturate(185%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 30px rgba(16,24,40,.13),
             0 1px 2px rgba(16,24,40,.06),
             inset 0 1px 1px rgba(255,255,255,.65);   /* filo superior */
}
/* reflejo suave en la mitad de arriba del cristal */
.dock::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 55%);
}
/* sin backdrop-filter el fondo se opaca, para que los iconos se lean */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dock{background:rgba(255,255,255,.93)}
}

/* ---------- los cuatro iconos ---------- */
.dock-item{
  position:relative;z-index:1;
  flex:1 1 0;                      /* los cuatro ocupan lo mismo */
  min-width:0;
  display:flex;align-items:center;justify-content:center;
  height:100%;
  text-decoration:none;
  /* INACTIVO: azul de marca, un punto por debajo en peso.
     ACTIVO: naranja de marca. Es el mismo var(--orange) que usan
     los botones "Cotizar mi campaña" y el CTA del encabezado, no
     un tono aparte. */
  color:var(--navy);
  opacity:.68;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s var(--ease),
             opacity .26s var(--ease),
             transform .18s var(--ease);
}
.dock-item:active{transform:scale(.94)}
.dock-item.is-active{color:var(--orange);opacity:1}

/* ---------- la burbuja del icono activo ----------
   Un círculo blanco luminoso detrás del icono. Lleva su PROPIO
   backdrop-filter: toma el fondo ya difuminado del dock y lo
   aclara otro punto, y eso es lo que lo hace ver como una lente
   de cristal encima del cristal, no como un círculo pintado. */
.dock-ico{
  position:relative;
  /* 60 en un dock de 70: la cápsula ocupa el 86 % del alto y sólo
     quedan 5 px de aire arriba y abajo. Empezó en 46/68 (68 %),
     que dejaba demasiado espacio muerto. */
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.dock-ico::before{
  content:"";position:absolute;inset:0;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.62));
  backdrop-filter:blur(8px) saturate(200%) brightness(1.10);
  -webkit-backdrop-filter:blur(8px) saturate(200%) brightness(1.10);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 3px 10px rgba(16,24,40,.14),
             inset 0 1px 1.5px rgba(255,255,255,1),
             inset 0 -2px 4px rgba(224,76,1,.07);
  opacity:0;
  transform:scale(.7);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.dock-item.is-active .dock-ico::before{opacity:1;transform:scale(1)}

.dock-ico svg{
  position:relative;z-index:1;
  /* Los inactivos van un punto por debajo del activo: así el
     seleccionado se promociona sin que los otros se pierdan. */
  width:27px;height:27px;
  stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:width .26s var(--ease),height .26s var(--ease);
}
/* Propiedades se lee un punto más grande: su silueta es más ancha
   que alta y ópticamente pesa menos que los otros tres */
.dock-item[data-dock="propiedades"] .dock-ico svg{width:29px;height:29px}

/* el icono activo crece dentro de su cápsula */
.dock-item.is-active .dock-ico svg{width:30px;height:30px}
.dock-item.is-active[data-dock="propiedades"] .dock-ico svg{width:32px;height:32px}

@media (prefers-reduced-motion:reduce){
  .dock-item,.dock-ico::before,.dock-ico svg{transition:none}
  .dock-item:active{transform:none}
}