*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --blue:#071f5a;
  --red:#c21e1e;
  --yellow:#e7b400;
  --cream:#f7f3ec;
}

body{
  font-family:'Inter',sans-serif;
  background:#f9f6f0;
  overflow-x:hidden;
  overflow-y:auto;
  color:#111;
}

.hero{
  width:100%;
  min-height:100vh;

  position:relative;

  overflow:visible;

  background:
    linear-gradient(
      90deg,
      rgba(255,214,92,.12),
      rgba(255,255,255,.78) 35%,
      rgba(255,255,255,.82) 65%,
      rgba(255,88,88,.08)
    ),
    url("assets/fondo-ancianos.jpg");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hero::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at center,
      rgba(255,255,255,.40) 0%,
      rgba(255,255,255,.18) 35%,
      rgba(0,0,0,.04) 100%
    );

  z-index:1;
}

.hero::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.02)
    );

  backdrop-filter:blur(1px);

  z-index:1;
}

@keyframes shimmer{
  from{
    transform:translateX(-100%);
  }
  to{
    transform:translateX(100%);
  }
}

.ambient{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
}

.ambient-left{
  width:400px;
  height:400px;
  background:rgba(255,201,64,.18);
  left:-100px;
  bottom:-100px;
}

.ambient-right{
  width:400px;
  height:400px;
  background:rgba(67,117,255,.18);
  right:-100px;
  bottom:-120px;
}

.hero-content{
    width:100%;
    min-height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    position:relative;
    z-index:5;

    padding:40px 20px 120px;
}

.hero-content::before{
  display:none;
}

.title-block{
  display:flex;
  flex-direction:column;
  align-items:center;

  width:100%;
}

.top-title{
  font-family:'Montserrat',sans-serif;

  font-size:2.1rem;
  font-weight:400;

  color:var(--blue);

  letter-spacing:-0.03em;

  line-height:1;

  margin-bottom:6px;
}

.main-logo{
  width:360px;

  margin-top:0;
  margin-bottom:18px;

  animation:none;

  border-radius:28px;

  background:
    rgba(255,255,255,.12);

  backdrop-filter:blur(10px);

  padding:10px;

  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,.10));
}

.main-title{
  font-family:'Montserrat',sans-serif;

  font-size:3.8rem;
  font-weight:800;

  line-height:.95;

  color:var(--blue);

  letter-spacing:-0.06em;

  margin-top:0;

  margin-bottom:24px;
}

.bottom-title{
  font-family:'Montserrat',sans-serif;

  font-size:3.8rem;
  font-weight:800;

  color:#ef1c1c;

  letter-spacing:-0.06em;

  line-height:1;

  margin-top:0;

  margin-bottom:10px;
}

.flag-line{
  display:flex;
  gap:0;

  margin-top:22px;
  margin-bottom:14px;
}

.flag-line span{
  height:4px;
  border-radius:999px;
}

.yellow{
  width:70px;
  background:var(--yellow);
}

.blue{
  width:70px;
  background:var(--blue);
}

.red{
  width:70px;
  background:var(--red);
}

.subtitle{
  font-size:1rem;

  color:#5d6472;

  margin-bottom:22px;

  font-weight:500;
}

.hero-btn{
  border:1px solid rgba(255,255,255,.18);

  background:
    linear-gradient(135deg,#08266d,#061c53);

  color:white;

  width:300px;
  height:58px;

  border-radius:999px;

  font-weight:700;
  font-size:1rem;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  box-shadow:
    0 14px 40px rgba(7,31,90,.20);

  transition:.35s ease;

  position:relative;

  overflow:hidden;
}

.hero-btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 50px rgba(7,31,90,.28);
}

@media screen and (max-width:768px){

  .minimal-footer{

      position:relative !important;

      width:calc(100% - 30px) !important;

      max-width:500px !important;

      margin:25px auto 0 auto !important;

      left:auto !important;

      bottom:auto !important;

      transform:none !important;
  }

}

.footer-line{
  width:100%;
  height:1px;
  background:rgba(0,0,0,.12);

  margin-bottom:14px;
}

