:root{
    --ink:#191420;
    --ink-soft:#48414F;
    --muted:#7A7480;
    --paper:#ffffff;
    --bg-soft:#F1ECE1;
    --line:#E4DDCE;
    --coral:#FF5A36;
    --coral-deep:#D8431F;
    --sun:#FFC857;
    --violet:#5B4B8A;
    --plum:#211A2C;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Space Grotesk', sans-serif;
    color:var(--ink);
    margin:0;
  }
  .display{
    font-family:'Fraunces', serif;
    font-optical-sizing:auto;
  }
  a{color:inherit; text-decoration:none;}
  .mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:.03em; }
  .wrap{ max-width:960px; margin:0 auto; padding:0 32px; }
  @media(max-width:640px){ .wrap{padding:0 22px;} }

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(25,20,32,0.92);
    backdrop-filter:blur(8px);
  }
  .nav-inner{
    max-width:960px; margin:0 auto; padding:16px 32px;
    display:flex; justify-content:space-between; align-items:center;
  }
  @media(max-width:640px){ .nav-inner{padding:14px 22px;} }
  .nav-name{ font-weight:600; font-size:.92rem; letter-spacing:.02em; color:var(--paper); }
  .nav-name span{ color:var(--sun); }
  .nav-links{ display:flex; gap:26px; }
  .nav-links a{ font-size:.83rem; color:#C9C2D3; transition:color .15s ease; }
  .nav-links a:hover{ color:var(--sun); }
  @media(max-width:720px){ .nav-links{display:none;} }

  /* ---------- HERO ---------- */
  .hero-bleed{
    background:
      radial-gradient(circle at 85% -10%, rgba(255,90,54,0.35), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(91,75,138,0.4), transparent 50%),
      var(--plum);
    padding:60px 0 64px;
    position:relative;
    overflow:hidden;
  }
  .hero-bleed::before{
    content:'';
    position:absolute; inset:0;
    background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
    background-size:20px 20px;
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    max-width:640px;
    opacity:0;
    animation:rise .75s ease-out forwards;
  }
  @keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

  .location-tag{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.76rem; color:#C9C2D3;
    padding:5px 12px; border:1px solid rgba(255,255,255,0.18); border-radius:999px;
  }
  .location-tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sun); }

  .headline{
    margin-top:26px;
    font-family:'Fraunces', serif;
    font-optical-sizing:auto;
    font-weight:600;
    font-size:clamp(2.4rem, 5.6vw, 3.8rem);
    line-height:1.1;
    max-width:16ch;
    letter-spacing:-0.01em;
    color:var(--paper);
  }
  .headline .grad{
    font-style:italic;
    font-weight:500;
    background:linear-gradient(100deg, var(--coral) 0%, var(--sun) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .subhead{
    margin-top:20px; font-size:1.02rem; line-height:1.65;
    color:#C9C2D3; max-width:56ch;
  }
  .hero-ctas{ margin-top:32px; display:flex; gap:20px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 26px; border-radius:8px; font-size:.89rem; font-weight:500;
    transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn-primary{ background:var(--coral); color:#fff; }
  .btn-primary:hover{ background:var(--sun); color:var(--plum); transform:translateY(-1px); }
  .btn-secondary{ border:1px solid rgba(255,255,255,0.25); color:var(--paper); }
  .btn-secondary:hover{ border-color:var(--sun); color:var(--sun); }

  .about-photo{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .about-photo img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:12px;
    display:block;
    box-shadow:0 14px 28px rgba(25,20,32,0.14);
  }

  /* ---------- KEYWORD STRIP ---------- */
  .keyword-strip{
    background:var(--sun);
    color:var(--plum);
    padding:14px 0;
  }
  .keyword-strip .wrap{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    justify-content:center;
  }
  .keyword-strip span{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:.82rem;
    letter-spacing:.03em;
  }
  .keyword-strip span.dot{ color:var(--coral-deep); }
  @media(max-width:640px){
    .keyword-strip .wrap{ justify-content:flex-start; }
  }

  /* ---------- SECTIONS ---------- */
  section{ padding:78px 0; border-bottom:1px solid var(--line); position:relative; scroll-margin-top:84px; }
  #marcas{ scroll-margin-top:84px; }
  section:last-of-type{ border-bottom:none; }
  .eyebrow-row{ position:relative; }
  .ghost-num{
    position:absolute; top:-38px; right:0;
    font-family:'Space Grotesk', sans-serif;
    font-size:5.5rem; font-weight:700;
    color:var(--bg-soft);
    z-index:0; user-select:none;
    line-height:1;
  }
  @media(max-width:640px){ .ghost-num{ font-size:3.6rem; top:-22px; } }
  .eyebrow{ font-size:.75rem; color:var(--coral-deep); letter-spacing:.05em; position:relative; }
  .section-title{ margin-top:10px; font-size:1.55rem; font-weight:600; position:relative; }

  /* ---------- 01 PERFIL ---------- */
  .about-grid{ margin-top:34px; display:grid; grid-template-columns:260px 1fr; gap:44px; }
  @media(max-width:640px){ .about-grid{ grid-template-columns:1fr; gap:22px; } }
  .funnel{ margin-top:8px; }
  .about-role{ margin-top:14px; font-size:.85rem; color:var(--muted); line-height:1.4; }
  .about-body p{ margin:0 0 16px; font-size:1rem; line-height:1.7; color:var(--ink-soft); max-width:64ch; }
  .about-body p:last-child{ margin-bottom:0; }
  .about-body b{ color:var(--ink); }
  .soft-tags{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
  .soft-tags span{
    font-size:.82rem; color:var(--ink);
    padding:7px 14px; border-radius:999px;
    background:var(--bg-soft);
    border:1px solid var(--line);
  }

  /* ---------- 02 TRAYECTORIA (tarjetas con logo centrado) ---------- */
  .company-grid{
    margin-top:36px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
  }
  @media(max-width:640px){ .company-grid{ grid-template-columns:repeat(2, 1fr); } }
  .company-card{
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px 18px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  }
  .company-card:hover{
    box-shadow:0 10px 22px rgba(25,20,32,0.09);
    transform:translateY(-2px);
  }
  .company-card.current{
    border-color:var(--coral-deep);
  }
  .company-badge{
    position:absolute;
    top:12px;
    right:12px;
    font-family:'Space Grotesk', sans-serif;
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--coral-deep);
    background:rgba(216,67,31,0.1);
    padding:3px 9px;
    border-radius:999px;
  }
  .company-logo-wrap{
    height:76px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .company-logo-img{
    max-height:72px;
    max-width:75%;
    width:auto;
    object-fit:contain;
    display:block;
  }
  .company-name-fallback{
    display:none;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  .company-caption{
    font-size:.78rem;
    color:var(--muted);
    text-align:center;
  }

  /* ---------- MARCAS (mismo lenguaje claro que Trayectoria, sin inclinación) ---------- */
  .brand-subhead{
    margin-top:44px;
  }
  .brand-subhead h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.05rem;
    font-weight:600;
    color:var(--ink);
  }
  .brand-subhead p{
    margin-top:4px;
    font-size:.88rem;
    color:var(--muted);
  }
  .brand-panel{
    margin-top:20px;
    background:
      radial-gradient(circle at 1px 1px, rgba(25,20,32,0.06) 1px, transparent 0);
    background-size:18px 18px;
    background-color:var(--bg-soft);
    border-radius:16px;
    padding:28px 24px;
  }
  .brand-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
  }
  @media(max-width:640px){
    .brand-grid{ grid-template-columns:repeat(2, 1fr); }
    .brand-panel{ padding:22px 16px; }
  }
  .brand-item{
    position:relative;
    aspect-ratio:2/1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:#fff;
    border-radius:8px;
    border:1px solid var(--line);
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .brand-item:hover{
    box-shadow:0 8px 18px rgba(25,20,32,0.1);
    transform:translateY(-2px);
  }
  .brand-img{
    max-width:70%;
    max-height:50px;
    object-fit:contain;
  }
  .brand-name-fallback{
    display:none;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:.82rem;
    color:var(--muted);
  }

  .linkedin-note{
    margin-top:40px; padding-top:26px; border-top:1px dashed var(--line);
    display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  }
  .linkedin-note p{ margin:6px 0 0; font-size:.9rem; color:var(--ink-soft); max-width:48ch; }
  .linkedin-note h4{ font-size:1rem; font-weight:600; }
  .link-arrow{
    font-size:.9rem; font-weight:600; color:var(--coral-deep);
    white-space:nowrap; border-bottom:2px solid transparent; transition:border-color .15s ease;
  }
  .link-arrow:hover{ border-color:var(--coral-deep); }

  /* ---------- 03 STACK ---------- */
  .skill-groups{ margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:32px 40px; }
  @media(max-width:640px){ .skill-groups{ grid-template-columns:1fr; } }
  .skill-group h4{ font-size:.82rem; color:var(--muted); font-weight:500; margin-bottom:14px; }
  .skill-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{ font-size:.85rem; padding:7px 13px; border-radius:6px; font-weight:500; }
  .chip.c1{ background:rgba(255,90,54,0.12); color:var(--coral-deep); }
  .chip.c2{ background:rgba(91,75,138,0.12); color:var(--violet); }
  .chip.c3{ background:rgba(255,200,87,0.25); color:#8A5E10; }
  .chip.c4{ background:var(--bg-soft); color:var(--ink-soft); }

  /* ---------- 04 FORMACIÓN ---------- */
  .edu-columns{ margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  @media(max-width:640px){ .edu-columns{ grid-template-columns:1fr; gap:30px; } }
  .edu-col h4{ font-size:.82rem; color:var(--muted); font-weight:500; margin-bottom:18px; }
  .edu-entry{ padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
  .edu-entry:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
  .edu-year{ font-size:.78rem; color:var(--coral-deep); font-weight:600; }
  .edu-title{ margin-top:4px; font-size:.95rem; font-weight:600; }
  .edu-school{ margin-top:2px; font-size:.85rem; color:var(--muted); }

  /* ---------- CLOSING ---------- */
  .closing{
    padding:80px 0 44px;
    background:var(--plum);
    color:var(--paper);
    border-radius:20px 20px 0 0;
    margin-top:0;
  }
  .closing h2{ font-family:'Fraunces', serif; font-optical-sizing:auto; font-weight:600; font-size:clamp(1.7rem, 3.6vw, 2.4rem); max-width:20ch; line-height:1.25; color:var(--paper); }
  .closing p{ margin-top:14px; font-size:.95rem; color:#C9C2D3; }
  .closing .hero-ctas{ margin-top:26px; }

  footer{
    padding:26px 0 44px; background:var(--plum);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-size:.8rem; color:#8D8595;
  }