/* =============================================================================
   HIERROS ALMELA · design-system.css
   Dirección A «Estructura verde» (BRAND.md §8) · Fase 3 · 24/09/2026

   Idea: la nave como sistema. El verde del logo es el de la estructura de su
   nave; el monograma es una H, y la H es la sección de un pilar HEB. De ahí
   sale todo: campos verdes que ocupan regiones enteras, la VIGA como elemento
   propio y la notación de los planos de estructura (cotas, ejes, rótulos).

   Reglas:
   · Cada color sale del logo o de las imágenes aprobadas (origen al lado).
   · Contrastes medidos (WCAG 2.2): texto ≥ 4,5:1; bordes de controles ≥ 3:1.
   · Sin parallax, sin animaciones decorativas. Solo transiciones de estado y
     la apertura del chat, desactivadas con prefers-reduced-motion.
   · Las imágenes no llevan filtros: solo recorte, punto focal y, en portada,
     una capa del verde de la propia estructura para leer el titular.

   Índice
     1. Fuentes          7. Imagen             13. Pasos (ejes)
     2. Tokens           8. Botones y enlaces  14. Cita
     3. Base             9. Cabecera           15. Preguntas
     4. Superficies     10. Portada            16. Formulario
     5. Tipografía      11. Fichas             17. Pie
     6. La viga y la    12. Ventajas (cotas)   18. Chat
        notación de plano                      19. Utilidades y movimiento
   ============================================================================= */


/* 1. FUENTES — autoalojadas (OFL), sin llamadas a terceros ------------------ */

@font-face {
  font-family: "Besley";
  src: url("assets/fonts/besley-latin.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Besley";
  src: url("assets/fonts/besley-latin-ext.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. TOKENS ------------------------------------------------------------------ */

:root {
  /* Color. Origen · uso · contraste medido */
  --crema:        #E7E4DF;  /* logo, fondo · suelo de la página */
  --papel:        #F3F2EF;  /* crema aclarada al 50 % · superficies elevadas: campos, burbujas */
  --pared:        #DAD1CA;  /* paredes de bloque (imágenes, mediana) · filetes decorativos, nunca bordes de control */
  --verde:        #2B5C41;  /* logo, tinta · marca, botones, enlaces · 6,11:1 sobre crema */
  --verde-oscuro: #244936;  /* verde → verde hondo 45 % · hover y pulsado · 7,96:1 */
  --verde-hondo:  #1B3129;  /* estructura en sombra (imágenes, mediana) · campos oscuros · 10,91:1 */
  --acero:        #191B1A;  /* negros del acero (imágenes) · texto · 13,65:1 sobre crema */
  --acero-tenue:  #575755;  /* acero → crema 30 % · texto secundario, bordes de control · 5,71:1 */
  --etiqueta:     #EAC850;  /* etiquetas amarillas de los paquetes (imágenes) · señal SOLO sobre verde (4,75:1) u hondo (8,48:1) */
  --maquinaria:   #93403C;  /* rojo de la maquinaria (fotos reales F09, F10) · solo errores · 6,17:1 sobre papel, 5,45:1 sobre crema */

  /* Papeles semánticos */
  --fondo:        var(--crema);
  --superficie:   var(--papel);
  --texto:        var(--acero);
  --texto-2:      var(--acero-tenue);
  --marca:        var(--verde);
  --titulo:       var(--verde-hondo);
  --linea:        var(--pared);
  --borde-control: var(--acero-tenue);
  --foco:         var(--verde);
  --aviso:        var(--maquinaria);

  /* Tipografía: Besley (titulares; Clarendon como el monograma) + Archivo (texto y rótulos) */
  --f-titulo: "Besley", Georgia, "Times New Roman", serif;
  --f-texto:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-portada: clamp(2.75rem, 1.35rem + 5.4vw, 5.75rem);
  --t-1:       clamp(2.125rem, 1.4rem + 2.8vw, 3.75rem);
  --t-2:       clamp(1.375rem, 1.18rem + 0.8vw, 1.875rem);
  --t-3:       clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-base:    1.0625rem;
  --t-peq:     0.9375rem;
  --t-rotulo:  0.8125rem;
  --lh-titulo: 1.04;
  --lh-texto:  1.6;

  /* Espacio: escala de 4 px */
  --e-1: 0.25rem;  --e-2: 0.5rem;  --e-3: 0.75rem;  --e-4: 1rem;    --e-5: 1.5rem;
  --e-6: 2rem;     --e-7: 3rem;    --e-8: 4rem;     --e-9: 6rem;    --e-10: 8rem;
  --seccion: clamp(4.5rem, 3rem + 6vw, 9rem);
  --margen:  clamp(1rem, 0.55rem + 2.2vw, 2.5rem);
  --ancho:   76rem;
  --medida:  68ch;

  /* Radios: el redondeo mínimo de las alas de la H del logo */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;

  /* Sombras: solo lo que flota sobre la página (chat) */
  --sombra-1: 0 1px 2px rgb(25 27 26 / 0.10), 0 4px 12px -6px rgb(25 27 26 / 0.18);
  --sombra-flotante: 0 24px 48px -20px rgb(27 49 41 / 0.55), 0 6px 16px -8px rgb(25 27 26 / 0.30);

  /* La viga */
  --viga-alto: 14px;
  --viga-ala: 3px;
  --viga-placa: 5px;

  /* Movimiento: salida exponencial, corta */
  --dur-1: 140ms;
  --dur-2: 240ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Capas */
  --z-cabecera: 50;
  --z-chat: 80;
}


/* 3. BASE -------------------------------------------------------------------- */

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

/* Lo que lleva el atributo hidden se oculta siempre, aunque su clase le dé otro display */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scroll-padding-top: 5.5rem;
  scrollbar-color: var(--verde) var(--pared);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--fondo);
  color: var(--texto);
  font: 400 var(--t-base) / var(--lh-texto) var(--f-texto);
  font-stretch: 100%;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--verde);
}

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--verde); color: var(--papel); }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

