/* Kuu Kum 2.0 — prototipo de inicio. Mundo: «La caja del kit». Colores y tipos vienen de tokens.css. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --petroleo: var(--color-brand-primary-petroleo);
  --petroleo-hondo: #001f27; /* fondo de la espuma: petróleo más profundo */
  --menta: var(--color-brand-primary-menta);
  --menta-700: var(--color-brand-secondary-menta-700);
  --menta-50: var(--color-brand-secondary-menta-50);
  --sol: var(--color-brand-accent);
  --sol-hover: #ffcf66;
  --violeta: var(--color-brand-secondary-violeta);
  --violeta-50: var(--color-brand-secondary-violeta-50);
  --violeta-700: var(--color-brand-secondary-violeta-700);
  --arena: var(--color-brand-secondary-arena);
  --arena-claro: #f4ece2;
  --blanco: var(--color-neutral-0);
  --gris-50: var(--color-neutral-50);
  --gris-200: var(--color-neutral-200);
  /* Contorno de campos y opciones: petróleo aclarado, 3.6:1 sobre blanco (WCAG 1.4.11) */
  --borde-control: color-mix(in srgb, var(--petroleo) 55%, var(--blanco));
  --gris-500: var(--color-neutral-500);
  --gris-700: var(--color-neutral-700);
  --sobre-oscuro: var(--color-theme-dark-fg);
  --sobre-oscuro-tenue: var(--color-theme-dark-muted);


  /* Escala de radios: 4 px detalles, 8 px controles y tarjetas, 12 px contenedores */
  --radio-sm: 4px;
  --radio: 8px;
  --radio-lg: 12px;
  --gutter: clamp(16px, 4vw, 48px);
  --ancho: 1320px;
  --sombra-hueco: inset 0 2px 6px rgb(0 0 0 / 0.35), inset 0 -1px 0 rgb(255 255 255 / 0.04);
  --sombra-pieza: 0 18px 40px -18px rgb(0 31 39 / 0.45), 0 4px 10px -4px rgb(0 31 39 / 0.2);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--petroleo);
  font-family: var(--font-text);
  font-size: var(--size-base);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--menta);
  color: var(--petroleo);
}

:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 3px;
  border-radius: 4px;
}

html {
  scrollbar-color: var(--gris-500) var(--gris-50);
}

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

a {
  color: var(--menta-700);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(var(--size-2xl), 3.2vw, var(--size-4xl));
}
h3 {
  font-size: var(--size-xl);
  font-weight: var(--weight-display-semibold);
  letter-spacing: -0.015em;
}
p {
  margin: 0;
  text-wrap: pretty;
}

