/* ===========================================================================
   PANELFORM — hoja de estilo.
   Lenguaje visual heredado de VIGAFORM: estructura oscura, contenido en
   blanco, UN solo color de acción. Ver docs/herencia.md §4.

   REGLA DE COLOR (la misma de vigaform, con nuestro acento):
     · El AZUL es estructura.
     · El ROJO es SOLO acción y urgencia. Si está en todos lados, deja de
       significar algo.
     · El AMARILLO es el filo del núcleo del isotipo: un canto, jamás un bloque.
   Cada token trae su ratio de contraste medido. No cambiar sin volver a medir.
   =========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* --- Estructura ------------------------------------------------------- */
  --noche:   #0A2E5C;   /* derivado del azul de marca. Blanco encima: 13.5:1 */
  --noche-2: #0E3A70;   /* tarjetas sobre fondo oscuro */
  --noche-3: #07223F;   /* cinta superior */

  /* --- Marca ------------------------------------------------------------ */
  --azul:    #0A4A9E;   /* azul Panelform. Sobre BLANCO: 8.45:1 ✅ AA */
  --azul-h:  #083B7E;
  /* El azul de marca sobre el navy da 1.6:1 y reprueba. Este aclarado da
     5.47:1 sobre --noche. Es el único azul permitido sobre fondo oscuro. */
  --azul-claro: #7FA6E8;

  /* Rojo Aceroform. Blanco encima: 4.69:1 — pasa AA, pero por poco.
     NO bajarle saturación ni aclararlo: se cae de norma. */
  --rojo:    #E0271C;
  --rojo-h:  #B81F16;

  /* Amarillo del núcleo de poliuretano. REPRUEBA sobre blanco (1.5:1).
     Jamás texto ni fondo de texto. Sobre --noche da 8.97:1 y ahí sí vive:
     filo, subrayado, dato destacado. Igual que el canto del isotipo. */
  --nucleo:  #F5CE76;

  /* --- Grises del panel -------------------------------------------------- */
  --tinta:   #14171C;   /* títulos sobre blanco */
  --texto:   #3B3B3D;
  --suave:   #606060;   /* 6.29:1 sobre blanco ✅ AA */
  --borde:   #D1D1D2;   /* REPRUEBA como texto. Solo líneas. */
  --borde-2: #BAB9BB;
  --gris-bg: #F4F5F7;
  --blanco:  #FFFFFF;

  --ancho:   1200px;
  --radio:   4px;
  --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; line-height: 1.65;
  color: var(--texto); background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  /* Números tabulares: toda tabla de espesor, valor R y peso se alinea sola. */
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 8px; top: 8px; z-index: 999; background: var(--blanco);
  color: var(--azul); padding: 10px 16px; border-radius: var(--radio); }

/* --- Tipografía -----------------------------------------------------------
   Caja alta SOLO en h1 y en las etiquetas diminutas. En h2 y h3 el contraste
   lo carga el peso, no la caja: párrafos en mayúsculas se leen como grito. */
h1, h2, h3, h4 { color: var(--tinta); font-weight: 900; line-height: 1.05;
  letter-spacing: -0.025em; }
h1 { font-size: clamp(2.4rem, 6.6vw, 4.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.7rem); letter-spacing: -0.03em; }
h3 { font-size: 1.14rem; }
h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; }

.eyebrow { font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--azul); margin-bottom: 14px; display: block; }
.plomo { font-size: 1.05rem; color: var(--suave); max-width: 62ch; }
.seccion--noche .plomo, .hero .plomo { color: rgba(255,255,255,.74); }

