/* ========== Base ========== */
:root{
  --bg: #0b1f2a;
  --brand: #803339;
  --brand-2: #22c55e;
  --text: #D0CECF;
  --text2: #4D4D4D;
  --text3: #ddbaba;
  --muted: #3b3b3b;
  --surface: #f8f9fa;
  --surface-alt: #685747;
  --border: #e2e8f0;
  --shadow: 0 10px 30px rgba(2, 23, 42, .08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--bg);
  background:#fff;
  line-height:1.6;
}
main{scroll-margin-top: 100px}

/* Containers & sections */
.container{ margin-inline:30px}
.section{padding:72px 0; scroll-margin-top: 100px}
.section-alt{background:var(--surface-alt)}
.section-lead{color:var(--muted); margin-top:.25rem;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; 
  background:rgba(230, 230, 230, 0.9); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(226,232,240,.8);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:12px}
.logo{display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; font-weight:600}
.logo img {height: 120px;  width: auto;}
.logo-mark{font-size:1.5rem}
.logo-text {color:var(--text2)}
.logo-text strong{color:var(--brand)}
.site-nav ul{display:flex; gap:1rem; align-items:center}
.site-nav a{color:var(--text2); text-decoration:none; padding:.5rem .75rem; border-radius:999px}
.site-nav a:hover{background:#eef7ff}
.btn{display:inline-block; padding:.7rem 1rem; border-radius:10px; text-decoration:none; border:1px solid var(--brand);}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow); border-color:var(--brand)}
.btn-outline{border-color:var(--border); color:var(--text); background:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline:hover{background:#da22d0}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:24px; height:2px; background:#0f172a; margin:5px 0; border-radius:1px}

/* Hero */
.hero{padding:96px 0}
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center}
.hero-copy h1{font-size:clamp(2rem, 3.2vw, 3rem); margin:.25rem 0}
.hero-copy p{color:var(--text); max-width:52ch}
.hero-cta{display:flex; gap:12px; margin-top:16px}
.hero-media img{width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow);}

/* Cards (Servicios) */
.cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:24px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.card img{width:100%; height:180px; object-fit:cover}
.card-body{padding:16px}
.card h3{margin:0 0 6px}
.card p{color:var(--muted); margin:0}

/* Equipo */
.team{display:grid; grid-template-columns:repeat(1fr); gap:20px; margin-top:24px}
.person{display:flex; gap:12px; align-items:center; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);}
.person img{width: 300px; height:150px; object-fit:contain; border-radius:12px}

/* Testimonios (Slider) */
.slider{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 56px; box-shadow:var(--shadow)}
.slides{overflow:hidden; min-height:130px}
.slide{display:none; margin:0}
.slide.active{display:block}
.slide blockquote{font-size:1.1rem; margin:0 0 .5rem}
.slide figcaption{color:var(--muted)}
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:#fff; box-shadow:var(--shadow); width:36px; height:36px; border-radius:50%;
  cursor:pointer; font-size:22px; line-height:1;
}
.slider-btn:hover{background:#f1f5f9}
.slider .prev{left:12px} .slider .next{right:12px}

/* Contacto */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start}
.form{display:grid; gap:12px; background:var(--surface); border:1px solid var(--border); padding:18px; border-radius:14px; box-shadow:var(--shadow)}
.form-row{display:grid; gap:6px}
input, textarea{
  width:100%; padding:.8rem .9rem; border-radius:10px; border:1px solid var(--border); background:#fff; outline:0;
}
input:focus, textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(14,165,233,.15)}
#form-status{margin:.35rem 0 0; font-size:.95rem}

.contact-info{margin-top: 120px;background:var(--surface); border:1px solid var(--border); padding:18px; border-radius:14px; box-shadow:var(--shadow)}
.contact-list{padding:0; margin:0 0 1rem; display:grid; gap:.35rem}
.contact-list a{color:var(--brand)}

.map-embed img, .map-embed iframe{width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid var(--border)}

    .social a {
      margin: 0 15px;
      text-decoration: none;
      font-size: 2rem;
      color: #030000;
      transition: 0.3s;
    }

/* Footer */
.site-footer{border-top:1px solid var(--border); background:#fff; padding:24px 0; margin-top:24px}
.footer-inner{display:flex; align-items:center; justify-content:center; gap:12px}
.footer-nav a{color:var(--muted); text-decoration:none; margin-left:12px}

/* Scroll to top */
.scroll-top{
  position:fixed; right:16px; bottom:16px; border:0; width:42px; height:42px; border-radius:50%;
  background:var(--brand); color:#fff; box-shadow:var(--shadow); cursor:pointer;
}

/* Reveal animations */
[data-animate]{opacity:0; transform:translateY(16px); transition:all .6s ease}
[data-animate].visible{opacity:1; transform:none}


.calendly-inline-widget {
  background: #fff;               /* Fondo blanco como el form */
  border: 1px solid #ddd;         /* Borde gris claro */
  border-radius: 8px;             /* Bordes redondeados */
  padding: 16px;                  /* Espaciado interno */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra ligera */
  width: 100%;
  max-width: 600px;               /* Igual que un form centrado */
  margin: 0 auto;                 /* Centrar horizontalmente */
  min-height: 630px;              /* Altura mínima para el widget */
}
/* Responsive */
@media (max-width: 1024px){
  .contact-info{margin-top: 40px;}
  .logo img {height: 80px;  width: auto;}
  .cards{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-cta{justify-content:center}
  .hero-copy{display: flex;  flex-direction: column; text-align: center; align-items: center}

}
@media (max-width: 720px){
  .site-nav{height: 250px;position:fixed; inset:100px 0 0 0; background:rgb(230, 230, 230); padding:12px 16px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease}
  .site-nav.open{opacity:1; background:#0c0404; pointer-events:auto}
  .site-nav a{color:var(--text3)}
  .site-nav ul {flex-direction:column; align-items:stretch}
  .nav-toggle{display:block}
  .cards{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .person{flex-direction: column; text-align: center; align-items: center}
  .container{margin-inline: 20px}
}