/* ============================================================
   RUNA · web-bloques.css · bloques de la propuesta del 06/10/2026
   (orden de MARKETING: textos mínimos, mosaicos y 5 animaciones de IDENTIDAD)
   Norma P0 de WEB: solo variables --runa-* (runa_colores.css), variables del kit
   (--e1..--e9, --runa-radio*, --f-*) y variantes de componentes de runa.css,
   web.css y web-trabajo.css. Sin colores ni fuentes nuevas, sin sombras,
   sin degradados, sin filetes horizontales. Solo rejillas y espacios.
   ============================================================ */

/* ---------- portada: en móvil, titular + subtítulo → foto → botones → lista (MARKETING 14:41, UX 4) ---------- */
.portada4{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:". foto" "cab foto" "sub foto" "acc foto" ". foto";column-gap:var(--e7);padding-block:var(--e8)}
.portada4 .p-cab{grid-area:cab} .portada4 .p-sub{grid-area:sub} .portada4 .p-acc{grid-area:acc} .portada4 .p-foto{grid-area:foto;align-self:center}
.portada4 h1{margin-top:var(--e3)}
.portada4 .subtitulo{margin:0 0 var(--e2)}
.portada4 .lista-rombo{margin-top:var(--e5)}
@media (max-width:900px){
  .portada4{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"cab" "sub" "foto" "acc";row-gap:var(--e5);padding-block:var(--e6)}
  .portada4 .subtitulo{margin-top:0}
}

/* ---------- titular de sección con línea y enlace ---------- */
.cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--e3) var(--e6)}
.cabeza h2{margin:0}
.cabeza p{margin:0}

/* ---------- rejilla con cabeceras de fila y columna (manillas, LMG) ---------- */
.matriz{display:grid;gap:var(--e3);align-items:center;margin-top:var(--e6)}
.matriz--3x2{grid-template-columns:110px repeat(3,minmax(0,1fr));max-width:980px}
.matriz--5x3{grid-template-columns:90px repeat(5,minmax(0,1fr))}
.matriz .col{align-self:end}
.matriz figure{margin:0;border-radius:var(--runa-radio-s);overflow:hidden;background:var(--web-blanco-producto);aspect-ratio:1/1}
.matriz figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){
  .matriz{gap:var(--e2)}
  .matriz--3x2{grid-template-columns:64px repeat(3,minmax(0,1fr))}
  .matriz--5x3{grid-template-columns:48px repeat(5,minmax(0,1fr));gap:var(--e1)}
  .matriz .etiqueta{font-size:10px;letter-spacing:.04em}
}
.pie-bloque{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e2) var(--e5);margin-top:var(--e4)}
.pie-bloque .nota{margin:0}

/* ---------- mosaico de 18 acabados (Didheya), todos a la vez, sobre blanco ---------- */
.mosaico{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--e4) var(--e3);margin-top:var(--e6)}
.mosaico figure{margin:0;min-width:0}
.mosaico .celda{display:grid;place-items:center;aspect-ratio:2/1;border-radius:var(--runa-radio-s);background:var(--web-blanco-producto);overflow:hidden}
.mosaico .celda img{width:88%;height:auto;object-fit:contain}
.mosaico figcaption{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e2);font:600 13px/1.3 var(--f-texto);min-width:0}
.mosaico .muestra{flex:none;width:5px;height:16px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--runa-piedra-300)}
@media (max-width:900px){.mosaico{grid-template-columns:repeat(3,minmax(0,1fr))}}
.formula{font:800 clamp(22px,2.6vw,32px)/1.15 var(--f-titular);letter-spacing:-.01em;margin:var(--e6) 0 0;max-width:none}
.formula span{color:var(--runa-arcilla-700)}

/* ---------- precio grande + animación al lado ---------- */
.precio{display:grid;grid-template-columns:1fr minmax(0,320px);gap:var(--e7);align-items:center}
.precio .anim{max-width:320px}  /* A11 a ≈ 320 px (MARKETING 14:41) */
@media (max-width:900px){.precio{grid-template-columns:1fr}}

/* ---------- animaciones de IDENTIDAD: pequeñas, en su panel, junto a su texto ----------
   El dibujo trae sus propias tarjetas blancas: el panel es piedra para que se lean
   como en la hoja de IDENTIDAD (sobre blanco, las tarjetas blancas desaparecen). */
