@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#eef2f7;
  --white:#ffffff;
  --primary:#0f172a;
  --primary2:#1e3a5f;
  --accent:#2563eb;
  --text:#0f172a;
  --textSoft:#475569;
  --border:#dbe3ee;
  --shadow:0 10px 30px rgba(15,23,42,.05);
  --shadowHover:0 24px 60px rgba(15,23,42,.10);
  --radius:28px;
  --transition:.35s cubic-bezier(.4,0,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Inter',Arial,sans-serif;
  background:linear-gradient(to bottom,#f8fafc,#eef2f7);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}

a{ text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ width:min(1200px,92%); margin:auto; }

/* =========================================
   HEADER
========================================= */
header{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:9999;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(15,23,42,.06);
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}

header::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

.topbar{
  width:min(1200px,92%);
  height:92px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.brand-logo {
  height: 68px;
  width: auto;
  object-fit: contain;
}

.brand-text h1{ font-size:18px; font-weight:800; line-height:1.1; }
.brand-text p{ margin-top:3px; color:var(--textSoft); font-size:12px; }

nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

nav a{
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#334155;
  font-size:14px;
  font-weight:700;
  transition:var(--transition);
}

nav a:hover{ background:#f1f5f9; color:var(--text); }

.admin-link,
.btn-cotizar,
.serv-price{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff !important;
  box-shadow:0 12px 30px rgba(15,23,42,.12);
}

/* =========================================
   HERO — centrado con imagen de fondo
========================================= */
.hero{
  position:relative;
  padding:215px 20px 135px;
  overflow:hidden;
  text-align:center;
  background:
    linear-gradient(180deg,
      rgba(21, 33, 61, 0.72) 0%,
      rgba(22, 39, 81, 0.55) 40%,
      rgba(68, 122, 189, 0.95) 100%),
    url('https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1600&q=80')
    center/cover no-repeat;
}

.hero h2{
  position:relative;
  z-index:1;
  max-width:860px;
  margin:0 auto 20px;
  color:#ffffff;
  font-size:clamp(40px,5.8vw,68px);
  line-height:1.05;
  font-weight:800;
}

.hero p{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 auto 38px;
  color:rgba(255,255,255,.85);
  font-size:18px;
}

.btn-cotizar{
  position:relative;
  z-index:1;
  min-height:56px;
  padding:0 32px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:var(--transition);
  font-family:'Inter',Arial,sans-serif;
}

.btn-cotizar:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(15,23,42,.22);
}

/* =========================================
   SERV-PRICE
========================================= */
.serv-price{
  min-height:48px;
  padding:0 22px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:var(--transition);
  margin-top:auto;
}

.serv-price:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(15,23,42,.18);
}

/* =========================================
   SECCIONES
========================================= */
.servicios{ width:min(1200px,92%); margin:auto; padding:72px 0; }
.compact-section{ padding-top:20px; }

.servicios h3{
  text-align:center;
  color:var(--text);
  font-size:clamp(32px,4vw,42px);
  font-weight:800;
  line-height:1.12;
  margin-bottom:16px;
}

.section-intro{
  max-width:720px;
  margin:0 auto 42px;
  text-align:center;
  color:var(--textSoft);
}

/* =========================================
   CARDS
========================================= */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}

.serv-card{
  overflow:hidden;
  display:grid;
  grid-template-columns:42% 1fr;
  min-height:360px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.serv-card:hover{
  transform:translateY(-6px);
  border-color:rgba(37,99,235,.32);
  box-shadow:var(--shadowHover);
}

.serv-img{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
}

.serv-img img{ width:100%; max-height:260px; object-fit:contain; }

.serv-content{
  padding:30px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.card-tag{
  display:inline-flex;
  padding:6px 12px;
  margin-bottom:14px;
  border-radius:999px;
  background:#eef4ff;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}

.serv-card h4{
  margin-bottom:10px;
  color:var(--text);
  font-size:25px;
  line-height:1.2;
  font-weight:800;
}

.serv-card p{ color:var(--textSoft); margin-bottom:18px; }

.serv-card ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:24px;
}

.serv-card li{
  position:relative;
  padding-left:20px;
  color:#334155;
  font-size:14px;
}

.serv-card li::before{
  content:"";
  position:absolute;
  left:0; top:10px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent);
}

/* =========================================
   BENEFICIOS
========================================= */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.benefit-item{
  padding:24px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#fff;
  color: var(--textSoft);
  text-align: justify;
  text-align-last: center;
  box-shadow:var(--shadow);
}

.benefit-item strong{ display:block; margin-bottom:8px; color:var(--text); font-size:18px; }
.benefit-item p{ color:var(--textSoft); }

/* =========================================
   UBICACION
========================================= */
.ubicacion-card{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow);
}

.ubicacion-info{ padding:38px; display:flex; flex-direction:column; gap:22px; }
.ubicacion-item strong{ display:block; margin-bottom:6px; color:var(--text); }
.ubicacion-item p{ color:var(--textSoft); }
.ubicacion-mapa{ min-height:410px; }
.ubicacion-mapa iframe{ width:100%; min-height:100%; }

/* =========================================
   MODAL
========================================= */
.modal-overlay{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:.3s;
  padding: 10px 16px 16px 16px;
}

.modal-overlay.active{ display:flex; opacity:1; visibility:visible; }

.modal{
  background:#ffffff;
  padding:36px 32px 32px;
  border-radius:16px;
  max-width:700px;
  width:92%;
  position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  border:none;
  max-height:90vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}

.modal h3{ font-size:1.35rem; font-weight:800; color:#0f3460; margin:0 0 4px; }
.modal .subtitle{ font-size:.875rem; color:#64748b; margin:0 0 20px; }

.modal-close{
  position:absolute;
  top:14px; right:16px;
  background:none;
  border:none;
  font-size:1.3rem;
  cursor:pointer;
  color:#94a3b8;
  line-height:1;
  transition:color .15s;
}

.modal-close:hover{ color:#0f3460; }

.form-group{ margin-bottom:16px; }

.form-group label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:#475569;
  margin-bottom:5px;
  letter-spacing:.02em;
}

.form-group input,
.form-group select{
  width:100%;
  height:46px;
  padding:0 14px;
  border:1.5px solid #e2e8f0;
  border-radius:12px;
  font-size:14px;
  color:#0f172a;
  background:#f8fafc;
  outline:none;
  transition:border-color .25s, box-shadow .25s, background .25s;
  font-family:'Inter',Arial,sans-serif;
}

.form-group input::placeholder{ color:#94a3b8; }

.form-group input:focus,
.form-group select:focus{
  border-color:#2563eb;
  background:#ffffff;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.form-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
  cursor:pointer;
}

.btn-submit{
  width:100%;
  padding:13px;
  margin-top:6px;
  border:none;
  border-radius:10px;
  background:#0f3460;
  color:#ffffff;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, transform .1s;
  font-family:'Inter',Arial,sans-serif;
}

.btn-submit:hover:not(:disabled) {
  background: #1a4a80;
}

.btn-submit:active:not(:disabled) {
  transform: scale(.98);
}

.btn-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-submit:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(15,23,42,.22); }
.btn-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* =========================================
   TOAST
========================================= */
.toast{
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  padding:14px 24px;
  border-radius:14px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  opacity:0;
  transition:all .35s;
  z-index:99999;
  pointer-events:none;
  white-space:nowrap;
}

.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success{ background:#16a34a; box-shadow:0 12px 32px rgba(22,163,74,.3); }
.toast.error{ background:#dc2626; box-shadow:0 12px 32px rgba(220,38,38,.3); }

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

.witrfm_area{

    background:#0f172a;

    color:#fff;

    margin-top:120px;
}

.footer-middle{

    padding:90px 0 60px;
}

.footer-middle .container{

    width:min(1200px,92%);

    margin:auto;
}

.footer-middle .row{

    display:grid;

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

    gap:50px;
}

.footer-box h2{

    font-size:22px;

    margin-bottom:26px;

    position:relative;
}

.footer-box h2::after{

    content:'';

    width:55px;
    height:3px;

    background:#2563eb;

    position:absolute;

    left:0;
    bottom:-10px;

    border-radius:20px;
}

.footer-box p{

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

    line-height:1.9;

    font-size:15px;
}

.social-icons{

    display:flex;

    gap:14px;

    margin-top:24px;
}

.social-icons a{

    width:46px;
    height:46px;

    border-radius:14px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    transition:.3s;
}

.social-icons a:hover{

    background:#2563eb;

    transform:translateY(-4px);
}

.footer-links{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:14px;
}

.footer-links a{

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

    transition:.3s;
}

.footer-links a:hover{

    color:#60a5fa;

    padding-left:6px;
}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.footer-item{

    display:flex;

    gap:14px;

    align-items:flex-start;
}

.footer-item i{

    color:#60a5fa;

    margin-top:4px;
}

.footer-item span{

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

    line-height:1.7;

    font-size:15px;
}

.footer-hours{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.hour-row{

    display:flex;

    justify-content:space-between;

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

    padding-bottom:10px;

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

    font-size:15px;
}

.footer-bottom{

    border-top:
    1px solid rgba(255,255,255,.08);

    padding:24px 20px;

    text-align:center;
}

.copy-right-text p{

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

    font-size:14px;
}


/* =========================================
   WHATSAPP
========================================= */
.whatsapp-float{
  position:fixed;
  right:26px; bottom:26px;
  z-index:9999;
  width:62px; height:62px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  color:#fff;
  font-size:15px;
  font-weight:900;
  box-shadow:0 16px 34px rgba(37,211,102,.24);
  transition:var(--transition);
}

.whatsapp-float:hover{ transform:scale(1.06); }

/* =========================================
   RESPONSIVE
========================================= */
@media(max-width:1050px){
  .topbar{ height:auto; min-height:92px; padding:14px 0; align-items:flex-start; flex-direction:column; }
  nav{ justify-content:flex-start; }
  .cards-grid{ grid-template-columns:1fr; }
}

@media(max-width:850px){
  .hero{ padding:160px 18px 90px; }
  .brand-logo{ width:125px; }
  .serv-card,
  .ubicacion-card,
  .benefits-grid,
  .footer-grid{ grid-template-columns:1fr; }
  .serv-card{ min-height:0; }
  .serv-img img{ max-height:230px; }
  .ubicacion-mapa{ min-height:310px; }
  .footer-middle{ padding:50px 0 30px; }
}

@media(max-width:560px){
  .brand-text{ display:none; }
  nav a{ min-height:38px; padding:0 11px; font-size:12px; }
  .hero h2{ font-size:36px; }
  .hero p{ font-size:16px; }
  .servicios{ padding:46px 0; }
  .serv-content,
  .ubicacion-info{ padding:24px; }
  .footer-grid{ text-align:center; }
  .footer-logo{ margin-left:auto; margin-right:auto; }
  .hour-row{ flex-direction:column; }
}