/* ═══════════════════════════════════════════════════════════════════════════════ acordeon-faq.css — GEMELO VANILLA del Acordeón, modo FAQ (2026-08-20) ⛔ POR QUÉ NACE, y no es «se quedó atrasado». Este gemelo **nunca ha existido**. La ficha lo declaraba sin rodeos: *«Sin gemelo vanilla: el modo FAQ no tiene espejo en `patrones/`»* — el que hay (`acordeon-guiado/`) es el OTRO modo. Así que esto no es poner al día una copia: es construir la copia que faltaba. Y hacía falta antes de tocar las apps: **el gemelo es lo que copian las apps**, que son HTML y CSS a secas. Sin él, homologar el acordeón en producción sería copiar del kit React traduciendo a mano — y traducir a mano es exactamente como nace un Frankenstein. FUENTE ÚNICA: `catalogo-cd/components/Acordeon.jsx`. Cada regla de aquí es la MISMA de allí, con el mismo selector, no uno equivalente. Si difieren, manda el kit. ⛔ LA DECISIÓN QUE DA FORMA A ESTA PIEZA (Ricardo, 2026-08-19): el modo FAQ **perdió la caja** — sin borde y sin sombra— y **sustituye** al anterior, no es una variante. Vive dentro de un cajón lateral, que es blanco: con borde *y* fondo blanco la fila tenía dos señales diciendo lo mismo, *y cuando dos señales dicen lo mismo, la que sobra no se lee como refuerzo: se lee como ruido.* Eso es lo que él llamó «plano». Los TRES estados, definitivos: reposo **transparente** · hover **gris** · abierto **gris** — y el gris es `--color-bg-subtle`, el ORIGINAL, no el oscuro de la Tabla. ⛔ Y LA CONSECUENCIA ES DELIBERADA: en reposo la fila **no tiene forma visible**. La esquina de 16 px sólo aparece al pasar por encima o al abrir. En reposo esto es una LISTA DE TÍTULOS; la caja aparece cuando la tocas. *La forma no se retiró: se volvió una respuesta.* ⛔ Y AL DÍA SIGUIENTE LA DECISIÓN CRECIÓ UNA CONDICIÓN — `data-marco` (Ricardo, 2026-08-20): *«en el caso específico del cajón, sí recupera su borde tanto en estado reposo como en estado desplegado. Esto porque permite separar claramente cada sección entre sí. Si no hubiera bordes, se vería muy plano.»* **No deroga lo de arriba: lo acota.** Aquello se decidió mirando el acordeón SUELTO, y ahí sigue siendo cierto. Con VARIAS SECCIONES APILADAS dentro de un cajón, en cambio, sin borde no se separan unas de otras — y él volvió a usar la palabra «plano» para el defecto contrario. *La misma pieza en dos sitios distintos tiene dos trabajos distintos.* Medido en navegador, en un cajón de 420 px con las secciones apiladas: **antes**, en reposo, lo que separaba una sección de la siguiente era **nada** —12 px de blanco sobre blanco, 1,000:1—. **Después:** 1 px `#E5E7EB` → **1,238:1** en reposo, y 1 px `#D1D5DB` → **1,474:1** en la abierta, que además se eleva. La cifra es baja a propósito: es el borde sutil del canon, y su trabajo aquí es separar, no llamar la atención. **Sin `data-marco="ninguno"` esta hoja no dibuja el modo FAQ que conocemos**: el atributo es el estado por defecto de la pieza (`marco={false}` en el kit), no una opción rara. Se escribe en el contenedor `.exds-acc`, junto a `data-bleed`. ═══════════════════════════════════════════════════════════════════════════════ */ .exds-acc { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-sans); } /* LA TARJETA · SU MARCO. Estas dos reglas no estaban aquí: el gemelo nació cuando el modo FAQ no tenía marco en ningún caso, así que la base nunca hizo falta. Con `marco` sí — sin ellas, un acordeón marcado no pintaría nada y el prop sería un atributo mudo. *Un gemelo que sólo copia las reglas que su único caso usaba deja de servir al segundo caso.* ✅ **CERRADO 2026-08-23** (`gate_gemelos_conducta.js`): sube a `var(--shadow-card)`, como promete el párrafo de abajo — en los DOS gemelos a la vez (aquí y en `acordeon-guiado.css`). **El valor pintado NO cambia:** en el canon `--shadow-card: var(--shadow-none)`, así que `none` y `var(--shadow-card)` pintan exactamente lo mismo; sólo se cierra la divergencia de TEXTO entre kit y gemelos. Queda el párrafo de abajo como registro de por qué estaba así. */ /* ⚠ Lo que decía esta nota mientras estuvo abierta: el kit pone `var(--shadow-card)` (el canon prohíbe teclear valores) y aquí iba `none`, que era lo que decían **el gemelo hermano** (`acordeon-guiado.css`) **y la copia de la app** (`app/css/cotizador.css`) — la MISMA regla, el MISMO selector, y no podían decir dos cosas distintas según el archivo. La diferencia kit↔gemelos era **anterior a este cambio** —`gate_gemelos_conducta` ya marcaba `acordeon-guiado` en rojo antes de tocar nada— y no se heredó a un segundo archivo por inercia: se arregló en los dos gemelos a la vez el día que se cerró ese gate, subiendo al valor del kit. *Copiar la desviación del vecino sin nombrarla es como nacen las que ya nadie sabe de dónde vienen; nombrarla deja el arreglo a un solo cambio de distancia.* */ .exds-acc-card { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-card); transition: border-color var(--motion-base, 250ms) var(--ease-default), box-shadow var(--motion-base, 250ms) var(--ease-default); } .exds-acc-card[data-open="true"] { border-color: var(--color-border-default); box-shadow: var(--shadow-md); } /* SIN MARCO. En modo FAQ suelto la tarjeta no dibuja nada: ni borde, ni sombra, ni fondo. El selector conserva el `:not([data-bleed])` del kit —y no se simplifica— porque el mismo archivo sirve a los dos modos allí, y un gemelo que «limpia» el selector deja de poder compararse con su fuente. *Un gemelo se parece a su fuente también en lo que le sobra.* */ .exds-acc[data-marco="ninguno"]:not([data-bleed="true"]) .exds-acc-card { border: 0; box-shadow: none; background: none; } .exds-acc[data-marco="ninguno"]:not([data-bleed="true"]) .exds-acc-card[data-open="true"] { border: 0; box-shadow: none; } /* LA FILA. En modo FAQ es ella misma el