/* --- Botones --- */
.btn { display: inline-block; padding: 14px 28px; border-radius: 999px;
  font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-align: center;
  cursor: pointer; border: 1.5px solid transparent; text-decoration: none;
  transition: background-color .18s, color .18s, border-color .18s; }
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn--solido { background: var(--rojo); color: var(--blanco); }
.btn--solido:hover, .btn--solido:focus-visible { background: var(--rojo-h); color: var(--blanco); }
.btn--linea { border-color: var(--azul); color: var(--azul); background: transparent; }
.btn--linea:hover, .btn--linea:focus-visible { background: var(--azul); color: var(--blanco); }
.btn--claro { border-color: rgba(255,255,255,.45); color: var(--blanco); }
.btn--claro:hover, .btn--claro:focus-visible { background: var(--blanco); color: var(--noche); }
.btn--wa { background: #25D366; color: #06301A; border-color: #25D366; }
.btn--wa:hover, .btn--wa:focus-visible { background: #1EB855; color: #06301A; }

/* --- Cinta superior --- */
.cinta { background: var(--noche-3); color: rgba(255,255,255,.66); font-size: .76rem; }
.cinta .contenedor { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding-block: 7px; flex-wrap: wrap; }
.cinta a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.72); }
.cinta a:hover, .cinta a:focus-visible { color: var(--blanco); text-decoration: none; }
.cinta-datos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cinta svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.cinta-wa { color: #5BD07A; }
.cinta-wa:hover, .cinta-wa:focus-visible { color: #86E6A0; }

/* --- Header --- */
.header { background: var(--noche); position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.09); }
.header .contenedor { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: var(--header-h); }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 54px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: rgba(255,255,255,.86); font-size: .88rem; font-weight: 600; }
.nav a:hover, .nav a:focus-visible { color: var(--blanco); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--blanco); box-shadow: inset 0 -2px 0 var(--nucleo); }
.nav-cta { padding: 10px 18px; font-size: .78rem; letter-spacing: 0; }
/* El .nav a de arriba pinta los enlaces con rgba(255,255,255,.86) y le gana en
   especificidad a .btn--solido: sobre el rojo eso componía #fbe1df y daba 3.78:1,
   debajo del 4.5 que pide AA. En blanco puro sobre #E0271C son 4.69:1.
   Lo cachó Lighthouse en escritorio (accesibilidad 96). */
.nav a.nav-cta { color: var(--blanco); }
/* 48x48 mínimo: es el único botón para abrir el menú en móvil, y el comprador
   cotiza desde la obra. Antes medía 42x42. */
.menu-btn { display: none; background: none; border: 0; color: var(--blanco);
  padding: 11px; cursor: pointer; min-width: 48px; min-height: 48px;
  align-items: center; justify-content: center; }
.menu-btn svg { width: 26px; height: 26px; fill: currentColor; }

/* --- Hero. Sin foto: tipografía, dato y el filo amarillo del núcleo. --- */
/* Trama de plano de obra. Se pinta como capa bajo el contenido en toda
   superficie navy. Opacidad baja a propósito: es papel técnico, no wallpaper. */
.trama { position: relative; }
.trama::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(127,166,232,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,166,232,.14) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
  mask-image: radial-gradient(ellipse 120% 90% at 70% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 70% 40%, #000 30%, transparent 78%);
}
/* Cotas y marca de sección: el gesto que dice "plano", no "cuadrícula". */
.trama::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(90deg, transparent 0 calc(50% - .5px), rgba(245,206,118,.28) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  background-size: 100% 100%;
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.hero > .contenedor, .seccion--noche > .contenedor { position: relative; z-index: 2; }
.plano { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%;
  z-index: 1; opacity: .55; pointer-events: none;
  mask-image: linear-gradient(to top, #000 0 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0 55%, transparent 100%); }
@media (max-width: 900px) { .plano { opacity: .32; height: 58%; } }

.hero { background: var(--noche); color: var(--blanco);
  padding: clamp(52px, 7vw, 96px) 0 clamp(44px, 5vw, 72px); position: relative; overflow: hidden; }
.hero h1 { color: var(--blanco); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--azul-claro); }
.hero .eyebrow { color: #93B2EE; }
.hero .plomo { margin-top: 22px; font-size: 1.08rem; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
/* El canto del isotipo, hecho borde de sección. */
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: var(--nucleo); }
/* Hero del home: rejilla real dentro del contenedor. Nada de posicionamiento
   absoluto — se descentraba el contenedor y el arte se salía del ancho. */
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px;
  align-items: center; }
/* --- Panel anotado -------------------------------------------------------
   Puntos numerados sobre la foto, con rótulo y línea guía. Debajo, la leyenda
   completa. El rótulo se apaga en móvil y manda la leyenda. */
.panel-anot { margin: 0; }
.panel-anot-img { position: relative; line-height: 0; }
/* Sin máscara desde el 01-sep-2026: el render de Alan trae canal alfa, así que
   ya no flota como recuadro blanco sobre el navy y no hay nada que difuminar.
   La máscara además se comía el filo inferior —justo la banda de espuma que
   ahora rotula el punto 2—, que es la razón por la que se quitó. */
.panel-anot-img img { width: 100%; height: auto; }

.pt { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0;
  line-height: 1; }
.pt i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--rojo); color: #fff; font-style: normal;
  font-size: .66rem; font-weight: 800; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 0 0 3px rgba(224,39,28,.28),
  0 2px 8px rgba(0,0,0,.4); }
