/* ============================================================
   1. VARIABLES & THEMES (Light/Dark)
   ============================================================ */
:root {
    --bg:      #F5F2ED;
    --bg2:     #EAE6DF;
    --bg3:     #DEDAD2;
    --fg:      #1A1714;
    --fg2:     #4A4540;
    --fg3:     #8A8178;
    --accent:  #C8553D;
    --accent2: #E8734A;
    --border:  rgba(26,23,20,.18);
    --border-s:rgba(26,23,20,.35);
}

.dark {
    --bg:      #131210;
    --bg2:     #1C1A17;
    --bg3:     #252219;
    --fg:      #F0EDE8;
    --fg2:     #C4BFB6;
    --fg3:     #8E8780;
    --accent:  #E8734A;
    --accent2: #F0957A;
    --border:  rgba(240,237,232,.1);
    --border-s:rgba(240,237,232,.28);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

html { 
    overflow-x: hidden; 
    scroll-behavior: smooth;
}

body {
    font-family: 'Barlow', sans-serif;
    background: var(--bg);
    color: var(--fg);
    transition: background 0.4s ease, color 0.4s ease;
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Ocultar elementos de UI propios del cursor nativo SOLO si JS está activo */
@media (hover: hover) and (pointer: fine) {
    body.js-loaded, body.js-loaded a, body.js-loaded button, body.js-loaded select { cursor: none !important; }
}

/* ============================================================
   3. TYPOGRAPHY & UTILITIES
   ============================================================ */
.sec-lbl { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg3); }
.sec-num { font-size: 10px; letter-spacing: 0.12em; color: var(--accent); }
.tag-pill {
    display: inline-block; padding: 4px 12px; background: var(--accent);
    color: #fff; font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 700; margin-bottom: 36px;
}
.side-label {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg3);
}

/* Animations */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.clip-reveal { overflow: hidden; }
.clip-inner { transform: translateY(100%); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.clip-inner.visible { transform: translateY(0); }

/* ============================================================
   4. LAYOUT MOBILE-FIRST
   ============================================================ */
/* Nav - Mobile Fix */
.main-nav {
    position: sticky; top: 0; z-index: 1000;
    background: var(--bg); border-bottom: 1px solid var(--border-s);
    display: flex; flex-wrap: nowrap;
    align-items: center; justify-content: space-between;
    transition: background 0.4s;
}
.nav-logo { 
    padding: 16px; font-family: 'Barlow Condensed', sans-serif; 
    font-weight: 900; font-size: 12px; letter-spacing: 0.2em; 
    text-transform: uppercase; color: var(--fg); flex-grow: 1; 
}
.accent-dot { color: var(--accent); }
.lang-wrap { display: flex; border-left: none; border-right: 1px solid var(--border-s); }
.lang-btn { background: none; border: none; padding: 18px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--fg3); transition: all 0.2s; min-height: 48px; }
.lang-btn.active, .lang-btn:hover { color: var(--accent); }
.nav-cta { display: none; }
.theme-btn { padding: 18px 16px; font-size: 16px; color: var(--fg2); background: none; border: none; transition: color 0.3s; min-height: 48px; }
.theme-btn:hover { color: var(--accent); }

/* Hero - Mobile UX */
.hero-section { 
    min-height: 80vh; /* Más pequeño para que no quede hueco en móvil */
    display: flex; 
    flex-direction: column; 
    justify-content: center; /* Centrado en móvil */
    padding: 120px 16px 64px; 
    border-bottom: 1px solid var(--border-s); 
}
.hero-clip { overflow: hidden; line-height: 0.88; }
.hero-word { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(52px, 12vw, 138px); text-transform: uppercase; letter-spacing: -0.025em; transform: translateY(112%); transition: color 0.4s; }
.hero-word.accent { color: var(--accent); }
.hero-cta-wrap { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.hero-btn-primary, .hero-btn-secondary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 16px 24px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; transition: all 0.2s; }
.hero-btn-primary { background: var(--accent); color: #fff; }
.hero-btn-primary:hover { background: var(--fg); transform: translateY(-2px); }
.hero-btn-secondary { border: 1px solid var(--border-s); color: var(--fg2); }
.hero-btn-secondary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hero-sub { margin-top: 40px; border-top: 1px solid var(--border-s); display: flex; flex-direction: column; }
.hero-sub-item { padding: 18px 0; font-size: 12px; line-height: 1.6; color: var(--fg2); border-bottom: 1px solid var(--border-s); }
.hero-sub-item:last-child { border-bottom: none; }

/* Marquee */
.marquee-wrapper { border-bottom: 1px solid var(--border-s); overflow: hidden; padding: 16px 0; background: var(--fg); }
.marquee-track { display: flex; animation: marquee 28s linear infinite; white-space: nowrap; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-item { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bg); padding: 0 36px; transition: color 0.4s; }

/* Stats - Mobile Fix (1 columna) */
.stats-strip { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--border-s); }
.stat-cell { padding: 24px 16px; border-bottom: 1px solid var(--border-s); border-right: none; }
.stat-cell:last-child { border-bottom: none; }
.stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(32px, 8vw, 64px); color: var(--accent); line-height: 1; }
.stat-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); margin-top: 8px; }

