/* Teideprint — hoja de estilos base
   Tokens y componentes según el sistema de diseño confirmado (ver DESIGN.md). */

/* Manrope servida desde la propia web (antes, Google Fonts): así ninguna visita envía su IP a
   Google al cargar la página, y carga antes. Versión variable: un archivo cubre todos los pesos.
   Licencia SIL OFL 1.1 en assets/fonts/OFL.txt. Los rangos son los de Fontsource. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* color */
  --color-teide-50: #E8F8FA;
  --color-teide-100: #CDEFF2;
  --color-teide-200: #9FE0E5;
  --color-teide-300: #6BCBD3;
  --color-teide-400: #32B4C0;
  --color-teide-500: #059BA8;
  --color-teide-600: #078792;
  --color-teide-700: #08737D;
  --color-teide-800: #075B64;
  --color-teide-900: #06464D;
  --color-volcanic: #193241;
  --color-black: #1E1E1E;
  --color-white: #FFFFFF;
  --color-arena: #F2F6F6;
  --color-mist: #E7EEEE;
  --color-text-secondary: #5F6E74; /* 5,29:1 sobre blanco y 4,86:1 sobre arena (antes #66757B, 4,39:1 sobre arena) */
  --color-success: #3E9C5C;
  --color-warning: #C9922B;
  --color-error: #C24C4C;

  --surface-page: var(--color-white);
  --surface-card: var(--color-white);
  --surface-muted: var(--color-arena);
  --surface-inverse: var(--color-volcanic);
  --border-default: var(--color-mist);
  --border-strong: var(--color-volcanic);
  --text-primary: var(--color-black);
  --text-secondary: var(--color-text-secondary);
  --text-inverse: var(--color-white);
  /* Turquesa (2026-10-07, accesibilidad AA). El 500 de marca da 3,35:1 con blanco, así que:
     - --accent (500): solo decoración, bordes, iconos y títulos grandes (ahí basta 3:1).
     - --text-brand (700, 5,59:1): texto turquesa normal (enlaces, antetítulos).
     - --color-primary (700): fondo de botones y etiquetas con texto blanco.
     - --surface-brand (700): fondos turquesa grandes que llevan texto (franjas y paneles). */
  --text-brand: var(--color-teide-700);
  --text-brand-hover: var(--color-teide-800);
  --accent: var(--color-teide-500);
  --accent-hover: var(--color-teide-600);
  --accent-active: var(--color-teide-700);
  --color-primary: var(--color-teide-700);
  --color-primary-hover: var(--color-teide-800);
  --surface-brand: var(--color-teide-700);
  /* 700 y no 400: el anillo de foco necesita 3:1 sobre blanco (400 da 2,49:1; 700 da 5,59:1). */
  --focus-ring: var(--color-teide-700);

  /* tipografía */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --text-display: clamp(40px, 5vw, 64px);
  --text-h1: 48px;
  --text-h2: 40px;
  --text-h3: 28px;
  --text-h4: 22px;
  --text-body: 17px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --tracking-descriptor: 0.3em;

  /* espaciado */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-32: 128px;
  --content-margin: clamp(20px, calc(20vw - 100px), 360px);

  /* forma / efectos */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 999px;
  --shadow-card: 0 1px 2px rgba(30,30,30,.04), 0 4px 12px rgba(25,50,65,.06);
  --shadow-elevated: 0 8px 24px rgba(25,50,65,.10);
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --motion-fast: 150ms; --motion-base: 220ms; --motion-slow: 400ms;
}

:root[data-theme="dark"] {
  --surface-page: #10181C;
  --surface-card: #182228;
  --surface-muted: #182228;
  --border-default: #2A3B42;
  --text-primary: #F2F6F6;
  --text-secondary: #9AB0B5;
  --focus-ring: var(--color-teide-400); /* sobre el fondo oscuro, 400 da 7,2:1 */
  --text-brand: var(--color-teide-500);  /* sobre el fondo oscuro, 500 da 5,35:1 */
  --text-brand-hover: var(--color-teide-400);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: clip;
  transition: background var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}
img { max-width: 100%; display: block; }
a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--text-brand-hover); }
h1, h2, h3, h4, p { margin: 0; }
/* El atributo hidden gana siempre, también a un display escrito en línea (tarjetas del catálogo). */
[hidden] { display: none !important; }

/* --- foco y accesibilidad ---
   Foco visible común para todo lo que se puede pulsar o escribir (las reglas propias de cada
   componente, más específicas, siguen mandando). :where() no suma especificidad. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
main:focus { outline: none; } /* destino del enlace "Saltar al contenido": no es un control */
/* La cabecera es fija: lo que recibe el foco o un ancla no debe quedar tapado debajo de ella. */
html { scroll-padding-top: 96px; }
.saltar-contenido {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--surface-inverse); color: var(--text-inverse); font-weight: 700; font-size: 15px;
  padding: 12px 18px; border-radius: var(--radius-md);
}
.saltar-contenido:focus { top: var(--space-4); color: var(--text-inverse); }
/* "Reducir movimiento" del sistema: fuera animaciones continuas, desplazamiento suave y transiciones largas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
.container { margin: 0 var(--content-margin); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- marcador de foto (sin foto real todavía) --- */
.marcador-foto {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-muted); color: var(--text-secondary);
  font-size: 12px; font-weight: 600; text-align: center; padding: var(--space-4);
  width: 100%; height: 100%; border-radius: inherit;
}

