/* ==========================================
   Dr. Roberto Carlos Pérez Limón — Premium Editorial
   Clean build (single source of truth). 
   ========================================== */

:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --ink: #0b1220;
  --muted: rgba(11,18,32,.68);
  --stroke: rgba(11,18,32,.10);

  --brand: #0f3a66;
  --brand2:#1f6aa6;
  --accent:#0b1220;

  --radius: 18px;
  --shadow: 0 18px 50px rgba(11,18,32,.10);
  --shadow2: 0 28px 80px rgba(11,18,32,.16);

  --container: 1140px;
  --gutter: clamp(16px, 3.5vw, 28px);
  --section: clamp(44px, 5.4vw, 86px);

  --serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  background: radial-gradient(1200px 700px at 20% -10%, rgba(31,106,166,.10), transparent 55%),
              radial-gradient(900px 600px at 110% 10%, rgba(15,58,102,.08), transparent 55%),
              var(--bg);
  color: var(--ink);
  line-height: 1.55;
}

img{ max-width:100%; height:auto; }
a{ color: inherit; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Header (editorial glass) ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 80;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,18,32,.08);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 28px rgba(11,18,32,.08);
}

.header-flex{
  min-height: 76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.logo{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
}
.logo img{ height: 68px; width:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong{
  font-size: 1.02rem;
  letter-spacing: .2px;
}
.brand-text small{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav a{
  text-decoration:none;
  font-weight: 650;
  color: rgba(11,18,32,.86);
}
.nav a:hover{ color: rgba(11,18,32,1); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 14px 28px rgba(15,58,102,.20);
  font-weight: 800;
  letter-spacing: .1px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 34px rgba(15,58,102,.24); }
.btn:active{ transform: translateY(0px); }
.btn-ghost{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow:none;
}
.btn-ghost:hover{ filter: brightness(1.03); }

.btn-sm{ padding: 10px 14px; border-radius: 999px; font-weight: 800; }

/* Mobile nav */
.nav-toggle{
  display:none;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
  align-items:center; justify-content:center;
  gap: 6px;
}
.nav-toggle span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(11,18,32,.75);
  border-radius: 999px;
}

.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(11,18,32,.32);
  z-index: 70;
  display:none;
}

@media (max-width: 980px){
  .nav-toggle{ display:flex; }
  .nav{
    position: fixed;
    top: 86px;
    left: var(--gutter);
    right: var(--gutter);
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(11,18,32,.10);
    box-shadow: 0 22px 60px rgba(11,18,32,.18);
    display:grid;
    gap: 8px;
    opacity:0;
    transform: translateY(-10px);
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  body.nav-open .nav{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
  body.nav-open .nav-backdrop{ display:block; }
  .nav a{ padding: 12px 12px; border-radius: 14px; }
  .nav a:hover{ background: rgba(31,106,166,.08); }
  .brand-text{ display:none; }
  .logo img{ height: 62px; }
}

/* ---------- Sections ---------- */
.section{
  padding: var(--section) 0;
}
.section-head{
  max-width: 78ch;
  margin-bottom: 18px;
}
.section-head h2, .section-head h3{
  margin: 0 0 8px 0;
  font-family: var(--serif);
  letter-spacing: -0.01em;
}
.section-head p{ margin: 0; color: var(--muted); }

.muted{ color: var(--muted); }
.small{ font-size: .92rem; }
.big{ font-size: 1.06rem; }

/* ---------- Hero (premium editorial) ---------- */
.hero{
  padding: clamp(18px, 2.8vw, 28px) 0 clamp(34px, 4.6vw, 56px);
}
.hero-banner{
  position: relative;
  border-radius: clamp(18px, 2.2vw, 30px);
  overflow: hidden;
  box-shadow: var(--shadow2);
  min-height: clamp(520px, 62vh, 720px);
  background: #0b1220;
}
.hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(11,18,32,.84) 0%,
      rgba(11,18,32,.68) 34%,
      rgba(11,18,32,.34) 52%,
      rgba(11,18,32,.14) 66%,
      rgba(11,18,32,0) 78%,
      rgba(11,18,32,0) 100%
    );
}
.hero-content{
  position: relative;
  z-index: 2;
  padding: clamp(24px, 4.2vw, 56px);
  max-width: 720px;
  color:#fff;
  text-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.hero-eyebrow{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}
.hero h1{
  margin: 18px 0 12px 0;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(2.8rem, 4.4vw, 4.6rem);
}
.hero-sub{
  margin: 0 0 18px 0;
  max-width: 62ch;
  color: rgba(255,255,255,.88);
  font-size: 1.06rem;
}
.cta-row{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 18px; }
.hero-metrics{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 18px;
}
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 700;
  font-size: .92rem;
}

/* Hero info card (right/bottom) */
.hero-card{
  position:absolute;
  right: clamp(14px, 2.2vw, 22px);
  bottom: clamp(14px, 2.2vw, 22px);
  width: min(360px, calc(100% - 28px));
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 16px;
  color:#fff;
  z-index: 2;
}
.hero-card strong{ display:block; font-weight: 900; letter-spacing: .2px; }
.hero-card span{ display:block; margin-top: 6px; opacity:.92; }
.hero-card a{ color:#fff; font-weight: 850; text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 2px; }
.hero-card a:hover{ opacity: .95; }

@media (max-width: 980px){
  .hero-overlay{
    background: linear-gradient(180deg,
      rgba(11,18,32,.82) 0%,
      rgba(11,18,32,.55) 45%,
      rgba(11,18,32,.22) 70%,
      rgba(11,18,32,0) 100%
    );
  }
  .hero-card{ position: relative; right:auto; bottom:auto; margin: 14px; width: auto; }
}

/* ---------- Layout utilities ---------- */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.2vw, 22px);
}
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px, 2.2vw, 22px);
}
@media (max-width: 980px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
}