a {
  color: var(--marca);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
a:hover { text-decoration-thickness: 2px; color: var(--verde-oscuro); }

p { margin: 0 0 1em; max-width: var(--medida); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

hr { border: 0; height: 1px; background: var(--linea); margin: var(--e-7) 0; }


/* 4. SUPERFICIES -------------------------------------------------------------
   Estrategia «comprometida»: el verde ocupa regiones enteras, no se esparce
   como acento. Crema de fondo (se lee al sol, desde la obra), verde de marca
   en bandas, verde hondo para lo nocturno (la báscula) y el pie. */

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }

.seccion--papel { background: var(--papel); }

.seccion--verde,
.seccion--hondo {
  --texto: var(--papel);
  --texto-2: #CFD7D0;       /* papel → verde 18 %: 5,27:1 sobre verde, 9,41:1 sobre hondo */
  --titulo: var(--papel);
  --marca: var(--papel);
  --linea: rgb(243 242 239 / 0.22);
  --foco: var(--etiqueta);
  --borde-control: var(--papel);
  color: var(--texto);
}
.seccion--verde { background: var(--verde); }
.seccion--hondo { background: var(--verde-hondo); }
.seccion--verde a:hover, .seccion--hondo a:hover { color: var(--papel); }
.seccion--verde ::selection, .seccion--hondo ::selection { background: var(--etiqueta); color: var(--verde-hondo); }


/* 5. TIPOGRAFÍA ---------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 800;
  line-height: var(--lh-titulo);
  letter-spacing: -0.02em;
  color: var(--titulo);
  text-wrap: balance;
}
h1, .t-portada { font-size: var(--t-portada); letter-spacing: -0.03em; }
h2, .t-1 { font-size: var(--t-1); }
h3, .t-2 { font-size: var(--t-2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
h4 { font-size: var(--t-3); font-weight: 700; letter-spacing: 0; line-height: 1.25; }

.entrada {                              /* párrafo de entrada bajo un titular */
  font-size: var(--t-3);
  line-height: 1.5;
  color: var(--texto-2);
  max-width: 44ch;
}

.cabeza-seccion { display: grid; gap: var(--e-5); margin-bottom: var(--e-8); }
.cabeza-seccion h2 { max-width: 16ch; }

/* Rótulo: la letra de las anotaciones de un plano (Archivo estrecha, versalitas
   espaciadas, cifras tabulares). Para datos técnicos dentro del contenido;
   nunca como etiqueta encima de un titular. */
