/* ============================================================
   Irún Propiedades · Portal de inteligencia comercial
   Identidad: azul Irún #0056B4 + celeste #7DB2E1 (de su logo),
   serif display en minúscula como su sitio + sans geométrica.
   ============================================================ */
:root {
  --azul: #0056B4;
  --azul-2: #0A6AD6;
  --azul-osc: #003B7D;
  --celeste: #7DB2E1;
  --celeste-2: #CFE3F5;
  --noche: #06152B;
  --noche-2: #0B2142;
  --noche-3: #12305C;
  --tinta: #0D1B2E;
  --tinta-2: #3C4E66;
  --gris: #6B7B90;
  --linea: #E2E9F2;
  --fondo: #F3F6FA;
  --blanco: #FFFFFF;
  --verde: #12A06B;
  --verde-2: #D8F3E7;
  --ambar: #E39B12;
  --ambar-2: #FCEFD3;
  --rojo: #D9433A;
  --rojo-2: #FBE0DD;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --r: 16px;
  --sombra: 0 1px 2px rgba(6, 21, 43, .06), 0 8px 24px -12px rgba(6, 21, 43, .18);
  --sombra-2: 0 2px 4px rgba(6, 21, 43, .08), 0 24px 48px -20px rgba(0, 59, 125, .35);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans); color: var(--tinta); background: var(--fondo);
  -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--azul); }