.envoltura {
  width: 100%;
  max-width: calc(var(--ancho) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Botones ---------- */

.boton {
  -webkit-appearance: none;
  appearance: none;
  --fondo: var(--sol);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.75em 1.35em;
  border: 0;
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--petroleo);
  font: 600 var(--size-base) / 1 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 6px 16px -8px rgb(154 98 0 / 0.55);
  white-space: nowrap;
}
.boton:hover {
  background: var(--sol-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgb(154 98 0 / 0.6);
}
.boton:active {
  transform: translateY(0);
}
.boton .icono {
  transition: transform 0.25s var(--ease);
}
.boton:hover .icono-flecha {
  transform: translateX(3px);
}

/* Secundario: contorno, nunca en color de acción */
.boton-linea {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.75em 1.25em;
  border-radius: var(--radio);
  border: 1.5px solid currentColor;
  color: inherit;
  font: 600 var(--size-base) / 1 var(--font-text);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.boton-linea:hover {
  background: var(--petroleo);
  color: var(--blanco);
  border-color: var(--petroleo);
}
.sobre-oscuro .boton-linea:hover {
  background: var(--sobre-oscuro);
  color: var(--petroleo);
  border-color: var(--sobre-oscuro);
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--menta-700);
  text-decoration: none;
}
.enlace-flecha:hover {
  text-decoration: underline;
}
.enlace-flecha .icono {
  transition: transform 0.25s var(--ease);
}
.enlace-flecha:hover .icono {
  transform: translateX(3px);
}
.sobre-oscuro .enlace-flecha {
  color: var(--menta);
}

/* ---------- Etiquetas ---------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.7em;
  border-radius: var(--radio);
  background: var(--violeta-50);
  color: var(--violeta-700);
  font: 500 var(--size-xs) / 1.2 var(--font-text);
}
.etiqueta-solida {
  background: var(--violeta);
  color: var(--blanco);
}

/* Aviso de contenido provisional: visible para revisión, nunca sale a producción */
.provisional {
  display: inline-flex;
  justify-self: start;
  width: fit-content;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  background: rgb(0 44 55 / 0.78);
  color: var(--blanco);
  font: 500 12px / 1.3 var(--font-text);
  letter-spacing: 0.01em;
}
.foto-marco {
  position: relative;
}
.foto-marco > .provisional {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
}

/* ---------- Barra superior y encabezado ---------- */

.barra-aviso {
  background: var(--petroleo);
  color: var(--sobre-oscuro);
  font-size: var(--size-sm);
}
.barra-aviso .envoltura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.barra-aviso a {
  color: var(--sobre-oscuro);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.barra-aviso a:hover {
  color: var(--menta);
}
.barra-aviso .lado {
  display: flex;
  gap: 20px;
}
.barra-aviso .solo-escritorio {
  display: none;
}

.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--gris-200);
}
.encabezado .envoltura {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.encabezado .logo {
  flex: none;
  display: block;
  line-height: 0;
}
.encabezado .logo img {
  height: 44px;
  width: auto;
}
.nav-principal {
  display: none;
}
.buscador-cabecera {
  display: none;
}
.acciones-cabecera {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.boton-icono {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--petroleo);
  cursor: pointer;
  text-decoration: none;
}
.boton-icono:hover {
  background: var(--gris-50);
}
.boton-icono .contador {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radio);
  background: var(--violeta);
  color: var(--blanco);
  font: 600 11px/18px var(--font-text);
  text-align: center;
}
.encabezado .boton-cotizar {
  display: none;
}

@media (min-width: 720px) {
  .barra-aviso .solo-escritorio {
    display: inline-flex;
  }
}

@media (min-width: 1080px) {
  .encabezado .envoltura {
    min-height: 76px;
    gap: 28px;
  }
  .encabezado .logo img {
    height: 56px;
  }
  .nav-principal {
    display: flex;
    gap: 2px;
  }
  .nav-principal a {
    padding: 10px 12px;
    border-radius: var(--radio);
    color: var(--petroleo);
    font-weight: 500;
    text-decoration: none;
    font-size: 15px;
  }
  .nav-principal a:hover {
    background: var(--menta-50);
  }
  .nav-principal a[aria-current] {
    background: var(--menta-50);
    font-weight: 600;
  }
  .buscador-cabecera {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 340px;
    margin-left: auto;
    position: relative;
  }
  .buscador-cabecera input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border: 1.5px solid var(--borde-control);
    border-radius: var(--radio);
    background: var(--gris-50);
    color: var(--petroleo);
    font: 400 15px var(--font-text);
  }
  .buscador-cabecera input::placeholder {
    color: var(--gris-500);
  }
  .buscador-cabecera input:focus {
    outline: none;
    border-color: var(--petroleo);
    background: var(--blanco);
  }
  .buscador-cabecera .icono {
    position: absolute;
    left: 14px;
    color: var(--gris-500);
  }
  .acciones-cabecera {
    margin-left: 0;
  }
  .acciones-cabecera .solo-movil {
    display: none;
  }
  .encabezado .boton-cotizar {
    display: inline-flex;
    min-height: 44px;
  }
}

/* Menú móvil */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--petroleo);
  color: var(--sobre-oscuro);
  padding: 20px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.menu-movil[data-abierto] {
  transform: none;
  visibility: visible;
  transition: transform 0.45s var(--ease);
}
.menu-movil .fila-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-movil .boton-icono {
  color: var(--sobre-oscuro);
}
.menu-movil .boton-icono:hover {
  background: rgb(255 255 255 / 0.08);
}
.menu-movil nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgb(233 242 243 / 0.14);
  color: var(--sobre-oscuro);
  font: 600 var(--size-xl) / 1.2 var(--font-display);
  text-decoration: none;
}
.menu-movil .buscador-movil input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--radio);
  border: 0;
  font: 400 var(--size-base) var(--font-text);
}

