/* ============================================================
   SIMM · ATRYS — Mockup de estilos (versión español)
   ============================================================ */

:root{
  --azul-950:#071a2e;
  --azul-900:#0d2b4e;
  --azul-800:#123a67;
  --azul-700:#184b85;
  --azul-600:#1f5fa8;
  --azul-500:#2f7fd6;
  --cian-500:#12a3b8;
  --cian-400:#2ec2d6;
  --gris-900:#1c232c;
  --gris-700:#455163;
  --gris-500:#6b7686;
  --gris-300:#c7d0db;
  --gris-100:#eef2f6;
  --blanco:#ffffff;
  --borde:#dde4ec;
  --sombra: 0 10px 30px rgba(13,43,78,.12);
  --radio: 14px;
  --fuente: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --ancho-maximo: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--fuente);
  color:var(--gris-900);
  background:var(--blanco);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:700; color:var(--azul-950); line-height:1.2; }
p{ margin:0 0 1em; }

.contenedor{
  max-width:var(--ancho-maximo);
  margin:0 auto;
  padding:0 24px;
}

.seccion{ padding:88px 0; }
.seccion--alt{ background:var(--gris-100); }
.seccion--oscura{ background:var(--azul-950); color:var(--gris-300); }
.seccion--oscura h2, .seccion--oscura h3{ color:var(--blanco); }

.etiqueta{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cian-500);
  margin-bottom:12px;
}
.encabezado-seccion{ max-width:720px; margin:0 0 48px; }
.encabezado-seccion.centrado{ margin-left:auto; margin-right:auto; text-align:center; }
.encabezado-seccion h2{ font-size:clamp(28px,4vw,38px); }
.encabezado-seccion p{ color:var(--gris-700); font-size:17px; }

.boton{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.boton--primario{ background:var(--cian-500); color:var(--blanco); box-shadow:0 8px 20px rgba(18,163,184,.35); }
.boton--primario:hover{ background:var(--cian-400); transform:translateY(-2px); }
.boton--fantasma{ border-color:rgba(255,255,255,.4); color:var(--blanco); }
.boton--fantasma:hover{ border-color:var(--blanco); background:rgba(255,255,255,.08); }
.boton--oscuro{ background:var(--azul-950); color:var(--blanco); }
.boton--oscuro:hover{ background:var(--azul-800); transform:translateY(-2px); }
.boton--pequeno{ padding:10px 18px; font-size:13px; }

/* ---------- Cabecera / navegación ---------- */
.cabecera{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);
}
.barra-superior{
  background:var(--azul-950);
  color:var(--gris-300);
  font-size:13px;
}
.barra-superior .contenedor{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; gap:16px; flex-wrap:wrap;
}
.barra-superior a:hover{ color:var(--cian-400); }
.barra-superior__contacto{ display:flex; gap:20px; flex-wrap:wrap; }
.barra-superior__idiomas{ display:flex; gap:10px; }
.barra-superior__idiomas a{ opacity:.65; }
.barra-superior__idiomas a.activo{ opacity:1; font-weight:700; color:var(--cian-400); }