.split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(14px, 2.2vw, 22px);
  align-items:start;
}
@media (max-width: 980px){
  .split{ grid-template-columns: 1fr; }
}

/* ---------- Cards (editorial) ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card.soft{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
}

.feature{
  position: relative;
  overflow:hidden;
}
.feature::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 260px at 20% 15%, rgba(31,106,166,.16), transparent 60%),
              radial-gradient(600px 260px at 110% 30%, rgba(15,58,102,.14), transparent 60%);
  pointer-events:none;
}
.feature > *{ position: relative; z-index: 1; }

.service-card{
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(11,18,32,.08);
  padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 54px rgba(11,18,32,.12);
}
.service-card h4{
  margin: 0 0 10px 0;
  font-family: var(--serif);
  letter-spacing: -0.01em;
}
.service-card ul{ margin: 0; padding-left: 18px; color: rgba(11,18,32,.86); }
.service-card li{ margin: 8px 0; }

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(31,106,166,.10);
  border: 1px solid rgba(31,106,166,.20);
  color: rgba(11,18,32,.92);
  font-weight: 800;
  font-size: .86rem;
}

/* Emergency box */
.emergency-box{
  background: linear-gradient(135deg, rgba(15,58,102,.10), rgba(31,106,166,.08));
  border: 1px solid rgba(11,18,32,.10);
  border-radius: calc(var(--radius) + 4px);
  padding: 22px;
  box-shadow: var(--shadow);
}
.emergency-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
@media (max-width: 980px){
  .emergency-grid{ grid-template-columns: 1fr; }
}
.alarm-list{ margin: 10px 0 0; padding-left: 18px; }
.alarm-list li{ margin: 8px 0; }

/* Map */
.map-wrap{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: #fff;
  box-shadow: var(--shadow);
}
.map-wrap iframe{ width:100%; height: 360px; border:0; }

/* ---------- Form ---------- */
.form label{ display:block; font-weight: 800; margin: 10px 0 8px; }
.form input, .form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,18,32,.12);
  background: rgba(255,255,255,.94);
  font: inherit;
}
.form input:focus, .form textarea:focus{
  outline:none;
  border-color: rgba(31,106,166,.45);
  box-shadow: 0 0 0 4px rgba(31,106,166,.12);
}
.form-row{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.form .btn-ghost{ color: var(--brand); border-color: rgba(15,58,102,.30); background: rgba(15,58,102,.06); }
.form .btn-ghost:hover{ background: rgba(15,58,102,.10); }

/* Input icon */
.input-icon{ position: relative; }
.input-icon .icon{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.input-icon input{ padding-left: 44px; }

/* Validation */
.is-invalid{
  border-color: rgba(220,38,38,.55) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.10) !important;
}
.hint-error{ color: rgba(185,28,28,.92) !important; }

/* ---------- Footer ---------- */
.footer{
  background: #0b1220;
  color:#fff;
  padding: 34px 0 22px;
  margin-top: 10px;
}
.footer-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
}
.footer-left{ display:flex; align-items:center; gap: 12px; }
.footer-logo{ height: 40px; width:auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)); }
.footer-right a{ margin-left: 14px; text-decoration:none; opacity:.9; }
.footer-right a:hover{ opacity:1; }
.legal{ margin-top: 18px; }
.legal small{ opacity:.78; }

