/* ============================================================
   Ronald PC · interfaz web — hoja de estilo única — v1.3
   Lenguaje visual: paneles a pantalla completa, tipografía del
   sistema, pills y superficies planas. Sin recursos externos:
   la CSP solo permite 'self' (y data:/https: en imágenes).
   Temas: :root[data-theme="claro"|"editorial"|"oscuro"]
   Claro (#0010): fondo blanco sin negro ni gris, a pedido del
   socio. Contrastes medidos en web/DOCUMENTACION_WEB.md.
   ============================================================ */

/* ---------- 1. Tokens (claro = tema base) ---------- */
:root,
:root[data-theme="claro"] {
  --font: -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-head: var(--font);

  --bg: #ffffff;
  --band: #eef4fc;          /* tinte azul muy claro para bandas alternas */
  --ink: #0b2545;           /* azul marino profundo: 15.39:1 sobre blanco, 13.91:1 sobre banda */
  --ink-2: #41607f;         /* azul pizarra: 6.55:1 sobre blanco, 5.92:1 sobre banda */
  --line: #d3e0f3;          /* separadores decorativos (tinte de marca) */
  --field-line: #5f7ea6;    /* bordes de controles: 4.18:1 blanco, 3.78:1 banda, 3.62:1 banda-2 */
  --accent: #16457f;        /* el azul de la pantalla del logotipo: 9.58:1 blanco, 8.66:1 banda */

  --btn-ink-bg: #16457f;    /* botón principal: texto blanco 9.58:1 */
  --btn-ink-fg: #ffffff;
  --btn-ink-hover: #0f3160; /* 12.89:1 — el hover OSCURECE, como la referencia */
  --btn-light-bg: rgba(212, 233, 239, .75);   /* petróleo: --ink encima 12.94:1 */
  --btn-light-hover: rgba(188, 221, 230, .92); /* --ink encima 11.06:1 */

  --glass: rgba(255, 255, 255, .90);      /* respaldo SIN desenfoque; el bloque 1c lo baja a .72 */
  --glass-line: rgba(22, 62, 122, .16);
  --header-bg: rgba(255, 255, 255, .95);  /* respaldo SIN desenfoque; el bloque 1c lo baja a .80 */
  --badge-bg: rgba(255, 255, 255, .92);

  --ok: #146c43;
  --warn: #86560a;
  --error-bg: #fdecec;
  --error-fg: #84161c;   /* el rojo del engranaje del logotipo: 8.70:1 */
  --step-idle: #4f6f7a;     /* 5.40:1 — el pizarra petróleo de la referencia */

  --focus: #16457f;
  --radius: 8px;            /* controles pequeños */
  --radius-lg: 20px;        /* fichas y paneles, como la referencia */
  --pill: 100px;
  --header-h: 56px;
  --shadow: 0 24px 60px rgba(0, 0, 0, .18);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .14);

  /* Tokens nuevos (#0010): su valor base reproduce el aspecto previo
     en editorial y oscuro; claro los redefine en el bloque 1b. */
  --eyebrow: var(--ink-2);
  --link: var(--ink);
  --backdrop: rgba(0, 0, 0, .45);

  /* Colores oficiales de marca: iguales en todos los temas. */
  --wa-green: #25d366;
  --wa-green-hover: #1ebe5a;
  --wa-tint: #e8f9ee;


  /* #0013 · tokens nuevos. Aquí valen lo mismo que los de siempre, para que
     editorial y oscuro no hereden el petróleo del tema claro; el bloque 1b les
     da su valor real. Paleta y contrastes: docs/PSICOLOGIA_DEL_COLOR.md. */
  --band-2: var(--band);
  --line-2: var(--line);
  --ring: inset 0 0 0 2px var(--line);
  --cat-computadoras-bg: var(--band);    --cat-computadoras-fg: var(--ink);
  --cat-almacenamiento-bg: var(--band);  --cat-almacenamiento-fg: var(--ink);
  --cat-memorias-bg: var(--band);        --cat-memorias-fg: var(--ink);
  --cat-perifericos-bg: var(--band);     --cat-perifericos-fg: var(--ink);
  --cat-monitores-bg: var(--band);       --cat-monitores-fg: var(--ink);
  --cat-canaima-bg: var(--band);         --cat-canaima-fg: var(--ink);
  --cat-servicio-bg: var(--band);        --cat-servicio-fg: var(--ink);
  --cat-otros-bg: var(--band);           --cat-otros-fg: var(--ink);

  --art-filter: none;
  --art-veil: linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .34) 44%, rgba(255, 255, 255, .06) 100%);

  /* #0016 · ambiente, cristal esmerilado, degradados y esferas. Aquí valen LO QUE YA HABÍA:
     el tema claro los redefine en el bloque 1b y editorial y oscuro se quedan exactamente
     como estaban. Es el anti-patrón «la herencia sorpresa» de ATLAS 2.6 §E evitado a
     propósito: un token nuevo en la base cambia el aspecto de los otros temas sin avisar. */
  --ambient: none;                  /* capa decorativa fija detrás de todo */
  --ambient-min: var(--bg);         /* la zona MÁS OSCURA del ambiente, ya con el velo */
  --section: var(--bg);             /* fondo de las secciones grandes */
  --section-band: var(--band);
  --section-band-2: var(--band-2);
  --glass-blur: blur(14px) saturate(140%);
  --glass-shine: none;              /* brillo superior del cristal */
  --grad-primary: var(--btn-ink-bg);/* botón principal */
  --grad-band: var(--band-2);       /* banda de los tres valores */
  --values-fg: var(--ink);
  --value-tile: var(--bg);          /* baldosa dentro de esa banda */
  --value-line: var(--line-2);
  --buy-bg: var(--btn-ink-bg);      /* acción de comprar */
  --buy-hover: var(--btn-ink-hover);
  --buy-fg: var(--btn-ink-fg);
  --cyan: var(--accent);            /* trazo de iconos */
  --sphere-bg: var(--band);
  --sphere-ring: var(--line);
  --buy-glow: none;                 /* resplandor del botón de comprar */
  --step-card: var(--bg);           /* la ficha de cada paso; en claro la esfera flota sola */
  --step-card-shadow: var(--shadow-sm);
  --step-card-pad: 28px 24px;

  color-scheme: light;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}

