/* =========================
   Reset, variables y base
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#061630; --bg2:#0b214a;
  --text:#eaf1ff; --muted:#9fb3d1;
  --border:#2a426d;
  --primary:#22c55e; --primaryText:#062610;
  --card:#0e1830; --shadow:0 10px 30px rgba(0,0,0,.25);
  --rad:16px; --accent:#3b82f6;
}
body{
  background:linear-gradient(180deg,var(--bg), #0a1a39 55%, #071225);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.45;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}

/* Justificar todos los párrafos, listas y bloques de texto */
p, li, .muted, .prose, .card, details p {
  text-align: justify;
}


/* =========================
   Layout
   ========================= */
.container{width:min(1100px,92%);margin-inline:auto}
.section{padding:28px 0}
.section--thin{padding:14px 0}

/* =========================
   Header
   ========================= */
.header{border-bottom:1px solid var(--border);background:rgba(8,14,28,.55);backdrop-filter:blur(8px)}
.header-center{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 0;text-align:center}
.brand img{height:140px;width:auto;border-radius:12px}
@media(max-width:660px){ .brand img{height:85px} }

.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border:1px solid var(--border);
  border-radius:12px;background:linear-gradient(180deg,#12203b,#0e1a31);
  color:var(--text);font-weight:600;box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.whatsapp{background:linear-gradient(180deg,#25D366,#17b159);color:var(--primaryText)}
.btn.alt{background:linear-gradient(180deg,#1fd86b,#17b95a);color:var(--primaryText);border-color:rgba(255,255,255,.08)}

/* =========================
   Cards y tipografía
   ========================= */
.card{background:linear-gradient(180deg,var(--card),#0b1730);border:1px solid var(--border);border-radius:var(--rad);padding:18px;box-shadow:var(--shadow)}
h1{font-size:clamp(26px,3.8vw,38px);line-height:1.1;margin:0 0 10px}
h2{font-size:clamp(20px,2.6vw,26px);margin:0 0 8px}
.small{color:var(--muted);font-size:.98rem;margin:.2rem 0}
.badge{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(15,26,50,.7);color:var(--text)}

/* =========================
   Grid
   ========================= */
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media(max-width:900px){ .grid-2{grid-template-columns:1fr} }

/* =========================
   Lista servicios
   ========================= */
.services{columns:2;column-gap:18px;margin:10px 0 0}
.services li{break-inside:avoid;margin:0 0 8px;color:var(--muted);list-style:"✓  ";padding-left:6px}
@media(max-width:560px){ .services{columns:1} }

/* =========================
   CTA
   ========================= */
.cta{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* =========================
   Footer
   ========================= */
.footer{padding:24px 0 36px;color:var(--muted);border-top:1px solid var(--border)}
.legal-links{display:flex;gap:12px;flex-wrap:wrap}
.legal-links a{color:var(--muted)} .legal-links a:hover{color:var(--text)}

/* =========================
   Slider
   ========================= */
.mo-slider{padding:18px 0}
.mo-slider .ms-wrap{
  position:relative;width:min(960px,92%);margin:0 auto;
  background:rgba(17,24,39,.6);border:1px solid rgba(100,120,160,.35);
  border-radius:12px;box-shadow:var(--shadow);overflow:hidden;
}
.ms-slide{display:none;margin:0;padding:0;position:relative}
.ms-slide.is-active{display:block}
.ms-slide img,.ms-slide .ms-media{
  width:100%;height:auto!important;object-fit:contain!important;object-position:center;
  background:#0b214a;display:block;border-radius:0;max-height:420px;
}
@media (max-width:1023.98px){
  .ms-slide img,.ms-slide .ms-media{max-height:60vh}
}
.ms-slide figcaption{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#9fb3d1;
  font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding:0 10px;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.55)
}
.ms-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:999px;z-index:2;
  border:1px solid rgba(100,120,160,.45);background:rgba(20,32,56,.9);color:#eaf1ff;font-size:20px;display:grid;place-items:center;cursor:pointer
}
.ms-prev{left:8px}.ms-next{right:8px}
.ms-dots{display:flex;gap:8px;justify-content:center;padding:10px 0}
.ms-dots button{width:7px;height:7px;border-radius:999px;border:0;cursor:pointer;background:#5b7096;opacity:.5}
.ms-dots button[aria-current="true"]{opacity:1;background:var(--accent)}
@keyframes ms-fade-in{from{opacity:0}to{opacity:1}}
.ms-slide.is-fading-in{animation:ms-fade-in .35s ease}

/* =========================
   ¿Quieres Unirte? centrado
   ========================= */
.center-box{margin:0 auto;max-width:680px;text-align:center}
.joinus .container{display:flex;justify-content:center}
.joinus .cta{justify-content:center;width:100%}

/* =========================
   Banner de cookies (abajo)
   ========================= */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  display:none;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  background:rgba(15,26,50,.95);color:#eaf1ff;padding:16px 20px;border-top:1px solid rgba(255,255,255,.15);
  font-size:.95rem;box-shadow:0 -4px 12px rgba(0,0,0,.3)
}
.cookie-banner p{margin:0;flex:1 1 auto}
.cookie-banner a{color:var(--accent);text-decoration:underline}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
.cookie-actions .btn{padding:6px 14px;font-size:.9rem;border-radius:8px}

/* ===============================
   ADMIN UI — Layout & Forms Bonitos
   =============================== */

/* Contenedor más ancho para paneles */
.admin .container{ width:min(1200px,94%); }

/* Tarjetas más uniformes */
.admin .card{
  padding:22px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.30);
}

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.tabs a{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:var(--text); font-weight:600;
}
.tabs a.active{ background:var(--primary); color:#062610; border-color:var(--primary); }

/* Grids reusables para formularios */
.form{ display:grid; gap:14px; }
.form.grid-2{ grid-template-columns: 1fr 1fr; }
.form.grid-3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px){
  .form.grid-2, .form.grid-3{ grid-template-columns: 1fr; }
}

/* Campo con label + input alineados y consistentes */
.field{ display:flex; flex-direction:column; gap:6px; }
.field.inline{ flex-direction:row; gap:10px; align-items:center; }
.field > label{
  font-size:.95rem; color:var(--muted);
}
.input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
.input:focus, select:focus, textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* Acciones del formulario (botones alineados) */
.actions{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:flex-start; align-items:center;
  margin-top:6px;
}
.actions.right{ justify-content:flex-end; }

/* Botones */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#12203b,#0e1a31);
  color:var(--text); font-weight:700;
}
.btn.alt{ background:linear-gradient(180deg,#1fd86b,#17b95a); color:#062610; border-color:var(--primary); }
.btn.secondary{ background:linear-gradient(180deg,#1f2b48,#17233e); }


/* Badges de estado */
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:var(--muted);
}
.badge.ok{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.5); color:#b2f5c0; }
.badge.warn{ background:rgba(234,179,8,.15); border-color:rgba(234,179,8,.5); color:#fde68a; }
.badge.err{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.5); color:#fecaca; }

/* Tablas responsivas bonitas */
.table-wrap{ overflow:auto; border-radius:12px; border:1px solid rgba(255,255,255,.12); }
table.table{
  width:100%; border-collapse:collapse; min-width: 880px;
  background:rgba(255,255,255,.02);
}
.table th, .table td{
  padding:10px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.table th{
  position:sticky; top:0; z-index:1;
  background:rgba(6,22,48,.9); backdrop-filter: blur(6px);
  font-weight:700; color:#cfe1ff;
}
.table tr:hover td{ background:rgba(255,255,255,.03); }

/* Mensajes */
.notice{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.16); }
.notice.ok{ border-color:#22c55e; background:rgba(34,197,94,.12); }
.notice.err{ border-color:#ef4444; background:rgba(239,68,68,.12); }

/* Inputs pequeños en línea (para filtros) */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.filters .field{ min-width: 220px; }

/* === FAB hamburguesa (móvil) === */
.fab-menu{
  position:fixed; right:16px; bottom:16px; z-index:10000;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:#22c55e; color:#062610; font-weight:800;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.fab-menu .burger{display:inline-grid; gap:3px}
.fab-menu .bar{width:18px; height:2px; background:#062610; border-radius:2px; display:block}
.fab-menu .fab-label{font-size:.95rem}

/* Ocultar FAB en escritorio, mostrar en móviles */
@media (min-width: 900px){ .fab-menu{ display:none } }

/* Overlay y sheet del menú móvil */
.mobile-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998;
}
.mobile-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:#0b1730; border-top:1px solid rgba(255,255,255,.12);
  border-radius:14px 14px 0 0; padding:16px;
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.mobile-sheet .m-link{
  display:block; padding:12px; border:1px solid rgba(255,255,255,.18);
  border-radius:10px; margin-bottom:10px; text-align:center;
  background:rgba(255,255,255,.06); font-weight:700;
}
.mobile-sheet .m-link.cta{ background:#22c55e; color:#062610; border-color:#22c55e }
.mobile-sheet .m-link.whatsapp{ background:linear-gradient(180deg,#25D366,#17b159); color:#062610 }

/* === Ajuste del logo en la sección "joinus" (antes del footer) === */
.joinus .center-box .footer-logo{
  height: 64px !important;   /* cambia a 56px o 48px si la quieres más chica */
  width: auto !important;
  display: block;
  margin: 0 auto 12px !important;  /* centrada + espacio abajo */
}

/* Opcional: aún más chica en móviles */
@media (max-width: 600px){
  .joinus .center-box .footer-logo{
    height: 56px !important;
  }
}