.nav-principal{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.marca{ display:flex; align-items:center; gap:10px; }
.marca img{ height:42px; width:auto; }
.menu{ display:flex; align-items:center; gap:6px; }
.menu > li{ position:relative; }
.menu > li > a{
  display:flex; align-items:center; gap:6px;
  padding:12px 14px; font-size:14px; font-weight:600;
  color:var(--azul-900); border-radius:8px;
  white-space:nowrap;
}
.menu > li > a:hover, .menu > li.activo > a{ color:var(--cian-500); }
.menu .flecha{ font-size:10px; opacity:.6; }

.submenu{
  position:absolute; top:100%; left:0;
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:12px;
  box-shadow:var(--sombra);
  min-width:260px;
  padding:10px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.menu > li:hover .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu li a{
  display:block; padding:9px 12px; border-radius:8px; font-size:14px; color:var(--gris-700);
}
.submenu li a:hover{ background:var(--gris-100); color:var(--azul-900); }
.submenu--ancho{ min-width:560px; column-count:2; column-gap:8px; }
.submenu--ancho li{ break-inside:avoid; }

.mega-titulo{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gris-500); padding:8px 12px 4px; }

.boton-menu-movil{ display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--azul-950); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  color:var(--blanco);
  min-height:640px;
  display:flex; align-items:center;
  background:linear-gradient(120deg, rgba(7,26,46,.92), rgba(18,58,103,.82)), var(--azul-950);
  overflow:hidden;
}
.hero__imagen{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55; mix-blend-mode:luminosity;
}
.hero__contenido{ position:relative; z-index:2; max-width:640px; }
.hero .etiqueta{ color:var(--cian-400); }
.hero h1{ color:var(--blanco); font-size:clamp(30px,4.4vw,46px); margin-bottom:18px; }
.hero p.intro{ font-size:18px; color:var(--gris-300); margin-bottom:28px; }
.hero__acciones{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.hero__valores{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px; padding:0; }
.hero__valores li{
  font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--gris-300);
  display:flex; align-items:center; gap:8px;
}
.hero__valores li::before{ content:"✓"; color:var(--cian-400); font-weight:900; }

/* ---------- Franja de centros ---------- */
.franja-centros{ background:var(--azul-900); color:var(--blanco); padding:22px 0; }
.franja-centros .contenedor{ display:flex; gap:36px; flex-wrap:wrap; justify-content:space-between; align-items:center; font-size:14px; }
.franja-centros strong{ color:var(--cian-400); }

