/* ============================================================
   CineDar — Home público (réplica de docs/references/*.jpeg)
   Aislado del resto del sitio: solo lo carga _HomeLayout.cshtml.

   ASSETS DEL CLIENTE (drop-in, sin tocar código):
   - Fondo del hero:  wwwroot/images/hero.jpg
       → descomentar la línea marcada [HERO-IMG] más abajo.
   - Arte de cards:   wwwroot/images/services/01-netflix.jpg,
     02-disney.jpg, 03-max.jpg, 04-prime.jpg, 05-crunchyroll.jpg,
     06-paramount.jpg, 07-flujo.jpg, 08-iptv.jpg, 09-telelatino.jpg,
     10-vix.jpg
       → descomentar el bloque marcado [CARD-IMG] más abajo.
   ============================================================ */

:root {
    --cd-bg: #06040c;
    --cd-surface: #0d0a17;
    --cd-surface-2: #120e20;
    --cd-line: rgba(139, 92, 246, .28);
    --cd-text: #f5f3ff;
    --cd-muted: #9d97b5;
    --cd-purple: #8b5cf6;
    --cd-blue: #3b82f6;
    --cd-cyan: #22d3ee;
    --cd-gold: #d4a843;
    --cd-gold-hi: #f0c060;
    --cd-green: #22c55e;
}

/* ---------- Base ---------- */
body.cd-home {
    background: var(--cd-bg);
    color: var(--cd-text);
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    min-height: 100vh;
}

body.cd-home a { text-decoration: none; }

.cd-ic { width: 1em; height: 1em; vertical-align: -0.12em; }

/* ---------- Topbar ---------- */
.cd-topbar {
    background: rgba(9, 6, 16, .96);
    border-bottom: 1px solid rgba(139, 92, 246, .18);
    font-size: .78rem;
    padding: .55rem 0;
}

.cd-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.cd-topbar-left, .cd-topbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.cd-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #14101f;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: .4rem .8rem;
    color: var(--cd-text);
    white-space: nowrap;
}

.cd-chip .cd-caret { opacity: .7; }
.cd-chip .cd-flag { width: 1.2em; height: .85em; border-radius: 2px; }

.cd-lang {
    position: relative;
    z-index: 30;
}

.cd-lang > summary {
    list-style: none;
}

.cd-lang > summary::-webkit-details-marker {
    display: none;
}

.cd-chip-lang {
    gap: .55rem;
    min-width: 138px;
    padding: .32rem .55rem .32rem .4rem;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.cd-chip-lang:hover,
.cd-lang[open] .cd-chip-lang {
    border-color: rgba(139, 92, 246, .62);
    background: linear-gradient(180deg, rgba(139, 92, 246, .14), rgba(20, 16, 31, .96));
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .08);
}

.cd-lang-globe {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 1.9rem;
    border-radius: .58rem;
    color: #ddd6fe;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    box-shadow: 0 5px 14px rgba(76, 29, 149, .38);
}

.cd-lang-globe svg {
    width: 1.05rem;
    height: 1.05rem;
}

.cd-lang-current {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    line-height: 1.05;
}

.cd-lang-current small {
    color: var(--cd-muted);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.cd-lang-current strong {
    margin-top: .16rem;
    font-size: .75rem;
}

.cd-chip-lang .cd-caret {
    width: .9rem;
    height: .9rem;
    transition: transform .22s ease;
}

.cd-lang[open] .cd-caret {
    transform: rotate(180deg);
}

.cd-lang-menu {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    display: grid !important;
    width: 225px;
    padding: .4rem;
    border: 1px solid rgba(139, 92, 246, .3);
    border-radius: 13px;
    background: rgba(15, 11, 24, .98);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.cd-lang[open] .cd-lang-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cd-lang-menu a {
    display: grid;
    grid-template-columns: 2rem 1fr 1rem;
    align-items: center;
    gap: .6rem;
    padding: .58rem;
    border-radius: 9px;
    color: var(--cd-text);
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}

.cd-lang-menu a:hover {
    background: rgba(139, 92, 246, .13);
    transform: translateX(2px);
}

.cd-lang-menu a.is-active {
    background: rgba(139, 92, 246, .18);
}

.cd-lang-flag {
    width: 1.8rem;
    height: 1.2rem;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.16);
}

.cd-lang-menu a > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.cd-lang-menu a small {
    margin-top: .18rem;
    color: var(--cd-muted);
    font-size: .62rem;
}

.cd-lang-check {
    color: var(--cd-green);
    font-weight: 900;
    opacity: 0;
}

.cd-lang-menu a.is-active .cd-lang-check {
    opacity: 1;
}

.cd-chip-vip {
    color: var(--cd-gold-hi);
    border-color: rgba(212, 168, 67, .55);
    background: linear-gradient(180deg, rgba(212, 168, 67, .16), rgba(212, 168, 67, .05));
    font-weight: 700;
    letter-spacing: .06em;
}

.cd-official {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--cd-green);
    line-height: 1.15;
}

.cd-official strong { letter-spacing: .08em; font-size: .74rem; }
.cd-official small { color: #b7e8c9; font-size: .62rem; letter-spacing: .02em; }
.cd-official small em { color: var(--cd-green); font-style: normal; font-weight: 700; }

.cd-follow { color: var(--cd-muted); }

.cd-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #17122a;
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--cd-text);
    font-size: .85rem;
}

.cd-social:hover { border-color: var(--cd-purple); color: #fff; }

.cd-contact {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #14101f;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: .4rem .9rem;
    color: var(--cd-text);
}

.cd-contact:hover { border-color: var(--cd-purple); color: #fff; }

.cd-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border-radius: 10px;
    background: #14101f;
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--cd-text);
}

.cd-cart-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: var(--cd-blue);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(59, 130, 246, .8);
}

