/* ==========================================================================
   Seguidores Amnesia — capa base de marca
   --------------------------------------------------------------------------
   Se carga DESPUES de main.css a proposito. Todo lo de este archivo son
   overrides sobre las variables de Bootstrap 5.3, para que una actualizacion
   del script pueda pisar el tema sin llevarse el diseno puesto.

   Contrato de direccion (.impeccable/surfaces/):
     - Negro absoluto. El violeta es el UNICO color saturado que carga la pagina.
     - Profundidad por superposicion de planos planos. Nunca por sombra ni blur.
     - El estado se lee en grosor y punteado de filete, no en el tono.
     - Cifras tabulares. Filetes duros de 1px.

   NO editar este archivo desde el panel. Vive en git.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paleta
   Los tres selectores apuntan al mismo lugar a proposito: la tienda es solo
   oscura, asi que el modo claro y el automatico resuelven al mismo paleta.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Fondo y planos. La elevacion se construye apilando planos mas claros,
       no agregando sombras. */
    --amn-ground: #000000;
    --amn-plane-1: #0b0a0f;
    --amn-plane-2: #141220;
    --amn-plane-3: #1e1b2e;

    /* Filetes. El grosor y el punteado son los que comunican estado. */
    --amn-line: #2a2640;
    --amn-line-strong: #3d3557;

    /* Violeta de marca. Unico color saturado que carga la pagina. */
    --amn-violet: #a855f7;
    --amn-violet-bright: #c084fc;
    --amn-violet-deep: #6d28d9;
    --amn-violet-rgb: 168, 85, 247;

    /* Estado. Ambar = en curso. Verde = entregado. Rojo = error. */
    --amn-progress: #f59e0b;
    --amn-done: #22c55e;
    --amn-error: #f43f5e;

    /* Texto. Tenido desde el violeta, nunca gris neutro: sobre negro
       absoluto el gris puro se ve sucio y muerto. */
    --amn-text: #f5f3ff;
    --amn-text-soft: #b9b2d0;
    --amn-text-muted: #8b84a3;
}

/* --------------------------------------------------------------------------
   2. Mapeo a Bootstrap
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--amn-ground);
    --bs-body-color: var(--amn-text-soft);
    --bs-emphasis-color: var(--amn-text);
    --bs-secondary-color: var(--amn-text-muted);

    --bs-primary: var(--amn-violet);
    --bs-primary-rgb: var(--amn-violet-rgb);
    --bs-link-color: var(--amn-violet-bright);
    --bs-link-hover-color: var(--amn-text);
    --bs-link-color-rgb: var(--amn-violet-rgb);

    --bs-border-color: var(--amn-line);
    --bs-border-color-translucent: var(--amn-line);

    --bs-secondary-bg: var(--amn-plane-2);
    --bs-tertiary-bg: var(--amn-plane-1);

    --bs-success: var(--amn-done);
    --bs-warning: var(--amn-progress);
    --bs-danger: var(--amn-error);

    /* El tema define sus propias sombras. Se anulan: la profundidad de este
       mundo se construye apilando planos, no difuminando bordes. */
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
}

html,
body {
    background-color: var(--amn-ground);
    color: var(--amn-text-soft);
}

/* --------------------------------------------------------------------------
   3. Superficies del navegador
   Lo que no dibujamos igual forma parte del diseno. Seleccion, cursor,
   barras de scroll y anillo de foco vienen con valores por defecto que no
   pertenecen a ningun sistema.
   -------------------------------------------------------------------------- */
::selection {
    background-color: var(--amn-violet-deep);
    color: var(--amn-text);
}

:root {
    accent-color: var(--amn-violet);
    caret-color: var(--amn-violet-bright);
    scrollbar-color: var(--amn-line-strong) var(--amn-ground);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--amn-ground);
}

::-webkit-scrollbar-thumb {
    background: var(--amn-line-strong);
    border: 2px solid var(--amn-ground);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--amn-violet-deep);
}

/* Anillo de foco propio, visible sobre negro y solo para navegacion por
   teclado: el mouse no lo dispara. */
:focus-visible {
    outline: 2px solid var(--amn-violet-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Cifras
   Precios, cantidades y contadores tienen que alinearse en columna y no
   bailar cuando cambia un digito.
   -------------------------------------------------------------------------- */
.amn-figure,
.odometer,
table td,
table th,
input[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   5. Solo modo oscuro
   El conmutador claro/oscuro/automatico sale de la interfaz. La tienda es
   negra siempre; dejarlo seria ofrecer una version que ya no mantenemos.
   -------------------------------------------------------------------------- */
#bd-theme,
#bd-theme + .dropdown-menu {
    display: none !important;
}

/* --------------------------------------------------------------------------
   6. Naranja del tema
   El tema trae #fd7702 metido DENTRO de variables de componente
   (.btn-primary { --bs-btn-bg: ... }), que ganan por especificidad contra
   cualquier override en :root. Hay que repetir los mismos selectores.
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--amn-violet);
    --bs-btn-border-color: var(--amn-violet);
    --bs-btn-hover-bg: var(--amn-violet-bright);
    --bs-btn-hover-border-color: var(--amn-violet-bright);
    --bs-btn-active-bg: var(--amn-violet-bright);
    --bs-btn-active-border-color: var(--amn-violet-bright);
    --bs-btn-disabled-bg: var(--amn-violet-deep);
    --bs-btn-disabled-border-color: var(--amn-violet-deep);

    /* Texto casi negro sobre el violeta pleno. Da 5.3:1 de contraste, pasa
       holgado, y es mas fiel al neon que un boton violeta apagado con texto
       blanco, que apenas llega a 3.9:1. */
    --bs-btn-color: var(--amn-ground);
    --bs-btn-hover-color: var(--amn-ground);
    --bs-btn-active-color: var(--amn-ground);
    --bs-btn-disabled-color: var(--amn-text);
}

.btn-outline-primary {
    --bs-btn-color: var(--amn-violet-bright);
    --bs-btn-border-color: var(--amn-violet);
    --bs-btn-hover-bg: var(--amn-violet);
    --bs-btn-hover-border-color: var(--amn-violet);
    --bs-btn-hover-color: var(--amn-ground);
    --bs-btn-active-bg: var(--amn-violet);
    --bs-btn-active-border-color: var(--amn-violet);
    --bs-btn-active-color: var(--amn-ground);
    --bs-btn-disabled-color: var(--amn-text-muted);
    --bs-btn-disabled-border-color: var(--amn-line);
}

.dropdown-menu,
.dropdown-menu-dark {
    --bs-dropdown-bg: var(--amn-plane-2);
    --bs-dropdown-border-color: var(--amn-line);
    --bs-dropdown-color: var(--amn-text-soft);
    --bs-dropdown-link-color: var(--amn-text-soft);
    --bs-dropdown-link-hover-bg: var(--amn-plane-3);
    --bs-dropdown-link-hover-color: var(--amn-text);
    --bs-dropdown-link-active-bg: var(--amn-violet-deep);
    --bs-dropdown-link-active-color: var(--amn-text);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--amn-violet-deep);
    --bs-nav-pills-link-active-color: var(--amn-text);
}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--amn-line);
    --bs-accordion-color: var(--amn-text-soft);
    --bs-accordion-btn-color: var(--amn-text);
    --bs-accordion-active-color: var(--amn-violet-bright);
    --bs-accordion-active-bg: var(--amn-plane-1);
}

.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--amn-text-soft);
    --bs-pagination-border-color: var(--amn-line);
    --bs-pagination-hover-bg: var(--amn-plane-2);
    --bs-pagination-hover-color: var(--amn-text);
    --bs-pagination-active-bg: var(--amn-violet-deep);
    --bs-pagination-active-border-color: var(--amn-violet-deep);
    --bs-pagination-active-color: var(--amn-text);
    --bs-pagination-disabled-color: var(--amn-text-muted);
    --bs-pagination-disabled-bg: transparent;
}

.progress,
.progress-stacked {
    --bs-progress-bg: var(--amn-plane-2);
    --bs-progress-bar-bg: var(--amn-violet);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--amn-text-soft);
    --bs-list-group-border-color: var(--amn-line);
    --bs-list-group-active-bg: var(--amn-violet-deep);
    --bs-list-group-active-border-color: var(--amn-violet-deep);
    --bs-list-group-action-hover-bg: var(--amn-plane-2);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--amn-violet);
    border-color: var(--amn-violet);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--amn-violet);
}

.form-range::-moz-range-thumb {
    background-color: var(--amn-violet);
}

/* --------------------------------------------------------------------------
   7. Colores sueltos del tema
   Estos no pasan por ninguna variable: estan escritos a mano en las reglas.
   -------------------------------------------------------------------------- */

/* Contadores del home: los digitos venian en naranja quemado y el icono en
   azul de Bootstrap, dos colores que no pertenecen a esta marca. */
section.counts-area .count-box span {
    color: var(--amn-violet-bright);
}

/* La vista de la seccion trae un <style> embebido que pinta el primer icono
   de verde y el ultimo de rosa, con selectores de 4 clases. Hay que ganarle
   en especificidad, no en orden. Tres acentos distintos rompen la regla del
   contrato: el violeta es el unico color saturado que carga la pagina. */
section.counter-section .feature-item .count-box i.icon,
section.counter-section .feature-item:first-child .count-box i.icon,
section.counter-section .feature-item:last-child .count-box i.icon {
    color: var(--amn-violet);
}

/* Barra de valoracion en resenas: estaba con la palabra clave "orange". */
section.reviews .rating-box .rating-bar {
    background: var(--amn-violet);
}

/* --------------------------------------------------------------------------
   8. Planos, no sombras
   El tema apoya su profundidad en .shadow de Bootstrap. En este mundo la
   elevacion se construye apilando planos con un filete duro de 1px.
   -------------------------------------------------------------------------- */
.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: none !important;
}

.bg-body-tertiary {
    background-color: var(--amn-plane-1) !important;
    border: 1px solid var(--amn-line);
}

.bg-body-secondary {
    background-color: var(--amn-plane-2) !important;
}

/* --------------------------------------------------------------------------
   9. Tipografia
   El tema traia Inter variable autoalojada pero nunca la cargaba: el sitio
   corria con la fuente del sistema, o sea que se veia distinto en cada
   equipo (Segoe en Windows, Roboto en Android, SF en Mac). Ninguna identidad.
   Se carga desde nuestra propia carpeta para no depender del tema.
   Solo la roman: la italica son otros 240K y este publico entra desde el
   celular. El navegador sintetiza la cursiva las pocas veces que hace falta.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter var";
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Inter-roman.var.woff2") format("woff2");
}

/* Voz de display: Chakra Petch (OFL, subconjunto latino, 700 recta e
   italica; 21K entre las dos).

   Inter es la fuente correcta para cuerpo e interfaz, pero como voz de
   titulos es el default al que converge cualquier sitio: no dice nada de
   esta marca. Chakra Petch tiene formas cuadradas de tecnologia y una
   italica de velocidad que es exactamente el caracter del logo (letras
   inclinadas con anillos orbitales). Se usa SOLO en h1 y h2: en cuerpo o
   interfaz cansaria la lectura. */
@font-face {
    font-family: "Chakra Petch";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/ChakraPetch-700-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Chakra Petch";
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url("../fonts/ChakraPetch-700italic-latin.woff2") format("woff2");
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-font-sans-serif: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

body {
    font-family: var(--bs-font-sans-serif);
    /* cv11 alinea la l minuscula y el 1; ss01 da la a de un piso. Juntos
       evitan que "1l" e "Il" se confundan en cantidades y precios. */
    font-feature-settings: "cv11" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Escala. Los saltos son grandes a proposito: si dos niveles se parecen,
   no hay jerarquia, hay ruido. El tracking se cierra a medida que crece el
   cuerpo, porque Inter abre demasiado en tamanos grandes. */
/* h1 y h2 llevan la voz de display. El tracking es menos cerrado que en
   Inter porque Chakra Petch ya tiene formas cuadradas y apretadas: pasarse
   le pega las letras. */
h1,
.h1,
h2,
.h2 {
    font-family: "Chakra Petch", var(--bs-font-sans-serif);
    font-weight: 700;
}

h1,
.h1 {
    font-size: clamp(2.25rem, 5.5vw, 4.25rem);
    letter-spacing: -0.015em;
    line-height: 1.05;
    text-wrap: balance;
}

h2,
.h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-wrap: balance;
}

h3,
.h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    text-wrap: balance;
}

