/* Design tokens (light) */
:root {
    --color-bg: #ffffff;
    --color-bg-alt: #fbfbfb;
    --color-surface: #ffffff;
    --color-text: #1f2937;
    --service-icon-primary: #0078d7;
    --service-icon-teal: #0ea5a3;
    --service-icon-gold: #ffbb00;
    --service-icon-default: #ff6b6b;
    --color-text-muted: #6b7280;
    --color-border: #e6e6e6;
    --color-brand: #0078d7;
    --color-brand-accent: #0062ad;
    --color-hero-overlay: rgba(0,0,0,0.35);
    --shadow-sm: 0 6px 18px rgba(15,23,42,0.06);
    --shadow-xs: 0 6px 18px rgba(15,23,42,0.04);
    --transition-fast: 160ms ease;
}

/* Dark theme tokens */
[data-theme="dark"] {
    --color-bg: #0f172a;
    --color-bg-alt: #162136;
    --color-surface: #1e293b;
    --color-text: #e2e8f0;
    --service-icon-primary: #7ec7ff;
    --service-icon-teal: #5eead4;
    --service-icon-gold: #ffd36b;
    --service-icon-default: #ff9b9b;
    --color-text-muted: #94a3b8;
    --color-border: #243247;
    --color-brand: #3aa3ff;
    --color-brand-accent: #1d8fe8;
    --color-hero-overlay: rgba(0,0,0,0.55);
    --shadow-sm: 0 6px 18px rgba(0,0,0,0.5);
    --shadow-xs: 0 6px 18px rgba(0,0,0,0.4);
}

/* Respect user preference initially */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

