/* ============================================================
   RUNA · web.css · maquetación de WEB (identidad v3)
   Norma P0 de WEB: solo variables --runa-* (03_COLOR/runa_colores.css),
   las tres tipografías del manual (fuentes.css) y los componentes
   de runa.css (10_KIT_WEB). Aquí solo hay rejillas, espacios y
   variantes de esos componentes. Sin colores ni fuentes nuevas.
   Sin sombras ni degradados. En gráficos, solo verticales y diagonales.
   ============================================================ */
html{scroll-behavior:smooth}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:3px}
strong,b{font-weight:600}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- cabecera (kit) + idioma + botón ---------- */
.cabecera nav{align-items:center;row-gap:var(--e3)}
.cabecera nav a[aria-current="page"],.cabecera nav a.activo{color:var(--runa-arcilla-700)}
.cabecera .idioma{display:inline-flex;gap:var(--e3);padding-left:var(--e4);border-left:1px solid var(--runa-linea)}
.cabecera .idioma a{font-weight:600}
.cabecera .idioma a[aria-current="true"]{color:var(--runa-arcilla-700)}
.cabecera .boton{padding:10px 16px;font-size:14px;color:var(--runa-accion-texto)}
.cabecera .boton:hover{color:var(--runa-accion-texto)}
@media (max-width:640px){.cabecera .idioma{padding-left:0;border-left:0}}

/* ---------- botones y enlaces con media Dagaz ---------- */
.botones{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)}
.boton--secundario svg,.boton--claro svg{height:14px}
.enlace{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--runa-enlace)}
.enlace svg{height:12px;width:auto}
.enlace:hover{color:var(--runa-arcilla-700)}

/* ---------- secciones ---------- */
.seccion--panel{background:var(--runa-fondo-2)}
.seccion--ocre{background:var(--runa-ocre-100)}
.seccion--bruma{background:var(--runa-bruma-100)}
.seccion--arcilla{background:var(--runa-arcilla-100)}
.seccion--musgo{background:var(--runa-musgo-100)}
.seccion > .contenedor > h2 + p,.seccion .intro{max-width:62ch}
.seccion .intro{color:var(--runa-texto-2)}
.dos-columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--e7);align-items:start}
.nota{font-size:15px;color:var(--runa-texto-2);max-width:62ch}

/* ---------- portada ---------- */
.portada{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e7);align-items:center;padding-block:var(--e8)}
.portada h1{margin-top:var(--e3)}
.portada .subtitulo{margin-bottom:var(--e4)}
.portada p.texto-2{max-width:52ch}
@media (max-width:900px){.portada{grid-template-columns:1fr;gap:var(--e6);padding-block:var(--e6)}}

/* ---------- fotos: marco, pila que cambia, pie con contador ---------- */
.foto{position:relative;border-radius:var(--runa-radio-l);overflow:hidden;background:var(--runa-piedra-300)}
.foto > img{width:100%;height:100%;object-fit:cover}
.pila{position:relative}
.pila > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.pila > img.on{opacity:1}
.cuadrada{aspect-ratio:1/1}
.apaisada{aspect-ratio:16/10}
.a3x2{aspect-ratio:3/2}
.pie-contador{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e4);margin-top:var(--e3);font:600 14px/1.4 var(--f-texto)}
.pie-contador .num{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--runa-texto-2)}
/* contador: astas de acabados en pequeño (una asta por imagen) */
.contador{display:inline-flex;align-items:flex-end;gap:4px;height:22px}
.contador i{display:block;width:5px;height:14px;border-radius:2px;background:var(--runa-piedra-300)}
.contador i.on{height:22px;background:var(--runa-tinta-900)}
@media (max-width:640px){.contador{gap:3px}.contador i{width:4px}}
/* firma sobre imagen (kit .con-firma): versión clara para fotos oscuras */
.con-firma .firma--clara{color:var(--runa-piedra-50);opacity:.8}