h4,
.h4,
h5,
.h5 {
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    color: var(--amn-text);
}

/* Los numeros grandes son producto, no decoracion: van en el peso maximo
   y bien cerrados. */
section.counts-area .count-box span {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Medida de lectura. Un parrafo a todo el ancho de una pantalla de
   escritorio es ilegible; se corta cerca de los 68 caracteres. */
.lead,
section p {
    max-width: 68ch;
}

.lead {
    font-size: clamp(1rem, 1.6vw, 1.175rem);
    line-height: 1.6;
    color: var(--amn-text-soft);
}

/* Los parrafos centrados tienen que centrar tambien su caja, o el limite de
   medida los tira hacia la izquierda. */
.text-center .lead,
.text-center p,
section .text-center p {
    margin-left: auto;
    margin-right: auto;
}

/* Etiquetas chicas: el tracking se abre, al reves que en los titulos. */
.form-label,
.badge,
small,
.small {
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   10. Ritmo vertical
   Mas aire ARRIBA de un titulo que abajo: asi el titulo queda pegado a lo
   que introduce y separado de lo que termina.
   -------------------------------------------------------------------------- */
section h2,
section .h2 {
    margin-top: 0.5em;
    margin-bottom: 0.5rem;
}

section h3,
section .h3 {
    margin-top: 1.25em;
    margin-bottom: 0.4rem;
}

section h2 + p,
section h2 + .lead,
section h3 + p {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   11. Estados
   Un control que no responde al mouse ni al foco se siente roto, aunque
   funcione.
   -------------------------------------------------------------------------- */
.btn {
    transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: 0.45;
    cursor: not-allowed;
}

a {
    transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Las tarjetas de servicio y los items de lista responden con el filete,
   no con sombra ni desplazamiento: coherente con la profundidad por planos. */
.count-box,
.list-group-item-action,
.card {
    transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.count-box:hover,
.card:hover {
    border-color: var(--amn-line-strong);
}

/* Campos de formulario */
.form-control,
.form-select {
    background-color: var(--amn-plane-1);
    border-color: var(--amn-line);
    color: var(--amn-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--amn-plane-1);
    border-color: var(--amn-violet);
    color: var(--amn-text);
    box-shadow: none;
}

.form-control::placeholder {
    /* Tenido desde el violeta y con contraste suficiente para leerse:
       el placeholder gris claro por defecto no llega a 4.5:1 sobre negro. */
    color: var(--amn-text-muted);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   12. Movimiento
   El tema anima cada seccion con la misma entrada, que es ruido, no diseno.
   Se unifica la curva en una salida exponencial y se acorta, para que
   acompane el scroll en vez de hacerlo esperar.
   -------------------------------------------------------------------------- */
[data-aos] {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition-duration: 0.5s !important;
}

@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;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   13. Avisos de exito y error
   Venian con fondo claro y texto oscuro: en un sitio negro son cajas
   blancas que golpean la vista. Y aparecen justo donde mas importa la
   confianza, en el checkout y en los formularios.

   Se pasan a plano oscuro con el color de estado en el texto y en un filete
   de 1px. El border-left de 7px que traian es de los recursos que delatan
   una plantilla: un filete de color grueso al costado no comunica nada que
   el color del texto no comunique mejor.
   -------------------------------------------------------------------------- */
.ajax-alert-message .alert-success,
.ajax-alert-message .alert-danger,
.ajax-alert-message .alert-warning,
.ajax-alert-message .alert-info {
    background-color: var(--amn-plane-2) !important;
    border: 1px solid var(--amn-line) !important;
    border-left-width: 1px !important;
    box-shadow: none !important;
}

.ajax-alert-message .alert-success {
    color: var(--amn-done) !important;
    border-color: color-mix(in srgb, var(--amn-done), transparent 65%) !important;
}

.ajax-alert-message .alert-success svg {
    color: var(--amn-done) !important;
}

.ajax-alert-message .alert-danger {
    color: var(--amn-error) !important;
    border-color: color-mix(in srgb, var(--amn-error), transparent 65%) !important;
}

.ajax-alert-message .alert-danger svg {
    color: var(--amn-error) !important;
}

/* --------------------------------------------------------------------------
   14. Secciones que quedaban fuera de paleta
   -------------------------------------------------------------------------- */

/* "Como funciona": los pasos tenian el icono en azul marino y el estado
   activo en naranja. Dos colores que no son de esta marca. */
section.how-it-work .single_work_step .step-icon i {
    color: var(--amn-violet);
}

section.how-it-work .single_work_step:hover .step-icon i,
section.how-it-work .single_work_step:focus .step-icon i,
section.how-it-work .single_work_step:focus h5 {
    color: var(--amn-violet-bright);
}

section.how-it-work .single_work_step .step-icon {
    border-color: var(--amn-line-strong) !important;
}

/* Flechas del carrusel de resenas: naranja al pasar el mouse. */
.owl-carousel .owl-next span:hover,
.owl-carousel .owl-prev span:hover {
    background: var(--amn-violet) !important;
    color: var(--amn-ground) !important;
}

/* Bloques con degradado azul marino del tema: el footer de enlaces rapidos
   y el menu lateral del celular. Pasan a plano liso con filete, que es como
   se construye la profundidad en este mundo. */
section.quick-link .bg-gradient-dark,
header.header-menu .offcanvas.show {
    background-image: none !important;
    background-color: var(--amn-plane-1) !important;
    border: 1px solid var(--amn-line);
}

/* --------------------------------------------------------------------------
   15. Objetivos tactiles
   En celular todo lo que se toca necesita 44px de lado: por debajo de eso
   el dedo falla y el visitante cree que el sitio no anda.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar-toggler,
    .owl-nav button,
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }

    /* El menu movil necesita area de toque, no solo texto. */
    .offcanvas .nav-link {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* Nada debe empujar la pagina a lo ancho en celular: el scroll horizontal
   es el defecto movil mas comun y el mas facil de no notar desde una
   pantalla grande. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
iframe,
table {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   16. Superficies del flujo de compra
   Estas no se ven desde el home y por eso pasaron desapercibidas hasta que
   escanee los colores del CSS del tema. Todas eran claras: en un sitio negro
   son bloques blancos.
   -------------------------------------------------------------------------- */

/* Fichas de plataforma del listado de paquetes. Venian con fondo gris claro
   y borde de 3px, mas un borde naranja en el estado activo. */
section.package-list .package-list-carousel .social-item,
section.package-list .package-list-carousel .social-item.active,
section.package-list .tab-item .img-logo {
    background-color: var(--amn-plane-2) !important;
    border: 1px solid var(--amn-line) !important;
}

section.package-list .package-list-carousel .social-item.active,
section.package-list .package-list-carousel .social-item:hover {
    border-color: var(--amn-violet) !important;
}

/* Botones de seleccion de paquete. Es la superficie donde el visitante elige
   cuanto compra, o sea donde se decide la venta: no puede estar sin trabajar.
   El hover pasaba a gris claro (#f0f0f3) y en modo oscuro a gris medio. */
/* Ojo con la especificidad: el tema define
   [data-bs-theme=dark] .package-btn-list .buy-package-item { background: #3f3e3e !important }
   que es (0,3,0) con !important. Un selector de (0,2,0) con !important pierde
   igual, por eso hace falta el prefijo html. Se vio en pantalla: el borde y
   el color de texto de esta regla si entraban, el fondo no. */
html[data-bs-theme="dark"] .package-btn-list .buy-package-item {
    background: var(--amn-plane-1) !important;
    border: 1px solid var(--amn-line) !important;
    color: var(--amn-text-soft) !important;
    transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.package-btn-list .buy-package-item:hover,
[data-bs-theme="dark"] .package-btn-list .buy-package-item:hover {
    background: var(--amn-plane-3) !important;
    border-color: var(--amn-line-strong) !important;
    color: var(--amn-text) !important;
}

/* El paquete elegido se marca con el violeta pleno: es la unica decision de
   esta pantalla y tiene que verse de un vistazo. */
.package-btn-list .buy-package-item.active,
.package-btn-list .buy-package-item.selected {
    background: var(--amn-violet) !important;
    border-color: var(--amn-violet) !important;
    color: var(--amn-ground) !important;
    font-weight: 650;
}

/* Enlaces del menu: el hover era naranja. */
.header-menu .text-dark.nav-link:hover,
[data-bs-theme="dark"] header.header-menu .text-dark.nav-link:hover {
    color: var(--amn-violet-bright) !important;
}

[data-bs-theme="dark"] header.header-menu .text-dark.nav-link {
    color: var(--amn-text-soft) !important;
}

/* Indicador de carga: tenia el borde blanco. */
.wimax-load {
    border-color: var(--amn-line-strong) !important;
    border-top-color: var(--amn-violet) !important;
}

/* --------------------------------------------------------------------------
   17. Antetitulos
   El tema pone un "above-heading" arriba de varios encabezados: era una
   pastilla BLANCA con texto naranja, o sea un rectangulo claro golpeando
   sobre el negro.

   El piso de calidad prohibe este recurso sin excepcion, pero aca el texto
   lleva informacion real ("Why Invest in Social Media Services?" sobre
   "Unlock the Future of Your Brand"), asi que ocultarlo perderia contenido.
   Se lo reduce a lo que deberia haber sido siempre: una etiqueta chica y
   discreta, sin pastilla y sin competir con el titulo que introduce.
   -------------------------------------------------------------------------- */
.section-header .above-heading {
    background-color: transparent !important;
    color: var(--amn-violet) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   18. Validacion de formularios
   El checkout es todo formulario, asi que estos estados son parte del camino
   de compra. Bootstrap los resuelve por variable y el tema nunca las mapeo:
   quedaban en el verde y el rojo por defecto, que no son los de esta marca.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-form-valid-color: var(--amn-done);
    --bs-form-valid-border-color: var(--amn-done);
    --bs-form-invalid-color: var(--amn-error);
    --bs-form-invalid-border-color: var(--amn-error);
}

/* El foco de las casillas y los radios seguia en naranja claro (#f5ac86). */
.form-check-input:focus {
    border-color: var(--amn-violet);
    box-shadow: none;
}

/* El pulgar del deslizador al arrastrarlo se ponia durazno (#f9cdb6). Importa
   porque es el control con el que se elige la cantidad. */
.form-range::-webkit-slider-thumb:active {
    background-color: var(--amn-violet-bright);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--amn-violet-bright);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amn-violet), transparent 70%);
}

/* --------------------------------------------------------------------------
   19. Utilidades claras de Bootstrap
   El tema escribe .bg-light y .text-dark a mano en el markup de cinco
   vistas, entre ellas el formulario de pedido y el checkout. En el sitio se
   veian como barras BLANCAS con texto negro: el titulo "Order form" era un
   rectangulo blanco arriba del formulario de compra.

   Se corrigen a nivel sistema y no vista por vista, por dos razones: la
   tienda es solo oscura, asi que "fondo claro" y "texto oscuro" estan mal
   en cualquier lugar donde aparezcan; y una actualizacion del script pisa
   las vistas pero no este archivo.
   -------------------------------------------------------------------------- */
.bg-light {
    background-color: var(--amn-plane-2) !important;
    border: 1px solid var(--amn-line);
}

.text-dark {
    color: var(--amn-text) !important;
}

/* El titulo del formulario de pedido: en vez de una barra que grita, un
   encabezado con el filete de la caja que lo contiene. */
.order-form .card-title.bg-light {
    background-color: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--amn-line);
    border-radius: 0;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   20. reCAPTCHA
   El widget se dibuja dentro de un iframe de Google, asi que su interior no
   se puede tematizar. Lo que si se puede es que su caja no rompa la pagina:
   sin borde blanco y sin fondo claro alrededor.
   -------------------------------------------------------------------------- */
.g-recaptcha,
.g-recaptcha > div,
div[class*="recaptcha"] {
    background: transparent !important;
}

.g-recaptcha iframe {
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   21. Botones oscuros de Bootstrap
   .btn-dark y .btn-outline-dark NO se invierten en modo oscuro: se quedan
   fijos en #212529. Sobre el negro de la tienda eso es un boton que no se ve.

   Donde aparecen no es menor:
     - "Cerrar" del popup de cookies, que ve todo visitante nuevo
     - "Copiar al portapapeles" del ID de pedido en la pantalla de compra
       exitosa, que es como el comprador se guarda su numero de seguimiento
     - "Copiado" (la confirmacion de ese boton)
     - compartir por WhatsApp al pie de cada nota del blog

   Se los convierte en botones fantasma: contorno y texto, sin relleno. Es el
   peso visual correcto para una accion secundaria al lado del CTA violeta.
   -------------------------------------------------------------------------- */
.btn-dark,
.btn-outline-dark,
[data-bs-theme="dark"] .btn-dark,
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--amn-text-soft);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--amn-line-strong);
    --bs-btn-hover-color: var(--amn-text);
    --bs-btn-hover-bg: var(--amn-plane-2);
    --bs-btn-hover-border-color: var(--amn-violet);
    --bs-btn-active-color: var(--amn-text);
    --bs-btn-active-bg: var(--amn-plane-3);
    --bs-btn-active-border-color: var(--amn-violet);
    --bs-btn-disabled-color: var(--amn-text-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--amn-line);
}

/* El boton de compartir por WhatsApp queda con el verde de la marca en el
   icono; el contorno sigue siendo neutro para no competir con el resto de
   la fila de compartir. */
.social-share .btn-outline-dark .bi-whatsapp {
    color: #25d366;
}

/* --------------------------------------------------------------------------
   22. Naranja del tema escrito dentro de las vistas
   Dos vistas traen su propio bloque <style> con el naranja #fd7702 fijo y
   !important. Como esos bloques se imprimen en el cuerpo de la pagina,
   quedan DESPUES de esta hoja: a igual peso e igual especificidad, ganan
   ellos. Por eso aca hace falta subir la especificidad con el prefijo
   html[data-bs-theme="dark"], que no es adorno sino la unica forma de
   ganarles sin editar el tema (y sin perder el arreglo en la proxima
   actualizacion del script).

   22a. Selector de plataforma del listado de paquetes (tab.php)
   Son las pestañas Instagram / TikTok / etc: el primer control que toca
   quien entra al home. Venian en marron #3d210a y naranja pleno al estar
   activas.
   -------------------------------------------------------------------------- */
html[data-bs-theme="dark"] .package-category-tab .btn-package-group .btn-item {
    background: var(--amn-plane-2) !important;
    border: 1px solid var(--amn-line) !important;
    color: var(--amn-text-soft) !important;
    transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-bs-theme="dark"] .package-category-tab .btn-package-group .btn-item:hover {
    background: var(--amn-plane-3) !important;
    border: 1px solid var(--amn-line-strong) !important;
    color: var(--amn-text) !important;
}

/* La plataforma elegida se marca con el violeta pleno y texto negro: es la
   unica seleccion activa de la seccion y tiene que leerse de un vistazo. */
html[data-bs-theme="dark"] .package-category-tab .btn-package-group .btn-item.active {
    background: var(--amn-violet) !important;
    border: 1px solid var(--amn-violet) !important;
    color: var(--amn-ground) !important;
    font-weight: 650;
}

/* 22b. Botones de redes de la barra lateral del blog (follow_us.php)
   Conservan el color de cada red en reposo, que es lo correcto para que se
   reconozcan. Lo que estaba mal era el hover: se vaciaba a naranja. */
html[data-bs-theme="dark"] a.btn-social:hover {
    color: var(--amn-violet-bright) !important;
    border: solid 1px var(--amn-violet) !important;
}

/* --------------------------------------------------------------------------
   23. El SEGUNDO naranja del tema (#ff9800 y familia)
   landing_page.css trae una paleta calida propia que no es la del resto del
   tema: #ff9800, #f38323, #ffb329, #d37220, #865300, #ff4700. Son once
   reglas repartidas en cinco secciones del home. Se me habian pasado porque
   busque el naranja por su hex conocido (#fd7702) en vez de buscar por tono.

   Como amnesia.css se carga ultima de las nueve hojas, alcanza con repetir
   el mismo selector: a igual especificidad gana la que va despues. No hace
   falta !important en ningun caso de esta seccion.

   23a. Fichas de plataforma del listado de paquetes
   El cuadradito del icono venia naranja pleno con el glifo en rojo-naranja.
   -------------------------------------------------------------------------- */
.package-list-tab .buy-package-item .icon-square {
    background: var(--amn-violet-deep);
}

.package-list-carousel .buy-package-item .icon-square {
    color: var(--amn-violet-bright);
}

/* 23b. "Por que elegirnos": los cuatro iconos redondos.
   Eran discos naranjas sobre un halo marron al 5%. */
section.why-choose-us .icon-box i {
    background-color: color-mix(in srgb, var(--amn-violet), transparent 92%);
    color: var(--amn-violet-bright);
}

section.why-choose-us .icon-box:hover i {
    background-color: var(--amn-violet);
    color: var(--amn-ground);
}

section.why-choose-us .content .read-more {
    background: var(--amn-violet);
    color: var(--amn-ground);
}

section.why-choose-us .content .read-more:hover {
    background: var(--amn-violet-bright);
    color: var(--amn-ground);
}

/* 23c. "Que ofrecemos": la seccion entera tenia un degradado naranja de lado
   a lado. Era el bloque de color mas grande de la pagina y el mas ajeno a la
   marca. Se conserva la diagonal de 310 grados, que es lo unico que aportaba
   (esa diagonal es muy del lenguaje y2k), y se pasa al violeta. */
section.what-we-offer {
    background-image: linear-gradient(310deg,
        color-mix(in srgb, var(--amn-violet-deep) 32%, var(--amn-ground)) 0%,
        color-mix(in srgb, var(--amn-violet-deep) 68%, var(--amn-ground)) 100%);
    border-top: 1px solid var(--amn-line-strong);
    border-bottom: 1px solid var(--amn-line-strong);
}

/* Un violeta pleno seria una losa brillante peleando contra el negro de toda
   la pagina. El violeta profundo mantiene la banda como un plano aparte, que
   es como se separan las superficies en el resto del sitio, y deja leer el
   texto blanco que el tema ya trae con .text-white. */

/* El antetitulo venia en el violeta de marca, que sobre la banda violeta
   desaparecia. */
section.what-we-offer .above-heading {
    /* El violeta claro sobre la banda violeta quedaba legible pero flojo.
       Sobre color pleno, el antetitulo va en blanco. */
    color: var(--amn-text);
    background: transparent;
}

/* El subtitulo quedaba alineado a la izquierda debajo de un titulo centrado. */
section.what-we-offer .above-heading,
section.what-we-offer > .container > .row > * > p.text-white:first-of-type {
    text-align: center;
}

/* 23d. Tarjetas de caracteristicas: el disco del icono era amarillo. */
section.group-features .feature-icons .content .icon-box .icon {
    background-color: var(--amn-violet-deep);
}

/* 23e. "Como funciona": los tres pasos numerados viraban a naranja al pasar
   el mouse (numero, aro punteado y titulo). */
section.how-it-work .single_work_step:focus::before {
    color: var(--amn-violet-bright);
}

section.how-it-work .single_work_step:hover .step-icon::after,
section.how-it-work .single_work_step:focus .step-icon::after {
    border-color: var(--amn-violet);
}

section.how-it-work .single_work_step:hover .step-icon i,
section.how-it-work .single_work_step:focus .step-icon i,
section.how-it-work .single_work_step:hover h5,
section.how-it-work .single_work_step:focus h5 {
    color: var(--amn-violet-bright);
}

/* --------------------------------------------------------------------------
   24. Popup de cookies
   Tenia fondo rgba(0,0,0,0.8) y su unica separacion del fondo era una sombra
   negra. Sobre una pagina negra eso es negro sobre negro: el panel no existia
   y el texto quedaba flotando encima de los contadores del home, ilegible.

   Se le da un plano propio con borde, que es como se separan las superficies
   en todo el resto del sitio.
   -------------------------------------------------------------------------- */
/* El bloque del tema esta en un <style> dentro de la vista, o sea despues
   de esta hoja, y ademas escribe background-COLOR. Hace falta ganarle por
   especificidad con el prefijo html[data-bs-theme]. */
html[data-bs-theme="dark"] .cookie-popup {
    background-color: var(--amn-plane-2);
    border: 1px solid var(--amn-line-strong);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75);
    /* El tema combinaba bottom:10px con translateY(-50%), que lo subia media
       altura del panel: por eso caia justo encima de los contadores del home
       en vez de apoyarse abajo.

       OJO: la variante .center usa transform PARA DOS COSAS a la vez,
       translate(-50%, -50%): la Y lo sube (mal) y la X lo centra (bien).
       Anular el transform entero le saca tambien el centrado, y entonces el
       panel arranca en left:50% y se va para afuera. Se vio en movil, donde
       quedaba 141px fuera de la pantalla. Por eso cada variante lleva su
       propio transform en vez de un none general. */
    transform: none;
}

html[data-bs-theme="dark"] .cookie-popup.center {
    transform: translateX(-50%);
}

html[data-bs-theme="dark"] .cookie-popup .popup-content {
    color: var(--amn-text-soft);
}

html[data-bs-theme="dark"] .cookie-popup a {
    color: var(--amn-violet-bright);
}

/* Los dos botones quedaban pegados y sin aire respecto del texto. */
.cookie-popup .button-container {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}


/* --------------------------------------------------------------------------
   25. Panel del selector de paquetes
   El tema le pone al panel un degradado gris calido
   (#211c1c -> #27272a) que en una pagina negra se ve como una caja marron.
   Va al plano oscuro, igual que el resto de las superficies del sitio.
   -------------------------------------------------------------------------- */
html[data-bs-theme="dark"] .tab-content .tab-item {
    background-image: none;
    background-color: var(--amn-plane-1);
    border: 1px solid var(--amn-line);
}

/* El hover del boton de paquete tambien estaba fijado por el tema en gris. */
html[data-bs-theme="dark"] .package-btn-list .buy-package-item:hover {
    background: var(--amn-plane-3) !important;
    border-color: var(--amn-line-strong) !important;
    color: var(--amn-text) !important;
}
/* --------------------------------------------------------------------------
   26. Ilustraciones del home
   Las tres ilustraciones que trae el tema son naranjas y blancas: gente de
   naranja, graficos naranjas, una elipse blanca de piso y una ventana de
   navegador blanca. Tienen canal alfa, o sea que ese blanco no es un fondo
   que se pueda tapar: es el dibujo. Sobre una pagina negra eran las manchas
   claras mas grandes de todo el sitio.

   No hay filtro que "corrija" solo el naranja sin romper los tonos de piel,
   y el blanco no tiene tono para rotar. Lo que si funciona es llevar toda la
   imagen a un duotono: se aplana a gris, se oscurece y se vuelve a tenir en
   violeta. La ilustracion deja de pelear con el fondo y pasa a leerse como
   parte de la marca.

   ESTO ES UN PARCHE, NO LA SOLUCION. Son ilustraciones de stock corporativas
   que no tienen nada que ver con el lenguaje y2k que pide la tienda. Lo que
   corresponde es reemplazarlas; mientras tanto, al menos no gritan.
   -------------------------------------------------------------------------- */
img[src*="boost-your-social-media-impact"],
img[src*="why-invest-in-social-media-services"],
img[src*="what-we-offer"] {
    filter: grayscale(1) contrast(0.78) brightness(0.5) sepia(1)
            hue-rotate(233deg) saturate(3.6) opacity(0.88);
}

/* La de la banda violeta necesita separarse de su fondo, que ya es violeta:
   va mas clara que las otras dos, no mas oscura. */
section.what-we-offer img[src*="what-we-offer"] {
    filter: grayscale(1) contrast(0.85) brightness(1.15) sepia(1)
            hue-rotate(233deg) saturate(2.2) opacity(0.95);
}

/* --------------------------------------------------------------------------
   27. Pagina 404
   Trae su propio <style> en la vista, con tres decisiones que no funcionan
   sobre fondo negro:

     background: #9b9b9b33   un gris al 20% que se aclara sobre el negro. La
                             banda arrancaba a 104px, y como el encabezado va
                             en position:absolute de 33 a 113, el borde de esa
                             banda cortaba el logo por la mitad. Se veia como
                             si el logo tuviera una caja detras.
     #e74c3c                 un rojo que no es el de la paleta, en una barrita
                             decorativa debajo de un "404" que ya es violeta.
     color: #555             gris oscuro sobre fondo oscuro para el subtitulo.

   La banda de arriba pasa a transparente (asi no hay costura donde apoya el
   logo) y la de abajo, que arranca bien lejos del encabezado, se queda como
   plano. Se acota con :has() para no tocar el .header-top de las otras
   paginas, que es la misma clase.
   -------------------------------------------------------------------------- */
body:has(.content-404) .header-top {
    background: transparent;
}

html[data-bs-theme="dark"] .content-404 {
    background: var(--amn-plane-1);
    border-top: 1px solid var(--amn-line);
    border-bottom: 1px solid var(--amn-line);
}

html[data-bs-theme="dark"] .error-page .error-border {
    background-color: var(--amn-violet);
}

html[data-bs-theme="dark"] .error-page h4 {
    color: var(--amn-text-soft);
}

/* --------------------------------------------------------------------------
   28. Escala de espaciado en movil
   El tema define utilidades de espaciado grandes (py-6 = 4rem, py-7 = 6rem,
   py-8 = 8rem, py-10 y mb-10 = 12rem) con !important y SIN una sola media
   query que las achique. Son valores pensados para un monitor: en un celular
   de 390px, py-10 son 192px de aire arriba y 192px abajo, casi media pantalla
   vacia por seccion.

   Medido en el home a 390px: la pagina daba 13.736px de alto contra 8.364 en
   escritorio. Las dos secciones de imagen-con-texto sumaban solas mas de
   1.100px de puro padding, y se veian como huecos negros entre bloques.

   Los valores de abajo mantienen la separacion entre secciones legible pero
   proporcionada a la pantalla. Se corta en el breakpoint md de Bootstrap.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .py-6 { padding-top: 2rem !important;   padding-bottom: 2rem !important; }
    .py-7 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .py-8 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
    .py-10 { padding-top: 1rem !important;   padding-bottom: 1rem !important; }

    /* El padding vertical viene ANIDADO TRES VECES: la seccion trae py-5, el
       container de adentro trae otro py-5, y encima la columna trae py-10.
       Sumaban 152px antes de que empezara la tarjeta, o sea 304px de negro
       entre una tarjeta y la siguiente: casi media pantalla de celular.
       Se vio en una captura del telefono real, no alcanzaba con bajar py-10.

       El py-5 del container es redundante con el de la seccion que lo
       contiene, asi que en movil se anula. Son solo dos secciones del sitio
       las que tienen ese anidado. Queda 48 + 0 + 16 = 64px arriba de la
       tarjeta y 128px entre secciones, en vez de 304. */
    section.py-5 > .container.py-5 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .pt-6 { padding-top: 2rem !important; }
    .pt-7 { padding-top: 2.5rem !important; }
    .pt-8 { padding-top: 3rem !important; }
    .pt-10 { padding-top: 3.5rem !important; }

    .pb-6 { padding-bottom: 2rem !important; }
    .pb-7 { padding-bottom: 2.5rem !important; }
    .pb-8 { padding-bottom: 3rem !important; }
    .pb-10 { padding-bottom: 3.5rem !important; }

    .my-6, .mt-6 { margin-top: 2rem !important; }
    .my-7, .mt-7 { margin-top: 2.5rem !important; }
    .my-8, .mt-8 { margin-top: 3rem !important; }
    .my-10, .mt-10 { margin-top: 3.5rem !important; }

    .my-6, .mb-6 { margin-bottom: 2rem !important; }
    .my-7, .mb-7 { margin-bottom: 2.5rem !important; }
    .my-8, .mb-8 { margin-bottom: 3rem !important; }
    .my-10, .mb-10 { margin-bottom: 3.5rem !important; }
}

/* --------------------------------------------------------------------------
   29. Jerarquia de los controles del encabezado en movil
   Estaba al reves. El selector de idioma lleva btn-outline-primary, o sea el
   borde violeta pleno de la marca. La hamburguesa lleva p-0 y el borde que
   el tema le da en oscuro es blanco al 10%: no se ve.

   En un celular la hamburguesa es LA navegacion, el unico acceso al menu
   entero; el idioma es un control marginal que casi nadie toca. El que grita
   tiene que ser el primero.

   Se le da a la hamburguesa borde propio y area de toque de 44px (el minimo
   de la guia de accesibilidad, que con p-0 no llegaba), y se baja el idioma
   a un contorno neutro. Solo en movil: en escritorio no hay hamburguesa con
   la que competir, asi que el idioma se queda como esta.
   -------------------------------------------------------------------------- */
header .navbar-toggler.p-0 {
    padding: 0.5rem 0.6rem !important;
    border: 1px solid var(--amn-line-strong);
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

header .navbar-toggler:hover,
header .navbar-toggler:focus-visible {
    border-color: var(--amn-violet);
}

@media (max-width: 991.98px) {
    header .btn-outline-primary.dropdown-toggle {
        --bs-btn-border-color: var(--amn-line-strong);
        --bs-btn-color: var(--amn-text-soft);
        --bs-btn-hover-border-color: var(--amn-violet);
        --bs-btn-hover-bg: var(--amn-plane-2);
        --bs-btn-hover-color: var(--amn-text);
    }
}

/* --------------------------------------------------------------------------
   30. Tarjetas de "Por que funciona": eran enormes
   El tema les pone padding 50px 40px y un icono de 80px. Con textos de tres
   renglones eso deja tarjetas altisimas al lado de un titulo chico, y la
   seccion se ve descompensada. Se aprieta todo un escalon.
   -------------------------------------------------------------------------- */
section.why-choose-us .icon-box {
    padding: 26px 24px;
    border: 1px solid var(--amn-line);
    border-radius: 12px;
}

section.why-choose-us .icon-box i {
    width: 48px;
    height: 48px;
    font-size: 20px;
    margin-bottom: 14px;
}

section.why-choose-us .icon-box h3 {
    font-size: 19px;
    margin-bottom: 6px;
}

section.why-choose-us .icon-box p {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* La columna del titulo tenia todo el alto libre y el texto arriba de todo.
   Centrado vertical queda emparejado con las tarjetas. */
@media (min-width: 1200px) {
    section.why-choose-us .content {
        align-self: center;
    }
}

/* --------------------------------------------------------------------------
   31. Secciones sin ilustracion
   Cuando se vacia image_url el tema igual imprime el <img> y la columna que
   lo contiene sigue ocupando la mitad del ancho: queda un hueco. Aca se
   colapsa esa columna y el contenido pasa a ocupar la fila entera.
   -------------------------------------------------------------------------- */
section.image-with-text-section:has(img[src=""]) [class*="col-"]:has(> img) {
    display: none;
}

section.image-with-text-section:has(img[src=""]) [class*="col-"]:not(:has(> img)) {
    flex: 0 0 100%;
    max-width: 100%;
}

section.what-we-offer:has(img[src=""]) .col-xl-4 {
    display: none;
}

section.what-we-offer:has(img[src=""]) .col-xl-8 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   32. Banda "Tres niveles": tratamiento y2k
   Estaba resuelta como un degradado violeta liso, que es correcto pero
   generico: no dice nada del lenguaje que pidio la tienda. El y2k tecno se
   apoya en cuatro cosas concretas, y son las que se aplican aca:

     - grilla de perspectiva, la retícula que se ve en todo ese periodo
     - esquinas biseladas en vez de redondeadas, como los cuadros de dialogo
       de la epoca
     - halo de neon en los iconos, no relleno plano
     - antetitulo con corchetes y letra monoespaciada, de interfaz tecnica

   La grilla va en un pseudo-elemento con pointer-events:none, asi que no
   toca la interaccion ni el orden del contenido para un lector de pantalla.
   -------------------------------------------------------------------------- */
section.what-we-offer {
    position: relative;
    overflow: hidden;
}

section.what-we-offer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right,
            rgba(192, 132, 252, 0.16) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(to bottom,
            rgba(192, 132, 252, 0.16) 0 1px, transparent 1px 64px);
    /* la grilla se desvanece hacia el centro para no competir con el texto */
    -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 100%);
            mask-image: radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 100%);
}

section.what-we-offer > * {
    position: relative;
    z-index: 1;
}

/* Antetitulo: monoespaciado y entre corchetes, como una etiqueta de sistema */
section.what-we-offer .above-heading {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    opacity: 0.9;
}

section.what-we-offer .above-heading::before { content: "[ "; }
section.what-we-offer .above-heading::after  { content: " ]"; }

/* Los discos del icono pasan a cuadrados biselados con halo */
section.group-features .feature-icons .content .icon-box .icon {
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    background-color: var(--amn-ground);
    border: 1px solid var(--amn-violet-bright);
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25),
                0 0 18px rgba(192, 132, 252, 0.45);
    color: var(--amn-violet-bright);
}

