/* ==========================================================================
   Smart Clean · Catálogo
   Paleta tomada del logo: azul marino de fondo, aguas/turquesas, verde hoja
   y un acento mango para lo importante. Móvil primero.
   ========================================================================== */

/* ---------- Colores y medidas ---------- */
:root {
  color-scheme: light;
  --fuente-titulos: 'Bricolage Grotesque', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif;
  --fuente-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fondo: #f1f9fa;
  --fondo-vidrio: rgba(241, 249, 250, 0.94);
  --fondo-2: #e2f2f5;
  --superficie: #ffffff;
  --tinta: #0d2a3a;
  --tinta-2: #46616f;
  --linea: #d2e7eb;
  --linea-fuerte: #a3cbd3;

  --marca: #0a7488;
  --marca-hover: #085f70;
  --marca-texto: #ffffff;
  --marca-suave: #d8f3f8;
  --marca-viva: #22c3e0;

  --hoja: #1b7442;
  --hoja-suave: #dcf4e3;
  --hoja-fuerte: #23864d;

  --acento: #ffb627;
  --acento-texto: #2b1b00;
  --filtro-activo-ico: #ffb627;
  --alerta-fondo: #fff4d9;
  --alerta-borde: #f2c35b;
  --alerta-texto: #6a4200;

  --navy: #0b2e44;
  --navy-2: #06223a;

  --foco: #0a6a7d;
  --sombra: 0 1px 2px rgba(13, 42, 58, 0.06), 0 10px 24px -14px rgba(13, 42, 58, 0.22);
  --sombra-alta: 0 22px 50px -18px rgba(4, 25, 40, 0.55);
  --radio: 20px;

  --ph-liq-1: #e9f9fc;
  --ph-liq-2: #c8eef6;
  --ph-jar-1: #ecf9f0;
  --ph-jar-2: #cff0da;
  --ph-gen-1: #fff6e2;
  --ph-gen-2: #ffe5b0;
  --ph-tinta: #12384d;
  --ph-burbuja: rgba(255, 255, 255, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    color-scheme: dark;
    --fondo: #061823;
    --fondo-vidrio: rgba(6, 24, 35, 0.94);
    --fondo-2: #0f2a3a;
    --superficie: #0c2331;
    --tinta: #e4f3f6;
    --tinta-2: #a5bfca;
    --linea: #1b3a4c;
    --linea-fuerte: #2d5468;
    --marca: #3dd0e8;
    --marca-hover: #6adcef;
    --marca-texto: #032230;
    --marca-suave: #0f3646;
    --hoja: #74e3a0;
    --hoja-suave: #10372a;
    --hoja-fuerte: #3fbf6f;
    --acento: #ffc145;
    --filtro-activo-ico: #0a7488;
    --alerta-fondo: #3a2a06;
    --alerta-borde: #7a5a12;
    --alerta-texto: #ffd98a;
    --foco: #ffc94a;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
    --ph-liq-1: #10374a;
    --ph-liq-2: #0a2736;
    --ph-jar-1: #123b2d;
    --ph-jar-2: #0a2a20;
    --ph-gen-1: #3a2d10;
    --ph-gen-2: #271e0a;
    --ph-tinta: #cfe8ef;
    --ph-burbuja: rgba(255, 255, 255, 0.12);
  }
}
:root[data-tema='oscuro'] {
  color-scheme: dark;
  --fondo: #061823;
  --fondo-vidrio: rgba(6, 24, 35, 0.94);
  --fondo-2: #0f2a3a;
  --superficie: #0c2331;
  --tinta: #e4f3f6;
  --tinta-2: #a5bfca;
  --linea: #1b3a4c;
  --linea-fuerte: #2d5468;
  --marca: #3dd0e8;
  --marca-hover: #6adcef;
  --marca-texto: #032230;
  --marca-suave: #0f3646;
  --hoja: #74e3a0;
  --hoja-suave: #10372a;
  --hoja-fuerte: #3fbf6f;
  --acento: #ffc145;
  --filtro-activo-ico: #0a7488;
  --alerta-fondo: #3a2a06;
  --alerta-borde: #7a5a12;
  --alerta-texto: #ffd98a;
  --foco: #ffc94a;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
  --ph-liq-1: #10374a;
  --ph-liq-2: #0a2736;
  --ph-jar-1: #123b2d;
  --ph-jar-2: #0a2a20;
  --ph-gen-1: #3a2d10;
  --ph-gen-2: #271e0a;
  --ph-tinta: #cfe8ef;
  --ph-burbuja: rgba(255, 255, 255, 0.12);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-barra, 130px) + 12px);
}
html:has(dialog[open]) {
  overflow: hidden;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.contenedor {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .contenedor {
    padding-inline: 28px;
  }
}
.saltar {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--acento);
  color: var(--acento-texto);
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus {
  top: 12px;
}
.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, transform 0.1s;
}
.btn:active {
  transform: scale(0.98);
}
.btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.btn--whatsapp {
  background: #25d366;
  color: #04260f;
}
.btn--whatsapp:hover {
  background: #1fc45c;
}
.btn--suave {
  background: var(--fondo-2);
  color: var(--tinta);
  border: 1px solid var(--linea);
}
.btn--suave:hover {
  border-color: var(--linea-fuerte);
}
.btn--grande {
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  font-size: 1.0625rem;
}
.btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}
.boton-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--tinta);
}
.boton-icono svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boton-icono:hover {
  border-color: var(--linea-fuerte);
}
.enlace {
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--tinta-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.enlace:hover {
  color: var(--tinta);
}

/* ---------- Encabezado ---------- */
.hero {
  --foco: #ffc94a;
  position: relative;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  color: #e6f6fa;
  background:
    radial-gradient(110% 70% at 88% 0%, rgba(52, 104, 133, 0.55) 0%, transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(2, 22, 36, 0.7) 0%, transparent 70%),
    linear-gradient(180deg, #123a53 0%, #0c3048 45%, #062439 100%);
}
.hero::after {
  /* Burbujas decorativas */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 30%, rgba(34, 195, 224, 0.22) 0 5px, transparent 6px),
    radial-gradient(circle at 14% 44%, rgba(34, 195, 224, 0.16) 0 9px, transparent 10px),
    radial-gradient(circle at 92% 58%, rgba(76, 192, 122, 0.2) 0 7px, transparent 8px),
    radial-gradient(circle at 86% 72%, rgba(34, 195, 224, 0.14) 0 13px, transparent 14px),
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.1) 0 4px, transparent 5px);
}
.hero__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
}
.hero__sello {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #c9ecf4;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero__sello svg {
  width: 14px;
  height: 14px;
  fill: #ff8a78;
}
.tema {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #e6f6fa;
}
.tema:hover {
  border-color: rgba(255, 255, 255, 0.35);
}
.tema svg {
  fill: none;
}
.tema__luna {
  fill: currentColor !important;
  stroke: none !important;
}
.tema__sol {
  display: none;
}
:root[data-tema='oscuro'] .tema__sol {
  display: block;
}
:root[data-tema='oscuro'] .tema__luna {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .tema__sol {
    display: block;
  }
  :root:not([data-tema='claro']) .tema__luna {
    display: none;
  }
}
.hero__cuerpo {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  padding-bottom: 46px;
}
.hero__logo {
  width: min(62vw, 240px);
  margin: 4px 0 2px;
}
.hero__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 12, 24, 0.35));
}
.hero__texto {
  position: relative;
}
.hero__titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.45rem, 6.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
}
.hero__lead {
  max-width: 34ch;
  margin: 8px auto 0;
  color: #b8d8e2;
  text-wrap: pretty;
}
.pasos {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.pasos li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.875rem;
  font-weight: 600;
}
.pasos span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: 0.75rem;
  font-weight: 800;
}
.hero__ola {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 1;
  width: 100%;
  height: 34px;
  fill: var(--fondo);
}
.hero__ola-fondo {
  opacity: 0.35;
}
@media (min-width: 860px) {
  .hero__cuerpo {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    gap: 28px;
    text-align: left;
    padding-bottom: 76px;
  }
  .hero__logo {
    width: 320px;
    margin: 6px 0 0;
  }
  .hero__lead {
    margin-left: 0;
    font-size: 1.125rem;
  }
  .pasos {
    display: flex;
    justify-content: flex-start;
  }
  .hero__ola {
    height: 64px;
  }
}