/* --- botones --- */
.btn {
  font-family: var(--font-sans); font-weight: 600; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center;
  gap: var(--space-2); text-decoration: none; white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-md { padding: 12px 22px; font-size: 16px; }
.btn-lg { padding: 15px 28px; font-size: 17px; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-secondary { background: var(--color-volcanic); color: #fff; }
.btn-secondary:hover { background: #0f232f; color: #fff; }
.btn-outline { background: transparent; color: var(--color-volcanic); border-color: var(--color-volcanic); }
.btn-outline:hover { background: var(--color-teide-50); color: var(--color-volcanic); }
:root[data-theme="dark"] .btn-outline { color: var(--text-primary); border-color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--color-volcanic); }
.btn-ghost:hover { background: var(--color-teide-50); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .icon-arrow { width: 16px; height: 16px; }

/* --- cabecera --- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--surface-page);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: 18px var(--content-margin); border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.site-header .logo { display: flex; align-items: center; }
.site-header .logo img { height: 32px; width: auto; }
:root[data-theme="dark"] .site-header .logo .logo-color { display: none; }
.site-header .logo .logo-white { display: none; }
:root[data-theme="dark"] .site-header .logo .logo-white { display: block; }

.main-nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 36px); flex-wrap: nowrap; }
.nav-link { font-weight: 400; font-size: 15px; color: var(--text-primary); white-space: nowrap; }
.nav-link:hover { color: var(--text-brand); }

.catalog-menu { position: relative; }
.catalog-menu > .catalog-trigger { display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 15px; color: var(--text-primary); cursor: pointer; background: none; border: none; font-family: var(--font-sans); padding: 0; }
.catalog-dropdown {
  position: absolute; top: 100%; left: 0; padding-top: var(--space-3);
  display: none; z-index: 60;
}
.catalog-menu:hover .catalog-dropdown, .catalog-menu:focus-within .catalog-dropdown { display: block; }
.catalog-dropdown-inner {
  background: var(--surface-page); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); min-width: 220px; padding: var(--space-2); display: flex; flex-direction: column;
}
.catalog-dropdown-inner a { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.catalog-dropdown-inner a:hover { background: var(--surface-muted); }

.theme-toggle {
  width: 52px; height: 28px; border-radius: var(--radius-full); background: var(--color-teide-50);
  border: 1px solid var(--border-default); position: relative; cursor: pointer; flex-shrink: 0; padding: 0;
}
:root[data-theme="dark"] .theme-toggle { background: #0d1b22; }
.theme-toggle .knob {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px;
  transition: left .3s cubic-bezier(.4,0,.2,1); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .theme-toggle .knob { left: 27px; }
.theme-toggle .knob svg { width: 13px; height: 13px; color: var(--color-teide-600); }
.theme-toggle .knob .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .knob .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .knob .icon-moon { display: block; }

.hamburger {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border-default);
  display: none; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; background: none;
}
.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-page);
  border-bottom: 1px solid var(--border-default); flex-direction: column; padding: 12px var(--content-margin) 20px;
  gap: 2px; z-index: 49; box-shadow: var(--shadow-card); display: none;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { padding: 12px 4px; font-weight: 600; font-size: 16px; color: var(--text-primary); }
.mobile-menu a.sub { padding: 8px 4px 12px 20px; font-size: 14px; }
.mobile-menu a.contacto { color: var(--text-brand); }

@media (max-width: 879px) {
  .main-nav .nav-link, .main-nav .catalog-menu, .main-nav .btn-outline-wrap { display: none; }
  .hamburger { display: flex; }
}

/* --- hero --- */
.hero { padding: clamp(56px, 8vw, 96px) 0; display: grid; grid-template-columns: minmax(300px,1fr) minmax(260px,420px); gap: var(--space-16); align-items: center; }
.hero h1 { font-weight: 800; font-size: clamp(35px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-6); }
.hero p { font-size: 18px; line-height: 1.5; color: var(--text-secondary); max-width: 480px; margin-bottom: var(--space-8); }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 759px) { .hero { grid-template-columns: 1fr; } }

.hero-marquee { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); height: 560px; }
.marquee-col { overflow: hidden; border-radius: var(--radius-xl); height: 100%; }
.marquee-track { display: flex; flex-direction: column; gap: var(--space-4); animation: marqueeUp 28s linear infinite; }
.marquee-col:nth-child(2) .marquee-track { animation-name: marqueeDown; animation-duration: 32s; }
.marquee-col:nth-child(3) .marquee-track { animation-duration: 36s; }
.marquee-track > * { display: block; height: 200px; border-radius: var(--radius-lg); overflow: hidden; }
.marquee-track img { width: 100%; height: 100%; object-fit: cover; }
/* Fotos que enlazan a su producto: la columna se detiene al pasar el ratón para poder pulsarlas. */
.marquee-col:hover .marquee-track, .marquee-col:focus-within .marquee-track { animation-play-state: paused; }
.marquee-track > a img, .hero-marquee-movil-track > a img { transition: transform var(--motion-slow) var(--ease-standard); }
.marquee-track > a:hover img { transform: scale(1.04); }
.marquee-track > a:focus-visible, .hero-marquee-movil-track > a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .marquee-track > a:hover img { transform: none; } }
/* Escritorio (2026-10-07): el collage ocupa todo el alto de la cabecera, desde el
   menú hasta el módulo siguiente, sin margen arriba ni abajo; el relleno vertical pasa al texto, que
   sigue centrado. Columna algo más ancha y fotos algo más altas (misma proporción, 480/228 ≈ 420/200).
   Sin redondeo en las columnas: las fotos se cortan rectas contra el menú y contra el módulo de abajo. */
@media (min-width: 760px) {
  .hero { padding: 0; align-items: stretch; grid-template-columns: minmax(300px,1fr) minmax(260px,480px); }
  .hero > div:first-child { padding: clamp(56px, 8vw, 96px) 0; align-self: center; }
  .hero-marquee { height: calc(560px + 2 * clamp(56px, 8vw, 96px)); }
  .marquee-col { border-radius: 0; }
  .marquee-track > * { height: 228px; }
}

/* --- en móvil, un único carrusel horizontal (una foto entera cada vez, de canto a canto) en vez de las 3 columnas ---
   Sin margen ni borde redondeado: rompe el margen del container con márgenes negativos para llegar de lado a lado.
   El deslizamiento entre fotos lo hace main.js cambiando el transform de la pista; aquí solo se define la transición. */
.hero-marquee-movil { display: none; }
@media (max-width: 759px) {
  .hero-marquee { display: none; }
  .hero-marquee-movil { display: block; overflow: hidden; height: 370px; margin-left: calc(-1 * var(--content-margin)); margin-right: calc(-1 * var(--content-margin)); }
  .hero-marquee-movil-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.65,0,.35,1); }
  .hero-marquee-movil-track > * { display: block; flex: 0 0 100%; height: 100%; }
}
@media (max-width: 479px) { .hero-marquee-movil { height: 310px; } }

@keyframes marqueeUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes marqueeDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes marqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- sección genérica con kicker --- */
.section-heading { text-align: center; margin-bottom: 44px; }
.section-kicker { font-weight: 600; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-brand); margin-bottom: 12px; }
.section-title { font-weight: 800; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.section { padding: clamp(24px,3vw,40px) 0 clamp(80px,10vw,128px); }

/* --- tarjetas de categoría --- */
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-6); }
@media (max-width: 1023px) { .cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px) { .cat-grid { grid-template-columns: 1fr; } }

/* --- chip de filtro de categoría (catálogo) --- */
.chip-categoria {
  border: 1.5px solid var(--border-default); background: var(--surface-page); color: var(--text-primary);
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; padding: 8px 18px; border-radius: var(--radius-full);
  cursor: pointer; transition: all .2s ease;
}
.chip-categoria.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.cat-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.cat-card-thumb { width: 56%; height: 120px; margin: 0 0 -40px 20px; position: relative; z-index: 2; }
.cat-card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cat-card-thumb .marcador-foto { border-radius: var(--radius-lg); }
.cat-card-body {
  position: relative; border-radius: var(--radius-2xl); padding: 56px 20px 20px; display: flex; flex-direction: column;
  gap: var(--space-4); box-shadow: var(--shadow-card); flex: 1; background: var(--surface-card);
  transition: transform var(--motion-base) var(--ease-standard);
}
.cat-card:hover .cat-card-body { transform: translateY(-4px); }
.cat-card-tag { font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.cat-card-label { font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); }
.cat-card-desc { font-size: 13px; line-height: 1.5; color: var(--text-secondary); flex: 1; }
.cat-card-pill {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-end; padding: 6px 12px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 700; letter-spacing: .04em;
}

