/* ============================================================
   Detalles de plano — Ingeniería Lanzarote
   El vocabulario de las láminas del logo llevado a la web.
   Regla: las cotas miden datos reales (años, plazos), nunca
   medidas inventadas. Un detalle como mucho por pantalla.
   Todo es decorativo: va con aria-hidden en el HTML.
   ============================================================ */

/* --- Cota horizontal -----------------------------------------
   <div class="cota" aria-hidden="true"><span>texto</span></div>
   Líneas de referencia (bordes), línea de cota (::before) y
   trazos oblicuos a 45° en los extremos (::after), como el kit. */
.cota{
  --fondo-cota:var(--papel);
  position:relative;height:22px;color:var(--azul);
  border-inline:1.3px solid currentColor;
}
.cota::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  border-top:1.3px solid currentColor;
}
.cota::after{
  content:"";position:absolute;left:-7px;right:-7px;top:calc(50% - 6px);height:12px;
  background:
    linear-gradient(135deg,transparent calc(50% - .8px),currentColor 0 calc(50% + .8px),transparent 0) left /12px 12px no-repeat,
    linear-gradient(135deg,transparent calc(50% - .8px),currentColor 0 calc(50% + .8px),transparent 0) right/12px 12px no-repeat;
}
.cota > span{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--fondo-cota);padding:0 12px;white-space:nowrap;
  font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--azul-2);
}
.cota-trayectoria{margin-top:clamp(40px,6vw,64px)}
.cota-trayectoria + .trayectoria{margin-top:18px}
.cota-pasos{margin-top:28px;width:calc(50% - clamp(18px,2.4vw,32px) / 2)}
.cota-pasos + .pasos{margin-top:14px}
.cota-kv{width:calc(100% - 28px);margin-bottom:14px;height:18px}
.cota-kv > span{font-size:11.5px;padding:0 8px}

/* --- Eje de replanteo: burbuja con letra + trazo y punto ------ */
.eje{display:flex;align-items:center;margin-bottom:22px}
.eje span{
  flex:0 0 32px;height:32px;border-radius:50%;
  border:1.3px solid var(--azul-2);color:var(--azul-2);
  display:grid;place-items:center;font:500 13px/1 var(--mono);
}
.eje::after{
  content:"";flex:1;height:1px;margin-left:10px;
  background:repeating-linear-gradient(90deg,var(--celeste) 0 10px,transparent 0 14px,var(--celeste) 0 16px,transparent 0 20px);
}
.obra .eje span,.galeria .eje span{border-color:var(--celeste);color:var(--celeste-texto)}

/* --- Coordenadas sobre el titular ----------------------------- */
.coord{
  font:500 13px/1.4 var(--mono);letter-spacing:.12em;color:var(--azul-2);
  margin-bottom:22px;display:flex;align-items:center;gap:12px;
}
.coord::before{content:"";flex:0 0 9px;height:7px;background:var(--rojo)}

/* --- Replanteo: ejes y circunferencia al pasar por un dibujo -- */
.lienzo,.lam{position:relative}
.replanteo{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease}
.replanteo::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,var(--celeste) 0 10px,transparent 0 14px,var(--celeste) 0 16px,transparent 0 20px) center/100% 1px no-repeat,
    repeating-linear-gradient(180deg,var(--celeste) 0 10px,transparent 0 14px,var(--celeste) 0 16px,transparent 0 20px) center/1px 100% no-repeat;
}
.replanteo::after{
  content:"";position:absolute;left:50%;top:50%;height:78%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.9);transition:transform .5s ease;
  border:1.3px dotted var(--celeste);border-radius:50%;
}
.caso:hover .replanteo,.caso:focus-visible .replanteo,
.par:hover .replanteo,.par:focus-visible .replanteo,
.laminas figure:hover .replanteo{opacity:.9}
.caso:hover .replanteo::after,.par:hover .replanteo::after,
.laminas figure:hover .replanteo::after{transform:translate(-50%,-50%) scale(1)}

/* --- Cajetín de plano en el pie ------------------------------- */
.cajetin{
  margin-top:clamp(36px,5vw,56px);
  display:grid;grid-template-columns:2fr 1.5fr 2fr 1fr 1fr 1.1fr;
  gap:1px;background:rgba(169,203,238,.3);border:1px solid rgba(169,203,238,.3);
}
.cajetin div{padding:12px 14px;background:var(--azul-noche)}
.cajetin small{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--celeste);margin-bottom:7px}
.cajetin b{font:500 14px/1.25 var(--mono);color:var(--papel)}
.cajetin .c-desde b::before{content:"";display:inline-block;width:8px;height:6px;
  background:var(--rojo-vivo);margin-right:8px;vertical-align:.12em}

