/* Assortia Partner — sitio público. Tokens: ver docs/DESIGN-SYSTEM.md */

:root {
  /* Color de marca */
  --color-primary: #0F172A;
  --color-secondary: #334155;
  --color-neutral: #F8FAFC;

  /* Paleta derivada */
  --color-background: #f7f9fb;
  --color-on-background: #191c1e;
  --color-surface: #f7f9fb;
  --color-on-surface: #191c1e;
  --color-surface-variant: #e0e3e5;
  --color-on-surface-variant: #45464d;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container: #eceef0;
  --color-surface-container-high: #e6e8ea;
  --color-surface-container-highest: #e0e3e5;
  --color-ink: #000000;
  --color-on-primary: #ffffff;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-outline: #76777d;
  --color-outline-variant: #c6c6cd;
  --color-border-hairline: #e2e8f0;
  --color-contact: #3F4D5F;

  /* Tipografía */
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-display-2xl: 700 72px/80px var(--font-body);
  --text-display-xl: 700 60px/72px var(--font-body);
  --text-display-lg: 600 48px/56px var(--font-body);
  --text-display-lg-mobile: 600 36px/44px var(--font-body);
  --text-headline-md: 600 32px/40px var(--font-body);
  --text-headline-sm: 600 24px/32px var(--font-body);
  --text-body-lg: 400 18px/28px var(--font-body);
  --text-body-md: 400 16px/24px var(--font-body);
  --text-label-mono: 500 12px/16px var(--font-mono);

  /* Espaciado */
  --space-unit: 8px;
  --space-gutter: 32px;
  --space-margin-mobile: 20px;
  --space-section-lg: 120px;
  --space-section-sm: 64px;
  --container-max: 1280px;
  --header-height: 80px;
  --logo-height: 56px;

  /* Banners: velo sobre fotografía y degradado de marca */
  --overlay-scrim: rgba(0, 0, 0, 0.6);
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

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

html { scroll-behavior: smooth; }
/* Al volver al formulario con errores (#formulario), salto directo sin animación */
html:has(#formulario:target) { scroll-behavior: auto; }

body {
  margin: 0;
  font: var(--text-body-md);
  color: var(--color-on-surface);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, address, figure { margin: 0; }

ul { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-margin-mobile);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--space-gutter); }
}

.section { padding: var(--space-section-sm) 0; }

@media (min-width: 1024px) {
  .section { padding: var(--space-section-lg) 0; }
}

.section--tight { padding: var(--space-gutter) 0; }
.section--dark { background: var(--color-ink); color: var(--color-on-primary); }
.section--alt { background: var(--color-surface-container-low); }
.section--bordered { border-top: 1px solid var(--color-outline-variant); }

/* Texto */
.eyebrow {
  font: var(--text-label-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
}

.display-lg { font: var(--text-display-lg-mobile); color: var(--color-primary); }
@media (min-width: 768px) { .display-lg { font: var(--text-display-lg); } }

.text-muted { color: var(--color-outline); }

.headline-md { font: var(--text-headline-md); color: var(--color-primary); }
.headline-sm { font: var(--text-headline-sm); color: var(--color-primary); }
.body-lg { font: var(--text-body-lg); color: var(--color-on-surface-variant); }

/* Header / navegación */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface-container-lowest);
  border-bottom: 1px solid var(--color-outline-variant);
}

/* Destino de ancla (#...): que el header sticky no lo tape */
.anchor-target { scroll-margin-top: calc(var(--header-height) + var(--space-gutter)); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-header__brand {
  font: var(--text-headline-sm);
  font-weight: 700;
  color: var(--color-primary);
}

.site-header__brand { display: inline-flex; }

.site-logo { height: var(--logo-height); width: auto; }

.site-nav { display: none; gap: var(--space-gutter); align-items: center; }

@media (min-width: 768px) {
  .site-nav { display: flex; }
}

.site-nav a {
  font: var(--text-label-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--color-primary); }

.site-nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom-color: var(--color-primary);
}

.nav-toggle {
  display: inline-flex;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-surface-container-lowest);
}