/* El titulo grande, con un halo apenas perceptible: da el brillo de pantalla
   sin volverse ilegible. */
section.what-we-offer h2,
section.what-we-offer .h2-heading {
    text-shadow: 0 0 22px rgba(192, 132, 252, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    section.what-we-offer::before { opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   33. Los tres contadores dejan de ser tarjetas
   Eran la plantilla de metrica heroica: numero grande, etiqueta chica, tres
   cajas iguales con sombra. El piso de calidad la lista como defecto y este
   mismo documento ya la tenia anotada como algo que el sitio arrastra del
   tema, no como parte del sistema.

   El problema de fondo no es que sean feas: es que MIENTEN sobre su
   importancia. Son tres datos de una linea cada uno —cuando arranca, cuanto
   dura la garantia, si pedimos la contraseña— ocupando una pantalla entera
   con el peso visual de una seccion principal. Y "0 contraseñas" como cifra
   heroica es un chiste: cero no es una metrica, es una promesa.

   Pasan a ser una FICHA TECNICA: una sola banda fina, con filete arriba y
   abajo, tres datos en linea separados por filetes verticales. Un objeto en
   vez de tres, y unos 70px de alto en vez de 200. El visitante los lee de un
   golpe y sigue hacia el catalogo, que es donde tiene que llegar.
   -------------------------------------------------------------------------- */
section.counts-area {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-block: 1.5rem;
    border-top: 1px solid var(--amn-line);
    border-bottom: 1px solid var(--amn-line);
    background: var(--amn-plane-1);
}

section.counts-area .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

section.counter-section .feature-item {
    border-right: 1px solid var(--amn-line);
}

section.counter-section .feature-item:last-child {
    border-right: 0;
}

/* La tarjeta desaparece: sin fondo, sin sombra, sin radio. Lo que separa
   ahora es el filete, que es como se separan las superficies en todo el
   sistema. */
section.counts-area .count-box {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 1.15rem 1.4rem;
    min-height: 0;
}

section.counts-area .count-box > div {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* El icono deja de ser un disco de 80px y pasa a marca de renglon. La
   plantilla ademas tiñe el primero de verde y el ultimo de rojo: son colores
   de estado usados como decoracion, que el sistema reserva para estado. */
section.counter-section .feature-item .count-box i.icon,
section.counter-section .feature-item:first-child .count-box i.icon,
section.counter-section .feature-item:last-child .count-box i.icon {
    color: var(--amn-violet) !important;
    font-size: 1rem !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    position: relative;
    top: 1px;
}

/* La cifra baja de tamaño heroico a dato: sigue siendo lo primero que se lee
   de cada renglon, pero ya no compite con el titulo de la pagina. */
section.counts-area .count-box span {
    font-size: 1.4rem !important;
    font-weight: 700;
    color: var(--amn-violet) !important;
    line-height: 1 !important;
    margin: 0 !important;
}

section.counts-area .count-box p {
    font-size: 0.9375rem;
    color: var(--amn-text-soft);
    margin: 0 !important;
    line-height: 1.35;
}

/* En celular la fila se apila y el filete pasa de vertical a horizontal:
   el mismo recurso, girado. */
@media (max-width: 991.98px) {
    section.counter-section .feature-item {
        border-right: 0;
        border-bottom: 1px solid var(--amn-line);
    }
    section.counter-section .feature-item:last-child {
        border-bottom: 0;
    }
    section.counts-area .count-box {
        padding: 0.95rem 1.15rem;
    }
}

/* --------------------------------------------------------------------------
   34. Antetitulos: fuera
   El piso de calidad es tajante y no admite excepcion de brief: el titulo se
   sostiene solo. Yo habia hecho lo contrario, convertirlo en recurso con
   corchetes y monoespaciada en la banda y2k. Se retira.

   El campo lo sigue imprimiendo el tema en cada seccion, asi que se oculta
   por CSS en vez de tocar la vista, que una actualizacion del script pisa.
   -------------------------------------------------------------------------- */
.above-heading {
    display: none !important;
}

/* --------------------------------------------------------------------------
   35. La ficha deja de tener cifras
   La forma de la banda funciona; el contenido no. Eran tres promesas
   disfrazadas de metricas: 1, 30 y 0 en cifra grande. "0 contraseñas" nunca
   fue un dato, y "1 hora" y "30 dias" ya los dice el parrafo del arranque,
   dos renglones mas arriba.

   Podrian haberse reemplazado por metricas de verdad —clientes, entregas,
   antiguedad— pero la tienda tiene CERO pedidos registrados: cualquier cifra
   ahi seria inventada, que es exactamente lo que se vino sacando del sitio.
   Los precios tampoco, hasta que se defina la moneda.

   Queda entonces una barra de hechos, sin cifra. Los tres elegidos son los
   que quitan fricción ANTES del catalogo, y "sin registro" no estaba dicho en
   ningun otro lado del inicio.
   -------------------------------------------------------------------------- */
section.counts-area .count-box span.odometer {
    display: none;
}

section.counts-area .count-box p {
    font-size: 1rem;
    color: var(--amn-text);
    font-weight: 500;
}

/* Sin la cifra, el icono queda como unico ancla del renglon: sube un punto. */
section.counter-section .feature-item .count-box i.icon,
section.counter-section .feature-item:first-child .count-box i.icon,
section.counter-section .feature-item:last-child .count-box i.icon {
    font-size: 1rem !important;
}

/* --------------------------------------------------------------------------
   36. La barra de hechos, con oficio
   La version anterior era correcta y aburrida: plano liso, filete recto,
   iconos sueltos. Cumplia la regla de "planos y filetes" al pie de la letra y
   se leia como una nota al pie, no como parte del arranque. El brief pide
   impacto visual primero y vara de terminacion cripto/fintech, y eso no se
   consigue con menos, se consigue con MEJOR EJECUTADO.

   Cuatro movimientos, todos con material del sistema:

   1. Los filetes se desvanecen en las puntas. Una linea que muere en el borde
      es de plantilla; una que se apaga antes de llegar esta dibujada. Es el
      detalle mas barato que separa una interfaz armada de una construida.
   2. El plano lleva un lavado violeta que decae hacia abajo, como si la luz
      del titulo cayera sobre la banda.
   3. Los iconos pasan a fichas biseladas con aro de neon: mismo corte
      diagonal que la banda "Tres niveles", asi las dos superficies se
      reconocen de la misma familia.
   4. Las divisorias tambien se desvanecen arriba y abajo. Mismo recurso que
      1, girado, que es como el sistema ya resuelve el paso a movil.

   El halo de neon es una sombra de desplazamiento cero, que el piso de
   calidad marca como decoracion. Aca se sostiene porque el brief fija Y2K
   neon: el resplandor es el material de ese lenguaje, no un adorno agregado.
   -------------------------------------------------------------------------- */
section.counts-area {
    border-top: 0;
    border-bottom: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--amn-violet) 8%, var(--amn-plane-1)) 0%,
            var(--amn-plane-1) 62%,
            var(--amn-plane-1) 100%);
    position: relative;
    isolation: isolate;
}

/* Filetes que se apagan antes del borde */
section.counts-area::before,
section.counts-area::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--amn-line-strong) 18%,
        var(--amn-violet) 50%,
        var(--amn-line-strong) 82%,
        transparent 100%);
}

