:root{ --bg1:#fde2d9; --bg2:#f9cbbf; --ink:#5a463f; --ink-soft:#6d5851; --card:#fff6f2; --brand:#e8a696; --wa:#25D366; }
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  background:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMTYwIDE2MCI+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjUpIiBzdHJva2Utd2lkdGg9IjEiPgogICAgPHBhdGggZD0iTTAsODAgUTgwLDAgMTYwLDgwIFE4MCwxNjAgMCw4MHoiLz4KICAgIDxjaXJjbGUgY3g9IjgwIiBjeT0iODAiIHI9IjQiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjE1KSIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTgwLDAgTDgwLDE2MCBNMCw4MCBMMTYwLDgwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wOCkiLz4KICA8L2c+Cjwvc3ZnPg==') repeat,
    radial-gradient(60% 80% at 20% 10%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(60% 80% at 90% 40%, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:100vh;
}
.container{ max-width:1200px; margin:0 auto; padding:40px 20px 90px; }
.header{ text-align:center; margin-bottom:24px; }
.header h1{ font-weight:800; font-size:clamp(24px,3vw,36px); margin:0; color:#4d3a33; }
.header p{ margin:10px auto 0; opacity:.85; max-width:800px; }

.carousel{
  position:relative; width:100%; height:70vh; min-height:520px;
  border-radius:24px; overflow:hidden; background:#000;
  box-shadow: 0 10px 40px rgba(112,70,57,.25);
  border: 4px solid rgba(77,58,51,.15);
}
.slide{ position:absolute; inset:0; opacity:0; transform:scale(1.02); transition:opacity 800ms ease, transform 1400ms ease; pointer-events:none; z-index:0; }
.slide.active{ opacity:1; transform:scale(1); pointer-events:auto; z-index:1; }
.slide img, .slide object, .slide video{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; transform:scale(0.90); display:block; }

.caption{ position:absolute; left:0; right:0; bottom:0; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; background: linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.6) 100%); color:#fff; }
.person{ display:flex; flex-direction:column; }
.name{ font-size:clamp(18px,2vw,24px); font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.role{ opacity:.95; font-size:clamp(12px,1.6vw,14px); }

.whatsapp{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; background: var(--wa); color:#073e1b; padding:12px 16px; border-radius:999px; font-weight:700; box-shadow: 0 8px 20px rgba(37,211,102,.35); transition:.2s; }
.whatsapp:hover{ transform: translateY(-2px); filter:saturate(1.1);}

.btns{ position:absolute; inset:0; pointer-events:none; }
.btn{ position:absolute; top:50%; transform: translateY(-50%); width:48px; height:48px; background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.35); color:#fff; display:grid; place-items:center; border-radius:999px; cursor:pointer; pointer-events:auto; }
.btn.prev{ left:16px; } .btn.next{ right:16px; }
.btn:hover{ background: rgba(0,0,0,.45); }

.dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; gap:10px; justify-content:center; align-items:center; }
.dot{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.6); cursor:pointer; transition:.2s; }
.dot.active{ background:#fff; transform: scale(1.25); }

.footer{ text-align:center; margin-top:26px; opacity:.8; color:var(--ink-soft); }

.grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:26px; }
.card{ position:relative; border-radius:18px; overflow:hidden; background:var(--card); border:1px solid rgba(77,58,51,.15); box-shadow:0 4px 20px rgba(112,70,57,.18);}
.card img, .card object, .card video{ height:340px; width:100%; object-fit:cover; object-position:50% 60%; display:block; }
.card .info{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px 14px; color:var(--ink); }
.card .name{ font-weight:800; font-size:16px; }
.card .role{ font-size:12px; opacity:.9; }

.modal{ position: fixed; inset:0; display:none; background: rgba(0,0,0,.75); z-index:60; }
.modal.open{ display:flex; align-items:center; justify-content:center; }
.modal .inner{ width: min(96vw, 1100px); max-height: 92vh; background: var(--card); border:1px solid rgba(77,58,51,.2); border-radius: 18px; overflow:hidden; box-shadow: 0 20px 70px rgba(112,70,57,.45); display:flex; flex-direction:column; }
.modal .media{ display:flex; align-items:center; justify-content:center; background:#000; width:100%; max-height:74vh; }
.modal .media img, .modal .media object, .modal .media video{ width:auto; height:auto; max-width:100%; max-height:74vh; object-fit:contain; object-position:center; display:block; }
.modal .info{ padding: 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink); }
.modal .title{ font-weight:800; font-size: clamp(18px,2vw,24px); }
.modal .subtitle{ opacity:.9; font-size: 14px; }
.modal .footer-cta{ padding: 0 16px 18px; display:flex; align-items:center; justify-content:center; }
.closebtn{ position:absolute; top:14px; right:14px; width:42px; height:42px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color:#fff; cursor:pointer; }

@media (max-width: 720px){
  .carousel{ min-height:460px; height:64vh; }
  .whatsapp{ padding:10px 14px; }
  .modal .media{ max-height: 70vh; }
  .modal .media img, .modal .media object, .modal .media video{ max-height:70vh; }
}