/* Reset + base */
* { box-sizing: border-box; }
html,body { height: 100%; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: var(--color-text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background: var(--color-bg);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.no-scroll { overflow:hidden; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }
.container { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 40; transition: background var(--transition-fast), border-color var(--transition-fast); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }

/* Ensure the header container establishes a stacking context so the mobile nav can position above content */
.header-inner { position: relative; z-index: 80; }
.brand { display:flex; gap:10px; align-items:center; }
.brand svg { border-radius:6px; }
.brand-text strong { display:block; font-family: 'Montserrat', sans-serif; font-weight:700; }
.brand-text span { display:block; font-size:12px; color:#6b7280; }
/* Hide the small tagline under the brand in the header when it's not desired */
[data-section="tagline"] { display: none !important; }

.nav { display:flex; gap:12px; align-items:center; }
.nav a { color:var(--color-text); text-decoration:none; font-weight:500; font-size:14px; transition: color var(--transition-fast); }
.nav a:hover, .nav a:focus { color: var(--color-brand); }
.btn { padding:8px 14px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.btn-ghost { border:1px solid var(--color-border); background:transparent; color:var(--color-text); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.btn-ghost:hover, .btn-ghost:focus { background:var(--color-bg-alt); }
.btn-primary { background:var(--color-brand); color:white; border:none; transition: background var(--transition-fast); }
.btn-primary:hover, .btn-primary:focus { background:var(--color-brand-accent); }
.btn-secondary { background:#f3f4f6; color:#111827; border:none; transition: background var(--transition-fast), color var(--transition-fast); }
[data-theme="dark"] .btn-secondary { background:#243247; color:var(--color-text); }
[data-theme="dark"] .btn-secondary:hover { background:#2f415a; }
.btn-whatsapp { background:#1da851; color:#fff; border:none; display:inline-flex; align-items:center; gap:6px; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background:#168843; }
.btn-whatsapp .wa-svg { width:20px; height:20px; display:block; }
.btn-whatsapp { font-weight:600; }
.btn-whatsapp span { display:inline-flex; align-items:center; }
.btn-whatsapp .wa-svg + span { margin-left:4px; }

/* Theme toggle */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; width:auto; }
.theme-toggle { position:relative; z-index:50; }
.theme-toggle .theme-icon { font-size:16px; line-height:1; transition: transform var(--transition-fast); }
.theme-toggle:active .theme-icon { transform: scale(.85); }
.lang-switch { display:flex; gap:4px; }

/* Header control buttons: ensure consistent sizing and responsive stacking */
.nav-controls { display:flex; gap:8px; align-items:center; }
.nav-controls .btn, .nav-controls #theme-toggle { height:40px; min-width:40px; padding:6px 10px; border-radius:8px; }
.nav-controls .btn { display:inline-flex; align-items:center; justify-content:center; }

@media (max-width:900px) {
    /* On small screens ensure controls are 3 equal buttons stacked in the nav open panel */
    .nav .nav-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding-top:6px; }
    .nav-controls .btn, .nav-controls #theme-toggle { height:44px; min-width:0; }
}

/* Hide the mobile hamburger toggle on wide screens; show it only for small viewports */
.nav-toggle { display: none; border: none; background: transparent; }
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
}
.lang-switch .btn { padding:6px 10px; font-size:12px; line-height:1; }
.lang-switch .btn .flag { display:inline-block; width:26px; height:18px; line-height:1; background-size:cover; background-position:center; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.lang-switch .btn .flag-es { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23AA151B'/><rect y='10' width='60' height='20' fill='%23F1BF00'/></svg>"); }
.lang-switch .btn .flag-en { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57 30'><rect width='57' height='30' fill='%23b22234'/><g fill='%23fff'><rect y='3' width='57' height='3'/><rect y='9' width='57' height='3'/><rect y='15' width='57' height='3'/><rect y='21' width='57' height='3'/><rect y='27' width='57' height='3'/></g><rect width='23' height='14' fill='%233c3b6e'/><g fill='%23fff'><circle cx='5' cy='4' r='1'/><circle cx='10' cy='4' r='1'/><circle cx='15' cy='4' r='1'/><circle cx='20' cy='4' r='1'/><circle cx='7.5' cy='7' r='1'/><circle cx='12.5' cy='7' r='1'/><circle cx='17.5' cy='7' r='1'/><circle cx='5' cy='10' r='1'/><circle cx='10' cy='10' r='1'/><circle cx='15' cy='10' r='1'/><circle cx='20' cy='10' r='1'/></g></svg>"); }
.lang-switch .btn[aria-current="true"] { background: var(--color-brand); color:#fff; border-color: var(--color-brand); }
[data-theme="dark"] .lang-switch .btn[aria-current="true"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); }

/* Hero */
.hero {
    /* Background image with fallback gradient for narrow/unsupported cases */
    /* NOTE: ajustar ruta relativa (el CSS está en styles/, la imagen en images/) */
    background-image: url('../images/banner1.webp'), linear-gradient(180deg,#0078d7 0%,#0070c9 100%);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 80px 0 40px;
    min-height: 420px;
    position: relative;
    display: flex;
    align-items: center;
}
.hero::before {
    /* Dark overlay to keep text readable on top of the photo */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-hero-overlay);
    z-index: 0;
    transition: background var(--transition-fast);
}
.hero-inner { text-align:center; width:100%; z-index:1; padding: 0 20px; margin: 0 auto; }
.hero h1 { font-family: 'Montserrat', sans-serif; font-size:38px; margin-bottom:12px; line-height:1.05; }
.lead { font-size:18px; opacity:0.95; margin-bottom:18px; }
.hero-ctas { display:flex; justify-content:center; gap:12px; margin-bottom:20px; }
.hero-features { list-style:none; display:flex; gap:18px; justify-content:center; padding:0; margin:18px 0 0; }
.hero-features li { background:rgba(255,255,255,0.08); padding:8px 12px; border-radius:999px; font-size:14px; }

/* Sections */
.section-light { background:var(--color-bg-alt); transition: background var(--transition-fast); }
.section-light, section { padding:56px 0; }
section h2 { text-align:center; font-family:'Montserrat', sans-serif; font-size:26px; margin-bottom:10px; }
.intro { text-align:center; max-width:760px; margin:0 auto; color:#4b5563; }

/* Center text for Tramitación SEC section */
#tramitacion-sec .container { text-align: center; }
#tramitacion-sec p { max-width:760px; margin:0 auto 0.75rem; color:var(--color-text-muted); }

/* Distinct background so Tramitación SEC doesn't blend with "Sobre mí" */
#tramitacion-sec {
    /* subtle blue wash on top of the section to keep contrast */
    background: linear-gradient(180deg, rgba(0,120,215,0.06), rgba(0,120,215,0.03));
}

/* Dark theme variant: slightly stronger blue for visibility */
[data-theme="dark"] #tramitacion-sec {
    background: linear-gradient(180deg, rgba(26,115,200,0.12), rgba(26,115,200,0.08));
}

/* Services grid */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:22px; }
.card { background:var(--color-surface); border-radius:12px; padding:20px; box-shadow:var(--shadow-sm); text-align:center; transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,23,42,0.15); }
[data-theme="dark"] .card:hover { box-shadow:0 10px 28px rgba(0,0,0,0.55); }

/* Custom Elements base (inherit existing card look) */
service-card { display:block; }
service-card .icon { font-size:30px; margin-bottom:8px; }
testimonial-item { display:block; }
testimonial-item blockquote { margin:0; font-style:italic; }
.card .icon { font-size:30px; margin-bottom:8px; }
.card h3 { margin:8px 0; font-size:18px; }
.card p { color:#6b7280; font-size:14px; }

.card-head { display:flex; justify-content:center; align-items:center; margin-bottom:10px; }
.card-head svg { width:40px; height:40px; display:block; }

/* Ensure inline SVG icons render as solid glyphs and inherit color. Raster images (img.service-icon)
   should not be tinted by CSS, so separate rules for svg vs img. */
.service-icon { width:44px; height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.service-icon svg, .service-card svg.service-icon { width:44px; height:44px; fill: currentColor; color: var(--service-icon-default); }
.service-icon img, img.service-icon { width:44px; height:44px; display:block; object-fit:contain; }
/* Ensure raster icons keep their original colors and are not affected by theme swapping */
img.service-icon, .service-icon img {
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
}

.service-card .card-head svg { width:40px; height:40px; display:block; }

/* Tint icons per service with theme-aware variables */
.ic-accent-primary { color: var(--service-icon-primary); }
.ic-accent-teal { color: var(--service-icon-teal); }
.ic-accent-gold { color: var(--service-icon-gold); }
.ic-accent-default { color: var(--service-icon-default); }

/* Slight layout tweaks to match reference: more padding and subtle text color */
.service-card { padding:22px; border-radius:14px; }
.service-card h3 { margin-top:8px; margin-bottom:6px; font-size:18px; }
.service-card p { color: var(--color-text-muted); }

/* Testimonial */
.testimonial { max-width:720px; margin:18px auto 0; background:var(--color-surface); padding:20px; border-radius:10px; box-shadow:var(--shadow-xs); }
.testimonial p { font-style:italic; }
.testimonial cite { display:block; margin-top:10px; color:#6b7280; font-size:13px; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; gap:24px; }
.contact-grid .contact-info { max-width:640px; }
.contact-grid .contact-actions { justify-content:center; }
.contact-info h2 { margin-top:0; }
.muted { color:#6b7280; }
.contact-form { background:var(--color-surface); padding:18px; border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,0.06); transition: background var(--transition-fast); }
[data-theme="dark"] .contact-form { box-shadow:0 8px 28px rgba(0,0,0,0.55); }
.contact-form label { display:block; margin-bottom:12px; font-size:13px; color:#374151; }
.contact-form input, .contact-form textarea { width:100%; padding:10px 12px; border:1px solid #e6e6e6; border-radius:8px; font-size:14px; }
.form-actions { display:flex; gap:10px; margin-top:10px; }
.form-status { margin-top:10px; font-size:13px; }

/* Footer */
.site-footer { border-top:1px solid var(--color-border); padding:18px 0; color:var(--color-text-muted); }
.footer-inner { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.small { font-size:13px; }

/* Responsive */
@media (max-width:900px) {
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .contact-grid { grid-template-columns:1fr; }
    .hero h1 { font-size:28px; }
}

@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 24px; }
    .hero-ctas { flex-direction: column; align-items: center; }
    .hero-features { flex-direction: column; gap: 12px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .header-inner { padding:12px 14px; position:relative; }
    .brand { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
    .nav { position:absolute; top:100%; margin-top:4px; left:0; right:0; background:var(--color-surface); flex-direction:column; align-items:stretch; padding:4px 16px 16px; border-bottom:1px solid var(--color-border); box-shadow:0 6px 18px rgba(0,0,0,0.08); transform-origin:top center; max-height:0; overflow:hidden; opacity:0; transition:max-height 260ms ease, opacity 200ms ease; z-index:90; }
    .nav.open { max-height:480px; opacity:1; }
    /* Solo los links de primer nivel ocupan ancho completo */
    .nav > a, .nav > .btn { width:100%; justify-content:flex-start; padding:10px 4px; }
    .nav > a + a { border-top:1px solid var(--color-border); }
    /* compact spacing before controls */
    .nav .nav-controls { margin-top:6px; }
    /* Controles (tema + idiomas) en una sola fila */
    /* Tres botones (tema, ES, EN) iguales en una sola línea */
    .nav .nav-controls { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding-top:6px; }
    .nav .lang-switch { display:contents; }
    .nav #theme-toggle, .nav .lang-switch .btn { width:100%; padding:10px 0; justify-content:center; font-size:14px; line-height:1; }
    .nav #theme-toggle { display:flex; align-items:center; }
    .nav .nav-controls button { height:42px; }
    .nav .lang-switch .btn { flex:1 1 auto; }
    .hero { padding:70px 0 36px; }
    .hero-inner { padding:0 10px; }
}

/* Hamburger button (works on all breakpoints but mainly visible <900px) */
.nav-toggle { width:42px; height:36px; display:inline-flex; flex-direction:column; justify-content:center; gap:5px; padding:4px 8px; cursor:pointer; border-radius:8px; }
.nav-toggle .bar { display:block; width:100%; height:3px; background:var(--color-text); border-radius:2px; transition:transform 200ms ease, opacity 200ms ease; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Clients logo marquee */
.logo-marquee { position: relative; overflow: visible; /* allow logos to extend visually without clipping */ margin-top:22px; height:200px; z-index:30; margin-bottom:28px; }
.logo-rows { display:flex; flex-direction:column; gap:8px; height:100%; }
.logo-track { display:flex; gap:20px; align-items:center; will-change:transform; min-width:200%; }
.carousel { width: 100%; overflow: hidden; }
.carousel .logo-track { min-width: 200%; }
.logo-track--top { align-self:flex-start; }
.logo-track--bottom { align-self:flex-end; }
.logo-item { flex: 0 0 auto; display:flex; align-items:center; justify-content:center; min-width:160px; height:110px; padding:8px; box-sizing:border-box; }

/* Make logos a bit larger for legibility */
.logo-item img, .logo-item svg { height:100px; width:auto; max-width:260px; }
/* Prevent inline-image whitespace/jump and improve compositing */
.logo-item img { display: block; line-height: 0; }
.logo-track { backface-visibility: hidden; transform-style: preserve-3d; }

/* small spacer used to break repeated identical logos */
.logo-spacer { display:inline-block; width:8px; height:1px; }
.logo-spacer.repeat-break { width:8px; }
/* JS will apply explicit animation and duration to each .logo-track for speed control */

/* Remove static transform on bottom track — the JS animation offsets the row. Keeping a CSS transform here
    caused intermittent jumps because WAAPI and CSS were fighting over the same transform property. */
.logo-track--bottom { transform: none; }

/* Ensure pointer styles are neutral since drag removed */
.logo-marquee { touch-action: auto; cursor: default; user-select: none; }
.logo-marquee.is-dragging { cursor: default; outline: none; box-shadow: none; }

/* Reuse marquee keyframes; JS will configure durations per track */
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Ensure testimonios sits below the marquee visually */
section#testimonios { padding-top: 36px; position: relative; z-index: 20; }

/* Utility */
.muted { color:var(--color-text-muted); }
.text-center { text-align:center; }