@charset "utf-8";

/* =====================================================================
   GUÍA DE ESTILO — Teatro Andino Kusi Wasi
   Un solo lugar para las fuentes, los tamaños de título y los colores de marca.
   Se carga DESPUÉS de los demás estilos: lo que está aquí manda.

   FUENTES (solo estas tres; se cargan desde Google Fonts)
     · Cinzel Decorative  → títulos de página y de sección (h1 y h2)
     · Alegreya           → textos, párrafos y títulos pequeños (h3, h4)
     · Roboto             → interfaz: menú, botones, formularios, etiquetas, avisos

   COLORES (paleta del teatro)
     negro / crema          → fondo y texto principal
     dorado principal       → acentos, títulos, botones dorados
     dorado claro           → texto dorado sobre fondo oscuro, resaltados
     dorado borde           → bordes y líneas finas
     rojo vino              → botones de acción y de peligro
   ===================================================================== */

:root {
    /* Fuentes */
    --fuente-titulo: 'Cinzel Decorative', serif;
    --fuente-texto: 'Alegreya', serif;
    --fuente-ui: 'Roboto', sans-serif;

    /* Escala de títulos (se adapta sola al ancho de la pantalla) */
    --t-h1: clamp(1.9rem, 4.6vw, 3rem);      /* título de página: hasta 48 px */
    --t-h2: clamp(1.45rem, 3.2vw, 2rem);     /* título de sección: hasta 32 px */
    --t-h3: 1.35rem;                          /* subtítulo: 21,6 px */
    --t-h4: 1.1rem;                           /* subtítulo pequeño: 17,6 px */
    --t-texto: 1.06rem;                       /* texto largo: ~17 px */
    --t-ui: 0.95rem;                          /* botones y formularios: ~15 px */
    --t-pequeno: 0.85rem;                     /* notas y etiquetas: ~13,6 px */

    /* Colores de marca */
    --c-negro: #000000;
    --c-negro-suave: #111111;
    --c-crema: #f3eee4;
    --c-blanco: #ffffff;
    --c-gris-texto: #dddddd;
    --c-gris-suave: #c9c2b4;
    --c-dorado: #dd910d;
    --c-dorado-claro: #e4b44a;
    --c-dorado-borde: #b08d2e;
    --c-estrella: #ffc107;
    --c-vino: #9d0606;
    --c-vino-hover: #b50707;
    --c-vino-oscuro: #600000;

    /* El texto que Bootstrap dejaba con la fuente del sistema pasa a Alegreya */
    --bs-body-font-family: var(--fuente-texto);
}

/* ---- Interfaz: todo control de formulario, botón y etiqueta va en Roboto ---- */
button,
input,
select,
textarea,
label,
legend,
summary,
th,
.btn,
.nav-link,
.dropdown-item,
.badge {
    font-family: var(--fuente-ui);
}

/* Elementos de interfaz que no son <button>/<label> pero funcionan como tales */
.btn-card,
.t2,
.card-btnN,
.btn-reservar,
.btn-google,
.btn-ingresar,
.nos-btn,
.nos-eyebrow,
.nos-historia__badge,
.menu-opcion,
.filtro,
.estado,
.actividad-estado,
.comentario-contrato,
.comentario-fecha,
.comentarios-total,
.rb-etq,
.rb-num,
.label,
.user-menu-btn,
.scroll-arrow,
.prev-arrow,
.next-arrow,
.dial-code,
.accent,
.remember-me,
.paquete-info,
.aviso-solicitud,
.meta-comentario,
.fecha-item__lugar,
.confirmar-accion,
.header-bg a,
.mobile-header a,
.mobile-menu a,
.dropdown-menu a {
    font-family: var(--fuente-ui) !important;
}

/* ---- Títulos de página (h1) ---- */
.texto-titulo,
.texto-titulo2,
.titulo-principal,
.nos-hero-titulo,
.alq-hero-titulo,
.ctc-hero-title,
.legal-overlay h1,
.t1 h1 {
    font-family: var(--fuente-titulo) !important;
    font-weight: 700 !important;
    font-size: var(--t-h1) !important;
}

/* ---- Títulos de sección (h2) ---- */
.nos-subtitulo,
.alq-h2,
.home-cta__titulo,
.home-itinerante__titulo,
.subtitulo-seccion,
.comentarios-titulo,
.sinopsis-title,
.faq-show-title,
.titulo-solicitudes,
.titulo-comentarios,
.usuario-actividades-section .titulo,
.card-titleN {
    font-family: var(--fuente-titulo) !important;
    font-weight: 700 !important;
    font-size: var(--t-h2) !important;
}

/* ---- Subtítulos (h3): Alegreya en negrita ---- */
.legal-subtitulo,
.alq-h3,
.alq-gallery-title,
.nos-h3,
.ctc-col-title,
.titulo-card,
.actividad-titulo {
    font-family: var(--fuente-texto) !important;
    font-weight: 700 !important;
}

.legal-subtitulo,
.alq-h3,
.alq-gallery-title,
.nos-h3,
.ctc-col-title:not(.ctc-col-title--sm) {
    font-size: var(--t-h3) !important;
}

/* ---- Texto de lectura ---- */
.sinopsis-text,
.card-textN,
.comentario-texto,
.legal-box p {
    font-family: var(--fuente-texto);
    font-size: var(--t-texto);
    line-height: 1.7;
}

/* ---- Cabeceras pequeñas de la ficha técnica del show (h4): Alegreya en negrita ---- */
.info-show-item h4 {
    font-family: var(--fuente-texto);
    font-weight: 700;
    font-size: var(--t-h3);
}