/* MT: PL-09 ronda 5 (11-nov-2026, DEC-0229/0231) · texturas en tres, enlaces a las páginas de apoyo y notas al pie.
   Fichero aparte para que las páginas vivas (v27) no cambien hasta que Aleix apruebe. Mismas medidas que mt-pl09v5.css. */

/* Texturas en tres (Mix · Stone* · Monocolor), en la columna derecha del contenido doble, separadas por filete */
#mt5 .tx3{border-top:1px solid var(--line)}
#mt5 .tx3 li{display:grid;gap:8px;padding:24px 0;border-bottom:1px solid var(--line)}
#mt5 .tx3 .t{color:var(--fg2)}
#mt5 .tx3 .lk{justify-self:start;margin-top:8px}

/* Carril de texturas a todo el ancho, bajo el contenido doble (mismo JS que .car__r) */
#mt5 .car__r--full{margin-top:64px;--imgh:320px}
#mt5 .car__r--full .rail{padding-left:var(--side)}
#mt5 .car__r--full .car__bar{padding-left:var(--side)}
#mt5 .car__r--full .fi{--cw:240px}
#mt5 .car__r--full .fi .ph{aspect-ratio:3/4}
#mt5 .car__r--full.car__r--sq{--imgh:240px}
#mt5 .car__r--sq .fi .ph{aspect-ratio:1}
#mt5 .car__r--sq .fi .ph>img{object-fit:contain}

/* Aleix 11-nov: la frase general de áridos, debajo del carril (no encima de las tres texturas) */
/* Texturas (Aleix 11-nov): titular a todo el ancho con el enlace al simulador a la derecha; las tres texturas en tres
   columnas separadas por filete arriba, para que el texto ocupe poco alto y las fotos queden justo debajo */
#mt5 .tx-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px}
#mt5 .tx-head>.lk{justify-self:end}
#mt5 .tx3--h{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;border-top:0;margin-top:16px}
#mt5 .tx3--h li{border-bottom:0;border-top:1px solid var(--line);padding:16px 0 0;align-content:start}
#mt5 .tx3--h .lk{margin-top:4px}
/* el carril empieza donde el texto (columna de 1240 centrada), también en pantallas anchas */
#mt5 .car__r--full{margin-top:48px}
#mt5 .car__r--full .rail{padding-left:max(var(--side),calc((100% - 1240px) / 2));scroll-padding-inline:max(var(--side),calc((100% - 1240px) / 2)) 0}
#mt5 .car__r--full .car__bar{padding-left:max(var(--side),calc((100% - 1240px) / 2))}
#mt5 .tx-intro{display:grid;gap:16px;margin-top:64px}
#mt5 .tx-intro .t{max-width:640px;color:var(--fg2)}
#mt5 .tx-intro+.tx-no{margin-top:32px}
/* «¿No ves tu textura?»: frase + enlace, debajo del carril */
#mt5 .tx-no{display:flex;flex-wrap:wrap;align-items:center;gap:16px 48px;margin-top:48px}
#mt5 .tx-no .t{max-width:520px}

/* Enlaces bajo el texto del bloque «Artesanía en cemento desde 1974» (mismo sangrado que su párrafo) */
#mt5 .dt__m{display:grid;gap:24px;margin-top:-16px}
#mt5 .dt .lks{display:grid;gap:24px;justify-items:start;margin-left:104px;margin-top:8px}
#mt5 .dual__r .lks{display:grid;gap:24px;justify-items:start}

/* Notas al pie (* y **), al final de la página */
#mt5 .notas{padding-bottom:64px}
#mt5 .notas__in{display:grid;gap:8px;padding-top:24px;border-top:1px solid var(--line)}
#mt5 .notas p{font-size:14px;line-height:1.5;color:var(--gris);max-width:640px}

/* Páginas de apoyo (áridos y sostenibilidad) */
#mt5 .dual .lks{margin-top:8px}
/* foto de materia a sangre por la izquierda, recortada (no entera sobre tinta como .split) */
#mt5 .split--m .ph{background:var(--polvo)}
#mt5 .split--m .ph>img{object-fit:cover}
/* fichas de producto: la baldosa entera sobre blanco (tarjeta de producto) */
#mt5 .fi--prod .ph{background:var(--blanco)}
#mt5 .fi--prod .ph>img{object-fit:contain}

@media (max-width:767px){
  #mt5 .car__r--full{margin-top:40px}
  #mt5 .tx-head{grid-template-columns:1fr}
  #mt5 .tx-head>.lk{justify-self:start}
  #mt5 .tx3--h{grid-template-columns:1fr;margin-top:8px}
  #mt5 .tx3--h li{padding:16px 0}
  #mt5 .car__r--full .fi{--cw:62vw}
  #mt5 .tx-no{margin-top:32px}
  #mt5 .tx-intro{margin-top:32px}
  #mt5 .tx-intro+.tx-no{margin-top:24px}
  #mt5 .dt .lks{margin-left:0}
  #mt5 .notas{padding-bottom:48px}
}
/* botón (uno por página) con el ancho de su texto dentro de la columna */
#mt5 .ti__t .btn{justify-self:start}

/* Ronda 5 · QA móvil de agente-ux (11-nov-2026)
   UXR-2026-11-001 (crítica): el carril tenía 10 px de scroll vertical (el .lk sobresale y overflow-x:auto fuerza
   overflow-y:auto). En táctil se comía el arrastre vertical y la página no bajaba sobre él. */
#mt5 .rail{overflow-y:hidden;padding-bottom:10px}
/* UXR-2026-11-002: botón de pausa en los vídeos en bucle fuera de la portada (WCAG 2.2.2), dentro de su foto */
#mt5 .ph>.pause{right:8px;bottom:8px}
#mt5 .gr .pause{display:grid;width:44px;height:44px;cursor:pointer}

/* Ronda 6 · Aleix 11-nov-2026 */
/* Lavabos · «De la idea a la pieza»: la foto vertical traía un 25 % de fondo vacío encima del lavabo. En PC dejaba un
   hueco sobre la pieza, que quedaba más baja que el titular, y en el móvil, mucho aire arriba. Se recorta solo ese fondo
   (la foto entera sigue igual en la mediateca): el lavabo empieza a la altura del titular. */
#mt5 .ti .ph.ph--v{aspect-ratio:9/10}
#mt5 .ti .ph.ph--v>img{object-fit:cover;object-position:50% 100%}
/* Texturas en el móvil: que se vea que el carril se desliza. Encima de las fotos, «Desliza para ver las 32 texturas»
   (la pone el JS, en el idioma de la página, solo en pantallas táctiles); y las flechas de 44 px sobre la foto. */
#mt5 .car__hint{display:flex;align-items:center;gap:12px;margin:40px 0 0;padding-inline:max(var(--side),calc((100% - 1240px) / 2))}
#mt5 .car__hint svg{flex:none}
#mt5 .car__hint+.car__r--full{margin-top:16px}
@media (max-width:767px){
  #mt5 .car__r--tex{--imgh:calc(62vw * 4 / 3)}
  #mt5 .car__r--tex>.arr{display:grid;width:44px;height:44px;top:calc(var(--imgh) / 2 - 22px)}
  #mt5 .car__r--tex>.arr[data-next]{right:8px}
  #mt5 .car__r--tex>.arr[data-prev]{right:auto;left:8px}
}