.rotulo {
  font-family: var(--f-texto);
  font-size: var(--t-rotulo);
  font-stretch: 75%;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}

.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

.telefono {
  display: inline-block;
  font: 800 var(--t-2) / 1 var(--f-titulo);
  letter-spacing: -0.01em;
  color: var(--marca);
  text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.telefono:hover { text-decoration: underline; text-decoration-thickness: 2px; }


/* 6. LA VIGA Y LA NOTACIÓN DE PLANO — el elemento propio --------------------
   La viga es una barra en alzado: alma del verde del logo, alas del verde de
   la estructura en sombra y placas de testa en los extremos. Se usa para
   separar, subrayar titulares y sostener las fotos («la foto cuelga de la
   viga»). Solo horizontal, nunca de adorno lateral. */

.viga {
  --viga-alma: var(--verde);
  --viga-alas: var(--verde-hondo);
  position: relative;
  display: block;
  height: var(--viga-alto);
  margin-inline: var(--viga-placa);
  background:
    linear-gradient(var(--viga-alas), var(--viga-alas)) top / 100% var(--viga-ala) no-repeat,
    linear-gradient(var(--viga-alas), var(--viga-alas)) bottom / 100% var(--viga-ala) no-repeat,
    var(--viga-alma);
}
.viga::before,
.viga::after {                          /* placas de testa */
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: var(--viga-placa);
  background: var(--viga-alas);
}
.viga::before { left: calc(-1 * var(--viga-placa)); }
.viga::after  { right: calc(-1 * var(--viga-placa)); }

.viga--corta { width: 5.5rem; }
.viga--media { width: min(100%, 18rem); }
.viga--clara { --viga-alma: var(--crema); --viga-alas: var(--pared); }
.seccion--verde .viga,
.seccion--hondo .viga { --viga-alma: var(--crema); --viga-alas: var(--pared); }

/* Perfil HEB: la H del monograma dibujada como sección de pilar. Marca de
   lista para datos técnicos y ventajas. */
.perfil {
  display: inline-block;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h5v18H3zM16 3h5v18h-5zM8 10.6h8v2.8H8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h5v18H3zM16 3h5v18h-5zM8 10.6h8v2.8H8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.datos {                                /* lista de datos técnicos con perfil HEB */
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.datos li { display: inline-flex; align-items: center; gap: 0.45em; }
.datos li::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  flex: none;
  background: var(--marca);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h5v18H3zM16 3h5v18h-5zM8 10.6h8v2.8H8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h5v18H3zM16 3h5v18h-5zM8 10.6h8v2.8H8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Cota: la línea de medida de un plano, con el valor en el centro. Para las
   cifras que importan (24 h, B500SD, 7:00), en vez del «número gigante». */
.cota {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--e-3);
  padding-block: var(--e-1);
  border-inline: 1.5px solid currentColor;
  color: var(--marca);
}
.cota::before,
.cota::after { content: ""; height: 1.5px; background: currentColor; }
.cota__valor {
  font: 800 clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem) / 1 var(--f-titulo);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
/* Cuando la cota es una palabra («Al momento») y no una cifra: más pequeña para que quepa entre sus topes */
.cota--texto .cota__valor { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); }


/* 7. IMAGEN ------------------------------------------------------------------
   · Sin filtros ni virados. Recorte por proporción + punto focal del manifiesto
     (assets/img/fotos/fotos.json → --punto) y su color medio de fondo mientras
     carga (--color-foto).
   · Proporciones: 16:9 portada escritorio, 4:5 portada móvil, 3:2 fichas y
     pasos, 1:1 detalle.
   · Servir con <picture>: AVIF, luego WebP; anchos 480–2000 (portada hasta
     2560); loading="lazy" salvo la portada (fetchpriority="high").
   · Desde el 08/10/2026, casi todas son versiones mejoradas con IA de las
     fotos del cliente (FOTOS.md §10; aviso en el pie). La portada y la
     báscula son fotos reales reescaladas. Se generan con tools/fotos/web_fotos.py. */

.foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--proporcion, 3 / 2);
  background: var(--color-foto, var(--pared));
  border-radius: var(--r-1);
}
.foto > picture,
.portada__foto > picture { display: block; width: 100%; height: 100%; }
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--punto, 50% 50%);
}
.foto--16x9 { --proporcion: 16 / 9; }
.foto--3x2  { --proporcion: 3 / 2; }
.foto--4x5  { --proporcion: 4 / 5; }
.foto--1x1  { --proporcion: 1 / 1; }

