:root{
      --bg:#f3f4f6;
      --ink:#0f172a;
      --muted:#475569;
      --brand:#d8a79a;   /* franja melón */
      --accent:#3b6d6c;  /* columna izquierda */
      --card:#ffffff;
      --radius:14px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--ink); background:var(--bg); line-height:1.45;
    }

    .wrap{
      max-width:1100px; margin:24px auto; padding:0 16px;
      display:grid; grid-template-columns:300px 1fr; gap:18px;
    }
    @media (max-width:880px){ .wrap{ grid-template-columns:1fr } }

    /* Columna izquierda */
    aside{
      background:var(--accent); color:#fff; border-radius:var(--radius);
      padding:18px; display:flex; flex-direction:column; gap:16px;
    }
    .block{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
      padding:14px; border-radius:12px }
    .block h3{ margin:0 0 8px; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase }
    .contact li{ list-style:none; padding:6px 0; border-top:1px solid rgba(255,255,255,.15) }
    .contact li:first-child{border-top:none}
    .contact a{ color:#fff; text-decoration:none }
    .small{ opacity:.9; font-size:.95rem }

    main{ display:flex; flex-direction:column; gap:18px }
    /* (Foto eliminada del aside para no duplicar) */


    /* CABECERA: texto + foto sobre la franja melón */
    .headerCard{
      background:var(--card); border-radius:var(--radius); overflow:hidden;
      box-shadow:0 10px 24px rgba(0,0,0,.06);
      /* NUEVO: ocupar todas las columnas del grid (aside + proyectos) */
      grid-column: 1 / -1;
    }
    .banner{
      background:var(--brand);
      padding:22px 24px;
      display:flex; align-items:center; gap:16px; min-height:96px;
    }
    /* Foto dentro del banner (melón) */
    .banner .avatar{
      width:200px; height:200px;
      border-radius:50%;
      object-fit:cover;
      border:4px solid rgba(255,255,255,.9);
      box-shadow:0 6px 18px rgba(0,0,0,.25);
      flex-shrink:0;
    }
    .identity{ display:flex; flex-direction:column; gap:6px }
    .name{ font-size:2rem; font-weight:800; letter-spacing:.02em }
    .role{ color:#334155; font-style:italic }

    /* En pantallas angostas apilar foto y texto */
    @media (max-width:700px){
      .banner{ flex-direction:column; text-align:center }
      .banner .avatar{ width:96px; height:96px; border-width:3px }
      .name{ font-size:1.55rem }
      .role{ font-size:1rem }
    }

    .sectionTitle{
      margin:10px 0 6px;
      text-align:center;
      font-size:1.35rem;
      font-weight:800;
      letter-spacing:.02em;
      color:#0b1220;
    }

    /* Proyectos */
    .project{
      background:var(--card); border-radius:var(--radius);
      box-shadow:0 10px 24px rgba(0,0,0,.06);
      padding:16px; display:grid; gap:12px;
    }
    .project h3{ margin:4px 6px 0 }
    .meta{ color:var(--muted); font-size:.95rem }

    /* Carrusel */
    .carousel{
      position:relative; width:80%;
      aspect-ratio: 16/9;              /* ← cambia la proporción aquí */
      background:#0b1220; border-radius:12px; overflow:hidden;
      margin: 0 auto;       /* centra el carrusel */
    }
    .slide{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease }
    .slide.active{ opacity:1 }
    .slide img{ width:100%; height:100%; object-fit:cover; display:block }
    .cbtn{
      position:absolute; top:50%; transform:translateY(-50%);
      border:none; background:rgba(0,0,0,.45); color:#fff;
      padding:.6rem .85rem; border-radius:999px; cursor:pointer;
    }
    .cbtn:hover{ background:rgba(0,0,0,.65) }
    .prev{ left:.6rem } .next{ right:.6rem }
    .dots{
      position:absolute; left:50%; transform:translateX(-50%);
      bottom:.55rem; display:flex; gap:.4rem;
      background:rgba(0,0,0,.35); padding:.25rem .45rem; border-radius:999px;
    }
    .dot{ width:.5rem; height:.5rem; border-radius:50%;
      background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.7); cursor:pointer }
    .dot.active{ background:#fff }

    .tools{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 2px }
    .chip{ background:#eef2ff; color:#334155; border:1px solid #e2e8f0; padding:4px 8px;
      border-radius:999px; font-size:.85rem }