/* --- Lámina del héroe (portada) -------------------------------
   SVG generado por herramientas/lamina_hero.py                  */
.hero-lamina{margin:0;align-self:center}
.lamina-hero{width:100%;height:auto;display:block;overflow:visible}
.lamina-hero .lh-construccion,.lamina-hero .lh-cotas{
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.lamina-hero .lh-construccion{transform:translate(calc(var(--mx,0) * -10px),calc(var(--my,0) * -10px))}
.lamina-hero .lh-cotas{transform:translate(calc(var(--mx,0) * 4px),calc(var(--my,0) * 4px))}
.lamina-hero .lh-pilar-in{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.hero-lamina:hover .lh-pilar-in{transform:translateY(-12px)}

@media (prefers-reduced-motion:no-preference){
  .js .lamina-hero .lh-circulo{transform-box:fill-box;transform-origin:center;
    animation:lh-gira 1.6s cubic-bezier(.2,.7,.2,1) both}
  .js .lamina-hero .lh-eje{transform-box:fill-box;transform-origin:center;
    animation:lh-eje-h 1s .15s cubic-bezier(.6,0,.2,1) both}
  .js .lamina-hero .lh-eje-v{animation-name:lh-eje-v}
  .js .lamina-hero .lh-terreno{animation:lh-entra .7s .35s ease-out both}
  .js .lamina-hero .lh-trazo{stroke-dasharray:1;animation:lh-traza 1.1s .5s cubic-bezier(.6,0,.2,1) both}
  .js .lamina-hero .lh-ele .lh-trazo{animation-delay:.75s}
  .js .lamina-hero .lh-lado{animation:lh-aparece .6s 1.25s ease-out both}
  .js .lamina-hero .lh-relleno{animation:lh-aparece .7s 1.35s ease-out both}
  .js .lamina-hero .lh-pilar{animation:lh-cae .8s 1.9s cubic-bezier(.3,1.35,.5,1) both}
  .js .lamina-hero .lh-cotas{animation:lh-aparece .8s 2.4s ease-out both}
  .js .lamina-hero .lh-rotulos{animation:lh-aparece .8s 2.6s ease-out both}
  .js .lamina-hero .lh-norte{animation:lh-norte 1.4s 2.6s cubic-bezier(.3,1.5,.5,1) both}
}
@keyframes lh-gira{from{opacity:0;transform:rotate(-60deg) scale(.86)}}
@keyframes lh-eje-h{from{transform:scaleX(0)}}
@keyframes lh-eje-v{from{transform:scaleY(0)}}
@keyframes lh-entra{from{opacity:0;transform:translateX(-24px)}}
@keyframes lh-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lh-aparece{from{opacity:0}}
@keyframes lh-cae{0%{opacity:0;transform:translateY(-150px)}30%{opacity:1}100%{transform:none}}
@keyframes lh-norte{from{opacity:0;transform:rotate(-120deg)}}

/* --- Se dibujan al entrar en pantalla ------------------------- */
/* El trazo de arranque queda visible: así el navegador detecta el elemento */
.js .dibuja{clip-path:inset(-10px calc(100% - 14px) -10px -10px);
  transition:clip-path 1.1s cubic-bezier(.6,0,.2,1)}
.js .dibuja.visto{clip-path:inset(-10px)}
@media (prefers-reduced-motion:reduce){.js .dibuja{clip-path:none;transition:none}}

/* --- Responsive ----------------------------------------------- */
@media (max-width:1000px){
  .cota-pasos{width:100%}
}
@media (max-width:900px){
  .cajetin{grid-template-columns:1fr 1fr;grid-template-areas:
    "proy proy" "plano hoja" "sit sit" "esc desde"}
  .c-proy{grid-area:proy}.c-plano{grid-area:plano}.c-sit{grid-area:sit}
  .c-esc{grid-area:esc}.c-hoja{grid-area:hoja}.c-desde{grid-area:desde}
}
@media (max-width:760px){
  .coord{font-size:12px;letter-spacing:.08em}
  .coord-lugar{display:none}
  .cota > span{font-size:11px;letter-spacing:.05em;padding:0 8px}
  .cota-pasos{display:none}
  .eje{margin-bottom:16px}
  .eje span{flex-basis:28px;height:28px;font-size:12px}
  .cajetin b{font-size:13px}
  .cajetin div{padding:10px 12px}
  /* La lámina se encoge: cifras más grandes y fuera los rótulos (queda el norte) */
  .lamina-hero .lh-cotas{font-size:20px}
  .lamina-hero .lh-rotulos > text{display:none}
}