/* ---------- Barra de búsqueda y filtros (fija arriba) ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 0;
  background: var(--fondo-vidrio);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.barra.esta-pegada {
  border-bottom-color: var(--linea);
  box-shadow: 0 10px 24px -20px rgba(13, 42, 58, 0.5);
}
.barra__dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 900px) {
  .barra__dentro {
    gap: 8px;
  }
  .buscador {
    max-width: 520px;
  }
}

/* Pestañas por uso */
.usos ul {
  display: flex;
  gap: 2px;
  margin: 0 -16px;
  padding: 0 40px 0 16px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  border-bottom: 1px solid var(--linea);
  /* Desvanece la orilla derecha: indica que hay más pestañas */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
}
.usos ul::-webkit-scrollbar {
  display: none;
}
.usos li {
  flex: none;
}
.uso {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px 12px 0 0;
  color: var(--tinta-2);
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s, opacity 0.15s;
}
.uso .ico {
  width: 19px;
  height: 19px;
}
.uso:hover {
  background: var(--fondo-2);
  color: var(--tinta);
}
.uso:focus-visible {
  outline-offset: -3px;
}
.uso[aria-current='page'] {
  color: var(--tinta);
  font-weight: 800;
}
.uso[aria-current='page'] .ico {
  color: var(--marca);
}
.uso[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--marca);
}
.uso__cuenta {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
}
.uso--sin .uso__cuenta {
  background: var(--fondo-2);
  color: var(--tinta-2);
}
@media (min-width: 900px) {
  .usos ul {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.buscador {
  position: relative;
}
.buscador input {
  width: 100%;
  height: 52px;
  padding: 0 52px 0 48px;
  border: 2px solid var(--linea);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.buscador input::placeholder {
  color: var(--tinta-2);
  opacity: 0.85;
}
.buscador input::-webkit-search-cancel-button,
.buscador input::-webkit-search-decoration {
  -webkit-appearance: none;
}
.buscador input:hover {
  border-color: var(--linea-fuerte);
}
.buscador input:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px var(--marca-suave), var(--sombra);
}
.buscador__lupa {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--tinta-2);
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
}
.buscador__atajo {
  position: absolute;
  right: 14px;
  top: 50%;
  display: none;
  transform: translateY(-50%);
  padding: 1px 8px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 7px;
  color: var(--tinta-2);
  font: 600 0.8125rem/1.4 var(--fuente-texto);
}
@media (hover: hover) and (pointer: fine) {
  .buscador__atajo {
    display: block;
  }
}
.buscador.tiene-texto .buscador__atajo {
  display: none;
}
.buscador__limpiar {
  position: absolute;
  right: 4px;
  top: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--tinta-2);
}
.buscador__limpiar:hover {
  background: var(--fondo-2);
  color: var(--tinta);
}
.buscador__limpiar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.filtros {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
  margin-right: -16px;
  padding: 2px 16px 2px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .filtros {
    margin-right: 0;
    padding-right: 2px;
  }
}
.filtro {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 7px 0 12px;
  border: 2px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 0.9375rem;
  font-weight: 650;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.filtro:hover {
  border-color: var(--linea-fuerte);
}
.filtro .ico {
  width: 18px;
  height: 18px;
  color: var(--marca);
}
.filtro__cuenta {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fondo-2);
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.filtro[aria-pressed='true'] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--fondo);
}
.filtro[aria-pressed='true'] .ico {
  color: var(--filtro-activo-ico);
}
.filtro[aria-pressed='true'] .filtro__cuenta {
  background: var(--acento);
  color: var(--acento-texto);
}
.filtro__largo {
  display: none;
}
@media (min-width: 640px) {
  .filtro__corto {
    display: none;
  }
  .filtro__largo {
    display: inline;
  }
}

