:root{
      --blue-dark: #003d5c;
      --sea: #0077b6;
      --bg: #f7fafc;
      --card: #ffffff;
      --muted: #586374;
    }
    *{box-sizing:border-box}
    body{font-family:Inter, 'Segoe UI', Roboto, Arial, sans-serif;background:var(--bg);margin:0;color:#222}

    .historia-section{padding:56px 20px;}
    .wrapper{max-width:1200px;margin:0 auto;display:flex;gap:32px;align-items:center;flex-wrap:wrap}

    .intro{
      flex:1 1 420px;
      background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.9));
      padding:28px;border-radius:12px;box-shadow:0 6px 20px rgba(10,20,30,0.06);
    }
    .intro h1{margin:0 0 8px;font-size:34px;color:var(--blue-dark);letter-spacing:-0.5px}
    .intro .lead{color:var(--muted);font-size:16px;line-height:1.6;margin-bottom:16px}
    .intro hr{border:none;border-top:2px solid rgba(0,61,92,0.08);margin:12px 0 18px}

    .card{
      flex:0 0 320px;background:var(--card);padding:20px;border-radius:12px;text-align:center;box-shadow:0 10px 30px rgba(7,20,40,0.06);
      cursor:pointer;transition:transform .28s ease, box-shadow .28s ease;position:relative;overflow:hidden
    }
    .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(7,20,40,0.12)}

    .card img{width:160px;height:160px;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.12))}
    .card h3{margin:14px 0 6px;font-size:20px;color:var(--blue-dark)}
    .card p{margin:0;color:var(--muted);font-size:14px}

    .btn-ghost{display:inline-block;margin-top:14px;padding:10px 14px;border-radius:10px;border:2px solid var(--sea);color:var(--sea);font-weight:600;text-decoration:none}

    /* Modal */
    .modal{display:none;position:fixed;inset:0;background:linear-gradient(rgba(2,6,23,0.55), rgba(2,6,23,0.55));z-index:1200;padding:40px}
    .modal.center{display:flex;align-items:center;justify-content:center}
    .modal-card{width:100%;max-width:900px;background:var(--card);border-radius:12px;padding:26px 26px;box-shadow:0 30px 80px rgba(5,10,20,0.6);max-height:80vh;overflow:auto}
    .modal-card h2{margin:0 0 8px;color:var(--blue-dark)}
    .modal-card .meta{color:var(--muted);font-size:14px;margin-bottom:12px}
    .modal-card p{color:#333;line-height:1.6}
    .close-btn{position:absolute;right:20px;top:18px;background:transparent;border:none;font-size:28px;color:#fff;cursor:pointer}

    /* Responsive */
    @media (max-width:880px){
      .wrapper{padding:0 8px}
      .card{flex-basis:100%}
      .intro{order:2}
    }}