/* ==========================================================
   BIM INGEZA — Cabeceras claras con lienzo técnico (js/lienzo-tecnico.js)
   y franjas finales claras en las páginas internas.
   Se carga DESPUÉS de estilos.css: aquí solo se ajustan .heroe y .franja-cta.
   La portada (index.html) no tiene .heroe y su franja final conserva el cielo.
   ========================================================== */

:root {
  --oro-tinta: #A86F00;   /* dorado oscuro para letras sobre blanco (contraste AA en títulos) */
}

/* ---------- Cabecera de las páginas internas ---------- */
.heroe {
  color: var(--tinta);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 56%, var(--fondo-suave) 100%);
  border-bottom: 1px solid var(--borde);
  padding: clamp(40px, 6.5vh, 76px) 0 clamp(36px, 6vh, 64px);
}
/* Las fotos ya no van de fondo en la cabecera (se ven en la galería de cada página) */
.heroe-foto::before,
.heroe-foto::after { content: none; }
.heroe .etiqueta { display: none; }

.heroe h1 {
  color: var(--tinta);
  font-size: clamp(2rem, 3.7vw, 3.15rem);
  max-width: 16ch;
}
.heroe h1 span { color: var(--oro-tinta); }
.heroe p {
  color: var(--texto-2);
  max-width: 50ch;
  margin: 18px 0 28px;
}

/* Texto a la izquierda, dibujo a la derecha */
.heroe-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
}
.heroe-texto { min-width: 0; }

/* Botón de contorno sobre fondo claro (cabeceras y franjas internas) */
.heroe .boton-contorno-claro,
body:not([data-pagina="inicio"]) .franja-cta .boton-contorno-claro {
  border-color: rgba(10, 18, 48, 0.2);
  background: transparent;
  color: var(--tinta);
}
@media (hover: hover) and (pointer: fine) {
  .heroe .boton-contorno-claro:hover,
  body:not([data-pagina="inicio"]) .franja-cta .boton-contorno-claro:hover { border-color: var(--tinta); background: transparent; }
}

/* ---------- Franja final clara (todas menos la portada) ---------- */
body:not([data-pagina="inicio"]) .franja-cta {
  color: var(--tinta);
  background: var(--fondo-suave);
  border-top: 1px solid var(--borde);
}
body:not([data-pagina="inicio"]) .franja-cta h2 { color: var(--tinta); }
body:not([data-pagina="inicio"]) .franja-cta h2 span { color: var(--oro-tinta); }
body:not([data-pagina="inicio"]) .franja-cta p { color: var(--texto-2); }
body:not([data-pagina="inicio"]) .franja-cta .cielo { display: none; }

/* ---------- Lienzo técnico ---------- */
.lienzo-tecnico {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 5;
  min-height: 230px;
  overflow: hidden;
  --ease-lz: cubic-bezier(0.23, 1, 0.32, 1);
}
/* Cuadrícula técnica tenue (solo en los dibujos en planta) */
.lienzo-tecnico::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(rgba(20, 40, 75, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 40, 75, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 30%, transparent 80%);
  transition: opacity 0.6s ease;
}
.lienzo-tecnico[data-rejilla="si"]::before { opacity: 1; }
/* Esquinas de visor, como en el visor 3D */
.lienzo-tecnico::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --l: 14px;
  --c: rgba(20, 40, 75, 0.22);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
  background-repeat: no-repeat;
}

.lz-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.lienzo-tecnico[data-tipo="curvas"] .lz-svg:not(.lz-vivo):not(.lz-encima) {
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 60%, transparent 100%);
}

