@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

:root {
    --teal:#008272; --teal-light:#E6F3F2; --navy:#0F172A;
    --surface:#FFFFFF; --surface-2:#F5F5F5; --surface-3:#EFF6FF;
    --border:#E5E7EB; --border-2:#D1D5DB;
    --text-1:#111827; --text-2:#374151; --text-3:#6B7280; --text-4:#9CA3AF;
    --shadow-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
    --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.05);
    --shadow-lg:0 8px 24px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06);
    --radius:8px; --radius-lg:12px;
}

html { scroll-behavior: smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--text-1); background:var(--surface); line-height:1.6; -webkit-font-smoothing:antialiased; }
.container { max-width:1160px; margin:0 auto; padding:0 24px; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ── NAV ─────────────────────────────────────────────────── */
nav { position:fixed; top:0; left:0; right:0; z-index:200; height:60px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; }
.nav-inner { max-width:1160px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { height:28px; width:auto; }
.nav-links { display:flex; align-items:center; gap:6px; list-style:none; }
.nav-links a { font-size:14px; font-weight:500; color:var(--text-2); padding:6px 12px; border-radius:6px; transition:background .15s,color .15s; }
.nav-links a:hover { background:var(--surface-2); color:var(--text-1); }
.nav-links .nav-cta { background:var(--teal); color:#fff; font-weight:600; padding:7px 16px; }
.nav-links .nav-cta:hover { background:#006b5f; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:20px; height:2px; background:var(--text-1); border-radius:2px; transition:.2s; }
@media(max-width:768px) {
    .nav-links { display:none; position:absolute; top:60px; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch; gap:0; padding:8px; }
    .nav-links.open { display:flex; }
    .nav-links a { padding:10px 12px; }
    .hamburger { display:flex; }
}

/* ── HERO ────────────────────────────────────────────────── */
#hero { padding-top:60px; min-height:100vh; display:flex; align-items:center; background:linear-gradient(160deg,var(--surface) 55%,var(--surface-3) 100%); position:relative; overflow:hidden; }
#hero::before { content:''; position:absolute; top:-80px; right:-80px; width:500px; height:500px; background:radial-gradient(circle,rgba(0,130,114,.08) 0%,transparent 70%); pointer-events:none; }
.hero-inner { max-width:1160px; margin:0 auto; padding:80px 24px; display:grid; grid-template-columns:1fr 380px; gap:64px; align-items:center; }
.hero-name { font-size:clamp(40px,5.5vw,64px); font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--navy); margin-bottom:16px; }
.hero-hook { font-size:clamp(18px,2.2vw,22px); font-weight:500; color:var(--text-3); margin-bottom:24px; line-height:1.5; border-left:3px solid var(--teal); padding-left:16px; }
.hero-desc { font-size:16px; color:var(--text-2); line-height:1.8; margin-bottom:36px; max-width:500px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 24px; font-size:14px; font-weight:600; border-radius:var(--radius); transition:all .15s; cursor:pointer; border:1.5px solid transparent; font-family:inherit; }
.btn-primary { background:var(--teal); color:#fff; border-color:var(--teal); }
.btn-primary:hover { background:#006b5f; border-color:#006b5f; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-secondary { background:var(--surface); color:var(--text-1); border-color:var(--border-2); }
.btn-secondary:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-1px); }
.hero-metrics { display:flex; gap:28px; margin-top:40px; padding-top:32px; border-top:1px solid var(--border); }
.hero-metric .val { font-size:26px; font-weight:800; color:var(--navy); line-height:1; }
.hero-metric .lbl { font-size:12px; color:var(--text-3); margin-top:3px; }
.hero-photo-wrap { position:relative; }
.hero-photo-card { background:var(--surface-3); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(0,130,114,.1); aspect-ratio:4/5; }
.hero-photo-card img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-cert-badge { position:absolute; bottom:-16px; left:-16px; background:var(--surface); border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow-lg); border:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.cert-icon { width:36px; height:36px; background:var(--teal); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cert-icon svg { width:20px; height:20px; color:white; }
.cert-text .cert-title { font-size:13px; font-weight:700; color:var(--text-1); }
.cert-text .cert-sub { font-size:11px; color:var(--text-3); }
@media(max-width:900px) {
    .hero-inner { grid-template-columns:1fr; gap:48px; }
    .hero-photo-wrap { max-width:300px; margin:0 auto; }
    .hero-photo-card { aspect-ratio:1/1; }
    #hero { min-height:auto; }
}

/* ── SECTIONS ────────────────────────────────────────────── */
.section { padding:88px 0; }
.section-alt { background:var(--surface-2); }
.section-blue { background:var(--surface-3); }
.label { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin-bottom:10px; }
.section-title { font-size:clamp(24px,3.5vw,36px); font-weight:800; letter-spacing:-.02em; color:var(--navy); line-height:1.2; margin-bottom:12px; }
.section-sub { font-size:16px; color:var(--text-2); max-width:560px; line-height:1.8; margin-bottom:48px; }

/* ── SERVICES ────────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; transition:box-shadow .2s,border-color .2s,transform .2s; }
.service-card:hover { box-shadow:var(--shadow-md); border-color:var(--teal); transform:translateY(-2px); }
.service-icon { width:48px; height:48px; margin-bottom:20px; display:flex; align-items:center; }
.service-icon img { width:100%; height:100%; object-fit:contain; }
.service-card h3 { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.service-card p { font-size:14px; color:var(--text-2); line-height:1.75; margin-bottom:18px; }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-size:11px; font-weight:600; color:var(--teal); background:var(--teal-light); border-radius:4px; padding:3px 8px; border:1px solid rgba(0,130,114,.15); }
@media(max-width:768px) { .services-grid { grid-template-columns:1fr; } }

/* ── WHY ─────────────────────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.why-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 28px; display:flex; gap:16px; transition:box-shadow .2s,border-color .2s; }
.why-card:hover { box-shadow:var(--shadow-sm); border-color:var(--teal); }
.why-num { flex-shrink:0; width:34px; height:34px; background:var(--teal); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.why-card h3 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.why-card p { font-size:13px; color:var(--text-2); line-height:1.7; }
@media(max-width:768px) { .why-grid { grid-template-columns:1fr; } }

/* ── CAROUSEL — SHOWCASE DESIGN ──────────────────────────── */
.carousel-section {
    position:relative; overflow:hidden;
    background:var(--surface-2);
    padding:88px 0 64px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.carousel-section::before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 100%, rgba(0,130,114,.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 0%, rgba(0,130,114,.04) 0%, transparent 50%);
    pointer-events:none;
}
.carousel-section .container { position:relative; z-index:1; }
.carousel-section .label { color:var(--teal); }
.carousel-section .section-title { color:var(--navy); }
.carousel-section .section-sub { color:var(--text-2); }
.carousel-viewport { position:relative; width:100%; overflow:hidden; padding:20px 0; z-index:1; }
.carousel-track {
    display:flex; align-items:stretch; justify-content:center; gap:40px;
    transition:transform .5s cubic-bezier(.4,0,.2,1);
}

/* ── Card: true flex layout — both columns same height ── */
.carousel-card {
    flex:0 0 920px; max-width:920px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; overflow:hidden;
    display:flex; align-items:stretch;
    transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s,filter .5s;
    transform:scale(0.85); opacity:0.25; filter:blur(2px);
}
.carousel-card.active {
    transform:scale(1); opacity:1; filter:none;
    box-shadow:var(--shadow-lg);
    border-color:rgba(0,130,114,.2);
}

/* ── Left side: 40%, normal flex flow ── */
.caso-card-left {
    width:40%; flex-shrink:0;
    display:flex; flex-direction:column;
    overflow:hidden;
    border-right:1px solid var(--border);
}

/* ── Right side: fills remaining width, image + meta ── */
.caso-card-right {
    flex:1;
    display:flex; flex-direction:column;
}
.caso-card-img { background:var(--surface-2); flex-shrink:0; }
.caso-card-img img { width:100%; height:auto; display:block; }
/* Placeholder for cases without image */
.carousel-card-img-placeholder {
    width:100%; aspect-ratio:16/9;
    background:linear-gradient(160deg, var(--surface-3) 0%, var(--teal-light) 50%, #d1fae5 100%);
    display:flex; align-items:center; justify-content:center;
    position:relative;
}
.carousel-card-img-placeholder::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 70%, rgba(0,130,114,.08) 0%, transparent 50%);
    pointer-events:none;
}
.carousel-card-img-placeholder svg { width:40px; height:40px; color:rgba(0,130,114,.25); position:relative; }
/* Meta area below image: fills ALL remaining right-column height */
.caso-card-meta-bottom {
    flex:1; display:flex; flex-direction:column;
    border-top:1px solid var(--border);
    background:var(--surface-2);
}

/* ── Card content area ── */
.caso-card-header {
    padding:20px 24px 10px; display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
}
.caso-client-logo { height:26px; display:flex; align-items:center; }
.caso-client-logo img { height:100%; width:auto; max-width:100px; object-fit:contain; }
.caso-client-logo span { font-size:14px; font-weight:700; color:var(--text-1); }
.caso-sector { font-size:11px; font-weight:600; color:var(--text-3); background:var(--surface-2); padding:3px 9px; border-radius:20px; }
.caso-ongoing {
    font-size:11px; font-weight:600; color:var(--teal); background:var(--teal-light);
    padding:3px 9px; border-radius:20px; border:1px solid rgba(0,130,114,.15);
}
.carousel-card .caso-body { padding:0 24px 12px; flex:1; min-height:0; overflow:hidden; }
.carousel-card .caso-body h3 { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:6px; line-height:1.35; }
.carousel-card .caso-body p { font-size:13px; color:var(--text-2); line-height:1.7; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Tags on left side ── */
.caso-tags-left {
    display:flex; flex-wrap:wrap; gap:6px; padding:10px 24px; flex-shrink:0;
    border-top:1px solid var(--border);
}

/* ── Stats bar: fills remaining right-side space ── */
.caso-stats {
    flex:1; display:flex; gap:0; align-items:center;
    padding:16px 20px; min-height:60px;
}
.caso-stat { flex:1; text-align:center; }
.caso-stat + .caso-stat { border-left:1px solid var(--border); }
.caso-stat .v { font-size:15px; font-weight:800; color:var(--navy); line-height:1; }
.caso-stat .l { font-size:9px; color:var(--text-3); margin-top:4px; line-height:1.3; text-transform:uppercase; letter-spacing:.03em; }

/* ── Card footer ── */
.carousel-card .caso-footer {
    padding:12px 24px 16px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex-shrink:0;
    border-top:1px solid var(--border);
}
.caso-read-more {
    font-size:13px; font-weight:600; color:var(--teal);
    display:inline-flex; align-items:center; gap:5px; transition:all .15s;
    padding:5px 12px; border-radius:6px; background:var(--teal-light); border:1px solid rgba(0,130,114,.15);
}
.caso-read-more:hover { background:var(--teal); color:#fff; text-decoration:none; }
.caso-read-more:hover svg path { stroke:#fff; }

/* ── Carousel nav ── */
.carousel-nav { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:36px; position:relative; z-index:1; }
.carousel-btn {
    width:48px; height:48px; border-radius:50%;
    background:var(--surface); border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s;
    box-shadow:var(--shadow-sm);
}
.carousel-btn:hover { border-color:var(--teal); background:var(--teal-light); }
.carousel-btn svg { width:18px; height:18px; color:var(--text-3); }
.carousel-btn:hover svg { color:var(--teal); }
.carousel-dots { display:flex; gap:8px; }
.carousel-dot { width:8px; height:8px; border-radius:50%; background:var(--border-2); transition:all .25s; cursor:pointer; }
.carousel-dot.active { background:var(--teal); width:28px; border-radius:4px; box-shadow:0 0 12px rgba(0,130,114,.3); }
.carousel-cta { text-align:center; margin-top:28px; position:relative; z-index:1; }
.carousel-cta a {
    font-size:14px; font-weight:600; color:var(--text-3);
    border-bottom:1.5px solid transparent; padding-bottom:2px; transition:all .15s;
}
.carousel-cta a:hover { color:var(--teal); border-color:var(--teal); }

@media(max-width:960px) {
    .carousel-card { flex:0 0 calc(100vw - 48px); max-width:calc(100vw - 48px); flex-direction:column; }
    .caso-card-left { width:100%; border-right:none; border-bottom:1px solid var(--border); }
    .caso-card-right { flex:1; }
    .caso-tags-left { padding:10px 16px; }
}
@media(max-width:600px) {
    .carousel-section { padding:64px 0 48px; }
    .caso-stats { flex-wrap:wrap; }
    .caso-stat { flex:0 0 33.33%; }
    .caso-stat + .caso-stat { border-left:none; }
}

/* ── CLIENTS ─────────────────────────────────────────────── */
.clients-band { padding:40px 0; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.clients-label { text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-4); margin-bottom:28px; }
.clients-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:40px; max-width:900px; margin:0 auto; padding:0 24px; }
.client-item { height:32px; display:flex; align-items:center; opacity:.5; filter:grayscale(1); transition:opacity .2s,filter .2s; }
.client-item:hover { opacity:.9; filter:grayscale(0); }
.client-item img { height:100%; width:auto; max-width:110px; object-fit:contain; }
.client-item span { font-size:15px; font-weight:700; color:var(--text-1); }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-wrap { max-width:720px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-q { display:flex; justify-content:space-between; align-items:center; padding:18px 0; cursor:pointer; gap:16px; user-select:none; }
.faq-q span { font-size:15px; font-weight:600; color:var(--navy); }
.faq-chevron { width:18px; height:18px; flex-shrink:0; border:1.5px solid var(--border-2); border-radius:4px; display:flex; align-items:center; justify-content:center; transition:background .15s,border-color .15s; }
.faq-chevron svg { width:10px; height:10px; transition:transform .2s; }
.faq-item.open .faq-chevron { background:var(--teal); border-color:var(--teal); }
.faq-item.open .faq-chevron svg { transform:rotate(180deg); }
.faq-item.open .faq-chevron svg path { stroke:#fff; }
.faq-a { font-size:14px; color:var(--text-2); line-height:1.8; max-height:0; overflow:hidden; transition:max-height .25s ease,padding .2s; }
.faq-item.open .faq-a { max-height:400px; padding-bottom:18px; }

/* ── CONTACTO ────────────────────────────────────────────── */
#contacto { padding:88px 0; background:var(--surface-3); border-top:1px solid var(--border); }
.contacto-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contacto-left .section-title { color:var(--navy); }
.contacto-left .section-sub { color:var(--text-2); margin-bottom:32px; }
.contact-detail { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:14px; }
.contact-detail-icon { width:40px; height:40px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-detail-icon svg { width:18px; height:18px; color:var(--teal); }
.contact-detail-text { color:var(--text-2); }
.contact-detail-text a { color:var(--text-1); font-weight:600; transition:color .15s; }
.contact-detail-text a:hover { color:var(--teal); }
.contact-detail-text small { display:block; font-size:12px; color:var(--text-3); }
.contact-form-card { background:var(--surface); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-md); border:1px solid var(--border); }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.fg input,.fg textarea { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:14px; color:var(--text-1); background:var(--surface); transition:border-color .15s,box-shadow .15s; }
.fg input:focus,.fg textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,130,114,.1); }
.fg textarea { min-height:100px; resize:vertical; }
.hp { display:none !important; }
.submit-btn { width:100%; padding:12px 20px; background:var(--teal); color:#fff; border:none; border-radius:var(--radius); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s,transform .15s; }
.submit-btn:hover { background:#006b5f; transform:translateY(-1px); }
.form-ok { background:var(--teal-light); color:var(--teal); font-size:14px; font-weight:500; padding:10px 14px; border-radius:var(--radius); margin-bottom:14px; border:1px solid rgba(0,130,114,.2); display:none; }
.form-ok.show { display:block; }
@media(max-width:900px) { .contacto-grid { grid-template-columns:1fr; gap:40px; } .form-row-2 { grid-template-columns:1fr; } }

/* ── FOOTER ──────────────────────────────────────────────── */
footer { background:var(--surface-2); border-top:1px solid var(--border); padding:28px 24px; }
.footer-inner { max-width:1160px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font-size:13px; color:var(--text-3); }
.footer-inner a { color:var(--text-3); transition:color .15s; }
.footer-inner a:hover { color:var(--teal); }

/* ── WHATSAPP ────────────────────────────────────────────── */
.wa { position:fixed; bottom:24px; right:24px; z-index:100; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(37,211,102,.4); transition:transform .15s,box-shadow .15s; }
.wa:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(37,211,102,.5); }
.wa svg { width:28px; height:28px; }

/* ── BLOG ────────────────────────────────────────────────── */
.blog-hero { padding-top:120px; padding-bottom:48px; background:var(--surface-3); border-bottom:1px solid var(--border); }

/* Blog filters */
.blog-filters { display:flex; gap:8px; margin-bottom:8px; }
.blog-filter {
    padding:8px 18px; font-size:13px; font-weight:600; font-family:inherit;
    border:1.5px solid var(--border); border-radius:var(--radius);
    background:var(--surface); color:var(--text-2); cursor:pointer;
    transition:all .15s;
}
.blog-filter:hover { border-color:var(--teal); color:var(--teal); }
.blog-filter.active { background:var(--teal); color:#fff; border-color:var(--teal); }

.blog-grid { display:flex; flex-direction:column; gap:20px; margin-top:24px; }
.blog-card.hidden { display:none; }
.blog-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; transition:box-shadow .2s,border-color .2s,transform .2s;
    display:grid; grid-template-columns:1fr 260px; min-height:0;
}
.blog-card:hover { box-shadow:var(--shadow-md); border-color:var(--teal); transform:translateY(-2px); }
.blog-card-cover {
    overflow:hidden; position:relative; order:2;
    border-left:1px solid var(--border);
}
.blog-card-cover img { width:100%; height:100%; object-fit:contain; background:var(--surface-2); }
.blog-card-cover--icon {
    background:linear-gradient(135deg,var(--teal-light) 0%,#d1fae5 40%,#e0f2fe 100%);
    display:flex; align-items:center; justify-content:center;
    position:relative;
}
.blog-card-cover--icon::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 20% 80%, rgba(0,130,114,.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0,130,114,.06) 0%, transparent 50%);
}
.blog-card-icon-img { width:72px!important; height:72px!important; object-fit:contain!important; opacity:.7; position:relative; z-index:1; filter:drop-shadow(0 2px 8px rgba(0,0,0,.1)); }
.blog-card-cover--empty {
    background:linear-gradient(135deg,var(--teal-light) 0%,var(--surface-3) 100%);
    display:flex; align-items:center; justify-content:center;
}
.blog-card-cover--empty svg { width:40px; height:40px; color:var(--teal); opacity:.3; }
.blog-card-content { padding:28px; display:flex; flex-direction:column; flex:1; order:1; }
.blog-card-meta { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.blog-card-cat { font-size:11px; font-weight:600; color:var(--teal); background:var(--teal-light); padding:3px 8px; border-radius:4px; border:1px solid rgba(0,130,114,.15); }
.blog-card-date { font-size:12px; color:var(--text-4); }
.blog-card-time { font-size:12px; color:var(--text-4); }
.blog-card h3 { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:10px; line-height:1.4; }
.blog-card p { font-size:14px; color:var(--text-2); line-height:1.75; flex:1; }
.blog-card-link { margin-top:16px; font-size:13px; font-weight:600; color:var(--teal); display:inline-flex; align-items:center; gap:6px; }
.blog-card-link:hover { text-decoration:underline; }
@media(max-width:768px) {
    .blog-card { grid-template-columns:1fr; }
    .blog-card-cover { order:1; height:180px; border-left:none; border-bottom:1px solid var(--border); }
    .blog-card-content { order:2; }
}

/* ── ARTICLE ─────────────────────────────────────────────── */
.article-hero { padding-top:120px; padding-bottom:40px; background:var(--surface-3); border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
.article-hero-text { max-width:720px; }
.article-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--text-3); margin-bottom:20px; transition:color .15s; }
.article-back:hover { color:var(--teal); }
.article-meta { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.article-hero h1 { font-size:clamp(28px,4vw,40px); font-weight:800; color:var(--navy); line-height:1.2; letter-spacing:-.02em; }
.article-hero-visual {
    display:flex; align-items:flex-end; justify-content:center;
}
.article-hero-visual--cover { }
.article-hero-visual--cover img { width:100%; height:auto; display:block; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.article-hero-visual--icon {
    background:linear-gradient(135deg,var(--teal-light) 0%,#d1fae5 30%,#e0f2fe 70%,var(--surface-3) 100%);
    border-radius:var(--radius-lg); border:1px solid rgba(0,130,114,.12);
}
.article-hero-visual--icon::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 30% 70%, rgba(0,130,114,.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(59,130,246,.06) 0%, transparent 50%);
    border-radius:var(--radius-lg);
}
.article-hero-visual--icon img {
    width:80px; height:80px; object-fit:contain; position:relative; z-index:1;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
.article-cover-wrap { background:var(--surface-2); border-bottom:1px solid var(--border); padding:32px 0; }
.article-cover {
    max-width:720px; margin:0 auto;
    border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-lg); border:1px solid var(--border);
    background:var(--surface-2);
}
.article-cover img { width:100%; height:auto; display:block; }
.article-content { max-width:720px; margin:0 auto; padding:56px 24px 88px; }
.article-content p { font-size:16px; color:var(--text-2); line-height:1.9; margin-bottom:20px; }
.article-content h3 { font-size:20px; font-weight:700; color:var(--navy); margin:36px 0 14px; }
.article-content strong { color:var(--text-1); }
.article-content em { color:var(--text-3); }
.article-cta { max-width:720px; margin:0 auto; padding:0 24px 88px; }
.article-cta-card { background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; text-align:center; }
.article-cta-card h3 { font-size:20px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.article-cta-card p { font-size:14px; color:var(--text-2); margin-bottom:20px; }
/* Article author card */
.article-author { max-width:720px; margin:0 auto; padding:0 24px 40px; }
.article-author-card {
    display:flex; align-items:center; gap:20px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:24px; transition:box-shadow .2s;
}
.article-author-card:hover { box-shadow:var(--shadow-sm); }
.article-author-photo { width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--teal-light); }
.article-author-photo img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.article-author-info { }
.article-author-name { font-size:15px; font-weight:700; color:var(--navy); }
.article-author-role { font-size:13px; color:var(--text-3); margin-top:2px; }
@media(max-width:768px) {
    .article-hero { padding-top:100px; }
}

/* ── ABOUT / SOBRE MÍ ───────────────────────────────────── */
/* ── ABOUT HERO — la tarjeta de perfil ES el hero ── */
.about-hero {
    padding-top:60px;
    min-height:85vh; display:flex; align-items:center;
    background:linear-gradient(160deg,var(--surface) 55%,var(--surface-3) 100%);
    position:relative; overflow:hidden;
}
.about-hero::before {
    content:''; position:absolute; top:-80px; right:-80px; width:500px; height:500px;
    background:radial-gradient(circle,rgba(0,130,114,.08) 0%,transparent 70%);
    pointer-events:none;
}

/* Profile card — the single hero element */
.about-profile-card {
    max-width:960px; margin:0 auto;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-lg);
    display:grid; grid-template-columns:300px 1fr; overflow:hidden;
}
.about-card-photo {
    background:linear-gradient(160deg,var(--surface-3) 0%,var(--teal-light) 100%);
    border-right:1px solid var(--border);
    overflow:hidden;
}
.about-card-photo img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.about-card-body { padding:40px 44px; display:flex; flex-direction:column; justify-content:center; }
.about-card-title { font-size:clamp(24px,3vw,30px); font-weight:800; color:var(--navy); line-height:1.2; letter-spacing:-.02em; margin-bottom:4px; }
.about-card-body h2 { font-size:28px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.about-card-role { font-size:16px; color:var(--teal); font-weight:600; margin-bottom:16px; }
.about-card-bio { font-size:15px; color:var(--text-2); line-height:1.85; margin-bottom:16px; }
.about-card-bio:last-of-type { margin-bottom:24px; }
.about-card-bio strong { color:var(--text-1); }
.about-card-badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.about-card-badge {
    display:flex; align-items:center; gap:8px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
    padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-1);
}
.about-card-badge svg { width:16px; height:16px; color:var(--teal); flex-shrink:0; }
.about-card-badge small { font-weight:400; color:var(--text-3); }
.about-card-actions { display:flex; gap:10px; flex-wrap:wrap; }

.about-main { padding:64px 0 88px; }
.about-profile { display:grid; grid-template-columns:1fr; gap:56px; align-items:start; max-width:900px; margin:0 auto; }

.about-bio-col h2 {
    font-size:22px; font-weight:800; color:var(--navy); letter-spacing:-.01em;
    margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--teal);
}
.about-bio-col h2:not(:first-child) { margin-top:40px; }
.about-bio-col > p { font-size:15px; color:var(--text-2); line-height:1.85; margin-bottom:16px; }

/* Timeline */
.about-timeline { position:relative; padding-left:28px; }
.about-timeline::before {
    content:''; position:absolute; left:7px; top:8px; bottom:8px;
    width:2px; background:var(--border);
}
.about-timeline-item { position:relative; margin-bottom:28px; }
.about-timeline-item:last-child { margin-bottom:0; }
.about-timeline-marker {
    position:absolute; left:-28px; top:6px;
    width:16px; height:16px; border-radius:50%;
    background:var(--surface); border:3px solid var(--teal);
}
.about-timeline-period {
    font-size:12px; font-weight:600; color:var(--teal);
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;
}
.about-timeline-content h3 { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.about-timeline-content p { font-size:14px; color:var(--text-2); line-height:1.75; }

/* Skills */
.about-skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.about-skill-group {
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px;
}
.about-skill-group h4 { font-size:13px; font-weight:700; color:var(--text-1); margin-bottom:10px; }

/* Work model cards */
.about-work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; }
.about-work-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px 24px;
}
.about-work-card h4 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.about-work-card p { font-size:13px; color:var(--text-2); line-height:1.7; }

@media(max-width:900px) {
    .about-hero { min-height:auto; padding-top:80px; padding-bottom:40px; }
    .about-profile-card { grid-template-columns:1fr; max-width:540px; }
    .about-card-photo { height:320px; }
    .about-card-photo img { width:100%; height:100%; object-fit:cover; object-position:top center; }
    .about-skills-grid { grid-template-columns:1fr; }
    .about-work-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
    .about-card-body { padding:28px 24px; }
    .about-card-photo { height:260px; }
}

/* ── ABOUT — METRICS BAR ─────────────────────────────────── */
.about-metrics-bar { background:var(--navy); padding:28px 0; }
.about-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.about-metric { text-align:center; padding:8px 16px; border-right:1px solid rgba(255,255,255,.1); }
.about-metric:last-child { border-right:none; }
.about-metric-val { font-size:28px; font-weight:800; color:#fff; line-height:1; }
.about-metric-lbl { font-size:12px; color:rgba(255,255,255,.55); margin-top:5px; line-height:1.3; }
@media(max-width:600px) { .about-metrics { grid-template-columns:repeat(2,1fr); } .about-metric:nth-child(2) { border-right:none; } .about-metric { border-bottom:1px solid rgba(255,255,255,.1); } .about-metric:nth-child(3),.about-metric:nth-child(4) { border-bottom:none; } }

/* ── ABOUT — BIO CARD ────────────────────────────────────── */
.about-bio-card {
    display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:36px 40px; box-shadow:var(--shadow-sm);
}
.about-bio-text .label { color:var(--teal); margin-bottom:12px; }
.about-bio-text p { font-size:15px; color:var(--text-2); line-height:1.85; }
.about-bio-badges { display:flex; flex-direction:column; gap:10px; }
@media(max-width:900px) { .about-bio-card { grid-template-columns:1fr; gap:28px; } }
@media(max-width:600px) { .about-bio-card { padding:24px; } }

/* ── ABOUT — CERTS ───────────────────────────────────────── */
.about-certs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:0; }
.about-cert-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:28px; display:flex; flex-direction:column;
    transition:box-shadow .2s,border-color .2s;
}
.about-cert-card:hover { box-shadow:var(--shadow-md); border-color:var(--teal); }
/* no special highlight — all cert cards are equal */
.about-cert-card--highlight { border-color:var(--border); background:var(--surface); }
.about-cert-code {
    font-size:13px; font-weight:800; color:var(--teal);
    background:var(--teal-light); border:1px solid rgba(0,130,114,.15);
    border-radius:6px; padding:4px 10px; display:inline-block; margin-bottom:14px; width:fit-content;
}
.about-cert-card h3 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:10px; line-height:1.35; }
.about-cert-card p { font-size:14px; color:var(--text-2); line-height:1.75; flex:1; }
.about-cert-level { margin-top:16px; font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; }
@media(max-width:900px) { .about-certs-grid { grid-template-columns:1fr; } }

/* ── ABOUT — CERTS COMPACT (row layout) ─────────────────── */
.about-certs-compact { max-width:760px; margin:0 auto; }
.about-certs-compact .label { margin-bottom:20px; }
.about-certs-list { display:flex; flex-direction:column; gap:0; }
.about-cert-row {
    display:flex; align-items:baseline; gap:16px;
    padding:16px 0;
    border-bottom:1px solid var(--border);
}
.about-cert-row:first-child { border-top:1px solid var(--border); }
.about-cert-row .about-cert-code {
    flex-shrink:0; width:fit-content; margin-bottom:0;
}
.about-cert-info { font-size:14px; color:var(--text-2); line-height:1.7; }
.about-cert-info strong { color:var(--text-1); }
@media(max-width:600px) {
    .about-cert-row { flex-direction:column; gap:6px; }
}

/* ── ABOUT — PROOF SECTION ───────────────────────────────── */
.about-proof-section { background:var(--surface); }
.about-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.about-proof-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:28px; transition:box-shadow .2s,border-color .2s,transform .2s;
    display:flex; flex-direction:column;
}
.about-proof-card:hover { box-shadow:var(--shadow-md); border-color:var(--teal); transform:translateY(-2px); }
.about-proof-icon {
    width:44px; height:44px; background:var(--teal-light); border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex-shrink:0;
}
.about-proof-icon svg { width:22px; height:22px; color:var(--teal); }
.about-proof-label {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color:var(--teal); margin-bottom:8px;
}
.about-proof-card h3 { font-size:16px; font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:10px; }
.about-proof-card p { font-size:14px; color:var(--text-2); line-height:1.75; }
@media(max-width:900px) { .about-proof-grid { grid-template-columns:1fr; } }

/* ── ABOUT — TRAYECTORIA ─────────────────────────────────── */
.about-traj-wrap { max-width:760px; margin:0 auto; }
.about-traj-company { color:var(--text-3); font-size:13px; margin-bottom:6px; }
.about-timeline-marker--current {
    border-color:var(--teal); background:var(--teal);
    box-shadow:0 0 0 3px var(--teal-light);
}

/* ── ABOUT — WORK CARDS WITH ICON ────────────────────────── */
.about-work-icon {
    width:36px; height:36px; background:var(--teal-light); border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.about-work-icon svg { width:18px; height:18px; color:var(--teal); }

/* ── ABOUT — EDU + SKILLS LAYOUT ────────────────────────── */
.about-edu-certs { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; margin-top:8px; }
.about-edu-block h3 {
    font-size:17px; font-weight:700; color:var(--navy);
    margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--teal);
}
@media(max-width:900px) {
    .about-edu-certs { grid-template-columns:1fr; gap:32px; }
    .about-skills-grid { grid-template-columns:1fr; }
}

/* ── ABOUT — CTA FINAL ───────────────────────────────────── */
.about-cta-section { padding:64px 0 88px; background:var(--surface-3); border-top:1px solid var(--border); }
.about-cta-card {
    max-width:600px; margin:0 auto; text-align:center;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:48px 40px; box-shadow:var(--shadow-md);
}
.about-cta-card h2 { font-size:26px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.about-cta-card p { font-size:15px; color:var(--text-2); line-height:1.8; margin-bottom:28px; }
.about-cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@media(max-width:600px) { .about-cta-card { padding:32px 24px; } }

/* ── CODE BLOCK (article code viewer + Prism.js) ─────── */
.code-block {
    margin:2rem 0; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-lg); border:1px solid #2d2d44;
}
.code-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 20px; background:#1e1e2e; border-bottom:1px solid #3a3a5c;
}
.code-lang {
    font-size:0.78rem; font-weight:600; color:#8a8aaa;
    font-family:'Inter',sans-serif; letter-spacing:0.5px; text-transform:uppercase;
}
.code-copy {
    background:transparent; border:1px solid #4a4a6a; color:#a0a0c0;
    padding:5px 14px; border-radius:6px; cursor:pointer;
    font-size:0.78rem; font-family:'Inter',sans-serif; transition:all .2s;
}
.code-copy:hover { background:#3a3a5c; color:#fff; border-color:#6a6a8a; }
.code-copy.copied { background:var(--teal); color:#fff; border-color:var(--teal); }
.code-block pre[class*="language-"] {
    margin:0!important; border-radius:0!important; font-size:0.82rem!important;
    line-height:1.7!important; padding:20px 16px!important; tab-size:4;
}
.code-block code[class*="language-"] {
    font-family:'Fira Code','Cascadia Code','JetBrains Mono','Consolas',monospace!important;
    font-size:0.82rem!important;
}
.code-block .line-numbers-rows { border-right:1px solid #3a3a5c!important; }
@media(max-width:600px) {
    .code-block pre[class*="language-"] { padding:14px 10px!important; font-size:0.72rem!important; }
    .code-block code[class*="language-"] { font-size:0.72rem!important; }
}