/* La foto cuelga de la viga: la viga cruza el borde superior */
.foto--colgada { overflow: visible; border-radius: 0 0 var(--r-1) var(--r-1); }
.foto--colgada img { border-radius: inherit; }
.foto--colgada::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--viga-alto) / -2);
  left: 0;
  right: 0;
  height: var(--viga-alto);
  background:
    linear-gradient(var(--verde-hondo), var(--verde-hondo)) top / 100% var(--viga-ala) no-repeat,
    linear-gradient(var(--verde-hondo), var(--verde-hondo)) bottom / 100% var(--viga-ala) no-repeat,
    var(--verde);
}

/* Dos fotos en el mismo marco, colgadas de la misma viga (17/10/2026: corrugado,
   estribos, celosías y alambre). Cada mitad en 3:4, con su propio punto focal
   y su color de espera en el <picture>; el hueco entre las dos deja ver el suelo. */
.foto--doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--e-1);
  background: transparent;
}
.foto--doble > picture { min-width: 0; min-height: 0; background: var(--color-foto, var(--pared)); }

.pie-foto { margin-top: var(--e-2); color: var(--texto-2); }


/* 8. BOTONES Y ENLACES -------------------------------------------------------- */

.boton {
  --b-fondo: var(--verde);
  --b-texto: var(--papel);
  --b-borde: var(--verde);
  --b-fondo-hover: var(--verde-oscuro);
  --b-texto-hover: var(--papel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border: 2px solid var(--b-borde);
  border-radius: var(--r-2);
  background: var(--b-fondo);
  color: var(--b-texto);
  font: 700 1rem / 1.15 var(--f-texto);
  font-stretch: 100%;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.boton:hover { background: var(--b-fondo-hover); border-color: var(--b-fondo-hover); color: var(--b-texto-hover); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton svg { width: 1.2em; height: 1.2em; flex: none; }

.boton--linea { --b-fondo: transparent; --b-texto: var(--verde); --b-fondo-hover: var(--verde); }
.boton--claro { --b-fondo: var(--papel); --b-texto: var(--verde-hondo); --b-borde: var(--papel); --b-fondo-hover: var(--crema); --b-texto-hover: var(--verde-hondo); }
.boton--linea-clara { --b-fondo: transparent; --b-texto: var(--papel); --b-borde: var(--papel); --b-fondo-hover: var(--papel); --b-texto-hover: var(--verde-hondo); }
.boton--grande { min-height: 3.5rem; padding: 0.9rem 1.75rem; font-size: 1.0625rem; }
.boton--bloque { width: 100%; }

.boton:disabled,
.boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.boton:disabled:hover,
.boton[aria-disabled="true"]:hover { background: var(--b-fondo); border-color: var(--b-borde); color: var(--b-texto); }

.boton[aria-busy="true"] { cursor: progress; }
.boton[aria-busy="true"]::after {       /* carga: aro que gira (estado, no adorno) */
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  text-decoration: none;
  color: var(--marca);
}
.enlace-flecha svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-1) var(--ease); }
.enlace-flecha:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.enlace-flecha:hover svg { transform: translateX(3px); }


/* 9. CABECERA ------------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  background: var(--crema);
  border-bottom: 1px solid var(--pared);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: 4.5rem;
}
.cabecera__marca { display: block; color: var(--verde); margin-right: auto; }
.cabecera__marca svg { height: 2.1rem; width: auto; }
.cabecera__nav { display: flex; gap: var(--e-5); }
.cabecera__nav a {
  color: var(--acero);
  font-weight: 600;
  font-size: var(--t-peq);
  text-decoration: none;
  padding-block: var(--e-2);
}
.cabecera__nav a:hover,
.cabecera__nav a[aria-current="true"] { color: var(--verde); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.cabecera__menu {
  display: none;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--verde);
}
.cabecera__menu svg { width: 1.6rem; height: 1.6rem; }

@media (max-width: 60em) {
  .cabecera__nav { display: none; }
  .cabecera__menu { display: grid; }
  .cabecera__cta { display: none; }
}
@media (max-width: 30em) {
  .cabecera__marca svg { height: 1.75rem; }
}


/* 10. PORTADA ------------------------------------------------------------------
   Foto a sangre + capa del verde hondo (el de la estructura en sombra de la
   propia imagen) para que el titular se lea; sin más efectos. */

.portada {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(calc(100svh - 4.5rem), 54rem);
  overflow: hidden;
  background: var(--verde-hondo);
  --texto: var(--papel);
  --texto-2: #D9DBD7;       /* papel → hondo 12 %: 9,92:1 sobre hondo */
  --titulo: var(--papel);
  --foco: var(--etiqueta);
  color: var(--texto);
}
.portada__foto { position: absolute; inset: 0; z-index: -2; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--punto, 62% 48%); }
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* max(): en tabletas el texto ocupa más proporción de pantalla; la capa lo cubre igual.
       08/10/2026: algo más densa para la fachada (F20), más clara y con rótulos: el
       amarillo de la nave no compite con el titular y los datos de abajo pasan AA a 1024 px. */
    linear-gradient(90deg, rgb(27 49 41 / 0.94) 0%, rgb(27 49 41 / 0.86) max(36%, 31rem), rgb(27 49 41 / 0.32) max(70%, 52rem), rgb(27 49 41 / 0.06) 100%),
    linear-gradient(0deg, rgb(27 49 41 / 0.80) 0%, rgb(27 49 41 / 0) 46%);
}
.portada__contenido {
  display: grid;
  gap: var(--e-5);
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}
.portada h1 { max-width: 12ch; }
.portada .entrada { max-width: 40ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-2); }