/* Barra de acción fija en móvil: una mano */
.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.97);
  border-top: 1px solid var(--gris-200);
  box-shadow: 0 -8px 24px -16px rgb(0 44 55 / 0.4);
}
.barra-movil .boton,
.barra-movil .boton-linea {
  width: 100%;
  min-height: 48px;
}
body {
  padding-bottom: 76px;
}
@media (min-width: 1080px) {
  .barra-movil {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}

/* ---------- Buscador grande ---------- */

.buscador-grande {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 6px 6px 6px 20px;
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.55);
}
.buscador-grande .icono {
  color: var(--gris-500);
  width: 22px;
  height: 22px;
}
.buscador-grande input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--petroleo);
  font: 400 var(--size-base) var(--font-text);
}
.buscador-grande input::placeholder {
  color: var(--gris-500);
}
.buscador-grande input:focus {
  outline: none;
}
.buscador-grande:focus-within {
  box-shadow: 0 0 0 3px var(--menta), 0 14px 30px -18px rgb(0 0 0 / 0.55);
}
.buscador-grande .boton {
  box-shadow: none;
}
.sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: var(--size-sm);
}
.sugerencias span {
  color: inherit;
  opacity: 0.85;
  align-self: center;
}
.sugerencias a {
  padding: 6px 12px;
  border-radius: var(--radio);
  border: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.sugerencias a:hover {
  background: rgb(255 255 255 / 0.12);
}

/* Resultados en vivo del buscador */
.resultados {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  background: var(--blanco);
  color: var(--petroleo);
  border-radius: var(--radio);
  box-shadow: var(--sombra-pieza);
  padding: 8px;
  display: none;
}
.resultados[data-visible] {
  display: block;
}
.resultados a {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radio);
  color: var(--petroleo);
  text-decoration: none;
}
.resultados a:hover,
.resultados a:focus-visible {
  background: var(--menta-50);
}
.resultados img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radio-sm);
}
.resultados small {
  display: block;
  color: var(--gris-500);
}
.resultados .vacio {
  padding: 12px;
  color: var(--gris-700);
}

/* ---------- Placas fijas (mínimo · días · técnica) ---------- */

.placas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.placa {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.6em;
  border-radius: var(--radio-sm);
  background: var(--gris-50);
  color: var(--gris-700);
  font: 500 var(--size-xs) / 1.2 var(--font-text);
  font-variant-numeric: tabular-nums;
}
.placa .icono {
  width: 14px;
  height: 14px;
}

/* ---------- Secciones ---------- */

.seccion {
  padding-block: clamp(64px, 9vw, 128px);
}
.cabeza-seccion {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 56px);
  max-width: 62ch;
}
.cabeza-seccion p {
  font-size: var(--size-lg);
  color: var(--gris-700);
}
.sobre-oscuro .cabeza-seccion p {
  color: var(--sobre-oscuro-tenue);
}
.cabeza-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.cabeza-fila .cabeza-seccion {
  margin-bottom: 0;
}

.sobre-oscuro {
  background: var(--petroleo);
  color: var(--sobre-oscuro);
}

/* ---------- La bandeja: compartimentos de espuma ---------- */