/* ---------- 1b. Solo claro: tokens que editorial y oscuro heredan de la base ---------- */
:root[data-theme="claro"] {
  /* Sombra de DOS capas, como Respuestas/index.html: una difusa que da la
     altura y una corta que asienta el borde. Es lo que más «delicadeza» aporta.
     El negro de la referencia se convierte a azul marino (Acuerdo #0010). */
  --shadow: 0 20px 35px -8px rgba(11, 37, 69, .20), 0 8px 12px -4px rgba(11, 37, 69, .06);
  --shadow-sm: 0 6px 18px -6px rgba(11, 37, 69, .14), 0 2px 6px -2px rgba(11, 37, 69, .05);
  --eyebrow: #1e5b6b;       /* petróleo, 7.60:1. Ya NO es var(--accent): el
                               antetítulo deja de parecer un enlace. */
  --link: var(--accent);    /* 9.58:1 — y SIEMPRE subrayado: contra --ink da
                               1.61:1, así que el color solo no lo distingue. */
  --backdrop: rgba(11, 37, 69, .55);
  scrollbar-color: #9db3d6 var(--band);   /* sin el gris nativo del navegador */

  /* Segunda voz: el petróleo de la página que eligió el socio. */
  --band-2: #e4f1f4;
  --line-2: #c6dfe6;
  --ring: inset 0 0 0 2px #b0d9e3;

  /* Tintes de categoría (docs/PSICOLOGIA_DEL_COLOR.md §5). Los ocho fondos caen
     en la misma franja de luminosidad (1.12-1.18:1 sobre blanco) para que
     convivan sin pelear; cada texto pasa AA sobre el suyo. El chip SIEMPRE
     lleva el nombre escrito: el color acelera, el texto garantiza (WCAG 1.4.1). */
  --cat-computadoras-bg: #e3edfb;   --cat-computadoras-fg: #17457e;   /* 8.12:1 */
  --cat-almacenamiento-bg: #e2f0e9; --cat-almacenamiento-fg: #1a5e3f; /* 6.58:1 */
  --cat-memorias-bg: #f2e9fa;       --cat-memorias-fg: #5b2b7a;       /* 8.60:1 */
  --cat-perifericos-bg: #fdf1dc;    --cat-perifericos-fg: #7a4a0e;    /* 6.68:1 */
  --cat-monitores-bg: #e0f0f3;      --cat-monitores-fg: #14505e;      /* 7.67:1 */
  --cat-canaima-bg: #ffeedd;        --cat-canaima-fg: #8f4413;        /* 6.17:1 */
  --cat-servicio-bg: #fce9f0;       --cat-servicio-fg: #9b2f5c;       /* 6.11:1 */
  --cat-otros-bg: #eef4fc;          --cat-otros-fg: #0b2545;          /* 13.91:1 */

  /* ============================================================
     #0016 · «le falta más color, se ve muy opaco» (Respuestas/10.txt).
     Decisión del socio, ya tomada, NO reabrir: «tu azul llevado a cian y
     violeta». La familia arranca en el azul de SU logotipo (#16457f) y viaja
     a cian y violeta; el magenta oscuro entra solo como acento de comprar.
     El logotipo sigue siendo el ancla (ATLAS 2.6 · R2 y R6).
     Todos los números de abajo están MEDIDOS con scripts/contraste.py.
     ============================================================ */

  /* El ambiente: cuatro manchas de color detrás de TODO y un velo blanco al
     85 % encima. Las paradas terminan en `rgba(...,0)` y no en `transparent`
     a propósito: algunos navegadores interpolan `transparent` pasando por el
     negro y dejan una cenefa gris — prohibida por el Acuerdo #0010. */
  --ambient:
    linear-gradient(rgba(255, 255, 255, .82), rgba(255, 255, 255, .82)),
    radial-gradient(85vw 72vh at 2% -12%, rgba(22, 69, 127, .60), rgba(22, 69, 127, 0) 66%),
    radial-gradient(72vw 66vh at 100% 16%, rgba(42, 127, 184, .52), rgba(42, 127, 184, 0) 66%),
    radial-gradient(78vw 70vh at 0% 80%, rgba(124, 92, 214, .46), rgba(124, 92, 214, 0) 66%),
    radial-gradient(70vw 66vh at 100% 100%, rgba(217, 70, 239, .44), rgba(217, 70, 239, 0) 66%);

  /* La zona MÁS OSCURA que puede llegar a tener el ambiente, calculada
     apilando las cuatro manchas a su alfa máximo —un caso que la colocación
     real ni siquiera produce— y aplicando el velo: sale #dfe2f1. Aquí se
     declara #dee1f0, un punto más oscuro todavía, para medir contra el peor
     caso y no contra un promedio (ATLAS 2.6 · R5). La zona más clara del
     ambiente es el blanco puro, ya medido arriba para todos los tokens.
       --ink 11.82:1 · --ink-2 5.04:1 · --accent 7.36:1 · --eyebrow 5.84:1
       --ok 4.96:1 · --warn 4.82:1 · --cyan 5.39:1 · --field-line 3.21:1
     La holgura más corta es la del borde de control: 3.21 contra un mínimo de
     3.0. Subir el color por encima de esto lo rompe — se probó con el velo al
     .78 y --warn caía a 4.49:1 y --field-line a 2.99:1. Ahí está el techo.
     --step-idle NO se mide aquí: vive solo dentro de un <dialog> de fondo
     opaco, donde da 5.40:1; sobre este ambiente daría 4.15:1, así que si algún
     día sale del diálogo hay que volver a medirlo. */
  --ambient-min: #dee1f0;

  /* Las secciones grandes dejan de ser opacas para que el ambiente se vea.
     El ritmo de la página lo dan ahora el degradado del fondo y el cristal,
     no bandas de color plano. Solo en claro: editorial y oscuro conservan
     sus bandas (los tokens base siguen valiendo --bg / --band / --band-2). */
  --section: transparent;
  --section-band: transparent;
  --section-band-2: transparent;

  --glass-line: rgba(22, 69, 127, .14);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .85);

  /* Degradado del botón principal. El auditor mide el color sólido
     --btn-ink-bg (#16457f, 9.58:1); el otro extremo del degradado se midió
     aparte: blanco sobre #6d28d9 = 7.10:1. Un degradado recto entre dos
     colores nunca es más claro que el más claro de los dos (la curva de
     luminancia es convexa), así que medir las dos puntas basta. */
  --grad-primary: linear-gradient(135deg, #16457f 0%, #6d28d9 100%);

  /* La banda de los tres valores. Blanco sobre cada parada:
     #16457f 9.58:1 · #1a6aa5 5.76:1 · #6d28d9 7.10:1 · #a21caf 6.32:1.
     El #2a7fb8 y el #d946ef del readme del socio NO entran aquí: con letra
     blanca dan 4.35:1 y 3.46:1. Viven solo en el ambiente, bajo el velo,
     donde no hay texto encima. */
  --grad-band: linear-gradient(118deg, #16457f 0%, #1a6aa5 32%, #6d28d9 68%, #a21caf 100%);
  --values-fg: #ffffff;
  /* Baldosa de cristal sobre la banda. El blanco al 10 % ACLARA el degradado,
     así que se midió con ella puesta: el peor caso es sobre #1a6aa5 y deja
     4.69:1 para la letra blanca. Con el 14 % caía a 4.32:1 y se descartó. */
  --value-tile: rgba(255, 255, 255, .10);
  --value-line: rgba(255, 255, 255, .34);

  /* Comprar. Magenta oscuro, el único de la interfaz y solo en la acción de
     meter en el carrito: no decora nada más (ATLAS 2.6 · R3). */
  --buy-bg: #a21caf;        /* blanco encima 6.32:1 */
  --buy-hover: #86178f;     /* blanco encima 8.29:1 — el hover OSCURECE */
  --buy-fg: #ffffff;

  /* Cian de trazo. El socio propuso #0e7490; medido sobre la zona más oscura
     del ambiente da 4.12:1, por debajo del 4.5 de WCAG 1.4.3, así que se
     oscurece — mismo método que CE-011. #0b6178: 7.01:1 sobre blanco,
     6.34:1 sobre --band, 6.66:1 sobre el cristal y 5.80:1 sobre el ambiente
     más oscuro. Nunca de fondo con letra blanca. */
  --cyan: #0b6178;

  --sphere-bg: rgba(255, 255, 255, .78);
  --sphere-ring: linear-gradient(140deg, #16457f, #1a6aa5 38%, #7c5cd6 74%, #d946ef);
  --buy-glow: 0 10px 22px -12px rgba(162, 28, 175, .85);

  /* En claro la esfera flota sola sobre el ambiente, como en la referencia:
     el paso deja de ser una tarjeta. Editorial y oscuro conservan la suya. */
  --step-card: transparent;
  --step-card-shadow: none;
  --step-card-pad: 8px 12px 0;
}

/* Botón nativo del selector de archivo (comprobante): tintes de marca en lugar del gris del sistema */
:root[data-theme="claro"] input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--pill);
  background: var(--band);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

:root[data-theme="editorial"] {
  --font-head: Georgia, "Times New Roman", serif;
  --bg: #fbf6ec;
  --band: #f1e8d8;
  --ink: #1f1a14;
  --ink-2: #55493b;
  --line: #d9c9ae;
  --field-line: #8a7558;   /* CE-011: 4.09:1 sobre el fondo y 3.62:1 sobre la banda.
                              #9b8666 daba 3.25:1 sobre el fondo pero solo 2.88:1 sobre
                              la banda, por debajo del 3:1 de WCAG 1.4.11. */
  --accent: #8a3a1c;

  --btn-ink-bg: #1f1a14;
  --btn-ink-fg: #fbf6ec;
  --btn-ink-hover: #3b3127;
  --btn-light-bg: rgba(241, 232, 216, .72);
  --btn-light-hover: rgba(228, 214, 189, .92);

  --glass: rgba(251, 246, 236, .93);      /* respaldo SIN desenfoque (bloque 1c: .78) */
  --glass-line: rgba(31, 26, 20, .14);
  --header-bg: rgba(251, 246, 236, .94);  /* respaldo SIN desenfoque (bloque 1c: .80) */
  --badge-bg: rgba(251, 246, 236, .88);

  --ok: #1f6b3e;
  --warn: #7d5209;
  --error-bg: #f7e2dc;
  --error-fg: #7c2418;
  --step-idle: #6d5f4c;    /* 5.75:1; #8a7a66 se quedaba en 3.86:1 */

  --focus: #1f1a14;
  --art-filter: sepia(.3) saturate(.8) contrast(1.02);
  --art-veil: linear-gradient(180deg, rgba(251, 246, 236, .88) 0%, rgba(251, 246, 236, .44) 46%, rgba(251, 246, 236, .10) 100%);
  color-scheme: light;
}

:root[data-theme="editorial"] h1,
:root[data-theme="editorial"] h2,
:root[data-theme="editorial"] h3 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -.01em;
}

