:root { color-scheme: light; }
        body { background: #FFFFFF; color: #334155; font-family: "Open Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        ::selection { background: #dd2338; color: #fff; }
        .font-display { font-family: "Poppins", sans-serif; font-weight: 700; letter-spacing: -0.02em; }

        .tech-grid {
            background-image:
                linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
            background-size: 56px 56px;
        }

        /* ===== Fondo fotográfico muy tenue para una sección =====
           Se aplica agregando la clase bg-foto a la section. La opacidad se
           regula con --bg-op (0.08 = apenas perceptible, 0.20 = bien visible).
           El contenido de adentro tiene que llevar "relative z-10". */
        .bg-foto { --bg-op: 0.08; }
        .bg-foto::before {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: url("../images/slider-1-2.jpg") center / cover no-repeat;
            opacity: var(--bg-op);
        }
        /* Difumina los bordes para que la foto no corte en seco contra el blanco */
        .bg-foto::after {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, #fff 100%);
        }

        .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
        .reveal.in { opacity: 1; transform: none; }
        .reveal-d1 { transition-delay: .1s; }
        .reveal-d2 { transition-delay: .2s; }
        .reveal-d3 { transition-delay: .3s; }
        .reveal-d4 { transition-delay: .4s; }
        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; transition: none; }
            .marquee-track { animation: none !important; }
            html { scroll-behavior: auto; }
        }

        .glow-red { box-shadow: 0 24px 60px -22px rgba(221,35,56,0.4); }
        .text-glow { text-shadow: 0 10px 40px rgba(221,35,56,0.35); }

        .glass { background: rgba(255,255,255,0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid #E5E8EF; box-shadow: 0 10px 40px -20px rgba(15,23,42,0.25); }

        .btn-primary {
            display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
            background: #dd2338; color: #fff; font-weight: 700; letter-spacing: .06em;
            padding: 1rem 2.25rem; border-radius: 9999px; cursor: pointer;
            transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
            box-shadow: 0 10px 30px -8px rgba(221,35,56,0.5);
        }
        .btn-primary:hover { background: #c11e31; box-shadow: 0 14px 40px -8px rgba(221,35,56,0.6); transform: translateY(-2px); }
        .btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }
        .btn-ghost {
            display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
            border: 1.5px solid #CBD2DE; color: #0F172A; font-weight: 600; letter-spacing: .05em;
            padding: 1rem 2.25rem; border-radius: 9999px; cursor: pointer;
            transition: border-color .2s ease, background-color .2s ease;
        }
        .btn-ghost:hover { border-color: #dd2338; background: rgba(221,35,56,0.06); }

        .nav-link { position: relative; transition: color .2s ease; }
        .nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: #dd2338; transition: width .25s ease; }
        .nav-link:hover, .nav-link.active { color: #0F172A; }
        .nav-link:hover::after, .nav-link.active::after { width: 100%; }

        .card {
            background: #FFFFFF; border: 1px solid #E5E8EF; border-radius: 1.5rem;
            box-shadow: 0 1px 3px rgba(15,23,42,0.04);
            transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
        }
        .card:hover { border-color: rgba(221,35,56,0.45); box-shadow: 0 26px 60px -26px rgba(221,35,56,0.35); transform: translateY(-4px); }

        /* ============ AGENDA · TIMELINE POR FRANJA HORARIA ============ */
        /* Color de cada sala: se define una sola vez acá y se hereda vía data-sala */
        [data-sala="auditorio"] { --sala: #dd2338; --sala-soft: rgba(221,35,56,0.08);  --sala-line: rgba(221,35,56,0.38); }
        [data-sala="posgrado"]  { --sala: #000;    --sala-soft: rgba(15,23,42,0.07);   --sala-line: rgba(15,23,42,0.35); }
        [data-sala="patio"]     { --sala: #0F766E; --sala-soft: rgba(15,118,110,0.08); --sala-line: rgba(15,118,110,0.38); }
        [data-sala="general"]   { --sala: #64748B; --sala-soft: rgba(100,116,139,0.08); --sala-line: rgba(100,116,139,0.38); }

        /* --- Banda de exposición permanente (Patio Central) --- */
        .expo-band {
            display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
            background: var(--sala-soft); border: 1px solid rgba(15,118,110,0.25);
            border-radius: 1.25rem; padding: 1.25rem 1.5rem; margin-bottom: 2rem;
        }
        .expo-band .expo-icon {
            width: 3rem; height: 3rem; border-radius: 9999px; flex-shrink: 0;
            background: var(--sala); color: #fff; display: flex; align-items: center; justify-content: center;
        }

        /* --- Filtro por sala --- */
        .sala-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; }
        .sala-chip {
            display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
            padding: .5rem 1rem; border-radius: 9999px; border: 1px solid #E5E8EF; background: #fff;
            font-size: .85rem; font-weight: 600; color: #475569;
            transition: border-color .2s ease, color .2s ease, background-color .2s ease;
        }
        .sala-chip .swatch { width: 9px; height: 9px; border-radius: 9999px; background: var(--sala, #CBD2DE); flex-shrink: 0; }
        .sala-chip:hover { border-color: var(--sala, #94A3B8); color: #0F172A; }
        .sala-chip:focus-visible { outline: 2px solid #dd2338; outline-offset: 2px; }
        .sala-chip[aria-pressed="true"] { background: var(--sala, #0F172A); border-color: var(--sala, #0F172A); color: #fff; }
        .sala-chip[aria-pressed="true"] .swatch { background: #fff; }

        /* --- Timeline --- */
        .ag-timeline { list-style: none; margin: 0; padding: 0; }
        .ag-slot { display: grid; grid-template-columns: 5.5rem 1.5rem 1fr; gap: 0 1rem; padding-bottom: 2rem; }
        .ag-slot.is-hidden { display: none; }
        .ag-hour { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.4; color: #0F172A; letter-spacing: -0.02em; text-align: right; }
        .ag-hour span { display: block; font-family: "Open Sans", sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .14em; color: #94A3B8; }

        /* Riel vertical con el punto de cada franja */
        .ag-rail { position: relative; }
        .ag-rail::before { content: ""; position: absolute; left: 50%; top: .5rem; bottom: -2rem; width: 2px; background: #E5E8EF; transform: translateX(-50%); }
        .ag-slot:last-child .ag-rail::before { display: none; }
        .ag-rail::after {
            content: ""; position: absolute; left: 50%; top: .5rem; width: 12px; height: 12px;
            border-radius: 9999px; background: #fff; border: 3px solid #dd2338; transform: translateX(-50%);
        }

        /* Tarjetas: 1, 2 o 3 por franja según cuántas salas haya en ese horario */
        /* Dos columnas fijas (Auditorio | Posgrado) para que las tarjetas queden
           alineadas aunque una franja tenga una sola actividad. */
        .ag-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
        @media (min-width: 640px) { .ag-cards { grid-template-columns: 1fr 1fr; } }
        .ag-card {
            position: relative; overflow: hidden; background: #fff; border: 1px solid #E5E8EF;
            border-radius: 1rem; height: 100%;
            transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        .ag-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sala); }
        .ag-card:hover { transform: translateY(-4px); border-color: var(--sala); box-shadow: 0 22px 45px -22px rgba(15,23,42,0.45); }
        .ag-card.is-hidden { display: none; }
        .ag-card-body { padding: 1.25rem 1.25rem 1.25rem 1.75rem; }
        .ag-card img { width: 100%; height: 8.5rem; object-fit: cover; display: block; }
        .ag-sala {
            display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
            font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sala);
        }
        .ag-sala::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; background: var(--sala); }
        /* h3 = el tema de la charla; suele ser largo, por eso va más chico que un título normal */
        .ag-card h3 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.4; color: #0F172A; letter-spacing: -0.01em; }
        .ag-card p { margin-top: .5rem; font-size: .92rem; line-height: 1.6; color: #475569; }
        /* Pie de la tarjeta: empresa + disertante, separados del tema por una línea */
        .ag-meta {
            display: flex; align-items: center; gap: .65rem;
            margin-top: .875rem; padding-top: .875rem; border-top: 1px solid #E5E8EF;
        }
        .ag-meta svg { width: 1.15rem; height: 1.15rem; color: var(--sala); flex-shrink: 0; }

        /* Insignia para las actividades que abarcan más de una franja horaria */
        .ag-card .ag-rango {
            display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem;
            padding: .25rem .65rem; border-radius: 9999px;
            background: var(--sala-soft); color: var(--sala);
            font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        }
        .ag-card .ag-rango svg { width: .85rem; height: .85rem; flex-shrink: 0; }
        .ag-card .ag-empresa { margin: 0; font-family: "Poppins", sans-serif; font-weight: 700; font-size: .95rem; line-height: 1.25; color: #0F172A; }
        .ag-card .ag-disertante { margin: .1rem 0 0; font-size: .82rem; line-height: 1.3; color: #475569; }
        .ag-card .ag-pendiente { color: #94A3B8; font-style: italic; }

        /* Plenarias y avisos ocupan el ancho completo y llevan título más grande */
        /* Franja donde una actividad de la franja anterior sigue en curso.
           Va con borde punteado y apagada: ocupa el lugar sin competir con
           las tarjetas reales ni hacer creer que empieza algo nuevo. */
        .ag-card--continua {
            background: transparent; border: 1.5px dashed var(--sala-line); box-shadow: none;
        }
        .ag-card--continua::before { opacity: .3; }
        .ag-card--continua:hover { transform: none; box-shadow: none; border-color: var(--sala-line); }
        .ag-card--continua .ag-sala { opacity: .65; }
        .ag-card--continua h3 { color: #64748B; font-weight: 600; font-size: .95rem; }
        .ag-card--continua p { color: #94A3B8; }

        .ag-card--full { grid-column: 1 / -1; }
        .ag-card--full h3 { font-size: 1.2rem; line-height: 1.3; }

        /* Cortes (Break / Almuerzo): en negro, igual que en la grilla original */
        .ag-card--break { background: #0F172A; border-color: #0F172A; }
        .ag-card--break::before { display: none; }
        .ag-card--break:hover { transform: none; box-shadow: none; border-color: #0F172A; }
        .ag-card--break .ag-card-body { padding: .9rem 1.25rem; text-align: center; }
        .ag-card--break h3 { color: #fff; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; }
        .ag-card--break p { color: rgba(255,255,255,0.72); font-size: .85rem; margin-top: .35rem; }
        .ag-card--break .ag-sala { color: rgba(255,255,255,0.55); margin-bottom: .2rem; }
        .ag-card--break .ag-sala::before { background: rgba(255,255,255,0.55); }
        .ag-empty { text-align: center; color: #94A3B8; font-size: .95rem; padding: 2rem 0; }
        .ag-empty.is-hidden { display: none; }

        @media (max-width: 900px) {
            .ag-slot { grid-template-columns: 1fr; gap: .75rem; padding-bottom: 1.75rem; }
            .ag-rail { display: none; }
            .ag-hour {
                display: inline-flex; align-items: baseline; gap: .5rem; text-align: left; font-size: 1.25rem;
                background: #F1F3F7; border: 1px solid #E5E8EF; border-radius: 9999px; padding: .3rem 1rem;
                justify-self: start;
            }
            .ag-hour span { display: inline; font-size: .65rem; }
        }

        .snap-carousel { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; }
        .snap-carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
        .snap-carousel.dragging * { pointer-events: none; }
        .snap-carousel::-webkit-scrollbar { display: none; }
        .snap-carousel > article { scroll-snap-align: start; }

        /* Testimonios */
        .testi-avatar { width: 3rem; height: 3rem; border-radius: 9999px; background: rgba(221,35,56,0.1); border: 1px solid rgba(221,35,56,0.25); color: #dd2338; font-family: "Bebas Neue", sans-serif; font-size: 1.25rem; letter-spacing: .03em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .t-dot { width: 8px; height: 8px; border-radius: 9999px; background: #CBD2DE; cursor: pointer; transition: background-color .25s ease, width .25s ease; }
        .t-dot:hover { background: #94A3B8; }
        .t-dot.active { background: #dd2338; width: 26px; }
        .t-dot:focus-visible { outline: 2px solid #dd2338; outline-offset: 3px; }

        .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
        .marquee-track { display: flex; width: max-content; gap: 1.5rem; animation: marquee 32s linear infinite; }
        .marquee:hover .marquee-track { animation-play-state: paused; }
        @keyframes marquee { to { transform: translateX(-50%); } }

        .gallery-img { border-radius: 1rem; overflow: hidden; }
        .gallery-img img { transition: transform .5s ease; }
        .gallery-img:hover img { transform: scale(1.05); }

        /* Inputs claros (form sobre fondo blanco) */
        .field {
            width: 100%; background: #fff; border: 1.5px solid #E5E8EF;
            border-radius: .875rem; padding: 1rem 1.25rem; color: #0F172A;
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .field::placeholder { color: #94A3B8; }
        .field:focus { outline: none; border-color: #dd2338; box-shadow: 0 0 0 4px rgba(221,35,56,0.1); }
        select.field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.75rem; cursor: pointer; }

        /* ===== Aviso "próximamente" del formulario (EN DESUSO) =====
           Las inscripciones están ABIERTAS, así que este cartel no se muestra.
           Para volver a cerrarlas hacen falta dos cosas:
             1) agregarle el atributo disabled al fieldset.form-bloqueado
             2) poner de nuevo el div .form-aviso arriba de ese fieldset
           Los estilos quedan acá listos para reutilizar. */
        .form-aviso {
            display: flex; align-items: flex-start; gap: 1rem;
            background: rgba(180,83,9,0.07); border: 1px solid rgba(180,83,9,0.28);
            border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 2rem;
        }
        .form-aviso .aviso-icon {
            width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0;
            background: #B45309; color: #fff; display: flex; align-items: center; justify-content: center;
        }
        .form-aviso h3 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.05rem; color: #7C2D12; letter-spacing: -0.01em; }
        .form-aviso p { font-size: .92rem; line-height: 1.6; color: #92400E; margin-top: .25rem; }

        /* Campos atenuados mientras el formulario está cerrado */
        .form-bloqueado { border: 0; padding: 0; margin: 0; min-width: 0; }
        .form-bloqueado[disabled] { opacity: .5; }
        .form-bloqueado[disabled] .field,
        .form-bloqueado[disabled] .btn-primary { cursor: not-allowed; }
        .form-bloqueado[disabled] .btn-primary { background: #94A3B8; box-shadow: none; }

        /* ===== Loading de envío =====
           El POST lo hace el navegador (recarga), así que el overlay tapa el
           formulario hasta que vuelve la página con el mensaje de éxito/error. */
        #form { position: relative; }
        .form-loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; border-radius: 1.5rem; background: rgba(255,255,255,.86); backdrop-filter: blur(2px); }
        .form-loading span { font-size: .95rem; font-weight: 600; color: #0F172A; }
        .form-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(221,35,56,.25); border-top-color: #DD2338; animation: form-spin .8s linear infinite; }
        @keyframes form-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) { .form-spinner { animation-duration: 2.4s; } }

        /* ===== Plano del predio con puntos numerados =====
           La posición de cada pin se define en el HTML con --x e --y (porcentajes
           sobre la imagen). Para mover un punto, cambiá esos dos valores y listo. */
        /* La proporción 4/3 es fija en todas las pantallas y coincide con la de la
           imagen. Así el recuadro nunca recorta y un pin en --x:30% cae siempre
           sobre el mismo punto del plano, sea celular o escritorio. */
        .plano {
            position: relative; aspect-ratio: 4 / 3; overflow: hidden;
            background: #F1F3F7; border: 1px solid #E5E8EF; border-radius: 1.5rem;
        }
        .plano img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
        .plano-falta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; color: #94A3B8; font-size: .9rem; }

        .plano-pin {
            position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
            width: 2.25rem; height: 2.25rem; border-radius: 9999px; cursor: pointer;
            background: #dd2338; color: #fff; border: 3px solid #fff;
            display: flex; align-items: center; justify-content: center;
            font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1rem; line-height: 1;
            box-shadow: 0 8px 20px -6px rgba(15,23,42,0.55);
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .plano-pin:focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }
        .plano-pin:hover, .plano-pin.activo {
            transform: translate(-50%, -50%) scale(1.22); z-index: 2;
            box-shadow: 0 0 0 7px rgba(221,35,56,0.25), 0 8px 20px -6px rgba(15,23,42,0.55);
        }

        .plano-ref { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
        .plano-ref li {
            display: flex; align-items: center; gap: .75rem; cursor: pointer;
            padding: .6rem .85rem; border: 1px solid #E5E8EF; border-radius: .75rem; background: #fff;
            font-weight: 600; color: #475569;
            transition: border-color .2s ease, background-color .2s ease, color .2s ease;
        }
        .plano-ref li:hover, .plano-ref li.activo { border-color: #dd2338; background: rgba(221,35,56,0.05); color: #0F172A; }
        .plano-ref .num {
            width: 1.75rem; height: 1.75rem; border-radius: 9999px; flex-shrink: 0;
            background: #dd2338; color: #fff; font-family: "Poppins", sans-serif; font-weight: 700; font-size: .85rem;
            display: flex; align-items: center; justify-content: center;
        }

        /* ===== Casillas de selección múltiple (conferencias y workshops) ===== */
        .chk-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
        @media (min-width: 640px) { .chk-grid { grid-template-columns: 1fr 1fr; } }

        .chk-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
        /* Ojo con el ">": tiene que alcanzar SOLO al span contenedor, no al
           .chk-hora que va anidado adentro. Con un selector de descendencia
           (".chk-opt span") se dibujaban dos casillas por opción. */
        .chk-opt > span {
            display: flex; align-items: center; gap: .65rem; cursor: pointer;
            padding: .7rem .9rem; border-radius: .75rem; border: 1.5px solid #E5E8EF; background: #fff;
            font-size: .9rem; font-weight: 600; color: #475569;
            transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
        }
        /* la casilla dibujada con CSS, sin imágenes */
        .chk-opt > span::before {
            content: ""; width: 1.15rem; height: 1.15rem; border-radius: .35rem; flex-shrink: 0;
            border: 1.5px solid #CBD2DE; background: #fff;
            background-repeat: no-repeat; background-position: center; background-size: .75rem;
            transition: border-color .2s ease, background-color .2s ease;
        }
        .chk-opt > span:hover { border-color: rgba(221,35,56,0.45); }
        .chk-opt input:checked + span { border-color: #dd2338; background: rgba(221,35,56,0.06); color: #0F172A; }
        .chk-opt input:checked + span::before {
            border-color: #dd2338; background-color: #dd2338;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
        }
        .chk-opt input:focus-visible + span { outline: 2px solid #dd2338; outline-offset: 2px; }
        .chk-hora { font-family: "Poppins", sans-serif; font-weight: 700; color: #0F172A; }

        /* Bloqueada: ya hay otra actividad elegida en ese mismo horario */
        .chk-opt input:disabled + span { opacity: .45; cursor: not-allowed; background: #F8FAFC; }
        .chk-opt input:disabled + span:hover { border-color: #E5E8EF; }
        .chk-opt input:disabled + span::after {
            content: "Ocupado"; margin-left: auto; padding-left: .5rem; flex-shrink: 0;
            font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8;
        }

        /* Sin cupo: se muestra pero no se puede elegir. Va después de la regla de
           arriba para pisarle el texto, y con algo más de presencia porque no es
           una consecuencia de lo que eligió la persona sino un dato del evento. */
        .chk-opt--agotado input:disabled + span { opacity: .6; background: #FEF2F2; border-color: rgba(221,35,56,0.22); }
        .chk-opt--agotado input:disabled + span:hover { border-color: rgba(221,35,56,0.22); }
        .chk-opt--agotado input:disabled + span::before { border-style: dashed; }
        .chk-opt--agotado input:disabled + span::after { content: "Cupos Agotados"; color: #dd2338; }

        .count-box { min-width: 5.5rem; }
        .logo-chip { background: #fff; border: 1px solid #E5E8EF; border-radius: 1rem; transition: transform .2s ease, box-shadow .2s ease; }
        .logo-chip:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -18px rgba(15,23,42,0.35); }