/* --- destacados de la portada: rejilla con una tarjeta grande a la izquierda (ocupa dos filas) y
   hasta cuatro pequeñas. Foto de fondo con degradado oscuro abajo para leer el texto encima.
   is-1 ... is-5 dicen cuántas tarjetas hay: la rejilla se reparte según las que tengan contenido. --- */
/* Arriba, más aire desde 2026-10-07: el collage de la cabecera ya llega hasta aquí sin margen propio. */
.destacados { padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); }
.destacados-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.destacados-cabecera .section-kicker { margin-bottom: 8px; }
.destacados-ver-todo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-brand); }
.destacados-ver-todo svg { width: 20px; height: 20px; transition: transform .25s var(--ease-standard); }
.destacados-ver-todo:hover svg { transform: translateX(4px); }

.destacados-rejilla { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: clamp(230px, 20vw, 320px); }
.destacados-rejilla.is-5 .is-principal, .destacados-rejilla.is-4 .is-principal, .destacados-rejilla.is-3 .is-principal { grid-row: span 2; }
.destacados-rejilla.is-4 .destacado:nth-child(4) { grid-column: span 2; }
.destacados-rejilla.is-3 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.destacados-rejilla.is-2 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-auto-rows: clamp(280px, 28vw, 420px); }
.destacados-rejilla.is-1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(300px, 34vw, 480px); }

.destacado {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--radius-2xl); background: var(--color-volcanic); color: #fff; box-shadow: var(--shadow-card);
}
a.destacado:hover { color: #fff; }
a.destacado:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.destacado-foto { position: absolute; inset: 0; z-index: -2; transition: transform .6s var(--ease-standard); }
a.destacado:hover .destacado-foto { transform: scale(1.04); }
.destacado::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(12,28,37,.78) 0%, rgba(12,28,37,.4) 20%, rgba(12,28,37,0) 42%); }
/* La grande lleva también texto: su degradado sube un poco más, lo justo para leerlo. */
.destacado.is-principal::after { background: linear-gradient(to top, rgba(12,28,37,.8) 0%, rgba(12,28,37,.45) 24%, rgba(12,28,37,0) 48%); }
/* Sin título ni texto no hay nada que leer: la foto se ve limpia. */
.destacado.sin-texto::after { content: none; }
.destacado-etiqueta {
  position: absolute; top: clamp(14px, 1.6vw, 22px); left: clamp(14px, 1.6vw, 22px);
  background: var(--color-primary); color: #fff; border-radius: var(--radius-full); padding: 7px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.destacado-texto { padding: clamp(16px, 2vw, 28px); }
.destacado-titulo { font-weight: 800; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 16px rgba(0,0,0,.3); }
.is-principal .destacado-titulo { font-size: clamp(24px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
.destacado-titulo svg { width: .8em; height: .8em; margin-left: .3em; vertical-align: -.05em; transition: transform .25s var(--ease-standard); }
a.destacado:hover .destacado-titulo svg { transform: translateX(4px); }
.destacado-resumen { text-shadow: 0 1px 3px rgba(0,0,0,.35); margin-top: 10px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 46ch; }

/* Tablet: la grande ocupa todo el ancho arriba y las demás van de dos en dos. */
@media (max-width: 1023px) {
  .destacados-rejilla, .destacados-rejilla.is-3, .destacados-rejilla.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 30vw, 280px); }
  .destacados-rejilla .is-principal, .destacados-rejilla.is-5 .is-principal, .destacados-rejilla.is-4 .is-principal, .destacados-rejilla.is-3 .is-principal { grid-column: 1 / -1; grid-row: span 1; }
  .destacados-rejilla:not(.is-2) .is-principal { grid-row: span 2; }
  .destacados-rejilla.is-2 .is-principal { grid-column: auto; }
}
@media (max-width: 599px) {
  .destacados-rejilla { gap: 12px; grid-auto-rows: 210px; }
  .destacados-rejilla, .destacados-rejilla.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destacados-rejilla.is-2 .is-principal { grid-column: 1 / -1; }
  .destacado-titulo { font-size: 16px; }
  .destacado-etiqueta { font-size: 10px; padding: 5px 10px; }
  .destacado-resumen { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .destacado-foto, .destacado-titulo svg, .destacados-ver-todo svg { transition: none; }
  a.destacado:hover .destacado-foto { transform: none; }
}

/* --- últimos proyectos: panel gris con el título a la izquierda y el texto a la derecha, una fila
   de tarjetas (5 a la vista en escritorio) y, debajo, el botón a la izquierda y las dos flechas a la
   derecha. La fila es un scroll horizontal nativo con imán (scroll-snap): en móvil se desliza con
   el dedo y las flechas (main.js) avanzan de pantalla en pantalla.
   El panel sobresale del contenedor lo que mide su relleno, para que las tarjetas queden alineadas
   con el resto de la página. --- */
.panel-proyectos {
  --relleno: clamp(20px, 4vw, 56px); --visibles: 5; --hueco: 20px;
  margin: 0 max(12px, calc(var(--content-margin) - var(--relleno)));
  padding: clamp(28px, 4vw, 56px) var(--relleno);
  background: var(--surface-muted); border-radius: clamp(24px, 3vw, 36px);
}
@media (max-width: 1279px) { .panel-proyectos { --visibles: 4; } }
@media (max-width: 1023px) { .panel-proyectos { --visibles: 3; } }
@media (max-width: 767px) { .panel-proyectos { --visibles: 2.2; --hueco: 16px; } }
@media (max-width: 479px) { .panel-proyectos { --visibles: 1.3; } }
.panel-proyectos-cabecera {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px;
  align-items: end; margin-bottom: clamp(24px, 3vw, 36px);
}
.panel-proyectos-cabecera .section-kicker { margin-bottom: 8px; }
.panel-proyectos-texto { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-secondary); max-width: 560px; justify-self: end; }
@media (max-width: 767px) {
  .panel-proyectos-cabecera { grid-template-columns: minmax(0, 1fr); }
  .panel-proyectos-texto { justify-self: start; font-size: 16px; }
}

.carrusel-pista {
  list-style: none; margin: 0; padding: 8px 0 20px; /* aire para la sombra de las tarjetas */
  display: grid; grid-auto-flow: column; gap: var(--hueco);
  grid-auto-columns: calc((100% - (var(--visibles) - 1) * var(--hueco)) / var(--visibles));
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > li { scroll-snap-align: start; min-width: 0; }
/* En móvil la fila llega hasta el borde del panel, para que se vea que sigue al deslizar. */
@media (max-width: 767px) {
  .carrusel-pista { margin: 0 calc(-1 * var(--relleno)); padding-left: var(--relleno); padding-right: var(--relleno); scroll-padding: 0 var(--relleno); }
}

.tarjeta-proyecto {
  display: flex; flex-direction: column; height: 100%; color: inherit;
  background: var(--surface-card); border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-card); transition: box-shadow .25s var(--ease-standard), transform .25s var(--ease-standard);
}
.tarjeta-proyecto:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 2px 4px rgba(30,30,30,.05), 0 12px 28px rgba(25,50,65,.12); }
.tarjeta-proyecto:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.tarjeta-proyecto-foto { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-2xl); }
.tarjeta-proyecto-foto img { transition: transform .5s var(--ease-standard); }
.tarjeta-proyecto:hover .tarjeta-proyecto-foto img { transform: scale(1.04); }
.tarjeta-proyecto-texto { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.tarjeta-proyecto-nombre { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--text-primary); }
.tarjeta-proyecto-nombre svg { width: 18px; height: 18px; vertical-align: -3px; margin-left: 6px; transition: transform .25s var(--ease-standard); }
.tarjeta-proyecto:hover .tarjeta-proyecto-nombre svg { transform: translateX(4px); }
.tarjeta-proyecto-meta { font-size: 14px; color: var(--text-secondary); }

