/* ═══════════════════════════════════════════
   TOKENS GLOBALES — El Amigo Fiel
   Paleta: Rosado + Ámbar · Tierno & Profesional
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
    /* ── Colores principales ── */
    --rose-50:   #fff0f5;
    --rose-100:  #ffe0ec;
    --rose-200:  #ffc2d6;
    --rose-400:  #f472a8;
    --rose:      #e8457a;      /* Rosa principal */
    --rose-dk:   #c4305f;      /* Rosa oscuro (hover) */

    --amber-100: #fff4e0;
    --amber-200: #fddba8;
    --amber:     #d97a2a;      /* Ámbar acento */
    --amber-dk:  #b5611a;

    /* ── Neutros ── */
    --brown:     #3d1a24;      /* Marrón rosado oscuro — textos */
    --slate:     #5c4050;      /* Gris rosado — texto secundario */
    --cream:     #fff7fa;      /* Fondo general */
    --white:     #ffffff;

    /* ── Utilidad ── */
    --radius:    16px;
    --shadow-sm: 0 2px 12px rgba(232,69,122,.08);
    --shadow-md: 0 8px 32px rgba(232,69,122,.14);
    --shadow-lg: 0 20px 60px rgba(232,69,122,.18);

    /* ── Tipografía ── */
    --font-display: 'Playfair Display', serif;
    --font-body:    'DM Sans', sans-serif;
}

/* ── Reset base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
    font-family: var(--font-body);
    background:  var(--cream);
    color:       var(--slate);
    line-height: 1.65;
    overflow-x:  hidden;
}

/* ── Utilidades compartidas ── */
.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 13px 28px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all .25s ease;
    letter-spacing: .02em;
    white-space: nowrap;
}
.btn-primary  { background: var(--rose);   color: var(--white); box-shadow: 0 4px 18px rgba(232,69,122,.35); }
.btn-primary:hover  { background: var(--rose-dk); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(232,69,122,.45); }
.btn-ghost    { background: transparent; color: var(--rose); border: 2px solid var(--rose); }
.btn-ghost:hover    { background: var(--rose); color: var(--white); transform: translateY(-2px); }
.btn-amber    { background: var(--amber); color: var(--white); box-shadow: 0 4px 18px rgba(217,122,42,.3); }
.btn-amber:hover    { background: var(--amber-dk); transform: translateY(-2px); }
.btn-dark     { background: var(--brown); color: var(--white); }
.btn-dark:hover     { background: #2a0f18; transform: translateY(-2px); }

/* Section shared */
section { padding: 88px 0; }
.section-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 10px;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--brown);
    line-height: 1.2;
    margin-bottom: 14px;
}
.section-desc {
    font-size: 1rem;
    color: var(--slate);
    font-weight: 300;
    max-width: 540px;
}
.section-head { margin-bottom: 52px; }
.section-head.centered { text-align: center; }
.section-head.centered .section-desc { margin: 0 auto; }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: none; }