.nav-drawer.is-open { display: block; }

.nav-drawer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-margin-mobile);
  border-bottom: 1px solid var(--color-outline-variant);
}

.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-gutter);
  padding: var(--space-section-sm) var(--space-margin-mobile);
}

.nav-drawer__links a { font: var(--text-headline-sm); color: var(--color-secondary); }
.nav-drawer__links a[aria-current="page"] { color: var(--color-primary); }

/* Botones */
.btn {
  display: inline-block;
  padding: 16px 32px;
  font: var(--text-label-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-ink); }

.btn-secondary { background: transparent; color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-surface-container-low); }

.btn-inverse { background: var(--color-on-primary); color: var(--color-primary); border-color: var(--color-on-primary); }
.btn-inverse:hover { background: var(--color-surface-container-low); }

.btn-sm { padding: 8px 16px; }

/* Hero */
.hero {
  display: grid;
  gap: var(--space-gutter);
  align-items: center;
  padding-block: var(--space-gutter); /* sin tocar el padding lateral de .container */
}

@media (min-width: 768px) {
  .hero { grid-template-columns: 1fr 1fr; }
}

.hero__media {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-container-high);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-outline);
  font: var(--text-label-mono);
  text-align: center;
  padding: var(--space-gutter);
}

/* Hero a pantalla completa con imagen de fondo (solo Inicio) */
.hero-full {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-surface-container-lowest);
}

.hero-full__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-surface-container-highest) center / cover no-repeat;
  filter: grayscale(100%);
  opacity: 0.1;
}

.hero-full__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--color-background) 0%, rgba(247, 249, 251, 0.8) 50%, transparent 100%);
}

.hero-full__content {
  position: relative;
  z-index: 2;
  max-width: 672px;
  padding-top: var(--space-section-sm);
}

@media (min-width: 1024px) {
  .hero-full__content { padding-left: var(--space-section-sm); }
}

.hero-full__eyebrow {
  border-left: 2px solid var(--color-primary);
  padding-left: 16px;
}

.breadcrumbs {
  font: var(--text-label-mono);
  text-transform: uppercase;
  color: var(--color-outline);
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-unit);
}

.breadcrumbs a:hover { color: var(--color-primary); }

/* Grid de columnas */
.grid { display: grid; gap: var(--space-gutter); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Imagen con recuadro negro superpuesto en la esquina (Marca propia) */
.media-frame { --badge-size: 256px; --badge-offset: calc(var(--space-gutter) / 2); position: relative; }

.media-frame__badge {
  display: none;
  position: absolute;
  right: calc(var(--badge-offset) * -1);
  bottom: calc(var(--badge-offset) * -1);
  width: var(--badge-size);
  height: var(--badge-size);
  padding: var(--space-gutter);
  background: var(--color-ink);
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  .media-frame__badge { display: flex; }
}

/* Grid que se adapta al número de elementos (p. ej. familias desde BBDD) */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Bento grid asimétrico (12 columnas) */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-gutter); }
.bento > * { grid-column: span 12; }

@media (min-width: 768px) {
  .bento .col-8 { grid-column: span 8; }
  .bento .col-4 { grid-column: span 4; }
  .bento .col-6 { grid-column: span 6; }
}

.bento-cell {
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}

.bento-cell--dark { background: var(--color-ink); color: var(--color-on-primary); border-color: var(--color-ink); }
.bento-cell--alt { background: var(--color-surface-container-highest); }

/* Fila con scroll horizontal (categorías) */
.scroll-row {
  display: flex;
  gap: var(--space-gutter);
  overflow-x: auto;
  padding-bottom: var(--space-unit);
  scrollbar-width: none;
}

.scroll-row::-webkit-scrollbar { display: none; }

.scroll-row > * { min-width: 260px; flex: 0 0 auto; }


/* Banners de Inicio: un componente, tres composiciones (image_side, image_background, solid) */
.home-banners {
  background: var(--color-surface-container-lowest);
  border-bottom: 1px solid var(--color-outline-variant);
}

