/* ==========================================================================
   Cecilia Castagno Catering — base.css
   Tokens de marca + personalización de Bootstrap 5.3 a través de sus
   variables CSS. Acá NO se crean componentes: se cambia cómo se ven los de
   Bootstrap (botones, navbar, formularios, acordeón, cards).
   Va cargado DESPUÉS de bootstrap.min.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía display
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Old Script";
    src: url("../fonts/old-script.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens de marca
   -------------------------------------------------------------------------- */

:root {
    /* Paleta original */
    --cc-terracota: #c63d2a;
    --cc-marron: #855548;
    --cc-marron-oscuro: #4d261d;
    --cc-crema: #e9e4c7;
    --cc-salmon: #f2ab8c;
    --cc-beige: #b79373;
    --cc-negro: #353535;

    /* Variantes para accesibilidad (WCAG AA sobre crema) */
    --cc-terracota-texto: #b3321f;  /* 4,8:1 sobre crema — texto chico en terracota */
    --cc-marron-texto: #6e4438;     /* 6,4:1 sobre crema — cuerpo de texto */
    --cc-crema-claro: #f4f1e2;      /* superficies elevadas (cards, inputs) */

    /* Familias */
    --cc-ff-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cc-ff-display: "Old Script", "Brush Script MT", cursive;

    /* Ritmo */
    --cc-seccion-y: clamp(4rem, 9vw, 7.5rem);
    --cc-radio: 1rem;
    --cc-radio-lg: 1.5rem;
    --cc-sombra: 0 1px 2px rgba(77, 38, 29, .06), 0 12px 32px -12px rgba(77, 38, 29, .22);
    --cc-header-h: 84px;
}

/* --------------------------------------------------------------------------
   3. Bootstrap: variables globales
   -------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: var(--cc-ff-sans);
    --bs-body-font-family: var(--cc-ff-sans);
    --bs-body-font-size: 1.0625rem;      /* 17px — antes 14px */
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.7;
    --bs-body-color: var(--cc-marron-texto);
    --bs-body-color-rgb: 110, 68, 56;
    --bs-body-bg: var(--cc-crema);
    --bs-body-bg-rgb: 233, 228, 199;

    --bs-emphasis-color: var(--cc-marron-oscuro);
    --bs-emphasis-color-rgb: 77, 38, 29;
    --bs-secondary-color: rgba(110, 68, 56, .8);
    --bs-secondary-bg: var(--cc-crema-claro);
    --bs-tertiary-bg: #efeadb;

    --bs-heading-color: var(--cc-terracota-texto);

    --bs-primary: var(--cc-terracota);
    --bs-primary-rgb: 198, 61, 42;
    --bs-primary-text-emphasis: var(--cc-terracota-texto);
    --bs-primary-bg-subtle: #f6dcd4;
    --bs-primary-border-subtle: #eab3a6;

    --bs-link-color: var(--cc-terracota-texto);
    --bs-link-color-rgb: 179, 50, 31;
    --bs-link-hover-color: var(--cc-marron-oscuro);
    --bs-link-hover-color-rgb: 77, 38, 29;
    --bs-link-decoration: underline;

    --bs-border-color: rgba(110, 68, 56, .22);
    --bs-border-color-translucent: rgba(110, 68, 56, .16);
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: var(--cc-radio);
    --bs-border-radius-xl: var(--cc-radio-lg);
    --bs-border-radius-pill: 50rem;

    --bs-focus-ring-color: rgba(198, 61, 42, .35);
    --bs-focus-ring-width: .2rem;

    --bs-box-shadow: var(--cc-sombra);
}

/* Contenedores: más aire lateral que el default (12px) en pantallas medianas.
   El padding del contenedor tiene que ser >= al margen negativo de las .row.g-5
   (1.5rem), si no las filas desbordan horizontalmente. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: 3rem;
}

/* --------------------------------------------------------------------------
   4. Bootstrap: tipografía
   -------------------------------------------------------------------------- */

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.015em;
    text-wrap: balance;
}

h2, .h2 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
h3, .h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 400; }

p { text-wrap: pretty; }

.lead {
    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
    font-weight: 400;
    line-height: 1.6;
}

::selection {
    background: var(--cc-salmon);
    color: var(--cc-marron-oscuro);
}

/* --------------------------------------------------------------------------
   5. Bootstrap: botones
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-padding-x: 1.625rem;
    --bs-btn-padding-y: .875rem;
    --bs-btn-font-size: .9375rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.3;
    --bs-btn-border-radius: var(--bs-border-radius-pill);
    --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(198, 61, 42, .35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    letter-spacing: .01em;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn:active { transform: translateY(1px); }

.btn-lg {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: 1rem;
    --bs-btn-font-size: 1rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cc-terracota);
    --bs-btn-border-color: var(--cc-terracota);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cc-terracota-texto);
    --bs-btn-hover-border-color: var(--cc-terracota-texto);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cc-marron-oscuro);
    --bs-btn-active-border-color: var(--cc-marron-oscuro);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cc-terracota);
    --bs-btn-disabled-border-color: var(--cc-terracota);
}

/* Botón crema: para usar sobre fondos terracota o fotos */
.btn-light {
    --bs-btn-color: var(--cc-terracota-texto);
    --bs-btn-bg: var(--cc-crema);
    --bs-btn-border-color: var(--cc-crema);
    --bs-btn-hover-color: var(--cc-marron-oscuro);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--cc-marron-oscuro);
    --bs-btn-active-bg: var(--cc-crema-claro);
    --bs-btn-active-border-color: var(--cc-crema-claro);
}