/* ---------- Hero ---------- */
.cd-hero {
    position: relative;
    text-align: center;
    padding: 4.5rem 1rem 2.2rem;
    overflow: hidden;
    /* Banner real del cliente + velo oscuro para legibilidad del contenido. */
    background:
        linear-gradient(180deg, rgba(6, 4, 12, .45) 0%, rgba(6, 4, 12, .10) 40%, rgba(6, 4, 12, .72) 100%),
        url('/images/home/hero-banner.png') center 30% / cover no-repeat,
        linear-gradient(180deg, #0b0718 0%, #140b2e 45%, #090514 100%);
}

.cd-hero-logo {
    width: min(660px, 84vw);
    height: auto;
    filter: drop-shadow(0 6px 28px rgba(139, 92, 246, .5)) drop-shadow(0 2px 4px rgba(0, 0, 0, .9));
}

/* estrellas sutiles */
.cd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent 100%),
        radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.4), transparent 100%),
        radial-gradient(1.5px 1.5px at 44% 18%, rgba(255,255,255,.55), transparent 100%),
        radial-gradient(1px 1px at 62% 40%, rgba(255,255,255,.35), transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.6), transparent 100%),
        radial-gradient(1px 1px at 90% 52%, rgba(255,255,255,.4), transparent 100%),
        radial-gradient(1px 1px at 8% 78%, rgba(255,255,255,.3), transparent 100%),
        radial-gradient(1.2px 1.2px at 55% 80%, rgba(255,255,255,.35), transparent 100%);
    pointer-events: none;
}

.cd-hero-title {
    position: relative;
    font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
    font-weight: 800;
    font-size: clamp(3.2rem, 10vw, 7.5rem);
    letter-spacing: .04em;
    line-height: 1;
    margin: 0;
    background: linear-gradient(100deg, #d8b4fe 0%, #a855f7 28%, #8b5cf6 45%, #60a5fa 68%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 24px rgba(139, 92, 246, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .9));
}

.cd-hero-sub {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.1rem;
    color: var(--cd-gold-hi);
    letter-spacing: .55em;
    text-indent: .55em;
    font-size: clamp(.8rem, 2.2vw, 1.25rem);
    font-weight: 600;
    text-shadow: 0 0 14px rgba(212, 168, 67, .5);
}

.cd-hero-sub::before, .cd-hero-sub::after {
    content: "";
    display: block;
    width: clamp(30px, 8vw, 90px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cd-gold));
}

.cd-hero-sub::after {
    background: linear-gradient(90deg, var(--cd-gold), transparent);
}

/* ---------- Aviso bajo el hero ---------- */
.cd-notice {
    position: relative;
    margin-top: 2rem;
    color: #d9d3f0;
    font-size: .85rem;
    line-height: 1.7;
}

.cd-notice .cd-ic { color: var(--cd-gold-hi); margin-right: .35rem; }

.cd-notice-sub {
    letter-spacing: .35em;
    text-indent: .35em;
    color: var(--cd-muted);
    font-size: .72rem;
}

/* ---------- Navbar principal / login ---------- */
.cd-nav-wrap { max-width: 1200px; margin: 1rem auto 0; padding: 0 1rem; }

/* C66 — la barra CABE EN UNA FILA en escritorio.
   Al añadir "OTROS SERVICIOS" el contenido pasó a pedir 1205 px y solo hay 1131 dentro del
   contenedor de 1200, asi que el bloque de login se caia a una segunda fila y quedaba feo.
   Se recuperan ~90 px repartidos (campos algo mas estrechos, huecos y espaciado de letra mas
   justos) en vez de apretar una sola cosa. Quedan ~17 px de holgura: NO añadir otro enlace al
   menu sin volver a medir, o vuelve a partirse. */
.cd-navbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: rgba(14, 11, 26, .95);
    border: 1px solid var(--cd-line);
    border-radius: 14px;
    padding: .8rem 1.1rem;
    box-shadow: 0 0 24px rgba(124, 58, 237, .12);
}

.cd-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: .12em;
    color: #fff;
}

.cd-brand-play {
    width: 30px;
    height: 30px;
    color: var(--cd-purple);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, .8));
}

.cd-brand-logo {
    height: 20px;
    width: auto;
}

.cd-nav-sep { width: 1px; height: 28px; background: rgba(255, 255, 255, .12); }

.cd-nav-links {
    display: flex;
    align-items: center;
    gap: .8rem;          /* C66 — era 1.1rem */
    flex-wrap: wrap;
}

.cd-nav-links a {
    color: var(--cd-text);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;   /* C66 — era .08em; con 4 enlaces se notaba en el ancho total */
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;     /* "OTROS SERVICIOS" nunca se parte en dos lineas */
}