.banner-carousel {
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  overflow: hidden;
}

/* Todas las diapositivas en la misma celda: la altura es la de la más alta y no hay saltos al cambiar */
.banner-carousel__slides { display: grid; }

.banner-slide {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  background: var(--color-surface-container-lowest);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
}

.banner-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Tonos (campo `background`): light por defecto; dark y gradient invierten los colores del contenido */
.banner-slide--solid { background: var(--color-surface-container-low); }
.banner-slide--tone-dark { background: var(--color-primary); }
.banner-slide--tone-gradient { background: var(--gradient-brand); }

.banner-slide--tone-dark,
.banner-slide--tone-gradient {
  --banner-title: var(--color-on-primary);
  --banner-text: var(--color-on-primary);
  --banner-text-opacity: 0.8;
  --banner-line: var(--color-on-primary);
  --banner-media-border: var(--color-secondary);
}

.banner-slide__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: calc(var(--space-unit) * 3);
}

.banner-slide__title {
  font: var(--text-headline-sm);
  letter-spacing: -0.025em;
  color: var(--banner-title, var(--color-primary));
  margin-bottom: calc(var(--space-unit) * 2);
}

.banner-slide__text {
  font: var(--text-body-md);
  line-height: 1.625;
  color: var(--banner-text, var(--color-on-surface-variant));
  opacity: var(--banner-text-opacity, 1);
  max-width: 32rem;
  margin-bottom: calc(var(--space-unit) * 3);
}

/* image_side: imagen a la derecha (apilada bajo el texto en móvil) */
.banner-slide__media {
  position: relative;
  height: 256px;
  overflow: hidden;
  background: var(--color-surface-container-low);
  border-top: 1px solid var(--banner-media-border, var(--color-outline-variant));
}

.banner-slide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.7s ease;
}

.banner-slide__media:hover img { filter: none; }

/* image_background y solid: contenido centrado con ancho máximo */
.banner-slide--image-background,
.banner-slide--solid {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.banner-slide--image-background .banner-slide__body,
.banner-slide--solid .banner-slide__body {
  flex: none;
  width: 100%;
  max-width: 40rem;
  align-items: center;
}

/* image_background: la fotografía llena el banner, en gris y con velo para asegurar la legibilidad */
.banner-slide--image-background .banner-slide__media {
  position: absolute;
  inset: 0;
  height: auto;
  border: 0;
  background: var(--color-primary);
}

.banner-slide--image-background .banner-slide__media img,
.banner-slide--image-background .banner-slide__media:hover img { filter: grayscale(100%) brightness(0.5); }

.banner-slide--image-background .banner-slide__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
}

/* solid: filete de marca sobre el título, para que no parezca una imagen que falta */
.banner-slide--solid .banner-slide__body::before {
  content: '';
  width: 64px;
  height: 2px;
  margin-bottom: calc(var(--space-unit) * 3);
  background: var(--banner-line, var(--color-primary));
}

@media (min-width: 768px) {
  .banner-slide { min-height: 340px; }
  .banner-slide--image-side { flex-direction: row; }
  .banner-slide__body { padding: calc(var(--space-unit) * 5); }
  .banner-slide__title { font: var(--text-headline-md); letter-spacing: -0.025em; }
  .banner-slide--image-side .banner-slide__media {
    flex: none;
    width: 41.6667%;
    height: auto;
    border-top: 0;
    border-left: 1px solid var(--banner-media-border, var(--color-outline-variant));
  }
}

.banner-carousel__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-unit) calc(var(--space-unit) * 3);
  border-top: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
}

.banner-carousel__dots { display: flex; gap: var(--space-unit); }

