:root{
  --azul:#00bfff;
  --azul2:#6ad7ff;
  --texto:#222;
  --bg1:#f7fbff;
  --bg2:#89cff5; 
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Segoe UI','Montserrat',Arial,sans-serif;
  background:var(--bg1);
  color:var(--texto);
}

/* HEADER */
header{
  background:#fff;
  position:sticky;
  top:0;
  z-index: 2000; /* asegurar que quede encima y sea clickeable */
  box-shadow:0 2px 15px rgba(0,229,255,.08); 
}

.header-content{
  max-width: 1400px;         /* más ancho para acercar extremos a los bordes */
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;/* el contenido inicia desde la izquierda */
  gap: 20px;
  padding: 16px 36px 16px 12px; 
}

.header-content nav{
  margin-left: auto;
} 

header, .header-content, .logo-link, .logo {
  pointer-events: auto; /* por si alguna regla heredada lo anuló */
} 

.logo{ height:52px; } 

nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
nav a{ text-decoration:none; color:var(--texto); font-weight:600; }
nav a:hover{ color:var(--azul); }

.btn-contacto{
  background:linear-gradient(90deg,var(--azul),var(--azul2));
  color:#222 !important; padding:8px 18px; border-radius:22px; font-weight:700;
}

/* SECCIONES (modo landing por defecto: todas visibles y con scroll) */
.section{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:64px 24px;
  background:linear-gradient(90deg,var(--bg1) 60%, var(--bg2) 100%);
} 

.container{ max-width:1100px; width:100%; text-align:center; }

/* HERO */
.hero{ text-align:left; gap:40px; }
.hero .hero-content{ flex:1; max-width:600px; }
.hero .hero-img{ flex:1; display:flex; justify-content:center; }
.hero .hero-img img{ max-width:420px; width:100%; opacity:.9; }

.hero h1{
  font-size: 3.2em;
  font-weight: 800;
  margin: 0 0 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.05;
}

.hero p{ 
  font-size:1.25em; 
  margin:0 0 28px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-weight: 500;
}
  
.btn-principal{
  background: var(--azul2);
  color: #222;
  border: none;
  padding: 14px 28px;
  border-radius: 18px;
  display: inline-block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;   
} 

.btn-principal:hover,
.btn-principal:focus,
.btn-principal:active,
.btn-principal:visited{
  text-decoration: none;         
} 

/* Cards */
.cards{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.card{ background:#eaf7ff; padding:22px; border-radius:14px; width:240px; }

/* Form */
.contact-form{ background:#eaf7ff; padding:24px; border-radius:16px; max-width:420px; margin:0 auto; }
.input-group{ margin-bottom:12px; }
.contact-form input,.contact-form textarea{ width:100%; padding:10px; border:1px solid var(--azul); border-radius:8px; background:#fff; }

footer{ text-align:center; padding:20px; background:#eaf7ff; }

/* MODO MENÚ: solo una sección visible */
body.menu-mode .section{ display:none; }
body.menu-mode .section.activa{ display:flex; }

/* Responsive */
@media (max-width:900px){
  .header-content{ flex-direction:column; gap:10px; align-items:flex-start; }
  .hero{ flex-direction:column; text-align:center; }
  .hero .hero-content{ max-width:100%; }
} 

#respuesta{
  margin-top:10px;
  text-align:center;
  min-height:20px;
  opacity: 0;                     /* oculto por defecto */
  transition: opacity .35s ease;  /* fade in/out */
}

#respuesta.visible{
  opacity: 1;                     /* se muestra con fade */
}

.loader{
  margin:14px auto 0;
  width:32px; height:32px;
  border:4px solid rgba(0, 191, 255, .15);
  border-top-color:#00bfff;
  border-radius:50%;
  animation:spin 1s linear infinite;
  display:none;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.contact-form{
  background:#eaf7ff;
  padding:24px;
  border-radius:16px;
  max-width:420px;
  margin: 0; /* antes: margin:0 auto; el grid controla el alineado */
}
/* ===== Contacto (dos columnas) ===== */
#contacto .container{ text-align: left; }

.contact-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;  /* info | formulario */
  gap: 28px;
  align-items: start;
}
.contact-info{ max-width: 620px; }

.contact-form-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#contacto .contact-grid .section-title{
  grid-column: 1 / -1;                  /* ocupa ambas columnas */
  text-align: center;                    /* centrado arriba */
  font-size: clamp(1.9rem, 2.2vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--azul); 
}

/* Asegura mismo tamaño del subtítulo izquierdo (sea h1 o h2) */
#contacto .contact-info h1,
#contacto .contact-info h2{
  font-size: clamp(1.9rem, 2.2vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
} 

/* Form en su columna */
#contacto .contact-form{
  width: 100%;
  max-width: 520px;
  margin: 0;
}

@media (max-width: 900px){
  #contacto .contact-grid .section-title{ text-align: center; }
} 

#contacto .contact-form button{
  width: 100%; /* quita esta línea si lo prefieres del tamaño del contenido */
  background: linear-gradient(90deg, var(--azul), var(--azul2)); /* color del cuadro */
  color: #fff;                 /* color de la letra */
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,191,255,.25);
  transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
}

#contacto .contact-form button:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,191,255,.35);
}

#contacto .contact-form button:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,191,255,.25);
}

#contacto .contact-form button:focus{
  outline: 3px solid rgba(0,191,255,.35);
  outline-offset: 2px;
}

#contacto .contact-form button:disabled{
  opacity: .6;
  cursor: not-allowed;
} 

.about-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  text-align: left;
}

.about-block{
  padding-left: 16px;                       /* simple acento visual */
  border-left: 4px solid rgba(0,191,255,.35);
}

.about-block h3{
  margin: 0 0 10px;
  color: var(--azul);
  font-weight: 800;
  font-size: 1.35rem;
}

.about-block p{
  margin: 0;
  color: var(--texto);
  line-height: 1.7;
  font-size: 1rem;
}

@media (max-width: 900px){
  .about-split{ grid-template-columns: 1fr; gap: 20px; }
} 

.card{
  background:#eaf7ff;
  padding:22px;
  border-radius:14px;
  width:240px;
  text-align:center;                 /* centra contenido */
}

.card .card-icon{
  width:96px;
  height:96px;
  object-fit:contain;                /* mantiene proporciones del icono */
  display:block;
  margin:0 auto 10px;
  filter: drop-shadow(0 2px 6px rgba(0,191,255,.2));
}