/* ============ CONCRETA LAB · 360 + mockup personalizable + secciones lab/etapa ============ */

/* botón mono (compartido; idéntico al de estudio.css — duplicado inocuo si cargan ambos) */
.est-btn{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink); border-radius:999px; padding:7px 13px;
  transition:background .18s,color .18s; }
.est-btn:hover{ background:var(--ink); color:var(--paper); }
.est-btn.on{ background:var(--ink); color:var(--paper); }
.est-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- visor 360 ---------- */
.pano{ border:1.5px solid var(--ink); border-radius:var(--r,24px); overflow:hidden; background:#0D0D0D; display:flex; flex-direction:column; }
.pano, .pano *{ box-sizing:border-box; min-width:0; min-height:0; }
.pano-canvas{ position:relative; flex:1; aspect-ratio:16/10; min-height:260px; }
.pano-canvas canvas{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.pano-canvas canvas:active{ cursor:grabbing; }
.pano:fullscreen{ border:none; border-radius:0; }
.pano:fullscreen .pano-canvas{ aspect-ratio:auto; }
.pano-chips{ display:flex; gap:8px; padding:10px 12px; border-top:1.5px solid var(--ink); background:var(--paper); overflow-x:auto; scrollbar-width:none; }
.pano-chips::-webkit-scrollbar{ display:none; }
.pano-chips .est-btn{ flex:none; }
.pano-hint{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); pointer-events:none; white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.42); border-radius:999px; padding:7px 14px; transition:opacity .4s; }
.pano-hint.off{ opacity:0; }
.pano-load{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#fff; }
.pano-load.on{ display:block; }
.pano-gate{ position:absolute; inset:0; display:none; place-items:center; background:rgba(0,0,0,.22); cursor:pointer; border:0; }
.pano-gate span{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; background:#fff; color:#0A0A0A; padding:12px 20px; border-radius:999px; }
.pano-gate.show{ display:grid; }
.pano-free{ position:absolute; left:10px; top:10px; display:none; z-index:3; border-color:#fff; color:#fff; }
.pano-free.show{ display:inline-flex; }
.pano-free:hover{ background:#fff; color:#0A0A0A; }
.pano-fs{ position:absolute; right:10px; top:10px; width:40px; height:40px; border-radius:50%; border:1.5px solid #fff;
  background:rgba(0,0,0,.3); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .18s; }
.pano-fs:hover{ background:rgba(0,0,0,.6); }
.pano-fs svg{ width:16px; height:16px; }
.pano-fs:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- mockup personalizable ---------- */
.mock{ --mk-acc:var(--accent); }
.mock, .mock *{ box-sizing:border-box; min-width:0; min-height:0; }
.mk-inrow{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.mk-in{ flex:1; min-width:220px; font-family:var(--font); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(18px,2.4vw,26px); color:var(--ink); background:transparent; border:0; border-bottom:2.5px solid var(--ink);
  border-radius:0; padding:10px 2px; outline:none; }
.mk-in::placeholder{ color:var(--muted); font-weight:600; }
.mk-in:focus-visible{ border-bottom-color:var(--mk-acc); }
.mk-grid{ margin-top:26px; display:flex; flex-direction:column; gap:18px; }
.mk-row{ display:grid; gap:18px; }
/* columnas proporcionadas a los aspect-ratios → las alturas de cada fila casan exactas */
.mk-row.r1{ grid-template-columns:1.94fr 1fr; }   /* lona 16/11 + brochure 3/4 */
.mk-row.r2{ grid-template-columns:1.45fr 1fr; }   /* web 16/11 + post 1/1 */
.mock.mini .mk-grid{ gap:14px; }
.mock.mini .mk-row{ gap:14px; }
.mk{ position:relative; margin:0; border:1.5px solid var(--ink); border-radius:var(--r,24px); overflow:hidden; background:var(--paper); }
.mk-cap{ position:absolute; left:10px; bottom:10px; z-index:2; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; background:rgba(255,255,255,.88); color:var(--ink); border-radius:999px; padding:5px 11px; }
.mk .nm{ display:block; font-weight:900; letter-spacing:-.02em; line-height:1; white-space:nowrap; }
/* container-type de los marcos del nombre (el escalado cqw vive ABAJO, tras las reglas base) */
.mk-banner,.mk-arch,.mk-browser .hero,.mk-sq{ container-type:inline-size; }

/* lona sobre el render real de obra */
.mk-lona{ aspect-ratio:16/11; background:url('img/exterior.jpg') center/cover no-repeat; }
.mk-banner{ position:absolute; right:6%; top:14%; width:56%; background:#fff; color:var(--ink); border:1.5px solid var(--ink);
  padding:clamp(10px,2.2vw,20px); transform:perspective(700px) rotateY(-13deg) rotateZ(.6deg);
  display:flex; flex-direction:column; gap:6px; }
.mk-banner::after{ content:""; position:absolute; left:8px; right:8px; top:-7px; height:0; border-top:2.5px dashed rgba(10,10,10,.35); }
.mk-banner .pv{ font-family:var(--mono); font-size:clamp(8px,1vw,10px); letter-spacing:.3em; text-transform:uppercase; color:var(--mk-acc); font-weight:700; }
.mk-banner .nm{ font-size:clamp(15px,2.4vw,30px); }
.mk-banner .ph2{ font-family:var(--mono); font-size:clamp(7.5px,.9vw,9.5px); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* portada de brochure */
.mk-bro{ aspect-ratio:3/4; }
.mk-arch{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:78%; height:88%;
  background:var(--mk-acc); border-radius:999px 999px 0 0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center; padding:18px 12px; color:var(--ink); }
.mk-arch .mono{ width:32%; color:rgba(10,10,10,.85); }
.mk-arch .nm{ font-size:clamp(15px,2vw,26px); max-width:92%; }
.mk-arch .tag{ font-family:var(--mono); font-size:clamp(7px,.8vw,8.5px); letter-spacing:.22em; text-transform:uppercase; color:rgba(10,10,10,.72); }
.mk-arch .bcta{ margin-top:6px; font-family:var(--mono); font-size:clamp(7.5px,.9vw,9px); letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:#fff; border-radius:999px; padding:6px 13px; }
.mk-arch .bar{ display:none; }

/* sitio web */
.mk-web{ aspect-ratio:16/11; }
.mk-browser{ position:absolute; inset:8% 8% 0; border:1.5px solid var(--ink); border-bottom:0; border-radius:14px 14px 0 0; overflow:hidden; background:var(--paper); }
.mk-browser .bar2{ height:30px; display:flex; align-items:center; gap:5px; padding:0 10px; border-bottom:1.5px solid var(--ink); }
.mk-browser .bar2 i{ width:8px; height:8px; border-radius:50%; border:1.4px solid var(--ink); }
.mk-browser .url{ margin-left:8px; font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--hair-soft); border-radius:999px; padding:2.5px 10px; }
.mk-browser .hero{ position:absolute; inset:30px 0 0; background:var(--mk-acc); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; text-align:center; padding:10px; color:var(--ink); }
.mk-browser .pv{ font-family:var(--mono); font-size:clamp(7.5px,.9vw,9px); letter-spacing:.3em; text-transform:uppercase; color:rgba(10,10,10,.72); }
.mk-browser .nm{ font-size:clamp(16px,2.2vw,30px); }
.mk-browser .chip{ background:var(--ink); color:#fff; border-radius:999px; padding:6px 14px; font-size:clamp(8.5px,1vw,11px); font-weight:700; }

/* post cuadrado */
.mk-ig{ aspect-ratio:1/1; }
.mk-sq{ position:absolute; inset:8%; background:var(--mk-acc); border-radius:10px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:14px; color:var(--ink); }
.mk-sq .mono{ width:28%; color:rgba(10,10,10,.85); }
.mk-sq .tag{ font-family:var(--mono); font-size:clamp(7.5px,.9vw,9px); letter-spacing:.26em; text-transform:uppercase; color:rgba(10,10,10,.72); }
.mk-sq .nm{ font-size:clamp(16px,2.2vw,28px); max-width:92%; }
.mk-sq .hand{ font-family:var(--mono); font-size:clamp(8px,1vw,10px); letter-spacing:.1em; color:rgba(10,10,10,.66); }

/* el nombre SIEMPRE cabe: escala por ancho de contenedor y nº de caracteres (--nlen del JS).
   DEBE ir DESPUÉS de las reglas base .nm — misma especificidad, la última gana (bug 2026-07-22:
   este bloque vivía arriba y las bases lo pisaban → nombres recortados). */
.mk-banner .nm{ font-size:min(clamp(15px,2.4vw,30px), calc(148cqw / var(--nlen,8))); }
.mk-arch .nm{ font-size:min(clamp(15px,2vw,26px), calc(128cqw / var(--nlen,8))); }
.mk-browser .nm{ font-size:min(clamp(16px,2.2vw,30px), calc(130cqw / var(--nlen,8))); }
.mk-sq .nm{ font-size:min(clamp(16px,2.2vw,28px), calc(128cqw / var(--nlen,8))); }

@media (max-width:700px){
  .mk-row.r1,.mk-row.r2{ grid-template-columns:1fr; }
}

/* ---------- sección LAB (index) ---------- */
.lab{ padding:clamp(70px,11vh,120px) var(--pad); }
.lab h2{ font-size:clamp(34px,5vw,68px); font-weight:900; letter-spacing:-.025em; line-height:1; max-width:16ch; }
.lab .labsub{ margin-top:14px; font-size:17px; line-height:1.6; color:var(--body); max-width:52ch; }
.labgrid{ margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.labcell.wide{ grid-column:1/-1; }
.labhead{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.labhead h3{ font-size:clamp(20px,2.4vw,28px); font-weight:900; letter-spacing:-.015em; }
.labhead h3 small{ display:block; font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.labhead a{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--body); border-bottom:1.5px solid var(--ink); padding-bottom:2px; }
.labhead a:hover{ color:var(--ink); }
@media (max-width:900px){ .labgrid{ grid-template-columns:1fr; } }

/* ---------- sección ETAPA (te llevamos de la mano) ---------- */
.etapa{ background:var(--ink); color:#fff; padding:clamp(70px,12vh,130px) var(--pad); }
.etapa h2{ font-size:clamp(34px,5vw,68px); font-weight:900; letter-spacing:-.025em; line-height:1; max-width:18ch; }
.etapa .esub{ margin-top:14px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.85); max-width:50ch; }
.etapa .chips{ margin-top:34px; display:flex; gap:10px; flex-wrap:wrap; }
.etapa .chips button{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  border:1.5px solid #fff; border-radius:999px; background:transparent; color:#fff; padding:12px 20px; transition:background .18s,color .18s; }
.etapa .chips button:hover{ background:rgba(255,255,255,.16); }
.etapa .chips button.on{ background:#fff; color:#0A0A0A; }
.etapa .chips button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.etapa .panel{ margin-top:36px; border-top:1px solid rgba(255,255,255,.22); padding-top:34px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; }
.etapa .panel h3{ font-size:clamp(24px,3vw,40px); font-weight:900; letter-spacing:-.02em; line-height:1.06; }
.etapa .panel .diag{ margin-top:14px; font-size:17px; line-height:1.62; color:rgba(255,255,255,.85); max-width:52ch; }
.etapa .ruta{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.etapa .ruta li{ padding:14px 0; border-top:1px solid rgba(255,255,255,.16); font-size:16px; line-height:1.55; color:rgba(255,255,255,.85); }
.etapa .ruta li:first-child{ border-top:0; }
.etapa .ruta b{ color:#fff; font-weight:700; }
.etapa .ruta .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.55); margin-right:10px; }
.etapa .panel .cta2{ margin-top:24px; }
.etapa .ruta a{ border-bottom:1.5px solid currentColor; padding-bottom:1px; }
.etapa .ruta a:hover{ color:#fff; }
@media (max-width:900px){ .etapa .panel{ grid-template-columns:1fr; } }

/* ---------- CONCRETA CAD (plano vivo) ---------- */
.cad{ border:1.5px solid var(--ink); border-radius:var(--r,24px); overflow:hidden; display:flex; flex-direction:column; background:var(--paper); }
.cad, .cad *{ box-sizing:border-box; min-width:0; min-height:0; }
.cad-top{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1.5px solid var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; flex-wrap:wrap; }
.cad-top .sp{ flex:1; }
.cad-file{ display:flex; align-items:center; gap:8px; color:var(--body); }
.cad-file .dot{ width:8px; height:8px; border-radius:50%; background:var(--leaf); flex:none; }
.cad-layers{ display:flex; gap:8px; padding:10px 12px; border-bottom:1.5px solid var(--ink); overflow-x:auto; scrollbar-width:none; }
.cad-layers::-webkit-scrollbar{ display:none; }
.cad-chip{ display:inline-flex; align-items:center; gap:7px; flex:none; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  border-radius:999px; padding:7px 12px; opacity:.45; transition:opacity .15s,background .15s; }
.cad-chip.on{ opacity:1; }
.cad-chip:hover{ background:rgba(10,10,10,.06); }
.cad-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cad-chip .d{ width:10px; height:10px; border-radius:50%; }
.d-muros{ background:var(--ink); } .d-puertas{ background:var(--accent); } .d-muebles{ background:rgba(10,10,10,.45); }
.d-cotas{ background:var(--aqua); } .d-inst{ background:var(--rose); } .d-textos{ background:var(--sun); border:1px solid rgba(10,10,10,.25); }
.cad-view{ position:relative; aspect-ratio:16/10; min-height:300px; background:#0D0D0D; touch-action:none; cursor:grab; }
.cad-view:active{ cursor:grabbing; }
.cad-svg{ display:block; width:100%; height:100%; }
.cad-cmd{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; padding:9px 14px; border-top:1.5px solid var(--ink);
  background:#0D0D0D; color:var(--leaf); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cad-hint{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); pointer-events:none; white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.45); border-radius:999px; padding:7px 14px; transition:opacity .4s; }
.cad-hint.off{ opacity:0; }
.cad-gate{ position:absolute; inset:0; display:none; place-items:center; background:rgba(0,0,0,.22); cursor:pointer; border:0; }
.cad-gate span{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; background:#fff; color:#0A0A0A; padding:12px 20px; border-radius:999px; }
.cad-gate.show{ display:grid; }
.cad-free{ position:absolute; left:10px; top:10px; display:none; z-index:3; border-color:#fff; color:#fff; }
.cad-free.show{ display:inline-flex; }
/* colores de capa · espacio MODELO (oscuro) */
.cad .ly-muros{ stroke:#F2F2ED; stroke-width:2.4; }
.cad .ly-puertas{ stroke:var(--accent); stroke-width:2; }
.cad .ly-muebles{ stroke:rgba(255,255,255,.6); }
.cad .ly-cotas{ stroke:var(--aqua); }
.cad .ly-cotas .cota-t{ fill:var(--aqua); stroke:none; font:400 24px var(--mono); letter-spacing:.08em; text-anchor:middle; }
.cad .ly-inst{ stroke:var(--rose); }
.cad .ly-textos text{ fill:var(--sun); stroke:none; font:400 19px var(--mono); letter-spacing:.18em; text-anchor:middle; }
.cad .ly-textos .room-a{ font-size:14px; opacity:.75; }
/* espacio PAPEL (blanco) */
.cad.paper .cad-view{ background:#FDFDFB; }
.cad.paper .ly-muros{ stroke:#0A0A0A; }
.cad.paper .ly-muebles{ stroke:rgba(10,10,10,.55); }
.cad.paper .ly-cotas{ stroke:#159A96; } .cad.paper .ly-cotas .cota-t{ fill:#159A96; }
.cad.paper .ly-textos text{ fill:rgba(10,10,10,.8); }
.cad.paper .cad-cmd{ background:#FDFDFB; color:#159A96; }
.cad.paper .cad-hint{ color:#0A0A0A; background:rgba(255,255,255,.75); }

/* línea de diagnóstico en las cards de servicio (index) */
.svc .fit{ display:block; font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(10,10,10,.62); margin-bottom:9px; }
.svc.dark .fit{ color:rgba(255,255,255,.6); }

/* ---- pano v2 PRO: hotspots navegables + giroscopio ---- */
.pano-hots{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.pano-hot{ position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:8px; pointer-events:auto; cursor:pointer;
  border:0; background:rgba(10,10,10,.55); color:#fff; border-radius:999px; padding:8px 14px 8px 8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity .25s, background .18s; opacity:0; }
.pano-hot:hover{ background:rgba(10,10,10,.82); }
.pano-hot i{ width:22px; height:22px; border-radius:50%; border:1.5px solid #fff; position:relative; flex:none; }
.pano-hot i::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; animation:panoPulse 2s ease-out infinite; }
@keyframes panoPulse{ 0%{ transform:scale(.7); opacity:1; } 70%{ transform:scale(1.25); opacity:.45; } 100%{ transform:scale(.7); opacity:1; } }
.pano-hot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pano-gyro{ position:absolute; right:10px; top:58px; width:40px; height:40px; border-radius:50%; border:1.5px solid #fff;
  background:rgba(0,0,0,.35); color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
.pano-gyro.show{ display:inline-flex; }
.pano-gyro.on{ background:#fff; color:#0A0A0A; }
.pano-gyro svg{ width:16px; height:16px; }
.pano-gyro:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .pano-hot i::after{ animation:none; } }

/* ── EL BOTÓN «ENTRAR» PALPITA ─────────────────────────────────────────────────────────────
   Samuel 2026-08-11: «el botón de entrar debe de palpitar para que invite al usuario a
   picarle». Sobre un render a pantalla completa, un botón quieto se lee como parte de la
   imagen; el latido es lo que dice «esto se toca».
   Dos capas: el botón respira muy poco (1 → 1.035, nada de rebote) y un aro sale de su borde y
   se desvanece. El aro es un pseudo-elemento con BORDE, no una sombra: la regla del sitio es
   sin sombras, y un halo difuso además ensuciaría el render.
   Va en esta hoja y no en index.html porque ese archivo lo está editando otro agente; y no en
   la hoja del panel, que se carga tarde —cuando el visitante llega aquí ya tiene que latir.
   El `transform` respeta el centrado que ya trae el botón (translateX(-50%)). */
#svc-360 .dp-entrar{ animation:dpLate 2.6s cubic-bezier(.4,0,.6,1) 1.2s infinite; }
#svc-360 .dp-entrar::after{ content:''; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--blue, #0071E3); opacity:0; pointer-events:none;
  animation:dpAro 2.6s cubic-bezier(.2,.6,.4,1) 1.2s infinite; }
#svc-360 .dp-entrar:hover{ animation:none; }
#svc-360 .dp-entrar:hover::after{ animation:none; opacity:0; }
@keyframes dpLate{
  0%, 62%, 100% { transform:translateX(-50%) scale(1); }
  76%           { transform:translateX(-50%) scale(1.035); }
}
@keyframes dpAro{
  0%, 58% { transform:scale(1);    opacity:0; }
  70%     { opacity:.55; }
  100%    { transform:scale(1.28); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  #svc-360 .dp-entrar, #svc-360 .dp-entrar::after{ animation:none !important; }
}