/* Bandeja ligera: arena con un hundido suave (decisión del usuario, 25 oct 2026: el petróleo se sentía pesado) */
.bandeja {
  background: var(--arena);
  border-radius: var(--radio-lg);
  padding: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  box-shadow: inset 0 2px 6px rgb(0 31 39 / 0.12);
}
@media (max-width: 899px) {
  .bandeja {
    padding: 6px;
    gap: 6px;
  }
}
.compartimento {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio);
  background: var(--arena);
  box-shadow: var(--sombra-hueco);
  overflow: hidden;
  color: var(--petroleo);
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.compartimento .foto {
  aspect-ratio: 1;
  overflow: hidden;
}
.compartimento .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.compartimento .texto {
  display: grid;
  gap: 8px;
  padding: 14px 14px 16px;
  background: var(--blanco);
}
.compartimento h3 {
  font-size: var(--size-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.compartimento h3 .icono {
  color: var(--menta-700);
  transition: transform 0.3s var(--ease);
}
.compartimento .desde {
  color: var(--gris-700);
  font-size: var(--size-sm);
}
@media (hover: hover) {
  .bandeja:has(.compartimento:hover) .compartimento:not(:hover) {
    filter: saturate(0.5) brightness(0.62);
  }
  .compartimento {
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), filter 0.5s var(--ease);
  }
  .compartimento:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-pieza);
    z-index: 2;
  }
  .compartimento:hover .foto img {
    transform: scale(1.04);
  }
  .compartimento:hover h3 .icono {
    transform: translateX(4px);
  }
}
@media (min-width: 900px) {
  .bandeja {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px;
    gap: 14px;
  }
  .bandeja .grande {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bandeja .grande .foto {
    aspect-ratio: auto;
    flex: 1;
  }
  .bandeja .grande h3 {
    font-size: var(--size-2xl);
  }
}

/* ---------- Públicos: tres zonas teñidas ---------- */

.zonas {
  display: grid;
  gap: 16px;
}
.zona {
  position: relative;
  display: grid;
  border-radius: var(--radio-lg);
  overflow: hidden;
  min-height: 420px;
  color: var(--blanco);
  text-decoration: none;
  isolation: isolate;
}
.zona > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.8s var(--ease);
}
.zona::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--tinte) 0%, rgb(from var(--tinte) r g b / 0.85) 34%, rgb(from var(--tinte) r g b / 0) 68%);
}
.zona .contenido {
  align-self: end;
  display: grid;
  gap: 10px;
  padding: 24px;
}
.zona h3 {
  font-size: var(--size-2xl);
  color: var(--texto-zona);
}
.zona p {
  color: var(--texto-zona);
  max-width: 40ch;
}
.zona ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.zona li {
  padding: 4px 10px;
  border-radius: var(--radio);
  background: rgb(255 255 255 / 0.16);
  color: var(--texto-zona);
  font-size: var(--size-sm);
  font-weight: 500;
}
.zona .ir {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 6px;
  font-weight: 600;
  color: var(--texto-zona);
}
.zona:hover > img {
  transform: scale(1.04);
}
.zona:hover .ir .icono {
  transform: translateX(4px);
}
.zona .ir .icono {
  transition: transform 0.3s var(--ease);
}
.zona-empresas {
  --tinte: var(--petroleo);
  --texto-zona: var(--blanco);
}
.zona-colegios {
  --tinte: var(--menta);
  --texto-zona: var(--petroleo);
}
.zona-colegios li {
  background: rgb(0 44 55 / 0.1);
}
.zona-tienda {
  --tinte: var(--violeta);
  --texto-zona: var(--blanco);
}
@media (min-width: 900px) {
  .zonas {
    grid-template-columns: 1.35fr 1fr 1fr;
  }
  .zona {
    min-height: 560px;
  }
}

/* ---------- Técnicas: pasadas seleccionables ---------- */