/* Barra de 4px con zona de toque mayor (padding + background-clip) */
.banner-carousel__dot {
  width: 32px;
  height: 16px;
  padding: 6px 0;
  border: 0;
  background: var(--color-outline-variant) content-box;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.banner-carousel__dot:hover { background-color: var(--color-outline); }
.banner-carousel__dot.is-active { background-color: var(--color-primary); }

.banner-carousel__arrows { display: flex; gap: calc(var(--space-unit) / 2); }

.banner-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.banner-carousel__arrow:hover { background: var(--color-surface-container-low); }

@media (prefers-reduced-motion: reduce) {
  .banner-slide, .banner-slide__media img { transition: none; }
}

/* Cards */
.card {
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  padding: 40px;
}

.card--dark { background: var(--color-ink); color: var(--color-on-primary); border-color: var(--color-ink); }

.card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--space-unit);
}

.card__icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-unit);
}

/* Esquema fabricante → intermediario → distribuidor (Servicios) */
.flow {
  --flow-node: 96px;
  --flow-node-main: 128px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-section-sm);
  max-width: 1024px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .flow { flex-direction: row; justify-content: space-between; }
  .flow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-outline-variant);
    transform: translateY(-50%);
  }
}

.flow__node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.flow__icon {
  width: var(--flow-node);
  height: var(--flow-node);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-lowest);
  border: 2px solid var(--color-outline-variant);
  margin-bottom: 16px;
}

.flow__icon--main {
  width: var(--flow-node-main);
  height: var(--flow-node-main);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.flow__brand { font: var(--text-label-mono); text-transform: uppercase; margin-top: 4px; }
.flow__title { font: var(--text-body-md); font-weight: 700; color: var(--color-primary); }

/* Pasos numerados (Servicios) */
.step__num { font: 300 60px/1 var(--font-body); color: var(--color-outline-variant); margin-bottom: 16px; transition: color 0.3s ease; }
.step:hover .step__num { color: var(--color-outline); }
.step__title { font: var(--text-body-md); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); margin-bottom: 8px; }

/* Listas separadas horizontalmente */
.list-divided > * {
  border-bottom: 1px solid var(--color-outline-variant);
  padding: var(--space-unit) 0;
}

.list-divided > *:last-child { border-bottom: none; }

/* Formularios */
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-gutter); }

.form-field label {
  font: var(--text-label-mono);
  text-transform: uppercase;
  color: var(--color-secondary);
}

.form-field input,
.form-field select,
.form-field textarea {
  border: none;
  border-bottom: 1px solid var(--color-outline-variant);
  background: transparent;
  padding: 12px 0;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-field [aria-invalid="true"] { border-color: var(--color-error); }

.form-error { font: var(--text-label-mono); color: var(--color-error); }

.form-check { display: flex; align-items: flex-start; gap: 12px; }
.form-check input { margin-top: 4px; }
.form-check label { color: var(--color-on-surface-variant); }
.form-check a, .form-legal a { text-decoration: underline; }

/* Honeypot anti-spam: fuera de pantalla (no display:none, que algunos bots detectan) */
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Información básica RGPD bajo el formulario */
.form-legal {
  margin-top: var(--space-gutter);
  padding-top: var(--space-gutter);
  border-top: 1px solid var(--color-outline-variant);
  font: var(--text-label-mono);
  color: var(--color-outline);
}
.form-legal p + p { margin-top: var(--space-unit); }

.form-note { font: var(--text-label-mono); color: var(--color-outline); max-width: 320px; }

/* Datos de contacto (Contacto) */
.contact-details { font-style: normal; color: var(--color-on-surface-variant); }
.contact-details p { padding-bottom: var(--space-unit); margin-bottom: 12px; border-bottom: 1px solid var(--color-border-hairline); }
.contact-details p:last-child { border-bottom: none; margin-bottom: 0; }
.contact-details .eyebrow { display: block; margin-bottom: 4px; }

.form-status {
  border: 1px solid var(--color-outline-variant);
  padding: var(--space-gutter);
  margin-bottom: var(--space-gutter);
}

.form-status--ok { border-color: var(--color-primary); }
.form-status--error { border-color: var(--color-error); color: var(--color-on-error-container); background: var(--color-error-container); }

.placeholder-note {
  display: inline-block;
  font: var(--text-label-mono);
  text-transform: uppercase;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  padding: 2px 8px;
}

/* Acordeón */
.accordion-item { border-top: 1px solid var(--color-outline-variant); }
.accordion-item summary {
  padding: var(--space-unit) 0;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.accordion-item p { padding-bottom: var(--space-gutter); color: var(--color-on-surface-variant); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-highest);
  padding: var(--space-section-sm) 0;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-gutter);
}