/* ---------- cifras grandes ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--e5)}
.cifras > div{border-left:2px solid var(--runa-linea);padding-left:var(--e4)}
.cifras b{display:block;font:800 clamp(34px,4vw,48px)/1 var(--f-titular);letter-spacing:-.01em}
.cifras span{display:block;margin-top:var(--e2);font-size:15px;color:var(--runa-texto-2)}

/* ---------- carta de acabados: triángulos de luz + astas como leyenda ---------- */
.luz--ocre{background:var(--runa-ocre-100)} .luz--ocre::before,.luz--ocre::after{background:var(--runa-ocre-300)}
.luz--musgo{background:var(--runa-musgo-100)} .luz--musgo::before,.luz--musgo::after{background:var(--runa-musgo-300)}
.luz--piedra{background:var(--runa-piedra-100)} .luz--piedra::before,.luz--piedra::after{background:var(--runa-piedra-300)}
.luz .pie-foto{color:var(--runa-tinta-900)}
.leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--e5);margin-top:var(--e5)}
.leyenda .familia{margin:0 0 var(--e3)}
.leyenda ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e2)}
.leyenda button{display:flex;align-items:center;gap:var(--e3);width:100%;border:0;background:transparent;padding:6px 8px;border-radius:var(--runa-radio-s);cursor:pointer;font:400 15px/1.3 var(--f-texto);color:var(--runa-texto);text-align:left}
.leyenda button:hover{background:var(--runa-piedra-100)}
.leyenda button[aria-pressed="true"]{background:var(--runa-piedra-100);font-weight:600}
.leyenda .asta{width:10px;height:36px;border-radius:3px;flex:none;cursor:inherit;box-shadow:inset 0 0 0 1px var(--runa-piedra-300)}
.leyenda button[aria-pressed="true"] .asta{box-shadow:0 0 0 2px var(--runa-piedra-50),0 0 0 4px var(--runa-tinta-900)}
.leyenda .hx{margin-left:auto;font-size:13px;color:var(--runa-texto-2);font-variant-numeric:tabular-nums}
.pie-carta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e3);margin-top:var(--e6)}

/* ---------- rejilla de imágenes (lote) ---------- */
.lote{display:grid;grid-template-columns:90px repeat(4,1fr);gap:var(--e3);align-items:center;margin-top:var(--e6)}
.lote .col{padding-bottom:2px}
.lote figure{margin:0;border-radius:var(--runa-radio-s);overflow:hidden;background:var(--runa-piedra-300);aspect-ratio:1/1}
.lote figure img{width:100%;height:100%;object-fit:cover}
.lote figcaption{display:none}
@media (max-width:700px){
  .lote{grid-template-columns:repeat(2,1fr);gap:var(--e2)}
  .lote .col,.lote .fila{display:none}
  .lote figure{position:relative}
  .lote figcaption{display:block;position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font:600 12px/1.4 var(--f-texto);background:var(--runa-piedra-50);color:var(--runa-tinta-900)}
}
.aviso-precio{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e4) var(--e6);margin-top:var(--e6);padding:var(--e5);border-radius:var(--runa-radio-l);background:var(--runa-ocre-100)}
.aviso-precio p{margin:0}

/* ---------- tarjetas con icono (kit) ---------- */
.tarjeta h3{margin-bottom:var(--e2)}
.tarjeta p:last-child{margin-bottom:0}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* ---------- vídeo ---------- */
.video{margin-top:var(--e6);border-radius:var(--runa-radio-l);overflow:hidden;background:var(--runa-tinta-900)}
.video video{width:100%;height:auto}

/* ---------- preguntas ---------- */
.preguntas{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--e5);margin-top:var(--e6)}
.preguntas .tarjeta{background:var(--runa-piedra-50)}
.preguntas h3{font-size:clamp(19px,1.8vw,22px)}
.preguntas p{font-size:15px;color:var(--runa-texto-2)}
.preguntas p b{color:var(--runa-texto)}

/* ---------- supergráfico: contacto ---------- */
.supergrafico h2{margin-top:var(--e2)}
.supergrafico .texto-2{color:var(--runa-texto-2)}
.supergrafico a:not(.boton){color:var(--runa-tinta-900)}
.datos{margin:var(--e5) 0 0;display:grid;gap:var(--e2);max-width:46ch}
.datos div{display:grid;grid-template-columns:110px 1fr;gap:var(--e3);align-items:baseline}
.datos dt{font:600 12px/1.4 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--runa-tinta-900)}
.datos dd{margin:0}
.supergrafico .nota{color:var(--runa-tinta-900);margin-top:var(--e5)}