/* ---------- WhatsApp floating ---------- */
.wa-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(15,58,102,.94);
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .1px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.wa-float:hover{ transform: translateY(-2px); box-shadow: 0 22px 48px rgba(0,0,0,.26); }
.wa-ico{
  width: 18px; height: 18px;
  display:inline-block;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}
/* FIX móvil: que el lockup (nombre + cargo) NO desaparezca */
@media (max-width: 680px){

  .header-flex{
    gap: 10px;
  }

  /* El bloque izquierdo (logo + texto) debe poder crecer */
  .logo{
    flex: 1 1 auto;
    min-width: 0;              /* clave: permite ellipsis */
  }

  /* El texto NO se puede colapsar a cero */
  .brand-text{
    display: flex;
    flex-direction: column;
    min-width: 0;              /* clave: permite ellipsis */
  }

  /* Ajuste editorial compacto (sin verse “apretado”) */
  .brand-text strong{
    font-size: .95rem;
    line-height: 1.05;
    color: var(--ink);         /* asegura contraste */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 26ch;           /* evita que empuje el menú */
  }

  .brand-text small{
    font-size: .74rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(15,30,46,.62); /* contraste fijo en header claro */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30ch;
    margin-top: 2px;
  }

  /* El botón del menú no debe robar espacio al lockup */
  .nav-toggle, .menu-toggle, .hamburger{
    flex: 0 0 auto;
    flex-shrink: 0;
  }

  /* Logo un poco más compacto para que quepa el nombre */
  .logo img{
    height: 56px;
    width: auto;
    flex-shrink: 0;
  }
/* Botón hamburguesa premium: azul marino con jerarquía descendente */
.nav-toggle span{
  background: #0F2E46 !important; /* azul marino base */
  height: 2.5px;
  border-radius: 99px;
  transition: all .25s ease;
}

/* Primera línea: más dominante */
.nav-toggle span:nth-child(1){
  width: 22px;
  opacity: 1;
}
/* Segunda línea: ligeramente más corta */
.nav-toggle span:nth-child(2){
  width: 18px;
  opacity: 0.85;
}

/* Tercera línea: más corta y más sutil */
.nav-toggle span:nth-child(3){
  width: 14px;
  opacity: 0.65;
}
/* Icono hamburguesa profesional (3 líneas reales) */
.nav-toggle{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,30,46,.12);
  border-radius: 14px;
}

.nav-toggle span{
  display: block !important;
  width: 22px !important;
  height: 2.5px !important;
  background: #0F2E46 !important; /* azul marino elegante */
  border-radius: 99px;
  margin: 4px 0;
  opacity: 1 !important;
}
/* Icono hamburguesa profesional (3 líneas reales) */
.nav-toggle{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,30,46,.12);
  border-radius: 14px;
}

.nav-toggle span{
  display: block !important;
  width: 22px !important;
  height: 2.5px !important;
  background: #0F2E46 !important; /* azul marino elegante */
  border-radius: 99px;
  margin: 4px 0;
  opacity: 1 !important;
}
/* Fuerza icono hamburguesa (3 líneas) aunque el botón tenga "..." */
@media (max-width: 980px){

  /* Ajusta ESTE selector si tu botón tiene otra clase.
     Dejo varios comunes para cubrir tu caso. */
  .site-header .nav-toggle,
  .site-header .menu-toggle,
  .site-header .menu-btn,
  .site-header .hamburger,
  .site-header button[aria-label*="men"],
  .site-header button[aria-label*="Men"]{
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15,30,46,.12) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 24px rgba(15,30,46,.10) !important;

    /* Mata el "..." o cualquier icono previo */
    color: transparent !important;
    font-size: 0 !important;
  }

  .site-header .nav-toggle::before,
  .site-header .menu-toggle::before,
  .site-header .menu-btn::before,
  .site-header .hamburger::before,
  .site-header button[aria-label*="men"]::before,
  .site-header button[aria-label*="Men"]::before{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 26px !important;
    height: 18px !important;

    /* 3 líneas horizontales */
    background:
      linear-gradient(#0F2E46 0 0) 0 0 / 26px 2.6px no-repeat,
      linear-gradient(#0F2E46 0 0) 0 8px / 26px 2.6px no-repeat,
      linear-gradient(#0F2E46 0 0) 0 16px / 26px 2.6px no-repeat !important;

    border-radius: 99px !important;
  }