.anim{border-radius:var(--runa-radio-l);background:var(--runa-piedra-100);padding:var(--e3);width:100%;max-width:400px}
.seccion--panel .anim,.seccion--ocre .anim,.tarjeta .anim{background:var(--runa-piedra-50)}
.anim > [data-runa-anim]{width:100%}
@media (max-width:640px){.anim{max-width:min(100%,309px);margin-inline:auto}} /* 4:3 → alto ≤ 220 px + margen */

/* ---------- cuatro pasos (A24) ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e5);margin-top:var(--e6);list-style:none;padding:0}
.pasos li{margin:0}
.pasos .anim{max-width:none}
.pasos .num{display:block;font:800 22px/1 var(--f-titular);margin-top:var(--e4)}
.pasos .que{display:block;font:600 15px/1.35 var(--f-texto);margin-top:var(--e2)}
@media (max-width:900px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* móvil: 2 × 2 compacto, los cuatro a la vista mientras suenan en orden (MARKETING 15:27, 1) */
@media (max-width:640px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e5) var(--e3)}.pasos .anim{max-width:none;padding:var(--e2)}.pasos .num{font-size:18px;margin-top:var(--e3)}.pasos .que{font-size:13px;margin-top:var(--e1)}}

/* ---------- tarjetas «Hecho para…»: la animación ocupa el sitio de la imagen ---------- */
.tarjetas-anim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e5);margin-top:var(--e6)}
.tarjetas-anim .tarjeta{display:flex;flex-direction:column;gap:var(--e4)}
.tarjetas-anim .anim{max-width:none}
.tarjetas-anim h3{margin:0}
.tarjetas-anim--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.tarjetas-anim--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.tarjetas-anim:not(.tarjetas-anim--4){grid-template-columns:1fr}.tarjetas-anim .anim{max-width:min(100%,309px)}}
@media (max-width:560px){.tarjetas-anim--4{grid-template-columns:1fr}}
.seccion--panel .tarjeta .anim{background:var(--runa-piedra-100)}
/* dos tarjetas (Precios): del mismo ancho que las de tres */
.tarjetas-anim--2{grid-template-columns:repeat(2,minmax(0,1fr))} /* a todo el ancho: con 2/3 parecía que faltaba una tercera (Iker 06/10) */
@media (max-width:900px){.tarjetas-anim--2{max-width:none}}
/* Trabajos, «Qué sale de un mismo modelo»: fotos reales en el sitio de la animación (mismo panel y medida, 4:3) */
.foto-servicio{aspect-ratio:4/3;border-radius:var(--runa-radio);overflow:hidden;background:var(--web-blanco-producto)}
.foto-servicio img{width:100%;height:100%;object-fit:cover;display:block}
.foto-servicio--4{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--e1);background:transparent;border-radius:var(--runa-radio-s)}
.foto-servicio--4 img{object-fit:contain;background:var(--web-blanco-producto);border-radius:var(--runa-radio-s);min-height:0}


/* ---------- preguntas en acordeón (cerradas; el texto sigue en el HTML para el SEO) ---------- */
.acordeon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3);margin-top:var(--e6);align-items:start}
.acordeon details{background:var(--runa-piedra-50);border-radius:var(--runa-radio)}
.acordeon summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e4) var(--e5);font:600 16px/1.35 var(--f-texto)}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:2px;border-radius:var(--runa-radio)}
.acordeon summary svg{flex:none;height:12px;width:auto;transition:transform .2s}
.acordeon details[open] summary svg{transform:rotate(90deg)}
.acordeon details p{margin:0;padding:0 var(--e5) var(--e4);font-size:15px;color:var(--runa-texto-2)}
@media (max-width:760px){.acordeon{grid-template-columns:1fr}}
.seccion:not(.seccion--panel) .acordeon details{background:var(--runa-piedra-100)}
@media (prefers-reduced-motion:reduce){.acordeon summary svg{transition:none}}

/* ---------- Trabajos: caso sin párrafo, dos filas de fotos dentro del contenedor ---------- */
.caso + .caso{margin-top:var(--e8);padding-top:var(--e7)}
.caso .nota{margin:0 0 var(--e3)}
.foto--doc{background:var(--web-blanco-producto)}
.foto--doc > img{object-fit:contain}

/* ---------- estudios: cuatro ---------- */
.estudios--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.estudios--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.estudios--4{grid-template-columns:1fr}}