/* Placa: la ventaja que no se discute, fijada como la chapa de una máquina */
.placa {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  justify-self: start;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid rgb(234 200 80 / 0.6);
  border-radius: var(--r-1);
  color: var(--etiqueta);
}
.placa .perfil { width: 1.1em; height: 1.1em; }

@media (max-width: 48em) {
  .portada { min-height: min(calc(100svh - 4.5rem), 46rem); }
  .portada__foto img { object-position: var(--punto-movil, 50% 58%); }
  .portada::before {
    background: linear-gradient(0deg, rgb(27 49 41 / 0.96) 0%, rgb(27 49 41 / 0.90) 55%, rgb(27 49 41 / 0.72) 80%, rgb(27 49 41 / 0.45) 100%);
  }
}


/* 11. FICHAS DE PRODUCTO -----------------------------------------------------
   Sin caja: la foto cuelga de la viga y el texto se apoya en el suelo crema. */

.fichas {
  display: grid;
  gap: var(--e-8) var(--e-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.ficha { display: grid; gap: var(--e-4); align-content: start; }
.ficha .foto { margin-bottom: var(--e-2); }
.ficha h3 { color: var(--titulo); }
.ficha p { color: var(--texto-2); margin: 0; }
.ficha .datos { color: var(--texto); }

.ficha--destacada {                     /* la báscula: ocupa dos columnas, de noche */
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--e-7);
  padding: clamp(1.25rem, 0.6rem + 2.5vw, 2.5rem);
  background: var(--verde-hondo);
  border-radius: var(--r-2);
  --texto: var(--papel);
  --texto-2: #CFD7D0;       /* papel → verde 18 % (ver sección 4) */
  --titulo: var(--papel);
  --marca: var(--etiqueta);
  --foco: var(--etiqueta);
  color: var(--texto);
}
.ficha--destacada .foto { margin: 0; }
.ficha--destacada .cota { color: var(--etiqueta); }
/* El rótulo de la báscula (17/10/2026): grande y corto, como el cartel de la nave */
.ficha--destacada h3 { font-size: var(--t-1); line-height: 1; letter-spacing: -0.02em; }
.ficha--destacada h3 span { color: var(--etiqueta); white-space: nowrap; }
.ficha--destacada .ficha__entrada { font-size: var(--t-3); }
@media (max-width: 48em) {
  .ficha--destacada { grid-template-columns: 1fr; gap: var(--e-5); }
}


/* 12. VENTAJAS — cada una con su cota ------------------------------------------ */

.ventajas {
  display: grid;
  gap: var(--e-8) var(--e-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
.ventaja { display: grid; gap: var(--e-4); align-content: start; }
.ventaja .cota { max-width: 16rem; }
.ventaja p { color: var(--texto-2); margin: 0; }


/* 13. PASOS — ejes de replanteo unidos por una línea de trazo y punto ----------
   La secuencia importa (1 → 4), por eso lleva número. */

.pasos {
  --eje: 2.75rem;
  display: grid;
  gap: var(--e-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.paso { position: relative; display: grid; gap: var(--e-3); padding-left: calc(var(--eje) + var(--e-5)); }
.paso__eje {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--eje);
  height: var(--eje);
  border: 2px solid var(--marca);
  border-radius: 50%;
  background: var(--fondo);
  color: var(--marca);
  font: 700 1.125rem / 1 var(--f-texto);
  font-stretch: 75%;
  font-variant-numeric: tabular-nums lining-nums;
}
.paso::before {                         /* eje vertical en móvil */
  content: "";
  position: absolute;
  top: var(--eje);
  bottom: calc(-1 * var(--e-7));
  left: calc(var(--eje) / 2 - 0.75px);
  width: 1.5px;
  background: repeating-linear-gradient(180deg, var(--marca) 0 14px, transparent 14px 18px, var(--marca) 18px 20px, transparent 20px 24px);
}
.paso:last-child::before { display: none; }
.paso h3 { padding-top: 0.45rem; }
.paso p { color: var(--texto-2); margin: 0; }
.paso .foto { margin-top: var(--e-2); }

@media (min-width: 56em) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
  .paso { padding-left: 0; padding-top: calc(var(--eje) + var(--e-5)); }
  .paso::before {                       /* eje horizontal en escritorio */
    top: calc(var(--eje) / 2 - 0.75px);
    bottom: auto;
    left: var(--eje);
    right: calc(-1 * var(--e-6));
    width: auto;
    height: 1.5px;
    background: repeating-linear-gradient(90deg, var(--marca) 0 14px, transparent 14px 18px, var(--marca) 18px 20px, transparent 20px 24px);
  }
  .paso h3 { padding-top: 0; }
}


/* 14. CITA (testimonio) ----------------------------------------------------------
   Reseñas reales de Google desde el 05/10/2026 (antes, ejemplos marcados como tales). */

.cita { display: grid; gap: var(--e-5); margin: 0; padding-top: var(--e-5); border-top: 1px solid var(--linea); }
.cita blockquote { margin: 0; }
.cita blockquote p {
  font: 700 var(--t-3) / 1.45 var(--f-titulo);
  color: var(--titulo);
  max-width: 34ch;
}
.cita figcaption { display: grid; gap: var(--e-1); color: var(--texto-2); font-size: var(--t-peq); }
.cita figcaption strong { color: var(--texto); font-weight: 700; }
.sello-ejemplo {
  justify-self: start;
  padding: 0.2rem 0.5rem;
  border: 1.5px dashed var(--acero-tenue);
  border-radius: var(--r-1);
  color: var(--acero-tenue);
}


/* 15. PREGUNTAS (details/summary nativo) ------------------------------------------ */

.preguntas { border-bottom: 1px solid var(--linea); max-width: 52rem; }
.pregunta { border-top: 1px solid var(--linea); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding-block: var(--e-5);
  font: 700 var(--t-3) / 1.3 var(--f-titulo);
  color: var(--titulo);
  list-style: none;
  cursor: pointer;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--marca); }
.pregunta__signo {                      /* + que pasa a − */
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--marca);
}
.pregunta__signo::before,
.pregunta__signo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2.5px;
  margin-top: -1.25px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease);
}
.pregunta__signo::after { transform: rotate(90deg); }
.pregunta[open] .pregunta__signo::after { transform: rotate(0deg); }
.pregunta__respuesta { padding-bottom: var(--e-6); color: var(--texto-2); }