.tecnicas {
  display: grid;
  gap: 24px;
}
.pestanas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pestanas button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radio);
  border: 1.5px solid rgb(233 242 243 / 0.24);
  background: transparent;
  color: var(--sobre-oscuro);
  font: 600 var(--size-base) var(--font-text);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pestanas button:hover {
  border-color: var(--menta);
}
.pestanas button[aria-selected="true"] {
  background: var(--menta);
  border-color: var(--menta);
  color: var(--petroleo);
}
.panel-tecnica {
  display: grid;
  gap: 24px;
  align-items: center;
}
.panel-tecnica[hidden] {
  display: none;
}
.panel-tecnica .foto-marco {
  border-radius: var(--radio-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.panel-tecnica .foto-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: revelar 0.7s var(--ease);
}
@keyframes revelar {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.panel-tecnica h3 {
  font-size: var(--size-3xl);
}
.panel-tecnica .descripcion {
  display: grid;
  gap: 18px;
}
.panel-tecnica .descripcion > p {
  font-size: var(--size-lg);
  color: var(--sobre-oscuro-tenue);
  max-width: 48ch;
}
.ficha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgb(233 242 243 / 0.18);
  margin: 0;
}
.ficha div {
  padding: 14px 12px 0 0;
}
.ficha dt {
  font-size: var(--size-xs);
  color: var(--sobre-oscuro-tenue);
  font-weight: 500;
}
.ficha dd {
  margin: 4px 0 0;
  font: 600 var(--size-lg) / 1.2 var(--font-display);
  color: var(--sobre-oscuro);
  font-variant-numeric: tabular-nums;
}
.ideal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ideal span {
  padding: 4px 10px;
  border-radius: var(--radio);
  background: rgb(94 209 195 / 0.14);
  color: var(--sobre-oscuro);
  font-size: var(--size-sm);
}
@media (min-width: 900px) {
  .panel-tecnica {
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
  }
}

/* ---------- Cómo cotizar: 4 pasos con flecha que se dibuja ---------- */

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
  counter-reset: paso;
  position: relative;
}
.paso {
  display: grid;
  gap: 10px;
  align-content: start;
  position: relative;
}
.paso .numero {
  width: 56px;
  height: 56px;
  border-radius: var(--radio-lg);
  display: grid;
  place-items: center;
  background: var(--menta);
  color: var(--petroleo);
  font: 700 var(--size-xl) / 1 var(--font-display);
}
.paso h3 {
  font-size: var(--size-xl);
}
.paso p {
  color: var(--gris-700);
  max-width: 34ch;
}
.trazo-pasos {
  display: none;
}
@media (min-width: 900px) {
  .pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .trazo-pasos {
    display: block;
    position: absolute;
    top: 28px;
    left: 64px;
    right: 0;
    width: calc(100% - 64px);
    height: 40px;
    overflow: visible;
    pointer-events: none;
    z-index: -1;
  }
  .trazo-pasos path {
    fill: none;
    stroke: var(--menta-700);
    stroke-width: 2;
    stroke-dasharray: 6 8;
  }
  /* La línea se ve por defecto; solo con JS y movimiento permitido se dibuja al llegar */
  .trazo-pasos .mascara {
    stroke: var(--blanco);
    stroke-width: 6;
    stroke-dasharray: 2000;
    stroke-dashoffset: -2000;
    transition: stroke-dashoffset 1.6s var(--ease);
  }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .pasos:not([data-dibujado]) .trazo-pasos .mascara {
    stroke-dashoffset: 0;
  }
}

/* ---------- Taller ---------- */

.taller {
  display: grid;
  gap: 14px;
}
.taller .foto-marco {
  border-radius: var(--radio-lg);
  overflow: hidden;
}
.taller .foto-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.taller .principal {
  aspect-ratio: 4 / 3;
}
.taller .lateral {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.taller .lateral .foto-marco {
  aspect-ratio: 1;
}
.taller .nota {
  display: grid;
  gap: 16px;
  align-content: center;
  padding: 28px;
  border-radius: var(--radio-lg);
  background: var(--arena);
  color: var(--petroleo);
}
.taller .nota p {
  color: var(--gris-700);
}
.lista-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.lista-check li {
  display: flex;
  gap: 10px;
  align-items: start;
  color: var(--petroleo);
  font-weight: 500;
}
.lista-check .icono {
  color: var(--menta-700);
  margin-top: 2px;
}
@media (min-width: 900px) {
  .taller {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
  }
  .taller .principal {
    grid-row: span 2;
    aspect-ratio: auto;
    min-height: 620px;
  }
}

/* ---------- Clientes y reseña ---------- */

.clientes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--gris-200);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
}
.cliente {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 110px;
  background: var(--blanco);
  color: var(--gris-500);
  font: 600 var(--size-base) var(--font-display);
  text-align: center;
  padding: 16px;
}
.cliente svg {
  width: 34px;
  height: 34px;
  fill: var(--gris-200);
}
.cliente small {
  font: 500 12px var(--font-text);
  color: var(--gris-500);
}
@media (min-width: 720px) {
  .clientes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .clientes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.resena {
  display: grid;
  gap: 24px;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radio-lg);
  background: var(--menta-50);
}
.resena blockquote {
  margin: 0;
  font: 600 clamp(var(--size-xl), 2.6vw, var(--size-3xl)) / 1.2 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}