/* ---------- Reglas de mayoreo ---------- */
.catalogo {
  padding-top: 8px;
}
.catalogo:focus {
  outline: none;
}
.reglas {
  margin-top: 14px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--superficie);
}
.reglas > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 17px;
  cursor: pointer;
  list-style: none;
}
.reglas > summary::-webkit-details-marker {
  display: none;
}
.reglas > summary:hover .reglas__mas {
  color: var(--tinta);
}
.reglas__titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.reglas__cortas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  order: 3;
  width: 100%;
}
.corta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  background: var(--marca-suave);
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 650;
}
.corta .ico {
  width: 15px;
  height: 15px;
  color: var(--marca);
}
.corta[data-tipo='jarceria'] {
  background: var(--hoja-suave);
}
.corta[data-tipo='jarceria'] .ico {
  color: var(--hoja);
}
.reglas__mas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--tinta-2);
  font-size: 0.875rem;
  font-weight: 650;
}
.reglas__mas .ico {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
.reglas[open] .reglas__mas .ico {
  transform: rotate(180deg);
}
@media (min-width: 700px) {
  .reglas__cortas {
    order: 0;
    width: auto;
  }
}
.reglas__lista {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}
@media (min-width: 700px) {
  .reglas__lista {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
  }
}
.regla {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fondo);
}