:root[data-theme="oscuro"] {
  --bg: #0f0f10;
  --band: #17181a;
  --ink: #f4f4f4;
  --ink-2: #a1a3a8;
  --line: #63666b;         /* 3.32:1 sobre #0f0f10; #2e3033 daba 1.45:1 */
  --field-line: #7c7f85;   /* 4.77:1 */
  --accent: #5b86ef;

  --btn-ink-bg: #f4f4f4;
  --btn-ink-fg: #0f0f10;
  --btn-ink-hover: #dcdddf;
  --btn-light-bg: rgba(244, 244, 244, .14);
  --btn-light-hover: rgba(244, 244, 244, .26);

  --glass: rgba(23, 24, 26, .92);         /* respaldo SIN desenfoque (bloque 1c: .72) */
  --glass-line: rgba(244, 244, 244, .10);
  --header-bg: rgba(15, 15, 16, .93);     /* respaldo SIN desenfoque (bloque 1c: .72) */
  --badge-bg: rgba(15, 15, 16, .78);

  --ok: #5fd6a0;
  --warn: #e0b45f;
  --error-bg: #3a1c1a;
  --error-fg: #ffb4a8;
  --step-idle: #8e8e93;

  --focus: #f4f4f4;
  --shadow: 0 24px 60px rgba(0, 0, 0, .62);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .5);
  --art-filter: invert(.92) hue-rotate(180deg);
  --art-veil: linear-gradient(180deg, rgba(15, 15, 16, .84) 0%, rgba(15, 15, 16, .48) 46%, rgba(15, 15, 16, .18) 100%);
  color-scheme: dark;
}

/* ---------- 1c. Cristal esmerilado — CL-V «¿y si el efecto no existe?» ----------
   `backdrop-filter` no existe en navegadores viejos, en Firefox con la opción
   apagada ni en algunos modos de ahorro. Por eso el valor POR DEFECTO de
   --glass es el opaco: si no hay desenfoque, el cristal es casi sólido y el
   texto se lee igual. Solo cuando el navegador declara que sí puede
   desenfocar se baja la opacidad al .72 que pide el diseño del socio.
   Medido sobre la zona más oscura del ambiente: el cristal .72 aplana a
   #f6f7fb, donde --ink da 14.37:1 y --ink-2 6.12:1. El respaldo .90 aplana a
   #fcfcfe, todavía más claro. El cristal SOLO aclara: nunca empeora. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root,
  :root[data-theme="claro"] { --glass: rgba(255, 255, 255, .72); --header-bg: rgba(255, 255, 255, .80); }
  :root[data-theme="editorial"] { --glass: rgba(251, 246, 236, .78); --header-bg: rgba(251, 246, 236, .80); }
  :root[data-theme="oscuro"] { --glass: rgba(23, 24, 26, .72); --header-bg: rgba(15, 15, 16, .72); }
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

/* CE-017 — El fondo opaco vive en :root (el <html>), no aquí. Si el <body> también lo
   pinta, su fondo TAPA la capa `body::before` del ambiente: dentro del contexto
   de apilamiento raíz el orden es «fondo de la raíz → hijos de z-index negativo
   → fondos de los descendientes en flujo», y el <body> es un descendiente en
   flujo. Se comprobó midiendo píxeles de una captura real: con `background:
   var(--bg)` aquí, las cuatro esquinas de la página salían #ffffff exacto y el
   ambiente no aparecía por ningún lado. */
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* #0016 · El ambiente de color vive en una capa FIJA detrás del contenido.
   Fija y con `inset: 0` por tres razones concretas:
   1. no puede provocar desplazamiento horizontal en un teléfono de 360 px,
      porque está recortada al tamaño exacto de la ventana;
   2. no se reparte a lo largo de una página de diez pantallas, que es lo que
      pasaría si el degradado fuera del <body> y se estirara con el documento;
   3. no intercepta el ratón ni el teclado (`pointer-events: none`).
   En editorial y oscuro --ambient vale `none` y esta capa no pinta nada. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ambient);
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* #0016 - «agregar carrito esta en gris» (Respuestas/10.txt). No era un color
   elegido: era `opacity: .45` sobre el azul de marca, que en pantalla se lee
   como gris — justo lo que el Acuerdo #0010 prohíbe. El estado apagado pasa a
   tener superficie propia, del tinte de la marca, y NO depende solo del color:
   lleva `disabled` en el marcado (lo anuncia el lector de pantalla), el cursor
   de prohibido y, en la ficha, la palabra del estado a dos líneas de distancia
   («Agotado», «En camino», «Pedidos pausados»). WCAG 1.4.1 cumplido.
   Contraste --ink-2 sobre --band-2: 5.68:1 en claro, 7.19:1 en editorial y
   7.04:1 en oscuro. La causa de que TODAS salgan apagadas no es de esta hoja:
   `buyable()` exige `config.online && config.configured_for_orders`, y la
   tienda del socio todavía está apagada. Queda anotado en docs/registro-estilo.md. */
