:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#2563eb;
  --brand-ink:#0b3ea8;
  --soft:#f1f5f9;
  --radius:16px;

  /* extras para el fondo */
  --sky-1:#e6f2ff;
  --sky-2:#dbeeff;
  --sky-3:#f7fbff;
}

/* Reset básico */
*{box-sizing:border-box}
html,body{margin:0}

/* ================== Base ================== */
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
}

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

/* Botones */
.btn,.btn-outline{
  display:inline-block; padding:.9rem 1.1rem; border-radius:999px;
  text-decoration:none; font-weight:600; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn{background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.25)}
.btn:hover{background:var(--brand-ink); transform:translateY(-1px)}
.btn-outline{border:2px solid var(--brand); color:var(--brand)}
.btn-outline:hover{background:var(--brand); color:#fff}

/* ================== Header ================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: saturate(1.2) blur(8px);
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #e5e9f2; /* gris muy suave */
}

/* ======== NAVBAR ======== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 0;
}

.brand {
  display: flex;
  gap: .6rem;
  align-items: center;
  text-decoration: none;
  color: #1e293b; /* gris oscuro azulado */
  font-weight: 700;
}

.logo {
  height: 34px;
  width: auto;
}

#nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#nav a {
  color: #1e293b; /* gris azulado */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

#nav a:hover {
  color: #2563eb; /* azul profesional (como el botón de contacto) */
}

/* ======== ICONOS SOCIALES ======== */
.social-icons {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 20px;
}

.social-icons a {
  color: #475569; /* gris azulado intermedio */
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.social-icons a:hover {
  color: #2563eb; /* azul médico */
  transform: translateY(-2px);
}

/* ======== MOBILE ======== */
.hamb {
  display: none;
  background: none;
  border: 0;
  font-size: 1.4rem;
}

@media (max-width: 768px) {
  .social-icons {
    display: none;
  }
}



/* ================== Hero ================== */
.hero{position:relative; padding:5rem 0 3rem; overflow:hidden}
.hero-grid{display:grid; gap:2rem; grid-template-columns:1.1fr .9fr; align-items:center}
.hero h1{font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.2; margin:0 0 .6rem}
.hero p{color:var(--muted); margin:0 0 1rem}
.hero-img img{width:100%; height:auto; border-radius:var(--radius); box-shadow:0 10px 30px rgba(2,8,23,.08)}
.hero-cta{display:flex; gap:.6rem; flex-wrap:wrap}


/* ================== Secciones (genérico) ================== */
.section{padding:4rem 0}
.section.alt{
  background:rgba(255,255,255,.6);
  border-top:1px solid #eef2ff; border-bottom:1px solid #eef2ff;
  backdrop-filter:saturate(130%) blur(6px);
}
h2{font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 .6rem}
.muted{color:var(--muted)}

/* Cards (genérico: otras secciones) */
.cards{display:grid; gap:1rem; grid-template-columns:repeat(4,1fr); margin-top:1rem}
.card{
  background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:1.2rem;
  box-shadow:0 6px 16px rgba(2,8,23,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow:0 14px 34px rgba(15,23,42,.12);
  border-color:#e2ecff;
}
.card i{font-size:1.6rem; color:var(--brand)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.rounded{border-radius:var(--radius); width:100%; height:auto; box-shadow:0 10px 30px rgba(2,8,23,.06)}

.checks{padding-left:1.1rem}
.checks li{margin:.4rem 0}
.checks li::marker{content:"✔ "; color:var(--brand)}

.logos{display:flex; gap:1rem; flex-wrap:wrap; align-items:center}
.logos img{height:42px; width:auto; filter:grayscale(1); opacity:.8}

/* ================== Bloque ESPECÍFICO: #servicios ================== */
#servicios{
  background:#f9fafb;
  padding-top:5rem;
  padding-bottom:5rem;
}
#servicios h2{
  text-align:center;
  font-size:2rem;
  color:#0f172a;
  margin-bottom:.5rem;
}
#servicios p.muted{
  text-align:center;
  max-width:600px;
  margin:0 auto 2rem;
}
#servicios .cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.5rem;
  align-items:stretch;
}
#servicios .card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 4px 12px rgba(15,23,42,.05);
  transition:all .3s ease;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
#servicios .card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 20px rgba(15,23,42,.10);
  border-color:#93c5fd;
}
#servicios .card i{
  color:#2563eb;
  font-size:2rem;
  margin-bottom:.5rem;
  display:block;
}
#servicios .card h3{
  margin-top:.5rem;
  font-size:1.2rem;
  color:#0f172a;
}

