/* =========================
   FONDO GENERAL
========================= */
body{
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  background: #d9d9d9;
  color:#000000;
}

/* =========================
   CONTENEDOR / “MARCO” DEL BUSCADOR
========================= */
.contenedorDatos{
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 28px;
  background: #3d3d3d;
  border: 1.6px solid rgba(255, 102, 0, 0.45);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  color: #fff;
}
.contenedorDatos h2{
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 14px;
}
.contenedorDatos h2 + *{ margin-top: 10px; }

/* =========================
   FORM CONTROLS (Bootstrap)
========================= */
input.form-control,
select.form-control{
  background-color: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
input.form-control::placeholder{ color: #cfd6de; }

input.form-control:focus,
select.form-control:focus{
  background-color: rgba(255,255,255,0.18);
  border-color: rgba(255,102,0,.8);
  box-shadow: 0 0 0 3px rgba(255,102,0,.28);
  outline: none;
}

label, .form-label{
  font-weight: 600;
  margin-bottom: 6px;
}

/* =========================
   BOTÓN PRINCIPAL (DEFAULT)
   (si quieres azul global, cámbialo aquí)
========================= */
.btn-primary{
  background: linear-gradient(180deg, #ff9d2f, #ff7a00);
  color: #fff;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 10px 18px rgba(255,122,0,.28);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(255,122,0,.38);
  filter: brightness(1.02);
}
.btn-primary:active{ transform: translateY(1px); }

.text-center a{
  color: #ff8600;
  font-weight: bold;
  text-decoration: none;
}
.text-center a:hover{
  text-decoration: underline;
  color: #ff7a00;
}

/* =========================
   TARJETA (GLOBAL)
   NOTA: solo UNA definición de .card (sin duplicados)
========================= */
.card{
  max-width: 1100px;
  margin: 30px auto;
  background: #3d3d3d;
  border: 1.6px solid rgba(13,110,253,.35);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(3px);
  color: #ffffff;
}

.title{font-size: 28px; margin: 0 0 6px;}
.legend{font-weight: 800; margin: 18px 0 8px;}
.help{color:#b8c3cd; font-size:13px;}
.checkbox-row{display:flex; gap:10px; align-items:center; cursor:pointer;}

/* =========================
   GRIDS UTILITARIOS
========================= */
.grid-1{ display:grid; grid-template-columns:1fr; gap:14px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

.field{ display:flex; flex-direction:column; }
.field label{ font-weight:600; margin-bottom:6px; }
.field input,.field select,.form-control{
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  outline:none;
  background:#172838;
  color:#fff;
}
.field input:focus,.field select:focus,.form-control:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}

/* =========================
   RESPONSIVE GLOBAL
========================= */
@media (max-width: 820px){
  .grid-2,.grid-3{ grid-template-columns: 1fr; }
  .contenedorDatos{ padding: 22px 18px; border-radius: 14px; }
  .btn-primary{ width: 100%; }
}

/* =========================
   PRIVACY BOX
========================= */
.page-section{
  padding: 28px 16px;
  min-height: calc(100vh - 120px);
}
.privacy-box{
  max-width: 1100px;
  margin: 0 auto;
  background:#3d3d3d;
  border:1.6px solid rgba(255,102,0,.45);
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  padding:34px 32px;
  color:#ffffff;
}
.privacy-title{
  margin:0 0 14px 0;
  font-size: 38px;
  font-weight: 900;
  text-align:center;
}
.privacy-content{
  font-size:16px;
  line-height:1.6;
  text-align:justify;
}
.section{ margin-top: 18px; }
.nested{ padding-left: 20px; }
.nested-2{ padding-left: 40px; }
.link-acc{ color:#87ab3b !important; text-decoration: underline; }
.brand-acc{ color:#87ab3b; font-weight:700; }

@media (max-width: 768px){
  .privacy-box{ padding:22px 18px; border-radius:14px; }
  .privacy-title{ font-size:28px; }
}

/* ==========================================================
   CONTACTO estilo "Login" (Dark Card)
   Importante: Pegar AL FINAL de main.css
========================================================== */

.rl-loginlike-wrap{
  min-height: calc(100vh - 140px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding: 90px 16px 40px;
}

/* Card */
.rl-loginlike-card{
  width: min(720px, 92vw);
  background: #213647 !important;
  border-radius: 18px;
  box-shadow: 0 26px 55px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

/* Header */
.rl-loginlike-header{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 18px 18px 10px;
}

.rl-loginlike-logo{
  width: 58px;
  height:auto;
  display:block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.20));
}

.rl-loginlike-headtext{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.rl-loginlike-title{
  margin: 0;
  color: #ffffff;
  font-size: 1.55rem;
  letter-spacing: .2px;
}

.rl-loginlike-subtitle{
  margin: 6px 0 0;
  color: rgba(255,255,255,.75);
  font-size: .95rem;
  line-height: 1.25;
}

/* Body */
.rl-loginlike-body{
  padding: 10px 18px 18px;
}

.rl-loginlike-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rl-loginlike-field{
  margin-top: 12px;
}

/* Labels */
.rl-loginlike-label{
  display:block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: .95rem;
}

/* Inputs + textarea */
.rl-loginlike-card .rl-loginlike-input,
.rl-loginlike-card .rl-loginlike-textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: #172838 !important;
  color: #fff !important;
  padding: 12px 12px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}

.rl-loginlike-card .rl-loginlike-input::placeholder,
.rl-loginlike-card .rl-loginlike-textarea::placeholder{
  color: rgba(255,255,255,.45);
}

.rl-loginlike-card .rl-loginlike-input:focus,
.rl-loginlike-card .rl-loginlike-textarea:focus{
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}

.rl-loginlike-textarea{
  resize: vertical;
  min-height: 140px;
}

/* Hint / help */
.rl-loginlike-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}

.rl-loginlike-hint{
  color: rgba(255,255,255,.65);
  font-size: .85rem;
}

.rl-loginlike-help{
  display:block;
  margin-top: 8px;
  color: rgba(255,255,255,.65);
  font-size: .85rem;
}

/* Alert */
.rl-loginlike-alert{
  margin: 14px 16px 0;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.28);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
}

/* Button */
.rl-loginlike-footer{
  display:flex;
  justify-content:flex-end;
  margin-top: 14px;
}

.rl-loginlike-btn{
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  min-width: 120px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #4aa3ff 0%, #2b7fe7 100%);
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
  transition: transform .08s ease, filter .15s ease, opacity .15s ease;
}

.rl-loginlike-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.rl-loginlike-btn:disabled{
  opacity: .75;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 720px){
  .rl-loginlike-wrap{
    padding: 70px 14px 34px;
  }
  .rl-loginlike-grid{
    grid-template-columns: 1fr;
  }
  .rl-loginlike-footer{
    justify-content:stretch;
  }
  .rl-loginlike-btn{
    width:100%;
  }
}

/* =========================
   ABOUT (v2) - pro & responsive
========================= */

.about-page{
  padding: 28px 16px 46px;
  min-height: calc(100vh - 120px);
}

.about-shell{
  max-width: 1100px;
  margin: 0 auto;
}

/* HERO */
.about-hero2{
  background: linear-gradient(135deg, rgba(33,54,71,1), rgba(23,40,56,1));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 26px 26px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.about-hero2::before{
  content:"";
  position:absolute;
  inset: -40px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(59,130,246,.35), transparent 60%);
  filter: blur(2px);
  transform: rotate(15deg);
}

.about-hero2-top{
  display:flex;
  justify-content:flex-start;
  margin-bottom: 10px;
}

.about-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 700;
  font-size: .9rem;
}

.about-title2{
  margin: 6px 0 8px;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: .2px;
}

.about-subtitle2{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 1.02rem;
  line-height: 1.5;
  max-width: 900px;
}

/* Highlights */
.about-highlights{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.about-pill{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.about-ico{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.25);
  font-size: 18px;
}

.about-pill-title{
  font-weight: 800;
  line-height: 1.1;
}

.about-pill-text{
  margin-top: 2px;
  color: rgba(255,255,255,.72);
  font-size: .92rem;
}

/* Cards grid */
.about-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.about-card2{
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(31,53,83,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.about-card2:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,.14);
}

.about-card2-wide{
  grid-column: 1 / -1;
}

.about-card2-head{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 8px;
}

.about-card2-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.18);
  font-size: 18px;
}

.about-card2-title{
  margin: 0;
  font-weight: 900;
  font-size: 1.35rem;
  color: #0f172a;
}

.about-card2-text{
  margin: 0;
  color: #334155;
  line-height: 1.6;
  font-size: 1rem;
}

/* Tags */
.about-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.about-tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.18);
  color: #0f172a;
  font-weight: 800;
  font-size: .9rem;
}

/* Responsive */
@media (max-width: 900px){
  .about-highlights{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-title2{ font-size: 1.7rem; }
}