section.counts-area::before { top: 0; }

section.counts-area::after {
    bottom: 0;
    opacity: 0.45;
}

/* Divisorias: el borde recto se cambia por una linea que se desvanece */
section.counter-section .feature-item {
    border-right: 0;
    position: relative;
}

section.counter-section .feature-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    right: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--amn-line-strong) 35%,
        var(--amn-line-strong) 65%,
        transparent 100%);
}

section.counts-area .count-box {
    padding: 1.5rem 1.6rem;
    gap: 0.85rem;
    align-items: center;
}

/* Ficha biselada con aro, mismo corte que la banda "Tres niveles" */
section.counter-section .feature-item .count-box i.icon,
section.counter-section .feature-item:first-child .count-box i.icon,
section.counter-section .feature-item:last-child .count-box i.icon {
    color: var(--amn-violet-bright) !important;
    font-size: 1rem !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    background: color-mix(in srgb, var(--amn-violet) 12%, var(--amn-ground)) !important;
    border: 1px solid color-mix(in srgb, var(--amn-violet) 55%, transparent) !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--amn-violet) 30%, transparent);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    top: 0;
    transition: box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

section.counter-section .feature-item:hover .count-box i.icon {
    border-color: var(--amn-violet-bright) !important;
    box-shadow: 0 0 22px color-mix(in srgb, var(--amn-violet) 50%, transparent);
}