.button:disabled,
.product-actions .add:disabled,
.product-actions .details:disabled,
.product-actions input:disabled,
.filters input:disabled,
.filters select:disabled {
  opacity: 1;
  background: var(--band-2);
  background-image: none;
  color: var(--ink-2);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: not-allowed;
}

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

h1, h2, h3, p, ul, ol { margin-top: 0; }

h1, .panel h2 {
  font-family: var(--font-head);
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 500;
  margin-bottom: 14px;
}

h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
  font-weight: 500;
  margin-bottom: 12px;
}

h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}

.muted, .note { color: var(--ink-2); }
.note { font-size: 13px; }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 10px;
}

.wrap {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* ---------- 3. Pills / botones ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: min(100%, 265px);
  padding: 8px 24px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--btn-light-bg);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.button:hover { background: var(--btn-light-hover); }
.button { -webkit-backdrop-filter: blur(8px); }

/* #0016 - El degradado del socio: #16457f -> #6d28d9. El auditor mide el color
   sólido --btn-ink-bg (9.58:1); la otra punta se midió aparte, blanco sobre
   #6d28d9 = 7.10:1. El hover OSCURECE a #0f3160 (12.89:1), como manda la
   doctrina y como ya hacía la referencia de #0013. En editorial y oscuro
   --grad-primary vale var(--btn-ink-bg): el botón sigue siendo plano. */
.primary {
  background: var(--grad-primary);
  color: var(--btn-ink-fg);
  backdrop-filter: none;
}

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

/* La acción de COMPRAR es la única en magenta (#a21caf, blanco encima 6.32:1;
   al pasar el ratón #86178f, 8.29:1). Un solo acento de acción, como pide la
   regla R2 de ATLAS 2.6: el resto de la página sigue siendo azul-violeta. */
#checkout-open:enabled,
.product-actions .add:enabled {
  background: var(--buy-bg);
  color: var(--buy-fg);
  box-shadow: var(--buy-glow);
}

#checkout-open:enabled:hover,
.product-actions .add:enabled:hover { background: var(--buy-hover); }

.light {
  background: var(--btn-light-bg);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border-color: transparent;
}

.light:hover { background: var(--btn-light-hover); }

.full { width: 100%; min-width: 0; }

/* Botones con icono de marca (#0010): el icono va en una pastilla blanca
   para conservar sus colores oficiales sobre cualquier fondo. */
.with-icon { gap: 10px; padding-left: 8px; }

.icon-chip {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pill);
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--glass-line);
}

.icon-chip img { width: 18px; height: 18px; }

/* WhatsApp dentro de la página: tinte verde claro, texto del tema (14.08:1 en claro) */
.button.wa {
  background: var(--wa-tint);
  color: #0b2545;
  border-color: var(--wa-green);
  backdrop-filter: none;
}

.button.wa:hover { background: #d3f5df; }

/* ---------- 4. Cabecera fija (translúcida permanente, sin JS) ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding-inline: 20px;
  background: var(--header-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.brand-mark { flex: none; width: 26px; height: 26px; }

.site-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.site-nav a:hover { background: var(--band); }

.cart-button {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.cart-button:hover { background: var(--band-2); }

/* #0013 - Como en las tiendas que el socio puso de ejemplo: el dibujo basta, la
   palabra sobra. El nombre accesible y el recuento siguen ahi para quien no ve
   el icono; quitar la palabra VISIBLE no es quitar el texto. */
/* El carrito va EN LINEA, no como <img>: dentro de un <img> el `currentColor` del SVG
   resuelve contra el propio documento SVG y se pintaria NEGRO, que el Acuerdo #0010
   prohibe. En linea hereda el color del boton y no deja el boton vacio si algo falla. */
.cart-icon { display: block; color: inherit; }
.product-actions .add .cart-icon { width: 16px; height: 16px; }

.cart-button b[data-vacio] {
  background: transparent;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.cart-button { position: relative; }

.cart-button b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--pill);
  background: var(--btn-ink-bg);
  color: var(--btn-ink-fg);
  font-size: 12px;
  font-weight: 500;
}

/* ---------- 5. Paneles a pantalla completa ---------- */
.panel {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--section);
}

.panel-band { background: var(--section-band); }

.panel-art { position: absolute; inset: 0; z-index: 0; }

.panel-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--art-filter);
}

.panel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--art-veil);
}

.panel-body {
  position: relative;
  z-index: 1;
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 24px;
  text-align: center;
  padding-top: calc(var(--header-h) + 5vh);
  padding-bottom: calc(var(--header-h) + 3vh);
}

.panel-copy { grid-row: 1; max-width: min(760px, 100%); }
.panel-extra { grid-row: 2; align-self: center; width: 100%; }

.panel-actions {
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.panel-sub {
  font-size: 16px;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.panel-sub a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel-status { font-size: 13px; color: var(--ink-2); margin: 0; }

.panel-notes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
}

.panel-notes strong { display: block; font-size: 15px; font-weight: 500; }
.panel-notes span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* Paneles con contenido dinámico (opiniones, ayuda): pueden crecer */
.panel-flow .panel-body { align-content: space-between; }

/* ---------- 6. Catálogo ---------- */
.catalog { padding: 96px 0 104px; background: var(--section); }

.section-heading { text-align: center; margin-bottom: 36px; }
.section-heading h2 { margin-bottom: 10px; }
.section-heading > p:last-child { font-size: 13px; margin: 0; }

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.filters label { display: block; margin: 0; }
.search { flex: 1 1 260px; max-width: 420px; }

input, select, textarea {
  max-width: 100%;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--field-line);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color .15s ease;
}