/* ---------- Encabezado de la sección (pestaña) ---------- */
.cabecera {
  margin-top: 22px;
}
.cabecera__fila {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cabecera__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--marca-suave);
  color: var(--marca);
}
.cabecera__icono .ico {
  width: 26px;
  height: 26px;
}
.cabecera__textos {
  flex: 1;
  min-width: 0;
}
.cabecera__titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.55rem, 6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.cabecera__titulo:focus {
  outline: none;
}
.cabecera__desc {
  max-width: 62ch;
  margin-top: 5px;
  color: var(--tinta-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.tipos {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.tipos__etiqueta {
  flex: none;
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Aviso de seguridad (p. ej. ácido muriático) */
.seguridad {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--alerta-borde);
  border-radius: 12px;
  background: var(--alerta-fondo);
  color: var(--alerta-texto);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.seguridad .ico {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  stroke-width: 2.3;
}
.seguridad--chica {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 0.78rem;
}

/* Mensaje flotante (p. ej. «¡Enlace copiado!») */
.toast {
  position: fixed;
  left: 50%;
  top: calc(16px + env(safe-area-inset-top));
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--tinta);
  color: var(--fondo);
  font-weight: 650;
  box-shadow: var(--sombra-alta);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.regla__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--marca-suave);
  color: var(--marca);
}
.regla__icono .ico {
  width: 24px;
  height: 24px;
}
.regla[data-tipo='jarceria'] .regla__icono {
  background: var(--hoja-suave);
  color: var(--hoja);
}
.regla__titulo {
  font-weight: 750;
  line-height: 1.3;
}
.regla__texto {
  margin-top: 2px;
  color: var(--tinta-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ---------- Secciones y rejilla ---------- */
.resumen {
  min-height: 1.5em;
  margin-top: 18px;
  color: var(--tinta-2);
  font-size: 0.9375rem;
}
.seccion + .seccion {
  margin-top: 36px;
}
.seccion {
  margin-top: 8px;
}
.seccion__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.seccion__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.3rem, 4.6vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.seccion__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--marca-suave);
  color: var(--marca);
}
.seccion__icono .ico {
  width: 22px;
  height: 22px;
}
.seccion[data-tipo='jarceria'] .seccion__icono {
  background: var(--hoja-suave);
  color: var(--hoja);
}
.seccion__cuenta {
  flex: none;
  color: var(--tinta-2);
  font-size: 0.875rem;
  font-weight: 600;
}
.rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 980px) {
  .rejilla {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1220px) {
  .rejilla {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Tarjeta de producto ---------- */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
@media (hover: hover) {
  .tarjeta:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(13, 42, 58, 0.06), 0 18px 32px -18px rgba(13, 42, 58, 0.35);
  }
}
.tarjeta[data-en-pedido] {
  border-color: var(--marca);
  box-shadow: 0 0 0 1px var(--marca), var(--sombra);
}
.tarjeta__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 56%, var(--tinte-suave, transparent) 0 31%, transparent 32%),
    radial-gradient(circle at 14% 22%, var(--ph-burbuja) 0 5px, transparent 6px),
    radial-gradient(circle at 22% 36%, var(--ph-burbuja) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 74%, var(--ph-burbuja) 0 9px, transparent 10px),
    radial-gradient(circle at 80% 20%, var(--ph-burbuja) 0 4px, transparent 5px),
    linear-gradient(160deg, var(--ph-1), var(--ph-2));
  --ph-1: var(--ph-gen-1);
  --ph-2: var(--ph-gen-2);
}
.tarjeta__media[data-tipo='liquido'] {
  --ph-1: var(--ph-liq-1);
  --ph-2: var(--ph-liq-2);
}
.tarjeta__media[data-tipo='jarceria'] {
  --ph-1: var(--ph-jar-1);
  --ph-2: var(--ph-jar-2);
}
.tarjeta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ilustracion {
  width: 52%;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(7, 34, 53, 0.18));
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@media (hover: hover) {
  .tarjeta:hover .ilustracion {
    transform: rotate(-4deg) scale(1.05);
  }
}
.i-a {
  fill: var(--tinte);
}
.i-b {
  fill: var(--tinte-osc);
}
.i-l {
  fill: rgba(255, 255, 255, 0.88);
}
.i-n {
  fill: var(--ph-tinta);
}
.i-brillo {
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.i-raya {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
  stroke-linecap: round;
}
.i-cerda {
  fill: none;
  stroke: var(--tinte-osc);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.i-gota {
  fill: var(--ph-burbuja);
  stroke: var(--tinte);
  stroke-width: 1.2;
}
.i-asa {
  fill: none;
  stroke: var(--ph-tinta);
  stroke-width: 3.2;
  stroke-linecap: round;
}
.tarjeta__sello {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: var(--hoja-fuerte);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px -4px rgba(10, 60, 30, 0.6);
}
:root[data-tema='oscuro'] .tarjeta__sello {
  color: #04210f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .tarjeta__sello {
    color: #04210f;
  }
}
.tarjeta__sello .ico {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.tarjeta__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.tarjeta__nombre {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.tarjeta__desc {
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.precios {
  display: grid;
  gap: 4px;
  margin: auto 0 0;
}
.precio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 11px;
  background: var(--fondo-2);
  transition: background-color 0.2s, opacity 0.2s;
}
.precio dt {
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.precio dd {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.precio--mayoreo {
  background: var(--hoja-suave);
}
.precio--mayoreo dt,
.precio--mayoreo dd {
  color: var(--hoja);
}
.tarjeta.es-mayoreo .precio--menudeo {
  opacity: 0.55;
}
.tarjeta.es-mayoreo .precio--menudeo dd {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.tarjeta.es-mayoreo .precio--mayoreo {
  box-shadow: inset 0 0 0 2px var(--hoja-fuerte);
}
.tarjeta__pista {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-height: 1.3em;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}
.tarjeta__pista .ico {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  stroke-width: 2.6;
}
.tarjeta__pista[data-estado='ok'] {
  color: var(--hoja);
}
.tarjeta__pista[data-estado='falta'] {
  color: var(--tinta);
}

/* Agregar y selector de cantidad */
.agregar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: var(--marca);
  color: var(--marca-texto);
  font-weight: 750;
  transition: background-color 0.15s, transform 0.1s;
}
.agregar:hover {
  background: var(--marca-hover);
}
.agregar:active {
  transform: scale(0.97);
}
.agregar .ico {
  width: 20px;
  height: 20px;
  stroke-width: 2.6;
}
.paso {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 46px;
  padding: 1px;
  border-radius: 14px;
  background: var(--marca-suave);
}
.paso__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: var(--superficie);
  color: var(--marca);
  box-shadow: 0 1px 2px rgba(13, 42, 58, 0.12);
  transition: transform 0.1s, background-color 0.15s;
}
.paso__btn:active {
  transform: scale(0.92);
}
.paso__btn--mas {
  background: var(--marca);
  color: var(--marca-texto);
}
.paso__btn--mas:hover {
  background: var(--marca-hover);
}
.paso__btn .ico {
  width: 20px;
  height: 20px;
  stroke-width: 2.8;
}
.paso__num {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.paso__num::-webkit-inner-spin-button,
.paso__num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.paso__num:focus-visible {
  outline-offset: -2px;
}

/* ---------- Estados vacíos y carga ---------- */
.cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 0;
  color: var(--tinta-2);
  font-weight: 600;
}
.cargando__gota {
  width: 18px;
  height: 18px;
  border-radius: 0 50% 50% 50%;
  background: var(--marca-viva);
  transform: rotate(45deg);
  animation: gota 1s ease-in-out infinite;
}
@keyframes gota {
  50% {
    transform: rotate(45deg) translate(-4px, -4px);
    opacity: 0.5;
  }
}
.vacio,
.aviso-error {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 24px auto 0;
  max-width: 520px;
  padding: 32px 20px;
  border: 2px dashed var(--linea-fuerte);
  border-radius: 24px;
  text-align: center;
  color: var(--tinta-2);
}
.vacio svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--marca);
  stroke-width: 3;
  stroke-linecap: round;
}
.vacio__titulo,
.aviso-error__titulo {
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.vacio__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

/* ---------- Pie de página ---------- */
.pie {
  margin-top: 64px;
  padding: 36px 0 calc(36px + var(--alto-carrito, 0px));
  background: var(--navy);
  color: #c4e2eb;
  transition: padding-bottom 0.3s;
  --foco: #ffc94a;
}
.pie__dentro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.pie__icono {
  flex: none;
  border-radius: 14px;
}
.pie p + p {
  margin-top: 4px;
}
.pie__nombre {
  color: #fff;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 800;
}
.pie a {
  color: #7fe0f0;
  font-weight: 700;
  text-underline-offset: 3px;
}
.pie__secciones {
  margin-top: 14px;
}
.pie__titulo {
  color: #fff;
  font-weight: 700;
}
.pie__secciones ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.pie__secciones a {
  display: inline-block;
  padding: 6px 0;
  font-weight: 600;
}
.pie__nota {
  margin-top: 10px !important;
  font-size: 0.875rem;
  color: #9cc2ce;
}

/* ---------- Carrito inferior fijo ---------- */
.carrito {
  --foco: #ffc94a;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15), visibility 0.4s;
}
.carrito[data-vacio='true'] {
  transform: translateY(140%);
  visibility: hidden;
}
.carrito__dentro {
  max-width: 640px;
  margin-inline: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: linear-gradient(160deg, #11405c, var(--navy) 55%, var(--navy-2));
  color: #fff;
  box-shadow: var(--sombra-alta);
  pointer-events: auto;
}
.carrito__litros {
  display: grid;
  gap: 7px;
  padding: 6px 8px 10px;
  color: #c9e9f1;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.carrito__litros strong {
  color: #fff;
}
.carrito__litros[data-ok] {
  color: #b7f0cc;
}
.carrito__litros .ico {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -3px;
  stroke-width: 2.6;
}
.medidor {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.medidor span {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c3e0, #4cc07a);
  transition: width 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.carrito__boton {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 4px 4px 4px 6px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.carrito__icono {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
}
.carrito__icono svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carrito__cuenta {
  position: absolute;
  top: -6px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.carrito.rebota .carrito__cuenta {
  animation: rebote 0.4s ease;
}
@keyframes rebote {
  40% {
    transform: scale(1.35);
  }
}
.carrito__textos {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.carrito__total {
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.carrito__detalle {
  overflow: hidden;
  color: #b9d9e3;
  font-size: 0.8125rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.carrito__detalle[data-ahorro] {
  color: #9ff0bf;
  font-weight: 600;
}
.carrito__ver {
  flex: none;
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--acento);
  color: var(--acento-texto);
  font-weight: 800;
  transition: transform 0.1s;
}
.carrito__boton:active .carrito__ver {
  transform: scale(0.96);
}
.carrito.celebra .carrito__dentro {
  animation: celebra 0.9s ease;
}
@keyframes celebra {
  30% {
    box-shadow: 0 0 0 4px rgba(76, 192, 122, 0.55), var(--sombra-alta);
  }
}

/* ---------- Panel del pedido ---------- */
.pedido {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 26px 26px 0 0;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.45);
}
.pedido::backdrop {
  background: rgba(3, 19, 30, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.pedido__caja {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
}
.pedido__cabeza {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--linea);
}
.pedido__cabeza::before {
  /* Asa de la hoja inferior */
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--linea-fuerte);
  transform: translateX(-50%);
}
.pedido__cabeza h2 {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pedido__cabeza h2:focus {
  outline: none;
}
.pedido__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pedido__pie {
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--superficie);
}
.pedido__extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 14px;
  color: var(--tinta-2);
  font-size: 0.8125rem;
}
@media (min-width: 760px) {
  .pedido {
    inset: 0 0 0 auto;
    width: min(460px, 100%);
    height: 100%;
    border-radius: 26px 0 0 26px;
  }
  .pedido__caja {
    height: 100%;
    max-height: 100%;
  }
  .pedido__cabeza {
    padding-top: 16px;
  }
  .pedido__cabeza::before {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pedido[open] {
    animation: subir 0.34s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .pedido[open]::backdrop {
    animation: aparecer 0.25s ease;
  }
  @media (min-width: 760px) {
    .pedido[open] {
      animation-name: deslizar;
    }
  }
}
@keyframes subir {
  from {
    transform: translateY(100%);
  }
}
@keyframes deslizar {
  from {
    transform: translateX(100%);
  }
}
@keyframes aparecer {
  from {
    opacity: 0;
  }
}

.progreso {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: var(--marca-suave);
}
.progreso[data-ok] {
  background: var(--hoja-suave);
}
.progreso .medidor {
  background: var(--superficie);
}
.progreso__texto {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.progreso[data-ok] .progreso__texto {
  color: var(--hoja);
  font-weight: 600;
}
.grupo {
  margin-top: 18px;
}
.grupo__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 800;
}
.grupo__titulo .ico {
  color: var(--marca);
}
.lineas {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--fondo);
}
.linea__nombre {
  font-weight: 700;
  line-height: 1.3;
}
.linea__precio {
  margin-top: 3px;
  color: var(--tinta-2);
  font-size: 0.875rem;
}
.linea__precio s {
  margin-right: 2px;
}
.linea__precio strong {
  color: var(--tinta);
}
.etiqueta {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fondo-2);
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: 1px;
}
.etiqueta--mayoreo {
  background: var(--hoja-suave);
  color: var(--hoja);
}
.linea__aviso {
  margin-top: 4px;
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 600;
}
.linea__quitar {
  align-self: start;
  width: 40px;
  height: 40px;
  border-color: transparent;
  background: transparent;
  color: var(--tinta-2);
}
.linea__quitar:hover {
  border-color: var(--linea);
  color: #c2412d;
}
.linea__control {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.linea__control .paso {
  width: 148px;
}
.linea__subtotal {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pedido-vacio {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 12px;
  color: var(--tinta-2);
  text-align: center;
}
.pedido-vacio .ico {
  width: 48px;
  height: 48px;
  color: var(--marca);
  stroke-width: 1.6;
}
.pedido-vacio strong {
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
}
.pedido-vacio .btn {
  margin-top: 8px;
}

.datos {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--linea-fuerte);
}
.datos__titulo {
  font-weight: 750;
}
.datos__titulo span {
  color: var(--tinta-2);
  font-weight: 500;
}
.campo {
  display: grid;
  gap: 5px;
  color: var(--tinta-2);
  font-size: 0.875rem;
  font-weight: 600;
}
.campo input,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 2px solid var(--linea);
  border-radius: 13px;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 400;
  resize: vertical;
}
.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px var(--marca-suave);
}

.totales {
  display: grid;
  gap: 2px;
  margin: 0 0 12px;
  font-size: 0.9375rem;
}
.totales div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.totales dt {
  color: var(--tinta-2);
}
.totales dd {
  margin: 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.totales .ahorro dt,
.totales .ahorro dd {
  color: var(--hoja);
  font-weight: 700;
}
.totales .total dt,
.totales .total dd {
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sin-js {
  margin: 24px 16px;
  padding: 16px;
  border-radius: 14px;
  background: var(--acento);
  color: var(--acento-texto);
  font-weight: 700;
  text-align: center;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Página 404 ---------- */
.no-encontrada {
  padding-block: 32px 64px;
}
.no-encontrada__accion {
  margin-top: 22px;
}
.btn--acento {
  background: var(--acento);
  color: var(--acento-texto);
}
.btn--acento:hover {
  filter: brightness(1.05);
}