/* ---------- Quiénes somos ---------- */
.quienes-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.quienes-grid img{ border-radius:var(--radio); box-shadow:var(--sombra); }
.tarjetas-valores{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.tarjeta-valor{
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  padding:28px; box-shadow:var(--sombra);
}
.tarjeta-valor .num{ font-size:13px; font-weight:800; color:var(--cian-500); letter-spacing:.08em; }
.tarjeta-valor h3{ font-size:19px; margin:8px 0 10px; }
.tarjeta-valor p{ color:var(--gris-700); font-size:14.5px; margin:0; }

/* ---------- Catálogo ---------- */
.rejilla-catalogo{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.tarjeta-especialidad{
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  padding:26px; display:flex; flex-direction:column; gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta-especialidad:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.tarjeta-especialidad__icono{
  width:56px; height:56px; border-radius:12px; background:var(--gris-100);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.tarjeta-especialidad__icono img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.tarjeta-especialidad h3{ font-size:18px; margin-bottom:2px; }
.tarjeta-especialidad p{ color:var(--gris-700); font-size:14px; flex-grow:1; margin-bottom:6px; }
.tarjeta-especialidad__enlace{ font-size:13px; font-weight:700; color:var(--cian-500); }

/* ---------- Insignias de estado: qué enlaces llevan a una ficha real ---------- */
.insignia{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; line-height:1;
}
.insignia::before{ content:""; width:6px; height:6px; border-radius:50%; flex:none; }
.insignia--disponible{ background:#e3f7fa; color:#0d7c8f; }
.insignia--disponible::before{ background:var(--cian-500); }
.insignia--pendiente{ background:var(--gris-100); color:var(--gris-500); border:1px dashed var(--gris-300); }
.insignia--pendiente::before{ background:var(--gris-300); }

.tarjeta-especialidad__pie, .tarjeta-noticia__pie{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.tarjeta-especialidad:has(.insignia--pendiente){ opacity:.7; }
.tarjeta-especialidad:has(.insignia--pendiente):hover{ transform:none; box-shadow:none; }
.tarjeta-noticia:has(.insignia--pendiente){ opacity:.7; }

.mega-titulo .insignia{ margin-left:8px; }
.submenu li a.enlace-listo{ font-weight:700; color:var(--azul-900); }
.submenu li a.enlace-listo::after{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--cian-500); margin-left:8px; vertical-align:middle; }

.aviso-clinico{
  background:#fff7e6; border:1px solid #f2d38a; color:#7a5a12;
  border-radius:var(--radio); padding:22px 26px; font-size:14px; margin-bottom:40px;
}
.aviso-clinico strong{ color:#5c4009; }

/* ---------- Clientes ---------- */
.lista-clientes{
  columns:4 180px; column-gap:24px; font-size:14.5px; color:var(--gris-700);
}
.lista-clientes li{ padding:7px 0; border-bottom:1px dashed var(--borde); break-inside:avoid; }

/* ---------- Noticias ---------- */
.rejilla-noticias{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; }
.tarjeta-noticia{
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sombra);
}
.tarjeta-noticia__imagen{ height:190px; overflow:hidden; }
.tarjeta-noticia__imagen img{ width:100%; height:100%; object-fit:cover; }
.tarjeta-noticia__cuerpo{ padding:22px 24px 26px; display:flex; flex-direction:column; flex-grow:1; }
.tarjeta-noticia__fecha{ font-size:12.5px; font-weight:700; color:var(--cian-500); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.tarjeta-noticia h3{ font-size:17px; margin-bottom:10px; }
.tarjeta-noticia p{ color:var(--gris-700); font-size:14px; flex-grow:1; }
.tarjeta-noticia__enlace{ font-size:13.5px; font-weight:700; color:var(--azul-700); }
.tarjeta-noticia__pie{ margin-top:10px; }

/* ---------- Contacto ---------- */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.tarjeta-centro{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); padding:26px; box-shadow:var(--sombra); margin-bottom:20px; }
.tarjeta-centro h3{ font-size:17px; margin-bottom:6px; }
.tarjeta-centro p{ font-size:14.5px; color:var(--gris-700); margin-bottom:4px; }
.mapa{ position:relative; margin-bottom:16px; border-radius:var(--radio); overflow:hidden; line-height:0; }
.mapa svg{ display:block; width:100%; height:220px; }
.mapa__aviso{
  position:absolute; left:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px; line-height:1.2;
  background:rgba(7,26,46,.82); color:var(--blanco);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:6px 12px; border-radius:999px;
}
.mapa__aviso::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cian-400); flex:none; }
.formulario{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); padding:30px; box-shadow:var(--sombra); }
.campo{ margin-bottom:18px; }
.campo label{ display:block; font-size:13px; font-weight:700; color:var(--gris-700); margin-bottom:6px; }
.campo input, .campo textarea{
  width:100%; padding:12px 14px; border:1px solid var(--borde); border-radius:9px;
  font-family:inherit; font-size:14.5px; background:var(--gris-100);
}
.campo input:focus, .campo textarea:focus{ outline:2px solid var(--cian-500); background:var(--blanco); }
.fila-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* ---------- Pie de página ---------- */
.pie{ background:var(--azul-950); color:var(--gris-300); padding-top:64px; }
.pie .contenedor{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.pie h4{ color:var(--blanco); font-size:14px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px; }
.pie img.logo-pie{ height:36px; margin-bottom:16px; }
.pie p{ font-size:14px; color:var(--gris-300); }
.pie ul li{ margin-bottom:10px; font-size:14px; }
.pie ul li a:hover{ color:var(--cian-400); }
.pie__certificaciones{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.pie__certificaciones img{ height:40px; width:auto; filter:grayscale(1) brightness(2); opacity:.85; }
.pie__inferior{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:12.5px; color:var(--gris-500); flex-wrap:wrap; gap:10px; }
.pie__inferior a:hover{ color:var(--cian-400); }

/* ---------- Páginas interiores (especialidad / noticia / legal) ---------- */
.cabecera-pagina{
  background:linear-gradient(120deg, var(--azul-950), var(--azul-800));
  color:var(--blanco); padding:56px 0 40px;
}
.migas{ font-size:13px; color:var(--gris-300); margin-bottom:14px; }
.migas a:hover{ color:var(--cian-400); }
.cabecera-pagina h1{ color:var(--blanco); font-size:clamp(26px,4vw,36px); }
.cabecera-pagina p{ color:var(--gris-300); max-width:640px; }

.aviso-legal-box{
  background:#eaf6fb; border:1px solid #b9e2ee; border-radius:var(--radio);
  padding:20px 24px; font-size:14px; color:var(--azul-900); margin-bottom:36px;
}

.procedimiento{ border-bottom:1px solid var(--borde); padding:36px 0; display:grid; grid-template-columns:220px 1fr; gap:32px; }
.procedimiento:first-of-type{ padding-top:0; }
.procedimiento:last-of-type{ border-bottom:none; }
.procedimiento__imagen{ border-radius:var(--radio); overflow:hidden; background:var(--gris-100); }
.procedimiento__imagen img{ width:100%; height:100%; object-fit:contain; }
.procedimiento h3{ font-size:20px; }
.procedimiento .codigo{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--cian-500); background:#e6f7fa; padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.procedimiento h4{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--azul-700); margin:16px 0 6px; }
.procedimiento ul{ list-style:disc; padding-left:20px; color:var(--gris-700); font-size:14.5px; }
.procedimiento ul li{ margin-bottom:6px; }
.indice-procedimientos{ background:var(--gris-100); border-radius:var(--radio); padding:24px 28px; margin-bottom:48px; }
.indice-procedimientos h4{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--gris-700); margin-bottom:12px; }
.indice-procedimientos ul{ columns:2 220px; column-gap:24px; }
.indice-procedimientos li{ font-size:13.5px; margin-bottom:8px; break-inside:avoid; }
.indice-procedimientos a{ color:var(--azul-700); }
.indice-procedimientos a:hover{ color:var(--cian-500); }

.articulo{ max-width:760px; margin:0 auto; }
.articulo__imagen{ border-radius:var(--radio); overflow:hidden; margin-bottom:32px; box-shadow:var(--sombra); }
.articulo__meta{ font-size:13px; font-weight:700; color:var(--cian-500); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.articulo p{ color:var(--gris-700); font-size:16px; }
.articulo p strong{ color:var(--gris-900); }

.legal{ max-width:820px; margin:0 auto; color:var(--gris-700); font-size:15px; }
.legal h2{ font-size:22px; margin-top:40px; }
.legal p{ margin-bottom:14px; }

.pagina-siguiente{ display:flex; justify-content:space-between; align-items:center; margin-top:56px; padding-top:32px; border-top:1px solid var(--borde); }

@media (max-width:960px){
  .quienes-grid{ grid-template-columns:1fr; }
  .quienes-grid img{ order:-1; }
  .tarjetas-valores{ grid-template-columns:1fr 1fr; }
  .contacto-grid{ grid-template-columns:1fr; }
  .pie .contenedor{ grid-template-columns:1fr 1fr; }
  .procedimiento{ grid-template-columns:1fr; }
  .procedimiento__imagen{ max-width:220px; }
}

@media (max-width:820px){
  .barra-superior__contacto span:nth-child(n+3){ display:none; }
  .menu{ display:none; }
  .boton-menu-movil{ display:block; }
  .tarjetas-valores{ grid-template-columns:1fr; }
  .lista-clientes{ columns:2 140px; }
  .pie .contenedor{ grid-template-columns:1fr; }
  .fila-2{ grid-template-columns:1fr; }
  .indice-procedimientos ul{ columns:1; }
}

/* Menú móvil abierto (JS añade esta clase) */
.nav-principal.menu-abierto .menu{
  display:flex; position:absolute; top:100%; left:0; right:0;
  background:var(--blanco); flex-direction:column; align-items:stretch;
  border-top:1px solid var(--borde); box-shadow:var(--sombra); padding:10px;
}
.nav-principal.menu-abierto .menu > li > a{ padding:14px; }
.nav-principal.menu-abierto .submenu{
  position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
  border:none; display:none; margin-left:14px; column-count:1;
}
.nav-principal.menu-abierto li.submenu-abierto .submenu{ display:block; }