.pt b { position: absolute; white-space: nowrap; font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--noche);
  background: var(--nucleo); padding: 4px 8px; border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,.32); }
/* línea guía del punto al rótulo */
.pt b::before { content: ''; position: absolute; background: var(--nucleo); opacity: .8; }

.pt--der b  { left: 26px; top: -10px; }
.pt--der b::before  { left: -19px; top: 50%; width: 19px; height: 1.5px; }
.pt--izq b  { right: 26px; top: -10px; }
.pt--izq b::before  { right: -19px; top: 50%; width: 19px; height: 1.5px; }
.pt--abajo b { left: 50%; transform: translateX(-50%); top: 32px; }
.pt--abajo b::before { left: 50%; top: -22px; width: 1.5px; height: 22px; }

.cruzada-item--liga { text-decoration: none; transition: transform .15s, box-shadow .15s; }
.cruzada-item--liga:hover, .cruzada-item--liga:focus-visible {
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* --- Quiénes somos: prosa + foto con el isotipo encima ---------------------
   El isotipo va esquinado y CON overflow visible a propósito: sale del marco
   de la foto, que es lo que da la sensación de dos planos superpuestos. Por
   eso .nosotros-arte no puede llevar overflow:hidden. */
.nosotros { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) {
  .nosotros { grid-template-columns: 1fr 420px; gap: 56px; }
}
.nosotros-arte { position: relative; margin: 0; }
.nosotros-foto { width: 100%; height: auto; display: block;
  border-radius: var(--radio); box-shadow: 0 14px 40px rgba(10,46,92,.22); }
/* Esquina inferior izquierda, desbordando hacia fuera. La opacidad deja ver la
   obra por detrás: es un sello sobre la foto, no un logo pegado encima. */
.nosotros-iso { position: absolute; left: -34px; bottom: -26px; width: 200px;
  height: auto; opacity: .92; pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.nosotros-arte figcaption { margin-top: 16px; padding-left: 172px;
  font-size: .78rem; color: var(--suave); line-height: 1.45; }
@media (max-width: 620px) {
  /* Alan, 01-sep: a este ancho el isotipo se comía la foto y el pie quedaba a
     media línea. Se reduce, se mete más al marco y el pie recupera el ancho
     completo debajo de todo. */
  .nosotros-iso { width: 96px; left: -10px; bottom: -10px; opacity: .88; }
  .nosotros-arte figcaption { padding-left: 96px; margin-top: 20px; }
}

/* Alan, 01-sep: la leyenda venía pegada al punto 3, que ahora cuelga por
   debajo del panel. Se le da aire. */

.calc-nota { color: var(--suave); font-weight: 400; font-size: .82em; }

/* Aviso de precio de referencia. Va debajo de cada tabla y se lee ANTES que la
   letra chica: es una invitación a preguntar, no un descargo. */
.precio-ref { margin: 14px 0 6px; padding: 12px 15px; font-size: .86rem;
  line-height: 1.5; color: var(--tinta); background: #FFF8E6;
  border-left: 3px solid var(--nucleo); border-radius: var(--radio); }

/* --- Figura de obra --------------------------------------------------------
   Foto ancha con pie. Se usa en páginas de contenido para que el texto tenga
   con qué respirar y para que la foto entre a búsqueda de imágenes con un pie
   que la explique. */
.obra { margin: 26px 0 30px; }
.obra img { width: 100%; height: auto; display: block; border-radius: var(--radio);
  box-shadow: 0 10px 30px rgba(10,46,92,.16); }
.obra figcaption { margin-top: 10px; font-size: .82rem; color: var(--suave);
  line-height: 1.55; max-width: 74ch; }

/* --- Nuestras entregas ----------------------------------------------------
   Prueba social. Cada foto lleva producto y destino pegados: sin ese pie son
   fotos de camiones y no prueban nada. */
.entregas-grid { display: grid; gap: 18px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.entrega { margin: 0; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; }
.entrega img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3;
  object-fit: cover; }
.entrega figcaption { padding: 13px 15px; display: flex; flex-direction: column; gap: 2px; }
.entrega figcaption b { font-size: .88rem; color: var(--tinta); font-weight: 800; }
.entrega figcaption span { font-size: .78rem; color: var(--suave); }

/* --- Aviso de fraude + mapa de plazas ------------------------------------
   Heredado de vigaform con la paleta de Panelform: el coral de allá es el rojo
   Aceroform de acá. Único bloque con fondo de alerta en todo el sitio: se gana
   el color porque advierte de algo que ya le costó dinero a gente real. */
.alerta { display: grid; grid-template-columns: 1fr; gap: 20px 24px; align-items: start;
  margin-top: 34px; padding: 26px 28px; background: #FDF1EF;
  border: 1px solid #F3C9C2; border-left: 4px solid var(--rojo);
  border-radius: var(--radio); }
.alerta h3 { color: #A32117; font-size: 1.06rem; text-transform: uppercase; letter-spacing: .04em; }
.alerta p { color: #6B3D36; font-size: .92rem; margin-top: 9px; max-width: 74ch; line-height: 1.6; }
/* Las seis plazas como fichas: son lo comprobable de la advertencia. */
.alerta-plazas { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.alerta-plazas b { color: #A32117; font-weight: 800; font-size: .84rem; margin-right: 3px; }
.alerta-plazas span { background: var(--blanco); border: 1px solid #F0C4BC; border-radius: 999px;
  padding: 5px 13px; font-size: .8rem; font-weight: 700; color: #8C4436; }
.alerta-txt .btn { margin-top: 18px; }
.alerta-mapa { justify-self: center; }

/* El contorno se proyecta desde coordenadas reales: un México dibujado a ojo
   se nota deforme, y en un bloque sobre confianza eso trabaja en contra. */
.mapa { width: 380px; max-width: 100%; height: auto; display: block; }
.mapa-tierra { fill: #24549C; fill-opacity: .16; stroke: var(--azul); stroke-width: 1.4;
  stroke-linejoin: round; }
.pin-halo { fill: var(--rojo); opacity: .16; }
.pin-punto { fill: var(--rojo); }
.pin text { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 800;
  fill: #7A3B2E; letter-spacing: .01em; }

.tarjeta .mas { font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--azul); margin-top: auto; padding-top: 4px; text-decoration: none; }
.tarjeta .mas::after { content: " \2192"; }

@media (min-width: 900px) { .alerta { grid-template-columns: 1fr auto; } }

.panel-leyenda { list-style: none; margin: 40px 0 0; padding: 0;
  font-size: .8rem; color: rgba(255,255,255,.72); line-height: 1.5; }
.panel-leyenda li { display: flex; gap: 9px; margin-bottom: 7px; align-items: flex-start; }
.panel-leyenda p { margin: 0; }
.panel-leyenda span { flex: none; margin-top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--rojo); color: #fff; font-size: .62rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.panel-leyenda b { color: var(--blanco); font-weight: 800; }
.hero-arte-pie { margin-top: 6px; text-align: right; }
.hero-arte-pie b { display: block; font-size: 1.15rem; font-weight: 900; color: var(--nucleo);
  letter-spacing: .04em; }
.hero-arte-pie span { display: block; font-size: .78rem; color: rgba(255,255,255,.6); }

.hero--corto { padding-bottom: clamp(36px, 4vw, 56px); }
/* Ficha: el render va CHICO y a la DERECHA del título, SIN recuadro.
   La transparencia real del render lo deja apoyarse directo sobre el navy. */
.ficha-cab { display: flex; gap: 34px; align-items: center; justify-content: space-between; }
.ficha-cab > div { min-width: 0; }
.ficha-chip { flex: 0 1 480px; width: 480px; max-width: 44%; height: auto;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.45)); }
@media (max-width: 720px) {
  .ficha-cab { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
  .ficha-chip { flex-basis: auto; width: 260px; max-width: 80%; }
}
.hero--corto h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 22ch; }

/* --- Cifras --- */
.cifras { background: var(--noche-2); color: var(--blanco); }
.cifras .contenedor { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,.12); padding: 0; }
.cifra { background: var(--noche-2); padding: 26px 22px; }
.cifra b { display: block; font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 900;
  color: var(--nucleo); line-height: 1.1; letter-spacing: -.02em; }
.cifra span { display: block; font-size: .78rem; color: rgba(255,255,255,.72); margin-top: 6px;
  line-height: 1.45; }

/* Fila de botones. Antes era un <p> suelto: en escritorio los .btn quedaban
   separados por el espacio entre palabras, pero a ≤480px se vuelven 100% de
   ancho y se pegaban uno sobre otro sin aire. */
.acciones-fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* --- Secciones --- */
.seccion { padding: clamp(52px, 7vw, 88px) 0; }
.seccion--gris { background: var(--gris-bg); }
.seccion--noche { background: var(--noche); }
.seccion--noche h2, .seccion--noche h3, .seccion--noche h4 { color: var(--blanco); }
.seccion--noche .eyebrow { color: #93B2EE; }
.seccion-cab { margin-bottom: 38px; max-width: 70ch; }
.seccion-cab .plomo { margin-top: 14px; }

/* --- Rejillas --- */
.rejilla { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 26px; display: flex; flex-direction: column; }
.seccion--noche .tarjeta { background: var(--noche-2); border-color: rgba(255,255,255,.14); }
.seccion--noche .tarjeta p { color: rgba(255,255,255,.76); }
.tarjeta h3 { margin-bottom: 10px; }
.p-card h3 { font-size: 1.08rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tarjeta p { color: var(--suave); font-size: .95rem; }
/* La tarjeta reparte con gap y el botón se ancla abajo con margin-top:auto.
   Nada de separadores dentro del botón: eso lo hacía más alto, no lo bajaba. */
/* Las tarjetas de una fila tienen la misma altura (stretch). Con el botón en
   margin-top:auto, todos caen al mismo nivel sin importar cuánto texto haya
   arriba. La regla que lo ponía en 0 era justo la que los descuadraba. */
.tarjeta .btn { margin-top: auto; align-self: flex-start; }
.p-card .espesores { margin-bottom: 18px; }
.tarjeta ul { margin: 14px 0 18px; padding-left: 18px; color: var(--suave); font-size: .92rem; }
.tarjeta li { margin-bottom: 5px; }

/* Tarjeta de producto: la marca va como filo, no como bloque de color. */
.p-card { position: relative; overflow: hidden; }
.p-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--azul); }
/* Encabezado de tarjeta: marca y nombre a la izquierda, render en la esquina
   superior derecha, sin fondo. `.tarjeta` es flex, así que el float no aplica:
   se resuelve con una fila propia. */
.p-cab { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 4px; }
.p-titulo { min-width: 0; flex: 1 1 auto; }
.p-render { flex: 0 0 auto; width: 104px; height: auto; margin: -8px -6px 0 0; }
.p-card .marca-caja { display: flex; align-items: center; height: 24px; margin-bottom: 10px; }
.p-card .marca-logo { height: 22px; width: auto; }
.p-card .sistema { font-size: .72rem; color: var(--suave); text-transform: uppercase;
  letter-spacing: .08em; display: block; margin-bottom: 12px; }
.p-card .espesores { font-size: .82rem; color: var(--suave); margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--borde); clear: both; }

/* --- Tablas técnicas --- */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio);
  margin: 24px 0 34px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 460px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--borde); }
