/* ============================================================================
 * site.css - Tokens de tema del sitio Interbook
 * ----------------------------------------------------------------------------
 * El sitio replica el HTML de producción (Next.js + shadcn/ui + Tailwind
 * compilado). Producción trae un theme con variables CSS (--card, --primary,
 * --border, etc.) y clases utilitarias derivadas (bg-card, text-card-foreground,
 * bg-primary, text-primary-foreground...).
 *
 * Nosotros usamos Tailwind CDN, que NO conoce esas clases custom. Las que
 * faltan se definen acá para que las tarjetas se vean idénticas a producción
 * (fondo blanco, borde gris claro y sombra suave).
 *
 * Valores tomados del CSS real de producción (28/9/2026):
 *   --card            = 0 0% 100%              -> #FFFFFF
 *   --card-foreground = 222.2 84% 4.9%        -> #020817
 *   --border          = 214.3 31.8% 91.4%     -> #E2E8F0
 *   --radius          = 0.5rem                -> 8px
 * ========================================================================== */

/* Fondo de las tarjetas (producción: "rounded-lg border bg-card shadow-sm") */
.bg-card {
    background-color: #ffffff;
}

/* Color del texto dentro de las tarjetas */
.text-card-foreground {
    color: #020817;
}

/* Texto secundario atenuado (equivalente a text-muted-foreground de shadcn) */
.text-muted-foreground {
    color: #64748b;
}

/* Compatibilidad del focus ring de shadcn: sin esto, ring-offset-* no hace nada */
.ring-offset-background {
    --tw-ring-offset-color: #ffffff;
    --tw-ring-offset-width: 2px;
}

/* Hero: slides que se desplazan en horizontal; los que no están activos no reciben clics */
/* En el celular el hero sigue la proporción de la pieza (muy apaisada):
   con 50vh el recuadro es alto y object-cover corta el logo de los costados.
   Desde 768 px vuelve a media pantalla, como en la PC. */
#home-hero-carousel {
    overflow: hidden;
    height: 36vw;
    min-height: 132px;
    max-height: 220px;
}
@media (min-width: 768px) {
    #home-hero-carousel {
        height: 50vh;
        min-height: 280px;
        max-height: none;
    }
}
#home-hero-carousel .hero-slide {
    pointer-events: none;
    transform: translateX(100%);
}
#home-hero-carousel .hero-slide.is-active {
    pointer-events: auto;
    transform: translateX(0);
}

/* Flechas del hero: variantes 2 a 4 (hero_flechas= en config/logo.txt) */
.hero-arrow {
    position: absolute;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: background-color .25s ease, opacity .25s ease, border-color .25s ease;
}
.hero-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* 2: mismas flechas, transparentes */
.hero-arrow-glass {
    top: 50%;
    transform: translateY(-50%);
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: .375rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.hero-arrow-glass.hero-arrow-prev { left: 1rem; }
.hero-arrow-glass.hero-arrow-next { right: 1rem; }
.hero-arrow-glass:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #ffffff;
}

/* 3: franjas angostas pegadas a los costados, a todo lo alto */
.hero-arrow-edge {
    top: 0;
    bottom: 0;
    width: 44px;
    opacity: .75;
}
.hero-arrow-edge.hero-arrow-prev {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
}
.hero-arrow-edge.hero-arrow-next {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
}
.hero-arrow-edge:hover { opacity: 1; }
.hero-arrow-edge.hero-arrow-prev:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.hero-arrow-edge.hero-arrow-next:hover {
    background: linear-gradient(to left, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
@media (min-width: 768px) {
    .hero-arrow-edge { width: 56px; }
}

/* 4: botones redondos chicos abajo a la derecha + puntos indicadores al centro */
.hero-arrow-pill {
    bottom: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, .35);
    border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero-arrow-pill.hero-arrow-next { right: 1rem; }
.hero-arrow-pill.hero-arrow-prev { right: 3.75rem; }
.hero-arrow-pill:hover { background: rgba(255, 255, 255, .25); }
.hero-dots {
    position: absolute;
    z-index: 20;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
}
.hero-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .5);
    transition: width .3s ease, background-color .3s ease;
}
.hero-dot.is-active {
    width: 1.5rem;
    background: #ffffff;
}