section.counts-area .count-box p {
    font-weight: 500;
    color: var(--amn-text);
    letter-spacing: -0.005em;
}

@media (max-width: 991.98px) {
    section.counter-section .feature-item:not(:last-child)::after {
        top: auto;
        bottom: 0;
        left: 18%;
        right: 18%;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            var(--amn-line-strong) 35%,
            var(--amn-line-strong) 65%,
            transparent 100%);
    }
    section.counter-section .feature-item {
        border-bottom: 0;
    }
    section.counts-area .count-box {
        padding: 1.15rem 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   37. Arranque a dos columnas
   El encabezado del tema es una sola columna centrada, con el markup fijo en
   la vista. Para armar el arranque que pidio el dueño —insignia, titulo
   grande alineado a la izquierda, boton que baja al catalogo y dos marcas de
   confianza— la seccion pasa a optional_content_section, que imprime HTML
   propio. htmLawed lo deja pasar, bloqueando script y onclick.

   Se elige esa via y no editar la vista porque una actualizacion del script
   pisa el tema y se llevaria el arranque entero.

   La derecha no lleva imagen: el tema ya dibuja circulos, galones y una
   grilla en esa zona, hoy casi invisibles. Se les sube el contraste y pasan a
   ser el elemento visual, en vez de sumar una ilustracion de stock, que es lo
   que se acaba de sacar del sitio.
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* El encabezado flotante tapa el destino, asi que el ancla frena antes */
#comprar {
    scroll-margin-top: 96px;
}

.amn-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2rem;
    align-items: center;
    min-height: clamp(28rem, 62vh, 40rem);
    padding-block: clamp(2rem, 6vh, 5rem);
}

.amn-hero__text {
    max-width: 34rem;
}

/* Insignia de confianza. No es un antetitulo: no nombra la seccion, lleva
   contenido propio. */
.amn-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--amn-line-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--amn-violet) 7%, var(--amn-plane-1));
    color: var(--amn-text-soft);
    font-size: 0.8125rem;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.amn-hero__pill i {
    color: var(--amn-violet-bright);
    font-size: 1rem;
    line-height: 1;
}

.amn-hero__pill strong {
    color: var(--amn-text);
    font-weight: 650;
}

.amn-hero h1.amn-hero__title {
    font-size: clamp(2.25rem, 5.5vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    font-weight: 700;
    margin: 0 0 1.15rem;
    text-wrap: balance;
}

.amn-hero__title em {
    font-style: normal;
    color: var(--amn-violet);
}

.amn-hero__lead {
    font-size: clamp(1rem, 1.6vw, 1.175rem);
    line-height: 1.6;
    color: var(--amn-text-soft);
    max-width: 34rem;
    margin: 0 0 2rem;
}

/* Boton principal. La flecha se separa un pelo al pasar el mouse: una sola
   señal de movimiento, no un efecto por elemento. */
.amn-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.85rem;
    background: var(--amn-violet);
    color: var(--amn-ground);
    font-weight: 650;
    font-size: 1.0625rem;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 0 26px color-mix(in srgb, var(--amn-violet) 32%, transparent);
    transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.amn-hero__cta:hover,
.amn-hero__cta:focus-visible {
    background: var(--amn-violet-bright);
    color: var(--amn-ground);
    box-shadow: 0 0 38px color-mix(in srgb, var(--amn-violet) 48%, transparent);
}

.amn-hero__cta i {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.amn-hero__cta:hover i {
    transform: translateX(3px);
}

.amn-hero__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    color: var(--amn-text-soft);
    font-size: 0.9375rem;
}

.amn-hero__marks span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.amn-hero__marks i {
    color: var(--amn-violet-bright);
    font-size: 1rem;
}

/* La geometria que el tema ya dibuja a la derecha sube de contraste y pasa a
   ser el elemento visual del arranque. */
section.header-section .img-background,
section.more-content .img-background {
    opacity: 1;
}

@media (max-width: 991.98px) {
    .amn-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        text-align: left;
    }
    .amn-hero__text { max-width: none; }
    .amn-hero__cta { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   38. Reseñas: la seccion se retira mientras no haya ninguna
   Con las tres del vendedor ocultas, la seccion queda con el titulo y nada
   debajo. Una seccion vacia es peor que ninguna: le dice al visitante que
   nadie compro todavia, justo en el lugar donde iba la prueba social.

   Se oculta sola cuando no hay ningun item, y REAPARECE SOLA en cuanto entre
   la primera reseña real. No hay que acordarse de volver a prenderla.
   -------------------------------------------------------------------------- */
section.reviews:not(:has(.col-xl-4)) {
    display: none;
}

/* --------------------------------------------------------------------------
   39. La columna derecha del arranque
   Estaba vacia, y no por decision: al pasar la seccion a
   optional_content_section se perdio el <div class="img-background"> que
   dibujaba la geometria del tema, porque ese div lo imprime la vista de
   header_section y no la de contenido libre.

   Se llena con una FICHA AUTORAL, no con una ilustracion de stock. Muestra el
   producto —una cuenta con su numero— con el usuario en marcador de posicion
   (@tucuenta), asi se lee como maqueta y no como el resultado de un cliente
   concreto. Es depiccion de producto, que es distinto de prueba social.

   Detras va la grilla de perspectiva del mismo lenguaje que la banda "Tres
   niveles", para que las dos superficies se reconozcan.
   -------------------------------------------------------------------------- */
.amn-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
}

/* Grilla que se apaga hacia los bordes, en un pseudo-elemento sin eventos */
.amn-hero__visual::before {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right,
            color-mix(in srgb, var(--amn-violet) 16%, transparent) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(to bottom,
            color-mix(in srgb, var(--amn-violet) 16%, transparent) 0 1px, transparent 1px 56px);
    -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 78%);
            mask-image: radial-gradient(closest-side, #000 15%, transparent 78%);
}

.amn-hero__card {
    position: relative;
    width: min(21rem, 100%);
    padding: 1.6rem 1.75rem 1.5rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--amn-violet) 10%, var(--amn-plane-2)) 0%,
        var(--amn-plane-2) 70%);
    border: 1px solid var(--amn-line-strong);
    /* mismo corte diagonal que las fichas de icono */
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.amn-hero__card-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.35rem;
}

.amn-hero__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 34px;
    background: color-mix(in srgb, var(--amn-violet) 22%, var(--amn-ground));
    border: 1px solid var(--amn-violet);
    box-shadow: 0 0 12px color-mix(in srgb, var(--amn-violet) 35%, transparent);
}

.amn-hero__handle {
    color: var(--amn-text-soft);
    font-size: 0.9375rem;
}

/* La cifra es el objeto de la ficha: va en cifras tabulares, que es lo que el
   sistema pide para todo numero de producto. */
.amn-hero__num {
    display: block;
    font-size: clamp(2.5rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--amn-text);
    font-variant-numeric: tabular-nums;
}

.amn-hero__label {
    display: block;
    margin-top: 0.4rem;
    color: var(--amn-text-muted);
    font-size: 0.9375rem;
}