/* Si botón y flechas no caben en una fila (móviles muy estrechos), las flechas bajan y siguen a la derecha. */
.panel-proyectos-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: clamp(12px, 2vw, 20px); }
.panel-proyectos-boton { border-radius: var(--radius-full); padding: 15px 30px; }
:root[data-theme="dark"] .panel-proyectos-boton { background: var(--text-primary); color: var(--surface-page); }
:root[data-theme="dark"] .panel-proyectos-boton:hover { background: #fff; color: var(--surface-page); }
/* En oscuro, tarjeta y panel comparten color: se separan un poco. */
:root[data-theme="dark"] .panel-proyectos { background: #141D22; }
:root[data-theme="dark"] .tarjeta-proyecto { background: #1D2A31; }
.carrusel-flechas { display: flex; gap: 14px; margin-left: auto; }
.carrusel-flecha {
  width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--text-primary);
  background: transparent; color: var(--text-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.carrusel-flecha svg { width: 22px; height: 22px; }
.carrusel-flecha:hover:not([disabled]) { background: var(--text-primary); color: var(--surface-page); }
.carrusel-flecha:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.carrusel-flecha[disabled] { opacity: .3; cursor: default; }
@media (max-width: 479px) {
  .carrusel-flecha { width: 44px; height: 44px; }
  .carrusel-flecha svg { width: 20px; height: 20px; }
  .carrusel-flechas { gap: 8px; }
  .panel-proyectos-boton { padding: 12px 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta-proyecto, .tarjeta-proyecto-foto img, .tarjeta-proyecto-nombre svg { transition: none; }
  .tarjeta-proyecto:hover { transform: none; }
  .tarjeta-proyecto:hover .tarjeta-proyecto-foto img { transform: none; }
}

/* --- por qué teideprint --- */
.why-grid { padding: clamp(80px,10vw,128px) 0; display: grid; grid-template-columns: minmax(260px,300px) minmax(460px,1fr); gap: var(--space-8); align-items: center; }
@media (max-width: 899px) { .why-grid { grid-template-columns: 1fr; } }
.why-kicker { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-4); }
.why-title { font-weight: 800; font-size: clamp(30px,3.8vw,40px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.why-title .accent { color: var(--accent); }
.why-text { font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 280px; margin-bottom: var(--space-2); }
.why-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
.value-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 639px) { .value-cards { grid-template-columns: 1fr; } }
.value-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4.6; border: 1px solid var(--border-default); }
.value-card img { width: 100%; height: 100%; object-fit: cover; }
.value-card-caption { position: absolute; left: 0; bottom: 0; right: 0; padding: var(--space-4); background: rgba(15,23,28,.55); color: #fff; }
.value-card-caption .icon-badge { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.value-card-caption .icon-badge svg { width: 18px; height: 18px; }
.value-card-caption strong { display: block; font-size: 15px; margin-bottom: 6px; }
.value-card-caption span { display: block; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.85); }

/* --- materiales --- */
.materials-tags { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-8); }
.materials-tag {
  padding: 8px 18px; border-radius: var(--radius-full); border: 1.5px solid var(--border-default); background: transparent;
  font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; font-family: var(--font-sans);
  transition: all .2s ease;
}
.materials-tag.is-active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.materials-strip { display: flex; gap: var(--space-3); height: clamp(300px,40vw,420px); margin-bottom: clamp(48px,7vw,72px); }
.materials-panel {
  position: relative; flex: .15; min-width: 32px; border-radius: 45px; overflow: hidden; cursor: pointer;
  transition: flex .5s var(--ease-standard); background: var(--surface-muted);
}
.materials-panel.is-active { flex: 3; }
.materials-panel img { width: 100%; height: 100%; object-fit: cover; }
.materials-panel .overlay { position: absolute; inset: 0; background: rgba(255,255,255,.12); transition: background .3s ease; }
.materials-panel.is-active .overlay { background: linear-gradient(to top, rgba(20,30,35,.75), rgba(20,30,35,0) 55%); }
.materials-panel-caption { position: absolute; left: 16px; bottom: 16px; right: 16px; text-align: left; display: none; }
.materials-panel.is-active .materials-panel-caption { display: block; }
.materials-panel-caption strong { display: block; font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 4px; }
.materials-panel-caption span { display: block; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.9); margin-left: 36px; }
.materials-panel:not(.is-active) .materials-panel-caption-dot { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; }
.materials-panel.is-active .materials-panel-caption-dot { display: none; }
.dot-play { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.dot-play svg { width: 11px; height: 11px; color: var(--color-teide-600); }

/* --- tira de fotos tipo polaroid (antes del footer) --- */
.polaroid-strip { position: relative; z-index: 0; display: flex; align-items: flex-end; justify-content: center; gap: 0; margin: 0 var(--content-margin) -90px; pointer-events: none; }
/* Hasta tablet la tira se desplaza en horizontal; en portátiles pequeños se reduce para caber entera. */
@media (max-width: 1023px) { .polaroid-strip { justify-content: flex-start; overflow-x: auto; margin-bottom: -30px; padding-top: 16px; padding-bottom: 16px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .polaroid-strip { zoom: .75; } }
.polaroid { pointer-events: auto; background: #fff; padding: 8px 8px 22px; border-radius: 6px; box-shadow: 0 14px 28px rgba(0,0,0,.35); transform: rotate(var(--rot)); transition: transform .3s ease, box-shadow .3s ease; flex-shrink: 0; }
.polaroid:hover { transform: translateY(-90px) scale(1.04) rotate(0deg); box-shadow: 0 26px 40px rgba(0,0,0,.45); z-index: 5; position: relative; }
.polaroid img { width: 100%; object-fit: cover; border-radius: 2px; }

/* --- footer --- */
.site-footer { position: relative; z-index: 10; background: var(--surface-inverse); border-radius: 40px 40px 0 0; padding: clamp(48px,7vw,72px) 0 28px; overflow: hidden; color: var(--text-inverse); }
.site-footer .footer-isotype { position: absolute; right: -24px; bottom: -24px; height: clamp(220px,30vw,380px); width: auto; opacity: .95; pointer-events: none; }
.footer-inner { position: relative; z-index: 1; }
.footer-cta-label { font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin-bottom: 10px; }
.footer-cta-email { display: inline-block; font-weight: 800; font-size: clamp(26px,4.2vw,42px); letter-spacing: -0.02em; color: var(--text-inverse); margin-bottom: 56px; word-break: break-word; }
.footer-cta-email:hover { color: var(--color-teide-300); }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; margin-bottom: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; font-weight: 600; color: var(--text-inverse); opacity: .85; }
.footer-col a:hover { opacity: 1; color: var(--text-inverse); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; font-size: 13px; color: var(--text-inverse); opacity: .5; }

/* --- página de categoría: cabecera (en móvil la foto queda debajo del botón) --- */
.cat-hero { padding: clamp(28px,4vw,40px) 0 clamp(56px,7vw,80px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-12); align-items: end; }
.cat-hero-mini { left: -20px; bottom: -20px; }
@media (max-width: 759px) { .cat-hero { grid-template-columns: 1fr; } .cat-hero-mini { left: -8px; } }

/* --- página de categoría: marquesina de palabras --- */
.cat-marquee { background: var(--color-volcanic); overflow: hidden; padding: clamp(20px,3vw,32px) 0; }
.cat-marquee-track { display: flex; width: max-content; animation: marqueeLeft 32s linear infinite; }
.cat-marquee-track span { display: flex; align-items: center; gap: clamp(20px,3vw,36px); padding: 0 clamp(20px,3vw,36px); font-weight: 800; font-size: clamp(28px,5vw,56px); letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.cat-marquee-track span::after { content: "\2731"; color: var(--color-teide-300); font-size: 0.6em; }

/* --- sección oscura "piezas para tu X" --- */
.cat-pieza { background: var(--color-volcanic); padding: clamp(56px,7vw,88px) 0; }
.cat-pieza-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: var(--space-12); align-items: center; }
@media (max-width: 759px) { .cat-pieza-grid { grid-template-columns: 1fr; } }
.cat-pieza-thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); margin-bottom: var(--space-8); max-width: 420px; }
.cat-pieza-thumbs > div { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; }

/* --- slider horizontal de productos --- */
.cat-slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap: wrap; }
.cat-slider-nav { display: flex; gap: 10px; }
.cat-slider-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-default); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); }
.cat-slider { display: flex; gap: var(--space-4); overflow-x: auto; scroll-behavior: smooth; padding-bottom: 8px; }
.cat-slider::-webkit-scrollbar { display: none; }
.cat-slider-card { position: relative; flex: 0 0 220px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 9/16; text-decoration: none; display: block; }
.cat-slider-card img, .cat-slider-card .marcador-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-slider-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,28,.85) 0%, rgba(15,23,28,0) 55%); }
.cat-slider-card .info { position: absolute; left: 16px; bottom: 14px; right: 16px; color: #fff; }
.cat-slider-card .info strong { display: block; font-size: 15px; }
.cat-slider-card .info span { display: block; font-size: 12px; color: rgba(255,255,255,.85); }

/* --- página de categoría: cómo fabricamos --- */
.cat-fabricamos { padding: clamp(40px,5vw,56px) 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: var(--space-12); align-items: center; }
@media (max-width: 759px) { .cat-fabricamos { grid-template-columns: 1fr; } }

/* --- casos reales --- */
.casos-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: var(--space-12); align-items: center; }
@media (max-width: 759px) { .casos-grid { grid-template-columns: 1fr; } }
.casos-media { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--border-default); }
.casos-media > div { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.casos-media img { width: 100%; height: 100%; object-fit: cover; }
.casos-media > div.is-active { opacity: 1; }
.casos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.casos-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; color: var(--text-secondary); }
.casos-list li.is-active { color: var(--text-primary); font-weight: 700; }
.casos-list li svg { width: 18px; height: 18px; color: var(--color-teide-500); flex-shrink: 0; margin-top: 2px; }

