@charset "UTF-8";
/* ==========================================================================
   lafabricadepegatinas v.2027 — BASE
   Archivo: css/base.css
   Autor:   pacocaetano | lafabricadepegatinas.com
   Versión: 2027.1

   Variables globales, reset, tipografía y colores del sistema.
   Color principal: #993399 (púrpura LFDP)
   Modo: día (light) fijo — sin toggle
   ========================================================================== */


/* ==========================================================================
   01. VARIABLES GLOBALES
   ========================================================================== */

:root {
    /* Fondos — degradado suave igual que digitalVCard light */
    --lfdp-bg:              #f5f5f7;
    --lfdp-bg2:             #ffffff;
    --lfdp-bg3:             #e8e8ed;
    --lfdp-bg4:             #efefef;
    --lfdp-bg-gradient:     linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);

    /* Textos — mismos tonos que digitalVCard light */
    --lfdp-txt:             #1d1d1f;
    --lfdp-txt2:            #3a3a3c;
    --lfdp-txt3:            #6e6e73;
    --lfdp-txt4:            #a1a1a6;

    /* Acento principal: púrpura LFDP */
    --lfdp-accent:          #993399;
    --lfdp-accent2:         #bb44bb;
    --lfdp-accent3:         #772277;

    /* Degradados */
    --lfdp-gradient:        linear-gradient(135deg, #993399 0%, #bb44bb 100%);
    --lfdp-gradient-v:      linear-gradient(180deg, #993399 0%, #bb44bb 100%);
    --lfdp-gradient-soft:   linear-gradient(135deg, rgba(153,51,153,0.12) 0%, rgba(187,68,187,0.06) 100%);

    /* Bordes */
    --lfdp-border:          rgba(0,0,0,0.08);
    --lfdp-border2:         rgba(0,0,0,0.16);

    /* Tarjetas */
    --lfdp-card-bg:         #ffffff;
    --lfdp-card-shadow:     0 4px 24px rgba(153,51,153,0.08);
    --lfdp-card-shadow-hover: 0 8px 40px rgba(153,51,153,0.16);

    /* Inputs */
    --lfdp-input-bg:        #ffffff;
    --lfdp-input-border:    rgba(0,0,0,0.14);
    --lfdp-input-focus:     #993399;

    /* Nav */
    --lfdp-nav-bg:          rgba(245,245,247,0.88);

    /* Hero glow */
    --lfdp-hero-glow:       radial-gradient(ellipse 90% 70% at 50% -10%, rgba(153,51,153,0.14) 0%, transparent 65%);

    /* Tipografía */
    --lfdp-font:            'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
    --lfdp-font-size:       16px;
    --lfdp-line-height:     1.6;

    /* Espaciados */
    --lfdp-space-xs:        8px;
    --lfdp-space-sm:        16px;
    --lfdp-space-md:        24px;
    --lfdp-space-lg:        48px;
    --lfdp-space-xl:        80px;
    --lfdp-space-xxl:       120px;

    /* Radios */
    --lfdp-radius-sm:       8px;
    --lfdp-radius-md:       14px;
    --lfdp-radius-lg:       20px;
    --lfdp-radius-pill:     999px;

    /* Transiciones */
    --lfdp-transition:      0.28s ease;
    --lfdp-transition-slow: 0.5s ease;

    /* Ancho máximo */
    --lfdp-max-width:       1080px;
    --lfdp-max-width-sm:    720px;
}


/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--lfdp-font);
    font-size: var(--lfdp-font-size);
    line-height: var(--lfdp-line-height);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--lfdp-bg);
    color: var(--lfdp-txt);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--lfdp-transition);
}

a:hover { color: var(--lfdp-accent); }

img {
    max-width: 100%;
    display: block;
}

ul, ol { list-style: none; }

button {
    font-family: var(--lfdp-font);
    cursor: pointer;
    border: none;
    background: none;
}


/* ==========================================================================
   03. TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.15;
    color: var(--lfdp-txt);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem,   5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }

p {
    color: var(--lfdp-txt2);
    font-size: 1rem;
    line-height: 1.7;
}

.lfdp-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lfdp-accent);
    margin-bottom: var(--lfdp-space-sm);
}

.lfdp-accent-text {
    background: var(--lfdp-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================================
   04. LAYOUT
   ========================================================================== */

.lfdp-container {
    max-width: var(--lfdp-max-width);
    margin: 0 auto;
    padding: 0 var(--lfdp-space-md);
}

.lfdp-section {
    padding: var(--lfdp-space-xl) 0;
}

.lfdp-section--lg {
    padding: var(--lfdp-space-xxl) 0;
}

.lfdp-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--lfdp-space-lg);
}

.lfdp-section-header p {
    margin-top: var(--lfdp-space-sm);
    font-size: 1.05rem;
}


/* ==========================================================================
   05. BOTONES
   ========================================================================== */

.lfdp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--lfdp-radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all var(--lfdp-transition);
    cursor: pointer;
}

.lfdp-btn--primary {
    background: var(--lfdp-gradient);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(153,51,153,0.30);
}

.lfdp-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(153,51,153,0.40);
    color: #ffffff;
}

.lfdp-btn--secondary {
    background: var(--lfdp-bg2);
    color: var(--lfdp-accent);
    border: 1.5px solid var(--lfdp-accent);
}

.lfdp-btn--secondary:hover {
    background: var(--lfdp-accent);
    color: #ffffff;
    transform: translateY(-2px);
}

.lfdp-btn--ghost {
    background: transparent;
    color: var(--lfdp-txt);
    border: 1.5px solid var(--lfdp-border2);
}

.lfdp-btn--ghost:hover {
    border-color: var(--lfdp-accent);
    color: var(--lfdp-accent);
}


/* ==========================================================================
   06. TARJETAS
   ========================================================================== */

.lfdp-card {
    background: var(--lfdp-card-bg);
    border-radius: var(--lfdp-radius-md);
    border: 1px solid var(--lfdp-border);
    box-shadow: var(--lfdp-card-shadow);
    padding: var(--lfdp-space-md);
    transition: box-shadow var(--lfdp-transition), transform var(--lfdp-transition);
}

.lfdp-card:hover {
    box-shadow: var(--lfdp-card-shadow-hover);
    transform: translateY(-3px);
}


/* ==========================================================================
   07. UTILIDADES
   ========================================================================== */

.lfdp-text-center { text-align: center; }
.lfdp-text-left   { text-align: left; }
.lfdp-mt-sm       { margin-top: var(--lfdp-space-sm); }
.lfdp-mt-md       { margin-top: var(--lfdp-space-md); }
.lfdp-mt-lg       { margin-top: var(--lfdp-space-lg); }
.lfdp-hidden      { display: none !important; }

.lfdp-divider {
    width: 48px;
    height: 3px;
    background: var(--lfdp-gradient);
    border-radius: var(--lfdp-radius-pill);
    margin: var(--lfdp-space-sm) auto;
}

.lfdp-section-glow {
    background: var(--lfdp-hero-glow);
}


/* ==========================================================================
   08. MEDIA QUERIES BASE
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --lfdp-space-xl:  48px;
        --lfdp-space-xxl: 72px;
    }
    .lfdp-container {
        padding: 0 var(--lfdp-space-sm);
    }
}

@media (max-width: 480px) {
    :root {
        --lfdp-space-xl:  32px;
        --lfdp-space-xxl: 56px;
    }
}