th { background: var(--gris-bg); font-weight: 800; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta); white-space: nowrap; }
td { color: var(--texto); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
/* Fila que anuncia el cambio de nombre comercial de fábrica */
.fila-corte td { background: #FFF8E8; font-size: .84rem; color: var(--tinta);
  border-top: 2px solid var(--nucleo); border-bottom: 1px solid var(--borde); }
/* Fila con valor R derivado por nosotros, no tomado de ficha */
.fila-der td:first-child::after { content: '°'; color: var(--rojo); font-weight: 800;
  margin-left: 3px; }

/* --- Ficha de producto --- */
.ficha-datos { margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; margin: 26px 0; }
/* El borde lo dibuja cada celda, no el contenedor: así la última fila
   incompleta queda en blanco y no enseña el fondo gris. */
.ficha-datos div { background: var(--blanco); padding: 18px 20px;
  box-shadow: 0 0 0 1px var(--borde); }
.ficha-datos dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--suave); font-weight: 700; }
.ficha-datos dd { font-size: 1rem; color: var(--tinta); font-weight: 700; margin-top: 4px; }

/* --- Lo que está en piso (ficha) ------------------------------------------
   Cada espesor es una tarjeta con su propio .ficha-datos adentro. Se reusa esa
   clase a propósito: el bloque de inventario debe verse como un dato técnico
   más, no como una promoción. El h3 va arriba, fuera de la rejilla. */