/* --- FAQ --- */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-default); }
.faq-item { border-bottom: 1px solid var(--border-default); }
.faq-question { padding: 20px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: var(--font-sans); }
.faq-question span { font-weight: 700; font-size: 16px; color: var(--text-primary); }
.faq-question svg { width: 18px; height: 18px; color: var(--text-secondary); flex-shrink: 0; transition: transform .2s ease; }
.faq-item.is-open .faq-question svg { transform: rotate(45deg); }
.faq-answer { margin: 0 4px 20px; font-size: 14px; line-height: 1.65; color: var(--text-secondary); max-width: 720px; display: none; }
.faq-item.is-open .faq-answer { display: block; }

/* --- banda CTA de categoría --- */
.cat-cta { background: var(--surface-brand); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: clamp(48px,6vw,72px) clamp(24px,5vw,64px); text-align: center; }
.cat-cta h2 { font-weight: 800; font-size: clamp(20px,2.4vw,28px); letter-spacing: -0.02em; color: #fff; margin: 0 0 10px; }
.cat-cta p { font-size: 14px; color: #fff; opacity: .85; margin: 0 auto 18px; }
.cat-cta-icons { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cat-cta-icons a { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }

/* --- ficha de producto --- */
.producto-media { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-4); height: 100%; }
.producto-thumbs { display: flex; flex-direction: column; gap: 10px; height: 100%; max-height: 420px; overflow-y: auto; }
.producto-thumbs button { flex: 0 0 80px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--border-default); cursor: pointer; padding: 0; background: none; }
.producto-thumbs button.is-active { border-color: var(--accent); }
.producto-thumbs img, .producto-thumbs .marcador-foto { width: 100%; height: 100%; object-fit: cover; }
.producto-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-muted); height: 100%; min-height: 320px; cursor: zoom-in; }
.producto-main img, .producto-main .marcador-foto { width: 100%; height: 100%; object-fit: cover; }
.producto-zoom-btn { position: absolute; bottom: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-page); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }

