/*
  style.css
  Paleta aproximada (salud / institucional: azul profundo + celeste + blanco).
  NO tengo acceso visual al sitio actual (sandbox sin navegador ni descarga
  de imágenes), así que estos hex son un punto de partida razonable, no una
  extracción real de la marca. Reemplazar por los HEX oficiales de Lafken
  (pedirlos a quien tenga el manual de marca o inspeccionar el WP viejo
  antes de darlo de baja).

  Tipografía: SÍ extraída del sitio real (getComputedStyle vía Claude in
  Chrome), no aproximada. Raleway = base/títulos/nav. Montserrat = párrafos
  y línea grande del slider. Open Sans = línea chica del slider.
*/

:root{
  /* Paleta extraída del sitio real vía getComputedStyle (Claude in Chrome),
     no aproximada. No existe ningún celeste/verde "accent" en el sitio real:
     toda la marca es una familia de azules. Lo que yo llamaba --color-accent
     (antes un teal inventado #00a99d) ahora es el azul medio real que usa la
     franja de encuesta y el bloque del medio de "unidades de negocio". */
  --color-primary: #004f8d;      /* real: topbar, nav links, bloque 1 de unidades, stats bg */
  --color-primary-dark: #023151; /* real: overlay oscuro del slider, closing-quote */
  --color-accent: #0093d3;       /* real: franja "TU OPINIÓN...", bloque 2 de unidades */
  --color-blue-3: #1e7fc1;       /* real: bloque 3 de "unidades de negocio" */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9f9;  /* real: fondo franja "Últimas noticias" / encuesta */
  --color-text: #2b2b2b;
  --color-text-light: #6b7680;
  --radius: 6px;
  --maxw: 1180px;
  --font: 'Raleway', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif-body: 'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-bg);
}
p{ font-family: var(--font-serif-body); }
a{ color: var(--color-primary); text-decoration: none; }
a:hover{ color: var(--color-accent); }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.container--narrow{ max-width: 820px; }