/* Textos del dibujo: Geist Mono para medidas, Geist para nombres */
.lz-svg text {
  font-family: var(--fuente-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  fill: #4A5677;
}
.lz-svg .lz-sans { font-family: var(--fuente); font-size: 11.5px; letter-spacing: 0; fill: #1B2547; }
.lz-svg .lz-fuerte { fill: #14284B; }
.lz-svg .lz-oro { fill: #8F6200; }
.lz-svg .lz-blanco { fill: #FFFFFF; }
.lz-svg .lz-siena { fill: #7A4A2E; }
.lz-svg .lz-port { font-size: 9.5px; letter-spacing: 0; }
.lz-svg .lz-halo { paint-order: stroke; stroke: #FFFFFF; stroke-width: 3.2px; stroke-linejoin: round; }
.lz-svg .lz-cap { font-size: 9.5px; letter-spacing: 0.16em; fill: #5A6488; }
.lz-svg .lz-negrita { font-weight: 600; }
.lz-angosto text { font-size: 10px; }
.lz-angosto .lz-sans { font-size: 10.5px; }
.lz-angosto .lz-cap { font-size: 9px; letter-spacing: 0.12em; }

/* ---------- Entrada: líneas que se dibujan, puntos que aparecen ---------- */
/* Ritmo de la entrada: el dibujo queda completo en ~2 s (los retrasos de lienzo-tecnico.js se escalan) */
.lz-anima { --lz-ritmo: 0.42; --lz-dur: 0.75; }
.lz-anima .lz-t { stroke-dasharray: 1 1; animation: lz-traza calc(var(--t, 900ms) * var(--lz-dur)) var(--ease-lz) calc(var(--d, 0ms) * var(--lz-ritmo)) both; }
.lz-anima .lz-f { animation: lz-aparece calc(var(--t, 600ms) * var(--lz-dur)) ease-out calc(var(--d, 0ms) * var(--lz-ritmo)) both; }
.lz-anima .lz-p { transform-box: fill-box; transform-origin: center; animation: lz-punto calc(480ms * var(--lz-dur)) var(--ease-lz) calc(var(--d, 0ms) * var(--lz-ritmo)) both; }
.lz-anima .lz-x { animation: lz-sube calc(520ms * var(--lz-dur)) var(--ease-lz) calc(var(--d, 0ms) * var(--lz-ritmo)) both; }
.lz-anima .lz-cy { transform-box: fill-box; transform-origin: 50% 100%; animation: lz-crece-y calc(var(--t, 700ms) * var(--lz-dur)) var(--ease-lz) calc(var(--d, 0ms) * var(--lz-ritmo)) both; }
.lz-anima .lz-cx { transform-box: fill-box; transform-origin: 0 50%; animation: lz-crece-x calc(var(--t, 700ms) * var(--lz-dur)) var(--ease-lz) calc(var(--d, 0ms) * var(--lz-ritmo)) both; }
.lz-anima .lz-b { animation: lz-baja calc(640ms * var(--lz-dur)) var(--ease-lz) calc(var(--d, 0ms) * var(--lz-ritmo)) both; }

@keyframes lz-traza { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes lz-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes lz-punto { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes lz-sube { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lz-crece-y { from { opacity: 0; transform: scaleY(0.05); } to { opacity: 1; transform: none; } }
@keyframes lz-crece-x { from { opacity: 0.3; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes lz-baja { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ---------- Movimiento mínimo que queda (capa aparte, liviana) ---------- */
.lz-pulso { transform-box: fill-box; transform-origin: center; animation: lz-pulso 2.8s var(--ease-lz) infinite; }
.lz-pulso.lz-2 { animation-delay: 1.4s; }
@keyframes lz-pulso { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.lz-flujo { stroke-dasharray: 2 12; animation: lz-flujo 1.4s linear infinite; }
@keyframes lz-flujo { to { stroke-dashoffset: -14; } }
.lz-barrido { animation: lz-barre var(--t, 5400ms) linear infinite; }
@keyframes lz-barre {
  0% { transform: translateX(0); opacity: 0; }
  3% { opacity: 1; }
  28% { transform: translateX(var(--dx, 0px)); opacity: 1; }
  31%, 100% { transform: translateX(var(--dx, 0px)); opacity: 0; }
}

/* Fuera de pantalla o con la pestaña oculta: todo quieto */
.lz-pausa,
.lz-pausa * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .lienzo-tecnico *,
  .lienzo-tecnico *::before { animation: none !important; }
  .lz-vivo { display: none; }
}

/* ---------- Celular y tableta: el dibujo pasa debajo del texto ---------- */
@media (max-width: 860px) {
  .heroe-rejilla { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lienzo-tecnico { aspect-ratio: 5 / 4; max-width: 620px; }
  .heroe p { margin-bottom: 24px; }
}