.producto-tabs { display: flex; gap: clamp(16px,3vw,32px); border-bottom: 1px solid var(--border-default); margin-bottom: 32px; flex-wrap: wrap; }
.producto-tab { padding: 12px 2px; font-weight: 600; font-size: 14px; color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-sans); }
.producto-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }
.producto-tabpanel { display: none; }
.producto-tabpanel.is-active { display: block; }

.lightbox { position: fixed; inset: 0; background: rgba(25,50,65,.92); z-index: 300; display: none; align-items: center; justify-content: center; padding: 32px; }
.lightbox.is-open { display: flex; }
.lightbox-inner { position: relative; max-width: 1000px; width: 100%; max-height: 88vh; }
.lightbox-inner img { width: 100%; height: 88vh; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; border-radius: 50%; background: var(--surface-page); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
.lightbox-close { top: 16px; right: 16px; width: 36px; height: 36px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.relacionados-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 20px; }
.relacionados-grid a { text-decoration: none; color: inherit; background: var(--surface-page); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.relacionados-grid img, .relacionados-grid .marcador-foto { width: 100%; height: 170px; object-fit: cover; }

/* --- cómo trabajamos: las tres piezas del paso 3; se apilan cuando su hueco no da para tres (móvil y tablet) --- */
.pasos-productos { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; width: 100%; }
@container (max-width: 300px) { .pasos-productos { grid-template-columns: 1fr; } }

/* --- páginas legales: el texto es HTML escrito en el panel, sin estilos propios (los pone esto) --- */
.legal { padding: 64px 0; max-width: 760px; }
.legal h1 { font-weight: 800; font-size: clamp(28px,4vw,40px); margin: 0 0 12px; }
.legal-fecha { font-size: 14px; color: var(--text-secondary); margin: 0 0 32px; }
.legal-texto { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.legal-texto h2 { color: var(--text-primary); font-size: 18px; margin-top: 36px; }
.legal-texto h3, .legal-texto h4 { color: var(--text-primary); font-size: 15px; margin: 22px 0 6px; }
.legal-texto blockquote { margin: 16px 0; padding-left: 16px; border-left: 3px solid var(--border-default); }
.legal-texto hr { border: 0; border-top: 1px solid var(--border-default); margin: 32px 0; }
.legal-tabla { overflow-x: auto; }
.legal-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; margin: 8px 0 4px; }
.legal-texto th, .legal-texto td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border-default); }
.legal-texto thead tr, .legal-texto th { color: var(--text-primary); }

/* --- reveal on scroll --- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* --- Estilos que antes iban en línea en las plantillas (2026-10-07). Mismos valores que tenían;
   van al final para seguir ganando, como antes, a las reglas generales de la misma especificidad. --- */