input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }

input[type="search"] {
  width: 100%;
  border-radius: var(--pill);
  padding-inline: 18px;
}

select { min-width: 190px; border-radius: var(--pill); }
textarea { resize: vertical; min-height: 88px; }

/* --- fichas de producto --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product-photo {
  position: relative;
  /* #0015 - Cuadrado, no 4/3. Las fotos reales del socio (su banco de imagenes de
     Marketplace) son todas cuadradas: en un marco 4/3 salian con dos franjas vacias a
     los lados. En un marco 1/1 con `contain` la foto llena el hueco sin recortar nada,
     y el marcador de familia de una ficha sin foto (CE-012) sigue entrando entero. */
  aspect-ratio: 1 / 1;
  background: var(--band);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .15s ease;
}

/* El anillo interior suave de Respuestas/index.html: acusa recibo del raton sin
   mover nada de sitio. */
.product-card:hover .product-photo { box-shadow: var(--ring); }

.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* #0015 - A sangre, sin margen. Las fotos del socio son banners cuadrados que ya traen
     su propio titulo y su fondo: un margen alrededor las encogia y dejaba una cenefa que
     no aporta nada. Llenan el marco cuadrado exacto, sin recortar. */
  padding: 0;
}

/* La excepcion: el marcador de familia de una ficha sin foto (CE-012) es un dibujo de
   linea, no un banner. Ese si necesita aire para no tocar los bordes redondeados. */
.product-photo img[src$=".svg"] { padding: 18px; }

.badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--badge-bg);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
}

.badge.available { color: var(--ok); }
.badge.incoming { color: var(--warn); }
.badge.sold_out { color: var(--ink-2); }

/* Ejemplo de demostración: gris neutro, nunca un estado comercial */
.badge.demo {
  color: var(--ink-2);
  background: var(--band);
  border: 1px dashed var(--line);
  backdrop-filter: none;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 4px 0;
  text-align: center;
}

.category {
  margin-bottom: 8px;
}

/* #0015 - Los titulos reales del socio vienen de su Marketplace y son largos
   («Disco Duro 320GB | 100% NUEVO | Para Laptop, Consolas y Pc | Detal y Mayor»).
   En la tarjeta se recortan a dos lineas para que todas midan igual y la rejilla no se
   descuadre; la ficha ampliada sigue mostrando el titulo completo. */
.product-info h3 {
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.product-actions .add { display: inline-flex; align-items: center; gap: 6px; }
.product-info p { font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }

.product-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 12px 0 0;
}

.price { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.price small { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.stock { font-size: 12px; color: var(--ink-2); }

.product-actions {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.product-actions input {
  width: 100%;
  padding: 10px 6px;
  border-radius: var(--pill);
  text-align: center;
  font-size: 13px;
}

.product-actions .add,
.product-actions .details,
.product-actions .button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 500;
  transition: background-color .18s ease, border-color .18s ease;
}

.product-actions .add {
  background: var(--btn-ink-bg);
  color: var(--btn-ink-fg);
}

.product-actions .add:hover:enabled { background: var(--btn-ink-hover); }

.product-actions .details {
  grid-column: 1 / -1;
  background: var(--btn-light-bg);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border-color: var(--field-line);
}

.product-actions .details:hover { background: var(--btn-light-hover); }

.empty {
  grid-column: 1 / -1;
  background: var(--band);
  border-radius: var(--radius);
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-2);
}

.empty h3 { color: var(--ink); }
.empty .button { margin-top: 20px; }
.noscript-note { width: min(1200px, 100% - 32px); margin: 24px auto; }

/* ---------- 6b. Sobre nosotros ---------- */
.about { padding: 96px 0 104px; background: var(--section-band); }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.about-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 8px;
}

/* #0012: elección de la forma de pago y datos para pagar. */
.payment-methods {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.payment-methods label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--field-line);
  border-radius: 14px;
  cursor: pointer;
}

.payment-methods label:hover { border-color: var(--accent); }
.payment-methods input { grid-row: span 2; margin: 0; }
.pm-name { font-weight: 600; color: var(--ink); }
.pm-kind { grid-column: 2; font-size: 14px; color: var(--ink-2); }
.payment-methods label:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.pay-account {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--band);
}

.pay-title { margin: 0 0 8px; font-weight: 600; }

.pay-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.pay-rows { min-width: 0; }
.pay-rows .pay-row:first-child { border-top: 0; }
.pay-row:first-of-type { border-top: 0; }
.pay-row span { color: var(--ink-2); font-size: 14px; }
.pay-row strong { word-break: break-word; }

.total-row.pay { align-items: center; gap: 10px; }

.copy {
  flex: none;
  padding: 4px 12px;
  border: 1px solid var(--field-line);
  border-radius: 99px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.copy:hover { border-color: var(--accent); color: var(--accent); }

/* #0012: zonas de entrega del socio, bajo el texto de «Sobre nosotros». */
.about-delivery {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.contact-row .button { min-width: 0; }

.offer {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.offer li {
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}

.offer strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.offer span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }

/* ---------- 7. Opiniones y ayuda ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  text-align: left;
}

.review {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  padding: 22px;
  font-size: 14px;
}

/* CE-010: aviso sin opiniones (o error) en tarjeta translúcida centrada; sin fondo quedaba sobre la ilustración */
.review-grid > p {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 560px;
  margin: 0;
  padding: 16px 22px;
  text-align: center;
  font-size: 14px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
}

.review p { margin-bottom: 10px; }
.review strong { display: block; font-weight: 500; }
.rating { color: var(--ink); letter-spacing: 3px; font-size: 15px; }

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 13px;
}

.links a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.links a:hover { color: var(--ink-2); }
.review .links { justify-content: flex-start; font-size: 12px; }

.faq {
  width: min(760px, 100%);
  margin-inline: auto;
  text-align: left;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  padding: 4px 20px;
}

.faq > p { margin: 0; padding: 16px 0; font-size: 14px; }
.faq details { border-bottom: 1px solid var(--glass-line); }
.faq details:last-child { border-bottom: 0; }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-2);
}

.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }

/* ---------- 8. Pie minimalista ---------- */
.site-footer {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 44px 16px 96px;
  background: var(--section);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
  text-align: center;
}

.site-footer p { margin: 0; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer small { font-size: 12px; }

.footer-line { font-size: 14px; font-weight: 500; color: var(--ink); }

.social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 16px 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}

.social a:hover { background: var(--band); border-color: var(--field-line); text-decoration: none; }
.social img { flex: none; width: 20px; height: 20px; }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

