/* ==========================================================================
   FERVIMETAL — Hoja de estilos principal
   Base: BrandBook 2025. Paleta #E60519 / #0F050F / #FFFFFF.
   Titulares: Geometos Neue en el manual → Montserrat en web (libre).
   Si compran la licencia web de Geometos Neue, se agrega al inicio de --f-display.
   Texto: Roboto Slab (fuente secundaria del manual para cuerpos de texto).
   ========================================================================== */

:root {
  /* Color */
  --acero: #0F050F;          /* negro de marca */
  --acero-2: #1A111A;        /* superficies sobre negro */
  --acero-3: #2E252D;        /* líneas sobre negro */
  --rojo: #E60519;           /* rojo de marca */
  --rojo-2: #C40414;         /* hover */
  --rojo-hondo: #7E0511;     /* final de degradado */
  --rojo-texto: #B00314;     /* rojo para texto chico sobre blanco */
  --blanco: #FFFFFF;
  --galva: #EFEDED;          /* gris galvanizado (fondo claro) */
  --galva-2: #DEDADA;        /* bordes sobre claro */
  --zinc: #5F585E;           /* texto secundario sobre claro */
  --zinc-claro: #B8AFB7;     /* texto secundario sobre negro */
  --estudio: radial-gradient(ellipse 85% 75% at 50% 40%, #FFFFFF 0%, #F3F1F1 55%, #E7E4E4 100%); /* fondo de foto de producto */

  /* Tipografía */
  --f-display: "Montserrat", "Geometos Neue", "Arial Black", system-ui, sans-serif;
  --f-texto: "Roboto Slab", Rockwell, Georgia, serif;
  --f-contorno: "Fervi Contorno", "Montserrat", sans-serif; /* solo letras en contorno */

  /* Medidas */
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
  --corte: 18px;             /* esquina cortada: el "doblez" del isotipo */
  --cabecera: 84px;

  --foco: var(--rojo);
}

/* Montserrat Regular con los trazos fusionados (sin cruces internos al
   dibujarla en contorno). Subconjunto: mayúsculas, tildes, Ñ y números. */
@font-face {
  font-family: "Fervi Contorno";
  src: url("../fonts/fervi-contorno.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font: 400 1.0625rem/1.7 var(--f-texto);
  color: var(--acero);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-abierto { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

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

[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--blanco); color: var(--acero); padding: 10px 16px;
  font: 700 .85rem var(--f-display); text-decoration: none;
}
.saltar:focus { top: 12px; }

.envoltura { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.icono { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Tipografía de sección ---------- */
.titulo {
  position: relative;
  isolation: isolate;
  margin: 0;
  font: 800 clamp(1.75rem, 3.4vw, 2.75rem)/1.06 var(--f-display);
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--acero);
}
/* Título fantasma: recurso del BrandBook (VERSIONES / PALETA…) */
.titulo[data-fantasma] { padding-top: .95em; }
.titulo[data-fantasma]::before {
  content: attr(data-fantasma);
  position: absolute;
  z-index: -1;
  left: -.03em;
  bottom: .38em;
  font-size: 2.3em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: rgba(15, 5, 15, .065);
  pointer-events: none;
}
.titulo--claro { color: var(--blanco); }
.titulo--claro[data-fantasma]::before { color: rgba(255, 255, 255, .07); }

.encabezado { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.encabezado--fila { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.encabezado--fila > div { max-width: 720px; }
.encabezado__texto { margin: 16px 0 0; max-width: 60ch; color: var(--zinc); }
.encabezado--claro .encabezado__texto { color: var(--zinc-claro); }

/* Etiqueta de dato (las cajas negras de la web actual: ESPESORES, LARGO…) */
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  background: var(--acero); color: var(--blanco);
  font: 700 .76rem/1 var(--f-texto);
  text-transform: uppercase; letter-spacing: .07em;
}
.etiqueta .icono { width: 15px; height: 15px; }
.etiqueta--roja { background: var(--rojo); text-decoration: none; }
.etiqueta--roja:hover { background: var(--rojo-2); }

/* ---------- Botones y enlaces ---------- */
.botones { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 2px solid transparent;
  font: 700 .84rem/1 var(--f-display);
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn:focus-visible { clip-path: none; }
.btn__icono { flex: none; width: 18px; height: 18px; }
.btn--chico { min-height: 42px; padding: 0 18px; font-size: .76rem; }
.btn--rojo { background: var(--rojo); color: var(--blanco); }
.btn--rojo:hover { background: var(--rojo-2); }
.btn--negro { background: var(--acero); color: var(--blanco); }
.btn--negro:hover { background: var(--rojo); }
.btn--blanco { background: var(--blanco); color: var(--acero); }
.btn--blanco:hover { background: var(--acero); color: var(--blanco); }
.btn--linea { border-color: rgba(255, 255, 255, .75); background: transparent; color: var(--blanco); clip-path: none; }
.btn--linea:hover { background: var(--blanco); color: var(--acero); }

.enlace {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid currentColor;
  font: 700 .8rem/1.2 var(--f-display);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--rojo-texto); text-decoration: none;
}
.enlace:hover { color: var(--acero); }
.enlace .icono { width: 16px; height: 16px; }
.enlace--fuerte { color: var(--acero); border-bottom-color: var(--rojo); font-size: .86rem; }
.enlace--fuerte:hover { color: var(--rojo-texto); }
.enlace--claro { color: var(--blanco); border-bottom-color: var(--rojo); }
.enlace--claro:hover { color: var(--zinc-claro); }

/* ---------- Elementos gráficos del manual ---------- */
/* Perfil trapezoidal de la cobertura de aluzinc (línea divisoria) */
.perfil {
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='14' viewBox='0 0 80 14'%3E%3Cpath d='M0 10H10L15 2.5H25L30 10H42L44 12.5H48L50 10H62L64 12.5H68L70 10H80' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center / 80px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='14' viewBox='0 0 80 14'%3E%3Cpath d='M0 10H10L15 2.5H25L30 10H42L44 12.5H48L50 10H62L64 12.5H68L70 10H80' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center / 80px 14px;
}
.perfil--blanco { color: rgba(255, 255, 255, .92); }
.perfil--rojo { color: var(--rojo); }
.perfil--invertido { transform: scaleY(-1); }

/* Retícula de puntos: plancha perforada */
.puntos {
  position: absolute; top: 0; right: 0;
  width: min(46%, 620px); height: 70%;
  background-image: radial-gradient(rgba(255, 255, 255, .17) 1.3px, transparent 1.7px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(225deg, #000 10%, transparent 70%);
          mask-image: linear-gradient(225deg, #000 10%, transparent 70%);
  pointer-events: none;
}
.deco-chevrones { --deco-a: var(--rojo); --deco-b: var(--acero); }
.deco-rayas { color: var(--rojo); }

/* ==========================================================================
   CABECERA
   ========================================================================== */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 60;
  color: var(--blanco);
  transition: background-color .25s, box-shadow .25s;
}
/* El fondo sólido con desenfoque va en una capa aparte: si el backdrop-filter estuviera en la
   cabecera, el menú del celular (position: fixed, dentro de ella) quedaría encerrado en su franja. */
.cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(15, 5, 15, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--acero-3);
  opacity: 0; transition: opacity .25s;
}
.cabecera.is-solida::before { opacity: 1; }
.cabecera__fila { display: flex; align-items: center; gap: 36px; height: var(--cabecera); transition: height .25s; }
.cabecera.is-solida .cabecera__fila { height: 68px; }
.cabecera__marca { flex: none; }
.logo { width: clamp(150px, 15vw, 196px); height: auto; }
.logo__iso { fill: var(--rojo); }
.logo__palabra, .logo__lema { fill: currentColor; }

.menu__lista { display: flex; gap: clamp(18px, 2.2vw, 32px); list-style: none; margin: 0; padding: 0; }
.menu__enlace {
  position: relative; display: block; padding: 10px 0;
  font: 700 .8rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .07em;
  text-decoration: none; color: var(--blanco);
}
.menu__enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .2s;
}
.menu__enlace:hover::after, .menu__enlace[aria-current="page"]::after { transform: scaleX(1); }
.menu__pie { display: none; }

.cabecera__acciones { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.cabecera__tel { display: inline-flex; align-items: center; gap: 8px; font: 500 .9rem var(--f-texto); text-decoration: none; white-space: nowrap; }
.cabecera__tel .icono { color: var(--rojo); }
.cabecera__burger { display: none; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--blanco); cursor: pointer; }
.burger { display: grid; gap: 5px; width: 20px; margin: auto; }
.burger i { display: block; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.burger i:nth-child(2) { width: 70%; justify-self: end; }
[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.redes { display: flex; gap: 10px; }
.redes a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--blanco); border: 1px solid var(--acero-3); transition: background-color .18s, border-color .18s; }
.redes a:hover { background: var(--rojo); border-color: var(--rojo); }
.redes .icono { width: 17px; height: 17px; }

/* ==========================================================================
   HERO — casco + palabra de marca en contorno (la imagen de referencia)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; align-items: center;
  min-height: max(660px, 100svh);
  background: var(--acero);
  color: var(--blanco);
}
.hero::before { /* resplandor rojo inferior izquierdo */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 52% 62% at 0% 100%, rgba(230, 5, 25, .92) 0%, rgba(150, 4, 18, .5) 42%, transparent 72%),
    radial-gradient(ellipse 30% 40% at 100% 0%, rgba(230, 5, 25, .14), transparent 70%);
}
.hero__foto {
  position: absolute; z-index: 2;
  mix-blend-mode: lighten; /* el fondo oscuro de la foto deja ver las letras: el casco queda delante */
  top: 0; right: 0; bottom: 0;
  width: 62%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 30%; /* el casco siempre en la mitad derecha */
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 46%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 70% at 50% 46%, #000 50%, transparent 100%);
}
.hero__eco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__eco span {
  position: absolute;
  font: 400 clamp(84px, 12.6vw, 236px)/1 var(--f-contorno);
  letter-spacing: .015em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--rojo);
}
.hero__eco-a { top: calc(var(--cabecera) + 1vh); right: -.36em; }
.hero__eco-b { bottom: 1.5%; left: -.33em; }

.hero__chevrones {
  position: absolute; z-index: 3;
  left: clamp(10px, 2vw, 30px); top: 50%;
  width: 15px; height: auto; transform: translateY(-50%);
  --deco-b: var(--blanco);
}
.hero__rayas { position: absolute; z-index: 3; right: clamp(70px, 9vw, 150px); bottom: clamp(28px, 5vh, 48px); width: 190px; height: auto; color: var(--blanco); opacity: .9; }
.hero__redes { position: absolute; z-index: 3; right: clamp(12px, 2vw, 30px); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.hero__redes a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--blanco); opacity: .82; transition: opacity .18s, color .18s; }
.hero__redes a:hover { opacity: 1; color: var(--rojo); }
.hero__redes .icono { width: 17px; height: 17px; }

.hero__cuerpo { position: relative; z-index: 3; padding-block: calc(var(--cabecera) + 24px) 200px; }
.hero__titulo {
  max-width: 10.5ch;
  margin: 0 0 24px;
  font: 800 clamp(2.6rem, 5.2vw, 4.8rem)/.98 var(--f-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.hero__bajada { max-width: 44ch; margin: 0 0 34px; font-size: 1.1rem; color: #DDD5DC; }

/* Entrada única y orquestada del hero */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: fv-aparecer 1.6s ease-out both; }
  .hero__foto { animation: fv-foto 1.6s cubic-bezier(.2, .7, .1, 1) both; }
  .hero__eco-a { animation: fv-desde-der 1.4s .25s cubic-bezier(.2, .7, .1, 1) both; }
  .hero__eco-b { animation: fv-desde-izq 1.4s .35s cubic-bezier(.2, .7, .1, 1) both; }
  .hero__cuerpo { animation: fv-aparecer .9s .55s ease-out both; }
}
@keyframes fv-aparecer { from { opacity: 0; } }
@keyframes fv-foto { from { opacity: 0; transform: scale(1.04); } }
@keyframes fv-desde-der { from { opacity: 0; transform: translateX(6%); } }
@keyframes fv-desde-izq { from { opacity: 0; transform: translateX(-6%); } }

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.seccion { position: relative; overflow-x: clip; padding-block: clamp(72px, 9vw, 128px); }
.seccion--pegada { padding-top: clamp(40px, 5vw, 64px); }
.seccion--acero { background: var(--acero); color: var(--blanco); --foco: var(--blanco); }
/* Fondos claros: humo / mármol muy sutil (assets/img/fondos/humo.webp) en vez de blanco o gris plano */
.seccion:not(.seccion--acero):not(.seccion--acero-claro) { background: url("../img/fondos/humo.webp") center top / 1100px auto repeat, #FDFCFC; }
.seccion--acero-claro {
  background:
    linear-gradient(118deg, transparent 0 38%, rgba(255, 255, 255, .55) 38% 50%, transparent 50% 100%),
    url("../img/fondos/humo.webp") center top / 1100px auto repeat,
    var(--galva);
}

/* ---------- Categorías ---------- */
.categorias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0 0 44px; padding: 0; }
.categorias .categoria__foto { aspect-ratio: 16 / 10; }
.categorias .categoria__foto img { object-fit: contain; }
.categoria__enlace {
  display: block; flex: 1;
  background: var(--blanco); color: var(--acero); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
}
.categoria__enlace:focus-visible { clip-path: none; }
.categoria__foto { display: block; aspect-ratio: 520 / 504; overflow: hidden; background: var(--estudio); }
.categoria__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .7, .1, 1); }
.categoria__enlace:hover img { transform: scale(1.05); }
.categoria__nombre { display: block; padding: 14px 16px 2px; font: 800 .92rem/1.2 var(--f-display); text-transform: uppercase; }
.categoria__enlace:hover .categoria__nombre { color: var(--rojo-texto); }
.categoria__cuenta { display: block; padding: 0 16px 16px; font-size: .82rem; color: var(--zinc); }