.ficha-seccion { padding:clamp(28px,4vw,40px) 0 0; }
.migas { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--text-secondary); margin-bottom:28px; flex-wrap:wrap; }
.texto-secundario { color:var(--text-secondary); }
.migas-actual { color:var(--text-primary); font-weight:600; }
.ficha-rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); gap:56px; padding-bottom:64px; align-items:stretch; }
.ficha-info { display:flex; flex-direction:column; gap:18px; }
.ficha-categoria { display:inline-flex; align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-teide-600); background:var(--color-teide-50); border-radius:var(--radius-full); padding:5px 14px; }
.ficha-titulo { font-weight:800; font-size:clamp(26px,3vw,34px); letter-spacing:-0.02em; margin:0; }
.ficha-precio { font-weight:800; font-size:24px; color:var(--color-teide-600); }
.texto-cuerpo { font-size:15px; line-height:1.6; color:var(--text-secondary); }
.ficha-separador { border-top:1px solid var(--border-default); }
.ficha-etiqueta { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:10px; }
.ficha-colores { display:flex; gap:6px; height:44px; }
.fila-chips { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.texto-pequeno { font-size:14px; color:var(--text-secondary); }
.ficha-versiones { display:flex; flex-direction:column; gap:6px; }
.ficha-version { font-size:14px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.negrita { font-weight:600; }
.fila-chips-6 { display:flex; gap:6px; flex-wrap:wrap; }
.ficha-opcion { font-size:13px; font-weight:600; color:var(--text-secondary); background:var(--surface-muted); border-radius:var(--radius-full); padding:3px 12px; }
.ficha-nota { font-size:15px; line-height:1.6; color:var(--text-secondary); margin:0; }
.ficha-botones { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.ficha-pestanas { padding-bottom:80px; }
.ficha-detalles { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:32px; align-items:start; }
.ficha-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ficha-lista-item { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; }
.ficha-lista-icono { flex-shrink:0; margin-top:1px; }
.ficha-foto-detalle { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background:var(--surface-muted); }
.ficha-material { display:flex; flex-direction:column; gap:16px; max-width:720px; }
.ficha-avisos { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; max-width:920px; }
.ficha-aviso { display:flex; gap:12px; align-items:center; padding:16px; background:var(--surface-muted); border-radius:var(--radius-md); }
.ficha-aviso-icono { flex-shrink:0; display:flex; }
.ficha-aviso-texto { font-size:14px; line-height:1.5; }
.bloque-final { padding-bottom:96px; }
.ficha-relacionados-titulo { font-weight:800; font-size:22px; letter-spacing:-0.01em; margin-bottom:24px; }
.relacionado-texto { padding:14px; display:flex; flex-direction:column; gap:4px; }
.relacionado-nombre { font-weight:700; font-size:14px; }
.relacionado-precio { font-weight:700; font-size:13px; color:var(--color-teide-600); }
.pasos-cabecera { padding:clamp(56px,8vw,88px) 0 clamp(40px,5vw,56px); text-align:center; }
.pasos-titulo { font-weight:800; font-size:clamp(32px,4.5vw,48px); line-height:1.1; letter-spacing:-0.02em; margin:0 auto; max-width:640px; }
.pasos-lista { padding:0 0 clamp(24px,4vw,48px); display:flex; flex-direction:column; gap:clamp(16px,2.5vw,24px); }
.paso { border-radius:var(--radius-xl); overflow:hidden; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }
.paso-texto { padding:clamp(56px,7vw,88px) clamp(24px,5vw,64px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; background:var(--surface-brand); }
.paso-titulo { font-weight:800; font-size:26px; color:var(--color-white); }
.paso-descripcion { font-size:15px; line-height:1.6; color:var(--color-white); opacity:.85; max-width:420px; }
.paso-foto { min-height:280px; }
.paso-productos { background:var(--surface-muted); padding:clamp(32px,5vw,48px); display:flex; align-items:center; justify-content:center; container-type:inline-size; }
.paso-producto { background:var(--surface-card); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; }
.paso-producto-foto { width:100%; height:140px; }
.paso-producto-texto { padding:12px; }
.paso-producto-nombre { font-weight:700; font-size:14px; color:var(--text-primary); margin-bottom:4px; }
.paso-producto-precio { font-size:13px; color:var(--text-secondary); }
.pasos-cta { background:var(--surface-brand); border-radius:var(--radius-xl); margin-bottom:clamp(24px,4vw,48px); padding:clamp(80px,10vw,120px) clamp(24px,5vw,64px); text-align:center; }
.pasos-cta-titulo { font-weight:800; font-size:clamp(28px,4vw,40px); letter-spacing:-0.02em; color:var(--color-white); margin:0 0 16px; }
.pasos-cta-texto { font-size:17px; color:var(--color-white); opacity:.85; max-width:520px; margin:0 auto 28px; }
.fila-iconos { display:flex; align-items:center; justify-content:center; gap:16px; }
.icono-redondo { width:52px; height:52px; border-radius:50%; background:var(--color-white); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); }
.cat-migas-seccion { padding:clamp(16px,2vw,24px) 0 0; }
.cat-migas { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--text-secondary); }
.cat-titulo-seccion { padding:clamp(12px,2vw,20px) 0 0; }
.cat-titulo { font-weight:800; font-size:clamp(48px,14vw,180px); line-height:.92; letter-spacing:-0.03em; margin:0; }
.cat-hero-texto { font-size:16px; line-height:1.6; color:var(--text-secondary); max-width:440px; margin:0 0 28px; }
.relativo { position:relative; }
.foto-4-3-borde { border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--border-default); }
.cat-hero-mini-caja { position:absolute; width:112px; background:var(--surface-page); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-elevated); padding:10px; display:flex; flex-direction:column; gap:8px; }
.cat-hero-mini-foto { border-radius:var(--radius-md); overflow:hidden; aspect-ratio:1/1; }
.cat-hero-mini-texto { font-size:11px; font-weight:700; color:var(--text-primary); text-align:center; }
.foto-4-3 { border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/3; }
.cat-pieza-titulo { font-weight:800; font-size:clamp(28px,4vw,40px); letter-spacing:-0.02em; margin:0 0 16px; color:var(--color-white); }
.cat-pieza-texto { font-size:15px; line-height:1.65; color:rgba(255,255,255,.75); margin:0 0 28px; max-width:460px; }
.cat-pieza-boton { display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:var(--radius-full); background:var(--color-white); color:var(--color-volcanic); font-weight:700; font-size:14px; text-decoration:none; }
.cat-pieza-boton-icono { width:22px; height:22px; border-radius:50%; background:var(--surface-muted); display:flex; align-items:center; justify-content:center; }
.cat-proyectos { padding:clamp(56px,7vw,88px) 0 clamp(40px,5vw,56px); }
.titulo-seccion-sm { font-weight:800; font-size:clamp(24px,3vw,30px); letter-spacing:-0.01em; margin:0; }
.cat-fabricamos-kicker { font-weight:800; font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--color-teide-900); margin-bottom:14px; }
:root[data-theme="dark"] .cat-fabricamos-kicker { color: var(--text-brand); } /* el 900 casi no se ve sobre fondo oscuro */
.cat-fabricamos-titulo { font-weight:800; font-size:clamp(24px,3vw,32px); line-height:1.2; letter-spacing:-0.02em; margin:0 0 16px; }
.cat-fabricamos-texto { font-size:15px; line-height:1.65; color:var(--text-secondary); margin:0 0 24px; max-width:460px; }
.cat-casos { padding:0 0 clamp(56px,7vw,88px); }
.cat-casos-titulo { font-weight:800; font-size:clamp(26px,3.4vw,34px); letter-spacing:-0.02em; margin:0 0 20px; }
.cat-faqs { padding:0 0 clamp(64px,8vw,96px); }
.cat-faqs-titulo { font-weight:800; font-size:clamp(24px,3vw,30px); letter-spacing:-0.01em; margin:0 0 28px; }
.catalogo-cabecera { padding:clamp(48px,7vw,72px) 0 24px; }
.catalogo-titulo { font-weight:800; font-size:clamp(30px,4vw,42px); letter-spacing:-0.02em; margin:0 0 12px; }
.catalogo-intro { font-size:16px; line-height:1.6; color:var(--text-secondary); margin:0 0 32px; max-width:640px; }
.catalogo-buscador { position:relative; margin-bottom:24px; }
.catalogo-buscador-icono { position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--text-secondary); }
.catalogo-buscador-campo { font-family:var(--font-sans); font-size:15px; width:100%; box-sizing:border-box; padding:14px 20px 14px 48px; border-radius:43px; border:1.5px solid var(--border-default); background:var(--surface-muted); color:var(--text-primary); }
.catalogo-chips { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
.catalogo-tarjeta { text-decoration:none; color:inherit; background:var(--surface-page); border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.catalogo-tarjeta-foto { width:100%; height:220px; }
.catalogo-tarjeta-cuerpo { padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.catalogo-tarjeta-nombre { font-weight:700; font-size:16px; }
.catalogo-tarjeta-texto { font-size:14px; line-height:1.5; color:var(--text-secondary); flex:1; }
.catalogo-tarjeta-pie { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:16px; border-top:1px solid var(--border-default); }
.catalogo-tarjeta-categoria { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); }
.catalogo-vacio { color:var(--text-secondary); text-align:center; padding:40px 0; }
.contacto-seccion { padding:clamp(64px,9vw,104px) 0 clamp(56px,8vw,88px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:var(--space-16); }
.contacto-titulo { font-weight:800; font-size:clamp(32px,4.5vw,48px); line-height:1.1; letter-spacing:-0.02em; margin:0 0 20px; }
.contacto-texto { font-size:16px; line-height:1.6; color:var(--text-secondary); max-width:460px; }
.contacto-tarjetas { display:flex; flex-direction:column; gap:16px; }
.contacto-tarjeta { display:flex; align-items:center; gap:16px; padding:24px; border:1px solid var(--border-default); border-radius:var(--radius-lg); }
.sin-encoger { flex-shrink:0; }
.contacto-tarjeta-titulo { font-weight:700; font-size:16px; color:var(--text-primary); }
.sin-relleno-arriba { padding-top:0; }
.materiales-seccion { padding:0 0 72px; text-align:center; scroll-margin-top:110px; }
.materiales-kicker { letter-spacing:var(--tracking-descriptor); }
.material-cabecera { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.error-seccion { padding:96px 0; text-align:center; }
.error-titulo { font-weight:800; font-size:clamp(32px,5vw,56px); margin:0 0 16px; }
.error-texto { color:var(--text-secondary); margin:0 0 32px; }
.pie-cta { max-width:640px; }

/* Foto de imagen_o_marcador() (antes, estilo en línea). img.foto-llena empata con reglas como
   .relacionados-grid img y, al ir al final, gana igual que ganaba el estilo en línea. */
img.foto-llena { width: 100%; height: 100%; object-fit: cover; display: block; }
img.foto-llena.foto-contener { object-fit: contain; }

/* Insignias de material. Colores = MATERIALES_COLOR (inc/render.php); un test comprueba que coinciden. */
.insignia-material { font-size: 13px; font-weight: 700; border-radius: var(--radius-full); padding: 5px 14px; }
.insignia-material-sm { font-size: 12px; padding: 4px 12px; }
.insignia-material-bloque { display: inline-flex; align-self: flex-start; }
.material-pla { color: #1D4ED8; background: #DBEAFE; }
.material-tpu { color: #C2410C; background: #FFEDD5; }
.material-petg { color: #374151; background: #E5E7EB; }
.material-abs { color: #FFFFFF; background: #1E1E1E; }

/* Muestras de color de la ficha: el color va en el fill del SVG (producto.php). */
.muestra-color { width: 26px; height: 100%; transform: skewX(-14deg); overflow: visible; }
.muestra-color rect { stroke: var(--border-default); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Tarjetas de categoría de la portada: un tono por color de PALETA_TARJETAS (inc/render.php), en
   data-tono. Si se añade un color a la paleta, añadir aquí su regla (un test lo comprueba). */
.cat-card { --tono: #0FB4C2; --tono-texto: var(--color-white); }
.cat-card[data-tono="0FB4C2"] { --tono: #0FB4C2; }
.cat-card[data-tono="37C0CB"] { --tono: #37C0CB; }
.cat-card[data-tono="4FD1C5"] { --tono: #4FD1C5; }
.cat-card[data-tono="3EC6B3"] { --tono: #3EC6B3; }
.cat-card[data-tono="59A6B0"] { --tono: #59A6B0; }
.cat-card[data-tono="7FB6D6"] { --tono: #7FB6D6; }
.cat-card[data-tono="8CDCE3"] { --tono: #8CDCE3; }
.cat-card[data-tono="C9D4D6"] { --tono: #C9D4D6; --tono-texto: var(--text-primary); }
.cat-card[data-tono="E4ECEC"] { --tono: #E4ECEC; --tono-texto: var(--text-primary); }
.cat-card .cat-card-body { background: color-mix(in oklch, var(--tono) 12%, white); }
/* En oscuro, el tinte se mezcla con la superficie oscura: con blanco, el nombre (texto claro) no se leía. */
:root[data-theme="dark"] .cat-card .cat-card-body { background: color-mix(in oklch, var(--tono) 12%, var(--surface-card)); }
.cat-card .cat-card-tag { color: var(--tono); }
.cat-card .cat-card-pill { background: var(--tono); color: var(--tono-texto); }

/* Polaroids del final de la portada: tamaño y giro de cada una (diseño). */
.polaroid-1 { --rot: -6deg; width: 220px; }
.polaroid-1 img, .polaroid-1 .marcador-foto { height: 165px; }
.polaroid-2 { --rot: 4deg; width: 250px; margin-left: -30px; }
.polaroid-2 img, .polaroid-2 .marcador-foto { height: 260px; }
.polaroid-3 { --rot: -3deg; width: 250px; margin-left: -30px; }
.polaroid-3 img, .polaroid-3 .marcador-foto { height: 180px; }
.polaroid-4 { --rot: 5deg; width: 210px; margin-left: -30px; }
.polaroid-4 img, .polaroid-4 .marcador-foto { height: 290px; }
.polaroid-5 { --rot: -5deg; width: 235px; margin-left: -30px; }
.polaroid-5 img, .polaroid-5 .marcador-foto { height: 172px; }
.polaroid-6 { --rot: 6deg; width: 185px; margin-left: -30px; }
.polaroid-6 img, .polaroid-6 .marcador-foto { height: 268px; }

/* Cómo trabajamos, paso 3: foto de fondo opcional detrás de las tres piezas (paso3_imagen). */
.paso-productos { position: relative; }
.paso-productos-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.paso-productos .pasos-productos { position: relative; z-index: 1; }

/* Enlace "Cambiar preferencias de cookies" del pie (Clickio Consent). Clickio pide ocultarlo con un
   style="display:none" en línea; aquí va por clase, porque la CSP no admite estilos en línea. Se
   enseña cuando su script marca el <body> con clickio-cmp-in-scope (el aviso aplica a esta visita). */
.clickio-cmp-settings-display { display: none; }
body.clickio-cmp-in-scope .clickio-cmp-settings-display { display: inherit !important; }

/* --- Marca "AI MODIFIED" en las fotos hechas con IA (tabla fotos_ia; marca_ia() en inc/render.php) ---
   Abajo a la izquierda y en pequeño: un 15 % del ancho de la foto, entre 34 y 72 px (reducida el 2026-10-08). :where() deja la
   caja sin especificidad, para que la colocación de cada sitio (p. ej. .destacado-foto, absoluta)
   siga mandando. La marca lleva !important en lo que no debe cambiar nunca: hay reglas de cada sitio
   que agrandan o mueven las fotos al pasar el ratón (y no deben arrastrar la marca). */
:where(.foto-ia) { position: relative; display: block; width: 100%; height: 100%; }
span.foto-ia > img.marca-ia, .foto-ia-lightbox > img.marca-ia {
  position: absolute !important; left: 8px !important; bottom: 8px !important; top: auto !important; right: auto !important;
  width: clamp(34px, 15%, 72px) !important; height: auto !important; max-width: none !important;
  object-fit: contain !important; border-radius: 0 !important; transform: none !important;
  margin: 0 !important; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35));
}
/* Donde abajo a la izquierda ya hay texto encima de la foto, la marca se cambia de esquina. */
.destacado span.foto-ia > img.marca-ia { bottom: auto !important; top: 12px !important; left: auto !important; right: 12px !important; }
.materials-panel span.foto-ia > img.marca-ia { bottom: auto !important; top: 12px !important; }
/* Las polaroids quedan cortadas por abajo detrás del pie: arriba, para que se vea. */
.polaroid span.foto-ia > img.marca-ia { bottom: auto !important; top: 8px !important; }
/* En las miniaturas de la ficha no cabe: la lleva la foto grande. Tampoco en las tiras plegadas de materiales. */
.producto-thumbs .marca-ia, .materials-panel:not(.is-active) .marca-ia { display: none; }
/* Ampliación de la ficha: la marca va sobre la foto. Sin JS, sobre toda la caja; producto.js la
   ajusta a lo que ocupa la foto de verdad (object-fit: contain deja bandas en las verticales). */
.foto-ia-lightbox { position: absolute; inset: 0; pointer-events: none; }
.foto-ia-lightbox[hidden] { display: none; }