/* ---------- 9. Flotantes ---------- */
/* Botón flotante: logotipo oficial de WhatsApp, glifo blanco sobre #25D366 (color de marca, igual en todos los temas) */
.whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 25;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa-green);
  box-shadow: 0 6px 20px rgba(18, 140, 126, .38);
  transition: background-color .18s ease, transform .18s ease;
}

.whatsapp img { width: 30px; height: 30px; }
.whatsapp:hover { background: var(--wa-green-hover); transform: scale(1.05); }
.whatsapp:focus-visible { border-radius: 50%; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(92vw, 440px);
  padding: 12px 22px;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 60;
  padding: 10px 18px;
  border: 1px solid var(--field-line);
  border-radius: var(--pill);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  transition: top .15s ease;
}

.skip:focus { top: 12px; }

/* ---------- 10. Diálogos ---------- */
dialog {
  border: 0;
  border-radius: var(--radius-lg);
  width: min(720px, 94vw);
  max-height: 88svh;
  padding: 44px 36px 36px;
  overflow: auto;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(3px);
}

dialog h2 { font-size: clamp(24px, 4vw, 32px); }
dialog h3 { margin-top: 24px; }

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  transition: background-color .15s ease;
}

.close:hover { background: var(--band); }

/* --- ficha ampliada --- */
/* Mismo criterio que la tarjeta: el marcador de familia lleva aire, la foto real no. */
img.detail-image[src$=".svg"] { padding: 20px; }

.detail-image {
  width: 100%;
  /* #0015 - Mismo criterio que la tarjeta: foto cuadrada, marco cuadrado. */
  aspect-ratio: 1 / 1;
  max-height: 60vh;
  object-fit: contain;
  padding: 0;
  background: var(--band);
  border-radius: var(--radius);
  margin-bottom: 18px;
}

.detail-spec {
  background: var(--band);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
}

details.detail-spec { margin-bottom: 8px; }
details.detail-spec summary { cursor: pointer; font-weight: 500; }
details.detail-spec p { margin: 10px 0 0; color: var(--ink-2); }

.detail-questions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* --- formularios --- */
label { display: block; font-size: 13px; color: var(--ink-2); }
label input, label textarea, label select { display: block; width: 100%; margin-top: 6px; }

fieldset { border: 0; padding: 0; margin: 24px 0; }
legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }

form .button { margin-top: 20px; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wide { grid-column: 1 / -1; }

.fulfillment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.fulfillment label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--pill);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.fulfillment label:hover { border-color: var(--ink-2); }
.fulfillment label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fulfillment input { width: auto; margin: 0; accent-color: var(--ink); }

input[type="file"] { padding: 10px; border-radius: 6px; font-size: 13px; }

/* --- indicador de tres pasos: carrito, entrega y pago (lo genera el JS) --- */
.steps {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 24px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.steps::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 16.6%;
  height: 2px;
  background: var(--ink);
  transition: width .2s ease;
}

.steps:has(li:nth-child(2)[aria-current="step"])::before { width: 50%; }
.steps:has(li:nth-child(3)[aria-current="step"])::before { width: 83.3%; }
.steps:has(.step-line)::before { display: none; }

.step-line {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--step-progress, 33%);
  height: 2px;
  background: var(--ink);
  transition: width .2s ease;
}

.steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--step-idle);
  transition: color .18s ease;
}

.steps li .step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.steps li .step-label { min-width: 0; }

.steps li.done { color: var(--ink); }

.steps li.done .step-num {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }

.steps li[aria-current="step"] .step-num {
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

/* --- carrito y totales --- */
.cart-row {
  display: grid;
  grid-template-columns: 1fr 78px 36px;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.cart-row strong { display: block; font-weight: 500; }
.cart-row small { display: block; font-size: 13px; color: var(--ink-2); }
.cart-row p { margin: 8px 0 0; }

.cart-row input {
  width: 100%;
  padding: 9px 6px;
  border-radius: var(--pill);
  text-align: center;
  font-size: 13px;
}

.remove {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}

.remove:hover { background: var(--band); color: var(--ink); }

.total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: 14px;
}

.grand {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  font-weight: 600;
}

/* --- mensajes --- */
.answer {
  background: var(--band);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 14px;
  white-space: pre-wrap;
}

.answer:empty { display: none; }

.error {
  background: var(--error-bg);
  color: var(--error-fg);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
}

/* ---------- 11. Responsive (móvil primero en el resultado) ---------- */

/* #0013 - El azul de marca contra el texto da 1.61:1: muy por debajo del 3:1 que
   pide WCAG 1.4.1 para distinguir un enlace solo por color. Por eso el subrayado
   es permanente dentro del texto corrido, no un adorno del hover. Los botones no
   son enlaces: son pastillas rellenas y ahi el problema no existe. */
main p a:not(.button),
.panel-sub a:not(.button),
.faq a:not(.button),
.info-card a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* ---------- #0013 - Chips de categoria, como comprar, garantia y pie ---------- */

/* Chips. El color acelera el reconocimiento; el NOMBRE ESCRITO lo garantiza
   (WCAG 1.4.1: el color nunca es el unico portador del significado). Los ocho
   fondos caen en la misma franja de luminosidad para que convivan sin pelear. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}

.chips-center { justify-content: center; margin: 18px 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--pill);
  border: 0;
  background: var(--cat-otros-bg);
  color: var(--cat-otros-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  max-width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
}

.chip small { font-weight: 500; opacity: .75; font-size: 11px; }

/* Un chip pulsable SI es un control: necesita borde visible y foco (WCAG 1.4.11). */
.chip-filter {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--field-line);
  transition: box-shadow .15s ease, transform .1s ease;
}

.chip-filter:hover { box-shadow: inset 0 0 0 1px currentColor; }
.chip-filter[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }
.chip-filter[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }

.chip-computadoras { background: var(--cat-computadoras-bg); color: var(--cat-computadoras-fg); }
.chip-almacenamiento { background: var(--cat-almacenamiento-bg); color: var(--cat-almacenamiento-fg); }
.chip-memorias { background: var(--cat-memorias-bg); color: var(--cat-memorias-fg); }
.chip-perifericos { background: var(--cat-perifericos-bg); color: var(--cat-perifericos-fg); }
.chip-monitores { background: var(--cat-monitores-bg); color: var(--cat-monitores-fg); }
.chip-canaima { background: var(--cat-canaima-bg); color: var(--cat-canaima-fg); }
.chip-servicio { background: var(--cat-servicio-bg); color: var(--cat-servicio-fg); }
.chip-otros { background: var(--cat-otros-bg); color: var(--cat-otros-fg); }

.clear-filters {
  align-self: center;
  border: 1px solid var(--field-line);
  border-radius: var(--pill);
  background: var(--bg);
  color: var(--ink);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.clear-filters:hover { background: var(--band-2); }

/* Como comprar en tres pasos. */
.howto { padding: 72px 0; background: var(--section-band-2); }

.howto-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  counter-reset: paso;
}