.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;

  font-size:.92rem;
  color:#5b6475;

  margin-bottom:0;

  flex-wrap:nowrap;
}

.minimal-footer p{
  font-size:.88rem;
  color:#6b7280;

  display:inline-block;

  margin-left:18px;
}

/* MODAL */

.modal-overlay{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.4);

  backdrop-filter:blur(18px);

  display:none;
  justify-content:center;
  align-items:center;

  z-index:50;
}

.modal-overlay.active{
  display:flex;
}

.modal{
  width:1020px;
  max-width:92vw;

  height:640px;

  background:
    rgba(255,255,255,.72);

  backdrop-filter:blur(22px);

  border:
    1px solid rgba(255,255,255,.24);

  border-radius:42px;

  overflow:hidden;

  display:grid;
  grid-template-columns:1fr 1fr;

  position:relative;

  box-shadow:
    0 40px 120px rgba(0,0,0,.18);

  animation:modalIn .5s ease;
}

@keyframes modalIn{
  from{
    opacity:0;
    transform:translateY(40px) scale(.96);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.close-modal{
  position:absolute;
  top:20px;
  right:24px;

  background:none;
  border:none;

  font-size:34px;
  cursor:pointer;

  color:var(--blue);
}

.modal-left{
  background:
    linear-gradient(
      180deg,
      rgba(7,31,90,.78),
      rgba(7,31,90,.55)
    ),
    url("assets/fondo-ancianos.jpg");

  background-size:cover;
  background-position:center;

  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:54px;

  color:white;
}

.modal-left::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.00)
    );

  z-index:1;
}

.modal-logo{
  width:150px;

  margin-bottom:28px;

  border-radius:28px;

  background:
    rgba(255,255,255,.12);

  backdrop-filter:blur(10px);

  padding:10px;

  border:
    1px solid rgba(255,255,255,.16);

  box-shadow:
    0 10px 30px rgba(0,0,0,.18);

  position:relative;
  z-index:2;
}

.modal-left h2{
  font-size:3.4rem;

  line-height:.92;

  margin-bottom:18px;

  font-weight:800;

  position:relative;
  z-index:2;
}

.modal-left p{
  font-size:1.05rem;

  line-height:1.7;

  color:
    rgba(255,255,255,.82);

  position:relative;
  z-index:2;
}

.modal-right{
  padding:70px 60px;

  display:flex;
  align-items:center;

  background:
    rgba(255,255,255,.52);

  backdrop-filter:blur(14px);
}

.join-form{
  width:100%;
}

.form-header h3{
  font-size:2.9rem;

  color:var(--blue);

  margin-bottom:12px;

  line-height:.95;

  font-weight:800;
}

.form-header p{
  color:#6b7280;
  margin-bottom:28px;
}

.join-form input{
  width:100%;
  height:60px;

  border:
    1px solid rgba(0,0,0,.06);

  border-radius:18px;

  padding:0 22px;

  margin-bottom:18px;

  background:
    rgba(255,255,255,.72);

  backdrop-filter:blur(10px);

  font-size:1rem;

  transition:.3s ease;
}

.join-form input:focus{
  outline:none;

  border:
    1px solid rgba(7,31,90,.18);

  box-shadow:
    0 0 0 4px rgba(7,31,90,.06);
}

.submit-btn{
  width:100%;
  height:60px;

  border:none;

  border-radius:999px;

  background:
    linear-gradient(135deg,#08266d,#061c53);

  color:white;

  font-weight:700;

  font-size:1rem;

  cursor:pointer;

  margin-top:10px;

  box-shadow:
    0 18px 40px rgba(7,31,90,.18);

  transition:.35s ease;
}

.submit-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 22px 50px rgba(7,31,90,.24);
}

.success-message{
  display:none;
  text-align:center;
}

.success-message.active{
  display:block;
}

.medal{
  font-size:5rem;
  margin-bottom:20px;
}