/* ---------- pie (kit) ---------- */
.pie .contenedor{display:grid;gap:var(--e5)}
.pie .fila-pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e4)}
.pie nav{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);font-size:14px}
.pie nav a{text-decoration:none;font-weight:600}
.pie nav a:hover{text-decoration:underline}
.pie small{font-size:14px;color:var(--runa-piedra-300)}

/* ---------- migas ---------- */
.migas{font-size:14px;color:var(--runa-texto-2);padding-top:var(--e5)}
.migas a{color:var(--runa-texto-2)}
.migas span[aria-hidden]{margin-inline:6px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pila > img{transition:none}}
.seccion--panel .tarjeta,.seccion--ocre .tarjeta,.seccion--bruma .tarjeta{background:var(--runa-piedra-50)}
.supergrafico > *{min-width:0}
.datos dd{overflow-wrap:anywhere;min-width:0}
@media (max-width:480px){.datos div{grid-template-columns:1fr;gap:0}}
@media (max-width:480px){.leyenda ul{grid-template-columns:1fr 1fr}.leyenda .hx{display:none}}

/* ---------- FONDO DE PRODUCTO: BLANCO PURO ----------
   Decisión de Iker (30/09/2026): toda imagen de producto (principal y vistas/ángulos)
   y todo visor 3D o configurador va sobre blanco puro (#FFFFFF), sin triángulos de luz
   ni fondos pastel. Pendiente de que IDENTIDAD lo incorpore al manual
   (05_WEB_PORTFOLIO/PARA_IDENTIDAD_FONDO_BLANCO_PRODUCTO.md). */
:root{--web-blanco-producto:#FFFFFF}
.fondo-producto,.foto,.lote figure{background:var(--web-blanco-producto)}
/* escaparate: la pieza sola, centrada, sobre blanco (sustituye a .luz en imágenes de producto) */
.escaparate{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:var(--runa-radio-l);overflow:hidden;background:var(--web-blanco-producto)}
.escaparate > img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:min(70%,560px);max-height:78%;object-fit:contain}
.escaparate .flecha{position:absolute;bottom:var(--e4);z-index:2}
.escaparate .flecha.ant{left:var(--e4)} .escaparate .flecha.sig{right:var(--e4)}
.escaparate .pie-foto{position:absolute;bottom:var(--e5);left:0;right:0;text-align:center;font-weight:600;font-size:14px;color:var(--runa-tinta-900);z-index:2}
@media (max-width:640px){.escaparate{aspect-ratio:4/3}.escaparate > img{max-width:78%;max-height:70%}}

/* Corrección de maquetación (30/09/2026): en runa.css (kit) el relleno lateral del texto del
   supergráfico se aplica a los dos lados; en pantallas de más de ~2400 px se comía la columna
   y el texto quedaba en una tira estrecha. Aquí solo el lado izquierdo se alinea con el contenedor. */
.supergrafico .sg-texto{padding:var(--e8) var(--e7) var(--e8) max(16px,calc((100vw - 1200px)/2))}
@media (max-width:760px){.supergrafico .sg-texto{padding:var(--e8) 16px}}

/* Supergráfico del contacto en versión «sutil» (06_SISTEMA_GRAFICO/02_supergrafico: sutil-arcilla),
   elegida por Iker el 30/09/2026: la X en tinta se fundía con el pie, que también es tinta.
   Tamaño por alto (como la composición web 1920×1080 de IDENTIDAD): la X se lee igual a cualquier ancho. */
.supergrafico{background:var(--runa-arcilla-100)}
.supergrafico .sg-panel svg{width:auto;height:240%;color:var(--runa-arcilla-300)}

/* WEB 05/10/2026 · cabecera fija al bajar por la página (petición de Iker). Solo ordenador y tableta:
   en móvil la cabecera ocupa 2-3 líneas y taparía demasiado. El fondo cubre todo el ancho de la ventana. */
@media (min-width:641px){
  .cabecera{position:sticky;top:0;z-index:50;background:var(--runa-fondo);box-shadow:0 0 0 100vmax var(--runa-fondo);clip-path:inset(0 -100vmax)}
  html{scroll-padding-top:96px}
}