@media (min-width: 768px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gutter) var(--space-unit);
}

.site-footer__links a {
  font: var(--text-label-mono);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.site-footer__links a:hover { color: var(--color-primary); }

/* Columna derecha: menú y, debajo, botones de contacto (email, WhatsApp) */
.site-footer__right { display: flex; flex-direction: column; gap: var(--space-gutter); }
@media (min-width: 768px) {
  .site-footer__right { align-items: flex-end; }
}
.site-footer__contact { display: flex; gap: var(--space-unit); }
.site-footer__contact .btn { color: var(--color-contact); border-color: var(--color-contact); }

/* Línea inferior: copyright a la izquierda, enlaces legales a la derecha (texto normal, no mono/mayúsculas) */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-unit) var(--space-gutter);
  margin-top: var(--space-gutter);
  padding-top: var(--space-gutter);
  border-top: 1px solid var(--color-outline-variant);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-unit) var(--space-gutter);
}

.site-footer__legal a { color: var(--color-on-surface-variant); }
.site-footer__legal a:hover { color: var(--color-primary); }


/* Contenido legal (aviso legal, privacidad, cookies) */
.legal-content h2 { font: var(--text-headline-sm); color: var(--color-primary); margin: var(--space-gutter) 0 var(--space-unit); }
.legal-content p, .legal-content li { color: var(--color-on-surface-variant); margin-bottom: var(--space-unit); }
.legal-content ul { list-style: disc; padding-left: 24px; }

/* Inicio: tarjetas de categoría (desde BBDD) en la fila con scroll */
.home-category {
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease;
}

.home-category:hover,
.home-category:focus-visible { border-color: var(--color-primary); }

.home-category__cta {
  margin-top: auto;
  padding-top: var(--space-gutter);
  font: var(--text-label-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

/* Productos: etiquetas y tarjetas de categoría */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-unit); margin-top: var(--space-gutter); }

.tag {
  font: var(--text-label-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  padding: var(--space-unit) calc(var(--space-unit) * 2);
}

.category-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-gutter);
  min-height: 280px;
  padding: 40px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  transition: border-color 0.3s ease;
}

.category-card:hover,
.category-card:focus-visible { border-color: var(--color-primary); }

.category-card__cta {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-gutter);
  border-top: 1px solid var(--color-outline-variant);
  font: var(--text-label-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.category-card__cta span { transition: transform 0.3s ease; }
.category-card:hover .category-card__cta span { transform: translateX(var(--space-unit)); }


/* Categoría: foto de cabecera, familias en acordeón (<details>, una abierta a la vez) y familias estratégicas */
.hero__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-container-high);
  border: 1px solid var(--color-outline-variant);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.7s ease;
}

.hero__photo:hover img { filter: none; }

.category-layout { display: grid; gap: var(--space-gutter); }

@media (min-width: 1024px) {
  .category-layout { grid-template-columns: 1fr 2fr; align-items: start; }
  .category-layout__aside { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--header-height) + var(--space-gutter)); }
  .category-layout__main { grid-column: 2; }
}

.category-layout__aside { display: grid; gap: var(--space-gutter); }

.family-list { display: grid; gap: var(--space-unit); margin-top: var(--space-gutter); }

.family-item {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
}

.family-item[open] { border-color: var(--color-primary); }

.family-item__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-unit);
  padding: var(--space-gutter);
  font: var(--text-headline-sm);
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}

.family-item__summary::-webkit-details-marker { display: none; }

.family-item__summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.family-item[open] .family-item__summary::after { transform: translateY(25%) rotate(-135deg); }

.family-item__content {
  display: grid;
  gap: calc(var(--space-unit) * 2);
  padding: 0 var(--space-gutter) var(--space-gutter);
}