.inv-bloque { display: grid; gap: 22px; margin: 26px 0 8px; }
.inv-esp h3 { font-size: 1rem; margin: 0; color: var(--tinta);
  border-left: 3px solid var(--nucleo); padding-left: 10px; }
.inv-esp .ficha-datos { margin: 12px 0 0; }

.prosa { max-width: 72ch; }
.prosa p { margin-bottom: 18px; }
.prosa h2 { margin: 42px 0 16px; }
/* Los h2 de la ficha cuelgan del contenedor, no de .prosa. Alan pidió más aire
   entre bloques: el texto venía muy apretado. */
.seccion .contenedor > h2 { margin: 62px 0 20px; }
.seccion .contenedor > h2:first-child { margin-top: 0; }
.seccion .contenedor > h2 + p { margin-bottom: 22px; color: var(--suave); max-width: 74ch; }
.seccion .contenedor > ul { margin: 0 0 28px 22px; color: var(--suave); max-width: 74ch; }
.seccion .contenedor > ul li { margin-bottom: 12px; line-height: 1.72; }
.seccion .contenedor > p { line-height: 1.72; }

/* --- Corte transversal --- */
.corte { margin: 0 0 34px; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 28px 26px 18px; background: var(--blanco); }
/* El corte es SVG vectorial reconstruido del PDF del fabricante: nítido a
   cualquier tamaño y sin fondo. Ver tools/seccion_svg.py */