/* 16. FORMULARIO (solo apariencia; campos y funcionamiento no se tocan) -------- */

.campo { display: grid; gap: var(--e-2); }
.campo label,
.campo__etiqueta { font-weight: 600; font-size: var(--t-peq); color: var(--texto); }
.campo__ayuda { font-size: var(--t-rotulo); color: var(--texto-2); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--borde-control);
  border-radius: var(--r-1);
  background: var(--papel);
  color: var(--acero);
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--acero-tenue); opacity: 1; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--verde); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgb(43 92 65 / 0.35); }
.campo input:disabled,
.campo textarea:disabled { background: var(--pared); color: var(--acero-tenue); cursor: not-allowed; }

.campo--error input,
.campo--error textarea,
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--aviso); border-width: 2px; }
.campo__error { display: flex; gap: 0.4em; align-items: flex-start; font-size: var(--t-peq); font-weight: 600; color: var(--aviso); }

.casilla { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-peq); color: var(--texto-2); }
.casilla input { width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; accent-color: var(--verde); flex: none; }

.mensaje-ok {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-2);
  background: var(--verde);
  color: var(--papel);
}


/* 17. PIE ---------------------------------------------------------------------- */

.pie {
  --texto: var(--papel);
  --texto-2: #D9DBD7;                   /* papel → hondo 12 %: 9,92:1 sobre hondo */
  --marca: var(--papel);
  --linea: rgb(243 242 239 / 0.18);
  --foco: var(--etiqueta);
  background: var(--verde-hondo);
  color: var(--texto);
  padding-block: var(--e-9) calc(var(--e-6) + 4.5rem);   /* el lanzador del chat no tapa la última línea */
}
.pie a { color: var(--papel); }
.pie__rejilla {
  display: grid;
  gap: var(--e-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.pie__marca { color: var(--crema); width: 8.5rem; }
.pie__titulo { font: 700 1rem / 1.3 var(--f-titulo); color: var(--papel); margin-bottom: var(--e-3); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3) var(--e-6);
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
  font-size: var(--t-rotulo);
  color: var(--texto-2);
}


/* 18. CHAT ----------------------------------------------------------------------
   Cerrado por defecto. Lanzador abajo a la derecha, compacto en móvil para no
   tapar contenido; aviso discreto (punto amarillo de etiqueta) sin sonido ni
   apertura automática. Abierto: panel lateral en escritorio, pantalla completa
   en móvil. El asistente trata de usted. */

.chat-lanzador {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-chat);
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 3.5rem;
  padding: 0.45rem 1.1rem 0.45rem 0.45rem;
  border: 0;
  border-radius: var(--r-3);
  background: var(--verde);
  color: var(--papel);
  font: 700 var(--t-peq) / 1.2 var(--f-texto);
  box-shadow: var(--sombra-flotante);
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.chat-lanzador:hover { background: var(--verde-oscuro); }
.chat-lanzador:active { transform: translateY(1px); }
.chat-lanzador:focus-visible { outline-color: var(--verde-hondo); }
.chat-lanzador__marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-2);
  background: var(--crema);
  color: var(--verde);
}
.chat-lanzador__marca svg { width: 1.75rem; height: auto; }
.chat-lanzador__aviso {                 /* mensaje sin leer: punto, no número */
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--etiqueta);
  box-shadow: 0 0 0 2.5px var(--verde);
}
.chat-lanzador[aria-expanded="true"] { display: none; }
@media (max-width: 40em) {
  .chat-lanzador { padding: 0.45rem; }
  .chat-lanzador__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.chat-panel {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  width: min(26rem, calc(100vw - 2rem));
  overflow: hidden;
  background: var(--crema);
  border-radius: var(--r-3);
  box-shadow: var(--sombra-flotante);
  animation: chat-entra var(--dur-2) var(--ease);
}
.chat-panel[hidden] { display: none; }
.chat-panel--demo { position: relative; inset: auto; width: 100%; max-width: 26rem; height: 46rem; animation: none; }
@media (max-width: 40em) {
  .chat-panel:not(.chat-panel--demo) { inset: 0; width: 100%; border-radius: 0; }
}

.chat-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  background: var(--verde-hondo);
  color: var(--papel);
}
.chat-cabecera__marca { width: 2.25rem; color: var(--crema); flex: none; }
.chat-cabecera__textos { display: grid; gap: 0.1rem; margin-right: auto; }
.chat-cabecera__titulo { font: 700 1.0625rem / 1.2 var(--f-titulo); color: var(--papel); margin: 0; }
.chat-cabecera__estado { color: var(--etiqueta); }
.chat-cerrar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--papel);
}
.chat-cerrar:hover { background: rgb(243 242 239 / 0.12); }
.chat-cerrar:focus-visible { outline-color: var(--etiqueta); }
.chat-cerrar svg { width: 1.35rem; height: 1.35rem; }
.chat-panel > .viga { margin-top: calc(var(--viga-alto) / -2); margin-bottom: calc(var(--viga-alto) / -2); z-index: 1; }