.amn-hero__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1.15rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--amn-violet) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--amn-violet) 12%, transparent);
    color: var(--amn-violet-bright);
    font-size: 0.8125rem;
    font-weight: 600;
}

.amn-hero__delta i { font-size: 1rem; line-height: 1; }

/* En celular la ficha se retira: lo que tiene que entrar arriba del pliegue
   es el titulo y el boton, no la maqueta. */
@media (max-width: 991.98px) {
    .amn-hero__visual { display: none; }
}

/* --------------------------------------------------------------------------
   40. El corte del titulo del arranque
   Con text-wrap: balance el navegador repartia "Nadie sigue a / un perfil
   vacio." y dejaba la "a" violeta sola colgando al final del primer renglon.
   El cambio de color arrancaba a mitad de frase, que es peor que no tener
   color: el ojo lee un corte donde no hay uno.

   La parte violeta pasa a bloque propio. El corte cae ahora donde cambia el
   sentido —lo que nadie hace / con lo que no tiene—, y en cualquier ancho el
   color empieza al principio de un renglon.
   -------------------------------------------------------------------------- */
.amn-hero__title {
    text-wrap: pretty;
}

.amn-hero__title em {
    display: block;
}

/* --------------------------------------------------------------------------
   41. La ficha, con estructura de perfil
   Se rehace con la anatomia real de un perfil: foto con aro, fila de tres
   cifras, nombre, descripcion y los dos botones de accion.

   LIMITE DELIBERADO: se toma la ESTRUCTURA, no la piel. Nada de degradado
   rosa-naranja en el aro, nada de logo ni de tipografia de la plataforma. Una
   copia fiel de su interfaz seria hacer pasar la maqueta por una captura
   real, y esta tienda no esta afiliada a Meta: el pie lo aclara. La ficha se
   lee como perfil, pero en violeta y con el bisel de la casa, o sea como algo
   nuestro que representa el producto.

   El numero lo anima assets/amnesia/js/amnesia.js. El valor final ya esta en
   el HTML: si el JS no carga, la cifra correcta esta igual.
   -------------------------------------------------------------------------- */
.amn-hero__card {
    width: min(22.5rem, 100%);
    padding: 1.5rem 1.5rem 1.35rem;
}

/* Cabecera: foto a la izquierda, cifras a la derecha */
.amn-hero__card-top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.15rem;
    margin-bottom: 1rem;
}

/* Aro de historia, en violeta y no en el degradado de la plataforma */
.amn-hero__avatar {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 30%,
            color-mix(in srgb, var(--amn-violet) 35%, var(--amn-plane-3)) 0%,
            var(--amn-plane-3) 70%);
    border: 2px solid var(--amn-violet);
    box-shadow: 0 0 0 3px var(--amn-plane-2),
                0 0 0 4px color-mix(in srgb, var(--amn-violet) 45%, transparent),
                0 0 16px color-mix(in srgb, var(--amn-violet) 30%, transparent);
}

/* Las tres cifras del perfil */
.amn-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    text-align: center;
}

.amn-hero__stat b {
    display: block;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.15;
    color: var(--amn-text);
    font-variant-numeric: tabular-nums;
}

.amn-hero__stat span {
    display: block;
    font-size: 0.8125rem;
    color: var(--amn-text-muted);
    line-height: 1.3;
}

/* La cifra de seguidores es el objeto de la ficha: se despega del resto en
   tamaño y color. Es la unica desviacion respecto del perfil real, y es
   deliberada: ahi esta el mensaje. */
.amn-hero__stat--main b {
    font-size: 1.75rem;
    color: var(--amn-violet-bright);
    letter-spacing: -0.02em;
}

.amn-hero__handle {
    display: block;
    font-weight: 650;
    color: var(--amn-text);
    font-size: 0.9375rem;
    margin-bottom: 0.15rem;
}

.amn-hero__bio {
    display: block;
    color: var(--amn-text-soft);
    font-size: 0.9375rem;
    line-height: 1.4;
    margin-bottom: 1.15rem;
}

/* Los dos botones de accion del perfil */
.amn-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.amn-hero__btn {
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--amn-line-strong);
    color: var(--amn-text-soft);
    background: transparent;
}

.amn-hero__btn--primary {
    background: var(--amn-violet);
    border-color: var(--amn-violet);
    color: var(--amn-ground);
}

/* --------------------------------------------------------------------------
   42. La ficha, con las piezas que faltaban
   Tenia foto, cifras y botones, pero le faltaba lo que hace que un perfil se
   reconozca sin leerlo: las historias destacadas, la barra de pestañas y la
   grilla de publicaciones. Esa grilla es el elemento mas identificable de
   todos: se reconoce antes que el texto.

   Sigue en pie el limite: estructura, no piel. Los mosaicos son planos
   violetas, no fotos; nada de logo, degradado ni tipografia de la
   plataforma. Se lee como perfil, en los colores de la casa.
   -------------------------------------------------------------------------- */
.amn-hero__card { padding-bottom: 0; }

.amn-hero__name {
    display: block;
    font-weight: 700;
    color: var(--amn-text);
    font-size: 0.9375rem;
    line-height: 1.3;
}

.amn-hero__handle {
    font-weight: 400;
    color: var(--amn-text-muted);
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
}

/* Historias destacadas */
.amn-hero__highlights {
    display: flex;
    gap: 0.85rem;
    margin: 1.15rem 0 0.15rem;
}

.amn-hero__hl {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--amn-plane-3);
    border: 1px solid var(--amn-line-strong);
}

.amn-hero__hl:first-child {
    border-color: var(--amn-violet);
    background: color-mix(in srgb, var(--amn-violet) 18%, var(--amn-plane-3));
}

/* Barra de pestañas: la activa se marca con un filete arriba, que es como el
   sistema ya marca lo activo en el menu del panel. */
.amn-hero__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.15rem;
    border-top: 1px solid var(--amn-line);
}

.amn-hero__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0;
    color: var(--amn-text-muted);
    font-size: 1rem;
    border-top: 2px solid transparent;
    margin-top: -1px;
}

.amn-hero__tab--on {
    color: var(--amn-text);
    border-top-color: var(--amn-violet);
}

/* Grilla de publicaciones */
.amn-hero__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin: 0 -1.5rem;
}

.amn-hero__post {
    position: relative;
    aspect-ratio: 1;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--amn-violet) 26%, var(--amn-ground)) 0%,
        color-mix(in srgb, var(--amn-violet) 8%, var(--amn-ground)) 100%);
}

/* Variacion, para que no se lea como seis cuadrados iguales */
.amn-hero__post:nth-child(2) { background: linear-gradient(30deg,  color-mix(in srgb, var(--amn-violet) 14%, var(--amn-ground)) 0%, color-mix(in srgb, var(--amn-violet) 32%, var(--amn-ground)) 100%); }
.amn-hero__post:nth-child(3) { background: linear-gradient(200deg, color-mix(in srgb, var(--amn-violet) 34%, var(--amn-ground)) 0%, color-mix(in srgb, var(--amn-violet) 10%, var(--amn-ground)) 100%); }
.amn-hero__post:nth-child(4) { background: linear-gradient(75deg,  color-mix(in srgb, var(--amn-violet) 10%, var(--amn-ground)) 0%, color-mix(in srgb, var(--amn-violet) 28%, var(--amn-ground)) 100%); }
.amn-hero__post:nth-child(5) { background: linear-gradient(310deg, color-mix(in srgb, var(--amn-violet) 30%, var(--amn-ground)) 0%, color-mix(in srgb, var(--amn-violet) 12%, var(--amn-ground)) 100%); }
.amn-hero__post:nth-child(6) { background: linear-gradient(120deg, color-mix(in srgb, var(--amn-violet) 16%, var(--amn-ground)) 0%, color-mix(in srgb, var(--amn-violet) 30%, var(--amn-ground)) 100%); }

/* Los indicadores de esquina son de las señas mas reconocibles de la grilla */
.amn-hero__post i {
    position: absolute;
    top: 6px;
    right: 7px;
    font-size: 0.8125rem;
    color: var(--amn-text);
    opacity: 0.85;
}

.amn-hero__actions { grid-template-columns: 1fr 1fr auto; }

.amn-hero__btn--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.7rem;
}

/* --------------------------------------------------------------------------
   43. Ajuste de la fila de cifras
   Medido en el navegador: la fila daba 254px dentro de una ficha de 250 de
   ancho util, o sea 5px afuera, y "seguidos" quedaba cortado contra el borde.
   Las columnas salian desparejas (85 / 100 / 56) porque la cifra grande de
   seguidores forzaba el ancho de su columna y las otras dos se apretaban.

   min-width:0 permite que las columnas 1fr se achiquen de verdad; sin eso el
   ancho minimo del contenido gana siempre y el desborde es inevitable.
   -------------------------------------------------------------------------- */
.amn-hero__card { width: min(24rem, 100%); }

.amn-hero__stats { gap: 0.25rem; }

.amn-hero__stat {
    min-width: 0;
}

.amn-hero__stat span { font-size: 0.75rem; }

.amn-hero__stat b { font-size: 1rem; }

.amn-hero__stat--main b { font-size: 1.5rem; }

/* --------------------------------------------------------------------------
   44. Las tres cifras, sobre la misma linea de base
   La de seguidores va mas grande, y al centrarse cada columna por su cuenta
   el numero grande empujaba su etiqueta 9px mas abajo que las otras dos. Se
   veia como una columna desalineada, no como una jerarquia.

   align-items: baseline en la grilla alinea las columnas por la linea de
   base de su primer renglon, o sea por los numeros. Medido despues del
   cambio: las tres etiquetas quedan dentro de 1px, imperceptible.

   Es el recurso correcto en vez de igualar los tamaños: la cifra de
   seguidores tiene que pesar mas, ahi esta el mensaje de la ficha.
   -------------------------------------------------------------------------- */
.amn-hero__stats {
    align-items: baseline;
}

/* --------------------------------------------------------------------------
   45. Dos detalles de la referencia
   El dueño paso una captura de un perfil real y pidio tomarla SOLO como
   referencia, sin cambiar el estilo. Dos piezas que aportan reconocimiento
   sin tocar la paleta ni la forma:

   a) La barra superior con el usuario centrado. Es lo primero que se ve de
      un perfil y no estaba.
   b) Los rotulos debajo de las destacadas. Sin ellos los circulos se leen
      como decoracion; con ellos, como destacadas.

   Se suma tambien la linea de categoria debajo del nombre, en gris chico,
   que es como se muestran las cuentas de empresa.
   -------------------------------------------------------------------------- */
.amn-hero__card { padding-top: 0; }

.amn-hero__topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    margin: 0 -1.5rem 1.15rem;
    padding-inline: 1.5rem;
    border-bottom: 1px solid var(--amn-line);
    color: var(--amn-text-muted);
    font-size: 1rem;
}

.amn-hero__topbar b {
    text-align: center;
    color: var(--amn-text);
    font-size: 0.9375rem;
    font-weight: 650;
}

.amn-hero__topbar-icons {
    display: inline-flex;
    gap: 0.75rem;
}

.amn-hero__cat {
    display: block;
    color: var(--amn-text-muted);
    font-size: 0.8125rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

/* Destacadas con rotulo */
.amn-hero__highlights {
    align-items: flex-start;
    gap: 0.7rem;
}

.amn-hero__hlwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 44px;
}

.amn-hero__hlwrap small {
    font-size: 0.6875rem;
    color: var(--amn-text-muted);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   46. "Por que funciona" deja de ser tarjetas y pasa a cadena
   Eran cuatro cajas iguales de icono, titulo y texto: el contenedor perezoso
   que este documento y el piso de calidad rechazan como estructura de pagina.

   Pero el defecto de fondo no era el contenedor: era que la forma MENTIA
   sobre el contenido. Cuatro tarjetas dicen "cuatro cosas independientes", y
   estas cuatro son una cadena causal —el perfil vacio espanta, la interaccion
   temprana da alcance, el alcance convierte, y despues se sostiene solo—. La
   forma correcta es una secuencia, no una rejilla.

   Los numeros aca SI estan ganados: el piso de calidad los rechaza salvo que
   la secuencia lleve informacion que el lector necesite, y este orden es el
   argumento.
   -------------------------------------------------------------------------- */
.amn-cadena {
    display: grid;
    gap: 0;
    max-width: 46rem;
    margin-inline: auto;
}

.amn-paso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    position: relative;
    padding-bottom: 2.25rem;
}