.corte img { width: 100%; height: auto; }
.corte figcaption { margin-top: 16px; font-size: .8rem; color: var(--suave);
  text-align: center; }

/* --- Perfiles de cara --- */
.perfiles { display: grid; gap: 16px; margin: 0 0 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.perfil { margin: 0; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px 16px 14px; background: var(--blanco); }
.perfil-svg { width: 100%; height: auto; color: var(--azul); display: block; }
.perfil figcaption { margin-top: 10px; font-size: .86rem; font-weight: 800;
  color: var(--tinta); }
.perfil figcaption span { display: block; font-weight: 400; font-size: .76rem;
  color: var(--suave); margin-top: 4px; line-height: 1.5; }
.prosa h3 { margin: 30px 0 12px; font-size: 1.24rem; }
.prosa ul, .prosa ol { margin: 0 0 20px 22px; }
.prosa li { margin-bottom: 8px; }
.prosa strong { color: var(--tinta); }

/* Nota de equivalencia: el bloque que nadie más publica. */
.equiv { border-left: 4px solid var(--nucleo); background: var(--gris-bg);
  padding: 20px 24px; border-radius: 0 var(--radio) var(--radio) 0; margin: 26px 0; }
.equiv h4 { color: var(--tinta); margin-bottom: 8px; }
.equiv p { color: var(--texto); font-size: .95rem; }

.aviso { border-left: 4px solid var(--rojo); background: #FEF4F3; padding: 18px 22px;
  border-radius: 0 var(--radio) var(--radio) 0; margin: 24px 0; font-size: .95rem; }

/* --- Formulario --- */
.form { display: grid; gap: 16px; max-width: 560px; }
.campo label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta); }
.seccion--noche .campo label { color: var(--blanco); }
.campo input, .campo select, .campo textarea { width: 100%; padding: 13px 15px; font: inherit;
  font-size: 1rem; border: 1.5px solid var(--borde-2); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); outline: 0;
  box-shadow: 0 0 0 3px rgba(10,74,158,.16); }