.chat-mensajes {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-4) var(--e-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.burbuja {
  max-width: 86%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-2);
  font-size: 0.96875rem;
  line-height: 1.5;
}
.burbuja p { margin: 0 0 0.5em; }
.burbuja p:last-child { margin: 0; }
.burbuja--asistente {
  align-self: flex-start;
  background: var(--papel);
  color: var(--acero);
  border: 1px solid var(--pared);
  border-top-left-radius: 0;
}
.burbuja--usuario {
  align-self: flex-end;
  background: var(--verde);
  color: var(--papel);
  border-top-right-radius: 0;
}
.burbuja--usuario a { color: var(--papel); }

.chat-escribiendo {                     /* indicador de «está escribiendo» */
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 0.8rem 0.9rem;
  background: var(--papel);
  border: 1px solid var(--pared);
  border-radius: var(--r-2);
  border-top-left-radius: 0;
}
.chat-escribiendo span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  animation: escribiendo 1.2s var(--ease) infinite;
}
.chat-escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.chat-escribiendo span:nth-child(3) { animation-delay: 0.3s; }

.chat-sugerencias { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.sugerencia {
  min-height: 2.75rem;                  /* 44 px: se pulsa con guantes */
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--verde);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--verde);
  font: 600 0.9rem / 1.25 var(--f-texto);
  text-align: left;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sugerencia:hover { background: var(--verde); color: var(--papel); }