/* ================== Formulario ================== */
.form{display:grid; gap:.8rem; margin-top:1rem}
.form label{display:grid; gap:.4rem; font-weight:600}
.form input,.form textarea{
  width:100%; padding:.8rem .9rem; border:1px solid #cbd5e1; border-radius:12px; font:inherit; background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form input:focus,.form textarea:focus{outline:2px solid #93c5fd; border-color:#93c5fd}
.form-status{min-height:1.2rem; color:var(--muted); font-size:.95rem}
.contact-details .card.soft{background:#fff}

/* ================== Footer ================== */
.site-footer{padding:2rem 0; border-top:1px solid #e2e8f0; background:rgba(255,255,255,.75)}
.footer-grid{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem}
.footnav a{margin-right:1rem; text-decoration:none; color:var(--muted)}
.footnav a:hover{color:var(--ink)}

.footer-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.creditos {
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.85;
}

.creditos a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.creditos a:hover {
  color: var(--ink);
}


/* ================== Cookies ================== */
.cookie{
  position:fixed; inset:auto 16px 16px 16px; background:#0f172a; color:#fff;
  padding:12px 14px; border-radius:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; z-index:50;
  transform:translateY(140%); opacity:0; transition:transform .35s ease, opacity .35s ease;
}
.cookie button{border:0; padding:.5rem .8rem; border-radius:999px; font-weight:700}
.cookie.show{transform:translateY(0); opacity:1}

/* ================== Animaciones de aparición ================== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:translateY(0)}

/* ================== Responsive ================== */
@media (max-width: 960px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid-2,.hero-grid{grid-template-columns:1fr}
  #nav{
    position:fixed; inset:60px 0 auto 0; background:#fff; border-bottom:1px solid #e2e8f0;
    padding:1rem; display:none; flex-direction:column
  }
  #nav.show{display:flex}
  .hamb{display:block}
}
@media (max-width: 560px){
  .cards{grid-template-columns:1fr}
}

/* ====== Mapa grande fachero ====== */
.map-wrap{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(15,23,42,.12);
  border:1px solid #e2e8f0;
  background:#eef2ff;
}
#map{
  height:520px;
  width:100%;
}

/* Botones del mapa */
.map-actions{display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap}

/* Marcador con pulso centrado */
.pulse-marker{
  position:absolute; width:18px; height:18px; border-radius:50%;
  background:#2563eb; box-shadow:0 0 0 0 rgba(37,99,235,.6);
  left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:400;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.6)}
  70%{box-shadow:0 0 0 18px rgba(37,99,235,0)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}

/* Ajuste en móviles */
@media (max-width:560px){
  #map{height:420px}
}

/* ================== CONTACTO NUEVO ================== */
.contact-info {
  text-align: center;
}

.contact-info h2 {
  font-size: 2rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.contact-info .muted {
  margin-bottom: 2rem;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.contact-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 1.5rem 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 6px 16px rgba(2, 8, 23, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
  border-color: #c7d2fe;
}

.contact-card i {
  font-size: 1.6rem;
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.contact-card h3 {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
  color: var(--ink);
}

.contact-card a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

/* ====== Mails (fachero) ====== */

.mail-section {
  max-width: 720px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius, 16px);
  padding: 2rem;
  box-shadow: 0 6px 16px rgba(2, 8, 23, 0.04);
  text-align: center; /* título centrado */
}

.mail-section.mt {
  margin-top: 2rem;
}

.mail-section h3 {
  margin: 0 0 1.25rem;
  font-size: 1.3rem;
  color: var(--ink);
}

/* lista */
.mail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* fila */
.mail-list li {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem 1rem;

  display: grid;
  grid-template-columns: 1.4fr 1fr; /* rol | mail */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  text-align: left; /* el contenido de la fila va alineado */
}

.mail-list li:hover {
  transform: translateY(-2px);
  border-color: rgba(79,70,229,.35);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(2,8,23,0.06);
}

/* rol */
.mail-role {
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 600;
}

/* mail */
.mail-list a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
  justify-self: end; /* empuja el mail a la derecha en desktop */
  transition: color 0.2s ease, text-decoration-color .2s ease;
}

.mail-list a:hover,
.mail-list a:focus-visible {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Responsive: apilar y centrar en mobile */
@media (max-width: 600px) {
  .mail-list li {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mail-list a {
    justify-self: center;
  }
}

/* (tu bloque existente para .contact-card queda intacto) */
@media (max-width: 600px) {
  .contact-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .contact-card i {
    margin-bottom: 0.5rem;
  }
}


/* ==== Mejora visual de Contacto ==== */
.contact-info {
  text-align: center;
  padding-top: 2rem;
}

.contact-cards {
  gap: 2rem;
  margin-top: 2rem;
}

.contact-card {
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.08);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  padding: 1.8rem 1.5rem;
  transition: all 0.3s ease;
}
.contact-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.contact-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.contact-card a {
  font-size: 1.05rem;
}

.mail-section {
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.08);
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  padding: 2.5rem 2rem;
  transition: all 0.3s ease;
}
.mail-section:hover {
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.mail-section h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.mail-list a {
  font-size: 1.05rem;
}

/* ==== Disposición piramidal de las tarjetas de contacto ==== */
.contact-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 900px;
  margin-inline: auto;
}

/* Tres arriba, dos abajo */
.contact-card {
  flex: 1 1 260px;
  max-width: 280px;
}

/* Ajuste para que las dos de la última fila se centren */
.contact-card:nth-last-child(-n+2) {
  flex-basis: 320px;
}

/* Responsive: en pantallas pequeñas, todas en columna */
@media (max-width: 700px) {
  .contact-card,
  .contact-card:nth-last-child(-n+2) {
    flex-basis: 100%;
    max-width: none;
  }
}