img { max-width: 100%; display: block; }
.g > *, .card { min-width: 0; }
.serif { font-family: var(--serif); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ================= GATE ================= */
.gate {
  position: fixed; inset: 0; z-index: 100; background: #01070F;
  display: grid; place-items: center; overflow: hidden; color: #fff;
}
.gate.fuera { animation: gateOut .7s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes gateOut { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
.gate__foto {
  position: absolute; inset: 0; background: url(../img/hero.jpg) center/cover;
  opacity: .22; filter: saturate(.6) contrast(1.1); transform: scale(1.08);
  animation: kb 26s ease-in-out infinite alternate;
}
@keyframes kb { to { transform: scale(1.18) translate(-2%, -1%); } }
.gate::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(0, 86, 180, .55), transparent 60%),
              linear-gradient(180deg, rgba(1, 7, 15, .7), rgba(1, 7, 15, .92));
}
.barrido {
  position: absolute; top: -50%; width: 38vw; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(125, 178, 225, .16), rgba(0, 86, 180, .28), transparent);
  transform: rotate(18deg); filter: blur(10px); animation: barr 7s cubic-bezier(.45, 0, .2, 1) infinite;
}
.barrido.b2 { animation-delay: 2.4s; width: 22vw; opacity: .7; }
.barrido.b3 { animation-delay: 4.6s; width: 12vw; opacity: .5; }
@keyframes barr { from { left: -45vw; } to { left: 120vw; } }
.gate__caja { position: relative; text-align: center; padding: 24px; width: min(440px, 100%); }
.gate__logo { width: min(300px, 70vw); margin: 0 auto 6px; animation: wmIn 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wmIn { from { opacity: 0; transform: translateX(-40px) skewX(-14deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.gate__t { font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 22px 0 4px; animation: fadeUp .9s .35s both; }
.gate__s { color: rgba(255, 255, 255, .62); font-size: 13px; animation: fadeUp .9s .5s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pin { margin-top: 28px; animation: fadeUp .9s .65s both; }
.pin__cajas { display: flex; gap: 12px; justify-content: center; }
.pin__cajas input {
  width: 58px; height: 68px; border-radius: 14px; border: 1px solid rgba(125, 178, 225, .35);
  background: rgba(255, 255, 255, .05); color: #fff; font: 600 28px var(--sans); text-align: center;
  outline: none; transition: .2s; backdrop-filter: blur(6px);
}
.pin__cajas input:focus { border-color: var(--celeste); box-shadow: 0 0 0 4px rgba(125, 178, 225, .18); background: rgba(255, 255, 255, .09); }
.pin__cajas.err { animation: shake .4s; }
.pin__cajas.err input { border-color: var(--rojo); }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin__err { color: #ff8a80; font-size: 12.5px; height: 18px; margin-top: 10px; opacity: 0; transition: .2s; }
.pin__err.on { opacity: 1; }
.gate__pie { margin-top: 34px; font-size: 11.5px; color: rgba(255, 255, 255, .4); letter-spacing: .02em; animation: fadeUp .9s .8s both; }

/* ================= WIPE ================= */
.wipe {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center;
  background: linear-gradient(120deg, var(--azul-osc), var(--azul) 55%, var(--azul-2));
  transform: translateX(-101%);
}
.wipe img { width: 84px; opacity: 0; transform: scale(.85); transition: .3s; }
.wipe.in { transform: none; transition: transform .5s cubic-bezier(.7, 0, .25, 1); }
.wipe.in img { opacity: 1; transform: none; transition-delay: .18s; }
.wipe.out { transform: translateX(101%); transition: transform .5s cubic-bezier(.7, 0, .25, 1); }

/* ================= HUB ================= */
.hub { min-height: 100vh; background: var(--fondo); }
.hub__hero {
  position: relative; overflow: hidden; color: #fff; padding: 26px 40px 120px;
  background: linear-gradient(115deg, var(--noche) 10%, var(--noche-2) 55%, var(--azul-osc));
}
.hub__hero::after {
  content: ''; position: absolute; inset: 0; background: url(../img/hero.jpg) right center/cover;
  opacity: .16; mix-blend-mode: luminosity; mask-image: linear-gradient(90deg, transparent 20%, #000 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%);
}
.hub__hero > * { position: relative; z-index: 1; }
.hub__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hub__top img { height: 44px; width: auto; }
.chip-real {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(125, 178, 225, .3);
  color: var(--celeste-2); white-space: nowrap;
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: lat 1.8s infinite; flex: none; }
@keyframes lat { 70% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }
.hub__saludo { margin-top: 54px; max-width: 760px; }
.hub__eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--celeste); font-weight: 600; }
.hub__h { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; margin: 12px 0 14px; letter-spacing: -.02em; }
.hub__h em { font-style: italic; color: var(--celeste); }
.hub__p { color: rgba(255, 255, 255, .72); font-size: 15px; max-width: 640px; margin: 0; }
.hub__kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 40px; background: rgba(125, 178, 225, .18); border-radius: 16px; overflow: hidden; }
.hub__kpi { background: rgba(6, 21, 43, .55); backdrop-filter: blur(8px); padding: 16px 18px; }
.hub__kpi b { display: block; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; color: #fff; }
.hub__kpi > span { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0 40px 40px; margin-top: -78px; position: relative; z-index: 2; }
.mod {
  position: relative; text-align: left; background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px;
  padding: 22px 22px 18px; box-shadow: var(--sombra); overflow: hidden; color: var(--tinta);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; opacity: 0; transform: translateY(26px);
  animation: modIn .7s cubic-bezier(.2, .8, .2, 1) forwards; display: flex; flex-direction: column; min-width: 0;
}
.mod::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--azul), var(--celeste)); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.mod:hover { transform: translateY(-5px); box-shadow: var(--sombra-2); }
.mod:hover::before { transform: scaleX(1); }
@keyframes modIn { to { opacity: 1; transform: none; } }
.hub__grid .mod:nth-child(1) { animation-delay: .05s; } .hub__grid .mod:nth-child(2) { animation-delay: .12s; }
.hub__grid .mod:nth-child(3) { animation-delay: .19s; } .hub__grid .mod:nth-child(4) { animation-delay: .26s; }
.hub__grid .mod:nth-child(5) { animation-delay: .33s; } .hub__grid .mod:nth-child(6) { animation-delay: .40s; }
.hub__grid .mod:nth-child(7) { animation-delay: .47s; } .hub__grid .mod:nth-child(8) { animation-delay: .54s; }
.hub__grid .mod:nth-child(9) { animation-delay: .61s; } .hub__grid .mod:nth-child(10) { animation-delay: .68s; }
.mod__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: #EAF2FC; color: var(--azul); margin-bottom: 14px; }
.mod__ico svg { width: 23px; height: 23px; }
.mod__tag { position: absolute; top: 20px; right: 18px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; }
.tag-real { background: var(--verde-2); color: #0B7A51; }
.tag-mod { background: #EEF1F6; color: var(--gris); }
.tag-mix { background: #E6F0FB; color: var(--azul); }
.mod__t { font-family: var(--serif); font-size: 23px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 6px; }
.mod__d { color: var(--tinta-2); font-size: 13px; margin: 0 0 16px; flex: 1; padding-right: 40px; }
.mod__k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--linea); padding-top: 14px; }
.mod__k b { display: block; font-size: 17px; font-weight: 700; color: var(--azul-osc); }
.mod__k > div > span { font-size: 10.5px; color: var(--gris); line-height: 1.25; display: block; }
.mod__flecha { position: absolute; right: 20px; bottom: 74px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo); color: var(--azul); transition: .35s; }
.mod:hover .mod__flecha { transform: translateX(5px); background: var(--azul); color: #fff; }
.mod--osc { grid-column: span 2; background: linear-gradient(135deg, var(--noche) 0%, var(--noche-2) 60%, var(--azul-osc)); color: #fff; border-color: transparent; }
.mod--osc .mod__ico { background: rgba(125, 178, 225, .15); color: var(--celeste); }
.mod--osc .mod__d { color: rgba(255, 255, 255, .72); }
.mod--osc .mod__k { border-color: rgba(255, 255, 255, .12); }
.mod--osc .mod__k b { color: #fff; font-size: 22px; font-family: var(--serif); font-weight: 500; }
.mod--osc .mod__k span { color: rgba(255, 255, 255, .55); }
.mod--osc .mod__flecha { background: rgba(255, 255, 255, .1); color: #fff; }
.mod--osc .mod__t { font-size: 30px; }
.mod--rojo .mod__ico { background: var(--rojo-2); color: var(--rojo); }
.hub__pie { padding: 8px 40px 40px; color: var(--gris); font-size: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ================= SHELL DE MÓDULO ================= */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; background: linear-gradient(90deg, var(--noche-2) 252px, var(--fondo) 252px); }
.side {
  position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, var(--noche), var(--noche-2));
  color: #fff; display: flex; flex-direction: column; padding: 22px 14px; overflow-y: auto;
}
.side__logo { padding: 2px 10px 22px; cursor: pointer; }
.side__logo img { height: 38px; width: auto; }
.side__sec { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .38); padding: 14px 12px 6px; }
.side a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: rgba(255, 255, 255, .72);
  text-decoration: none; font-size: 13px; font-weight: 500; transition: .2s; position: relative;
}
.side a svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.side a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side a.on { background: rgba(0, 86, 180, .45); color: #fff; }
.side a.on::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--celeste); }
.side__pie { margin-top: auto; padding: 16px 12px 0; font-size: 11px; color: rgba(255, 255, 255, .38); border-top: 1px solid rgba(255, 255, 255, .08); }
.main { min-width: 0; padding: 28px 36px 60px; }
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.cab__eyebrow { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--azul); display: flex; align-items: center; gap: 10px; }
.cab h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; margin: 8px 0 6px; letter-spacing: -.02em; }
.cab p { margin: 0; color: var(--tinta-2); max-width: 760px; font-size: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 11px; padding: 11px 16px;
  font-weight: 600; font-size: 13px; background: var(--azul); color: #fff; transition: .2s; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--azul-osc); transform: translateY(-1px); }
.btn--sec { background: var(--blanco); color: var(--azul); border: 1px solid var(--linea); }
.btn--sec:hover { background: #EAF2FC; }
.btn--chico { padding: 7px 11px; font-size: 12px; border-radius: 9px; }
.btn svg { width: 16px; height: 16px; }

/* ================= PIEZAS ================= */
.g { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g6 { grid-template-columns: repeat(6, 1fr); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.g-3-2 { grid-template-columns: 3fr 2fr; }
.mt { margin-top: 18px; }
.mt2 { margin-top: 28px; }
.card { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: 20px; box-shadow: var(--sombra); position: relative; }
.card--osc { background: linear-gradient(140deg, var(--noche), var(--noche-2)); color: #fff; border-color: transparent; }
.card--osc .card__s { color: rgba(255, 255, 255, .6); }
.card--azul { background: linear-gradient(135deg, var(--azul-osc), var(--azul) 70%, var(--azul-2)); color: #fff; border-color: transparent; }
.card__t { font-weight: 700; font-size: 14.5px; margin: 0 0 3px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.card__s { color: var(--gris); font-size: 12.5px; margin: 0 0 14px; }
.h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -.01em; margin: 34px 0 4px; }
.h2 + .sub { color: var(--tinta-2); margin: 0 0 16px; font-size: 13.5px; }
.kpi { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.kpi__l { font-size: 11.5px; color: var(--gris); font-weight: 600; }
.kpi__v { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.15; margin: 4px 0 2px; color: var(--tinta); letter-spacing: -.01em; }
.kpi__n { font-size: 11.5px; color: var(--gris); }
.kpi__n.mal { color: var(--rojo); font-weight: 600; }
.kpi__n.bien { color: var(--verde); font-weight: 600; }
.kpi--osc { background: linear-gradient(140deg, var(--noche), var(--azul-osc)); border-color: transparent; color: #fff; }
.kpi--osc .kpi__v { color: #fff; } .kpi--osc .kpi__l, .kpi--osc .kpi__n { color: rgba(255, 255, 255, .62); }
.kpi svg.spark { position: absolute; right: 12px; bottom: 12px; width: 84px; height: 30px; opacity: .9; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.p-verde { background: var(--verde-2); color: #0B7A51; } .p-rojo { background: var(--rojo-2); color: #B3271F; }
.p-ambar { background: var(--ambar-2); color: #9A6400; } .p-azul { background: #E6F0FB; color: var(--azul); }
.p-gris { background: #EEF1F6; color: var(--tinta-2); }
.badge-real { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; }
.barra { height: 8px; border-radius: 99px; background: #E9EEF5; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--azul), var(--celeste)); width: 0; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.barra.crece i { width: var(--w); }
.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 9px 10px; border-bottom: 1px solid #EEF2F7; vertical-align: middle; }
.tabla tr:hover td { background: #F7FAFD; }
.tabla .der { text-align: right; }
.scroll-x { overflow-x: auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--linea); background: var(--blanco); border-radius: 99px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); transition: .2s; }
.chip:hover { border-color: var(--celeste); color: var(--azul); }
.chip.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.canvas-wrap { position: relative; height: 260px; }
.canvas-wrap.alto { height: 340px; }
.canvas-wrap.bajo { height: 200px; }
.nota { font-size: 11.5px; color: var(--gris); margin-top: 10px; }
.nota b { color: var(--tinta-2); }

/* reveal */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.rv.in { opacity: 1; transform: none; }

/* anillos */
.anillo { position: relative; width: 108px; height: 108px; margin: 0 auto; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 9; }
.anillo .fondo { stroke: #E9EEF5; }
.anillo .val { stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .8, .2, 1); }
.anillo b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 30px; font-weight: 500; }
.anillo + span { display: block; text-align: center; font-size: 12px; color: var(--tinta-2); margin-top: 8px; font-weight: 600; }

/* ================= DIAGNÓSTICO ================= */
.hall { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px; }
.hall__n { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--celeste); font-weight: 400; }
.hall__t { font-family: var(--serif); font-size: 21px; font-weight: 500; margin: 2px 0 8px; letter-spacing: -.01em; line-height: 1.2; }
.hall__ev { background: var(--fondo); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--tinta-2); margin: 10px 0; border-left: 3px solid var(--azul); }
.hall__ev code { font-size: 11.5px; background: #fff; border: 1px solid var(--linea); padding: 1px 5px; border-radius: 5px; color: var(--azul-osc); }
.hall__pie { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.hall__sol { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--azul); background: #EAF2FC; border-radius: 10px; padding: 8px 12px; text-decoration: none; border: 0; }
.hall__sol:hover { background: var(--azul); color: #fff; }
.hall--bien .hall__n { color: var(--verde); }
.hall--bien .hall__ev { border-left-color: var(--verde); }
.metric-mini { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.metric-mini div { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; }
.metric-mini b { font-family: var(--serif); font-size: 20px; font-weight: 500; display: block; line-height: 1.1; }
.metric-mini span { font-size: 11px; color: var(--gris); }
.metric-mini .mal b { color: var(--rojo); } .metric-mini .bien b { color: var(--verde); }

/* ================= INVENTARIO ================= */
.fr-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fr-card__foto { position: relative; height: 168px; background: #dfe7f1 center/cover; }
.fr-card__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6, 21, 43, .75)); }
.fr-card__foto .pill { position: absolute; top: 12px; left: 12px; z-index: 1; }
.fr-card__foto h3 { position: absolute; left: 16px; bottom: 10px; right: 16px; z-index: 1; margin: 0; color: #fff; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.1; }
.fr-card__foto small { display: block; font-family: var(--sans); font-size: 11.5px; opacity: .8; font-weight: 500; margin-top: 3px; }
.fr-card__c { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fr-card__fila { display: flex; justify-content: space-between; font-size: 12px; color: var(--tinta-2); gap: 8px; }
.fr-card__fila b { color: var(--tinta); }
.mapa { height: 420px; border-radius: 14px; overflow: hidden; background: #dfe7f1; z-index: 0; }
.mapa.alto { height: 560px; }
.leaflet-container { font-family: var(--sans) !important; }
.mk-fr { background: var(--azul); color: #fff; border: 3px solid #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 11px; box-shadow: 0 4px 14px rgba(0, 59, 125, .45); }
.leaflet-tooltip.tt { background: var(--noche); color: #fff; border: 0; border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.leaflet-tooltip.tt::before { display: none; }

/* ================= PLANO ================= */
.plano-lay { display: grid; grid-template-columns: 1fr 330px; gap: 18px; }
.ficha-lote { position: sticky; top: 20px; }
.ficha-lote__vacia { text-align: center; color: var(--gris); padding: 40px 10px; font-size: 13px; }
.ficha-lote__vacia svg { width: 42px; height: 42px; color: var(--celeste); margin-bottom: 10px; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-2); }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.aviso { display: flex; gap: 12px; align-items: flex-start; background: #EAF2FC; border: 1px solid #CFE0F5; color: var(--azul-osc); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; }
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.aviso--ambar { background: var(--ambar-2); border-color: #F3DDAA; color: #7A4F00; }

/* ================= SIMULADOR ================= */
.rango { width: 100%; accent-color: var(--azul); }
.campo { margin-bottom: 16px; }
.campo label { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--tinta-2); }
.campo label b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.sel { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linea); font: 600 13px var(--sans); background: #fff; color: var(--tinta); }
.opcion { border-radius: 16px; padding: 18px; border: 1px solid var(--linea); background: #fff; }
.opcion--azul { background: linear-gradient(140deg, var(--azul-osc), var(--azul)); color: #fff; border: 0; }
.opcion__t { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.opcion__v { font-family: var(--serif); font-size: 36px; font-weight: 500; line-height: 1.1; margin: 6px 0; }
.opcion__l { font-size: 12px; opacity: .75; display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(127, 127, 127, .18); }

/* ================= CRM ================= */
.embudo { display: flex; flex-direction: column; gap: 6px; }
.embudo__p { position: relative; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: #fff; font-weight: 600; font-size: 13px; margin: 0 auto; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); width: 0; overflow: hidden; white-space: nowrap; }
.embudo__p b { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.feed { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow: auto; }
.feed__i { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 12px; background: var(--fondo); font-size: 12.5px; animation: feedIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.feed__i small { color: var(--gris); font-size: 11px; }
.feed__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--azul); }
.feed__ico svg { width: 17px; height: 17px; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--azul); flex: none; }
.lead-row { cursor: pointer; }
.sla { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ================= PORTAL CLIENTE ================= */
.tel {
  width: 340px; max-width: 100%; margin: 0 auto; border-radius: 44px; padding: 12px; background: #0b0f17;
  box-shadow: 0 30px 60px -20px rgba(6, 21, 43, .55), inset 0 0 0 2px #2a3242;
}
.tel__pant { border-radius: 34px; overflow: hidden; background: var(--fondo); height: 680px; overflow-y: auto; position: relative; scrollbar-width: none; }
.tel__pant::-webkit-scrollbar { display: none; }
.tel__top { background: linear-gradient(150deg, var(--azul-osc), var(--azul)); color: #fff; padding: 46px 18px 54px; position: relative; }
.tel__top img { height: 24px; width: auto; }
.tel__isla { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; border-radius: 99px; background: #0b0f17; }
.tel__card { background: #fff; border-radius: 18px; margin: -38px 14px 12px; padding: 16px; box-shadow: var(--sombra-2); position: relative; }
.tel__sec { margin: 0 14px 12px; background: #fff; border-radius: 16px; padding: 14px; border: 1px solid var(--linea); }
.tel__sec h4 { margin: 0 0 10px; font-size: 13px; }
.tel__fila { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 8px 0; border-top: 1px solid #EEF2F7; gap: 10px; }
.tel__fila:first-of-type { border-top: 0; }
.serv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.serv button { border: 1px solid var(--linea); background: var(--fondo); border-radius: 12px; padding: 10px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--tinta); }
.serv button:hover { border-color: var(--celeste); background: #EAF2FC; }
.serv button svg { width: 18px; height: 18px; color: var(--azul); display: block; margin-bottom: 6px; }
.switch { width: 40px; height: 22px; border-radius: 99px; background: #CBD5E1; position: relative; border: 0; transition: .25s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .25s; }
.switch.on { background: var(--verde); }
.switch.on::after { left: 21px; }
.pasos { display: flex; gap: 4px; margin-top: 8px; }
.pasos i { flex: 1; height: 5px; border-radius: 4px; background: #E2E8F0; }
.pasos i.ok { background: var(--verde); }

/* ================= BITÁCORA ================= */
.log td { font-size: 12px; }
.log .ruta { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 11.5px; color: var(--azul-osc); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log .t { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--gris); white-space: nowrap; }
.wf { position: relative; height: 10px; background: #EEF2F7; border-radius: 4px; min-width: 140px; }
.wf i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--azul); }
.term { background: #04101F; color: #9FC3E8; border-radius: 14px; padding: 16px 18px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.7; max-height: 280px; overflow: auto; }
.term .ok { color: #3ddc97; } .term .w { color: #FFC857; } .term .d { color: #5d7898; }

/* ================= WEB / SEO ================= */
.ve { border-radius: 14px; border: 1px solid var(--linea); overflow: hidden; background: #fff; }
.ve__bar { background: #EEF2F7; padding: 8px 12px; font-size: 11.5px; color: var(--gris); display: flex; gap: 6px; align-items: center; }
.ve__bar i { width: 9px; height: 9px; border-radius: 50%; background: #CBD5E1; display: inline-block; }
.ve__c { padding: 16px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.65; color: var(--tinta-2); min-height: 260px; }
.ve__c span { overflow-wrap: anywhere; }
.ve__c .mal { background: var(--rojo-2); color: #B3271F; padding: 0 4px; border-radius: 4px; }
.ve__c .bien { background: var(--verde-2); color: #0B7A51; padding: 0 4px; border-radius: 4px; }
.ok-x { font-weight: 800; }
.ok-x.si { color: var(--verde); } .ok-x.no { color: var(--rojo); } .ok-x.med { color: var(--ambar); }
.cwv { display: grid; grid-template-columns: 110px 1fr 70px; gap: 12px; align-items: center; font-size: 12.5px; padding: 8px 0; border-top: 1px solid #EEF2F7; }
.cwv:first-child { border-top: 0; }
.cwv__b { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #12A06B 0 33%, #E39B12 33% 66%, #D9433A 66%); opacity: .25; }
.cwv__m { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 3px; background: var(--tinta); transition: left 1.4s cubic-bezier(.2, .8, .2, 1); left: 0; }
.cwv__w { position: relative; }

/* ================= PROPUESTA ================= */
.fase { position: relative; padding: 22px; }
.fase__n { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--celeste-2); position: absolute; right: 18px; top: 12px; }
.fase__d { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.fase h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 6px 0 12px; }
.fase ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--tinta-2); }
.fase li { margin-bottom: 6px; }
.sig { background: linear-gradient(135deg, #B3271F, var(--rojo)); color: #fff; border: 0; }
.sig h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 4px 0 8px; }
.sig .btn { background: #fff; color: #B3271F; }
.honest { margin-top: 36px; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px dashed #C9D6E6; font-size: 12px; color: var(--tinta-2); }
.honest b { color: var(--tinta); }
.pie-index { margin-top: 18px; font-size: 11.5px; color: var(--gris); text-align: center; }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 30px); opacity: 0; background: var(--noche); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13px; z-index: 120; transition: .35s; box-shadow: var(--sombra-2); display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* menú móvil */
.menu-btn { display: none; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1280px) {
  .hub__kpis { grid-template-columns: repeat(3, 1fr); }
  .g6 { grid-template-columns: repeat(3, 1fr); }
  .plano-lay { grid-template-columns: 1fr 300px; }
}
@media (max-width: 1100px) {
  .hub__grid { grid-template-columns: repeat(2, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .g-2-1, .g-1-2, .g-3-2 { grid-template-columns: 1fr; }
  .plano-lay { grid-template-columns: 1fr; }
  .ficha-lote { position: static; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 60; width: 260px; transform: translateX(-100%); transition: transform .3s; left: 0; top: 0; }
  .side.abierto { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .menu-btn { display: inline-flex; position: fixed; top: 12px; left: 12px; z-index: 55; background: var(--noche); color: #fff; border: 0; border-radius: 11px; padding: 10px 12px; font-weight: 600; font-size: 12.5px; gap: 6px; align-items: center; box-shadow: var(--sombra-2); }
  .main { padding: 64px 16px 48px; }
  .hub__hero { padding: 20px 16px 100px; }
  .hub__grid { padding: 0 16px 28px; grid-template-columns: 1fr; }
  .mod--osc { grid-column: auto; }
  .hub__pie { padding: 8px 16px 28px; }
  .hub__kpis { grid-template-columns: repeat(2, 1fr); }
  .g2, .g3, .g4, .g6 { grid-template-columns: 1fr 1fr; }
  .hall { grid-template-columns: 1fr; gap: 6px; padding: 18px; }
  .hall__n { font-size: 34px; }
  .mapa.alto { height: 440px; }
  .cwv { grid-template-columns: 90px 1fr 60px; }
}
@media (max-width: 520px) {
  .g2, .g3, .g4, .g6 { grid-template-columns: 1fr; }
  .g2.kp, .g4.kp, .g6.kp { grid-template-columns: 1fr 1fr; }
  .hub__top img { height: 34px; }
  .chip-real { font-size: 10.5px; padding: 6px 9px; }
  .pin__cajas input { width: 52px; height: 62px; }
  .kpi__v { font-size: 25px; }
  .tel__pant { height: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================= RECORRIDO GUIADO ================= */
.tour-velo { position: fixed; inset: 0; z-index: 80; background: rgba(6, 21, 43, .72); opacity: 0; pointer-events: none; transition: opacity .3s; }
.tour-velo.on { opacity: 1; pointer-events: auto; }
.tour-spot { position: fixed; z-index: 81; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(6, 21, 43, .72), 0 0 0 3px var(--celeste); pointer-events: none; opacity: 0; transition: top .35s, left .35s, width .35s, height .35s, opacity .3s; top: -9999px; }
.tour-card { position: fixed; z-index: 82; top: -9999px; width: 380px; max-width: calc(100vw - 32px); background: #fff; border-radius: 16px; box-shadow: var(--sombra-2); padding: 16px 18px; animation: fadeUp .35s cubic-bezier(.2, .8, .2, 1); }
.tour-card--centro { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-card__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tour-card__n { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.tour-card__x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--fondo); color: var(--tinta-2); font-size: 17px; line-height: 1; display: grid; place-items: center; }
.tour-card h4 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; letter-spacing: -.01em; }
.tour-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--tinta-2); }
.tour-card__barra { height: 5px; border-radius: 99px; background: var(--fondo); margin: 14px 0 12px; overflow: hidden; }
.tour-card__barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--azul), var(--celeste)); transition: width .4s; }
.tour-card__btns { display: flex; gap: 8px; justify-content: flex-end; }
.tour-invita { position: fixed; inset: 0; z-index: 85; background: rgba(6, 21, 43, .6); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); }
.tour-invita__box { background: #fff; border-radius: 20px; padding: 26px 26px 22px; width: min(440px, 100%); text-align: center; box-shadow: var(--sombra-2); animation: fadeUp .4s cubic-bezier(.2, .8, .2, 1); }
.tour-invita__emb { width: 56px; height: 56px; margin: 0 auto 12px; }
.tour-invita h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; }
.tour-invita p { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--tinta-2); }
.tour-invita .tour-card__btns { justify-content: center; }
.btn-tour { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(125, 178, 225, .35); }
.btn-tour:hover { background: rgba(255, 255, 255, .18); }
.side a.side__tour { margin-top: 10px; background: rgba(125, 178, 225, .12); color: #fff; }
@media (max-width: 860px) { .tour-card { width: calc(100vw - 32px); } .tour-spot { border-radius: 12px; } .hub__acc { flex-wrap: wrap; justify-content: flex-end; } }