.form-nota { font-size: .8rem; color: var(--suave); }
.seccion--noche .form-nota { color: rgba(255,255,255,.6); }
.form-ok { background: #EAF7EE; border-left: 4px solid #1E9E4A; padding: 18px 22px;
  border-radius: 0 var(--radio) var(--radio) 0; }

/* --- Calculadora --- */
.calc { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; }
.calc h2 { font-size: 1.4rem; margin-bottom: 20px; }
.calc-form { display: grid; gap: 16px; }
.calc-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-out { background: var(--noche); color: var(--blanco); border-radius: var(--radio);
  padding: 28px; position: sticky; top: calc(var(--header-h) + 16px); }
.calc-out h2 { color: var(--blanco); }
.calc-bloque { margin-bottom: 22px; }
.calc-bloque h3 { color: var(--nucleo); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 10px; }
.calc-bloque dl { display: grid; gap: 0; }
.calc-bloque dl > div { display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.11); font-size: .9rem; }
.calc-bloque dt { color: rgba(255,255,255,.68); }
.calc-bloque dd { text-align: right; color: var(--blanco); }
.calc-bloque dd b { color: var(--nucleo); }
.calc-alerta { background: rgba(224,39,28,.16); border-left: 3px solid var(--rojo);
  padding: 13px 15px; border-radius: 0 3px 3px 0; font-size: .86rem;
  color: rgba(255,255,255,.9); margin-bottom: 16px; }
.calc-cta { margin-top: 22px; }
.calc-cta .btn { width: 100%; }
.calc-out .form-nota { color: rgba(255,255,255,.6); margin-top: 10px; }
@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; }
}
@media (max-width: 480px) { .calc-fila { grid-template-columns: 1fr; } }

/* --- Venta cruzada. Copiada de vigaform: el que compra panel está armando la
   nave completa y le falta lo demás. Misma casa, misma entrega. --------- */
.cruzada { background: var(--gris-bg); padding: clamp(48px, 6vw, 76px) 0;
  border-top: 1px solid var(--borde); }
.cruzada-cab { text-align: center; max-width: 60ch; margin: 0 auto 36px; }
.cruzada-cab .plomo { margin: 12px auto 0; }
.cruzada-grid { display: grid; gap: 16px; grid-template-columns: repeat(5, 1fr); }
.cruzada-item { background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px 14px; text-align: center; }
/* Caja cuadrada, no alto fijo. Alan, 01-sep: con `height: 96px; width: auto`
   el tamaño aparente lo decidía cuánto del ALTO del lienzo ocupaba cada
   objeto, y eso variaba del 36% (KR 18) al 89% (viga) — la viga se veía dos
   veces y media más grande. Ahora los cinco PNG están normalizados a que su
   lado mayor ocupe el 92% del lienzo, y la caja cuadrada con object-fit los
   inscribe a todos igual. */