.chat-alternativa {                     /* sin conexión o límite alcanzado */
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1.5px solid var(--acero-tenue);
  border-radius: var(--r-2);
  background: var(--papel);
}
.chat-alternativa p { margin: 0; font-size: var(--t-peq); }
.chat-alternativa__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chat-alternativa .boton { min-height: 2.75rem; padding: 0.55rem 1rem; font-size: 0.9375rem; }

.chat-entrada {
  display: flex;
  align-items: flex-end;
  gap: var(--e-2);
  padding: var(--e-3);
  border-top: 1px solid var(--pared);
  background: var(--papel);
}
.chat-entrada textarea {
  flex: 1;
  min-height: 2.75rem;
  max-height: 8rem;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--acero-tenue);
  border-radius: var(--r-2);
  background: var(--crema);
  color: var(--acero);
  line-height: 1.4;
  resize: none;
}
.chat-entrada textarea::placeholder { color: var(--acero-tenue); opacity: 1; }
.chat-entrada textarea:focus-visible { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgb(43 92 65 / 0.35); }
.chat-enviar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 0;
  border-radius: var(--r-2);
  background: var(--verde);
  color: var(--papel);
  transition: background-color var(--dur-1) var(--ease);
}
.chat-enviar:hover { background: var(--verde-oscuro); }
.chat-enviar:disabled { background: var(--acero-tenue); opacity: 0.55; cursor: not-allowed; }
.chat-enviar svg { width: 1.3rem; height: 1.3rem; }
.chat-nota { margin: 0; padding: 0 var(--e-4) var(--e-3); background: var(--papel); font-size: 0.75rem; color: var(--acero-tenue); }


/* 19. UTILIDADES Y MOVIMIENTO --------------------------------------------------- */

.oculto-visual {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salto {
  position: absolute;
  left: var(--e-4);
  top: -4rem;
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--verde);
  color: var(--papel);
  border-radius: var(--r-2);
  font-weight: 700;
}
.salto:focus { top: var(--e-4); }

@keyframes girar { to { transform: rotate(1turn); } }
@keyframes escribiendo {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@keyframes chat-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .chat-escribiendo span { opacity: 0.7; }
}