.resena figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gris-700);
}
.resena .avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radio);
  background: var(--menta);
  display: grid;
  place-items: center;
  font: 700 var(--size-base) var(--font-display);
  color: var(--petroleo);
}
.estrellas {
  display: flex;
  gap: 2px;
  color: var(--color-status-warning);
}
.estrellas .icono {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

/* ---------- Colecciones (B2C) ---------- */

.colecciones {
  display: grid;
  gap: 16px;
}
.coleccion-portada {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--arena);
  min-height: 360px;
}
.coleccion-portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lista-productos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.producto {
  display: grid;
  gap: 10px;
  align-content: start;
  color: var(--petroleo);
  text-decoration: none;
}
.producto .foto-marco {
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--arena);
}
.producto .foto-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.producto:hover .foto-marco img {
  transform: scale(1.04);
}
.producto .foto-marco .etiqueta {
  position: absolute;
  top: 10px;
  left: 10px;
}
.producto h3 {
  font-size: var(--size-lg);
}
.producto .precio {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.producto .precio small {
  color: var(--gris-500);
  font-weight: 400;
}
.agregar {
  justify-self: start;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radio);
  border: 1.5px solid var(--petroleo);
  background: transparent;
  color: var(--petroleo);
  font: 600 var(--size-sm) var(--font-text);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.agregar:hover {
  background: var(--petroleo);
  color: var(--blanco);
}
.agregar[data-agregado] {
  background: var(--color-status-success);
  border-color: var(--color-status-success);
  color: var(--blanco);
}
@media (min-width: 900px) {
  .colecciones {
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
  }
}

/* ---------- Temporada ---------- */

.temporada {
  display: grid;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--petroleo);
  color: var(--sobre-oscuro);
}
.temporada .foto-marco {
  min-height: 300px;
}
.temporada .foto-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.temporada .contenido {
  display: grid;
  gap: 18px;
  align-content: center;
  padding: clamp(28px, 5vw, 64px);
}
.temporada p {
  color: var(--sobre-oscuro-tenue);
  font-size: var(--size-lg);
  max-width: 44ch;
}
.temporada .acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
@media (min-width: 900px) {
  .temporada {
    grid-template-columns: 1fr 1fr;
  }
  .temporada .foto-marco {
    min-height: 520px;
  }
}

/* ---------- Cotizador ---------- */

.cotizador {
  display: grid;
  gap: 40px;
}
.cotizador .lado-texto {
  display: grid;
  gap: 20px;
  align-content: start;
}
.cotizador .lado-texto p {
  font-size: var(--size-lg);
  color: var(--sobre-oscuro-tenue);
  max-width: 40ch;
}
.contacto-directo {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.contacto-directo a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sobre-oscuro);
  font-weight: 500;
  text-decoration: none;
}
.contacto-directo a:hover {
  color: var(--menta);
}
.formulario {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--radio-lg);
  background: var(--blanco);
  color: var(--petroleo);
}
.campo {
  display: grid;
  gap: 6px;
}
.campo label,
.campo legend {
  font: 600 var(--size-sm) var(--font-text);
  color: var(--petroleo);
}
.campo .ayuda {
  font-size: var(--size-xs);
  color: var(--gris-500);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--borde-control);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--petroleo);
  font: 400 var(--size-base) var(--font-text);
}
.campo textarea {
  min-height: 96px;
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--petroleo);
  box-shadow: 0 0 0 3px var(--menta-50);
}
.campo[data-error] input,
.campo[data-error] select,
.campo[data-error] textarea {
  border-color: var(--color-status-danger);
}
.campo .error {
  display: none;
  font-size: var(--size-xs);
  color: var(--color-status-danger);
  font-weight: 500;
}
.campo[data-error] .error {
  display: block;
}
.fila-campos {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .fila-campos {
    grid-template-columns: 1fr 1fr;
  }
}
fieldset.campo {
  border: 0;
  margin: 0;
  padding: 0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips label {
  position: relative;
}
.chips input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.chips span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radio);
  border: 1.5px solid var(--borde-control);
  font: 500 var(--size-sm) var(--font-text);
  color: var(--gris-700);
  transition: all 0.2s var(--ease);
}
.chips input:checked + span {
  border-color: var(--petroleo);
  background: var(--petroleo);
  color: var(--blanco);
}
.chips input:focus-visible + span {
  outline: 3px solid var(--violeta);
  outline-offset: 2px;
}
.formulario .boton {
  width: 100%;
  min-height: 54px;
  font-size: var(--size-lg);
}
.formulario .legal {
  font-size: var(--size-xs);
  color: var(--gris-500);
  text-align: center;
}
.formulario .exito {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 8px 0;
}
.formulario .exito .icono {
  width: 48px;
  height: 48px;
  color: var(--color-status-success);
}
@media (min-width: 900px) {
  .cotizador {
    grid-template-columns: 1fr 1.15fr;
    gap: 72px;
  }
}