.cd-nav-links a:hover { color: #fff; text-shadow: 0 0 10px rgba(139, 92, 246, .8); }
/* C14-A — item de navegación activo (ej. RANKING cuando la ruta es /Ranking). */
.cd-nav-links a.is-active { color: var(--cd-gold-hi); text-shadow: 0 0 12px rgba(212, 168, 67, .7); }

.cd-nav-links .ic-notice { color: var(--cd-gold-hi); }
.cd-nav-links .ic-ranking { color: var(--cd-gold); }
.cd-nav-links .ic-recarga { color: #fbbf24; }

.cd-login {
    display: flex;
    align-items: center;
    gap: .45rem;         /* C66 — era .6rem */
    margin-left: auto;
    flex-wrap: wrap;
}

.cd-login .cd-input {
    background: #17132a;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    color: var(--cd-text);
    font-size: .74rem;
    letter-spacing: .08em;
    padding: .55rem .8rem;
    /* C66 — era 150px. "CONTRASEÑA", que es el texto mas largo que va dentro, ocupa ~108px
       contando el espaciado entre letras y el relleno: con 126 sigue entrando de sobra. */
    width: 126px;
}

.cd-login .cd-input::placeholder { color: #7d7696; letter-spacing: .12em; }
.cd-login .cd-input:focus { outline: none; border-color: var(--cd-purple); box-shadow: 0 0 10px rgba(139, 92, 246, .35); }

/* Iconos dentro de los inputs y link de recuperación: solo móvil
   (la referencia de escritorio muestra inputs planos). */
.cd-input-wrap { position: relative; display: inline-flex; align-items: center; }

/* C66 — en ESCRITORIO los dos campos ENCOGEN antes de que la barra se parta en dos filas.
   Con ancho fijo, en cuanto faltaban 2 px el bloque de login entero se caia abajo y la barra
   se veia rota (que es justo lo que reporto el cliente). Asi se ceden unos pixeles de los
   campos —que van sobrados— y la fila aguanta.
   Para que el encogido llegue hasta el input hay que abrir la cadena entera: un elemento flex
   no baja de su contenido salvo que lleve min-width:0.
   Va acotado a >=992px porque por debajo el login pasa a ocupar el ancho completo y se apila
   (ver los bloques responsive de mas abajo); alli NO debe encoger nada. */
@media (min-width: 1170px) {
    /* La clave: con flex-wrap:wrap el navegador PARTE la fila antes de encoger nada. Poniendo
       nowrap se invierte el orden: primero encoge, y como el unico que cede es el campo de
       texto, el resto de la barra no se mueve.
       El corte en 1170px NO es a ojo: la barra necesita 1118 px y los dos campos pueden ceder
       44 (de 126 a 104), o sea 1074 como minimo; descontando barra de desplazamiento y
       margenes internos (~82 px) eso pide una ventana de ~1156. Se deja 1170 de colchon. Por
       debajo NO cabe ni encogiendo del todo, asi que ahi sigue partiendo en dos filas, que es
       como estaba y como debe estar. */
    .cd-navbar { flex-wrap: nowrap; }
    /* La marca y el menu NO ceden: si les dejas encoger, el navegador les quita ancho y son
       ELLOS los que parten en dos lineas ("OTROS SERVICIOS" cayendo debajo de "DONACIÓN").
       Toda la elasticidad tiene que salir de los campos de texto, que es lo unico que sobra. */
    .cd-brand, .cd-nav-links { flex-shrink: 0; }
    /* El bloque de login tambien nowrap: si no, lo que se caia a la segunda fila era el boton
       "Registro" en lugar de la barra entera. Mismo sintoma, un nivel mas abajo. */
    .cd-login { min-width: 0; flex-wrap: nowrap; }
    /* !important porque compite con la utilidad .flex-wrap de Bootstrap, que ya lo trae. */
    .cd-login .cd-login-form { min-width: 0; flex-wrap: nowrap !important; }
    .cd-login .cd-input-wrap { min-width: 0; }
    /* Suelo de 104px: el ancho al que "CONTRASEÑA" todavia se lee completo. */
    .cd-login .cd-input { flex: 0 1 126px; min-width: 104px; }
}

.cd-input-ic {
    display: none;
    position: absolute;
    left: .7rem;
    width: .95rem;
    height: .95rem;
    color: #7d7696;
    pointer-events: none;
}

.cd-forgot { display: none; }

.btn-cd-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: linear-gradient(95deg, #7c3aed 0%, #2563eb 100%);
    border: 1px solid rgba(139, 92, 246, .7);
    border-radius: 10px;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    padding: .55rem 1.2rem;
    box-shadow: 0 0 16px rgba(124, 58, 237, .5);
    white-space: nowrap;
}

.btn-cd-primary:hover { color: #fff; filter: brightness(1.12); }

.btn-cd-outline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    color: var(--cd-text);
    font-size: .82rem;
    font-weight: 700;
    padding: .55rem 1.2rem;
    white-space: nowrap;
}

.btn-cd-outline:hover { color: #fff; border-color: var(--cd-purple); box-shadow: 0 0 12px rgba(139, 92, 246, .35); }

/* "Registro" en ROJO. Es la acción que trae clientes nuevos y tenía el mismo peso visual que
   "Salir". Va como modificador de .btn-cd-outline para heredar la geometría (alto, radio, icono) y
   cambiar SOLO el color: el botón "Salir" comparte la clase base y se queda como estaba. */
.btn-cd-registro {
    background: #e11d48;
    border-color: #e11d48;
    color: #fff;
}

.btn-cd-registro:hover {
    color: #fff;
    background: #be123c;
    border-color: #be123c;
    box-shadow: 0 0 14px rgba(225, 29, 72, .45);
}

.cd-hello { color: var(--cd-muted); font-size: .8rem; white-space: nowrap; }
.cd-hello strong { color: var(--cd-text); }

/* ---------- Título de sección (solo móvil, referencia móvil) ---------- */
.cd-section-title { display: none; text-align: center; margin: 1.8rem 0 .4rem; }

.cd-section-title .cd-kicker {
    color: var(--cd-text);
    letter-spacing: .5em;
    text-indent: .5em;
    font-size: .8rem;
}

.cd-section-title h2 {
    font-weight: 900;
    font-size: 2.6rem;
    letter-spacing: .02em;
    margin: .2rem 0;
    background: linear-gradient(95deg, #ec4899 0%, #a855f7 45%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(168, 85, 247, .5));
}

.cd-section-title p { color: var(--cd-muted); font-size: .85rem; margin: 0; }

/* ---------- Paneles por categoría (D4.2) ---------- */
/* Cada panel = una categoría. Cabecera con acento propio (--ac de la categoría)
   y debajo la MISMA grilla/cards de siempre. Visible en desktop y móvil. */
.cd-panel { margin-top: 2.6rem; }
.cd-panel:first-of-type { margin-top: 1.4rem; }

.cd-panel-head { text-align: center; padding: 0 1rem; }

.cd-panel-kicker {
    display: inline-block; width: 56px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--ac), transparent);
    box-shadow: 0 0 14px var(--ac-soft);
    margin-bottom: .7rem;
}

.cd-panel-head h2 {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 900; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: .02em;
    margin: 0; color: #fff;
    filter: drop-shadow(0 0 16px var(--ac-soft));
}

.cd-panel-ic { font-size: 1.5rem; line-height: 1; }

.cd-panel-head p { color: var(--cd-muted); font-size: .9rem; margin: .4rem 0 0; }

/* Dentro de un panel la grilla va pegada a su cabecera. */
.cd-panel .cd-grid-wrap { margin-top: 1rem; }

.cd-empty { text-align: center; color: var(--cd-muted); padding: 2.5rem 1rem; }

/* ---------- Grilla de servicios ---------- */
.cd-grid-wrap { max-width: 1200px; margin: 1.6rem auto 0; padding: 0 1rem; }

/* Cantidad de productos ilimitada: Grid crea filas automáticamente
   (7 -> 5+2, 13 -> 5+5+3, 100 -> 20 filas). minmax(0,1fr) evita que
   contenido largo desborde el contenedor. */
.cd-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.15rem;
}

/* Acentos por card */
.ac-red     { --ac: #e50914; --ac-soft: rgba(229, 9, 20, .55);   --ac-dim: rgba(229, 9, 20, .16); }
.ac-blue    { --ac: #3b82f6; --ac-soft: rgba(59, 130, 246, .55); --ac-dim: rgba(59, 130, 246, .16); }
.ac-purple  { --ac: #a855f7; --ac-soft: rgba(168, 85, 247, .55); --ac-dim: rgba(168, 85, 247, .16); }
.ac-orange  { --ac: #f47521; --ac-soft: rgba(244, 117, 33, .55); --ac-dim: rgba(244, 117, 33, .16); }
.ac-cyan    { --ac: #22d3ee; --ac-soft: rgba(34, 211, 238, .55); --ac-dim: rgba(34, 211, 238, .16); }
.ac-steel   { --ac: #60a5fa; --ac-soft: rgba(96, 165, 250, .5);  --ac-dim: rgba(96, 165, 250, .14); }

.cd-card {
    position: relative;
    background: #0c0918;
    border: 1px solid var(--ac-soft);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 18px var(--ac-dim), inset 0 0 40px rgba(0, 0, 0, .55);
    transition: transform .15s ease, box-shadow .15s ease;
}

.cd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 28px var(--ac-dim), 0 0 8px var(--ac-soft), inset 0 0 40px rgba(0, 0, 0, .55);
}

.cd-card-num {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
    background: rgba(10, 7, 20, .85);
    border: 1px solid var(--ac-soft);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    border-radius: 8px;
    padding: .18rem .5rem;
    box-shadow: 0 0 10px var(--ac-dim);
}

.cd-card-art {
    aspect-ratio: 5 / 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 1rem;
    background:
        radial-gradient(circle at 50% 12%, var(--ac-dim), transparent 65%),
        radial-gradient(circle at 85% 85%, rgba(0, 0, 0, .5), transparent 60%),
        linear-gradient(180deg, #1b1132 0%, #0c0918 90%);
    background-size: cover;
    background-position: center top;
}

/* La imagen de cada card viene de la BD (Plans.ImagePath, ruta web relativa
   tipo /images/catalog/netflix-premium.jpg). Si el archivo no existe,
   CatalogService entrega null y la card usa el placeholder de gradiente +
   nombre — sin 404s. Basta soltar el .jpg en wwwroot/images/catalog/ para
   que aparezca automáticamente. */

.cd-card-logo {
    max-width: 72%;
    max-height: 42%;
    object-fit: contain;
    margin-bottom: .3rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
}

.cd-wordmark {
    color: var(--ac);
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: .02em;
    text-shadow: 0 0 16px var(--ac-dim), 0 2px 4px rgba(0, 0, 0, .8);
    text-align: center;
    line-height: 1.1;
}

.cd-wordmark small {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .28em;
    color: var(--cd-text);
    opacity: .85;
}

.cd-wordmark .wm-chip {
    display: inline-block;
    font-size: .55rem;
    letter-spacing: .18em;
    border: 1px solid var(--ac-soft);
    border-radius: 5px;
    padding: .08rem .45rem;
    color: var(--ac);
    margin-top: .25rem;
}

.wm-caps { text-transform: uppercase; }
.wm-lower { text-transform: lowercase; }
.wm-italic { font-style: italic; font-family: Georgia, serif; font-weight: 700; }
.wm-white { color: #fff; }

.cd-card-name {
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    color: var(--cd-text);
    padding: .65rem .4rem .1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* D615 — etiqueta pública de garantía por categoría (verde/rojo). */
.cd-card-gar { text-align: center; margin: .1rem 0 .05rem; }
.cd-gar {
    display: inline-flex; align-items: center; gap: .28rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
    padding: .2rem .55rem; border-radius: 999px;
}
.cd-gar-si { color: #86efac; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .5); }
.cd-gar-no { color: #fca5a5; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .5); }

.cd-card-price {
    text-align: center;
    padding: .15rem 0 .55rem;
    font-weight: 800;
    font-size: 1.35rem;
    color: #fff;
}

.cd-card-price .cur { color: var(--ac); margin-right: .25rem; }

.cd-card-price .desde {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--cd-muted);
    letter-spacing: .05em;
    margin-right: .3rem;
    text-transform: uppercase;
}

/* Card agotada: desaturada, con etiqueta y sin navegación.
   El filtro NO va en la tarjeta entera, sino en cada hijo MENOS la etiqueta. Es la razón por la que
   el "AGOTADO" se veía gris: un filtro CSS tiñe también a los descendientes y un hijo no puede
   escaparse de él, así que la etiqueta perdía su rojo junto con el resto. Bajando el filtro un nivel
   la tarjeta se ve exactamente igual de apagada y la etiqueta conserva su color. */
.cd-card-agotado { filter: none; }
.cd-card-agotado > *:not(.cd-agotado-tag) { filter: saturate(.25) brightness(.72); }
.cd-card-agotado:hover { transform: none; }

/* Destello al actualizar una tarjeta en TIEMPO REAL (AGOTADO<->DISPONIBLE sin F5, catalogo-realtime.js). */
@keyframes cdCardFlash {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
    25% { box-shadow: 0 0 0 3px rgba(139, 92, 246, .75), 0 0 30px rgba(139, 92, 246, .55); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
.cd-card.cd-card-flash { animation: cdCardFlash 1.15s ease-out; }
@media (prefers-reduced-motion: reduce) { .cd-card.cd-card-flash { animation: none; } }

/* Rojo LLENO, no un contorno tenue: es el aviso de que no se puede comprar y tiene que leerse de
   un vistazo, encima de una tarjeta que además está apagada a propósito. */
.cd-agotado-tag {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 3;
    background: #dc2626;
    border: 1px solid #f87171;
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .08em;
    border-radius: 8px;
    padding: .22rem .5rem;
    box-shadow: 0 2px 12px rgba(220, 38, 38, .5);
}

button.btn-buy[disabled] {
    background: #16121f;
    border-color: rgba(255, 255, 255, .15);
    color: var(--cd-muted);
    box-shadow: none;
    cursor: not-allowed;
    width: calc(100% - 1.4rem);
}

.btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 0 .7rem .8rem;
    padding: .55rem .5rem;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--ac-dim), rgba(0, 0, 0, .35)), #0c0918;
    border: 1px solid var(--ac-soft);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    box-shadow: 0 0 12px var(--ac-dim);
}

.btn-buy:hover { color: #fff; box-shadow: 0 0 18px var(--ac-soft); filter: brightness(1.15); }

/* ---------- Beneficios ---------- */
.cd-benefits-wrap { max-width: 1200px; margin: 1.6rem auto 0; padding: 0 1rem; }

.cd-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background: rgba(13, 10, 23, .8);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    padding: 1.2rem 1.4rem;
}

.cd-benefit { display: flex; align-items: center; gap: .85rem; }

.cd-benefit + .cd-benefit { border-left: 1px solid rgba(255, 255, 255, .07); padding-left: 1rem; }

.cd-benefit-ic {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    border: 1px solid var(--bic-soft);
    color: var(--bic);
    background: radial-gradient(circle at 50% 30%, var(--bic-dim), rgba(0, 0, 0, .3));
    box-shadow: 0 0 14px var(--bic-dim);
}

.bic-purple { --bic: #a855f7; --bic-soft: rgba(168, 85, 247, .5);  --bic-dim: rgba(168, 85, 247, .18); }
.bic-green  { --bic: #22c55e; --bic-soft: rgba(34, 197, 94, .5);   --bic-dim: rgba(34, 197, 94, .18); }
.bic-blue   { --bic: #3b82f6; --bic-soft: rgba(59, 130, 246, .5);  --bic-dim: rgba(59, 130, 246, .18); }
.bic-gold   { --bic: #d4a843; --bic-soft: rgba(212, 168, 67, .5);  --bic-dim: rgba(212, 168, 67, .18); }

.cd-benefit strong { display: block; font-size: .82rem; letter-spacing: .05em; }
.cd-benefit small { color: var(--cd-muted); font-size: .72rem; line-height: 1.35; display: block; }

/* ---------- Franja PAGA SEGURO CON (solo móvil, decorativa) ---------- */
.cd-paysafe { display: none; text-align: center; margin: 1.6rem auto 0; padding: 0 1rem; max-width: 1200px; }

.cd-paysafe h3 { font-size: .8rem; font-weight: 800; letter-spacing: .12em; margin-bottom: .7rem; }

.cd-paysafe-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    flex-wrap: wrap;
    background: rgba(13, 10, 23, .85);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    padding: .9rem;
}

.cd-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 34px;
    border-radius: 8px;
    background: #14101f;
    border: 1px solid rgba(255, 255, 255, .12);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .04em;
    padding: 0 .6rem;
}

.cd-pay.p-visa { color: #e8e6f5; font-style: italic; }
.cd-pay.p-mc span { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.cd-pay.p-mc .c1 { background: #eb001b; margin-right: -5px; }
.cd-pay.p-mc .c2 { background: #f79e1b; opacity: .9; }
.cd-pay.p-amex { color: #7db4e8; }
.cd-pay.p-yape { color: #b18cf5; font-style: italic; }
.cd-pay.p-plin { color: #35c7db; }

/* ---------- Footer ---------- */
.cd-footer {
    margin-top: 2.2rem;
    /* Fondo real del cliente, más notorio: velo ligero arriba y oscuro solo
       hacia abajo para mantener el texto legible. */
    background:
        linear-gradient(180deg, rgba(8, 6, 15, .5) 0%, rgba(8, 6, 15, .72) 60%, rgba(8, 6, 15, .85) 100%),
        url('/images/home/footer.png') center bottom / cover no-repeat,
        #08060f;
    border-top: 1px solid rgba(139, 92, 246, .18);
    min-height: 150px;
    padding: 2.4rem 0 1.7rem;
    display: flex;
    align-items: center;
    font-size: .8rem;
}

.cd-footer-inner { width: 100%; }

.cd-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cd-footer-brand { display: flex; align-items: center; gap: .6rem; line-height: 1.15; }
.cd-footer-brand strong { letter-spacing: .22em; font-size: .9rem; }
.cd-footer-brand small { color: var(--cd-gold); letter-spacing: .18em; font-size: .6rem; }

.cd-shield { width: 30px; height: 30px; color: var(--cd-gold); filter: drop-shadow(0 0 8px rgba(212, 168, 67, .5)); }

/* C59 — Reparto del pie en escritorio: marca a la izquierda, ENLACES AL CENTRO y el
   copyright a la derecha.
   Los dos extremos llevan flex:1 y los enlaces flex:0: al ocupar izquierda y derecha
   exactamente lo mismo, el bloque del medio queda centrado de verdad respecto a la
   página. Con solo "space-between" quedaría descentrado, porque la marca y el
   copyright no miden igual. */
.cd-footer-copy { color: var(--cd-muted); flex: 1 1 0; text-align: right; }
.cd-footer-brand { flex: 1 1 0; }

.cd-footer-links { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
                   flex: 0 1 auto; justify-content: center; }
.cd-footer-links a { color: #c4b5fd; }
.cd-footer-links a:hover { color: #fff; text-shadow: 0 0 8px rgba(139, 92, 246, .8); }
.cd-footer-links span { color: rgba(255, 255, 255, .25); }

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet grande */
@media (max-width: 1199.98px) {
    .cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tablet */
@media (max-width: 991.98px) {
    .cd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cd-benefits { grid-template-columns: repeat(2, 1fr); }
    .cd-benefit + .cd-benefit { border-left: none; padding-left: 0; }
    .cd-official { display: none; }
    .cd-login { margin-left: 0; width: 100%; }
    .cd-login .cd-input-wrap { flex: 1 1 130px; }
    .cd-login .cd-input { width: 100%; }
}

/* Móvil (referencia móvil: login apilado, título SERVICIOS STREAMING,
   franja PAGA SEGURO CON, menos columnas) */
@media (max-width: 767.98px) {
    .cd-follow, .cd-contact { display: none; }

    /* ===== C19-C — Barra superior (Lima-Perú + redes) FUERA en móvil =====
       La referencia no la muestra: arriba solo va la cabecera [☰] [CINEDAR] [🛒]. Las redes y la
       ubicación siguen disponibles en el pie. */
    .cd-topbar { display: none; }

    /* ===== C19-A — Portada FUERA en móvil =====
       Se elimina la sección entera: banner, logo grande, subtítulo y el aviso de la fase beta.
       El branding no se pierde: la marca CINEDAR está en la cabecera fija, que es justo como se ve
       en la referencia. Así el login queda arriba del todo y los servicios suben. */
    .cd-hero { display: none; }

    .cd-navbar { flex-direction: column; align-items: stretch; gap: .55rem; }
    /* C19-D — la marca de este navbar sobra en móvil: la cabecera global ya la trae, y dejarla
       aquí mostraría CINEDAR dos veces. En escritorio sigue siendo la de siempre. */
    .cd-brand { display: none; }
    .cd-nav-sep { display: none; }
    /* NOTICE / RANKING / RECARGA fuera del bloque de login: ya viven en la hamburguesa. */
    .cd-nav-links { display: none; }

    /* C19-D — la cabecera fija, la hamburguesa, su menú y el carrito de arriba ya no se definen
       aquí: son el componente cd-mobile-header.css, que cargan las dos plantillas para que TODAS
       las páginas lo tengan. El hueco tampoco lo pone ya el body: lo trae el propio componente.
       Ese padding-top era, de hecho, el bug — lo ponía body.cd-home, que existe en todas las
       páginas de esta plantilla, mientras que la cabecera solo existía en las dos que renderizan
       _CineDarNav; /Producto y la confirmación de compra se quedaban con 56px en blanco. */
    .cd-nav-wrap { margin-top: .5rem; }

    /* ===== C19-A — Login compacto: correo, contraseña, Ingresar | Registro =====
       Como en la referencia, Ingresar y Registro van EN LA MISMA FILA. El problema: viven en
       padres distintos (Ingresar dentro del <form>, Registro fuera, porque abre el modal). Con
       `display: contents` los hijos del form pasan a ser hijos directos de la grilla .cd-login y
       ambos botones pueden compartir fila. Es solo LAYOUT: el form sigue siendo el dueño de sus
       inputs y el envío no cambia (verificado en el navegador). */
    .cd-login {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
        align-items: stretch;
    }
    /* !important a propósito: el <form> lleva la utilidad `d-flex` de Bootstrap, que es
       `display: flex !important`. Sin esto la grilla solo vería 2 hijos (form + Registro) y
       Registro se estiraría como una columna alta al lado de los inputs. */
    .cd-login .cd-login-form { display: contents !important; }
    /* Orden de la referencia: [Correo | Contraseña] / [Ingresar | Registro] / ¿Olvidaste…?
       El "¿Olvidaste…?" está ANTES de los botones en el HTML, así que se recoloca con `order`
       (funciona porque display:contents los hace items de esta misma grilla). */
    .cd-login .cd-input-wrap { order: 1; min-width: 0; }
    .cd-login-form .btn-cd-primary { order: 2; grid-column: 1; width: 100%; margin: 0; }
    .cd-login .btn-cd-outline { order: 2; grid-column: 2; width: 100%; margin: 0; }
    .cd-forgot { order: 3; grid-column: 1 / -1; margin: .1rem 0 0; text-align: center; }
    .cd-login .cd-input { padding-top: .58rem; padding-bottom: .58rem; }

    /* ===== C19-C — Con sesión iniciada, en móvil NO se muestra el nombre =====
       Se oculta el bloque entero (Hola {nombre} + Mi Cuenta + Salir): arriba queda solo la
       cabecera fija con la hamburguesa. La cuenta sigue a un toque desde la barra inferior
       ("Cuenta") y desde el menú. */
    .cd-login-auth { display: none; }
    /* Sin ese bloque el navbar se queda vacío: se le quita el "cartón" para que no se vea una
       tarjeta hueca bajo la cabecera. */
    .cd-nav-wrap:has(.cd-login-auth) .cd-navbar {
        background: none;
        border: none;
        padding: 0;
        min-height: 0;
        box-shadow: none;
    }
    .cd-nav-wrap:has(.cd-login-auth) { margin-top: 0; padding: 0; }
    /* En columna, la base flex del breakpoint tablet se volvería ALTURA. */
    .cd-login .cd-input-wrap { width: 100%; flex: 0 0 auto; }
    .cd-login .cd-input { width: 100%; flex: 0 0 auto; padding-left: 2.1rem; }
    .cd-input-ic { display: block; }
    .cd-forgot {
        display: block;
        text-align: center;
        color: #c084fc;
        font-size: .78rem;
        margin: .1rem 0;
    }
    .btn-cd-primary, .btn-cd-outline { justify-content: center; }

    .cd-section-title { display: block; }
    .cd-paysafe { display: block; }

    .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    .cd-grid-wrap { padding: 0 .75rem; }
    .cd-panel { margin-top: 1.6rem; }
    .cd-panel-head { margin-bottom: .2rem; }
    .cd-benefits-wrap { margin-top: 1.4rem; }
    .cd-benefits { grid-template-columns: 1fr; }
    .cd-footer { min-height: 110px; padding: 1.8rem 0 1.4rem; }
    .cd-footer-inner { flex-direction: column; text-align: center; }
    /* C59 — en móvil el pie es una COLUMNA: el reparto izquierda/centro/derecha del
       escritorio no aplica, y dejar el flex:1 haría que marca y copyright se estiraran
       a lo alto. Se devuelven a tamaño natural y todo centrado. */
    .cd-footer-brand, .cd-footer-copy { flex: 0 0 auto; }
    .cd-footer-copy { text-align: center; }
    .cd-footer-brand { justify-content: center; }
}

/* Móvil angosto: se MANTIENEN 2 columnas (no bajar a 1); card más compacta y legible */
@media (max-width: 419.98px) {
    .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .cd-card-num { top: .45rem; left: .45rem; font-size: .66rem; padding: .06rem .34rem; }
    .cd-card-name { font-size: .8rem; padding: .5rem .3rem .1rem; }
    .cd-card-price { font-size: 1.15rem; }
    .btn-buy { margin: 0 .5rem .6rem; padding: .5rem .35rem; font-size: .66rem; letter-spacing: .03em; gap: .3rem; }
    .btn-buy svg { width: 15px; height: 15px; }
}

/* C22 — el menú inferior móvil ya no se define aquí: es el componente cd-mobile-bottomnav.css,
   que cargan las dos plantillas para que TODAS las páginas lo tengan (antes solo el Inicio, y su
   CSS vivía en esta hoja, que /Recargar y /MiCuenta ni siquiera cargan). El hueco tampoco lo pone
   ya el body con `cd-with-bnav`: lo trae el propio componente. */

/* Enlaces auth en la topbar del home (Recargar / Mi cuenta) */
.cd-recargar-top {
    display: inline-flex; align-items: center; gap: .3rem;
    background: linear-gradient(95deg, #7c3aed, #22d3ee);
    color: #fff; font-weight: 700; font-size: .74rem;
    padding: .28rem .7rem; border-radius: 20px; text-decoration: none;
}
.cd-recargar-top:hover { color: #fff; filter: brightness(1.12); }
.cd-recargar-top .cd-ic { width: .95em; height: .95em; }
.cd-account-top { color: #cbd5e1; font-size: .74rem; font-weight: 600; text-decoration: none; padding: 0 .3rem; }
.cd-account-top:hover { color: #fff; }

/* ===== Modal de registro (dark premium) ===== */
.cd-modal {
    background: linear-gradient(180deg, #171033, #0d0a1c);
    border: 1px solid rgba(139, 92, 246, .4);
    border-radius: 16px;
    color: #ece9f7;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .6), 0 0 30px rgba(139, 92, 246, .15);
    /* overflow visible: deja que el botón cerrar (X) sobresalga de la esquina. El redondeo del
       banner lo hace el propio banner (abajo); el fondo/borde del modal ya respetan border-radius. */
    overflow: visible;
    position: relative;
}
.cd-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cd-modal-head h3 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; }
.cd-modal-x {
    background: none; border: none; color: #9d97b5; font-size: 1.6rem; line-height: 1;
    cursor: pointer; padding: 0 .2rem;
}
.cd-modal-x:hover { color: #fff; }
.cd-modal-body { padding: 1.3rem; }
.cd-modal-foot {
    padding: .9rem 1.3rem; border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .84rem; color: #9d97b5; text-align: center;
}
.cd-modal-foot a { color: #22d3ee; text-decoration: none; }
.cd-modal-foot a:hover { color: #fff; }

.cd-modal-form { display: flex; flex-direction: column; }
.cd-modal-label { font-size: .76rem; color: #9d97b5; text-transform: uppercase; letter-spacing: .05em; margin: .55rem 0 .25rem; }
.cd-modal-input {
    width: 100%; background: #0f0b1e; border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px; color: #ece9f7; padding: .6rem .8rem; font-size: .92rem;
}
.cd-modal-input:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, .25); }
.cd-modal-input.input-validation-error { border-color: #ef4444; }
.cd-modal-hint { font-size: .74rem; color: #9d97b5; margin-top: .25rem; }
.cd-modal-err { color: #fca5a5; font-size: .76rem; min-height: 1em; display: block; margin-top: .15rem; }

/* C59 — Aviso del número de WhatsApp: verde brillante que "respira" (se enciende y se apaga).
   Vive aquí, en home.css, porque el registro es sobre todo el MODAL del Home; la página
   /Account/Register reutiliza la misma clase y también carga esta hoja.
   El brillo se hace con text-shadow y no con opacity: bajar la opacidad dejaría el texto ilegible
   en el punto más apagado del ciclo, y este aviso existe justamente para que se lea.
   Forma de BLOQUE y no de texto suelto: con una barra verde a la izquierda y un fondo tenue
   queda claro que el aviso pertenece al campo de arriba. Suelto, y con los dos huecos de error
   entre medias, parecía una advertencia sobre la contraseña. */
.cd-aviso-wa {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .45rem 0 .1rem;
    padding: .5rem .65rem;
    border-radius: 9px;
    border-left: 3px solid rgba(74, 222, 128, .75);
    background: rgba(74, 222, 128, .07);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.4;
    color: #4ade80;
    animation: cd-suspiro-verde 3s ease-in-out infinite;
}
.cd-aviso-wa svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .08rem; opacity: .95; }

/* Aire ANTES de la contraseña: el campo que sigue necesita separarse del aviso para que se lea
   como una sección nueva y no como la continuación de esta. */
.cd-aviso-wa + .cd-modal-err + .cd-modal-err + .cd-modal-label,
.cd-aviso-wa + .cd-modal-label { margin-top: 1.05rem; }
@keyframes cd-suspiro-verde {
    0%, 100% { color: #3fbf6d; text-shadow: none; }
    50%      { color: #6ee7a0; text-shadow: 0 0 9px rgba(74, 222, 128, .65); }
}
/* Quien pidió menos animación conserva el color -- pierde el latido, no el aviso. */
@media (prefers-reduced-motion: reduce) {
    .cd-aviso-wa { animation: none; color: #5fd88b; }
}
.cd-modal-errors { color: #fca5a5; font-size: .84rem; }
.cd-modal-errors ul { margin: 0 0 .4rem; padding-left: 1.1rem; }
.cd-modal-errors:empty { display: none; }
.cd-modal-submit { width: 100%; margin-top: 1rem; justify-content: center; }

/* Login modal: recordarme + enlaces (D3.2) */
.cd-modal-check { display: flex; align-items: center; gap: .45rem; margin-top: .7rem; font-size: .82rem; color: #cdd7e6; cursor: pointer; }
.cd-modal-check input { width: 16px; height: 16px; accent-color: #22d3ee; }
.cd-modal-links { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1rem; font-size: .82rem; flex-wrap: wrap; }
.cd-modal-links a { color: #22d3ee; text-decoration: none; }
.cd-modal-links a:hover { color: #fff; }
/* C46 — texto introductorio del modal de recuperar contraseña. */
.cd-modal-intro { color: #c9c3e0; font-size: .86rem; line-height: 1.5; margin: 0 0 1rem; }
.cd-modal-intro b { color: #fff; }

.modal-backdrop.show { opacity: .7; }

/* ===== Banner del modal de registro ===== */
.cd-modal-banner {
    position: relative;
    height: 130px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* El modal ya no recorta (overflow visible); el banner mantiene sus esquinas superiores. */
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
.cd-modal-banner::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,10,28,.35) 0%, rgba(13,10,28,.5) 55%, #171033 100%);
}
.cd-modal-banner-in {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    padding-bottom: .7rem; text-align: center;
}
.cd-modal-logo { height: 42px; width: auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.6)); }
.cd-modal-tag { color: #cbd5e1; font-size: .78rem; margin-top: .35rem; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
/* Botón cerrar (X) de los modales de login/registro/recuperar: círculo ROJO que SOBRESALE de la
   esquina superior derecha (aro blanco + halo rojo), como pidió Diego. Va como hijo directo de
   .cd-modal (fuera del banner, que sí recorta) para poder salirse de la esquina. */
.cd-modal > .cd-modal-x {
    position: absolute; top: -13px; right: -13px; z-index: 6;
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 32% 28%, #ff6a6a 0%, #ef3a34 55%, #cf1a1a 100%);
    border: 2px solid rgba(255,255,255,.92);
    color: #fff; font-size: 1.4rem; line-height: 1; font-weight: 700;
    box-shadow: 0 0 0 4px rgba(239,58,52,.22), 0 6px 18px rgba(239,58,52,.5), 0 2px 6px rgba(0,0,0,.45);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cd-modal > .cd-modal-x:hover {
    transform: scale(1.1); filter: brightness(1.08);
    box-shadow: 0 0 0 5px rgba(239,58,52,.3), 0 8px 22px rgba(239,58,52,.62), 0 2px 6px rgba(0,0,0,.5);
}
.cd-modal > .cd-modal-x:active { transform: scale(.95); }
.cd-modal > .cd-modal-x:focus-visible {
    outline: none;
    box-shadow: 0 0 0 5px rgba(255,255,255,.4), 0 6px 18px rgba(239,58,52,.5);
}
/* En móvil, pega el botón a la esquina sin sobresalir para no crear scroll horizontal. */
@media (max-width: 480px) {
    .cd-modal > .cd-modal-x { top: -10px; right: -6px; width: 36px; height: 36px; }
}

/* ===== Fila de celular (código país + número) ===== */
/* C79 — Con casi 200 países el desplegable muestra también el NOMBRE, así que necesita algo más de
   ancho. En móvil la fila se parte y el selector pasa a ocupar todo el renglón: apretar un país
   dentro de 118px con el número al lado era imposible de leer y de acertar con el dedo. */
.cd-phone-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.cd-phone-code { flex: 0 1 auto; width: 168px; max-width: 100%; padding-right: .4rem; }
.cd-phone-num { flex: 1 1 12rem; min-width: 0; }

@media (max-width: 420px) {
    .cd-phone-code { flex: 1 1 100%; width: 100%; }
    .cd-phone-num { flex: 1 1 100%; }
}

/* ===== Ojo mostrar/ocultar contraseña ===== */
.cd-pass-wrap { position: relative; }
.cd-pass-wrap .cd-modal-input { padding-right: 2.6rem; }
.cd-eye {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #9d97b5; cursor: pointer; padding: .2rem;
    display: grid; place-items: center;
}
.cd-eye:hover { color: #22d3ee; }
.cd-eye svg { width: 20px; height: 20px; }
.cd-eye .eye-off { display: none; }
.cd-eye.on .eye-open { display: none; }
.cd-eye.on .eye-off { display: block; }

/* D3.1 — carrito en la topbar del Home (alineado y visible) */
.cd-topbar-right .cd-cartlink { display: inline-flex; align-items: center; justify-content: center; position: relative; color: #cbd5e1; margin-left: .2rem; }
.cd-topbar-right .cd-cartlink svg { width: 24px; height: 24px; }
.cd-topbar-right .cd-cartlink:hover { color: #fff; }

/* Diego: cuando el carrito TIENE productos, el ícono "respira" (brilla y se apaga) para que se
   note. Solo cuando existe el badge .cd-cartcount (= hay algo en el carrito). */
.cd-topbar-right .cd-cartlink:has(.cd-cartcount) { color: #c4b5fd; }
.cd-topbar-right .cd-cartlink:has(.cd-cartcount) svg { animation: cdCartBreathe 1.8s ease-in-out infinite; }
@keyframes cdCartBreathe {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(139, 92, 246, .45)); }
    50%      { transform: scale(1.15); filter: drop-shadow(0 0 9px rgba(139, 92, 246, .95)); }
}
@media (prefers-reduced-motion: reduce) {
    .cd-topbar-right .cd-cartlink:has(.cd-cartcount) svg { animation: none; filter: drop-shadow(0 0 5px rgba(139, 92, 246, .85)); }
}
.cd-topbar-right .cd-cartlink .cd-cartcount {
    position: absolute; top: -7px; right: -9px;
    background: linear-gradient(95deg, #7c3aed, #22d3ee); color: #04121a;
    font-size: .62rem; font-weight: 800; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 9px; display: grid; place-items: center; line-height: 1;
}

/* Feedback al AGREGAR al carrito: el badge hace "pop" y sube un "+1" flotante sobre el ícono.
   Global (product-detail.js lo dispara desde actualizarBadge). */
.cd-cartcount.cd-cart-pop { animation: cdCartPop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cdCartPop { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }
.cd-cart-plusone {
    position: fixed; z-index: 3000; transform: translate(-50%, 0);
    font-weight: 800; font-size: .95rem; color: #a855f7; pointer-events: none;
    text-shadow: 0 1px 8px rgba(168, 85, 247, .55);
    animation: cdPlusOne .9s ease-out forwards;
}
@keyframes cdPlusOne {
    0% { opacity: 0; transform: translate(-50%, 4px) scale(.7); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -28px) scale(1.1); }
}

/* ===== D5.1 — icono WhatsApp del topbar + botón flotante ===== */
.cd-social-wa:hover .cd-ic { color: #25d366; }
.cd-wa-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: #25d366; color: #fff;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
    transition: transform .15s, box-shadow .15s;
}
.cd-wa-float:hover { color: #fff; transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 30px rgba(37, 211, 102, .6); }
.cd-wa-float svg { width: 30px; height: 30px; }
/* ===== C22 — El flotante de WhatsApp NO se muestra en móvil =====
   "Contacto", en la barra inferior, abre exactamente el mismo WhatsApp y ahora está en todas las
   páginas: dos accesos al mismo sitio, uno de ellos tapando la esquina y estorbando encima de las
   tarjetas y de los botones, sobran. En escritorio no hay barra inferior, así que el flotante se
   conserva tal cual.

   767.98px = el MISMO corte que usa la barra (y el resto del sitio). Antes esta regla decía 767 a
   secas: en los anchos fraccionarios de 767.x no se ocultaría el flotante y a la vez sí saldría la
   barra, que es justo lo que no debe pasar. */
@media (max-width: 767.98px) {
    .cd-wa-float { display: none; }
}