/* Topbar */
.topbar{ background: var(--color-primary); color:#fff; font-size: 13px; }
.topbar__inner{
  max-width: var(--maxw); margin:0 auto; padding: 6px 20px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px;
}
.topbar a{ color:#fff; }
.topbar a:hover{ color: var(--color-accent); }
.topbar .sep{ margin: 0 6px; opacity:.5; }
.topbar__portals a{ margin-left: 14px; font-weight:600; }
.topbar__lang{ margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); }
.topbar__lang a{ margin-left: 8px; opacity:.7; font-weight:600; }
.topbar__lang a:first-child{ margin-left:0; }
.topbar__lang a.is-active{ opacity:1; color:#fff; text-decoration: underline; }

/* Header / nav */
.mainheader{ background:#fff; border-bottom: 1px solid #e6e9ec; position: relative; z-index: 20; }
.mainheader__inner{
  max-width: var(--maxw); margin:0 auto; padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:block; }
/* El archivo anterior (127x96) se pixelaba al agrandarlo. Ahora usa el
   original de mayor resolución (663x464, misma pieza gráfica), así que se
   puede mostrar al tamaño real medido en producción (166px) sin pixelar —
   a 110px el texto "La salud nos mueve" quedaba demasiado chico para
   leerse, por eso vuelve a la medida real. */
.logo img{ height: 166px; width:auto; }

/* OJO: ">" (hijo directo), no descendiente. Sin el ">" esta regla también
   agarraba el <ul class="submenu"> anidado y lo ponía en fila horizontal
   —esa era la causa real de los menús "abiertos y solapados". */
.mainnav > ul{ display:flex; gap: 26px; }
.mainnav > ul > li{ position: relative; }
.mainnav > ul > li > a{
  display:block; padding: 10px 0; font-weight:600; font-size: 14px;
  letter-spacing:.02em; color: var(--color-primary);
}
.mainnav > ul > li > a:hover{ color: var(--color-accent); }

.submenu-toggle{ display:none; }

/* El submenu SOLO se abre/cierra vía JS (clase .is-open en el <li>), tanto en
   desktop (mouseenter/mouseleave) como en mobile (click en el botón ▾). Cero
   dependencia de :hover o :focus-within en CSS — eso es lo que causaba que
   quedaran pegados abiertos o que se disparen dos al mismo tiempo. */
.submenu{
  display:none; position:absolute; top:100%; left:0; background:#fff;
  min-width: 300px; box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: var(--radius);
  padding: 8px 0; z-index: 30;
}
.has-children.is-open > .submenu{ display:block; }
.submenu li{ position:relative; }
.submenu li a,
.submenu li .submenu__trigger{
  display:block; padding: 8px 18px; font-size: 13px; white-space: nowrap; color: var(--color-text);
}
.submenu li a:hover{ color: var(--color-accent); background: var(--color-bg-alt); }
.submenu li.has-children > .submenu__trigger{ cursor:default; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; }
.submenu li.has-children > .submenu__trigger::after{ content:'›'; opacity:.6; }
/* Submenu DE SEGUNDO NIVEL (ej. Divisiones dentro de Nosotros): se abre hacia
   el costado, no hacia abajo, para no taparse con sus propios hermanos. */
.submenu .submenu{ top:-8px; left:100%; margin-left:2px; }

.navtoggle{ display:none; background:none; border:0; cursor:pointer; }
.navtoggle span{ display:block; width:24px; height:2px; background: var(--color-primary); margin:5px 0; }

/* Hero slider (vanilla, sin plugin) */
.hero-slider{ position: relative; height: 460px; overflow:hidden; background: var(--color-primary); }
.hero-slider__track{ position:relative; width:100%; height:100%; }
.hero-slide{
  position:absolute; inset:0; background-size: cover; background-position:center;
  opacity:0; transition: opacity .8s ease; display:flex; align-items:center; justify-content:center;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide::before{
  content:''; position:absolute; inset:0;
  background: rgba(11,61,98,.45);
}
.hero-slide__caption{ position:relative; z-index:1; color:#fff; padding: 0 20px; max-width: 900px; text-align:center; }
/* La 1ra línea ("Gestión integral") es la grande/protagonista; la 2da
   ("La salud nos mueve" etc.) es la más chica — al revés de lo que tenía. */
.hero-slide__eyebrow{ text-transform:none; letter-spacing:normal; font-family:'Montserrat', var(--font); font-size:80px; font-weight:700; opacity:1; margin:0 0 8px; line-height:1.15; }
.hero-slide__caption h1{ font-family:'Open Sans', var(--font); font-size: 40px; font-weight:300; margin:0; opacity:.9; }
.hero-slider__dots{ position:absolute; bottom: 18px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.hero-slider__dots button{
  width:10px; height:10px; border-radius:50%; border:2px solid #fff; background:transparent; opacity:.6; cursor:pointer;
}
.hero-slider__dots button.is-active{ opacity:1; background:#fff; }

/* Secciones genéricas */
.section{ padding: 60px 0; }
.section--page-header{
  position:relative; overflow:hidden; padding: 90px 0;
  background-size:cover; background-position:center;
  min-height: 320px; display:flex; align-items:center;
}
.page-header__overlay{ position:absolute; inset:0; background: rgba(11,61,98,.72); }
.section--page-header .container{ position:relative; z-index:1; }
.section--page-header h1{ color:#fff; font-size: 40px; margin:0 0 10px; text-transform:uppercase; }
.page-header__subtitle{ color: rgba(255,255,255,.9); font-size: 16px; margin:0; }

/* Variante "plain" del page-header: páginas de template simple en
   producción (ej. Política de Protección de Datos) NO usan la banda azul
   con foto — es una franja gris clara con texto oscuro alineado a la
   izquierda (confirmado con getComputedStyle real: fondo #f8f9f9, texto
   #333, 35px/700/uppercase). Reusar .section--page-header a secas para
   estas páginas está mal: ese h1 es blanco a propósito para ir sobre la
   foto con overlay oscuro, y sin foto queda blanco-sobre-blanco = invisible. */
.section--page-header--plain{
  background: var(--color-bg-alt); padding: 40px 0;
  min-height: 0; display:block; overflow:visible;
}
.section--page-header--plain h1{
  color:#333; font-size: 35px; font-weight:700; text-transform:uppercase; margin:0;
}

/* Botones de compartir (AddToAny en producción, acá réplica liviana sin
   la dependencia del plugin): Facebook/Mastodon/Email con sus colores de
   marca reales (sampleados con getComputedStyle contra producción) + un
   botón "+" que dispara el share nativo del sistema operativo
   (navigator.share) en vez de simular el dropdown del plugin. */
.share-buttons{ display:flex; gap:8px; margin-top: 30px; }
.share-buttons a, .share-buttons button{
  width:40px; height:37px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  color:#fff; border:0; cursor:pointer;
}
.share-buttons svg{ width:18px; height:18px; }
.share-buttons__facebook{ background:#0866ff; }
.share-buttons__mastodon{ background:#6364ff; }
.share-buttons__email{ background:#888990; }
.share-buttons__more{ background:#0166ff; }

/* Nosotros: texto + foto en 2 columnas */
/* La foto es más protagonista que el texto en el sitio real (columna más
   ancha para la imagen, no para el texto). */
.nosotros-intro{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items:start; margin-bottom: 40px; }
.nosotros-intro__image{ border-radius: var(--radius); position:sticky; top: 20px; width:100%; }
.highlight-block-wrap{ margin: 0 auto; }
.section--intro{ text-align:center; padding: 40px 0 20px; }
.intro__wordmark{ display:block; margin: 0 auto 18px; max-width: 420px; width:100%; height:auto; }
.section__lead{ font-size: 20px; font-weight:600; color: var(--color-primary); }
.section__eyebrow{ text-transform:uppercase; letter-spacing:.06em; color: var(--color-accent); font-weight:700; font-size: 13px; }
.section__title{ text-align:center; font-size: 28px; color: var(--color-primary); margin-bottom: 36px; }
.section__title--light{ color:#fff; }
.section--units-heading{ padding: 10px 0 20px; }
.section__title--split{
  text-transform:uppercase; letter-spacing:.12em; font-weight:600; font-size: 18px; color:#1c2b3a;
  margin-bottom: 40px;
}
.section__title--split span{ color: var(--color-accent); font-weight:800; }
/* Excepción: el título de "unidades de negocio" va pegado al bloque de colores de abajo */
.section--units-heading .section__title--split{ margin-bottom: 0; }
.section__image{ border-radius: var(--radius); margin: 24px 0; }
.section__closing{ font-style: italic; color: var(--color-text-light); border-top:1px solid #e6e9ec; padding-top: 24px; margin-top: 24px; }

.grid{ display:grid; gap: 24px; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }

/* Unidades de negocio: bloques de color a todo el ancho, sin gaps ni bordes */
.units-full{ display:flex; width:100%; }
.units-full__item{
  flex: 1; min-height: 300px; padding: 45px 40px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:flex-end; gap: 22px;
  color:#fff; text-decoration:none; transition: filter .2s ease;
}
.units-full__item:hover{ filter: brightness(1.08); }
.units-full__item--dark{ background: var(--color-primary); }
.units-full__item--mid{ background: var(--color-accent); }
.units-full__item--light{ background: var(--color-blue-3); }
.units-full__icon{ width: 96px; height:96px; object-fit:contain; }
.units-full__item h3{ font-size: 20px; font-weight:700; line-height:1.3; max-width: 300px; margin:0; }

/* Stats: la imagen va de borde a borde (alto completo de la sección), no en
   una caja chica flotando. Ancho fijo en % (NO derivado de aspect-ratio x
   altura, eso fue lo que se comió el primer número la vez pasada). */
.section--stats{ background: var(--color-primary); overflow:hidden; position:relative; height: 460px; }
.stats__bg{
  /* Altura FIJA (no % del contenido) + ancho calculado con la proporción
     real del archivo (752:483). Al hacer que la caja tenga EXACTAMENTE la
     misma proporción que la imagen, "contain" la llena por completo: sin
     recortar la curva (como pasaba con "cover") y sin dejar aire arriba/
     abajo (como pasaba cuando la caja no coincidía en proporción). */
  position:absolute; left:0; top:0; height:100%; aspect-ratio: 752 / 483;
  background-size:contain; background-position:left center; background-repeat:no-repeat;
}
.stats__content{
  /* Fuera del .container a propósito: si vive adentro, su ancho queda
     acotado a los 1180px del container menos el margen de la imagen, y en
     pantallas anchas los 3 números quedan apretados en una franja angosta
     en vez de repartirse por todo lo que sobra de pantalla. Acá usa el
     100% real de la sección, con su propio padding. */
  position:relative; z-index:1; height:100%; width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  padding-left: calc(460px * 752 / 483 + 60px); /* ancho real de la imagen a esta altura + separación */
  padding-right: 40px;
}
.section__title--stats{
  text-align:left; position:relative; padding-bottom: 18px; margin-bottom: 30px;
}
.section__title--stats::after{
  content:''; position:absolute; left:0; bottom:0; width:50px; height:3px; background: var(--color-accent);
}
.stats{ text-align:left; max-width: 900px; }
.stats.grid--3{ grid-template-columns: repeat(3, minmax(0, 220px)); justify-content:space-between; column-gap: 40px; }
.stat__number{ font-size: 44px; font-weight:800; color:#fff; }
.stats p{ color: rgba(255,255,255,.85); margin: 4px 0 0; }
.stats__note{ text-align:left; color: rgba(255,255,255,.55); font-size: 12px; margin-top: 30px; }

/* Servicios: sin caja/fondo, iconos grandes directo sobre blanco, como el sitio real.
   Flexbox (no grid) a propósito: con grid de 4 columnas, la fila incompleta de
   3 ítems queda pegada a la izquierda. Con flex-wrap + justify-content:center,
   cualquier fila incompleta se centra sola. */
.services-grid{
  display:flex !important; flex-wrap:wrap; justify-content:center;
  row-gap: 48px; column-gap: 32px;
}
.service-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: 14px; color: var(--color-accent); font-weight:600; font-size: 15px;
  flex: 0 1 240px;
}
.service-card span{ color:#1c2b3a; max-width: 220px; }
.service-card:hover span{ color: var(--color-accent); }
.service-card__icon{ height: 90px; width:auto; object-fit:contain; }

/* Noticias */
.news-card{ border:1px solid #e6e9ec; border-radius: var(--radius); overflow:hidden; }
.news-card img{ height: 170px; width:100%; object-fit:cover; background: var(--color-bg-alt); }
.news-card__body{ padding: 18px; }
.news-card__date{ color: var(--color-text-light); font-size: 12px; }

/* Noticias: artículo completo en noticias.php (nuevo, no existía en el
   sitio replicado hasta ahora). Reusa la tipografía de division-heading /
   division-columns__text p para quedar consistente con el resto del sitio,
   en vez de inventar una escala nueva. */
.noticia-full{ max-width: 820px; margin: 0 auto 70px; }
.noticia-full:last-child{ margin-bottom: 0; }
.noticia-full__title{ font-size: 24px; font-weight:700; color: var(--color-primary); line-height:1.4; margin: 0 0 6px; }
.noticia-full__date{ color: var(--color-text-light); font-size: 13px; margin: 0 0 24px; }
.noticia-full__image{ width:100%; height:auto; border-radius: var(--radius); margin-bottom: 26px; display:block; }
.noticia-full p{ margin: 0 0 16px; }
.noticia-full__list{ list-style:none; padding:0; margin: 0 0 16px; }
.noticia-full__list li{ margin: 0 0 12px; padding-left: 18px; position:relative; }
.noticia-full__list li::before{ content:'—'; position:absolute; left:0; color: var(--color-accent); }
.noticia-full__list strong{ color: var(--color-primary); }
.noticia-full__divider{ border:0; border-top:1px solid #e6e9ec; margin: 0 0 70px; }

/* Encuesta: franja de color, texto a la izquierda + botón a la derecha */
.section--survey{ background: var(--color-accent); padding: 45px 0; }
.survey__layout{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.survey__text h2{
  color:#fff; font-size: 24px; margin: 0 0 12px; position:relative; padding-bottom: 14px; max-width: 640px;
}
.survey__text h2::after{ content:''; position:absolute; left:0; bottom:0; width:50px; height:3px; background:#fff; }
.survey__text p{ color: rgba(255,255,255,.9); margin:0; }

.btn{
  display:inline-block; padding: 12px 28px; background: var(--color-accent);
  color:#fff; border-radius: 999px; font-weight:700; white-space:nowrap; border: 2px solid transparent;
}
.btn:hover{ background: var(--color-primary); color:#fff; }
.btn--outline{ background:transparent; border-color:#fff; color:#fff; }
.btn--outline:hover{ background:#fff; color: var(--color-accent); }

/* Nosotros: divisiones — compacto, como el sitio real (ahí es texto corrido
   con "•" a mano y casi sin aire entre líneas, no bloques con títulos
   grandes y mucho margen). */
.nosotros-intro__text p{ margin: 0 0 12px; }
.nosotros-intro__text .section__lead{
  position:relative; padding-bottom: 16px; margin-bottom: 20px;
}
.nosotros-intro__text .section__lead::after{
  content:''; position:absolute; left:0; bottom:0; width:50px; height:3px; background: var(--color-accent);
}
.division{ margin-bottom: 4px; }
.division h3{
  color: var(--color-primary); font-size: 16px; font-weight:700;
  margin: 14px 0 2px;
}
.division:first-child h3{ margin-top: 0; }
.division ul{ list-style:none; padding:0; margin:0; }
.division ul li{ line-height: 1.5; margin: 0; }
.division ul li::before{ content:'· '; }
.highlight-block{ background: var(--color-bg-alt); padding: 20px 24px; border-radius: var(--radius); margin: 18px 0; }

/* Banda "Normas técnicas / Data Management": foto real (edificio de vidrio)
   con overlay azul, 2 columnas con separador vertical encima. */
.section--normas{
  position:relative; overflow:hidden; background: var(--color-primary);
  background-size:cover; background-position:center; padding: 70px 0;
}
.section--normas__overlay{ position:absolute; inset:0; background: rgba(11,61,98,.72); }
.section--normas .container{ position:relative; z-index:1; }
.normas-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.normas-grid__item{ border-left: 3px solid rgba(255,255,255,.55); padding-left: 22px; }
.normas-grid__item h3{ color:#fff; font-size: 18px; margin: 0 0 10px; }
.normas-grid__item p{ color: rgba(255,255,255,.9); margin:0; font-size: 14px; line-height:1.7; }

/* Página Servicios: bloques alternados foto/texto, uno por división real
   (contenido tomado de grupolafken.com/servicios/, no inventado). */
.service-block{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
  padding: 56px 0; scroll-margin-top: 90px; /* que el anchor no quede tapado por el header fijo si algún día lo es */
}
.service-block + .service-block{ border-top: 1px solid var(--color-bg-alt); }
.service-block:nth-child(even) .service-block__media{ order: 2; }
.service-block__media img{ width:100%; border-radius: var(--radius); display:block; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.service-block__logo{ height: 36px; width:auto; margin-bottom: 16px; }
.service-block__body h2{ color: var(--color-primary); font-size: 24px; margin: 0 0 14px; line-height:1.3; }
.service-block__body p{ margin: 0 0 12px; color: var(--color-text); }
.service-block__body ul{ margin: 12px 0 0; }
.service-block__body ul li{ position:relative; padding-left: 18px; margin-bottom: 8px; line-height:1.5; }
.service-block__body ul li::before{ content:'·'; position:absolute; left:0; top:0; color: var(--color-accent); font-weight:700; font-size:18px; line-height:1.3; }

@media (max-width: 900px){
  .service-block{ grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .service-block:nth-child(even) .service-block__media{ order: 0; }
}

/* Banda full-bleed con foto real + overlay azul, texto blanco encima.
   Mismo patrón que .section--normas (nosotros.php) pero de una sola
   columna — para "Política de Gestión de Calidad" (distribucion.php) y
   "Centro Médico Orionis" (medico.php), que en producción son secciones
   parallax con foto propia. */
.section--photo-band{
  position:relative; overflow:hidden; background: var(--color-primary);
  background-size:cover; background-position:center; padding: 64px 0;
}
.section--photo-band__overlay{ position:absolute; inset:0; background: rgba(11,61,98,.72); }
/* Franja separadora sin texto (ej. gerenciamiento farmacéutico, antes del
   footer): en producción es una tira angosta de la misma foto real con
   overlay, sin título ni párrafo — confirmado, mide ~160px de alto. */
.section--photo-band--plain{ padding: 0; height: 160px; }
.section--photo-band .container{ position:relative; z-index:1; max-width: 760px; }
.section--photo-band h2{ color:#fff; font-size: 22px; margin: 0 0 16px; }
.section--photo-band p{ color: rgba(255,255,255,.92); margin: 0 0 12px; line-height:1.7; }
.section--photo-band a{ color:#fff; font-weight:700; text-decoration: underline; }
.section--photo-band__eyebrow{ display:block; color: rgba(255,255,255,.7); font-size: 12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin: 0 0 10px; }

/* Páginas de Divisiones (distribucion.php, farmaceutico.php, medico.php).
   En producción es UNA columna de texto (intro + bullets + servicios)
   al lado de una galería de fotos (slick carousel). Acá replicamos el
   layout con CSS grid + una galería propia liviana (sin dependencia de
   slick/jQuery — mantenible a mano). */
.division-columns{
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items:start;
  padding: 10px 0 46px;
}
.division-columns__media{ position:sticky; top: 90px; }
.division-columns__media img{ width:100%; border-radius: var(--radius); display:block; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.division-columns__text p{ margin: 0 0 14px; }
.division-columns__text ul{ margin: 12px 0 0; }
.division-columns__text ul li{ position:relative; padding-left: 18px; margin-bottom: 8px; line-height:1.5; }
.division-columns__text ul li::before{ content:'·'; position:absolute; left:0; top:0; color: var(--color-accent); font-weight:700; font-size:18px; line-height:1.3; }

@media (max-width: 900px){
  .division-columns{ grid-template-columns: 1fr; gap: 24px; padding: 30px 0; }
  .division-columns__media{ position:static; order:-1; }
}

/* Galería simple de 2 fotos con fade + puntos, reemplaza el slick carousel
   real (evitamos sumar jQuery/slick solo para esto). */
.simple-gallery{ position:relative; }
.simple-gallery__slide{
  display:none; width:100%; aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.simple-gallery__slide.is-active{ display:block; }
.simple-gallery__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Slide de logo (ej. droguería en Logística): que no se recorte, con fondo
   blanco y la imagen contenida en vez de cubrir todo el recuadro. */
.simple-gallery__slide-logo{ object-fit:contain !important; background:#fff; padding: 30px; box-sizing:border-box; }
.simple-gallery__dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.simple-gallery__dots button{
  width:9px; height:9px; border-radius:50%; border:0; padding:0; background: var(--color-bg-alt); cursor:pointer;
}
.simple-gallery__dots button.is-active{ background: var(--color-primary); }

/* Frase de apertura de cada división: en producción NO es un párrafo más,
   es un H2 azul bold de 26px con una rayita corta de acento debajo (medida
   real: 80x2px, color #0093d3). Yo lo había metido como texto normal. */
.division-heading{ font-size: 26px; font-weight:700; color: var(--color-primary); line-height:1.4; margin: 0 0 16px; }
.division-heading__line{ display:block; width: 80px; height: 2px; background: var(--color-accent); margin: 14px 0 26px; }
/* Subtítulo full-width que sigue al título en servicios.php (confirmado
   real: 20px/700/#333, no azul — distinto peso visual que el título). */
.division-subtitle{ font-size: 20px; font-weight:700; color: #333; line-height:1.5; margin: 0 0 30px; }

/* Repite el patrón de division-columns pero puede invertir qué lado va la
   media (galería/foto a la izquierda, texto a la derecha) — en servicios.php
   alterna sección por sección, confirmado con las posiciones reales. */
.division-columns--media-left .division-columns__media{ order:-1; }

/* Fondo gris alternado real: en producción Farmacias y Tecnología de datos
   tienen #f9f9f9 de fondo (confirmado con getComputedStyle), el resto de
   las secciones de servicios.php son blancas. */
.section--alt-bg{ background: var(--color-bg-alt); }

/* Logo dentro de la columna de texto (ej. Laffarma en Farmacias): medido
   contra producción, NO está centrado ni es chico — va al final de los
   párrafos, alineado a la izquierda, ~274x120px reales. */
.division-logo-inline{ height: 120px; width:auto; margin-top: 20px; display:block; }

/* Checklist con tilde azul: confirmado inspeccionando el DOM real de
   producción — cada ítem de las listas de "cuerpo" (Gestión, Logística,
   Farmacias, Auditoría, Mandataria, Contamos con: en Tecnología) usa un
   <i class="fa fa-check"> color #004f8d (var(--color-primary)) delante del
   texto en negrita. No se veía por texto/​::before porque es un ícono de
   Font Awesome, no un carácter ni contenido generado — lo reproducimos acá
   con un ::before liviano en vez de sumar la dependencia de Font Awesome. */
.division-checklist{ list-style:none; margin:0 0 22px; padding:0; }
.division-checklist li,
.division-columns__text .division-checklist li{
  position:relative; padding-left: 26px; margin-bottom: 12px; line-height:1.6;
  font-weight:700; color: var(--color-primary);
}
.division-checklist li::before,
.division-columns__text .division-checklist li::before{
  content:'\2713'; position:absolute; left:0; top:2px;
  color: var(--color-primary); font-weight:700; font-size:14px;
}

/* Bandas separadoras con checklist (ej. "Contamos con:") */
.section--photo-band__check{ list-style:none; margin:0; padding:0; }
.section--photo-band__check li{
  position:relative; padding-left: 26px; margin-bottom: 10px; line-height:1.7;
  color: rgba(255,255,255,.92); /* faltaba: al pasar de <p> a <li> perdió el color blanco heredado */
}
.section--photo-band__check li strong{ color:#fff; }
.section--photo-band__check li::before{ content:'✓'; position:absolute; left:0; top:0; color:#fff; font-weight:700; }

/* Lista con flecha (banda "Centro Médico Orionis" en medico.php): en
   producción usa un ícono fa-angle-right blanco, no puntos "·" fusionados
   en un párrafo — confirmado inspeccionando el DOM real. */
.section--photo-band__arrow-list{ list-style:none; margin:18px 0 0; padding:0; }
.section--photo-band__arrow-list li{
  position:relative; padding-left: 22px; margin-bottom: 8px;
  color:#fff; font-weight:700;
}
.section--photo-band__arrow-list li::before{
  content:'\203A'; position:absolute; left:0; top:0; color:#fff; font-weight:700;
}

/* Caja de datos duros ("COBERTURA INTEGRAL", "4000 farmacias...") y lista
   de chips hacia los servicios relacionados de esa división. */
.division-highlight{
  background: var(--color-bg-alt); border-radius: var(--radius);
  padding: 28px 32px; margin: 10px 0 30px;
}
.division-highlight h3{ color: var(--color-primary); font-size: 15px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px; }
.division-highlight ul{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.division-highlight ul li{ position:relative; padding-left: 18px; line-height:1.5; }
.division-highlight ul li::before{ content:'●'; position:absolute; left:0; top:1px; color: var(--color-accent); font-size:10px; }
.division-highlight--stats ul{ grid-template-columns: repeat(3, 1fr); text-align:center; }
.division-highlight--stats .stat-num{ display:block; font-size: 30px; font-weight:800; color: var(--color-primary); line-height:1.1; }
.division-highlight--stats .stat-label{ font-size: 13px; color: var(--color-text-light); }
.division-highlight--stats ul li::before{ content:none; }
.division-highlight--stats ul li{ padding-left:0; }

.division-services{ display:flex; flex-wrap:wrap; gap: 10px; margin: 24px 0 0; }
.division-services a{
  display:inline-block; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight:600;
  background: var(--color-bg-alt); color: var(--color-primary);
}
.division-services a:hover{ background: var(--color-primary); color:#fff; }

@media (max-width: 700px){
  .division-highlight ul{ grid-template-columns: 1fr; }
  .division-highlight--stats ul{ grid-template-columns: 1fr; }
}

.section--closing-quote{ background: var(--color-primary-dark); color:#fff; text-align:center; padding: 55px 0; }
.section--closing-quote .section__closing{
  font-style:normal; font-weight:700; font-size: 20px; line-height:1.6; color:#fff;
  border:0; margin:0; padding-bottom: 22px; position:relative;
}
.section--closing-quote .section__closing::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:60px; height:2px; background: rgba(255,255,255,.6);
}

/* Contacto (usada en index.php#contacto y en contacto.php) */
.contact-block p{ margin: 4px 0 20px; }
.contact-map{ margin-top: 20px; border-radius: var(--radius); overflow:hidden; }

.contact-layout{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 50px; align-items:start; }
.contact-form form{ display:flex; flex-direction:column; gap: 16px; }
.contact-form__row{ display:flex; gap: 16px; }
.contact-form__field{ flex:1; }
.contact-form input,
.contact-form textarea{
  width:100%; padding: 14px 16px; border: 1px solid #d7dde2; border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; color: var(--color-text); background:#fff;
}
.contact-form input:focus,
.contact-form textarea:focus{ outline:none; border-color: var(--color-accent); }
.contact-form textarea{ resize: vertical; }
.contact-form .btn{ align-self:flex-start; border:0; cursor:pointer; font-size:14px; }
.contact-form__honeypot{
  position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;
}
.contact-form__msg{ font-size: 14px; min-height: 1.4em; }
.contact-form__msg.is-success{ color: #1b8a4a; }
.contact-form__msg.is-error{ color: #c0392b; }

/* Contacto: iconos grandes y oscuros (línea de texto normal, no el footer) */
.footer__line{ display:flex; align-items:flex-start; gap: 14px; }
.footer__icon{ height: 34px; width:auto; margin-top: 2px; flex-shrink:0; filter: brightness(0) invert(1); opacity:.8; }
.footer__icon--dark{ filter:none; opacity: 1; }
.footer__note{ font-size: 13px; color: var(--color-text-light); margin-left: 48px; }

/* Footer: fondo casi negro, como el sitio real (no el azul institucional) */
.mainfooter{ background: #111111; color: rgba(255,255,255,.8); padding: 60px 0 0; margin-top: 60px; }
/* Última sección antes del footer, pegada sin el espacio en blanco que
   normalmente lo separa del contenido (ej. bandas finales de las páginas de
   Divisiones). El footer es hermano de <main>, no de estas secciones (quedan
   dentro de <main>), así que un selector de hermano adyacente no sirve: se
   cancela el margin-top del footer con un margin-bottom negativo del mismo
   alto en la sección. Reutilizable en cualquier página cuya última sección
   deba quedar pegada al footer. */
.section--flush-footer{ margin-bottom: -60px; }
.mainfooter__inner{
  max-width: var(--maxw); margin:0 auto; padding: 0 20px 40px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; align-items:start;
}
.footer__brand-col{ display:flex; align-items:flex-start; }
.footer__logo{ height: 100px; width:auto; }
.footer__col h4{ color:#fff; font-size: 14px; text-transform:uppercase; letter-spacing:.04em; margin-bottom: 14px; }
.footer__col ul li{ margin-bottom: 8px; }
.footer__col a{ color: rgba(255,255,255,.75); font-size: 13px; }
.footer__col a:hover{ color:#fff; }
.footer__social{ display:flex; gap: 10px; margin-top: 18px; }
.footer__social-icon{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius: 4px; color:#fff;
}
.footer__social-icon svg{ width:18px; height:18px; }
.footer__social-icon--linkedin{ background:#0a66c2; }
.footer__social-icon--youtube{ background:#ff0000; }
.footer__social-icon:hover{ filter:brightness(1.15); }

.footer__lang{ margin-top: 26px; display:flex; align-items:center; gap: 10px; font-size:13px; }
.footer__lang-label{ color: rgba(255,255,255,.5); text-transform:uppercase; font-size:11px; letter-spacing:.06em; margin-right:4px; }
.footer__lang a{ color: rgba(255,255,255,.6); }
.footer__lang a.is-active{ color:#fff; font-weight:700; }

.mainfooter__bottom{
  background: #222222; border-top: 1px solid rgba(255,255,255,.12); text-align:center; padding: 16px 20px; font-size:12px;
}

/* Cajas de contacto (clientes.php, pacientes.php): 2 columnas de color
   plano que se superponen al borde inferior del banner de cabecera —
   confirmado midiendo contra producción real. Colores reales verificados
   con getComputedStyle: primary #004f8d, accent #0093d3, y un verde/teal
   #00a88f que sólo aparece acá (no es el --color-accent general). */
.info-boxes{ display:grid; grid-template-columns: 1fr 1fr; position:relative; z-index:2; margin-top:-90px; }
.info-box{ padding: 46px 44px; color:#fff; }
.info-box--primary{ background: var(--color-primary); }
.info-box--accent{ background: var(--color-accent); }
.info-box--teal{ background: #00a88f; }
.info-box__icon{ margin-bottom: 18px; }
.info-box__icon svg{ width:42px; height:42px; display:block; }
.info-box h2{ color:#fff; font-size: 22px; margin: 0 0 14px; }
.info-box p{ color: rgba(255,255,255,.92); margin: 0 0 14px; line-height:1.7; }
.info-box p strong{ color:#fff; }

.contact-list{ list-style:none; margin: 18px 0 0; padding:0; }
.contact-list li{ display:flex; align-items:center; gap: 12px; margin-bottom: 12px; font-weight:700; }
.contact-list li svg{ width:18px; height:18px; flex-shrink:0; }
.contact-list li a{ color:#fff; }
.contact-list li a:hover{ text-decoration: underline; }

.info-box__btn{
  display:inline-flex; align-items:center; gap: 10px; background:#fff; color: var(--color-primary);
  font-weight:700; font-size:14px; letter-spacing:.03em; padding: 15px 26px; border-radius: var(--radius);
  text-decoration:none; margin: 8px 0 26px;
}
.info-box__btn:hover{ background: rgba(255,255,255,.9); }
.info-box__btn svg{ width:18px; height:18px; }
.info-box__phone-note{ color: rgba(255,255,255,.92); }
.info-box__phone-note strong{ color:#fff; }

/* Acordeón del formulario de cotización (clientes.php): <details>/<summary>
   nativo, sin JS — más liviano y mantenible que reimplementar el toggle. */
.info-accordion{ background:#fff; border-radius: var(--radius); overflow:hidden; }
.info-accordion summary{
  list-style:none; cursor:pointer; padding: 18px 22px; display:flex; align-items:center; gap: 14px;
  color: var(--color-primary); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:13px;
}
.info-accordion summary::-webkit-details-marker{ display:none; }
.info-accordion__icon{ font-size:20px; line-height:1; width:20px; text-align:center; }
.info-accordion[open] .info-accordion__icon{ transform: rotate(45deg); display:inline-block; }
.info-accordion__body{ padding: 4px 22px 26px; }
.info-accordion__body .contact-form{ margin:0; }

/* Responsive */
@media (max-width: 900px){
  .grid--3, .grid--4{ grid-template-columns: 1fr 1fr; }
  .mainfooter__inner{ grid-template-columns: 1fr 1fr; }
  .contact-layout{ grid-template-columns: 1fr; }
  .nosotros-intro{ grid-template-columns: 1fr; }
  .nosotros-intro__image{ position:static; }
  .normas-grid{ grid-template-columns: 1fr; gap: 30px; }
  .units-full{ flex-direction:column; }
  .units-full__item{ min-height: 220px; }
  /* En mobile la imagen no entra al lado del texto: pasa a banda superior fija */
  .section--stats{ height:auto; }
  .stats__bg{ position:static; width:100%; height:220px; aspect-ratio:auto; margin-bottom:24px; }
  .stats__content{ height:auto; padding-left:20px; padding-right:20px; display:block; }
  .stats.grid--3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .navtoggle{ display:block; }
  .mainnav{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    border-top:1px solid #e6e9ec; box-shadow:0 8px 24px rgba(0,0,0,.1);
  }
  .mainnav.is-open{ display:block; }
  .mainnav > ul{ flex-direction:column; padding: 10px 20px 20px; gap:0; }

  /* En mobile no hay hover: el submenu arranca cerrado y cada item se abre
     con su propio botón (▾), independiente del resto. Nada queda "siempre abierto". */
  .has-children{ position:relative; }
  .has-children > a,
  .has-children > .submenu__trigger{ padding-right: 40px; }
  .submenu li.has-children > .submenu__trigger::after{ content:none; } /* la flechita › es cosa de desktop; en mobile ya está el botón ▾ */
  .submenu-toggle{
    display:block; position:absolute; top:0; right:0; width:40px; height:40px;
    border:0; background:none; font-size:16px; color: var(--color-primary); cursor:pointer;
  }
  .submenu-toggle span{ display:inline-block; transition: transform .2s ease; }
  .has-children.is-open > .submenu-toggle span{ transform: rotate(180deg); }
  .submenu{
    position:static; box-shadow:none; display:none; padding-left: 14px;
  }
  .has-children.is-open > .submenu{ display:block; }

  .grid--3, .grid--4{ grid-template-columns: 1fr; }
  .stats.grid--3{ grid-template-columns: 1fr; }
  .mainfooter__inner{ grid-template-columns: 1fr; }
  .contact-form__row{ flex-direction:column; }
  .survey__layout{ text-align:center; justify-content:center; }
  .survey__text h2::after{ left:50%; transform:translateX(-50%); }
  .hero-slide__eyebrow{ font-size: 40px; }
  .hero-slide__caption h1{ font-size:20px; }
  .hero-slider{ height: 360px; }
  .section--page-header h1{ font-size: 28px; }
  .section--page-header{ min-height: 220px; padding: 60px 0; }
  .info-boxes{ grid-template-columns: 1fr; margin-top:-40px; }
  .info-box{ padding: 34px 24px; }
}