:root{
    --azul-acero:#1E4E79;
    --azul-acero-oscuro:#163B5C;
    --gris-grafito:#404040;
    --negro:#111111;
    --fondo:#F7F8FA;
    --blanco:#FFFFFF;
    --borde:#E2E6EA;
    --radio:10px;
    --sombra:0 4px 16px rgba(17,17,17,0.06);
    --font-display:'Montserrat',Helvetica,Arial,sans-serif;
    --font-body:'Roboto',Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--fondo);
    color:var(--gris-grafito);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none;color:inherit;}
  button{font-family:inherit;}
  .page{max-width:1280px;margin:0 auto;background:var(--blanco);min-height:100vh;box-shadow:var(--sombra);}

  /* ============ 1. CABEZA (color plano) ============ */
  .header{
    background:var(--azul-acero);
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-mark{
    width:44px;height:44px;border-radius:8px;
    background:var(--blanco);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    padding:6px;
  }
  .brand-mark img{width:100%;height:100%;object-fit:contain;}
  .brand-text{color:var(--blanco);line-height:1.15;}
  .brand-text strong{
    display:block;
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:1px;
    font-size:16px;
  }
  .brand-text span{
    display:block;
    font-size:12px;
    opacity:.8;
    font-weight:400;
  }
  .header-tag{
    color:var(--blanco);
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    opacity:.85;
    font-family:var(--font-display);
    font-weight:600;
  }

  /* ============ 2. CUERPO ============ */
  .body{position:relative;}

  /* --- fondo técnico decorativo (imagen real) --- */
  .hero{
    position:relative;
    z-index:1;
    display:flex;
    align-items:stretch;
    gap:0;
    padding:56px 40px;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 45%, rgba(255,255,255,.55) 100%),
      url('assets/fondo-tecnico.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .block-left{
    flex:1 1 60%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:22px;
    padding-right:40px;
  }
  .corp-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    align-self:flex-start;
    border:1.5px solid var(--azul-acero);
    border-radius:999px;
    padding:8px 18px 8px 8px;
    background:var(--blanco);
    transition:background .2s ease, color .2s ease;
  }
  .corp-btn:hover{background:var(--azul-acero);}
  .corp-btn:hover .corp-btn-text{color:var(--blanco);}
  .corp-btn-mark{
    width:30px;height:30px;border-radius:50%;
    background:var(--azul-acero);
    color:var(--blanco);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);
    font-weight:800;
    font-size:14px;
  }
  .corp-btn-text{
    font-family:var(--font-display);
    font-weight:700;
    font-size:13px;
    letter-spacing:.5px;
    color:var(--azul-acero);
  }
  .name{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px,4vw,44px);
    color:var(--negro);
    line-height:1.05;
    margin:0;
  }
  .role{
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--azul-acero);
    margin:0;
  }
  .desc{
    font-size:15px;
    line-height:1.6;
    color:var(--gris-grafito);
    max-width:440px;
    margin:0;
  }
  .cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    align-self:flex-start;
    background:var(--azul-acero-oscuro);
    color:var(--blanco);
    font-family:var(--font-display);
    font-weight:700;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:14px 22px;
    border-radius:6px;
    transition:background .2s ease, transform .2s ease;
  }
  .cta:hover{background:var(--negro);transform:translateY(-1px);}
  .cta svg{width:16px;height:16px;}

  .divider{
    width:1px;
    background:var(--borde);
    margin:0 36px;
    flex-shrink:0;
  }

  .block-right{
    flex:0 0 260px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
  }
  .redes-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    color:var(--azul-acero);
    margin:0;
  }
  .redes-row{display:flex;gap:14px;}
  .social-btn{
    width:52px;height:52px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .social-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(22,59,92,.25);}
  .social-btn img{width:100%;height:100%;object-fit:contain;border-radius:10px;}

  /* --- ESPECIALIDADES (bloque inferior) --- */
  .specialties{
    position:relative;
    z-index:1;
    padding:8px 40px 48px;
  }
  .specialties-title{
    display:flex;
    align-items:center;
    gap:18px;
    margin:0 0 26px;
  }
  .specialties-title h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    letter-spacing:3px;
    color:var(--azul-acero);
    margin:0;
    white-space:nowrap;
  }
  .specialties-title .line{
    height:1px;
    background:var(--borde);
    flex:1;
  }
  .spec-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;
  }
  .spec-card{
    border:1px solid var(--borde);
    border-radius:var(--radio);
    padding:26px 14px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    background:var(--blanco);
    cursor:default;
    color:var(--gris-grafito);
    opacity:.92;
  }
  .spec-card img{width:44px;height:44px;object-fit:contain;}
  .spec-card span{
    font-family:var(--font-display);
    font-weight:700;
    font-size:13px;
    line-height:1.3;
    color:var(--negro);
  }
  .spec-card .underline{
    width:26px;height:2px;
    background:var(--azul-acero);
    opacity:.5;
  }

  /* ============ 3. PIE ============ */
  .footer{
    background:var(--azul-acero-oscuro);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    padding:18px 40px;
  }
  .foot-item{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:999px;
    padding:12px 18px;
    color:var(--blanco);
    font-size:13px;
  }
  .foot-item svg{width:18px;height:18px;stroke:var(--blanco);flex-shrink:0;}
  .foot-item.disabled{
    opacity:.45;
    cursor:not-allowed;
  }
  .foot-item.enabled{
    transition:background .2s ease, border-color .2s ease;
  }
  .foot-item.enabled:hover{
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.3);
  }
  .foot-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ============ RESPONSIVE ============ */
  @media (max-width:860px){
    .hero{
      flex-direction:column;
      padding:36px 22px 8px;
      gap:36px;
      background-image:
        linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.75) 100%),
        url('assets/fondo-tecnico.jpg');
      background-position:top center;
    }
    .block-left{padding-right:0;}
    .divider{display:none;}
    .block-right{flex:none;}
    .specialties{padding:8px 22px 36px;}
    .spec-grid{grid-template-columns:repeat(3,1fr);}
    .footer{
      grid-template-columns:repeat(2,1fr);
      padding:16px 18px;
    }
  }
  @media (max-width:480px){
    .header{padding:14px 18px;}
    .header-tag{display:none;}
    .spec-grid{grid-template-columns:repeat(2,1fr);}
    .footer{grid-template-columns:1fr;}
    .name{font-size:28px;}
  }