.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .7);
    --bs-btn-hover-color: var(--cc-marron-oscuro);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--cc-marron-oscuro);
    --bs-btn-active-bg: var(--cc-crema);
    --bs-btn-active-border-color: var(--cc-crema);
}

.btn-outline-primary {
    --bs-btn-color: var(--cc-terracota-texto);
    --bs-btn-border-color: var(--cc-terracota-texto);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cc-terracota-texto);
    --bs-btn-hover-border-color: var(--cc-terracota-texto);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cc-marron-oscuro);
    --bs-btn-active-border-color: var(--cc-marron-oscuro);
}

/* Link con flecha, sin caja */
.btn-link {
    --bs-btn-padding-x: 0;
    --bs-btn-color: var(--cc-terracota-texto);
    --bs-btn-hover-color: var(--cc-marron-oscuro);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

.btn .fa-arrow-right { transition: transform .2s ease; }
.btn:hover .fa-arrow-right { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Bootstrap: navbar
   -------------------------------------------------------------------------- */

.navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: var(--cc-crema);
    --bs-navbar-active-color: var(--cc-crema);
    --bs-navbar-brand-padding-y: .5rem;
    --bs-navbar-nav-link-padding-x: 1rem;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .45);
    --bs-navbar-toggler-focus-width: .2rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .nav-link {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--cc-crema-claro);
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-border-radius: var(--cc-radio);
    --bs-dropdown-box-shadow: var(--cc-sombra);
    --bs-dropdown-link-color: var(--cc-marron-texto);
    --bs-dropdown-link-hover-color: var(--cc-terracota-texto);
    --bs-dropdown-link-hover-bg: rgba(198, 61, 42, .08);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--cc-terracota);
    --bs-dropdown-item-padding-x: 1.25rem;
    --bs-dropdown-item-padding-y: .625rem;
    --bs-dropdown-padding-y: .625rem;
    box-shadow: var(--bs-dropdown-box-shadow);
}

/* --------------------------------------------------------------------------
   7. Bootstrap: formularios
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    --bs-border-radius: .75rem;
    padding: .9375rem 1.125rem;
    font-size: 1rem;
    color: var(--cc-marron-oscuro);
    background-color: var(--cc-crema-claro);
    border-color: transparent;
}

.form-control::placeholder { color: rgba(110, 68, 56, .72); }

.form-control:focus,
.form-select:focus {
    color: var(--cc-marron-oscuro);
    background-color: #fff;
    border-color: var(--cc-terracota);
    box-shadow: 0 0 0 .2rem rgba(198, 61, 42, .25);
}

.form-label {
    margin-bottom: .375rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--cc-marron-oscuro);
}

.form-floating > label { color: rgba(110, 68, 56, .8); }

.form-check-input:checked {
    background-color: var(--cc-terracota);
    border-color: var(--cc-terracota);
}

/* Validación con la paleta (el rojo de Bootstrap choca con el terracota) */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
    border-color: #9b2c1c;
}

.invalid-feedback { color: #9b2c1c; font-weight: 500; }

/* --------------------------------------------------------------------------
   8. Bootstrap: acordeón (FAQ)
   -------------------------------------------------------------------------- */

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--cc-marron-texto);
    --bs-accordion-border-color: rgba(110, 68, 56, .25);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1.375rem;
    --bs-accordion-btn-color: var(--cc-marron-oscuro);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--cc-terracota-texto);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0 1.5rem;
}

.accordion-item { border-width: 0 0 1px; }

.accordion-button {
    font-size: 1.125rem;
    font-weight: 500;
}

.accordion-button:focus-visible {
    outline: 2px solid var(--cc-terracota);
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   9. Bootstrap: cards
   -------------------------------------------------------------------------- */

.card {
    --bs-card-bg: var(--cc-crema-claro);
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--cc-radio-lg);
    --bs-card-inner-border-radius: var(--cc-radio-lg);
    --bs-card-spacer-x: 1.5rem;
    --bs-card-spacer-y: 1.5rem;
    --bs-card-title-color: var(--cc-marron-oscuro);
    --bs-card-color: var(--cc-marron-texto);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. Utilidades propias (extienden las de Bootstrap)
   -------------------------------------------------------------------------- */

.bg-terracota { background-color: var(--cc-terracota) !important; }
.bg-crema     { background-color: var(--cc-crema) !important; }
.bg-marron    { background-color: var(--cc-marron) !important; }
.text-terracota { color: var(--cc-terracota-texto) !important; }
.text-crema     { color: var(--cc-crema) !important; }

.py-seccion { padding-block: var(--cc-seccion-y); }

/* Accesibilidad */
:focus-visible {
    outline: 2px solid var(--cc-terracota);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}