/* ---------- servicios con imagen ---------- */
.servicios-foto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e5);margin-top:var(--e6)}
.servicios-foto .tarjeta{padding:var(--e3) var(--e3) var(--e5)}
.servicios-foto .foto{aspect-ratio:4/3;margin-bottom:var(--e4)}
.servicios-foto h3{padding-inline:var(--e2);margin-bottom:var(--e2)}
.servicios-foto p{padding-inline:var(--e2);margin:0;font-size:15px;color:var(--runa-texto-2)}
@media (max-width:1000px){.servicios-foto{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.servicios-foto{grid-template-columns:1fr}}

/* ---------- pie ---------- */
.pie .lema{margin:0;max-width:none;color:var(--runa-piedra-300);font-size:14px}

/* ---------- aviso legal ---------- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(22px,2.4vw,28px);margin-top:var(--e7)}
.legal dl{display:grid;gap:var(--e2)}
.legal dl div{display:grid;grid-template-columns:200px 1fr;gap:var(--e3)}
.legal dt{font-weight:600} .legal dd{margin:0}
@media (max-width:560px){.legal dl div{grid-template-columns:1fr;gap:0}}
.pendiente{background:var(--runa-arcilla-100);border-radius:var(--runa-radio-s);padding:0 4px}

/* ---------- Trabajos: cada caso en su panel de color pastel de la marca (tokens 100) ---------- */
.casos-lista{display:grid;gap:var(--e7);margin-top:var(--e6)}
.casos-lista .caso{border-radius:var(--runa-radio-l);padding:var(--e7)}
.caso--arcilla{background:var(--runa-arcilla-100)} .caso--musgo{background:var(--runa-musgo-100)}
.caso--bruma{background:var(--runa-bruma-100)} .caso--ocre{background:var(--runa-ocre-100)}
.casos-lista .caso .cifras > div{border-left-color:var(--runa-piedra-300)}
@media (max-width:640px){.casos-lista{gap:var(--e5)}.casos-lista .caso{padding:var(--e5) var(--e4)}}

/* ============================================================
   MÓVIL (≤ 640 px) · ajustes de MARKETING 15:27 con OK de Iker 15:38
   ============================================================ */
@media (max-width:640px){
  /* 2 · manillas: acabados en 2 columnas × modelos en 3 filas (cada celda dice dónde va con --r/--c) */
  .matriz--3x2{grid-template-columns:72px repeat(2,minmax(0,1fr))}
  .matriz--3x2 > *{grid-row:var(--r);grid-column:var(--c)}
  .matriz--3x2 .etiqueta{font-size:11px;letter-spacing:.04em}
  /* 2 · LMG: las 3 vistas se quedan (el titular dice «todas sus vistas»); los 5 acabados se deslizan de lado,
     con el nombre de la vista siempre a la izquierda */
  .matriz--5x3{grid-template-columns:52px repeat(5,116px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:60px;padding-bottom:var(--e2);gap:var(--e2)}
  .matriz--5x3 figure{scroll-snap-align:start}
  .matriz--5x3 .fila,.matriz--5x3 .esquina{position:sticky;left:0;z-index:1;align-self:stretch;display:flex;align-items:center;background:var(--runa-fondo)}
  /* 3 · precio: sin A11 (las dos cifras ya lo dicen) */
  .precio .anim{display:none}
  /* 5 · banda de cifras en una fila, con la etiqueta corta */
  /* «5 años» es corto: le doy menos ancho para que «combinaciones» quepa (MARKETING 16:51, 4) */
  .banda-cifras .cifras{grid-template-columns:minmax(0,.7fr) minmax(0,1.15fr) minmax(0,1.15fr);gap:var(--e3)}
  .banda-cifras .cifras > div{padding-left:var(--e3)}
  .banda-cifras .cifras b{font-size:30px}
  .banda-cifras .cifras span{font-size:13px;line-height:1.3}
  /* 7 · Trabajos: 4 fotos por caso (2 × 2); las otras 4 siguen en el visor ampliado del caso */
  .casos-lista .fotos--juntas{display:none}
  /* 7 · estudios: una foto por estudio, 2 × 2 (el resto, en el visor ampliado) */
  .estudios--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e5) var(--e3)}
  .estudios--4 .miniaturas > .foto:not(.grande){display:none}
  .estudios--4 .estudio h3{font-size:15px}
  /* 8 · áreas táctiles de 44 px: selector de acabado del visor y «Ver el caso» */
  .selector button{min-height:44px}
  .enlace{min-height:44px}
}
/* 320-350 px: la banda de cifras, un poco más apretada para que «combinaciones» quepa (MARKETING 16:51, 4) */
@media (max-width:350px){.banda-cifras .cifras{gap:var(--e2)} .banda-cifras .cifras > div{padding-left:var(--e2)} .banda-cifras .cifras span{font-size:12px}}