.product-list {
  display: grid;
  gap: var(--space-unit) var(--space-gutter);
  padding-top: calc(var(--space-unit) * 2);
  border-top: 1px solid var(--color-border-hairline);
  color: var(--color-on-surface-variant);
}

@media (min-width: 768px) {
  .product-list { grid-template-columns: repeat(2, 1fr); }
}

.product-list li { display: flex; align-items: center; gap: var(--space-unit); }

.product-list li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
}

.text-link { color: var(--color-primary); text-decoration: underline; }

.featured-family {
  display: grid;
  gap: calc(var(--space-unit) * 2);
  padding: var(--space-gutter);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
}

.featured-family__media {
  position: relative;
  height: 192px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
}

.featured-family__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.featured-family__media:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
}

.featured-family__name {
  position: relative;
  z-index: 1;
  padding: 0 calc(var(--space-unit) * 2);
  font: var(--text-headline-sm);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-on-primary);
}

.featured-family__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--space-unit) * 2);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.featured-family__link span { transition: transform 0.3s ease; }
.featured-family__link:hover span { transform: translateX(4px); }

/* Familia destacada: gama de productos (recuadros) y, si es de marca propia, tarjeta lateral */
.family-layout { display: grid; gap: var(--space-gutter); }

@media (min-width: 1024px) {
  .family-layout--with-aside { grid-template-columns: 2fr 1fr; align-items: start; }
}

.range-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: calc(var(--space-unit) * 2);
  margin-top: var(--space-gutter);
}

.range-list li {
  padding: calc(var(--space-unit) * 3);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  font: var(--text-body-lg);
  color: var(--color-primary);
}

.private-label-card { display: grid; gap: calc(var(--space-unit) * 2); justify-items: start; }

/* Próximamente (prelanzamiento, src/pages/proximamente.php): logo grande a la izquierda + panel oscuro de contacto */
.soon { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; background: var(--color-surface-container-lowest); }

@media (min-width: 1024px) {
  .soon { grid-template-columns: 7fr 5fr; grid-template-rows: none; }
}

.soon__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-section-sm);
  padding: var(--space-gutter) var(--space-margin-mobile);
}

@media (min-width: 768px) {
  .soon__content { padding: var(--space-section-sm); }
}

.soon__body { flex: 1; display: grid; place-items: center; text-align: center; }

.soon__logo { align-self: flex-start; width: 100%; max-width: 200px; height: auto; }

.soon__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-unit);
  color: var(--color-primary);
}

.soon__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--space-unit) * 2); }

.soon__title { font: var(--text-display-lg); letter-spacing: -0.02em; color: var(--color-primary); }

@media (min-width: 768px) {
  .soon__title { font: var(--text-display-2xl); letter-spacing: -0.04em; }
}

.soon__pulse {
  width: var(--space-unit);
  height: var(--space-unit);
  background: var(--color-primary);
  animation: soon-pulse 1.6s ease-in-out infinite;
}

@keyframes soon-pulse { 50% { opacity: 0.2; } }

@media (prefers-reduced-motion: reduce) {
  .soon__pulse { animation: none; }
}

.soon__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-section-sm) var(--space-margin-mobile);
}

@media (min-width: 768px) {
  .soon__panel { padding: var(--space-section-sm); }
}

.soon__panel-media {
  position: absolute;
  inset: 0;
  background: url('/assets/img/site/shelvingOrganizedWareHouse.png') center / cover no-repeat;
  filter: grayscale(100%);
  opacity: 0.25;
}

.soon__contact {
  position: relative;
  width: 100%;
  display: grid;
  gap: var(--space-gutter);
  padding-top: var(--space-gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.soon__contact-title { font: var(--text-display-lg-mobile); }

@media (min-width: 768px) {
  .soon__contact-title { font: var(--text-display-lg); letter-spacing: -0.02em; }
}

.soon__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space-unit) * 3); }

.soon__email {
  font: var(--text-label-mono);
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}

.soon__email:hover { border-color: var(--color-on-primary); }