/* ---------- Pie ---------- */

.pie {
  background: var(--color-theme-dark-bg);
  color: var(--sobre-oscuro);
  padding-block: 64px 40px;
}
.pie .rejilla {
  display: grid;
  gap: 40px;
}
.pie .marca img {
  width: 120px;
}
.pie .marca p {
  margin-top: 16px;
  color: var(--sobre-oscuro-tenue);
  max-width: 32ch;
}
.pie h2 {
  font-size: var(--size-base);
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 14px;
  color: var(--sobre-oscuro);
}
.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pie a {
  color: var(--sobre-oscuro-tenue);
  text-decoration: none;
}
.pie a:hover {
  color: var(--menta);
}
.pie .base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgb(233 242 243 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  color: var(--sobre-oscuro-tenue);
  font-size: var(--size-sm);
}
@media (min-width: 900px) {
  .pie .rejilla {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

/* ---------- Aviso de prototipo ---------- */

.aviso-prototipo {
  position: fixed;
  right: 12px;
  bottom: 88px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-radius: var(--radio);
  background: var(--violeta);
  color: var(--blanco);
  font: 500 var(--size-xs) var(--font-text);
  box-shadow: var(--sombra-pieza);
}
.aviso-prototipo a {
  color: var(--blanco);
  font-weight: 600;
}
@media (min-width: 1080px) {
  .aviso-prototipo {
    bottom: 16px;
  }
}

/* ---------- Movimiento ---------- */

.aparece {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .js .aparece {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  .js .aparece[data-visto] {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Botón de contorno: el hover siempre invierte con contraste, en cualquier contexto */
.barra-movil .boton-linea:hover,
.formulario .boton-linea:hover {
  background: var(--petroleo);
  border-color: var(--petroleo);
  color: var(--blanco);
}
.temporada .boton-linea:hover,
.portada-a .boton-linea:hover {
  background: var(--sobre-oscuro);
  border-color: var(--sobre-oscuro);
  color: var(--petroleo);
}
.boton-linea:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 3px;
}

/* Los controles que son solo un ícono siguen siendo círculos */
.boton-icono,
.boton-buscar,
.boton-icono .contador,
.boton-lista .contador,
.paso-num button,
.resena .avatar,
.chip-tactil {
  border-radius: 50%;
}
.boton-icono .contador,
.boton-lista .contador {
  border-radius: 999px;
}

/* Campo de archivo con el estilo del sitio */
.campo-archivo {
  display: grid;
  gap: 6px;
}
.etiqueta-archivo {
  font: 600 var(--size-sm) var(--font-text);
}
.fila-archivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.boton-archivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px dashed var(--menta-700);
  border-radius: var(--radio);
  color: var(--menta-700);
  font-weight: 600;
  cursor: pointer;
}
.boton-archivo:hover {
  background: var(--menta-50);
}
.campo-archivo:focus-within .boton-archivo {
  outline: 3px solid var(--violeta);
  outline-offset: 2px;
}
.nombre-archivo {
  font-size: var(--size-sm);
  color: var(--gris-500);
}
.nombre-archivo[data-elegido] {
  color: var(--petroleo);
  font-weight: 600;
}
.campo-archivo.resaltado .boton-archivo {
  background: var(--menta-50);
}

/* Sobre la bandeja arena, las piezas solo necesitan un borde de luz y una sombra mínima */
.bandeja .compartimento {
  box-shadow: 0 1px 2px rgb(0 31 39 / 0.08), 0 0 0 1px rgb(0 31 39 / 0.04);
}

@media (max-width: 899px) {
  /* En celular las placas son texto sencillo: menos ruido dentro de cada pieza */
  .compartimento .placas {
    gap: 2px 10px;
  }
  .compartimento .placa {
    padding: 0;
    background: none;
  }
}

@media (max-width: 899px) {
  /* El aviso de prototipo es andamiaje de revisión: en celular se oculta para no tapar contenido */
  .aviso-prototipo {
    display: none;
  }
}

/* ---------- Correcciones de la auditoría de usabilidad (29 oct) ---------- */
/* A9: el foco se ve sobre fondos oscuros */
.sobre-oscuro :focus-visible,
.pie :focus-visible,
.menu-movil :focus-visible,
.barra-aviso :focus-visible,
.portada-a :focus-visible {
  outline-color: var(--menta);
}
/* A5: en celular, «Lista» con texto y sin el ícono de cuenta (vive en el menú) */
@media (max-width: 1079px) {
  .acciones-cabecera .boton-icono[aria-label="Mi cuenta en la tienda"] {
    display: none;
  }
  .boton-lista {
    border: 1.5px solid var(--petroleo);
    padding: 0 10px;
    height: 40px;
  }
  .boton-lista .texto-lista {
    display: inline;
    font-size: var(--size-sm);
  }
  .boton-lista .texto-lista::after {
    content: "";
  }
  .boton-lista .contador {
    position: static;
  }
}
/* A6 y A10: notas de IVA y de cambio de sitio */
.nota-iva,
.nota-tienda {
  display: block;
  font-size: var(--size-xs);
  color: var(--gris-500);
}
/* A1: resumen al enviar */
.resumen-envio {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--gris-700);
}
.exito h3:focus {
  outline: none;
}
/* A3: logos que viajan con la lista */
.logos-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--menta-50);
  font-size: var(--size-sm);
  font-weight: 600;
}
.logos-lista span,
.item-lista .con-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.logos-lista img,
.item-lista .con-logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  background: var(--blanco);
  border-radius: var(--radio-sm);
}
.logos-lista small {
  width: 100%;
  font-weight: 400;
  color: var(--gris-700);
}
/* Catálogo */
.catalogo {
  padding-bottom: clamp(48px, 7vw, 96px);
}
.catalogo .cabeza-seccion h1 {
  font-size: clamp(var(--size-2xl), 4vw, var(--size-4xl));
}
.bandeja-catalogo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .bandeja-catalogo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.producto-cat {
  scroll-margin-top: 110px;
}
.producto-cat:target .foto {
  outline: 3px solid var(--menta);
  outline-offset: 3px;
}
.producto-cat .cat {
  font-size: var(--size-xs);
  color: var(--gris-500);
  font-weight: 600;
}
.producto-cat h2 {
  font-size: var(--size-lg);
  letter-spacing: -0.015em;
}
.producto-cat .boton-linea {
  justify-self: start;
  min-height: 44px;
  color: var(--petroleo);
}
.agregar-rapido {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px;
}
.agregar-rapido input,
.agregar-rapido select {
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--gris-500);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--petroleo);
  font: 500 var(--size-sm) var(--font-text);
  -webkit-appearance: none;
  appearance: none;
}
.agregar-rapido .boton-linea {
  grid-column: 1 / -1;
  justify-content: center;
  width: 100%;
}
.estado-rapido {
  grid-column: 1 / -1;
  font-size: var(--size-xs);
  color: var(--gris-700);
}
.aviso-legal {
  max-width: 70ch;
  display: grid;
  gap: 16px;
}
.aviso-legal h1 {
  font-size: var(--size-3xl);
}
.formulario .error-envio {
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--color-status-danger);
}

/* Safari y Chrome pintan su propio botón de borrar junto al nuestro */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
/* Mensajes que se anuncian: vacíos no ocupan lugar, pero siguen en el árbol de accesibilidad */
.resumen-errores:empty,
.error-logo:empty,
.error-talla:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.resumen-errores,
.error-logo,
.error-talla {
  margin: 0;
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--color-status-danger);
}