@media(max-width:900px){

  body{
    overflow:auto;
  }

  .title-block h2{
    font-size:2.5rem;
  }

  .title-block h1{
    font-size:4rem;
  }

  .title-block h3{
    font-size:3rem;
  }

  .main-logo{
    width:180px;
  }

  .footer-links{
    flex-wrap:wrap;
  }

  .modal{
    grid-template-columns:1fr;
    height:auto;
  }

  .modal-left{
    min-height:260px;
  }
}

@media(max-width:768px){

  .hero-content{
    padding-top:60px;
    padding-bottom:180px;
  }

  .top-title{
    font-size:1rem;
  }

  .main-title{
    font-size:2.8rem;
  }

  .bottom-title{
    font-size:2.3rem;
  }

  .main-logo{
    width:260px;
  }

  .hero-btn{
    width:260px;
  }

  .subtitle{
    width:90%;
    line-height:1.5;
  }

  .footer-links{
    gap:10px;
    font-size:.78rem;
  }

}

.hero-btn::before{
  content:"";

  position:absolute;

  width:120%;
  height:100%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  left:-120%;

  transition:1s ease;
}

.hero-btn:hover::before{
  left:120%;
}

/* INFO MODALS */

.info-modal-overlay{
  position:fixed;
  inset:0;

  background:
    rgba(0,0,0,.35);

  backdrop-filter:blur(12px);

  display:none;
  align-items:center;
  justify-content:center;

  z-index:100;
}

.info-modal-overlay.active{
  display:flex;
}

.info-modal{
  width:640px;
  max-width:92vw;

  background:
    rgba(255,255,255,.82);

  backdrop-filter:blur(24px);

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:36px;

  padding:54px;

  position:relative;

  box-shadow:
    0 40px 120px rgba(0,0,0,.18);

  animation:modalIn .4s ease;
}

.info-modal h2{
  font-size:2.6rem;

  color:var(--blue);

  margin-bottom:24px;

  line-height:.95;

  font-weight:800;
}

.info-modal p{
  font-size:1.02rem;

  line-height:1.9;

  color:#4b5563;

  margin-bottom:18px;
}

.info-close{
  position:absolute;

  top:20px;
  right:24px;

  border:none;
  background:none;

  font-size:34px;

  cursor:pointer;

  color:var(--blue);
}

.social-links{
  display:flex;
  flex-direction:column;

  gap:18px;

  margin-top:30px;
}

.social-links a{
  text-decoration:none;

  color:var(--blue);

  font-size:1.2rem;

  font-weight:700;

  transition:.3s ease;
}

.social-links a:hover{
  transform:translateX(4px);

  color:var(--red);
}

.footer-links span,
.footer-whatsapp{
  cursor:pointer;
}

.footer-whatsapp{
  text-decoration:none;
  color:#5b6475;
}

/* ADMIN BUTTON */

.admin-access-btn{
  position:fixed;

  bottom:12px;
  right:16px;

  width:42px;
  height:42px;

  border:none;

  border-radius:999px;

  background:#071f5a;

  color:white;

  font-size:.7rem;
  font-weight:700;

  cursor:pointer;

  z-index:999;

  opacity:.22;

  transition:.3s ease;
}

.admin-access-btn:hover{
  opacity:1;
}

/* LOGIN */

.admin-login-overlay,
.dashboard-overlay{
  position:fixed;
  inset:0;

  background:
    rgba(0,0,0,.35);

  backdrop-filter:blur(14px);

  display:none;

  align-items:center;
  justify-content:center;

  z-index:200;
}

.admin-login-overlay.active,
.dashboard-overlay.active{
  display:flex;
}

.admin-login-modal{
  width:420px;

  background:
    rgba(255,255,255,.82);

  backdrop-filter:blur(20px);

  border-radius:34px;

  padding:50px;

  position:relative;
}

.admin-login-modal h2{
  font-size:2rem;

  color:var(--blue);

  margin-bottom:28px;
}

.admin-login-modal input{
  width:100%;
  height:58px;

  border:none;

  border-radius:18px;

  padding:0 20px;

  margin-bottom:18px;

  background:
    rgba(255,255,255,.72);
}

/* DASHBOARD */