/* ---------- Cotizador rápido ---------- */
.rapido__caja { position: relative; }
.rapido__tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--acero-3);
}
.rapido__tabs::-webkit-scrollbar { display: none; }
.rapido__tab {
  position: relative; flex: none;
  padding: 16px 20px 18px; border: 0; background: transparent;
  font: 700 .8rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--zinc-claro); cursor: pointer; white-space: nowrap;
}
.rapido__tab:hover { color: var(--blanco); }
.rapido__tab::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px; background: var(--rojo); transform: scaleX(0); transition: transform .2s; }
.rapido__tab[aria-selected="true"] { color: var(--blanco); }
.rapido__tab[aria-selected="true"]::after { transform: none; }

.rapido__panel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: var(--acero-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}
.rapido__foto { margin: 0; display: grid; place-items: center; padding: clamp(20px, 3vw, 44px); background: var(--estudio); }
.rapido__foto img { width: 100%; max-width: 440px; aspect-ratio: 520 / 504; object-fit: contain; }
.rapido__info { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 3.5vw, 44px); }
.rapido__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.rapido__nombre { margin: 0; font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--f-display); text-transform: uppercase; }
.rapido__norma { font: 500 .85rem var(--f-texto); color: var(--zinc-claro); }
.rapido__grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.rapido__grupo legend { margin-bottom: 10px; padding: 0; font: 700 .7rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: var(--zinc-claro); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: var(--blanco);
  font: 500 .86rem/1 var(--f-texto); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.chip:hover:not(:disabled) { border-color: var(--blanco); }
.chip[aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); }
.chip:disabled { opacity: .28; cursor: not-allowed; text-decoration: line-through; }
.chips--muestras { gap: 6px; }
.chip--muestra { width: 34px; height: 34px; min-height: 0; padding: 0; background: var(--c); border: 1px solid rgba(255, 255, 255, .25); }
.chip--muestra:hover:not(:disabled) { border-color: var(--blanco); background: var(--c); }
.chip--muestra[aria-pressed="true"] { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 2px var(--acero), 0 0 0 4px var(--rojo); }
.rapido__elegido { margin-left: 8px; font: 500 .84rem/1 var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--blanco); }
.chip__color { width: 14px; height: 14px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.rapido__fijos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .86rem; color: var(--zinc-claro); }
.rapido__fijos strong { color: var(--blanco); font-weight: 700; }
.rapido__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: auto; padding-top: 6px; }
.rapido__ayuda { margin: -8px 0 0; font-size: .8rem; color: var(--zinc-claro); }
.rapido .cantidad--oscura { border-color: rgba(255, 255, 255, .25); background: transparent; }
.rapido .cantidad--oscura button { color: var(--blanco); }
.rapido .cantidad--oscura button:hover { background: rgba(255, 255, 255, .08); }
.rapido .cantidad--oscura input[type="number"] { color: var(--blanco); border-inline-color: rgba(255, 255, 255, .15); }

/* ---------- Servicios ---------- */
.servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.servicio { display: flex; flex-direction: column; align-items: flex-start; }
.servicio__foto { width: 100%; aspect-ratio: 707 / 412; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.servicio__titulo { margin: 22px 0 8px; font: 800 1.2rem/1.15 var(--f-display); text-transform: uppercase; }
.servicio__texto { margin: 0 0 18px; color: var(--zinc); }
.servicio__lista { list-style: none; margin: 0 0 18px; padding: 0; color: var(--zinc); }
.servicio__lista li { position: relative; padding-left: 18px; }
.servicio__lista li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; background: var(--rojo); }
.servicio .enlace { margin-top: auto; }

/* ---------- Nosotros ---------- */
.nosotros__grid > *, .detalle > *, .capacidad > *, .contacto > * { min-width: 0; }
.nosotros__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 92px); align-items: center; }
.nosotros__foto { position: relative; margin: 0 0 30px; }
.nosotros__foto img { width: 100%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
.sello {
  position: absolute; left: clamp(-14px, -1vw, 0px); bottom: -30px;
  display: flex; align-items: center; gap: 14px;
  max-width: 290px; padding: 18px 22px;
  background: var(--acero); color: var(--blanco);
}
.sello strong { font: 900 3.6rem/.82 var(--f-display); color: var(--rojo); }
.sello span { font: 700 .82rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.nosotros__texto p { max-width: 58ch; }
.nosotros__texto .titulo { margin-bottom: 22px; }

.valores { display: grid; grid-template-columns: repeat(3, max-content); gap: 12px 30px; list-style: none; margin: 26px 0 30px; padding: 0; }
.valores li { display: flex; align-items: center; gap: 10px; font: 700 .86rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.valores__marca { width: 11px; height: 10px; color: var(--rojo); transform: rotate(90deg); }
.valores--grande { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.valores--grande li { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; background: var(--blanco); font-size: 1.05rem; }
.valores__icono { width: 34px; height: 34px; color: var(--rojo); }

.aviso {
  display: flex; align-items: flex-start; gap: 18px;
  margin: 0 0 30px; padding: 22px 24px;
  background: var(--acero); color: var(--blanco);
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
}
.aviso__icono { width: 36px; height: 36px; color: var(--rojo); }
.aviso__titulo { margin: 0 0 6px; font: 800 1rem/1.2 var(--f-display); text-transform: uppercase; }
.aviso p { margin: 0; font-size: .95rem; color: var(--zinc-claro); }
.aviso a { color: var(--blanco); }
.aviso--linea { align-items: center; flex-wrap: wrap; margin: 48px 0 0; background: var(--blanco); color: var(--acero); border-left: 4px solid var(--rojo); clip-path: none; }
.aviso--linea > div:first-of-type { flex: 1 1 320px; }
.aviso--linea p { color: var(--zinc); }
.aviso--linea a { color: var(--acero); }
.aviso--linea .botones a { color: var(--blanco); }

/* ---------- CTA Catálogo ---------- */
.cta-catalogo {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(84px, 11vw, 150px);
  background: linear-gradient(115deg, var(--rojo) 0%, var(--rojo-hondo) 42%, var(--acero) 78%);
  color: var(--blanco);
  --foco: var(--blanco);
}
.cta-catalogo__anio {
  position: absolute; z-index: -1; right: -.03em; bottom: -.22em;
  font: 400 clamp(170px, 27vw, 440px)/1 var(--f-contorno);
  letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.4px var(--rojo);
  pointer-events: none;
}
.cta-catalogo .btn--linea { background: rgba(15, 5, 15, .35); }
.cta-catalogo__cuerpo p { max-width: 50ch; margin: 18px 0 30px; font-size: 1.08rem; color: rgba(255, 255, 255, .86); }

/* ---------- Sedes ---------- */
.sedes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sede { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--galva-2); }
.sede__mapa iframe { display: block; width: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.sede__cuerpo { padding: 28px; }
.sede__nombre { margin: 0 0 14px; padding-left: 14px; border-left: 4px solid var(--rojo); font: 800 1.15rem/1.2 var(--f-display); text-transform: uppercase; }
.sede__dir { display: flex; gap: 10px; margin: 0 0 16px; color: var(--zinc); }
.sede__dir .icono { margin-top: .3em; color: var(--rojo); }
.sede__tels { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
.sede__tels a { display: inline-block; padding: 9px 12px; background: var(--acero); color: var(--blanco); font: 700 .86rem/1 var(--f-texto); text-decoration: none; }
.sede__tels a:hover { background: var(--rojo); }

/* ==========================================================================
   PÁGINAS INTERNAS
   ========================================================================== */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  /* misma altura en todas las páginas internas (el título de 1 o 2 líneas no cambia el alto) */
  min-height: clamp(460px, 38vw, 560px); padding: calc(var(--cabecera) + 56px) 0 72px;
  background: var(--acero); color: var(--blanco);
}
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 48% 75% at 0% 100%, rgba(230, 5, 25, .78), rgba(150, 4, 18, .3) 45%, transparent 75%);
}
.portada__foto {
  position: absolute; z-index: 0; top: 0; right: 0;
  width: 60%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  opacity: .7;
}
.portada__eco {
  /* alineada al borde derecho del contenido: la palabra entra completa y no se sale de la pantalla */
  position: absolute; z-index: 1; top: calc(var(--cabecera) + 6px); right: max(var(--margen), calc((100vw - var(--ancho)) / 2));
  max-width: calc(100% - 2 * var(--margen)); overflow: hidden;
  font: 400 clamp(60px, 10.5vw, 176px)/1 var(--f-contorno);
  /* palabras largas (CONTÁCTENOS) se achican para entrar enteras también en el celular */
  font-size: min(clamp(60px, 10.5vw, 176px), calc((100vw - 2 * var(--margen)) / (var(--letras, 8) * .72)));
  white-space: nowrap; color: transparent; -webkit-text-stroke: 1.3px var(--rojo);
  pointer-events: none;
}
.portada__cuerpo { position: relative; z-index: 2; }
/* legibilidad del texto sobre la foto */
.portada--foto::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 5, 15, .38) 0%, rgba(15, 5, 15, .12) 45%, transparent 65%);
}
.portada--foto .portada__titulo, .portada--foto .portada__bajada { text-shadow: 0 2px 24px rgba(15, 5, 15, .55); }
.portada__titulo { max-width: 18ch; margin: 0; font: 800 clamp(2.1rem, 4.8vw, 3.9rem)/1.02 var(--f-display); text-transform: uppercase; }
.portada__bajada { max-width: 56ch; margin: 18px 0 0; font-size: 1.06rem; color: #DDD5DC; }
.portada__rayas { position: absolute; z-index: 2; right: 6%; bottom: 34px; width: 210px; height: auto; }

.migas ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; font-size: .84rem; color: var(--zinc-claro); }
.migas li + li::before { content: "/"; margin-right: 8px; color: var(--rojo); }