.amn-paso:last-child { padding-bottom: 0; }

/* El hilo que une los pasos: es lo que convierte cuatro bloques en una
   cadena. Se corta en el ultimo. */
.amn-paso:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 3rem;
    bottom: 0.4rem;
    width: 1px;
    background: linear-gradient(180deg,
        var(--amn-violet) 0%,
        var(--amn-line) 85%,
        transparent 100%);
}

.amn-paso__n {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--amn-violet-bright);
    background: color-mix(in srgb, var(--amn-violet) 12%, var(--amn-ground));
    border: 1px solid color-mix(in srgb, var(--amn-violet) 50%, transparent);
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    position: relative;
    z-index: 1;
}

.amn-paso h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0.45rem 0 0.4rem;
    color: var(--amn-text);
}

.amn-paso p {
    margin: 0;
    color: var(--amn-text-soft);
    line-height: 1.6;
    max-width: 38rem;
}

@media (max-width: 575.98px) {
    .amn-paso { gap: 1rem; }
    .amn-paso:not(:last-child)::before { left: 17px; }
    .amn-paso__n { width: 34px; height: 34px; flex-basis: 34px; font-size: 0.875rem; }
    .amn-paso h3 { font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   47. "Tres niveles" deja de ser cuatro cajas y pasa a comparacion
   Eran cuatro tarjetas iguales: los tres niveles mas la garantia, todos con
   el mismo peso. Pero los tres niveles son LA DECISION de la pagina, y la
   garantia es una nota al pie de dos de ellos, no un cuarto nivel.

   Pasan a tres columnas comparables, que es la forma que pide una eleccion:
   se leen en paralelo, con el recomendado marcado. La garantia baja a una
   linea debajo.
   -------------------------------------------------------------------------- */
section.what-we-offer .row.gy-4 {
    --bs-gutter-x: 1rem;
}

section.what-we-offer .icon-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem 1.35rem;
    background: color-mix(in srgb, var(--amn-ground) 45%, transparent);
    border: 1px solid color-mix(in srgb, var(--amn-violet-bright) 30%, transparent);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* El del medio es el recomendado: se despega con filete pleno y halo. Es la
   unica jerarquia de la comparacion.

   Ojo con la estructura: .icon-box ES la columna, no un hijo de ella. El
   selector anterior buscaba .col-md-6 > .icon-box y no encontraba nada.
   Verificado en el DOM, no supuesto. */
section.what-we-offer .icon-box:nth-child(2) {
    background: color-mix(in srgb, var(--amn-ground) 72%, transparent);
    border-color: var(--amn-violet-bright);
    box-shadow: 0 0 24px color-mix(in srgb, var(--amn-violet) 25%, transparent);
}

section.what-we-offer .icon-box h4 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}

section.what-we-offer .icon-box p {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

/* Con tres niveles la fila va de a tres, no de a dos */
@media (min-width: 768px) {
    section.what-we-offer .row.gy-4 > .col-md-6 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* --------------------------------------------------------------------------
   48. El aire que dejaron las ilustraciones
   Al retirar las ilustraciones se colapso la columna de la imagen, pero quedo
   en pie el py-10 de la columna de texto: 192px arriba y 192px abajo. Ese
   padding existia para equilibrar una ilustracion alta al lado. Sin ella es
   aire puro.

   Medido en el navegador: seccion de 831px de alto con 181px de contenido, o
   sea 650px vacios, dos veces en el inicio. El arreglo de movil bajaba py-10
   solo por debajo de 768px, asi que en escritorio seguia intacto.

   Se acota con la misma condicion que colapsa la columna —que la imagen este
   vacia— para no tocar el py-10 de una seccion que si tenga ilustracion.
   -------------------------------------------------------------------------- */
section.image-with-text-section:has(img[src=""]) [class*="py-10"] {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* El container anidado repite el py-5 de la seccion que lo contiene. Con la
   ilustracion afuera, esa segunda capa ya no separa nada. */
section.image-with-text-section:has(img[src=""]) > .container.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   49. Los pasos, rehechos
   La plantilla del tema los dibujaba con aros punteados, numeros en italica y
   galones entre medio: el lenguaje del vendedor, no el de la casa. Ademas
   ponia un antetitulo, que en este sistema esta prohibido.

   El riesgo al rehacerlos era caer otra vez en tres tarjetas iguales, que es
   el patron que se acaba de eliminar del inicio. La diferencia es que estos
   SI son un proceso: van en orden y cada uno depende del anterior. Lo que
   convierte tres bloques en un proceso no es la caja, es EL CONECTOR.

   Se resuelve con el mismo filete que se desvanece que ya usan la barra de
   hechos y la cadena vertical: una linea que cruza los tres numeros y se
   apaga en las puntas. Sin tarjeta, sin fondo, sin sombra. El numero va en
   ficha biselada con aro de neon, igual que los iconos del resto del sitio.
   -------------------------------------------------------------------------- */
.amn-pasos {
    max-width: 62rem;
    margin-inline: auto;
}

.amn-pasos__titulo {
    text-align: center;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--amn-text);
}

.amn-pasos__bajada {
    text-align: center;
    color: var(--amn-text-soft);
    max-width: 34rem;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.amn-pasos__fila {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
}

/* El conector: cruza los tres numeros a la altura de su centro y se apaga
   antes de llegar a los bordes. Es lo que hace que se lean como secuencia y
   no como tres cosas sueltas. */
.amn-pasos__fila::before {
    content: "";
    position: absolute;
    top: 27px;
    /* Con tres columnas iguales los numeros caen en 1/6 y 5/6 del ancho, asi
       que la linea arranca y termina EXACTAMENTE bajo ellos y su fondo opaco
       la tapa. Con 12% sobresalia 9px por cada punta. */
    left: 16.667%;
    right: 16.667%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--amn-line-strong) 12%,
        var(--amn-violet) 50%,
        var(--amn-line-strong) 88%,
        transparent 100%);
}

.amn-pasos__paso {
    position: relative;
    text-align: center;
}

.amn-pasos__n {
    width: 54px;
    height: 54px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--amn-violet-bright);
    /* fondo opaco para que el conector no se vea por detras del numero */
    background: var(--amn-ground);
    border: 1px solid color-mix(in srgb, var(--amn-violet) 55%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--amn-violet) 28%, transparent);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    position: relative;
    z-index: 1;
}

.amn-pasos__paso h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 0.5rem;
    color: var(--amn-text);
}

.amn-pasos__paso p {
    margin: 0 auto;
    max-width: 20rem;
    color: var(--amn-text-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* En celular la fila se apila y el conector gira: mismo recurso, rotado, que
   es como el sistema ya resuelve el paso a movil en la barra de hechos. */
@media (max-width: 767.98px) {
    .amn-pasos__fila {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .amn-pasos__fila::before {
        top: 27px;
        bottom: 27px;
        left: 50%;
        right: auto;
        width: 1px;
        height: auto;
        transform: translateX(-0.5px);
        background: linear-gradient(180deg,
            var(--amn-violet) 0%,
            var(--amn-line-strong) 60%,
            transparent 100%);
    }
    .amn-pasos__bajada { margin-bottom: 2.25rem; }
}

/* --------------------------------------------------------------------------
   50. El encabezado del catalogo
   La seccion arrancaba sin decir nada: el titulo venia desactivado. Es el
   punto donde el visitante elige que compra, y no habia nada que lo
   anunciara.

   La plantilla ya trae la estructura correcta —un h2 y una bajada— pero le
   pone al h2 clases de boton, asi que se dibuja como pastilla violeta. Esa
   pastilla es el antetitulo que se retiro de todo el sitio, y el piso de
   calidad lo prohibe sin excepcion de brief.

   No se edita la vista: se le devuelve al h2 su condicion de titulo desde la
   hoja de marca, que sobrevive a una actualizacion del script. La bajada baja
   de peso para dejar de competir con el.
   -------------------------------------------------------------------------- */
section.package-list h2.btn {
    display: block;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0.75rem !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--amn-text) !important;
    text-transform: none;
    pointer-events: none;
}

/* La bajada venia en text-3xl y peso 700: dos titulos peleandose. Pasa a
   texto de introduccion. */
/* Este div era la bajada, y por eso tenia max-width de 34rem. Ahora es el
   CONTENEDOR de todo el encabezado, asi que ese tope apretaba el titulo a
   544px y lo partia en dos renglones sin necesidad. La medida de lectura
   pasa a .amn-cat p, que es donde corresponde. */
section.package-list h2.btn + div {
    font-weight: 400 !important;
    letter-spacing: normal !important;
    color: var(--amn-text-soft);
    margin: 0 auto 0.5rem !important;
}

/* El encabezado necesita aire respecto del selector de plataforma que sigue */
section.package-list > .container > .row:first-child {
    margin-bottom: 1.5rem;
}

/* La plantilla le da al encabezado media pantalla (col-xl-6), y un titulo de
   40px ahi se parte en dos renglones sin necesidad. Se ensancha para que
   respire y corte solo donde quiera. */
@media (min-width: 1200px) {
    section.package-list > .container > .row:first-child > [class*="col-"] {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }
}

/* --------------------------------------------------------------------------
   51. La capsula del encabezado del catalogo
   DECISION DEL DUEÑO, tomada dos veces y por encima de una regla del piso de
   calidad, que prohibe el antetitulo sin excepcion de brief. Queda escrito
   como lo que es: una excepcion decidida por el dueño en su sitio, no una
   regla del sistema. NO SE REPLICA en otras secciones.

   Se ejecuta de la mejor forma posible dentro de esa decision: la capsula
   CARGA INFORMACION en vez de ser una etiqueta. Dice que plataformas hay,
   justo en el punto donde el visitante elige, que es la pregunta que tiene en
   la cabeza en ese momento. Un antetitulo que informa es mejor que uno que
   nombra la seccion.

   Estructura: la vista imprime un h2 y una bajada. La capsula tiene que ir
   ARRIBA del titulo, asi que el h2 vacio se oculta y todo el encabezado viaja
   en el campo de la bajada, con su propio h2 adentro. htmLawed deja pasar la
   marcacion.
   -------------------------------------------------------------------------- */
/* :empty no sirve: la plantilla deja saltos de linea dentro del h2, asi que
   nunca esta tecnicamente vacio. Se oculta siempre, porque el encabezado
   entero vive ahora en el campo de la bajada. Si algun dia se vuelve a usar
   el campo titulo desde el panel, hay que retirar esta regla. */
section.package-list > .container > .row:first-child h2.btn {
    display: none;
}

.amn-cat__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    margin-bottom: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--amn-violet) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--amn-violet) 10%, var(--amn-plane-1));
    color: var(--amn-violet-bright);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.amn-cat__pill i {
    font-size: 0.875rem;
    line-height: 1;
}

.amn-cat h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--amn-text);
    margin: 0 0 0.75rem;
}

.amn-cat p {
    font-size: clamp(1rem, 1.6vw, 1.175rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--amn-text-soft);
    max-width: 34rem;
    margin: 0 auto;
}

/* La bajada dejaba de heredar el peso 700 y el text-3xl de la plantilla */
section.package-list h2.btn + div {
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

/* --------------------------------------------------------------------------
   52. Las dos columnas del arranque, alineadas arriba
   Estaban centradas, y en el papel eso es simetrico: la ficha sobresalia
   exactamente 114px arriba y 114px abajo del texto. Pero centrado no se LEE
   como alineado cuando los dos bloques miden distinto: lo que el ojo compara
   es donde empieza cada uno, y ahi habia 114px de diferencia.

   Se alinean por arriba. Y para que la ficha no cuelgue 229px por debajo del
   texto, la grilla de publicaciones baja de dos filas a una: es lo que sobra
   de la maqueta, no lo que la hace reconocible.
   -------------------------------------------------------------------------- */
.amn-hero {
    align-items: start;
}

.amn-hero__visual {
    min-height: 0;
    align-items: flex-start;
}

/* Una sola fila de publicaciones: tres mosaicos alcanzan para que se lea como
   grilla de perfil. */
.amn-hero__grid .amn-hero__post:nth-child(n + 4) {
    display: none;
}

/* --------------------------------------------------------------------------
   53. "Para quien es" pasa de parrafo a fichas
   Decia lo mismo en prosa: "si tenes un local, si vendes por mensaje, si sos
   musico o tatuador...". Un parrafo se lee y se olvida; una nube de fichas se
   ESCANEA, y el visitante encuentra lo suyo en un segundo. Ese es todo el
   trabajo de la seccion: que cada uno se reconozca.

   Las fichas no son enlaces y no llevan hover: un elemento que reacciona al
   mouse promete que se puede hacer clic. Son etiquetas, y se comportan como
   etiquetas.

   Los iconos salen de la biblioteca del tema, no son emoji: el piso de
   calidad rechaza los glifos unicode como sustituto de un sistema de iconos
   porque cada dispositivo los dibuja distinto.
   -------------------------------------------------------------------------- */
.amn-nichos {
    max-width: 62rem;
    margin-inline: auto;
    text-align: center;
}

.amn-nichos h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--amn-text);
    margin: 0 0 0.75rem;
}