.cruzada-item img { width: 96px; height: 96px; margin: 0 auto 14px;
  object-fit: contain; display: block; }
.cruzada-item .ph { height: 96px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--borde-2); }
.cruzada-item .ph svg { width: 62px; height: 62px; fill: currentColor; }
.cruzada-item b { display: block; font-size: .92rem; color: var(--tinta); font-weight: 800; }
.cruzada-item span { display: block; font-size: .8rem; color: var(--suave); margin-top: 3px; }
.cruzada-pie { text-align: center; margin-top: 30px; }

/* --- FAQ --- */
.faq details { border-bottom: 1px solid var(--borde); padding: 18px 0; }
.faq summary { font-weight: 800; color: var(--tinta); cursor: pointer; font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--azul); flex: none; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin-top: 12px; color: var(--suave); max-width: 74ch; }

/* --- Migas --- */
.migas { font-size: .8rem; color: var(--suave); padding: 16px 0; }
.migas a { color: var(--suave); }
.migas span { margin: 0 7px; color: var(--borde-2); }

/* --- Pie --- */
.pie { background: var(--noche); color: rgba(255,255,255,.7); padding: 56px 0 26px;
  font-size: .9rem; }
.pie .pie-tit { color: var(--blanco); margin-bottom: 14px;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 900; line-height: 1.05; }
.pie a { color: rgba(255,255,255,.7); }
.pie a:hover, .pie a:focus-visible { color: var(--blanco); }
.pie-grid { display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
.pie ul { list-style: none; }
.pie li { margin-bottom: 8px; }
.pie img { height: 42px; width: auto; margin-bottom: 16px; }
.pie-legal { border-top: 1px solid rgba(255,255,255,.13); margin-top: 40px; padding-top: 22px;
  font-size: .78rem; color: rgba(255,255,255,.5); }
.pie-legal p { margin-bottom: 10px; max-width: 100ch; }

/* --- WhatsApp flotante --- */
.wa-flota { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px;
  border-radius: 50%; background: #25D366; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.28); }
.wa-flota svg { width: 30px; height: 30px; fill: #fff; }
.wa-flota:hover { background: #1EB855; }

/* --- Responsivo --- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-arte { max-width: 520px; }
  .pt b { display: none; }
  .cifras .contenedor { grid-template-columns: repeat(2, 1fr); }
  .cruzada-grid { grid-template-columns: repeat(3, 1fr); }
  .pie-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pt b { display: none; }
  .pt i { width: 16px; height: 16px; left: -8px; top: -8px; }
  :root { --header-h: 68px; }
  .logo img { height: 36px; }
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--noche);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 22px;
    border-bottom: 1px solid rgba(255,255,255,.12); display: none; }
  .nav[data-abierto="1"] { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav .nav-cta { margin-top: 14px; border: 1.5px solid var(--rojo); text-align: center; }
  .menu-btn { display: flex; }
  .cinta-datos .cinta-correo { display: none; }
  /* Alan, 01-sep: en teléfono la cinta quedaba pegada a la izquierda, con el
     lema partido en dos renglones y los contactos colgando debajo. Centrada se
     lee como una sola unidad. */
  .cinta .contenedor { justify-content: center; text-align: center; gap: 6px 18px; }
  .cinta-datos { justify-content: center; }
  .hero-arte { max-width: 100%; }
  .cruzada-grid { grid-template-columns: repeat(2, 1fr); }
  .ficha-datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  
  .cruzada-grid { grid-template-columns: 1fr 1fr; }
  .pie-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero .acciones .btn { width: 100%; }
}

@media print {
  .cinta, .header, .wa-flota, .cruzada, .btn { display: none !important; }
  body { color: #000; }
}