.dashboard-modal{
  width:1300px;
  max-width:96vw;

  height:88vh;

  background:
    rgba(255,255,255,.82);

  backdrop-filter:blur(24px);

  border-radius:40px;

  padding:42px;

  overflow:hidden;

  position:relative;
}

.dashboard-header{
  margin-bottom:30px;
}

.dashboard-header h2{
  font-size:2.8rem;

  color:var(--blue);
}

.dashboard-kpis{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:20px;

  margin-bottom:30px;
}

.dashboard-kpi{
  background:
    rgba(255,255,255,.62);

  border-radius:28px;

  padding:26px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.dashboard-kpi span{
  color:#6b7280;

  font-size:.95rem;
}

.dashboard-kpi h3{
  font-size:2.8rem;

  color:var(--blue);

  margin-top:12px;
}

.dashboard-table-container{
  height:calc(100% - 220px);

  overflow:auto;

  border-radius:24px;

  background:
    rgba(255,255,255,.56);
}

.dashboard-table{
  width:100%;

  border-collapse:collapse;
}

.dashboard-table th{
  text-align:left;

  padding:22px;

  color:var(--blue);

  font-size:.95rem;

  position:sticky;
  top:0;

  background:
    rgba(255,255,255,.95);
}

.dashboard-table td{
  padding:20px;

  border-top:
    1px solid rgba(0,0,0,.05);

  color:#4b5563;
}

.status-badge{
  padding:
    8px
    14px;

  border-radius:999px;

  font-size:.82rem;

  font-weight:700;
}

.status-pending{
  background:#fff7d6;
  color:#9b6b00;
}

.status-contacted{
  background:#daf7e8;
  color:#137a48;
}

.contact-btn{
  border:none;

  background:#071f5a;

  color:white;

  padding:
    10px
    18px;

  border-radius:999px;

  cursor:pointer;

  font-size:.82rem;

  font-weight:700;
}

.dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.export-btn{
  border:none;

  background:#0b8f4d;

  color:white;

  padding:
    14px
    22px;

  border-radius:999px;

  cursor:pointer;

  font-weight:700;
}

.delete-btn{
  border:none;

  background:#c21e1e;

  color:white;

  padding:
    10px
    18px;

  border-radius:999px;

  cursor:pointer;

  font-size:.82rem;

  font-weight:700;

  margin-left:10px;
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

@media screen and (max-width:768px){

  /* ========================================
     PENSIONADOS
  ======================================== */

  .main-title{

      font-size:2.4rem !important;

      line-height:1 !important;

      letter-spacing:-2px !important;

      width:auto !important;

      max-width:95% !important;

      white-space:nowrap !important;

      word-break:keep-all !important;

      overflow-wrap:normal !important;

      margin-bottom:18px !important;
  }

  .main-logo{
    width:180px !important;
  }

  .bottom-title{
    font-size:2.4rem !important;
  }

  /* ========================================
     MODAL
  ======================================== */

  .modal{

    width:calc(100% - 20px) !important;

    max-width:100% !important;

    height:auto !important;

    max-height:92vh !important;

    overflow-y:auto !important;

    border-radius:26px !important;

    grid-template-columns:1fr !important;

    margin:10px;
  }

  .modal-left{

    min-height:210px !important;

    padding:24px !important;
  }

  .modal-logo{
    width:85px !important;

    margin-bottom:14px !important;
  }

  .modal-left h2{

    font-size:2.8rem !important;

    line-height:.9 !important;

    margin-bottom:10px !important;
  }

  .modal-left p{

    font-size:.92rem !important;

    line-height:1.5 !important;
  }

  /* ========================================
     FORMULARIO COMPACTO
  ======================================== */

  .modal-right{

    padding:26px 20px 22px !important;
  }

  .form-header h3{

    font-size:2.2rem !important;

    line-height:.92 !important;

    margin-bottom:8px !important;
  }

  .form-header p{

    font-size:.92rem !important;

    margin-bottom:16px !important;
  }

  .join-form{

    gap:10px !important;
  }

  .join-form input{

    height:50px !important;

    margin-bottom:0 !important;

    border-radius:16px !important;

    padding:0 16px !important;

    font-size:.95rem !important;

    background:#f8f8f8 !important;

    border:1px solid #ececec !important;
  }

  .submit-btn{

    height:52px !important;

    margin-top:4px !important;

    border-radius:16px !important;

    font-size:.95rem !important;
  }

  /* =========================
     FOOTER
  ========================= */

  footer {
    padding: 25px 20px 45px;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    font-size: 14px;
  }

  .footer-copy {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 15px;
    text-align: center;
  }

  /* =========================
     ADMIN BUTTON
  ========================= */

  .admin-button {
    width: 58px;
    height: 58px;
    font-size: 13px;
    right: 14px;
    bottom: 18px;
  }

  /* =========================
     LOGIN MODAL
  ========================= */

  .admin-login-modal {
    width: calc(100% - 30px);
    padding: 35px 22px;
    border-radius: 28px;
  }

  .admin-login-title {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 28px;
  }

  .admin-login-modal input {
    height: 62px;
    border-radius: 20px;
    font-size: 16px;
    padding: 0 20px;
  }

  .admin-login-submit {
    height: 62px;
    border-radius: 22px;
    font-size: 18px;
  }

  /* =========================
     DASHBOARD
  ========================= */

  .dashboard-modal {
    width: calc(100% - 20px);
    height: 92vh;
    padding: 22px 14px;
    border-radius: 30px;
    overflow-y: auto;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .dashboard-title {
    font-size: 52px;
    line-height: 0.95;
  }

  .dashboard-kpis {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .dashboard-kpi {
    min-width: 180px;
    padding: 24px 18px;
    border-radius: 24px;
  }

  .dashboard-kpi-number {
    font-size: 54px;
  }

  .dashboard-table-wrapper {
    overflow-x: auto;
    margin-top: 24px;
  }

  .dashboard-table {
    min-width: 900px;
  }

  .dashboard-table th,
  .dashboard-table td {
    padding: 16px;
    font-size: 14px;
  }

  .dashboard-action-btn {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 14px;
  }

}

@media screen and (max-width:768px){

    html,
    body{
        overflow-x:hidden !important;
        overflow-y:auto !important;
        width:100%;
    }

    .hero{
        min-height:100vh !important;
        height:auto !important;
        overflow:hidden !important;
    }

    .hero-content{
        min-height:100vh !important;
        height:auto !important;

        padding-top:40px !important;
        padding-bottom:40px !important;
    }

}

.large-info-modal{

    width:900px !important;

    max-width:92vw !important;

    height:80vh !important;

    overflow:hidden !important;

    padding:0 !important;

    border-radius:34px !important;
}

.modal-document-header{

    padding:40px 50px 25px;

    border-bottom:1px solid rgba(0,0,0,.08);
}

.modal-badge{

    display:inline-block;

    background:#071f5a;

    color:white;

    padding:8px 16px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:20px;
}

.modal-document-header h2{

    font-size:3rem;

    color:#071f5a;

    line-height:.95;
}

.modal-document-content{

    height:calc(80vh - 140px);

    overflow-y:auto;

    padding:35px 50px 50px;

    line-height:1.9;

    color:#4b5563;
}

.modal-document-content h3{

    margin-top:28px;

    margin-bottom:16px;

    color:#071f5a;
}

.modal-document-content ul{

    padding-left:25px;
}

.modal-document-content li{

    margin-bottom:12px;
}

@media(max-width:768px){

    .large-info-modal{

        height:88vh !important;
    }

    .modal-document-header{

        padding:28px 24px 18px;
    }

    .modal-document-header h2{

        font-size:2rem;
    }

    .modal-document-content{

        padding:22px;

        line-height:1.7;
    }
}

.modal-document-content::-webkit-scrollbar{
    width:8px;
}

.modal-document-content::-webkit-scrollbar-thumb{
    background:#071f5a;
    border-radius:999px;
}

.modal-document-content::-webkit-scrollbar-track{
    background:rgba(0,0,0,.05);
}