.amn-nichos h2 em {
    font-style: normal;
    color: var(--amn-violet);
}

.amn-nichos > p {
    font-size: clamp(1rem, 1.6vw, 1.175rem);
    line-height: 1.6;
    color: var(--amn-text-soft);
    max-width: 34rem;
    margin: 0 auto 2.5rem;
}

.amn-nichos__nube {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.amn-nichos__ficha {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--amn-line);
    border-radius: 999px;
    background: var(--amn-plane-1);
    color: var(--amn-text-soft);
    font-size: 0.9375rem;
    line-height: 1.3;
    white-space: nowrap;
}

.amn-nichos__ficha i {
    color: var(--amn-violet-bright);
    font-size: 1rem;
    line-height: 1;
}

/* El cierre en prosa se retiro el 06/09/2026. Decia por tercera vez lo que ya
   dicen el titulo ("cualquier cuenta") y la bajada ("no importa a que te
   dediques"), y una nube de fichas termina sola: no necesita un parrafo que
   la disculpe por no ser completa.

   Esta seccion y el catalogo que sigue son un solo movimiento: primero
   "sirve para vos", despues "elegi que querias". Separarlos con el mismo
   aire que se usa entre bloques sin relacion los desconecta, y en el medio
   quedaba una franja negra de 112px (64 de piso aca + 48 de techo alla).
   Se le corta el piso a esta seccion; el techo del catalogo queda como
   unica separacion.

   Al cerrar el hueco de abajo quedo a la vista el de arriba: 128px contra
   64px. La seccion se veia colgada del bloque anterior en vez de apoyada
   sobre el catalogo. El techo baja a 32px, que sumados a los 64 del piso
   de la seccion anterior dan 96 arriba contra 64 abajo. La jerarquia se
   mantiene -- entre movimientos distintos hay mas aire que adentro de uno
   -- pero deja de ser una franja negra.

   :has() elige la seccion por lo que contiene, sin tocar la vista del tema
   ni las otras secciones de contenido opcional. Si un navegador viejo no lo
   soporta hereda el espaciado anterior: se ve amplio, no roto. */
section.more-content:has(.amn-nichos) {
    padding-top: 2rem !important;
    /* 18px, no 0: la seccion trae overflow hidden del tema y el pico de la
       franja mide 17px. Con este piso el pico entra en la caja de relleno y
       no queda cortado. La separacion real con el catalogo la sigue dando el
       techo de 48px de la seccion de paquetes. */
    padding-bottom: 18px !important;
}

@media (max-width: 767.98px) {
    /* 15px, no 8: el pico de la franja mide 14 en movil y la seccion recorta
       lo que sobresalga de su caja de relleno. */
    section.more-content:has(.amn-nichos) { padding-bottom: 15px !important; }
}

@media (max-width: 575.98px) {
    .amn-nichos__nube { gap: 0.45rem; }
    .amn-nichos__ficha { padding: 0.4rem 0.8rem; font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   54. El badge verde del cierre
   La seccion de cierre traia su etiqueta en #10b981, el mismo verde de las
   estrellas falsas que se retiraron el 06/09. Este sistema reserva el verde
   para el estado "entregado": usarlo de adorno le quita significado justo
   donde mas hace falta, que es el seguimiento del pedido.
   -------------------------------------------------------------------------- */
section.growing-brands-section .badge {
    background-color: var(--amn-violet) !important;
    color: var(--amn-ground) !important;
    font-weight: 650;
}

/* --------------------------------------------------------------------------
   55. La franja de bajada
   El visitante termina de leer "funciona igual para cualquier cuenta" y tiene
   que entender, sin pensarlo, que abajo empieza lo que se compra. Esa costura
   antes era aire negro: no decia nada, y el aire que no dice nada se lee como
   final de pagina. La franja convierte el hueco en un cartel.

   POR QUE VIOLETA PLENO. Es el unico lugar del sitio con un campo de color
   macizo. El sistema declara el violeta como color de accion, y esta franja
   es exactamente eso: una flecha hacia la accion. Texto en negro absoluto
   sobre el violeta da 5.32:1, la misma relacion probada del boton primario.
   Violeta con texto blanco daria 3.9:1 y no pasaria.

   LAS RAYAS. Lineas CLARAS cada 4px, no oscuras. Es la textura de tubo de
   rayos catodicos que define la rama tecno del Y2K, y al aclarar apenas el
   fondo el contraste con el texto negro sube en vez de bajar. Una textura
   oscura habria hecho lo contrario.

   LA CHAKRA ITALICA BAJA DE TITULO, UNA VEZ. El sistema la reserva para h1 y
   h2 porque en cuerpo cansa la lectura. Aca no hay lectura: hay dos palabras
   que se miran de reojo mientras pasan. Y la italica de esa fuente es
   literalmente velocidad, que es lo que hace una cinta que corre. La
   excepcion se toma a proposito y no se extiende a ningun otro lado.

   EL PICO. La cinta sola diria "algo pasa aca"; el pico dice "abajo". Es un
   triangulo macizo del mismo violeta colgando del centro del borde inferior,
   apuntando al catalogo. La seccion que lo contiene lleva overflow hidden del
   tema, asi que se le deja 18px de piso para que el pico entre en la caja de
   relleno y no quede cortado.

   SIN JAVASCRIPT la cinta no corre: queda un grupo centrado, que sigue siendo
   una franja legible que apunta para abajo. Nada del mensaje depende del
   movimiento. Eso es lo contrario del contador, donde parar era borrar el
   punto.
   -------------------------------------------------------------------------- */
.amn-franja {
    position: relative;
    margin: 3rem calc(50% - 50vw) 0;
}

.amn-franja__caja {
    display: flex;
    /* El centrado va ACA y no en la cinta. Una cinta de 3572px dentro de una
       caja de 1366 ya mide lo que mide: centrar adentro de ella misma no mueve
       nada, y quedaba pegada a la izquierda con un corte a la derecha que se
       lee como error. Un contenedor flex con el hijo mas ancho que el desborda
       parejo por los dos lados: el recorte queda simetrico y parece una cinta,
       no un bloque mal cortado. Con la cinta corriendo tampoco molesta, porque
       el dibujo se repite cada media cinta: arrancar corrido no rompe la
       costura. */
    justify-content: center;
    overflow: hidden;
    background: var(--amn-violet);
    background-image: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0 1px,
        rgba(255, 255, 255, 0) 1px 4px
    );
}

.amn-franja__cinta {
    display: flex;
    flex: 0 0 auto;
    width: max-content;
    padding-block: 0.72rem;
}

/* La clase la pone amnesia.js recien cuando termino de clonar los grupos.
   Asi no se ve un salto entre el estado centrado y el estado que corre. */
.amn-franja--corre .amn-franja__cinta {
    animation: amn-franja-corre var(--amn-franja-dur, 30s) linear infinite;
}

.amn-franja__grupo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.amn-franja__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 2.25rem;
    font-family: "Chakra Petch", var(--bs-font-sans-serif);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(0.9rem, 1.5vw, 1.0625rem);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--amn-ground);
    white-space: nowrap;
}

.amn-franja__item i {
    font-size: 1.05em;
    line-height: 1;
}

/* El salto es de media cinta, y amnesia.js arma las dos mitades identicas:
   la costura cae en un punto donde el dibujo se repite igual. */
@keyframes amn-franja-corre {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.amn-franja__pico {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 46px;
    height: 17px;
    margin-left: -23px;
    background: var(--amn-violet);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (max-width: 575.98px) {
    .amn-franja { margin-top: 2.25rem; }
    .amn-franja__item { padding-right: 1.6rem; gap: 0.4rem; }
    .amn-franja__pico { width: 38px; height: 14px; margin-left: -19px; }
}

/* --------------------------------------------------------------------------
   56. La pantalla de la transferencia
   Esta pantalla es modo tarea, no modo folleto. El cliente ya decidio comprar:
   lo unico que falta es que haga una transferencia SIN EQUIVOCARSE. Todo lo
   que se ve esta ordenado por ese criterio.

   EL IMPORTE ES LO MAS GRANDE DE LA PANTALLA porque es el dato que hay que
   tipear en el home banking. Va en cifras tabulares: en una tienda donde el
   numero es el producto, que los digitos no bailen no es cosmetico.

   EL TIPO DE CAMBIO SE MUESTRA. Los precios del catalogo estan en dolares y
   aca aparece un numero en pesos: si no se explica de donde sale, el cliente
   cree que le estan cobrando de mas y abandona. "US$ 5,00 al cambio de $1.610"
   convierte una sorpresa en una cuenta que se puede verificar.

   CADA DATO EN SU PROPIA LINEA, con boton de copiar en los que se tipean. Un
   alias mal copiado manda la plata a otra persona, y no vuelve.

   EL CODIGO DE CONCEPTO ES LO UNICO que ata el dinero que entra al banco con
   el pedido que espera en el panel. Por eso va destacado y por eso la pantalla
   avisa que se saque una captura: no se vuelve a mostrar.
   -------------------------------------------------------------------------- */
.amn-transf {
    max-width: 34rem;
    margin-inline: auto;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--amn-line);
    background: var(--amn-plane-1);
    text-align: center;
}

.amn-transf__paso {
    margin: 0 0 1.25rem;
    color: var(--amn-text);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
}

.amn-transf__importe {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    color: var(--amn-violet-bright);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.amn-transf__moneda {
    font-size: 1.5rem;
    font-weight: 600;
}

.amn-transf__cifra {
    font-size: clamp(2.5rem, 9vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* La cuenta a la vista: de donde sale ese numero */
.amn-transf__cambio {
    margin: 0.5rem 0 1.5rem;
    color: var(--amn-text-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.amn-transf__datos {
    border-top: 1px solid var(--amn-line);
    text-align: left;
}

.amn-transf__fila {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--amn-line);
}

.amn-transf__etiqueta {
    flex: 0 0 5.5rem;
    color: var(--amn-text-muted);
    font-size: 0.8125rem;
}

.amn-transf__valor {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--amn-text);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.amn-transf__copiar {
    flex: 0 0 auto;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--amn-line-strong);
    border-radius: 2px;
    background: transparent;
    color: var(--amn-text-soft);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.amn-transf__copiar:hover {
    border-color: var(--amn-violet);
    color: var(--amn-violet-bright);
}

/* El acuse de copiado se lee en el boton mismo: no hace falta un cartel */
.amn-transf__copiar[data-amn-copiado] {
    border-color: var(--amn-violet);
    color: var(--amn-violet-bright);
}

.amn-transf__pasos {
    margin: 1.5rem 0 0;
    padding-left: 1.15rem;
    text-align: left;
    color: var(--amn-text-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.amn-transf__pasos li + li {
    margin-top: 0.5rem;
}

.amn-transf__pasos code {
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--amn-line-strong);
    border-radius: 2px;
    background: var(--amn-plane-2);
    color: var(--amn-violet-bright);
    font-size: 0.9em;
}

.amn-transf__aviso {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--amn-line);
    color: var(--amn-text-muted);
    font-size: 0.8125rem;
}

.amn-transf__nota {
    margin: 0.5rem 0 0;
    color: var(--amn-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .amn-transf { padding: 1.25rem 1rem; }
    .amn-transf__etiqueta { flex-basis: 4.25rem; }
    .amn-transf__fila { gap: 0.5rem; }
}