/* Manifesto */
.manifesto-side { padding: 18px 16px; border-bottom: 1px solid var(--border-s); }
.manifesto-content { padding: 40px 16px; border-bottom: 1px solid var(--border-s); }
.manifesto-title-wrap h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(28px, 8vw, 62px); text-transform: uppercase; line-height: 1; margin: 20px 0; }
.manifesto-body { font-size: 14px; line-height: 1.8; color: var(--fg2); }

/* Headers de sección */
.sec-hdr { padding: 20px 16px; border-bottom: 1px solid var(--border-s); display: flex; justify-content: space-between; align-items: center; }

/* Services */
.svc-card { border-bottom: 1px solid var(--border-s); position: relative; overflow: hidden; transition: background 0.35s; }
.svc-card-header { display: grid; grid-template-columns: 40px 1fr; align-items: center; padding: 0 16px; position: relative; z-index: 1; }
.svc-card-header::before { content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--fg); transition: width 0.4s ease; z-index: -1; }
.svc-card:hover .svc-card-header::before { width: 100%; }
.svc-num, .svc-name { padding: 20px 0; transition: color 0.3s; }
.svc-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(18px, 5vw, 38px); text-transform: uppercase; }
.svc-tag { display: block; font-size: 9px; color: var(--fg3); margin-top: -10px; padding-bottom: 20px; grid-column: 2; }
.svc-toggle { display: none; }
.svc-card:hover .svc-num, .svc-card:hover .svc-name { color: var(--bg); }
.svc-card:hover .svc-tag { color: var(--accent2); }

.svc-panel { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; background: var(--bg2); }
.svc-card.open .svc-panel { max-height: 800px; }
.svc-panel-inner { padding: 24px 16px; display: flex; flex-direction: column; gap: 20px; }
.svc-includes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.svc-include-tag { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--border-s); color: var(--fg3); font-weight: 700; }
.svc-price-value { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 24px; color: var(--accent); }
.svc-cta-btn { display: inline-block; margin-top: 16px; padding: 10px 20px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; }

/* Banner */
.cta-banner { background: var(--fg); padding: 48px 16px; display: flex; flex-direction: column; gap: 24px; border-bottom: 1px solid var(--border-s); }
.cta-banner-headline { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(28px, 8vw, 62px); text-transform: uppercase; color: var(--bg); line-height: 1; }
.cta-banner-headline span { color: var(--accent2); }
.cta-big-btn { display: inline-block; padding: 16px 24px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; text-align: center; width: 100%; min-height: 48px; }

/* Contact Form */
.contact-grid { display: flex; flex-direction: column; }
.contact-form-wrap { padding: 40px 16px; }
.form-group { margin-bottom: 24px; }
.form-label { display: block; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); margin-bottom: 8px; font-weight: 700; }
.form-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-s); padding: 10px 0; font-size: 14px; color: var(--fg); outline: none; transition: border-color 0.2s; }
.form-input:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-submit { padding: 16px 24px; background: var(--accent); color: #fff; border: none; font-size: 10px; font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; }

/* Footer */
.footer-side { padding: 32px 16px; border-bottom: 1px solid var(--border-s); display: flex; justify-content: space-between; align-items: center; }
.footer-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 14px; letter-spacing: 0.2em; color: var(--fg); }
.footer-main { padding: 48px 16px; position: relative; }
.email-link { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(24px, 8vw, 52px); text-transform: uppercase; color: var(--fg); display: block; margin-top: 16px; }

/* ============================================================
   5. MEDIA QUERIES (Desktop scaling)
   ============================================================ */