.howto-steps li {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}

.howto-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: var(--pill);
  background: var(--btn-ink-bg);
  color: var(--btn-ink-fg);
  font-weight: 700;
  font-size: 15px;
}

.howto-steps h3 { margin: 0 0 6px; font-size: 18px; }
.howto-steps p { margin: 0; color: var(--ink-2); font-size: 14px; }

.section-heading-sub { margin-bottom: 20px; }
.section-heading-sub h3 { font-size: 20px; margin: 0; }

.ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ways li {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}

.ways h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 16px;
}

.ways p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
.ways-note { font-size: 13px; color: var(--ink); background: var(--band); border-radius: var(--radius); padding: 10px 12px; }

.tag {
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--band);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tag-ok { background: var(--wa-tint); color: var(--ok); }

/* Tarjeta de informacion (garantia). */
.info-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.info-card h3 { margin: 0 0 8px; font-size: 17px; }
.info-card p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* QR de cobro (#0013). El socio lo dijo asi: «sera mejor el qr». Se escanea con la app,
   no se teclea; los datos copiables siguen al lado para quien prefiera escribirlos. */
.pay-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.pay-rows { flex: 1 1 220px; }

.pay-qr {
  flex: 0 1 auto;
  margin: 0;
  max-width: min(188px, 100%);
  text-align: center;
}

.pay-qr img {
  display: block;
  width: 188px;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--bg);
  padding: 8px;
  box-shadow: var(--shadow-sm);
}

.pay-qr figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}

/* Un pago no se confirma solo, y una billetera menos. Se dice antes, no despues. */
.pay-wait {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}

/* Invitacion a la tienda de entretenimiento, en el paso 3 y solo despues del comprobante. */
.cross-sell {
  margin: 28px 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--band-2);
}

.cross-title { margin: 0 0 4px; font-weight: 600; }
.cross-sell p { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.cross-sell .button { margin: 0; }

/* Pie: horario y el enlace discreto a la tienda de entretenimiento. */
.footer-hours { font-size: 13px; color: var(--ink-2); }

.footer-cross { font-size: 13px; }
.footer-cross a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.footer-cross a:hover { color: var(--ink); }


/* ============================================================
   #0016 · CRISTAL ESMERILADO, ESFERAS Y BANDA DE VALORES
   Respuestas/10.txt: «a la tienda le falta más color, se ve muy opaco».
   De la referencia del socio se toma la ESTRUCTURA —cristal, píldoras,
   esferas, banda de degradado— y el color sale de su logotipo (ATLAS 2.6 · R6).
   Todo lo translúcido de aquí SOLO ACLARA el fondo: el cristal sobre la zona
   más oscura del ambiente aplana a #f6f7fb, donde --ink da 14.37:1 y --ink-2
   6.12:1. Sin `backdrop-filter` el respaldo es todavía más claro (#fcfcfe).
   ============================================================ */

/* Las superficies de cristal. El desenfoque va en un token para poder
   apagarlo de una sola vez, y siempre con su gemelo -webkit- (Safari). */
.product-card,
.ways li,
.offer li,
.info-card,
.review,
.review-grid > p,
.faq,
.empty,
.panel-glass {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shine), var(--shadow-sm);
}

/* La tarjeta del titular, como el panel flotante de la referencia. Solo el
   primer panel: los demás siguen con el texto directamente sobre su
   ilustración, que ya tiene su velo medido desde #0010. */
.panel-glass {
  padding: 28px 26px;
  box-shadow: var(--glass-shine), var(--shadow);
}

/* --- fichas de producto en cristal --- */
.product-card {
  padding: 12px 12px 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shine), var(--shadow);
}

/* El marco de la foto no cambia respecto a #0015 —sigue cuadrado, la foto a
   sangre y el marcador de familia con sus 18 px de aire—; solo se le resta al
   radio el hueco de la tarjeta para que las dos curvas sean concéntricas. */
.product-photo { border-radius: calc(var(--radius-lg) - 8px); }
.product-info { padding: 16px 6px 0; }

/* Los controles del buscador también son cristal: es donde el cliente
   trabaja. --ink encima 14.62:1 y el borde --field-line 3.97:1 (mín. 3:1). */
.filters input,
.filters select {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* El botón «Compartir» lo pinta el frente `compartir` (web/compartir.js) con
   las clases `details share`, así que ya hereda la píldora secundaria. Aquí
   solo se le baja el peso para que no compita con «Ver ficha»: la jerarquía se
   hace con peso y espacio, no con un color nuevo (ATLAS 2.6 · R4).
   Medido: --ink-2 sobre el cristal 6.22:1 y sobre la zona más oscura del
   ambiente 5.04:1; el borde --field-line 3.91:1 y 3.21:1 (mín. 3:1). */
.product-actions .details.share {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--field-line);
  color: var(--ink-2);
}

.product-actions .details.share:hover { background: var(--band-2); color: var(--ink); }

/* --- los tres pasos: esferas flotantes --- */
.howto-steps li {
  background: var(--step-card);
  padding: var(--step-card-pad);
  box-shadow: var(--step-card-shadow);
  text-align: center;
}

.howto-sphere {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--sphere-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shine), var(--shadow-sm);
}

/* El aro de color. Respaldo primero —un aro sólido del azul de marca— y solo
   si el navegador sabe recortar con `mask` se cambia por el degradado. Sin
   ese respaldo, un navegador viejo pintaría un DISCO de color encima del
   icono en vez de un aro. */
.howto-sphere::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

@supports (mask: linear-gradient(#000 0 0)) or (-webkit-mask: linear-gradient(#000 0 0)) {
  .howto-sphere::before {
    border: 0;
    padding: 2px;
    background: var(--sphere-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

/* El dibujo es decorativo (aria-hidden): quien no lo vea sigue teniendo el
   número, el título y el texto del paso. Trazo en --cyan, 6.66:1 sobre el
   cristal — muy por encima del 3:1 que pide WCAG 1.4.11 para un icono. */
.howto-icon {
  width: 40px;
  height: 40px;
  color: var(--cyan);
}

.howto-num {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: auto;          /* anula el 34px cuadrado que tenía cuando era el paso entero */
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding-inline: 8px;
  border-radius: var(--pill);
  background: var(--grad-primary);
  color: var(--btn-ink-fg);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--bg);
}

/* El hilo que une las tres esferas, como en la captura. Solo en el tema
   claro, donde la esfera flota sin tarjeta, y solo cuando los tres pasos
   caben en una fila: apilados no hay nada que unir. Es decorativo puro. */
@media (min-width: 820px) {
  :root[data-theme="claro"] .howto-steps { position: relative; }

  :root[data-theme="claro"] .howto-steps::before {
    content: "";
    position: absolute;
    left: 17%;
    right: 17%;
    top: 56px;                 /* 8 px de relleno + medio diámetro de la esfera */
    height: 2px;
    border-radius: 2px;
    background: var(--sphere-ring);
    opacity: .55;
  }

  :root[data-theme="claro"] .howto-steps li { position: relative; }
}

/* --- la banda de los tres valores --- */
/* Blanco sobre cada parada del degradado: #16457f 9.58:1 · #1a6aa5 5.76:1 ·
   #6d28d9 7.10:1 · #a21caf 6.32:1. La baldosa translúcida aclara el fondo, así
   que se midió también con ella encima: el peor caso es el blanco al 10 %
   sobre #1a6aa5, que deja 4.69:1 — sigue por encima del 4.5 de WCAG 1.4.3.
   En editorial y oscuro --grad-band es su banda de siempre y --values-fg es
   --ink: la sección existe en los tres temas y en ninguno queda sin medir. */
.values {
  padding: 56px 0;
  background: var(--grad-band);
  color: var(--values-fg);
}

.value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px;
}

.value-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--value-tile);
  border: 1px solid var(--value-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.value-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--value-tile);
  border: 1px solid var(--value-line);
  color: inherit;
}

