/* =========================================================
   Estilos del sitio (única hoja)
   - Pensado para convivir con Bootstrap + bootstrap-theme.css
   - Usa tu paleta con variables CSS (ver :root)
   ========================================================= */

/* ---------- Reset básico / box model ---------- */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  color:#24323b;
  background:#F4FBFD; /* fondo claro azulado */
}
.container{ max-width:1100px; }

/* ---------- Paleta (alineada a tu logo) ---------- */
:root{
  --brand-700:#075b77;   /* azul petróleo oscuro */
  --brand-600:#0a6f8f;   /* teal profundo */
  --brand-500:#0e8fb0;   /* teal (botones primarios) */
  --brand-400:#13a7c8;   /* aqua vivo */
  --brand-300:#5fd0e3;   /* aqua claro */
  --brand-050:#e6f7fb;   /* celeste muy claro */
  --ink:#24323b;         /* texto */
  --white:#ffffff;
}

/* =========================================================
   Header / Navbar
   ========================================================= */
.encabezado{ background:var(--brand-700); border-bottom:1px solid rgba(255,255,255,.12); }
.topbar{ position:sticky; top:0; z-index: 1000; }

.marca{ display:inline-block; padding:10px 0; }
.logo{ height:48px; vertical-align:middle; }

.nav{ display:flex; justify-content:flex-end; align-items:center; width:100%; }
.menu{ display:flex; gap:16px; margin:0; padding:0; list-style:none; }
.link{ color:#e9f9ff; text-decoration:none; padding:10px 8px; border-radius:6px; }
.link:hover, .link:focus{ background:rgba(255,255,255,.12); color:#fff; }

/* =========================================================
   Hero (con carrusel Bootstrap)
   ========================================================= */
.hero{ background: linear-gradient(180deg, var(--brand-600), transparent); }
.imgu{ width:100%; display:block; border-radius:8px; }

.hero .carousel-item img{ height:460px; object-fit:cover; border-radius:8px; }

.hero__caption{
  background: rgba(0,0,0,.45);
  color:#fff;
  padding:16px;
  border-radius:8px;
}
.hero .carousel-caption.hero__caption{
  left:16px; right:auto; bottom:16px; text-align:left;
}

/* Botones del sitio */
.btn{ display:inline-block; border-radius:6px; transition:.15s; }
.btn:hover{ filter:brightness(.95); }
.btn-orange{ background:var(--brand-500); color:#fff; }
.btn-purple{ background:var(--brand-600); color:#fff; }

/* Titulares sobre fondos oscuros */
.h11{ color:#ffffff; margin:8px 0; }
.h21{ color:#ffffff; border-bottom:2px solid rgba(255,255,255,.25); padding-bottom:6px; margin:16px 0; }

/* =========================================================
   Planes (cards comerciales)
   ========================================================= */
.planes-oferta{
  background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%);
  padding: 24px 0 32px;
}
.planes-grid{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }

.plan-card{
  width:260px; background:#fff; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; gap:0;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.plan-card .plan-head{
  background:
    radial-gradient(160px 100px at 80% -20%, #fff 40%, transparent 41%),
    radial-gradient(160px 100px at -20% 0%, #fff 40%, transparent 41%),
    linear-gradient(180deg, var(--brand-400), var(--brand-700));
  color:#fff; text-align:center; padding:18px 12px;
}
.plan-badge{
  display:inline-block; background:#c9f3fb; color:#0b4c61;
  padding:4px 8px; border-radius:999px; font-size:.8rem; margin-bottom:6px;
}
.plan-vel{ font-size:2.6rem; line-height:1; margin:0; }
.plan-vel span{ display:block; font-size:1.1rem; margin-top:4px; opacity:.9; }

.plan-body{ padding:14px 14px 18px; display:flex; flex-direction:column; gap:10px; }
.plan-incluye{ margin:0; padding-left:18px; color:#2f3a40; }
.plan-precio{ font-size:1.1rem; color:#2f3a40; }
.plan-precio strong{ font-size:1.8rem; color:#19242a; }

.destacado{ outline:3px solid var(--brand-300); }

.promo-banner{
  margin:22px auto 0; padding:16px; max-width:800px;
  background:var(--brand-050); color:#0a4a5f; border:1px solid var(--brand-300);
  border-radius:16px; text-align:center; display:flex; flex-direction:column; gap:8px;
}

/* =========================================================
   Beneficios
   ========================================================= */
.benef-block{ padding:24px 0; background:var(--brand-700); }
.benef-grid{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.benef-card{
  width:260px;
  background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand-500) 50%, #fff 50%);
  color:#fff; border-radius:16px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.benef-card h3{ margin:0 0 6px; }
.benef-card p{ color:#1c3340; margin:12px 0 0; }

/* =========================================================
   ¿Ya eres cliente?
   ========================================================= */
.cliente-grid{ background:var(--brand-600); padding:24px 0; }
.cards{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.card{
  flex:1 1 280px; border:1px solid #e0e0e0; border-radius:12px;
  padding:16px; background:#fff; display:flex; flex-direction:column; gap:12px;
}
.card h3{ margin:0; color:var(--brand-700); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:#083c4d; color:#dff6fb; margin-top:24px; }
.footer-cols{ display:flex; flex-wrap:wrap; gap:24px; padding:24px 0; }
.footer-cols section{ flex:1 1 220px; }
.site-footer a{ color:#dff6fb; text-decoration:none; }
.copy{ text-align:center; padding:12px; color:#bfe6f1; border-top:1px solid rgba(255,255,255,.12); }

/* =========================================================
   Formulario de contacto
   ========================================================= */
.formulario{ max-width: 720px; }
.formulario label{ display:block; margin:10px 0 4px; font-weight:600; color:#0a6f8f; }

/* ⬇️ Solo inputs de texto: no afectar checkboxes/radios */
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario input[type="search"],
.formulario input[type="password"],
.formulario input[type="url"],
.formulario input[type="number"],
.formulario select,
.formulario textarea{
  width:100%;
  padding:10px;
  font-size:1rem;
  border:1px solid #cfe3ea;
  border-radius:6px;
  background:#fff;
}

/* Textarea más proporcionada */
.formulario textarea{
  min-height:140px;
  resize:vertical;
  line-height:1.4;
}

/* Validación: no pintar de rojo a los checkboxes */
.formulario input:not([type="checkbox"]):required:invalid,
.formulario select:required:invalid{
  border-color:#e07d7d;
}

/* Checkboxes compactos y con color de marca */
.form-check{ display:flex; align-items:flex-start; gap:.5rem; }
.form-check-input{
  width:1.15rem;
  height:1.15rem;
  margin-top:.25rem;               /* alinea con el texto */
  accent-color: var(--brand-500);  /* color del check (navegadores modernos) */
}
.form-check-label{ margin-top:.05rem; }

.fila{ display:flex; gap:12px; }
.campo{ flex:1; }
.contacto-extra{ margin-top:20px; text-align:center; }
.icono{ height:40px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px){
  .nav{ justify-content:space-between; }
  .hero .carousel-item img{ height:280px; }
  .hero .carousel-caption.hero__caption{
    position:static; background:var(--brand-600); margin-top:8px; border-radius:8px;
  }
  .cards{ gap:12px; }
  .card{ flex-basis:100%; }
  .plan-card, .benef-card{ width:100%; }
  .fila{ flex-direction:column; }
}