/* Ficha de producto: banda de marca baja, migas y nombre en el contenido */
.portada.portada--compacta { min-height: 0; height: calc(var(--cabecera) + clamp(64px, 7vw, 104px)); padding: 0; }
.portada.portada--compacta .portada__eco { top: auto; bottom: 10px; font-size: clamp(40px, 6.4vw, 104px); }
.portada.portada--compacta .portada__rayas { left: max(var(--margen), calc((100vw - var(--ancho)) / 2)); right: auto; bottom: 22px; width: 150px; }
.seccion--producto { padding-top: clamp(22px, 3vw, 34px); }
.migas--claro ol { margin-bottom: clamp(18px, 2.4vw, 28px); color: var(--zinc); }
.migas--claro a { color: var(--acero); }
.migas--claro a:hover { color: var(--rojo-texto); }
.migas--claro [aria-current] { color: var(--zinc); }
.detalle__titulo { margin: 0 0 14px; font: 800 clamp(1.9rem, 3.4vw, 2.9rem)/1.04 var(--f-display); text-transform: uppercase; color: var(--acero); }
/* Nombre arriba de la columna derecha (escritorio) y antes de la foto (celular) */
.detalle { grid-template-areas: "foto titulo" "foto info"; grid-template-rows: auto 1fr; row-gap: 0; }
.detalle__titulo { grid-area: titulo; }
.detalle__foto { grid-area: foto; align-self: start; }
.detalle__info { grid-area: info; }
@media (max-width: 900px) {
  .detalle { grid-template-areas: "titulo" "foto" "info"; grid-template-rows: auto; row-gap: 18px; }
  .detalle__titulo { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .portada.portada--compacta .portada__rayas { display: none; }
}
.migas a { text-decoration: none; }
.migas a:hover { color: var(--blanco); }

/* ---------- Productos ---------- */


/* ---------- Catálogo con filtro lateral (assets/js/filtros.js) ---------- */
.catalogo { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.catalogo__filtros {
  position: sticky; top: calc(var(--cabecera) + 18px);
  max-height: calc(100vh - var(--cabecera) - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.filtros { padding: 20px 20px 6px; border-top: 4px solid var(--rojo); background: var(--blanco); }
.filtros__cabeza { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--galva-2); }
.filtros__titulo { display: flex; flex: 1; align-items: center; gap: 10px; margin: 0; font: 800 1rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.filtros__icono { width: 19px; height: 19px; color: var(--rojo); }
.filtros__limpiar { font: 700 .72rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--rojo-texto); text-underline-offset: 3px; }
.filtros__cerrar { display: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--galva-2); background: var(--blanco); color: var(--acero); cursor: pointer; }
.filtros__grupo { min-width: 0; margin: 0; padding: 18px 0; border: 0; border-bottom: 1px solid var(--galva-2); }
.filtros__grupo:last-of-type { border-bottom: 0; }
.filtros__sub { display: block; margin: 0 0 12px; padding: 0; font: 800 .72rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: var(--zinc); }
legend.filtros__sub { float: left; width: 100%; }          /* así la leyenda se porta como un título normal */
legend.filtros__sub + * { clear: both; }
.buscador { position: relative; }
.buscador input {
  width: 100%; min-height: 46px; padding: 0 40px; border: 1.5px solid #CBC5C8; border-radius: 0;
  background: var(--galva); color: var(--acero); font: 400 .95rem/1 var(--f-texto);
  transition: border-color .18s, background-color .18s;
}
.buscador input:hover { border-color: var(--zinc); }
.buscador input:focus { border-color: var(--acero); background: var(--blanco); outline: none; }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador__icono { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; translate: 0 -50%; color: var(--zinc); pointer-events: none; }
.buscador__borrar { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; translate: 0 -50%; border: 0; background: none; color: var(--zinc); cursor: pointer; }
.buscador__borrar:hover { color: var(--rojo); }
.buscador__borrar .icono { width: 15px; height: 15px; }
.lineas { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.linea {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 12px;
  border-left: 3px solid transparent; color: var(--acero); text-decoration: none; font: 600 .9rem/1.25 var(--f-texto);
  transition: background-color .18s, border-color .18s, color .18s;
}
.linea:hover { border-left-color: var(--rojo); background: var(--galva); }
.linea[aria-current="page"] { border-left-color: var(--rojo); background: var(--acero); color: var(--blanco); }
.linea--vacia:not([aria-current]) { color: #A9A2A6; }
.cuenta { flex: none; min-width: 26px; padding: 4px 6px; background: var(--galva); text-align: center; font: 700 .7rem/1 var(--f-display); color: var(--zinc); }
.linea[aria-current="page"] .cuenta { background: var(--rojo); color: var(--blanco); }
/* colores: lista con muestra (en el panel del celular, a dos columnas) */
.familias { display: grid; gap: 2px; }
.familia {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-left: 3px solid transparent; cursor: pointer; font: 500 .88rem/1.2 var(--f-texto);
  transition: border-color .18s, background-color .18s;
}
.familia input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.familia:hover { background: var(--galva); }
.familia:has(input:checked) { border-left-color: var(--rojo); background: var(--galva); font-weight: 700; }
.familia:has(input:focus-visible) { outline: 2px solid var(--acero); outline-offset: 2px; }
.familia__nombre { flex: 1; min-width: 0; }
.familia .cuenta { font-weight: 700; }
.familia__muestra { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(15, 5, 15, .2); transition: box-shadow .18s; }
.familia:has(input:checked) .familia__muestra { box-shadow: inset 0 0 0 1px rgba(15, 5, 15, .2), 0 0 0 2px var(--blanco), 0 0 0 4px var(--rojo); }
.familia__muestra--natural { background: linear-gradient(135deg, #EEF0F1, #A3A8AA 50%, #E4E6E7); }
.familia__muestra--transparente { background: repeating-conic-gradient(#D7E2E6 0 25%, #FFFFFF 0 50%) 50% / 8px 8px; }
.casillas { display: grid; gap: 2px; }
.casilla-filtro { display: flex; align-items: center; gap: 10px; padding: 7px 2px; cursor: pointer; font: 500 .86rem/1.2 var(--f-texto); }
.casilla-filtro input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--rojo); cursor: inherit; }
.casilla-filtro > span:first-of-type { flex: 1; }
.es-vacia { opacity: .42; cursor: not-allowed; }
.filtros__mas summary { padding: 8px 2px 2px; list-style: none; cursor: pointer; font: 700 .72rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--rojo-texto); }
.filtros__mas summary::-webkit-details-marker { display: none; }
.filtros__mas summary::after { content: " +"; }
.filtros__mas[open] summary { margin-bottom: 6px; }
.filtros__mas[open] summary::after { content: " –"; }
.filtros__pie { display: grid; gap: 8px; padding: 8px 0 18px; }
.filtros__pie .btn { width: 100%; }
.filtros__ver { display: none; }
.filtros.con-js [data-sin-js], .filtros.con-js .filtros__pie { display: none; }

.catalogo__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; }
.catalogo__abrir { display: none; }
.catalogo__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; background: var(--rojo); font-size: .7rem; }
.catalogo__cuenta { flex: 1; margin: 0; color: var(--zinc); }
.catalogo__cuenta strong { font: 800 1.2rem/1 var(--f-display); color: var(--acero); }
.orden { display: flex; align-items: center; gap: 10px; font: 700 .72rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--zinc); }
.orden select { min-height: 42px; padding: 0 12px; border: 1.5px solid #CBC5C8; border-radius: 0; background: var(--blanco); color: var(--acero); font: 500 .9rem/1 var(--f-texto); cursor: pointer; }
.orden select:hover { border-color: var(--zinc); }
.activos { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; }
.activo {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 0;
  background: var(--acero); color: var(--blanco); font: 600 .8rem/1 var(--f-texto); text-decoration: none; cursor: pointer;
  transition: background-color .18s;
}
.activo:hover { background: var(--rojo); }
.activo .icono { width: 13px; height: 13px; }
.activo .familia__muestra { width: 14px; height: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.productos > [hidden] { display: none !important; }
.catalogo__vacio { padding: 48px 28px; border: 1.5px dashed #CBC5C8; background: var(--blanco); text-align: center; }
.catalogo__vacio-icono { width: 40px; height: 40px; color: var(--rojo); }
.catalogo__vacio h3 { margin: 14px 0 8px; font: 800 1.15rem/1.2 var(--f-display); text-transform: uppercase; }
.catalogo__vacio p { max-width: 52ch; margin: 0 auto 22px; color: var(--zinc); }
.catalogo__vacio .botones { justify-content: center; }
html.sin-scroll { overflow: hidden; }
/* al filtrar, las tarjetas se reacomodan; la página no hace el fundido de cambio de página */
.vt-filtro::view-transition-old(root), .vt-filtro::view-transition-new(root) { animation: none; }
.vt-filtro::view-transition-group(*) { animation-duration: .42s; animation-timing-function: var(--curva, ease); }

@media (max-width: 900px) {
  .catalogo { grid-template-columns: minmax(0, 1fr); }
  .catalogo__filtros { position: static; max-height: none; overflow: visible; }
  /* con JavaScript, el filtro es un panel que entra desde la izquierda */
  .catalogo.con-js .catalogo__abrir { display: inline-flex; }
  .catalogo.con-js .catalogo__filtros {
    position: fixed; z-index: 85; inset: 0 auto 0 0; width: min(88vw, 380px); max-height: none; overflow-y: auto;
    background: var(--blanco); box-shadow: 0 0 60px rgba(15, 5, 15, .35);
    translate: -105% 0; visibility: hidden; transition: translate .38s var(--curva, ease), visibility 0s .38s;
  }
  .catalogo.con-js .catalogo__filtros.abierto { translate: 0 0; visibility: visible; transition: translate .38s var(--curva, ease); }
  .catalogo.con-js .filtros { min-height: 100%; display: flex; flex-direction: column; padding-top: 0; border-top: 0; }
  .catalogo.con-js .filtros__cabeza { position: sticky; top: 0; z-index: 1; padding-top: 16px; background: var(--blanco); }
  .catalogo.con-js .filtros__cerrar { display: grid; }
  .catalogo.con-js .filtros.con-js .filtros__pie { display: grid; position: sticky; bottom: 0; margin-top: auto; padding: 14px 0 18px; border-top: 1px solid var(--galva-2); background: var(--blanco); }
  .catalogo.con-js .filtros__ver { display: inline-flex; }
  .catalogo.con-js .familias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .catalogo__fondo { position: fixed; inset: 0; z-index: 84; background: rgba(15, 5, 15, .55); }
  .orden span { display: none; }
}

.specs { display: flex; flex-wrap: wrap; gap: 16px 36px; margin: 0 0 32px; }
.specs div { display: flex; align-items: center; gap: 12px; }
.specs dd { margin: 0; font-weight: 700; }
.specs--detalle { flex-direction: column; gap: 12px; margin: 24px 0; }

.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.productos--fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarjeta__enlace {
  display: block; flex: 1;
  background: var(--blanco); color: var(--acero); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
}
.tarjeta__enlace:focus-visible { clip-path: none; }
.tarjeta__foto { display: block; aspect-ratio: 520 / 504; overflow: hidden; background: var(--estudio); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .7, .1, 1); }
.tarjeta__enlace:hover img { transform: scale(1.05); }
.tarjeta__nombre { display: block; padding: 14px 14px 2px; font: 800 .88rem/1.25 var(--f-display); text-transform: uppercase; }
.tarjeta__enlace:hover .tarjeta__nombre { color: var(--rojo-texto); }
.tarjeta__cat { display: block; padding: 0 14px 14px; font-size: .8rem; color: var(--zinc); }

.detalle { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); column-gap: clamp(32px, 4.4vw, 64px); align-items: start; }
.detalle__foto { margin: 0; }
.detalle__foto img { width: 100%; background: var(--estudio); clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.detalle__resumen { margin: 20px 0; font-size: 1.18rem; line-height: 1.6; }
.detalle__nota { margin: 0 0 26px; font-size: .95rem; color: var(--zinc); }
.detalle .botones { margin-bottom: 26px; }

/* ---------- Servicios (página) ---------- */
.capacidad { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.capacidad .titulo { margin-bottom: 18px; }
.capacidad .btn { margin-top: 6px; }
.capacidad__foto { position: relative; margin: 0; padding-left: 48px; }
.cota { position: absolute; left: 10px; top: 10%; bottom: 10%; border-left: 1px solid var(--rojo); }
.cota::before, .cota::after { content: ""; position: absolute; left: -8px; width: 15px; height: 1px; background: var(--rojo); }
.cota::before { top: 0; } .cota::after { bottom: 0; }
.cota span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; padding: 6px 10px; background: var(--rojo); color: var(--blanco); font: 700 .78rem/1 var(--f-texto); }

.materiales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.materiales img { width: 100%; aspect-ratio: 671 / 438; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); }
.materiales h3 { position: relative; display: inline-block; margin: -24px 0 0 18px; padding: 13px 16px; background: var(--blanco); color: var(--acero); font: 800 .9rem/1.2 var(--f-display); text-transform: uppercase; }

/* Pasos: secuencia real → numeración */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { position: relative; padding-right: 48px; counter-increment: paso; }
.pasos li + li { padding-left: 40px; border-left: 1px solid var(--galva-2); }
.pasos li::before { content: counter(paso); display: block; margin-bottom: 16px; font: 900 clamp(4rem, 7vw, 6rem)/.85 var(--f-display); color: var(--rojo); }
.pasos li:not(:last-child)::after {
  content: ""; position: absolute; right: 16px; top: 1.6rem; width: 16px; height: 22px;
  background: var(--acero); clip-path: polygon(0 0, 100% 50%, 0 100%, 38% 50%);
}
.pasos h3 { margin: 0 0 8px; font: 800 1.15rem/1.2 var(--f-display); text-transform: uppercase; }
.pasos p { margin: 0; color: var(--zinc); }

/* ---------- Nosotros (página) ---------- */
.mision { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.mision p { max-width: 46ch; margin-top: 18px; font-size: 1.14rem; color: #DDD5DC; }
.mision article + article { padding-left: 48px; border-left: 1px solid var(--acero-3); }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contacto__form .titulo { margin-bottom: 26px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font: 700 .78rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 14px; border: 1.5px solid #CBC5C8; border-radius: 0;
  background: var(--blanco); color: var(--acero); font: 400 1rem/1.4 var(--f-texto);
}
.campo textarea { resize: vertical; min-height: 140px; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--zinc); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acero); }
.campo [aria-invalid="true"] { border-color: var(--rojo); }
.campo__error { margin: 0; font-size: .85rem; color: var(--rojo-texto); }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alerta { display: flex; gap: 12px; margin-bottom: 22px; padding: 14px 16px; border-left: 4px solid var(--rojo); background: #FDECEE; }
.alerta p { margin: 0; }
.alerta--ok { border-color: #2E7D32; background: #EDF6EE; }
.alerta--ok .icono { color: #2E7D32; margin-top: .25em; }

.contacto__canales {
  position: relative; overflow: hidden;
  padding: 34px 32px 90px;
  background: var(--acero); color: var(--blanco);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  --foco: var(--blanco);
}
.contacto__canales .titulo { margin-bottom: 10px; font-size: 1.5rem; }
.canal { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--acero-3); color: var(--blanco); text-decoration: none; }
.canal .icono { width: 26px; height: 26px; color: var(--rojo); }
.canal span { display: flex; flex-direction: column; font-size: .95rem; color: var(--zinc-claro); }
.canal strong { font: 700 .82rem/1.4 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--blanco); }
.canal:hover strong { color: var(--rojo); }
.contacto__canales .redes { margin-top: 26px; }
.contacto__chevrones { position: absolute; right: 28px; bottom: 30px; width: 150px; height: auto; --deco-b: var(--blanco); }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie { background: var(--acero); color: #CFC7CE; --foco: var(--blanco); }
.pie__cuerpo { display: grid; grid-template-columns: 1.35fr .85fr 1.4fr 1.2fr; gap: 40px; padding-block: 64px 48px; }
.pie .logo-compacto { width: 150px; height: auto; margin-bottom: 20px; }
.pie .logo__iso { fill: var(--rojo); }
.pie .logo__palabra { fill: var(--blanco); }
.pie__marca p { max-width: 34ch; font-size: .92rem; }
.pie__titulo { margin: 0 0 16px; font: 800 .8rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .09em; color: var(--blanco); }
.pie__titulo--sep { margin-top: 30px; }
.pie ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--blanco); }
.pie__contacto li { display: flex; align-items: flex-start; gap: 10px; }
.pie__contacto .icono { margin-top: .32em; color: var(--rojo); }
.pagos { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.pagos li { padding: 6px 8px; border: 1px solid var(--acero-3); font: 700 .7rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--blanco); }
.pie__base { display: flex; align-items: center; gap: 18px; padding-block: 22px 30px; border-top: 1px solid var(--acero-3); font-size: .8rem; }
.pie__regla { flex: 1; height: 1px; background: var(--rojo); }
.pie__credito { white-space: nowrap; }
.pie__credito strong { color: var(--blanco); font-weight: 700; transition: color .2s; }
.pie__credito:hover strong { color: var(--rojo); }
/* Acceso al Libro de Reclamaciones */
.libro { display: flex; align-items: center; gap: 14px; max-width: 300px; padding: 14px 16px; border: 1px solid var(--acero-3); color: var(--blanco); transition: border-color .2s, background-color .2s; }
.libro:hover { border-color: var(--rojo); background: rgba(230, 5, 25, .1); }
.libro .libro__icono { flex: none; width: 34px; height: 34px; color: var(--rojo); }
.libro strong { display: block; font: 800 .8rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.libro small { display: block; margin-top: 4px; font-size: .8rem; color: #CFC7CE; }

/* ==========================================================================
   LIBRO DE RECLAMACIONES (página)
   ========================================================================== */
.hoja { max-width: 920px; }
.hoja__cabeza { display: grid; gap: 6px; margin-bottom: 18px; }   /* título y fecha siempre en dos renglones: no saltan al cargar la tipografía */
.hoja__cabeza .titulo { margin: 0; }
.hoja__fecha { margin: 0; font-size: .9rem; color: var(--zinc); }
.hoja__proveedor { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 24px; margin: 0 0 30px; padding: 18px 22px; border: 1px solid var(--galva-2); border-left: 4px solid var(--rojo); background: var(--blanco); }
.hoja__proveedor dt { margin-bottom: 6px; font: 700 .7rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--zinc); }
.hoja__proveedor dd { margin: 0; font-weight: 500; }
.hoja__bloque { margin: 0 0 26px; padding: 26px; border: 1px solid var(--galva-2); background: var(--blanco); }
.hoja__bloque legend { display: flex; align-items: center; gap: 12px; margin-left: -10px; padding: 0 10px; font: 800 .95rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.hoja__bloque legend span { display: grid; place-items: center; width: 30px; height: 30px; background: var(--rojo); color: var(--blanco); font-size: .85rem; }
.campo__etiqueta { font: 700 .78rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones--definidas { flex-direction: column; }
.campo .opcion, .campo .casilla, .hoja .casilla {
  display: flex; align-items: flex-start; gap: 10px;
  font: 400 .95rem/1.45 var(--f-texto); text-transform: none; letter-spacing: 0; cursor: pointer;
}
.campo .opcion { padding: 12px 16px; border: 1px solid var(--galva-2); background: var(--blanco); transition: border-color .18s, box-shadow .18s; }
.campo .opcion:has(input:checked) { border-color: var(--rojo); box-shadow: inset 3px 0 0 var(--rojo); }
.opcion input, .casilla input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rojo); }
.opciones[aria-invalid="true"] .opcion, .casilla--error { border-color: var(--rojo); color: var(--rojo-texto); }
.hoja__form:not(:has([data-menor]:checked)) [data-apoderado] { display: none; }
.hoja__envio { display: grid; justify-items: start; gap: 16px; margin: 6px 0 26px; }
.hoja__notas { display: grid; gap: 6px; margin: 0; padding: 16px 0 0 18px; border-top: 1px solid var(--galva-2); font-size: .85rem; color: var(--zinc); }
.hoja__texto { margin: 0 0 24px; padding: 6px 24px 22px; border: 1px solid var(--galva-2); background: var(--blanco); overflow-wrap: anywhere; }
.hoja__texto h3 { margin: 22px 0 10px; font: 800 .82rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.hoja__texto > p { margin: 0 0 18px; color: var(--zinc); }
.hoja__datos { display: grid; gap: 8px; margin: 0; }
.hoja__datos > div { display: grid; grid-template-columns: minmax(130px, 210px) 1fr; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid #F1EFEF; }
.hoja__datos dt { font: 700 .72rem/1.5 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--zinc); }
.hoja__datos dd { margin: 0; }
@media (max-width: 640px) { .hoja__datos > div { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 640px) { .hoja__bloque { padding: 18px 14px; } }
@media print {
  .cabecera, .pie, .flotantes, .carrito, .portada, .saltar, .hoja .botones, .hoja .alerta { display: none !important; }
  .seccion { padding: 0 !important; background: none !important; }
  .hoja__texto { border: 0; padding: 0; }
}


/* ==========================================================================
   ACCIONES RÁPIDAS (barra externa bajo cada tarjeta)
   ========================================================================== */
.categoria, .tarjeta { display: flex; flex-direction: column; gap: 4px; }
.acciones { display: flex; gap: 4px; }
.accion {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  border: 0; background: var(--acero); color: var(--blanco);
  font: 700 .72rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s;
}
.accion:hover { background: var(--rojo); }
.accion--agregar { flex: 1; background: var(--rojo); }
.accion--agregar:hover { background: var(--rojo-2); }
.accion--icono { flex: none; width: 44px; padding: 0; }
.accion__icono { width: 17px; height: 17px; flex: none; }
.accion:active { transform: translateY(1px); }

/* ---------- Ficha: sellos y configurador ---------- */
.detalle__sellos { display: flex; flex-wrap: wrap; gap: 8px; }
.specs--detalle div { align-items: flex-start; }
.specs--detalle dt { flex: none; min-width: 96px; justify-content: center; }
.specs--detalle dd { font-weight: 500; line-height: 1.55; }
/* Panel único: arma tu pedido + ficha técnica */
.pedido { margin-top: 30px; background: var(--galva); border-top: 4px solid var(--rojo); }
.configurador { padding: 26px; }
.configurador__seleccion { margin: -6px 0 20px; padding: 10px 14px; background: var(--blanco); border-left: 3px solid var(--rojo); font-size: .9rem; line-height: 1.45; }
.configurador__seleccion strong { color: var(--acero); white-space: nowrap; }
.configurador__titulo { margin: 0 0 18px; font: 800 1.15rem/1.2 var(--f-display); text-transform: uppercase; }
.configurador__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-bottom: 22px; }
.configurador .detalle__nota { margin: 18px 0 0; font-size: .86rem; }
.configurador .detalle__nota a { color: var(--acero); }
select option:disabled { color: #B9B2B6; }

.cantidad { display: inline-flex; align-self: flex-start; align-items: stretch; height: 50px; border: 1.5px solid #CBC5C8; background: var(--blanco); }
.cantidad button { display: grid; place-items: center; width: 44px; border: 0; background: transparent; color: var(--acero); cursor: pointer; }
.cantidad button:hover { background: var(--galva); }
.cantidad button .icono { width: 16px; height: 16px; }
.cantidad input[type="number"] {
  width: 64px; padding: 0; border: 0; border-inline: 1px solid var(--galva-2);
  text-align: center; font: 700 1rem/1 var(--f-texto); color: var(--acero); background: transparent;
  -moz-appearance: textfield; appearance: textfield;
}
.cantidad input::-webkit-inner-spin-button, .cantidad input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad--chica { height: 36px; }
.cantidad--chica button { width: 34px; }
.cantidad--chica input[type="number"] { width: 46px; font-size: .9rem; }

/* ==========================================================================
   BOTONES FLOTANTES: pestañas pegadas al borde derecho (carrito sobre WhatsApp)
   ========================================================================== */
.flotantes {
  position: fixed; right: 0; bottom: clamp(16px, 4vh, 32px); z-index: 55;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  filter: drop-shadow(0 8px 18px rgba(15, 5, 15, .32));
}
.flotante {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  height: 54px; min-width: 54px; padding: 0 15px;
  border: 0; border-radius: 0; color: var(--blanco); text-decoration: none; cursor: pointer;
  font: 700 .76rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em;
  transition: background-color .18s;
}
.flotante .icono { flex: none; width: 24px; height: 24px; }
.flotante--carrito { background: var(--rojo); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.flotante--carrito:hover { background: var(--rojo-2); }
.flotante--wsp { background: var(--acero); }
.flotante--wsp:hover { background: var(--rojo); }
.flotante:focus-visible { outline: 3px solid var(--blanco); outline-offset: -6px; }
/* El texto se despliega hacia la izquierda solo con mouse o teclado */
.flotante__txt { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .25s ease, opacity .2s ease, margin .25s ease; }
@media (hover: hover) {
  .flotante:hover .flotante__txt { max-width: 140px; opacity: 1; margin-right: 10px; }
}
.flotante:focus-visible .flotante__txt { max-width: 140px; opacity: 1; margin-right: 10px; }
.flotante__n {
  position: absolute; top: 5px; right: 5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--blanco); color: var(--acero);
  font: 800 .66rem/1 var(--f-display);
}
@media (prefers-reduced-motion: no-preference) {
  .flotante--carrito.is-pulso { animation: fv-pulso .45s cubic-bezier(.2, .7, .1, 1); }
}
@keyframes fv-pulso { 40% { transform: translateX(-8px); } }

/* ==========================================================================
   PANEL DESLIZANTE DEL CARRITO
   ========================================================================== */
body.carrito-abierto { overflow: hidden; }
.carrito { position: fixed; inset: 0; z-index: 90; }
.carrito__fondo { position: absolute; inset: 0; background: rgba(15, 5, 15, .62); opacity: 0; transition: opacity .3s; }
.carrito__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(460px, 100%);
  background: var(--blanco);
  box-shadow: -24px 0 60px rgba(15, 5, 15, .35);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2, .7, .1, 1);
  outline: none;
}
.carrito.is-abierto .carrito__fondo { opacity: 1; }
.carrito.is-abierto .carrito__panel { transform: none; }

.carrito__cabeza {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 22px 30px; background: var(--acero); color: var(--blanco);
  --foco: var(--blanco);
}
.carrito__titulo { margin: 0; font: 800 1.4rem/1.1 var(--f-display); text-transform: uppercase; }
.carrito__resumen { margin: 6px 0 0; font-size: .85rem; line-height: 1.45; color: var(--zinc-claro); }
.carrito__cerrar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--acero-3); background: transparent; color: var(--blanco); cursor: pointer; }
.carrito__cerrar:hover { background: var(--rojo); border-color: var(--rojo); }
.carrito__rayas { position: absolute; left: 22px; bottom: -10px; width: 150px; height: auto; }

.carrito__lista { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 14px 22px; overscroll-behavior: contain; }
.item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--galva-2); }
.item:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .item.is-nuevo { animation: fv-nuevo 1.5s ease-out; } }
@keyframes fv-nuevo { from { background: #FDE3E6; } }
.item__foto { width: 72px; height: 70px; object-fit: contain; padding: 4px; background: var(--estudio); }
.item__nombre { font: 800 .9rem/1.2 var(--f-display); text-transform: uppercase; color: var(--acero); text-decoration: none; }
.item__nombre:hover { color: var(--rojo-texto); }
.item__cat { display: block; margin: 3px 0 10px; font-size: .78rem; color: var(--zinc); }
.item__attrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.item__attrs:empty { display: none; }
.item__attr label { display: block; margin-bottom: 3px; font: 700 .64rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--zinc); }
.item__attr select { width: 100%; padding: 7px 8px; border: 1.5px solid #CBC5C8; border-radius: 0; background: var(--blanco); color: var(--acero); font: 400 .82rem/1.3 var(--f-texto); }
.item__attr select.is-pendiente { border-color: #E8A0A8; border-style: dashed; }
.item__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item__quitar { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border: 0; background: none; color: var(--zinc); font: 500 .8rem var(--f-texto); cursor: pointer; }
.item__quitar:hover { color: var(--rojo-texto); }
.item__quitar .icono { width: 16px; height: 16px; }

.carrito__vacio { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 30px; text-align: center; color: var(--zinc); }
.carrito__vacio-icono { width: 52px; height: 52px; color: #D2CCCF; }
.carrito__vacio strong { display: block; color: var(--acero); font-family: var(--f-display); text-transform: uppercase; margin-bottom: 4px; }

.carrito__pie { display: grid; gap: 12px; padding: 16px 22px 22px; border-top: 1px solid var(--galva-2); background: var(--galva); }
.carrito__nota span { display: block; margin-bottom: 6px; font: 700 .72rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.carrito__nota em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--zinc); }
.carrito__nota textarea { width: 100%; padding: 10px 12px; border: 1.5px solid #CBC5C8; border-radius: 0; background: var(--blanco); font: 400 .9rem/1.4 var(--f-texto); resize: vertical; }
.carrito__enviar { width: 100%; }
.carrito__extra { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .78rem; line-height: 1.4; color: var(--zinc); }
.carrito__vaciar { flex: none; padding: 6px 0; border: 0; background: none; color: var(--rojo-texto); font: 700 .74rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; text-decoration: underline; cursor: pointer; }

/* ==========================================================================
   FICHA TÉCNICA (tablas y datos transcritos de los PDF)
   ========================================================================== */
.tecnica { border-top: 1px solid var(--galva-2); }
.tecnica__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 20px; margin-bottom: 22px; }
/* Pestañas de la ficha técnica */
.tecnica { padding-block: clamp(44px, 6vw, 72px); }
.tecnica__titulo { margin: 0; font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--f-display); text-transform: uppercase; }
.pestanas__lista {
  display: flex; gap: 0; margin: 0 0 26px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--galva-2);
}
.pestanas__lista::-webkit-scrollbar { display: none; }
.pestanas__tab {
  position: relative; flex: none; padding: 15px 22px; border: 0; background: transparent; cursor: pointer;
  color: var(--zinc); font: 800 .82rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em;
  transition: color .15s;
}
.pestanas__tab::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 3px; background: var(--rojo); transform: scaleX(0); transition: transform .2s; }
.pestanas__tab:hover { color: var(--acero); }
.pestanas__tab[aria-selected="true"] { color: var(--acero); }
.pestanas__tab[aria-selected="true"]::after { transform: none; }
.pestanas__tab:focus-visible { outline: 2px solid var(--acero); outline-offset: -4px; }
.pestanas__panel:focus-visible { outline: 2px solid var(--galva-2); outline-offset: 6px; }
.subpestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.subpestanas__tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border: 1.5px solid var(--galva-2); background: var(--blanco); color: var(--acero); cursor: pointer;
  font: 700 .78rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em;
  transition: border-color .15s, background-color .15s, color .15s;
}
.subpestanas__tab span { font: 500 .74rem/1 var(--f-texto); color: var(--zinc); }
.subpestanas__tab:hover { border-color: var(--acero); }
.subpestanas__tab[aria-selected="true"] { background: var(--acero); border-color: var(--acero); color: var(--blanco); }
.subpestanas__tab[aria-selected="true"] span { color: var(--zinc-claro); }
.subpestanas__tab:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.tecnica__cuenta { margin-left: 6px; font: 500 .78rem/1 var(--f-texto); color: var(--zinc); text-transform: none; }
.pestanas__panel > .tecnica__datos { margin-bottom: 18px; }
.pestanas__panel .tabla:last-child, .pestanas__panel .tecnica__resumen:last-child, .pestanas__panel .tecnica__dibujos:last-child { margin-bottom: 0; }
.tecnica__fuente { margin-top: 22px !important; }
.tecnica .tecnica__colores--rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px 18px; padding: 20px; background: var(--galva); }
.tecnica .tecnica__ventajas--rejilla { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px 28px; padding: 20px; background: var(--galva); }
.tecnica__datos { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)) !important; }
@media (max-width: 640px) {
  .tecnica__datos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tecnica__datos div { padding: 11px 12px; }
  .tecnica__datos dd { font-size: .92rem; }
  .tecnica .tecnica__colores--rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: .82rem; gap: 10px; padding: 16px; }
  .pestanas__tab { padding: 14px 14px; font-size: .76rem; }
  .pestanas__tab::after { left: 14px; right: 14px; }
  .pestanas__lista { margin-inline: -16px; padding-inline: 8px; }
}
.tecnica__normas { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.tecnica__normas li { padding: 6px 10px; background: var(--acero); color: var(--blanco); font: 700 .74rem/1 var(--f-texto); letter-spacing: .04em; }
.tecnica__resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; margin-bottom: 40px; }
.tecnica__datos, .tecnica__props { display: grid; gap: 0; margin: 0; }
.tecnica__datos { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 2px; }
.tecnica__datos div { padding: 14px 16px; background: var(--galva); border-left: 3px solid var(--rojo); }
.tecnica__datos dt, .tecnica__props dt { font: 700 .68rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .07em; color: var(--zinc); }
.tecnica__datos dd { margin: 6px 0 0; font: 700 1rem/1.35 var(--f-texto); }
.tecnica__bloque { padding: 20px; background: var(--galva); }
.tecnica__sub { margin: 0 0 14px; font: 800 .9rem/1 var(--f-display); text-transform: uppercase; }
.tecnica__colores { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.tecnica__colores li { display: flex; align-items: center; gap: 8px; }
.tecnica__muestra { width: 22px; height: 22px; background: var(--c, repeating-linear-gradient(45deg, #ccc 0 3px, #eee 3px 6px)); box-shadow: inset 0 0 0 1px rgba(15, 5, 15, .2); }
.tecnica__props div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--galva-2); }
.tecnica__props div:last-child { border-bottom: 0; }
.tecnica__props dd { margin: 0; font-weight: 700; text-align: right; }

.tecnica__dibujos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-bottom: 40px; }
.dibujo { margin: 0; padding: 20px; background: var(--blanco); border: 1px solid var(--galva-2); }
.dibujo img { width: 100%; height: auto; mix-blend-mode: multiply; }
.tabla { margin: 0 0 34px; }
.tabla__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font: 800 1rem/1.2 var(--f-display); text-transform: uppercase; }
.tabla__titulo span { font: 500 .78rem var(--f-texto); text-transform: none; color: var(--zinc); }
.tabla__marco { overflow: auto; max-height: 560px; border: 1px solid var(--galva-2); background: var(--blanco); }
.tabla__marco:focus-visible { outline-offset: 2px; }
.tabla table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 .86rem/1.3 var(--f-texto); font-variant-numeric: tabular-nums; }
.tabla thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 11px 12px; background: var(--acero); color: var(--blanco);
  border-bottom: 3px solid var(--rojo);
  font: 700 .7rem/1.25 var(--f-display); text-transform: uppercase; letter-spacing: .04em; text-align: left; vertical-align: bottom;
  min-width: 82px;
}
.tabla tbody th, .tabla tbody td { padding: 8px 12px; border-bottom: 1px solid #ECE9E9; white-space: nowrap; }
.tabla tbody th { position: sticky; left: 0; z-index: 1; background: inherit; font-weight: 700; text-align: left; }
.tabla thead th:first-child { left: 0; z-index: 3; }
.tabla thead tr.tabla__grupos th[colspan] { text-align: center; border-bottom: 1px solid var(--acero-3); background: #1E151E; }
.tabla thead tr + tr th { top: 34px; }
.tabla thead tr.tabla__grupos th[rowspan] { vertical-align: bottom; }
.tabla tbody tr { background: var(--blanco); }
.tabla tbody tr:nth-child(even) { background: #F8F6F6; }
.tabla tbody tr:hover { background: #FDECEE; }
.tabla tr.tabla__nueva th, .tabla tr.tabla__nueva td { border-top: 2px solid var(--acero); }
.tabla__vacio { color: #C9C2C6; }
.tabla__nota { margin: 8px 0 0; font-size: .82rem; color: var(--zinc); }
.tecnica__notas { margin: 0 0 18px; padding-left: 18px; color: var(--zinc); font-size: .92rem; }
.tecnica__fuente { margin: 0; font-size: .8rem; color: var(--zinc); }
.tecnica__ventajas { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: .9rem; line-height: 1.4; }
.tecnica__ventajas li { position: relative; padding-left: 22px; }
.tecnica__ventajas li::before { /* chevrón de marca */
  content: ""; position: absolute; left: 2px; top: .42em; width: 9px; height: 9px;
  border-right: 2.5px solid var(--rojo); border-top: 2.5px solid var(--rojo); transform: rotate(45deg);
}
.tecnica__fijacion { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tecnica__fijacion li { padding: 8px 12px; background: var(--blanco); border-left: 3px solid var(--acero); font: 700 .82rem/1.2 var(--f-texto); }

/* ==========================================================================
   COLORES: muestras del configurador y puntos de las tarjetas
   ========================================================================== */
.campo__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 700 .78rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.muestras__elegido { font: 500 .86rem/1.2 var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--zinc); }
.muestras { display: flex; flex-wrap: wrap; gap: 8px; }
.muestra {
  width: 38px; height: 38px; padding: 0; border: 0; cursor: pointer;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(15, 5, 15, .22);
  transition: transform .15s, box-shadow .15s;
}
.muestra:hover:not(:disabled) { transform: translateY(-2px); }
.muestra[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(15, 5, 15, .22), 0 0 0 2px var(--galva), 0 0 0 4px var(--rojo); }
.muestra:focus-visible { outline: 2px solid var(--acero); outline-offset: 5px; }
.muestra:not(.muestra--foto) { background-image: linear-gradient(135deg, transparent 0 74%, rgba(255, 255, 255, .55) 74% 76%, transparent 76%); }
.muestra:disabled { cursor: not-allowed; opacity: .25; }
.detalle__leyenda { min-height: 1.3em; margin-top: 10px; font-size: .84rem; color: var(--zinc); }
[data-foto-principal] { transition: opacity .2s; }
[data-foto-principal].is-cambiando { opacity: .4; }

.tarjeta__colores { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: -4px; padding: 0 9px 10px; background: var(--blanco); }
.punto { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.punto::before { content: ""; width: 14px; height: 14px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(15, 5, 15, .2); transition: transform .15s; }
.punto:hover::before { transform: scale(1.18); }
.punto[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(15, 5, 15, .2), 0 0 0 2px var(--blanco), 0 0 0 3.5px var(--acero); }
.punto:focus-visible { outline: 2px solid var(--acero); outline-offset: -2px; }
.tarjeta__mas { margin-left: 4px; font: 700 .72rem/1 var(--f-texto); color: var(--zinc); }
.tarjeta__foto img { transition: transform .35s cubic-bezier(.2, .7, .1, 1), opacity .2s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1399px) { .hero__chevrones { display: none; } } /* sin margen suficiente junto al texto */
@media (max-width: 1024px) { .hero__bajada { max-width: 34ch; } }
@media (max-width: 1100px) {
  .pie__cuerpo { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  :root { --cabecera: 72px; }
  .cabecera__tel { display: none; }
  .cabecera__burger { display: grid; flex: none; }
  .cabecera__fila { gap: 12px; }
  .cabecera__acciones { gap: 10px; }
  .logo { width: 140px; }
  .menu {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--cabecera) + 30px) var(--margen) 36px;
    background:
      radial-gradient(ellipse 70% 50% at 0% 100%, rgba(230, 5, 25, .55), transparent 70%),
      var(--acero);
    visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: opacity .25s, transform .25s, visibility 0s .25s;
  }
  .menu.is-abierto { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  .menu__lista { flex-direction: column; gap: 4px; }
  .menu__enlace { padding: 12px 0; font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 800; letter-spacing: 0; }
  .menu__enlace::after { bottom: 6px; height: 3px; width: 48px; }
  .menu__pie { display: flex; flex-direction: column; gap: 20px; }
  .menu__tel { display: inline-flex; align-items: center; gap: 10px; font: 500 1.1rem var(--f-texto); text-decoration: none; }
  .menu__tel .icono { color: var(--rojo); }

  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .tecnica__dibujos { grid-template-columns: 1fr; }
  .rapido__panel { grid-template-columns: 1fr; }
  .rapido__foto img { max-width: 300px; }
  .nosotros__grid, .capacidad, .detalle { grid-template-columns: 1fr; }
  .servicios { grid-template-columns: 1fr; gap: 44px; }
  .productos--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valores--grande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  /* Hero móvil: foto arriba (en flujo), texto abajo */
  .hero { display: block; min-height: 0; padding-top: var(--cabecera); }
  .hero__foto {
    position: relative; top: auto; right: auto; bottom: auto;
    width: 100%; height: min(96vw, 460px); aspect-ratio: auto;
    object-fit: cover; object-position: 54% 30%;
    margin-bottom: -56px;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .hero::before { background: radial-gradient(ellipse 90% 45% at 0% 100%, rgba(230, 5, 25, .85), rgba(150, 4, 18, .4) 45%, transparent 75%); }
  .hero__eco span { font-size: clamp(64px, 19vw, 130px); }
  .hero__eco-a { top: calc(var(--cabecera) + 6px); right: -.42em; }
  .hero__eco-b { bottom: -.13em; left: -.34em; }
  .hero__cuerpo { padding-block: 0 120px; }
  .hero__titulo { font-size: clamp(2.2rem, 10vw, 3.1rem); }
  .hero__redes, .hero__chevrones { display: none; }
  .hero__rayas { right: var(--margen); bottom: 30px; width: 130px; }
  @media (prefers-reduced-motion: no-preference) { .hero__foto { animation-name: fv-aparecer; } }

  .sedes, .materiales, .mision, .pasos { grid-template-columns: 1fr; }
  .mision article + article { padding-left: 0; padding-top: 36px; border-left: 0; border-top: 1px solid var(--acero-3); }
  .pasos { gap: 36px; }
  .pasos li, .pasos li + li { padding: 0; border: 0; }
  .pasos li:not(:last-child)::after { display: none; }
  .portada { min-height: 450px; padding-top: calc(var(--cabecera) + 64px); padding-bottom: 56px; }
  .portada--foto::after { background: linear-gradient(0deg, rgba(15, 5, 15, .82) 0%, rgba(15, 5, 15, .45) 55%, rgba(15, 5, 15, .1) 100%); }
  .portada__foto { width: 100%; opacity: .45; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
  .portada__rayas { width: 140px; bottom: 24px; }
  .capacidad__foto { padding-left: 40px; }
}

@media (max-width: 640px) {
  .accion--agregar .accion__icono { display: none; }
  .accion { padding: 0 8px; letter-spacing: .03em; }
  .accion--icono { width: 40px; }
  .configurador { padding: 20px 18px; }
  .configurador__campos { grid-template-columns: 1fr; }
  .flotante { height: 50px; min-width: 50px; padding: 0 13px; }
  .form { grid-template-columns: 1fr; }
  .pie__cuerpo { grid-template-columns: 1fr; gap: 34px; }
  .pie__base { flex-wrap: wrap; }
  .pie__regla { flex-basis: 100%; order: 3; }
  .pie__credito { order: 4; }
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .titulo[data-fantasma]::before { font-size: 1.9em; }
  .valores--grande { grid-template-columns: 1fr 1fr; }
  .valores--grande li { padding: 20px; font-size: .9rem; }
  .aviso--linea .botones { width: 100%; }
  .contacto__canales { padding: 28px 22px 84px; }
  .categoria__nombre { font-size: .82rem; padding: 12px 12px 2px; }
  .categoria__cuenta { padding: 0 12px 12px; }
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tarjeta__nombre { font-size: .8rem; padding: 12px 12px 2px; }
  .tarjeta__cat { padding: 0 12px 12px; }
  .btn { padding: 0 20px; }
}

@media (max-width: 380px) {
  .cabecera__cotizar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cabecera .btn--chico { padding: 0 13px; }
  .logo { width: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ==========================================================================
   PRODUCTO: foto a la izquierda (fija al bajar), toda la información a la derecha
   ========================================================================== */
@media (min-width: 901px) {
  .detalle__foto { position: sticky; top: calc(68px + 26px); }
}
.ficha { margin: 0; padding: 0 26px 26px; border-top: 1px solid #DCD7D7; }
.ficha__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 22px; }
/* Pestañas de la ficha: tipo carpeta, la activa se une al panel blanco */
.ficha__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.ficha__tab {
  display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 12px; border: 0; border-top: 3px solid transparent;
  background: #DDD9D9; color: var(--zinc); font: 800 .72rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; cursor: pointer;
}
.ficha__tab:hover { background: #D1CCCC; color: var(--acero); }
.ficha__tab[aria-selected="true"] { background: var(--blanco); color: var(--acero); border-top-color: var(--rojo); }
.ficha__tab:focus-visible { outline: 2px solid var(--acero); outline-offset: -2px; }
.ficha__cuenta { padding: 3px 6px; background: rgba(15, 5, 15, .08); font: 700 .68rem/1 var(--f-texto); color: inherit; }
.ficha__tab[aria-selected="true"] .ficha__cuenta { background: var(--rojo); color: var(--blanco); }
.ficha__panel { padding: 20px; background: var(--blanco); }
.ficha__tabs + .ficha__panel, .ficha__tabs ~ .ficha__panel { margin-top: 0; }
.ficha__pestanas > .ficha__panel:first-child { margin-top: 16px; }
.ficha__panel:focus-visible { outline: 2px solid var(--acero); outline-offset: -2px; }
.ficha__panel > :first-child { margin-top: 0; }
.ficha__panel > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .ficha { padding: 0 0 20px; }
  .ficha__cabeza, .ficha__tabs, .ficha .tecnica__fuente { margin-inline: 18px !important; }
  .ficha__tab { min-height: 42px; padding: 0 10px; font-size: .68rem; }
  .ficha__panel { padding: 16px 10px; }
}
.ficha__titulo { margin: 0; font: 800 1.15rem/1.2 var(--f-display); text-transform: uppercase; }
.ficha .tecnica__normas { margin: 0; }
.ficha__sub { margin: 18px 0 8px; font: 800 .76rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--zinc); }
.ficha__tabla { margin: 0 0 10px; font: 700 .78rem/1.35 var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--zinc); }
.datos-compactos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; }
.datos-compactos div { padding: 10px 12px; background: var(--galva); border-left: 3px solid var(--rojo); }
.datos-compactos dt { font: 700 .64rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .07em; color: var(--zinc); }
.datos-compactos dd { margin: 4px 0 0; font: 700 .9rem/1.35 var(--f-texto); }
.ficha .tecnica__props div { padding: 8px 0; }
.ficha .tecnica__notas { margin: 16px 0 0; font-size: .86rem; }
.ficha .tecnica__ventajas { font-size: .88rem; }
.ficha .subpestanas { margin-bottom: 12px; }
.ficha .subpestanas__tab { min-height: 34px; padding: 0 12px; font-size: .72rem; }
.ficha .subpestanas__tab[aria-selected="true"] { background: var(--rojo); border-color: var(--rojo); }
.ficha .subpestanas__tab[aria-selected="true"] span { color: rgba(255, 255, 255, .8); }

/* Tablas de la ficha: compactas, encabezado fijo, 1.ª columna fija al desplazar */
.matriz__titular { margin: 0 0 10px; font-size: .84rem; line-height: 1.45; color: var(--zinc); }
.matriz__titular strong { display: block; margin-bottom: 2px; font: 800 .98rem/1.3 var(--f-display); color: var(--acero); }
.matriz { margin: 0; }
.matriz__marco { overflow: auto; max-height: 540px; border: 1px solid var(--galva-2); background: var(--blanco); overscroll-behavior-x: contain; }
.matriz__marco:focus-visible { outline: 2px solid var(--acero); outline-offset: 2px; }
.matriz table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 .84rem/1.25 var(--f-texto); font-variant-numeric: tabular-nums; }
.matriz th, .matriz td { padding: 7px 8px; text-align: center; white-space: nowrap; border-bottom: 1px solid #ECE9E9; }
.matriz thead th {
  position: sticky; top: 0; z-index: 2; padding: 8px 7px; background: var(--acero); color: var(--blanco);
  font: 700 .74rem/1.2 var(--f-display); white-space: normal; vertical-align: bottom; border-bottom: 0;
}
.matriz thead tr + tr th { top: var(--fila1, 33px); padding-block: 6px 7px; background: #2A2226; border-bottom: 3px solid var(--rojo); }
.matriz thead th[rowspan] { border-bottom: 3px solid var(--rojo); }
.matriz thead tr:only-child th { border-bottom: 3px solid var(--rojo); }
.matriz thead small { font: 500 .68rem/1 var(--f-texto); opacity: .72; }
.matriz thead .matriz__grupo { background: var(--rojo); text-transform: uppercase; letter-spacing: .05em; }
.matriz thead .matriz__grupo small { text-transform: none; letter-spacing: 0; opacity: .85; }
.matriz__alt { display: block; font: 500 .66rem/1.1 var(--f-texto); opacity: .7; }
.matriz thead th:first-child { left: 0; z-index: 3; }
.matriz tbody th { position: sticky; left: 0; z-index: 1; background: var(--blanco); text-align: left; font: 700 .86rem/1.2 var(--f-texto); box-shadow: inset -1px 0 #E2DEDE; }
.matriz__clave { color: var(--zinc); background: #FBFAFA; }
.matriz__nada, .matriz__vacia { color: #CFCACA; }
.matriz tbody tr.matriz__corte > * { border-top: 2px solid #DCD7D7; }
.matriz tbody tr:hover > td:not(.matriz__vacia), .matriz tbody tr:hover > th, .matriz .es-col { background: #FFF1F1; }
.matriz td[data-lee] { cursor: pointer; }
.matriz td.es-celda, .matriz td.es-celda:hover { background: var(--rojo) !important; color: var(--blanco); font-weight: 700; }
.matriz thead th.es-col { background: #5A1E24; }
.matriz tbody tr.es-pedido > * { background: #FFF6D9; }
.matriz .es-pedido-col { background: #FFF6D9; }
.matriz thead th.es-pedido-col { background: #7A5B00; }
.matriz td.es-pedido-celda { background: var(--acero) !important; color: var(--blanco); font-weight: 700; box-shadow: inset 0 0 0 2px var(--rojo); }
.matriz__lectura a { margin-left: 6px; color: var(--rojo-texto); font-weight: 700; white-space: nowrap; }
.matriz__lectura { display: block; margin-top: 8px; padding: 9px 12px; min-height: 2.4em; background: var(--galva); border-left: 3px solid var(--rojo); font-size: .84rem; line-height: 1.4; color: var(--zinc); }
.matriz__lectura strong { color: var(--acero); font-size: .95rem; white-space: nowrap; }
.matriz__lectura.tiene { color: var(--acero); }
@media (max-width: 640px) {
  .matriz table { font-size: .8rem; }
  .matriz th, .matriz td { padding: 7px 4px; }
  .matriz thead th { padding-inline: 5px; }
}
.colores-compactos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.colores-compactos li { display: flex; align-items: center; gap: 8px; }
.ficha .dibujo { margin: 0 0 12px; padding: 14px; }
.ficha .tecnica__fuente { margin: 14px 0 0 !important; font-size: .76rem; }
@media (max-width: 640px) {
  .datos-compactos dd { font-size: .86rem; }
  .colores-compactos { font-size: .8rem; }
}

/* ==========================================================================
   COOKIES (assets/js/cookies.js)
   ========================================================================== */
.cookies {
  position: fixed; z-index: 80; left: max(16px, env(safe-area-inset-left)); bottom: 16px;
  width: min(430px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 22px 22px 20px; border-top: 4px solid var(--rojo);
  background: var(--acero); color: #DDD5DC; box-shadow: 0 24px 60px -20px rgba(15, 5, 15, .65);
  --foco: var(--blanco);
  opacity: 0; translate: 0 24px; transition: opacity .3s var(--curva, ease), translate .35s var(--curva, ease);
}
.cookies.is-visible { opacity: 1; translate: 0 0; }
.cookies__titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 800 .95rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--blanco); }
.cookies__icono { width: 22px; height: 22px; color: var(--rojo); }
.cookies__texto { margin: 0 0 16px; font-size: .88rem; line-height: 1.55; }
.cookies__texto a { color: var(--blanco); text-underline-offset: 3px; }
.cookies__opciones { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px 0; border-block: 1px solid var(--acero-3); }
.cookies__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cookies__botones .btn--chico { flex: 1 1 auto; }
.cookies__configurar { padding: 8px 4px; border: 0; background: none; color: var(--blanco); font: 700 .74rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cookies__configurar:hover { color: var(--rojo); }
/* interruptor */
.interruptor { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.interruptor input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.interruptor__boton { position: relative; flex: none; width: 40px; height: 22px; margin-top: 1px; border-radius: 11px; background: #4A3F47; transition: background-color .2s; }
.interruptor__boton::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); transition: translate .22s var(--curva, ease); }
.interruptor input:checked + .interruptor__boton { background: var(--rojo); }
.interruptor input:checked + .interruptor__boton::after { translate: 18px 0; }
.interruptor input:disabled + .interruptor__boton { opacity: .55; }
.interruptor input:disabled ~ span { cursor: default; }
.interruptor input:focus-visible + .interruptor__boton { outline: 2px solid var(--blanco); outline-offset: 2px; }
.interruptor strong { display: block; font: 700 .82rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--blanco); }
.interruptor small { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.45; }
/* escritorio: barra baja a lo ancho (no tapa el contenido principal; deja libre la columna de botones flotantes) */
@media (min-width: 641px) {
  .cookies {
    left: 16px; right: 96px; width: auto; max-width: 1280px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 32px; padding: 16px 24px;
  }
  .cookies__titulo { grid-column: 1; margin: 0; }
  .cookies__texto { grid-column: 1; margin: 0; }
  .cookies__botones { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; }
  .cookies__botones .btn--chico { flex: none; }
  .cookies__opciones { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin: 10px 0 0; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .cookies { grid-template-columns: minmax(0, 1fr); }
  .cookies__botones { grid-column: 1; grid-row: auto; flex-wrap: wrap; margin-top: 10px; }
  .cookies__opciones { grid-row: auto; }
}
@media (max-width: 640px) {
  .cookies { left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .cookies__texto { font-size: .84rem; }
}

/* Mapa de Google bloqueado hasta tener permiso */
.sede__mapa { position: relative; height: 280px; background: var(--acero); }
.sede__mapa iframe { position: absolute; inset: 0; height: 100%; }
.mapa-aviso {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 24px;
  background: radial-gradient(rgba(255, 255, 255, .12) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--acero);
  color: #DDD5DC; text-align: center;
}
.mapa-aviso p { max-width: 34ch; margin: 0; font-size: .88rem; }
.mapa-aviso__icono { width: 34px; height: 34px; color: var(--rojo); }
.sede__mapa.con-mapa .mapa-aviso { visibility: hidden; }
html:not(.js) [data-mapa-cargar] { display: none; }

/* Enlaces legales del pie */
.pie__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-bottom: 26px; margin-top: -12px; font-size: .78rem; }
.pie__legal a { color: #A99FA7; text-decoration: underline; text-underline-offset: 3px; }
.pie__legal a:hover { color: var(--blanco); }

/* Páginas legales (política de cookies) */
.legal { max-width: 880px; }
.legal h2 { margin: 38px 0 12px; font: 800 clamp(1.25rem, 2.2vw, 1.6rem)/1.2 var(--f-display); text-transform: uppercase; }
.legal p { max-width: 70ch; color: var(--zinc); }
.legal a:not(.btn) { color: var(--rojo-texto); }
.legal__fecha { margin: 0; font-size: .85rem; }
.legal__tabla { overflow-x: auto; margin: 6px 0 18px; border: 1px solid var(--galva-2); background: var(--blanco); }
.legal__tabla table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .88rem; }
.legal__tabla th, .legal__tabla td { padding: 12px 14px; border-bottom: 1px solid #ECE9E9; text-align: left; vertical-align: top; }
.legal__tabla thead th { background: var(--acero); color: var(--blanco); font: 700 .74rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.legal__tabla tbody th { font: 700 .85rem/1.4 var(--f-texto); white-space: nowrap; }
.legal__tipo { display: inline-block; padding: 4px 7px; font: 700 .68rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; background: var(--galva); color: var(--acero); }
.legal__tipo--necesaria { background: #E7F2E8; color: #1F5E24; }
.legal__tipo--mapas { background: #E6EEF8; color: #1B4D8C; }
.legal__tipo--marketing { background: #FDECEE; color: var(--rojo-texto); }

/* Imágenes diferidas: hueco reservado (ancho y alto fijos), aparecen suave al descargarse */
html:not(.js) img[data-src] { display: none; }
.js img.diferida:not(.cargada) { opacity: 0; }
.js img.diferida.cargada { animation: fv-aparecer .5s ease-out; }

/* ==========================================================================
   TALLER VIRTUAL (servicios) — assets/js/taller.js
   Mesa de trabajo oscura con la pieza a escala, panel de medidas y resultado
   con puntaje. Colores y tipografías de la marca, sin elementos nuevos.
   ========================================================================== */
html:not(.js) .taller__app { display: none; }
.taller__sinjs { max-width: 60ch; color: var(--zinc-claro); }
.taller__sinjs a { color: var(--blanco); }
.taller__app { position: relative; display: grid; gap: 16px; }

/* Servicio: tres "fichas" grandes */
.taller__modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.taller__modo {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--acero-3); background: var(--acero-2); color: var(--blanco);
  font: inherit; text-align: left; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: background-color .18s, border-color .18s;
}
.taller__modo .icono { width: 30px; height: 30px; color: var(--rojo); transition: color .18s; }
.taller__modo strong { display: block; font: 800 .95rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.taller__modo small { display: block; margin-top: 5px; font: 400 .8rem/1.2 var(--f-texto); color: var(--zinc-claro); }
.taller__modo:hover { border-color: #5C525A; }
.taller__modo[aria-selected="true"] { background: var(--rojo); border-color: var(--rojo); }
.taller__modo[aria-selected="true"] .icono { color: var(--blanco); }
.taller__modo[aria-selected="true"] small { color: rgba(255, 255, 255, .88); }
.taller__modo:focus-visible { clip-path: none; outline-offset: 2px; }

/* Mesa: dibujo + panel */
.taller__mesa { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.taller__escenario {
  position: sticky; top: calc(var(--cabecera) + 14px);
  border: 1.5px solid var(--acero-3);
  background: repeating-linear-gradient(90deg, #1E161D 0 3px, #140C13 3px 26px);   /* rejilla de la mesa de corte */
  transition: border-color .3s, box-shadow .3s;
}
.taller__svg { width: 100%; height: auto; }
.taller__etiqueta { margin: 0; min-height: 3.3em; padding: 10px 16px; border-top: 1px solid var(--acero-3); background: var(--acero-2); font: 600 .84rem/1.45 var(--f-texto); color: #E4DDE3; }
.taller__etiqueta { display: flex; align-items: center; gap: 12px; }
.taller__estado {
  flex: none; padding: 5px 9px;
  border: 1px solid #5C525A; color: var(--zinc-claro);
  font: 800 .64rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.taller__estado[data-fase="trabajando"] { border-color: var(--rojo); background: var(--rojo); color: var(--blanco); }
.taller__estado[data-fase="hecho"] { border-color: var(--blanco); background: var(--blanco); color: var(--acero); }
.taller.es-trabajando .taller__escenario { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo), 0 0 46px -6px rgba(230, 5, 25, .45); }

/* Piezas dentro del dibujo (las clases las pone taller.js) */
.tw-relleno { opacity: 0; transition: opacity .5s ease-out; }
.tw-ruta { stroke-dasharray: calc(7px * var(--k, 1)) calc(5px * var(--k, 1)); opacity: .85; }
.tw-corte { opacity: 0; }
.taller.es-trabajando .tw-corte { opacity: 1; }
.tw-pieza.es-cortada .tw-relleno { opacity: 1; }
.tw-pieza.es-cortada .tw-ruta { stroke-dasharray: none; opacity: .45; }
.tw-pieza.es-cortada { translate: 0 -5px; }
.tw-perforacion { opacity: 0; transition: opacity .2s; }
.tw-perforacion.es-hecha, .tw-pieza.es-cortada .tw-perforacion { opacity: 1; }
.tw-perforacion circle { transform-box: fill-box; transform-origin: center; transition: scale .2s; }
.taller[data-ver="perforaciones"] .tw-perforacion circle { scale: 1.7; }
.taller[data-ver="corte"] .tw-ruta { stroke: var(--rojo); stroke-dasharray: none; opacity: 1; }
.taller__dato[data-ver] { cursor: help; transition: background-color .18s; }
.taller__resultado:not(.es-vacio) .taller__dato[data-ver]:hover { background: #1F161E; }

/* Panel de medidas */
.taller__panel { display: grid; gap: 18px; padding: clamp(18px, 2.2vw, 26px); border: 1.5px solid var(--acero-3); background: var(--acero-2); }
.taller__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.taller__sub { float: left; width: 100%; margin: 0 0 10px; padding: 0; font: 800 .74rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .09em; color: var(--zinc-claro); }
.taller__sub + * { clear: both; }
.taller__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.taller__chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px 6px 8px;
  border: 1.5px solid var(--acero-3); background: var(--acero);
  font: 700 .76rem/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
  cursor: pointer; transition: border-color .18s, background-color .18s;
}
.taller__chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.taller__chip-icono { width: 34px; height: 24px; flex: none; color: var(--zinc-claro); transition: color .18s; }
.taller__chip:hover { border-color: #5C525A; }
.taller__chip:has(input:checked) { border-color: var(--rojo); background: rgba(230, 5, 25, .16); }
.taller__chip:has(input:checked) .taller__chip-icono { color: var(--blanco); }
.taller__chip:has(input:focus-visible) { outline: 3px solid var(--blanco); outline-offset: 2px; }

.taller__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
.taller__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.taller__campo--ancho { grid-column: 1 / -1; }
.taller__campo label { font: 700 .7rem/1.25 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: #E4DDE3; }
.taller__entrada { display: flex; border: 1.5px solid #4A4148; background: var(--acero); transition: border-color .18s; }
.taller__entrada:hover { border-color: #6A5F68; }
.taller__entrada:focus-within { border-color: var(--blanco); }
.taller__entrada input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 0; background: transparent; color: var(--blanco);
  font: 700 1rem/1 var(--f-display); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.taller__entrada input:focus-visible { outline: none; }
.taller__entrada input::-webkit-inner-spin-button, .taller__entrada input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.taller__entrada--texto input { font: 500 .95rem/1 var(--f-texto); }
.taller__entrada input[type="number"] { text-align: center; padding: 0 4px; }
.taller__paso {
  flex: none; width: 38px; padding: 0;
  border: 0; background: transparent; color: var(--zinc-claro);
  font: 600 1.25rem/1 var(--f-display); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color .15s, color .15s;
}
.taller__paso:hover { background: var(--acero-3); color: var(--blanco); }
.taller__paso:active { background: var(--rojo); color: var(--blanco); }
/* Barra deslizante: el tramo lleno va en rojo hasta el valor */
.taller__barra {
  --lleno: 0%;
  width: 100%; height: 22px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.taller__barra:focus { outline: none; }
.taller__barra::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--rojo) var(--lleno), #4A4148 var(--lleno)); }
.taller__barra::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border: 3px solid var(--blanco); border-radius: 50%; background: var(--rojo);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  transition: scale .15s;
}
.taller__barra:hover::-webkit-slider-thumb, .taller__barra:active::-webkit-slider-thumb { scale: 1.18; }
.taller__barra::-moz-range-track { height: 4px; background: #4A4148; }
.taller__barra::-moz-range-progress { height: 4px; background: var(--rojo); }
.taller__barra::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--blanco); border-radius: 50%; background: var(--rojo); box-shadow: 0 2px 6px rgba(0, 0, 0, .55); }
.taller__entrada span { display: grid; place-items: center; padding: 0 11px; background: var(--acero-2); color: var(--zinc-claro); font: 600 .76rem/1 var(--f-texto); }
.taller__campo select {
  width: 100%; min-height: 47px; padding: 0 34px 0 12px;
  border: 1.5px solid #4A4148; border-radius: 0;
  background: var(--acero) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B8AFB7' stroke-width='1.8'/%3E%3C/svg%3E") right 12px center / 11px no-repeat;
  color: var(--blanco); font: 500 .9rem/1.2 var(--f-texto);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color .18s;
}
.taller__campo select:hover { border-color: #6A5F68; }
.taller__campo select:focus-visible { border-color: var(--blanco); outline-offset: 1px; }
.taller__campo option { background: var(--acero-2); color: var(--blanco); }

.taller__aviso { margin: 0; padding: 10px 12px; border-left: 3px solid var(--rojo); background: rgba(230, 5, 25, .13); color: #FFD9DC; font-size: .86rem; line-height: 1.45; }
.taller__accion { width: 100%; min-height: 58px; font-size: .95rem; }
.taller__accion:disabled { cursor: progress; background: var(--rojo-2); }

/* Resultado y puntaje */
.taller__resultado { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 28px); border: 1.5px solid var(--acero-3); background: linear-gradient(180deg, var(--acero-2), var(--acero)); }
.taller__datos { display: grid; gap: 18px; }
.taller__bloque { min-width: 0; }
.taller__bloque-t { margin: 0 0 8px; font: 800 .74rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .09em; color: var(--zinc-claro); }
.taller__fila { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.taller__bloque--pedido .taller__bloque-t { font-size: .86rem; color: var(--blanco); }
/* Detalle de una pieza: secundario, más chico */
.taller__bloque--pieza .taller__fila { gap: 8px; }
.taller__bloque--pieza .taller__dato { display: block; padding: 10px 14px; border-left-width: 2px; border-left-color: #5C525A; background: rgba(15, 5, 15, .55); }
.taller__bloque--pieza .taller__dato strong { display: inline; font-size: 1.05rem; }
.taller__bloque--pieza .taller__dato span { display: inline; margin-left: 6px; }
.taller__bloque--pieza .taller__dato small { display: block; margin-top: 3px; }
.taller__dato { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; border-left: 3px solid var(--rojo); background: var(--acero); }
.taller__dato strong { font: 800 clamp(1.2rem, 2vw, 1.55rem)/1.1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.taller__dato span { font: 600 .8rem/1.3 var(--f-texto); color: #E4DDE3; }
.taller__dato small { font-size: .74rem; line-height: 1.4; color: var(--zinc-claro); }
.taller__escala { margin: 10px 0 0; font-size: .76rem; line-height: 1.45; color: #8F858D; }
.taller__acomodo { margin: 0; }
.taller__leyenda { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; font: 600 .74rem/1 var(--f-texto); color: var(--zinc-claro); }
.taller__muestra { width: 12px; height: 12px; margin-left: 8px; background: #3C333A; border: 1px solid rgba(255, 255, 255, .35); }
.taller__muestra--pieza { margin-left: 0; background: var(--rojo); border-color: var(--rojo); }
.taller__resultado.es-vacio .taller__dato { border-left-color: var(--acero-3); }
.taller__resultado.es-vacio .taller__dato strong { color: #5C525A; }

.taller__puntaje { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 320px); gap: 16px 24px; align-items: center; }
.taller__estrellas { display: flex; gap: 4px; }
.taller__estrellas svg { width: 40px; height: 40px; fill: #3A3139; }
.taller__estrellas svg.es-llena { fill: var(--rojo); }
.taller__nivel { margin: 0 0 4px; font: 800 1.02rem/1.35 var(--f-display); }
.taller__reto { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; color: var(--zinc-claro); }
.taller__reto:empty { display: none; }
.taller__plancha { width: 100%; height: auto; }
.taller__nota { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--zinc-claro); }

@media (prefers-reduced-motion: no-preference) {
  .tw-pieza { transition: translate .6s var(--curva, ease-out); }
  .taller.es-trabajando .taller__accion .btn__icono { animation: fv-zumbido .28s steps(2) infinite; }
  .taller__estado[data-fase="trabajando"] { animation: fv-latido 1s ease-in-out infinite alternate; }
  .taller__resultado.es-nuevo .taller__estrellas .es-llena { animation: fv-estrella .6s calc(.2s + var(--i) * .18s) cubic-bezier(.3, 1.6, .5, 1) both; }
  .taller__resultado.es-nuevo .taller__plancha [style*="--i"] { animation: fv-aparecer .3s calc(min(var(--i), 80) * 12ms) both; }
  .taller__resultado.es-nuevo .taller__dato { animation: fv-subir .5s var(--curva, ease-out) both; }
  .taller__resultado.es-nuevo .taller__dato:nth-child(2) { animation-delay: .05s; }
  .taller__resultado.es-nuevo .taller__dato:nth-child(3) { animation-delay: .1s; }
  .taller__resultado.es-nuevo .taller__dato:nth-child(4) { animation-delay: .15s; }
  .taller__resultado.es-nuevo .taller__dato:nth-child(5) { animation-delay: .2s; }
}
@keyframes fv-estrella { from { opacity: 0; scale: .2; rotate: -40deg; } }
@keyframes fv-zumbido { to { translate: 1px -1px; } }
@keyframes fv-latido { to { opacity: .6; } }

@media (max-width: 1080px) {
  .taller__puntaje { grid-template-columns: auto minmax(0, 1fr); }
  .taller__acomodo { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 900px) {
  .taller__mesa { grid-template-columns: minmax(0, 1fr); }
  .taller__escenario { position: relative; top: 0; }
}
@media (max-width: 760px) {
  .taller__fila { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 560px) {
  .taller__modos { gap: 6px; }
  .taller__modo { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px; }
  .taller__modo .icono { width: 24px; height: 24px; }
  .taller__modo strong { font-size: .76rem; }
  .taller__modo small { font-size: .7rem; }
  .taller__etiqueta { padding: 9px 12px; font-size: .78rem; }
  .taller__campos { gap: 12px 10px; }
  .taller__paso { width: 34px; }
  .taller__entrada span { padding: 0 7px; }
  .taller__barra { height: 30px; }
  .taller__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .taller__bloque--pieza .taller__fila { grid-template-columns: minmax(0, 1fr); }
  .taller__dato { padding: 12px; }
  .taller__estrellas svg { width: 32px; height: 32px; }
  .taller__puntaje { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .taller__botones .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
}
@media (max-width: 480px) { .taller__modo small { display: none; } }
@media print { .taller { display: none; } }

/* ==========================================================================
   MOVIMIENTO — complementa assets/js/movimiento.js
   Solo transform / opacity / clip-path. Sin JavaScript o con "reducir
   movimiento" no se oculta ni se mueve nada.
   ========================================================================== */
:root { --curva: cubic-bezier(.2, .7, .1, 1); }
.mov .mov-oculto { opacity: 0; }
@media print { .mov .mov-oculto { opacity: 1 !important; } }

@media (prefers-reduced-motion: no-preference) {
  /* Portadas internas: entrada al cargar, igual que la del inicio (sin esperar al scroll) */
  .portada:not(.portada--compacta) .portada__cuerpo > * { animation: fv-subir .9s var(--curva) both; }
  .portada:not(.portada--compacta) .portada__cuerpo > :nth-child(2) { animation-delay: .07s; }
  .portada:not(.portada--compacta) .portada__cuerpo > :nth-child(3) { animation-delay: .14s; }
  .portada .portada__eco { animation: fv-desde-der 1.3s .1s var(--curva) both; }
  .portada .portada__foto { animation: fv-foto 1.5s var(--curva) both; }

  /* Decorados que se mecen despacio */
  .mov .flota { animation: fv-flotar 7s ease-in-out infinite alternate; }
  .mov .sello.flota { animation-duration: 6s; animation-delay: -2s; }
  .mov .hero__chevrones.flota { animation-name: fv-flotar-centro; animation-duration: 6.5s; }
  .mov .contacto__chevrones.flota { animation-duration: 8.5s; animation-delay: -4s; }
}
@keyframes fv-subir { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes fv-flotar { from { transform: translate3d(0, -6px, 0); } to { transform: translate3d(0, 7px, 0); } }
@keyframes fv-flotar-centro { from { transform: translateY(calc(-50% - 6px)); } to { transform: translateY(calc(-50% + 7px)); } }

/* Interacción (solo con mouse): botones, tarjetas e iconos responden sin cambiar su aspecto */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .18s, color .18s, border-color .18s, translate .3s var(--curva), scale .2s var(--curva); }
  .btn:hover { translate: 0 -2px; }
  .btn:active { translate: 0 0; scale: .98; }
  .btn .btn__icono { transition: translate .35s var(--curva), rotate .35s var(--curva); }
  .btn:hover .btn__icono { translate: 3px 0; }
  .btn:hover .btn__icono:has(use[href$="whatsapp"]), .btn:hover .btn__icono:has(use[href$="ficha"]) { translate: 0 0; rotate: -10deg; }

  /* Tarjetas con esquina cortada: la sombra va en el contenedor (drop-shadow respeta el corte) */
  .categoria, .tarjeta { transition: translate .4s var(--curva), filter .4s var(--curva); }
  .categoria:hover, .tarjeta:hover { translate: 0 -5px; filter: drop-shadow(0 18px 22px rgba(15, 5, 15, .14)); }
  .sede, .valores--grande li { transition: translate .4s var(--curva), box-shadow .4s var(--curva); }
  .sede:hover, .valores--grande li:hover { translate: 0 -5px; box-shadow: 0 24px 40px -26px rgba(15, 5, 15, .4); }
  .servicio, .materiales li { transition: translate .4s var(--curva); }
  .servicio:hover, .materiales li:hover { translate: 0 -5px; }
  .servicio__foto, .materiales img { transition: filter .4s var(--curva); }
  .servicio:hover .servicio__foto, .materiales li:hover img { filter: saturate(1.12) contrast(1.04); }

  /* Iconos */
  .redes a svg, .hero__redes a svg, .flotante svg, .accion svg, .valores__icono, .enlace svg, .pie__contacto svg, .canal svg, .sede__dir svg {
    transition: translate .35s var(--curva), rotate .35s var(--curva), scale .35s var(--curva);
  }
  .redes a:hover svg, .hero__redes a:hover svg { rotate: -8deg; scale: 1.14; }
  .flotante:hover svg { rotate: -10deg; scale: 1.08; }
  .accion:hover svg { scale: 1.16; }
  .valores--grande li:hover .valores__icono { rotate: -6deg; scale: 1.1; }
  .enlace:hover svg, .canal:hover svg { translate: 3px 0; }
  .pie__contacto li:hover svg, .sede:hover .sede__dir svg { scale: 1.15; }
  .sede__tels a, .chip { transition: background-color .18s, color .18s, border-color .18s, translate .3s var(--curva); }
  .sede__tels a:hover, .chip:hover:not(:disabled) { translate: 0 -2px; }
}

/* Transición entre páginas (navegadores que la soportan; en los demás se navega normal) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.cabecera { view-transition-name: cabecera; }
.flotantes { view-transition-name: flotantes; }
::view-transition-old(root) { animation: fv-vt-salir .24s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: fv-vt-entrar .42s cubic-bezier(0, 0, .2, 1) both; }
@keyframes fv-vt-salir { to { opacity: 0; transform: translate3d(0, -12px, 0); } }
@keyframes fv-vt-entrar { from { opacity: 0; transform: translate3d(0, 18px, 0); } }