.value-icon svg { width: 26px; height: 26px; }

/* CL-V 2 «¿y si el texto es larguísimo?»: el hijo de un flex trae
   `min-width: auto` y no deja encoger; sin esto una palabra sin espacios
   empujaría la baldosa y sacaría barra horizontal a 360 px. */
.value-list li > div { min-width: 0; }

.value-list strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

/* El texto pequeño NO baja de opacidad: bajarla es volver a medir todo. Se
   distingue por tamaño y peso, que es como manda hacer la jerarquía (R4). */
.value-list span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  :root { --header-h: 96px; }

  .site-header {
    grid-template-columns: 1fr auto;
    align-content: center;
    row-gap: 4px;
    padding-inline: 14px;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .catalog { padding: 72px 0 80px; }
  .panel-body { gap: 18px; }

  .about { padding: 72px 0 80px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  /* Deja aire bajo los botones para que el pill flotante no los tape */
  .panel-body {
    padding-top: calc(var(--header-h) + 4vh);
    padding-bottom: calc(var(--header-h) + 72px);
  }

  .panel-sub { font-size: 15px; }
  .panel-actions { flex-direction: column; align-items: stretch; }
  .panel-actions .button { width: 100%; min-width: 0; }
  .panel-notes { gap: 16px; text-align: left; }

  .filters { flex-direction: column; align-items: stretch; }
  /* Visto en una captura real a 360 px: `.search` lleva `flex: 1 1 260px` y en
     columna ese `flex-grow` crece a lo ALTO, no a lo ancho — dejaba un hueco
     vacío de casi 200 px entre el buscador y los dos selectores. Defecto
     anterior a #0016; se arregla aquí porque vive en esta hoja. */
  .search { max-width: none; flex: 0 0 auto; }
  .filters select { width: 100%; min-width: 0; }

  .product-grid { gap: 28px; }
  .review-grid { grid-template-columns: 1fr; }

  dialog { padding: 40px 20px 24px; }
  .field-grid { grid-template-columns: 1fr; }

  .fulfillment { gap: 6px; }
  .fulfillment label { padding: 9px 6px; font-size: 12px; gap: 6px; }

  .cart-row { grid-template-columns: 1fr 64px 32px; gap: 8px; }
  .remove { width: 32px; height: 32px; }

  .steps { gap: 4px; }
  .steps li { flex-direction: column; gap: 6px; }
  .steps li .step-label { letter-spacing: .04em; }

  .faq { padding: 4px 16px; }
  .toast { bottom: 88px; }
  .site-footer { padding-bottom: 96px; }

  .values { padding: 40px 0; }
  .value-list li { padding: 14px 16px; gap: 12px; }
  .panel-glass { padding: 20px 16px; }
  .howto-sphere { width: 84px; height: 84px; margin-bottom: 14px; }
  .howto-icon { width: 34px; height: 34px; }
  .product-card { padding: 10px 10px 16px; }

  .about-lead { font-size: 18px; }
  .contact-row { flex-direction: column; align-items: stretch; }
  .contact-row .button { width: 100%; }
  .offer li { padding: 14px 14px 12px; }
  .panel-actions .with-icon { padding-left: 8px; }
  .whatsapp { right: 16px; bottom: 16px; }
}

/* ---------- 11b. Alto contraste forzado (#0016 · CL-V 6) ----------
   Con `forced-colors: active` el sistema impone SUS colores de texto y de
   fondo, pero no retira una imagen de fondo: un degradado se quedaría debajo
   del texto del sistema y podría dejarlo ilegible. Aquí se quitan los
   degradados, el ambiente y el desenfoque, y mandan los colores del usuario,
   que es exactamente lo que esa modalidad pide. La estructura no cambia. */
@media (forced-colors: active) {
  body::before { display: none; }

  .values,
  .value-list li,
  .value-icon,
  .primary,
  .product-actions .add,
  .howto-num,
  .howto-sphere::before { background-image: none; }

  .howto-sphere::before { border: 1px solid CanvasText; }
  .values { border-block: 1px solid CanvasText; }

  .product-card,
  .ways li,
  .offer li,
  .info-card,
  .review,
  .review-grid > p,
  .faq,
  .empty,
  .panel-glass,
  .howto-sphere,
  .filters input,
  .filters select,
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- 12. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* #0029 · Ficha propia de un artículo (/producto/<id>), la que se abre desde WhatsApp.
   Antes reutilizaba .panel de la portada: la foto quedaba de fondo con el velo y el titulo
   encima («la imagen se ve opaca», socio). Aqui la foto va arriba, nitida y sin filtro, y el
   texto debajo. Solo tokens existentes: ningun color nuevo, nada que volver a medir. */
.ficha-wrap { width: min(1100px, 100% - 32px); margin: calc(var(--header-h) + 20px) auto 40px; }
.ficha {
  display: grid;
  gap: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.ficha-foto { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; filter: none; opacity: 1; }
.ficha-texto { display: grid; gap: 12px; align-content: start; color: var(--ink); }
.ficha-texto h1 { font-size: clamp(1.35rem, 4.6vw, 2rem); line-height: 1.2; margin: 0; }
.ficha-precio { font-size: 1.6rem; font-weight: 700; margin: 0; }
.ficha-estado { margin: 0; color: var(--ink-2); }
.ficha-resumen { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.ficha-acciones { display: grid; gap: 10px; }
.ficha-detalle { border-top: 1px solid var(--line); padding-top: 12px; }
.ficha-detalle summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.ficha-detalle p { color: var(--ink-2); line-height: 1.6; }
@media (min-width: 820px) {
  .ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 24px; }
  .ficha-acciones { grid-template-columns: 1fr 1fr; }
}