@media (min-width: 768px) {
    /* Nav */
    .main-nav { display: grid; grid-template-columns: 1fr auto auto auto; }
    .nav-logo { padding: 16px 28px; }
    .lang-wrap { border-left: none; }
    .lang-btn { padding: 16px 18px; border-right: 1px solid var(--border); min-height: auto; }
    .lang-btn:last-child { border-right: none; }
    .nav-cta { display: flex; align-items: center; padding: 0 20px; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); border-left: 1px solid var(--border-s); transition: background 0.2s, color 0.2s; }
    .nav-cta:hover { background: var(--accent); color: #fff; }
    .theme-btn { border-left: 1px solid var(--border-s); min-height: auto; }

    /* Layout general adjustments */
    .hero-section { 
        padding: 96px 28px 40px; 
        min-height: 100vh; /* Vuelve a ocupar toda la pantalla en PC */
        justify-content: flex-end; /* Vuelve a empujar el texto hacia abajo en PC */
    }
    
    /* Reset Button widths on Desktop */
    .hero-cta-wrap { flex-direction: row; width: auto; }
    .hero-btn-primary, .hero-btn-secondary { width: auto; justify-content: flex-start; min-height: auto; }
    .cta-big-btn, .form-submit { width: auto; justify-content: flex-start; min-height: auto; }

    .hero-sub { flex-direction: row; }
    .hero-sub-item { flex: 1; border-bottom: none; }
    .hero-sub-item:first-child { border-right: 1px solid var(--border-s); padding-right: 32px; }
    .hero-sub-item:last-child { padding-left: 32px; }
    
    /* Stats - Desktop Fix (3 columnas) */
    .stats-strip { grid-template-columns: repeat(3, 1fr); }
    .stat-cell { border-bottom: none; border-right: 1px solid var(--border-s); padding: 36px 28px; }
    .stat-cell:last-child { border-right: none; }
    
    .manifesto-grid, .contact-grid { display: grid; grid-template-columns: 180px 1fr; }
    .manifesto-side, .contact-grid .side-label { padding: 48px 24px; border-right: 1px solid var(--border-s); border-bottom: none; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; }
    .manifesto-content { padding: 64px 48px; }

    .sec-hdr { padding: 26px 28px; }

    /* Services */
    .svc-card-header { grid-template-columns: 52px 1fr auto; padding: 0 28px; }
    .svc-tag { display: inline; margin-top: 0; padding-bottom: 0; grid-column: auto; text-align: right; }
    .svc-toggle { display: inline; font-size: 18px; margin-left: 16px; transition: transform 0.3s; }
    .svc-card.open .svc-toggle { transform: rotate(45deg); color: var(--accent2); }
    .svc-panel-inner { flex-direction: row; justify-content: space-between; padding: 32px 28px 36px 80px; align-items: start; }
    .svc-price-block { text-align: right; flex-shrink: 0; }

    /* Banner & Form */
    .cta-banner { flex-direction: row; justify-content: space-between; align-items: center; padding: 64px 28px; }
    .contact-form-wrap { padding: 64px 48px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

    /* Footer */
    .footer-grid { display: grid; grid-template-columns: 180px 1fr; min-height: 36vh; }
    .footer-side { flex-direction: column; align-items: flex-start; padding: 44px 24px; border-right: 1px solid var(--border-s); border-bottom: none; }
    .footer-main { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; transition: background 0.3s; }
    .footer-main:hover { background: var(--fg); }
    .footer-main:hover .email-link { color: var(--bg); }
    .foot-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform 0.5s; transform-origin: left; }
    .footer-main:hover .foot-bar { transform: scaleX(1); }
}

/* ============================================================
   6. CUSTOM CURSOR (Only Desktop non-touch)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    #cur, #cur-ring { display: block; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); border-radius: 50%; }
    #cur { width: 10px; height: 10px; background: var(--accent); transition: width 0.15s, height 0.15s, background 0.3s; }
    #cur-ring { width: 36px; height: 36px; border: 1.5px solid var(--accent); opacity: 0.55; transition: border-color 0.3s, width 0.2s, height 0.2s; z-index: 9998; }
    #cur.big { width: 56px; height: 56px; background: transparent; border: 1.5px solid var(--accent); }
}
@media (hover: none) or (pointer: coarse) {
    #cur, #cur-ring { display: none !important; }
}