/* ============================================
   Bernes Medical — hoja de estilos compartida
   Paleta extraída de los logos originales:
   Azul  #007DC6 · Verde #92C83E · Menta #74C7A5
   Naranja #F57B20 · Gris #7C8188
   ============================================ */

:root{
  --azul: #007DC6;
  --azul-oscuro: #045a91;
  --verde: #92C83E;
  --menta: #74C7A5;
  --naranja: #F57B20;
  --gris: #7C8188;
  --gris-claro: #f4f6f7;
  --linea: #e3e7e9;
  --texto: #263238;
  --blanco: #ffffff;

  --fuente-titulo: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --fuente-cuerpo: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--fuente-cuerpo);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: #17242b;
}

p{ margin: 0 0 1em; }
a{ color: var(--azul); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width:100%; display:block; }

.contenedor{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -------- Barra superior de utilidad -------- */
.barra-superior{
  background: var(--azul-oscuro);
  color: #ffffff;
  font-size: 1.4rem;
}
.barra-superior .contenedor{
  display:flex;
  justify-content: flex-end;
  align-items:center;
  gap: 34px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.barra-superior a{ color: #ffffff; font-weight:700; white-space:nowrap; }
.barra-superior span{ display:inline-flex; align-items:center; gap:10px; font-weight:700; white-space:nowrap; }
.barra-superior svg{ width: 0.85em; height: 0.85em; fill: #ffffff; flex: none; }

/* -------- Encabezado / navegación -------- */
header.principal{
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top:0;
  z-index: 50;
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 0;
  gap: 20px;
}
.logo-link{ flex-shrink: 0; }
.logo-link img{ max-width: 138px; width: auto; max-height: 164px; height: auto; flex-shrink: 0; }

nav.principal-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 30px;
  margin:0;
  padding:0;
}
nav.principal-nav a{
  color: var(--texto);
  font-weight: 500;
  font-size: 1.5rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
nav.principal-nav a:hover,
nav.principal-nav a.activo{
  color: var(--azul);
  text-decoration: none;
  border-bottom-color: var(--azul);
}

.btn-cita{
  background: var(--verde);
  border: 2px solid transparent;
  color: #fff !important;
  padding: 9px 28px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.2rem;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 204px;
  line-height: 1.2;
}
nav.principal-nav a.btn-cita{
  padding: 9px 28px;
  font-size: 1.2rem;
  border-bottom: 2px solid transparent;
}
.btn-cita:hover{
  background: #7fb02e;
  text-decoration: none;
  transform: translateY(-1px);
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size: 1.6rem;
  cursor:pointer;
  color: var(--azul-oscuro);
}

/* -------- Hero -------- */
.hero{
  background: linear-gradient(120deg, #eaf5fb 0%, #f7fbf3 100%);
  padding: 64px 0 56px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items:center;
}
.hero .eyebrow{
  color: var(--verde);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 10px;
  display:block;
}
.hero h1{
  font-size: 1.25rem;
  color: var(--azul-oscuro);
}
.hero p.lead{
  font-size: 1.08rem;
  color: #45535a;
  max-width: 46ch;
}
.hero-botones{ display:flex; align-items:center; gap:14px; margin-top: 22px; flex-wrap:wrap; }
.btn-secundario{
  border: 2px solid var(--azul);
  color: var(--azul) !important;
  padding: 9px 28px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 204px;
  text-align: center;
  white-space: nowrap;
}
.btn-secundario:hover{ background: var(--azul); color:#fff !important; text-decoration:none; }

.hero-tarjeta{
  background:#fff;
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 18px 40px -18px rgba(0,60,100,.25);
  border-top: 6px solid var(--azul);
}
.hero-tarjeta h3{ font-size:1.05rem; color: var(--azul-oscuro); margin-bottom: .6em; }
.hero-tarjeta ul{ padding-left: 1.1em; margin: 0; color: #445; }
.hero-tarjeta li{ margin-bottom: 10px; font-size: 1.12rem; }
.hero-tarjeta li:last-child{ margin-bottom: 0; }
.hero-tarjeta li strong{ font-size: 1.2rem; color: var(--azul-oscuro); }

/* -------- Secciones genéricas -------- */
section{ padding: 64px 0; }
#cita{ padding: 44px 0; }
.section-titulo{ text-align:center; max-width: 640px; margin: 0 auto 42px; }
.section-titulo .eyebrow{
  color: var(--azul);
  font-weight:700;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.06em;
}
.section-titulo h2{ font-size: clamp(1.6rem,2.6vw,2.1rem); }
.section-titulo p{ color: var(--gris); }

.fondo-claro{ background: var(--gris-claro); }

/* -------- Tarjetas de especialidad (home) -------- */
.grid-especialidades{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 28px;
}
.tarjeta-especialidad{
  background:#fff;
  border-radius: 16px;
  padding: 38px;
  border: 1px solid var(--linea);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta-especialidad:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 34px -22px rgba(20,40,60,.28);
}
.icono-esp{
  max-width: 100%;
  border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:2.1rem;
  margin-bottom: 2px;
  color:#fff;
  padding:6px;
  background:#fff;
}
.icono-esp img{ width:auto; max-width:116px; height:auto; display:block; }
.icono-esp.icono-orl{
  margin-bottom: 10px;
  border-radius: 0;
  padding: 0;
}
.icono-esp.icono-neuro{ gap: 12px; flex-wrap: wrap; }
.icono-esp.icono-neuro img{ max-width:none; width:auto; height:50px; }
.tarjeta-especialidad h3{ font-size:1.45rem; }
.tarjeta-especialidad .nombre-medico-esp{
  font-size: 1.55rem;
  color: var(--azul-oscuro);
  margin-bottom: .15em;
}
.tarjeta-especialidad .especialidad-esp{
  display:block;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .9em;
}
.tarjeta-especialidad.orl .especialidad-esp{ color: #4ea583; }
.tarjeta-especialidad.neuro .especialidad-esp{ color: var(--naranja); }
.tarjeta-especialidad p{ font-size:1.05rem; }
.tarjeta-especialidad a.enlace-esp{
  font-weight:600;
  display:inline-block;
  margin-top:10px;
}
.tarjeta-especialidad.orl a.enlace-esp{ color: #4ea583; }
.tarjeta-especialidad.neuro a.enlace-esp{ color: var(--naranja); }

/* -------- Perfiles médicos -------- */
.grid-medicos{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 32px;
}
.tarjeta-medico{
  background:#fff;
  border: 1px solid var(--linea);
  border-radius: 18px;
  overflow:hidden;
}
.tarjeta-medico .franja{ height:8px; }
.tarjeta-medico.orl .franja{ background: var(--menta); }
.tarjeta-medico.neuro .franja{ background: var(--naranja); }
.tarjeta-medico .contenido{ padding: 30px; }
.tarjeta-medico h3{ font-size:1.3rem; margin-bottom:2px; }
.tarjeta-medico .especialidad-linea{
  color: var(--gris);
  font-weight:600;
  font-size:.92rem;
  margin-bottom: 16px;
  display:block;
}
.tarjeta-medico .bio-espacio{
  background: var(--gris-claro);
  border: 1px dashed #c8d0d3;
  border-radius: 10px;
  padding: 16px 18px;
  color:#5b6870;
  font-size:.93rem;
  font-style: italic;
}
.bio-credenciales{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.credencial{
  padding-left: 14px;
  border-left: 3px solid var(--menta);
}
.tarjeta-medico.neuro .credencial{ border-left-color: var(--naranja); }
.credencial h4{
  font-size:.95rem;
  color: var(--azul-oscuro);
  margin-bottom: 3px;
}
.credencial p{
  font-size:.88rem;
  color:#5b6870;
  margin: 0;
}
.credencial p + p{ margin-top: 2px; }
.credencial ul{
  margin: 6px 0 0;
  padding-left: 1.1em;
  color:#5b6870;
  font-size:.88rem;
}
.credencial ul li{ margin-bottom: 2px; }
.credencial ul li:last-child{ margin-bottom: 0; }

/* -------- Franja de contacto rápido -------- */
.franja-contacto{
  background: var(--azul-oscuro);
  color:#eaf6ff;
  padding: 40px 0;
}
.franja-contacto .contenedor{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  justify-content: space-between;
  align-items:center;
}
.franja-contacto .item{ display:flex; gap:12px; align-items:flex-start; }
.franja-contacto .item svg{ width:1.3em; height:1.3em; fill:#fff; flex:none; margin-top:2px; }
.franja-contacto .item .rotulo{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#9fd3ef; }
.franja-contacto .item a, .franja-contacto .item span.valor{ color:#fff; font-weight:600; }

/* -------- Bloque de cita (placeholder Cal.com) -------- */
.bloque-cita{
  background: linear-gradient(120deg, #f2fbf7, #eaf5fb);
  border-radius: 20px;
  padding: 26px 48px;
  text-align:center;
  border: 1px solid #dbeee6;
}
.bloque-cita h2{ color: var(--azul-oscuro); }
.marcador-calcom{
  margin: 28px auto 0;
  max-width: 640px;
  background:#fff;
  border: 2px dashed #b9d6cf;
  border-radius: 14px;
  padding: 40px 24px;
  color: var(--gris);
  font-size: .95rem;
}
.marcador-calcom strong{ color: var(--azul-oscuro); }

/* -------- Mapa / ubicación -------- */
.grid-ubicacion{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items:start;
}
.mapa-caja{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--linea);
  box-shadow: 0 12px 30px -20px rgba(0,0,0,.3);
}
.mapa-caja iframe{ width:100%; height: 420px; border:0; display:block; }

.lista-datos{ list-style:none; padding:0; margin:0; }
.lista-datos li{
  display:flex;
  gap:14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}
.lista-datos .marca{
  width: 38px; height:38px;
  flex:none;
  display:flex; align-items:center; justify-content:center;
}
.lista-datos .marca svg{ width: 26px; height:26px; fill: var(--azul); }
.lista-datos h4{ margin:0 0 2px; font-size:1rem; }
.lista-datos p{ margin:0; color:#516069; }

/* -------- Fotos ilustrativas -------- */
.foto-seccion{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(0,40,70,.3);
}
.foto-seccion img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto-hero{ width: 398px; }
.foto-banda{
  border-radius: 16px;
  overflow:hidden;
  margin-bottom: 40px;
  max-height: 320px;
}
.foto-banda img{ width:100%; height:320px; object-fit:cover; display:block; }
.logo-banda{
  border-radius: 16px;
  margin-bottom: 40px;
  padding: 20px;
  background:#f4f8f9;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-banda img{ width:auto; max-width:196px; height:auto; max-height:82px; display:block; margin:auto; }
.logo-banda.logo-doble{ gap: 32px; flex-wrap: wrap; }
.logo-banda.logo-doble img{ max-width:220px; height:72px; width:auto; }

/* -------- Footer -------- */
footer{
  background: #10262f;
  color: #b7c7cd;
  padding: 44px 0 26px;
  font-size:.92rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 26px;
}
footer h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
footer ul{ list-style:none; padding:0; margin:0; }
footer li{ margin-bottom:8px; }
footer a{ color:#b7c7cd; }
footer a:hover{ color:#fff; }
.icono-contacto{ width:15px; height:15px; vertical-align:-2px; margin-right:7px; fill:currentColor; flex-shrink:0; }
footer li{ display:flex; align-items:flex-start; }
.footer-logos{ display:flex; gap:16px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.footer-logos img{ height:30px; filter: brightness(0) invert(1); opacity:.85; }
.footer-linea{
  border-top: 1px solid #223842;
  padding-top: 18px;
  text-align:center;
  font-size:.82rem;
  color: #7f9098;
}

/* -------- Encabezado de página interna -------- */
.cabecera-pagina{
  padding: 46px 0 40px;
  color:#fff;
}
.cabecera-pagina .contenedor{ max-width: 760px; }
.cabecera-pagina .eyebrow{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  font-size:.8rem;
  opacity:.9;
}
.cabecera-pagina h1{ color:#fff; margin-top:6px; }
.cabecera-pagina p{ opacity:.95; max-width: 60ch; }
.cabecera-orl{ background: linear-gradient(120deg,#4fae8a,#74C7A5); }
.cabecera-neuro{ background: linear-gradient(120deg,#e05f0c,#F57B20); }
.cabecera-ubic{ background: linear-gradient(120deg,#045a91,#007DC6); }

/* -------- Listas de síntomas / servicios -------- */
.grid-servicios{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.chip-servicio{
  background:#fff;
  border:1px solid var(--linea);
  border-radius: 12px;
  padding: 20px 18px;
}
.chip-servicio h4{ font-size:1rem; margin-bottom:6px; }
.chip-servicio p{ font-size:.9rem; color:#5b6870; margin:0; }

/* -------- Responsive -------- */
@media (max-width: 880px){
  .hero-grid, .grid-ubicacion{ grid-template-columns: 1fr; }
  .grid-especialidades, .grid-medicos{ grid-template-columns: 1fr; }
  .grid-servicios{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .barra-superior{ font-size: 1.6rem; }
  .barra-superior .contenedor{ flex-wrap: wrap; overflow-x: visible; justify-content:center; row-gap:6px; }
  .logo-link img{ height: 60px; }
  nav.principal-nav a.btn-cita{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height: 1.2;
  }
}

@media (max-width: 680px){
  nav.principal-nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:#fff;
    border-bottom: 1px solid var(--linea);
    display:none;
    padding: 10px 24px 18px;
  }
  nav.principal-nav.abierto{ display:block; }
  nav.principal-nav ul{ flex-direction:column; gap:4px; }
  .menu-toggle{ display:block; }
  .grid-servicios{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 22px; }
  .franja-contacto .contenedor{ flex-direction:column; align-items:flex-start; }
  .barra-superior{ font-size: 1.15rem; }
  .barra-superior .contenedor{ flex-wrap: wrap; overflow-x: visible; justify-content:center; gap:6px 18px; }
  .logo-link img{ height: 46px; }
  nav.principal-nav a.btn-cita{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height: 1.2;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}