/* =============================================================
   VARIABLES — solo editar este archivo por proyecto
   Fuente de verdad: recursos-web/peruamericatours.pen
   ============================================================= */
:root {
    /* ── PALETA DE MARCA (tokens del .pen) ── */
    --color-navy:         #075468;   /* navy */
    --color-dark-teal:    #144549;   /* dark-teal — primario */
    --color-aqua:         #1ECECC;   /* aqua — acento */
    --color-green:        #1DAA6A;   /* green — acción */

    /* ── ROLES (los consume components.css) ── */
    --color-primary:      #144549;   /* dark-teal */
    --color-secondary:    #1DAA6A;   /* verde acción */
    --color-accent:       #1ECECC;   /* aqua acento */
    --color-danger:       #f74848;   /* rojo alertas */
    --color-bg:           #F7FAFA;   /* fondo general */
    --color-surface:      #FFFFFF;   /* tarjetas, modales */
    --color-surface-muted:#EDF3F3;   /* chips, fondos suaves */
    --color-text:         #17363E;   /* texto principal */
    --color-text-muted:   #5B777E;   /* texto secundario */
    --color-border:       #E0EAEA;
    --color-border-strong:#CBDBDB;

    /* ── SOBRE FONDO OSCURO ── */
    --color-on-dark:      #FFFFFF;
    --color-on-dark-soft: #C9DBDB;

    /* ── WHATSAPP ── */
    --color-whatsapp:     #25d366;

    /* ── GRADIENTES DE MARCA ── */
    --gradient-brand:     linear-gradient(45deg, var(--color-navy) 0%, var(--color-green) 100%);
    --gradient-band:      linear-gradient(180deg, var(--color-navy) 0%, var(--color-dark-teal) 100%);
    --gradient-slab:      linear-gradient(8deg, var(--color-navy) 0%, var(--color-dark-teal) 50%, var(--color-green) 100%);

    /* ── TIPOGRAFÍA ── */
    --font-body:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-size-base:     1.6rem;    /* 16px con 62.5% base */

    /* ── ESPACIADO ── */
    --space-xs:   0.4rem;
    --space-sm:   0.8rem;
    --space-md:   1.6rem;
    --space-lg:   3.2rem;
    --space-xl:   6.4rem;
    --space-2xl: 10.0rem;   /* padding vertical de sección (desktop) */

    /* ── LAYOUT ── */
    /* Reparto 90/10 sobre el viewport: el contenido ocupa el 90% y el 10%
       restante es aire (5% por lado). Al llegar a 1920 de contenido (viewport
       2133) el bloque se congela y el propio padding absorbe el sobrante, así
       que en ultrawide queda a Full HD centrado. El suelo de 2rem evita que en
       móvil el 5% deje el texto pegado al borde.
       Es padding, no max-width: por eso los envoltorios que lo usan llevan
       max-width:none en style.css (si no, el tope de 1920 y el padding se
       restarían y el contenido saldría más estrecho de la cuenta). */
    --container-max:     192rem;   /* 1920 — tope del ancho de CONTENIDO */
    --container-pad:     max(2rem, 5vw, (100vw - var(--container-max)) / 2);
    /* Ancho real del contenido. Lo que se dimensione a ojo del bloque (la
       cascada de tours) debe escalar con esto y NO con vw: si no, se sale del
       reparto 90/10 y se corta contra el borde del viewport. */
    --content-w:         calc(100vw - 2 * var(--container-pad));
    --radius-sm:         1.2rem;
    --radius-md:         2.0rem;
    --radius-lg:         2.4rem;
    --radius-xl:         2.6rem;
    --radius-pill:       99.9rem;

    /* ── SOMBRAS (del .pen) ── */
    --shadow-sm:  0 4px 14px -8px rgba(23, 54, 62, .12);
    --shadow-md:  0 16px 42px -16px rgba(23, 54, 62, .16);
    --shadow-lg:  0 20px 44px -12px rgba(10, 46, 51, .35);
    --shadow-xl:  0 34px 80px -16px rgba(5, 32, 36, .50);

    /* ── TRANSICIONES ── */
    --transition: .2s ease;
}