/* ==========================================================================
   Baobab Studio — base.css
   Reset, tipografía, utilities y componentes globales.
   Los design tokens (:root) se inyectan inline desde functions.php para
   garantizar que estén disponibles antes de cualquier CSS externo.
   ========================================================================== */

/* ── Reset adicional ────────────────────────────────────────────────────── */
ul, ol        { list-style: none; }
button        { cursor: pointer; background: none; border: none; font: inherit; }
input, select,
textarea      { font: inherit; }
figure        { margin: 0; }
address       { font-style: normal; }
svg           { display: inline-block; vertical-align: middle; }

/* ── Tipografía base ────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: var(--tracking-wide);
    color: var(--color-charcoal);
}

p {
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 1.85;
    color: var(--color-bark);
    max-width: 66ch;
}

/* ── Etiqueta eyebrow ───────────────────────────────────────────────────── */
.eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: var(--tracking-ultra);
    text-transform: uppercase;
    color: var(--color-bronze);
    margin-bottom: var(--space-sm);
}

/* ── Botón CTA principal ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: var(--tracking-ultra);
    text-transform: uppercase;
    color: var(--color-charcoal);
    padding: 0.9em 2.2em;
    border: 1px solid var(--color-stone);
    position: relative;
    overflow: hidden;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-charcoal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-medium);
    z-index: -1;
}

.btn:hover {
    color: var(--color-cream);
    border-color: var(--color-charcoal);
}

.btn:hover::before {
    transform: scaleX(1);
}

.btn svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.btn:hover svg {
    transform: translateX(4px);
}

/* Variante en blanco (sobre fondo oscuro) */
.btn--light {
    color: var(--color-cream);
    border-color: rgba(245,240,235,0.4);
}

.btn--light::before {
    background-color: var(--color-cream);
}

.btn--light:hover {
    color: var(--color-charcoal);
}

/* ── Contenedor principal ───────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.container--narrow {
    max-width: var(--max-width);
}

/* ── Línea decorativa horizontal ───────────────────────────────────────── */
.divider {
    width: 40px;
    height: 1px;
    background-color: var(--color-bronze);
    margin: var(--space-md) 0;
}

.divider--center {
    margin-inline: auto;
}

/* ── Sección con padding estándar ───────────────────────────────────────── */
.section {
    padding-block: var(--space-xl);
}

.section--xl {
    padding-block: var(--space-2xl);
}

/* ── Textos de sección ──────────────────────────────────────────────────── */
.section-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}

.section-subtitle {
    font-size: var(--text-md);
    color: var(--color-bark);
    max-width: 55ch;
}

/* ── Utilidades de alineación ───────────────────────────────────────────── */
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }

/* ── Overlay oscuro ─────────────────────────────────────────────────────── */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28,24,20,0.15) 0%,
        rgba(28,24,20,0.55) 100%
    );
}

/* ── Ratio de imágenes ──────────────────────────────────────────────────── */
.ratio {
    position: relative;
    overflow: hidden;
}

.ratio img,
.ratio video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ratio--16-9  { padding-bottom: 56.25%; }
.ratio--4-3   { padding-bottom: 75%; }
.ratio--3-4   { padding-bottom: 133.33%; }
.ratio--1-1   { padding-bottom: 100%; }
.ratio--hero  { padding-bottom: 50%; }

/* ── Animación de aparición suave (no afecta LCP) ──────────────────────── */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Accesibilidad ──────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Scroll reveal (IntersectionObserver en nav.js) ────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Sección de contenido adicional (Editor WP) ─────────────────────────── */
.page-content-additional {
    border-top: 1px solid var(--color-stone);
}

.entry-content > * + * {
    margin-top: 1.5rem;
}

.entry-content h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.entry-content h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.entry-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.entry-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.entry-content a {
    color: var(--color-bronze);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.entry-content p {
    max-width: none !important;
}

/* ── Media queries globales ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .section       { padding-block: var(--space-lg); }
    .section--xl   { padding-block: var(--space-xl); }
}