/* =========================================================
   MEDSURGICAL — Hoja de estilos principal
   Dirección visual: clínico moderno (la misma de Spinex y Jointex)

   Las tres hojas son hermanas: misma estructura, mismos
   componentes, mismos nombres de variables. Lo único que
   cambia es el bloque de colores de aquí abajo, así que una
   corrección de maquetación se traslada entre sitios copiando
   y pegando, siempre que no se toque :root.
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  /* ---------------------------------------------------------
     ESCALA DE CELESTES — todos los azules del sitio salen de aquí.
     Cinco pasos del mismo tono (matiz 196-203°), sacados del logo
     de Medsurgical (#0084cc) y del celeste de la barra de menú del
     sitio actual (#00b7ea).
     --------------------------------------------------------- */
  --azul-1:        #042a3d;   /* el más oscuro: fondos de sección */
  --azul-2:        #00537f;   /* títulos y fondos oscuros */
  --azul-3:        #0084cc;   /* CELESTE DE MARCA: es el color del logo */
  --azul-4:        #009ee0;   /* enlaces y degradados */
  --azul-5:        #00b7ea;   /* el más claro: el de la barra actual */

  /* Acento: uno para fondo claro y otro para fondo oscuro */
  --celeste:       #0094d6;
  --celeste-luz:   #5fd2ff;
  --celeste-suave: #e8f6fd;

  /* Nombres por función — apuntan a la escala de arriba */
  --azul-nav:      var(--azul-2);
  --azul-btn:      var(--azul-3);
  --azul-profundo: var(--azul-2);
  --azul-oscuro:   var(--azul-2);   /* títulos */
  --azul-medio:    var(--azul-3);
  --morado:        #00537f;   /* franja de contacto */

  --texto:         #4b5c6e;
  --texto-suave:   #6b7f90;
  --gris-ic:       #eef5f9;
  --borde:         #e1ecf2;
  --fondo-alt:     #f5fafd;
  --blanco:        #ffffff;

  --container:     1170px;
  --radio-sm:      6px;
  --radio:         12px;
  --radio-lg:      18px;

  --sombra-sm:     0 2px 10px rgba(0, 70, 110, .07);
  --sombra-md:     0 14px 34px rgba(0, 70, 110, .13);
  --sombra-lg:     0 26px 60px rgba(0, 70, 110, .18);

  --ease:          cubic-bezier(.25, .8, .25, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);

  /* ---- Enganches de tema ---- */
  --sec-pad:          96px;
  /* Las fotos del slider miden 1280x453. Con 600px de alto el navegador
     las agrandaba un 32% y se veian blandas; con 540 casi no las toca. */
  --hero-alto:        540px;
  --hero-fade:        .8s;
  --hero-zoom:        13s;
  --hero-delay:       8.5s;    /* debe coincidir con DELAY en main.js */
  --card-radio:       var(--radio);
  --img-radio:        var(--radio);
  --btn-radio:        999px;
  --titulo-size:      31px;
  --titulo-align:     center;
  --titulo-weight:    600;
  --titulo-color:     var(--azul-oscuro);
  --parrafo-align:    left;
  --parrafo-size:     14.5px;
  --topbar-bg:        var(--fondo-alt);

  /* La barra de menú del sitio actual es celeste brillante con texto
     blanco, que cuesta leer. Se conserva la familia de color pero
     oscurecida lo justo para que el texto tenga contraste suficiente. */
  --nav-bg:           linear-gradient(100deg, var(--azul-1), var(--azul-2) 55%, #0070b0 100%);

  --sec-alt-bg:       linear-gradient(165deg, var(--azul-2) 0%, var(--azul-3) 48%, var(--azul-1) 100%);
  --franja-bg:        linear-gradient(115deg, #00628f 0%, #00537f 55%, #043b57 100%);

  /* Pie de página en celeste, como se pidió, pero graduado hacia el
     extremo oscuro para que el texto blanco se lea. */
  --footer-bg:        linear-gradient(115deg, var(--azul-3) 0%, var(--azul-2) 45%, var(--azul-1) 100%);

  --sombra-card:      var(--sombra-sm);
  --sombra-card-hov:  var(--sombra-lg);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  line-height:1.75;
  color:var(--texto);
  background:var(--blanco);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--azul-medio); text-decoration:none; transition:color .25s var(--ease); }
a:hover{ color:var(--celeste); }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 18px; }
h1,h2,h3,h4{ margin:0 0 18px; color:var(--azul-oscuro); font-weight:600; line-height:1.25; }
button{ font-family:inherit; cursor:pointer; }
svg{ width:100%; height:100%; fill:currentColor; display:block; }
::selection{ background:var(--celeste); color:#fff; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{ position:relative; z-index:100; background:var(--blanco); }

/* ---- Barra superior ---- */
.topbar{
  background:var(--topbar-bg);
  border-bottom:1px solid var(--borde);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:46px; flex-wrap:wrap;
}
.flags{ display:flex; align-items:center; gap:10px; }
.flags img{
  width:38px; height:23px; object-fit:cover;
  border-radius:3px;
  box-shadow:0 1px 3px rgba(10,30,80,.18);
  filter:saturate(.9);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.flags a:hover img{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 6px 14px rgba(10,30,80,.25);
  filter:saturate(1.15);
}

.topbar-cta{ display:flex; gap:8px; }
.btn-top{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 20px;
  border:1px solid transparent;
  border-radius:var(--btn-radio);
  font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:#fff;
  overflow:hidden;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease),
             background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-top svg{ width:14px; height:14px; flex:0 0 auto; }
.btn-top::after{           /* destello al pasar el mouse */
  content:"";
  position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);
  transition:left .6s var(--ease-out);
}
.btn-top:hover::after{ left:130%; }
.btn-top:hover{ transform:translateY(-2px); box-shadow:0 8px 16px rgba(10,30,80,.22); }
/* los dos en el azul del banner: uno macizo y otro delineado */
.btn-top--one{ background:var(--azul-nav); border-color:var(--azul-nav); }
.btn-top--one:hover{ color:#fff; background:var(--azul-medio); border-color:var(--azul-medio); }
.btn-top--two{ background:transparent; border-color:var(--azul-nav); color:var(--azul-nav); }
.btn-top--two:hover{ background:var(--azul-nav); color:#fff; }

/* ---- Bloque fijo (logo + nav) ---- */
.header-sticky{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  transition:box-shadow .35s var(--ease);
}
.header-sticky.is-stuck{ box-shadow:0 6px 26px rgba(10,30,80,.10); }

.header-main-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:22px 24px;
  transition:padding .35s var(--ease);
}
.header-sticky.is-stuck .header-main-inner{ padding:11px 24px; }

.brand img{ width:158px; transition:width .35s var(--ease); }
.header-sticky.is-stuck .brand img{ width:128px; }

.header-contact{ display:flex; align-items:center; gap:34px; }
.header-contact li{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding-left:0;
}
.header-contact li + li{ padding-left:34px; }
.header-contact li + li::before{     /* separador fino */
  content:"";
  position:absolute; left:0; top:50%;
  width:1px; height:30px;
  background:var(--borde);
  transform:translateY(-50%);
}
.header-contact .ic{
  position:relative;
  flex:0 0 auto;
  width:38px; height:38px; padding:9px;
  border-radius:50%;
  background:var(--gris-ic);
  color:var(--azul-nav);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease-out);
}
.header-contact .ic::after{          /* anillo que se expande */
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--celeste);
  opacity:0;
  transform:scale(.8);
  transition:opacity .45s var(--ease), transform .45s var(--ease-out);
}
.header-contact li:hover .ic{
  background:var(--azul-nav); color:#fff;
  transform:translateY(-2px);
}
.header-contact li:hover .ic::after{ opacity:1; transform:scale(1.32); }
.header-contact p{
  margin:0; font-size:12.5px; line-height:1.55; color:var(--texto);
}
.header-contact strong{
  display:block;
  color:var(--azul-oscuro);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.header-contact a{ color:inherit; }
.header-contact a:hover{ color:var(--celeste); }

/* ---- Hamburguesa ---- */
.nav-toggle{
  display:none;
  width:46px; height:40px; padding:10px 9px;
  border:0; border-radius:var(--radio-sm);
  background:var(--azul-nav);
}
.nav-toggle span{
  display:block; height:2px; border-radius:2px; background:#fff;
  transition:transform .35s var(--ease-out), opacity .2s var(--ease);
}
.nav-toggle span + span{ margin-top:5px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- Navegación ---- */
.header-nav{
  position:relative;
  background:var(--nav-bg);
  background-size:200% 100%;
  animation:navShift 18s ease-in-out infinite;
}
@keyframes navShift{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
.header-nav::after{                  /* filo celeste inferior */
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--celeste), transparent);
  opacity:.85;
}
.menu{ display:flex; justify-content:center; flex-wrap:wrap; }
.menu > li{ position:relative; }
.menu > li > a{
  display:block;
  padding:13px 28px;
  font-size:13px; font-style:italic; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.92);
  position:relative;
  transition:color .3s var(--ease);
}
.menu > li > a::after{
  content:"";
  position:absolute; left:50%; bottom:8px;
  width:0; height:2px;
  background:var(--celeste);
  border-radius:2px;
  transform:translateX(-50%);
  transition:width .4s var(--ease-out);
}
.menu > li:hover > a::after,
.menu > li.current > a::after{ width:calc(100% - 56px); }
.menu > li > a:hover{ color:#fff; }

.menu .has-sub > a{ padding-right:38px; }
.menu .has-sub > a::before{
  content:"";
  position:absolute; right:22px; top:50%;
  width:6px; height:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease-out);
}
.menu .has-sub:hover > a::before{ transform:translateY(-30%) rotate(225deg); }

.sub-toggle{ display:none; }

.sub-menu{
  position:absolute; left:0; top:100%;
  min-width:238px;
  padding:8px 0;
  background:#fff;
  border-radius:0 0 var(--radio) var(--radio);
  box-shadow:var(--sombra-md);
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition:opacity .3s var(--ease), transform .3s var(--ease-out), visibility .3s;
}
.menu > li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.sub-menu a{
  position:relative;
  display:block;
  padding:11px 22px;
  font-size:13px; font-weight:500;
  color:var(--azul-oscuro);
  transition:background .3s var(--ease), padding-left .3s var(--ease-out), color .3s var(--ease);
}
.sub-menu a::before{
  content:"";
  position:absolute; left:12px; top:50%;
  width:0; height:2px;
  background:var(--celeste);
  transform:translateY(-50%);
  transition:width .3s var(--ease-out);
}
.sub-menu a:hover{ background:var(--celeste-suave); color:var(--azul-nav); padding-left:34px; }
.sub-menu a:hover::before{ width:14px; }

/* =========================================================
   SLIDER
   ========================================================= */
.hero{
  position:relative;
  height:var(--hero-alto);
  overflow:hidden;
  background:var(--azul-profundo);
}
.hero-track{ position:absolute; inset:0; overflow:hidden; }

.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transform:translateX(100%);
  pointer-events:none;
  /* arranca rápido y frena suave, como un desliz en el celular */
  transition:transform var(--hero-fade) cubic-bezier(.32,.72,0,1);
}
.hero-slide.is-active{ pointer-events:auto; z-index:2; }
/* el JS coloca la diapositiva entrante fuera de cuadro sin animación */
.hero-slide.sin-anim{ transition:none; }

.hero-bg{
  position:absolute; inset:0;
  background-position:center top;
  background-size:cover;
  transform:scale(1.08);
}
/* movimiento continuo de la imagen mientras la diapositiva está visible */
.hero-slide.is-active .hero-bg{
  animation:kenburns var(--hero-zoom) cubic-bezier(.22,.61,.36,1) both;
}
@keyframes kenburns{
  from{ transform:scale(1.09); }
  to  { transform:scale(1); }
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,20,60,.30) 0%, rgba(6,20,60,.12) 40%, rgba(6,20,60,.52) 100%),
    radial-gradient(ellipse at center, transparent 35%, rgba(6,20,60,.35) 100%);
}

/* círculos decorativos */
.hero-ring{
  position:absolute; top:50%; left:50%;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.75);
  opacity:0;
  transition:transform 1.6s var(--ease-out), opacity 1.3s var(--ease);
  z-index:2;
}
.hero-ring--lg{
  width:800px; height:800px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.hero-ring--sm{
  width:560px; height:560px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.hero-slide.is-active .hero-ring{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.hero-slide.is-active .hero-ring--sm{ transition-delay:.12s; }

.hero-content{
  position:relative; z-index:3;
  text-align:center;
  color:#fff;
}
.hero-title{
  margin:0 0 14px;
  font-family:'Roboto', 'Poppins', sans-serif;
  font-size:74px; font-weight:300; line-height:1.1;
  letter-spacing:.04em;
  color:#fff;
  text-shadow:0 4px 26px rgba(0,0,0,.30);
}
.hero-sub{
  position:relative;
  display:block;
  margin:0 0 34px;
  padding-bottom:16px;
  font-family:'Roboto', 'Poppins', sans-serif;
  font-size:27px; font-weight:300; letter-spacing:.06em;
  color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.35);
}
.hero-sub::after{                 /* línea que crece bajo el subtítulo */
  content:"";
  position:absolute; left:50%; bottom:0;
  width:0; height:2px;
  background:var(--celeste);
  transform:translateX(-50%);
  transition:width .9s var(--ease-out) .8s;
}
.hero-slide.is-active .hero-sub::after{ width:96px; }

.hero-text{
  margin:0 auto 34px;
  max-width:820px;
  font-family:'Roboto', 'Poppins', sans-serif;
  font-size:19px; font-weight:400; line-height:1.65;
  color:rgba(255,255,255,.96);
  text-shadow:0 3px 18px rgba(0,0,0,.4);
}
.hero-btn{
  position:relative;
  display:inline-block;
  padding:13px 32px;
  border-radius:var(--btn-radio);
  background:var(--azul-btn);
  color:#fff;
  font-size:14px; font-weight:500; letter-spacing:.02em;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(9,2,132,.38);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), background .35s var(--ease);
  z-index:1;
}
.hero-btn::before{                /* relleno que barre de izquierda a derecha */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--celeste), var(--azul-4));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease-out);
  z-index:-1;
}
.hero-btn:hover{
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(9,2,132,.45);
}
.hero-btn:hover::before{ transform:scaleX(1); }

/* animación de entrada de los textos */
.hero-slide [data-anim]{
  opacity:0;
  transform:translateY(34px);
  filter:blur(4px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
.hero-slide.is-active [data-anim]{ opacity:1; transform:translateY(0); filter:blur(0); }
.hero-slide.is-active [data-anim="1"]{ transition-delay:.35s; }
.hero-slide.is-active [data-anim="2"]{ transition-delay:.58s; }
.hero-slide.is-active [data-anim="3"]{ transition-delay:.80s; }

/* flechas */
.hero-arrow{
  position:absolute; top:50%; z-index:5;
  width:56px; height:56px; padding:15px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
  color:rgba(255,255,255,.9);
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease-out), border-color .35s var(--ease);
}
.hero-arrow:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); color:#fff; }
.hero-arrow--prev{ left:26px; }
.hero-arrow--next{ right:26px; }
.hero-arrow--prev:hover{ transform:translateY(-50%) translateX(-4px); }
.hero-arrow--next:hover{ transform:translateY(-50%) translateX(4px); }

/* puntos */
.hero-dots{
  position:absolute; left:50%; bottom:28px; z-index:5;
  display:flex; align-items:center; gap:10px;
  transform:translateX(-50%);
}
.hero-dots button{
  position:relative;
  width:9px; height:9px; padding:0;
  border:0; border-radius:999px;
  background:rgba(255,255,255,.45);
  overflow:hidden;
  transition:background .35s var(--ease), width .45s var(--ease-out);
}
.hero-dots button.is-active{ width:34px; background:rgba(255,255,255,.35); }
/* la barrita avisa cuánto falta para el siguiente cambio */
.hero-dots button.is-active::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:#fff;
  transform-origin:left center;
  animation:dotProgreso var(--hero-delay) linear both;
}
@keyframes dotProgreso{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
/* al pasar el mouse el slider se detiene: también la imagen y la barrita */
.hero.is-paused .hero-slide.is-active .hero-bg,
.hero.is-paused .hero-dots button.is-active::after{ animation-play-state:paused; }

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */
.section-title{
  position:relative;
  margin:0 0 46px;
  padding-bottom:20px;
  font-size:var(--titulo-size); font-weight:var(--titulo-weight); letter-spacing:-.01em;
  color:var(--titulo-color);
  text-align:var(--titulo-align);
}
.section-title::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:0; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--azul-nav), var(--celeste));
  transform:translateX(-50%);
  transition:width .9s var(--ease-out) .25s;
}
.section-title.is-visible::after{ width:72px; }
.section-title--left{ text-align:left; }
.section-title--left::after{ left:0; transform:none; }

/* =========================================================
   INTRO
   ========================================================= */
.intro{ padding:var(--sec-pad) 0 calc(var(--sec-pad) - 26px); }
.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 60px;
  max-width:1040px;
  align-items:start;
}
.intro-col p{
  font-size:var(--parrafo-size); line-height:1.95;
  color:var(--texto-suave);
  text-align:var(--parrafo-align);
}
.intro-col p::first-letter{ color:var(--azul-oscuro); font-weight:600; }

.intro-fig{
  position:relative;
  margin:0 0 26px;
  aspect-ratio:16 / 10;          /* las dos fotos con la misma altura */
  border-radius:var(--img-radio);
  overflow:hidden;
  box-shadow:var(--sombra-card);
}
.intro-col:last-child .intro-fig{ margin:0; }
.intro-fig::after{                 /* velo azul que se disipa al pasar el mouse */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,42,140,.12), rgba(10,42,140,.02));
  opacity:1;
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.intro-fig:hover::after{ opacity:0; }
.intro-fig img{
  width:100%; height:100%;
  object-fit:cover;              /* recorta lo justo en vez de deformar */
  transition:transform .9s var(--ease-out);
}
.intro-fig:hover img{ transform:scale(1.05); }

/* =========================================================
   SOLUCIONES
   ========================================================= */
.soluciones{
  position:relative;
  padding:calc(var(--sec-pad) - 16px) 0 var(--sec-pad);
  background:var(--sec-alt-bg);
}

.deco-circle{
  position:absolute; top:96px;
  width:52px; height:52px;
  border:1.5px dashed rgba(198, 62, 72, .55);
  border-radius:50%;
  pointer-events:none;
  animation:decoFloat 7s ease-in-out infinite;
}
.deco-circle--left{ left:calc(50% - 290px); }
.deco-circle--right{ right:calc(50% - 290px); animation-delay:-3.5s; }
@keyframes decoFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-12px) rotate(180deg); }
}
/* halo que respira; lo usan los temas que ponen esta franja sobre azul */
@keyframes respirar{
  0%,100%{ transform:translateX(-50%) scale(1);    opacity:.85; }
  50%    { transform:translateX(-50%) scale(1.18); opacity:1; }
}

.marcas{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  max-width:850px;
  margin:0 auto;
}
.marca{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
  aspect-ratio:3 / 2;
  padding:24px;
  border-radius:var(--card-radio);
  background-color:var(--azul-3);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  box-shadow:var(--sombra-card);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease-out);
}
.marca::before{                   /* velo degradado */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,26,92,.12), rgba(6,26,92,.52));
  transition:background .45s var(--ease);
}
.marca::after{                    /* brillo diagonal al pasar el mouse */
  content:"";
  position:absolute; top:0; left:-140%;
  width:70%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg);
  transition:left .85s var(--ease-out);
}
.marca:hover{ transform:translateY(-8px); box-shadow:var(--sombra-card-hov); }
.marca:hover::before{ background:linear-gradient(180deg, rgba(6,26,92,.32), rgba(6,26,92,.68)); }
.marca:hover::after{ left:140%; }

.marca-logo{
  position:relative; z-index:2;
  width:66%; max-width:180px;
  transition:transform .5s var(--ease-out);
}
.marca:hover .marca-logo{ transform:scale(1.07) translateY(-4px); }

.marca-btn{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 20px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--btn-radio);
  color:#fff;
  font-size:11px; font-weight:500; letter-spacing:.06em;
  transition:background .4s var(--ease), color .4s var(--ease), gap .4s var(--ease-out);
}
.marca-btn::after{                /* flecha dibujada con bordes */
  content:"";
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-top:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .4s var(--ease-out);
}
.marca:hover .marca-btn{ background:#fff; color:var(--azul-nav); gap:12px; }
.marca:hover .marca-btn::after{ transform:rotate(45deg) translate(2px,-2px); }

/* =========================================================
   BANNER DE PÁGINA INTERIOR
   ========================================================= */
.banner-int{
  position:relative;
  display:flex; align-items:center;
  min-height:320px;
  overflow:hidden;
  background:var(--azul-profundo);
}
.banner-int-foto{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  animation:bannerZoom 16s ease-out forwards;
}
@keyframes bannerZoom{ to{ transform:scale(1); } }

/* Para fotos de baja resolución: un desenfoque mínimo disimula el pixelado.
   La imagen se mantiene siempre por sobre el 100% para que el desenfoque
   no deje los bordes transparentes. */
.banner-int-foto--suave{
  filter:blur(2.5px);
  transform:scale(1.12);
  animation:bannerZoomSuave 16s ease-out forwards;
}
@keyframes bannerZoomSuave{ to{ transform:scale(1.06); } }
.banner-int-foto::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,20,60,.78) 0%, rgba(6,20,60,.42) 55%, rgba(6,20,60,.20) 100%);
}
.banner-int-inner{
  position:relative; z-index:2;
  color:#fff;
}
.banner-int-title{
  margin:0;
  font-size:46px; font-weight:600; letter-spacing:-.01em;
  color:#fff;
  animation:bannerEntra .9s var(--ease-out) both;
}
.banner-int-sub{
  position:relative;
  margin:8px 0 0; padding-top:16px;
  font-size:15px; font-weight:300; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.88);
  animation:bannerEntra .9s var(--ease-out) .15s both;
}
.banner-int-sub::before{
  content:"";
  position:absolute; left:0; top:0;
  width:64px; height:2px;
  background:var(--celeste);
}
@keyframes bannerEntra{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:none; }
}

/* =========================================================
   PÁGINA DE SOLUCIONES
   ========================================================= */
.soluciones-pag{ padding:var(--sec-pad) 0; }

.sol-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
}

.sol-card{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:var(--card-radio);
  background:var(--blanco);
  border:1px solid var(--borde);
  box-shadow:var(--sombra-card);
  overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease),
             border-color .45s var(--ease);
}
.sol-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-card-hov);
  border-color:transparent;
}

.sol-foto{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--fondo-alt);
}
.sol-foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.sol-card:hover .sol-foto img{ transform:scale(1.06); }
.sol-foto::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(6,26,92,.35));
  opacity:0;
  transition:opacity .45s var(--ease);
}
.sol-card:hover .sol-foto::after{ opacity:1; }

.sol-cuerpo{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:10px;
  padding:22px 24px 24px;
}
.sol-titulo{
  margin:0;
  font-size:17px; font-weight:600;
  color:var(--azul-oscuro);
}
.sol-desc{
  display:none;                 /* el texto vive en la ficha flotante */
  margin:0;
  font-size:13.5px; line-height:1.85;
  color:var(--texto-suave);
}
.sol-abrir{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:2px; padding:0;
  border:0; background:none;
  color:var(--azul-medio);
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:color .3s var(--ease), gap .3s var(--ease-out);
}
.sol-abrir svg{ width:13px; height:13px; }
.sol-abrir::after{              /* toda la tarjeta queda clicable */
  content:"";
  position:absolute; inset:0;
}
.sol-card:hover .sol-abrir{ color:var(--celeste); gap:12px; }

/* ---- Ficha flotante ---- */
.ficha{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.ficha[hidden]{ display:none; }
.ficha-fondo{
  position:absolute; inset:0;
  background:rgba(6,20,60,.62);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.ficha.is-open .ficha-fondo{ opacity:1; }

.ficha-caja{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
  width:100%; max-width:820px;
  max-height:calc(100vh - 48px);
  border-radius:var(--radio-lg);
  background:var(--blanco);
  box-shadow:0 40px 90px rgba(4,17,63,.45);
  overflow:hidden;
  opacity:0;
  transform:translateY(26px) scale(.96);
  transition:opacity .4s var(--ease), transform .45s var(--ease-out);
}
.ficha.is-open .ficha-caja{ opacity:1; transform:none; }

.ficha-foto{ background:var(--fondo-alt); }
.ficha-foto img{
  width:100%; height:100%;
  min-height:260px;
  object-fit:cover;
}
.ficha-texto{
  display:flex; flex-direction:column; justify-content:center;
  gap:14px;
  padding:44px 44px 44px 40px;
  overflow-y:auto;
}
.ficha-titulo{
  position:relative;
  margin:0; padding-bottom:16px;
  font-size:26px; font-weight:600;
  color:var(--azul-oscuro);
}
.ficha-titulo::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:54px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--azul-nav), var(--celeste));
}
.ficha-desc{
  margin:0;
  font-size:14.5px; line-height:1.9;
  color:var(--texto);
}
.ficha-cerrar{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; padding:11px;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--azul-oscuro);
  box-shadow:0 4px 14px rgba(4,17,63,.2);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out);
}
.ficha-cerrar:hover{ background:var(--azul-nav); color:#fff; transform:rotate(90deg); }

body.ficha-abierta{ overflow:hidden; }

/* =========================================================
   TRABAJA CON NOSOTROS
   ========================================================= */
.razones{ padding:var(--sec-pad) 0 calc(var(--sec-pad) - 20px); }
.razones-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:44px 40px;
  max-width:1020px; margin:0 auto;
}
.razon{ text-align:center; }
.razon-ic{
  width:64px; height:64px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .45s var(--ease-out);
}
.razon:hover .razon-ic{ transform:translateY(-5px) scale(1.06); }
.razon-ic img{ max-width:100%; max-height:100%; width:auto; }
.razon p{
  margin:0;
  font-size:13.5px; line-height:1.85;
  color:var(--texto-suave);
}

.razones-fotos{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  max-width:1020px; margin:56px auto 0;
}
.razones-fotos figure{
  margin:0;
  aspect-ratio:3 / 4;
  border-radius:var(--card-radio);
  overflow:hidden;
  box-shadow:var(--sombra-card);
}
.razones-fotos img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.razones-fotos figure:hover img{ transform:scale(1.07); }

/* ---- Formas de postular ---- */
.postular{
  padding:calc(var(--sec-pad) - 16px) 0;
  background:var(--franja-bg);
  color:#fff;
}
.postular-titulo{
  max-width:720px; margin:0 auto 42px;
  font-size:22px; font-weight:500; line-height:1.55;
  color:#fff;
  text-align:center;
}
.postular-vias{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  max-width:900px; margin:0 auto;
}
.via{
  display:flex; align-items:center; gap:18px;
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--card-radio);
  background:rgba(255,255,255,.06);
  color:#fff;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease-out);
}
.via:hover{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:var(--celeste-luz);
  transform:translateY(-4px);
}
.via-ic{
  flex:0 0 auto;
  width:44px; height:44px; padding:11px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
}
.via-txt{ flex:1 1 auto; min-width:0; }
.via-txt strong{ display:block; font-size:15px; font-weight:600; }
.via-txt small{
  display:block; margin-top:3px;
  font-size:12.5px; line-height:1.6;
  color:rgba(255,255,255,.75);
}
.via-flecha{
  flex:0 0 auto;
  width:18px; height:18px;
  color:var(--celeste-luz);
  transition:transform .35s var(--ease-out);
}
.via:hover .via-flecha{ transform:translateX(5px); }

/* ---- Publicaciones de LinkedIn ---- */
.linkedin-feed{ padding:var(--sec-pad) 0; }
.posts-li{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  max-width:1020px; margin:0 auto;
}
.post-li{
  border:1px solid var(--borde);
  border-radius:var(--card-radio);
  background:var(--blanco);
  box-shadow:var(--sombra-card);
  overflow:hidden;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease-out);
}
.post-li:hover{ transform:translateY(-4px); box-shadow:var(--sombra-card-hov); }
/* El iframe viene de LinkedIn con ancho y alto propios de cada publicación.
   Los igualamos para que las tres tarjetas midan lo mismo. */
.post-li iframe{
  width:100% !important;
  max-width:100%;
  height:520px !important;
  border:0;
  display:block;
}
.post-li--vacio{
  display:flex; align-items:center; justify-content:center;
  min-height:320px;
  border:1px dashed var(--borde);
  background:var(--fondo-alt);
  color:var(--texto-suave);
  font-size:13px;
}
/* Tarjeta de respaldo cuando la página se abre como archivo local */
.post-li-local{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  min-height:300px; padding:32px 26px;
  background:var(--fondo-alt);
  text-align:center;
}
.post-li-local-ic{
  width:44px; height:44px; padding:11px;
  border-radius:50%;
  background:var(--azul-3);
  color:#fff;
  transition:transform .35s var(--ease-out);
}
.post-li-local:hover .post-li-local-ic{ transform:scale(1.08); }
.post-li-local-txt{
  font-size:14px; font-weight:600;
  color:var(--azul-oscuro);
}
.post-li-local small{
  font-size:12px; line-height:1.6;
  color:var(--texto-suave);
}
.linkedin-pie{ margin:34px 0 0; text-align:center; }
.linkedin-pie .franja-btn{
  border-color:var(--azul-3);
  color:var(--azul-3);
}
.linkedin-pie .franja-btn::before{ background:var(--azul-3); }
.linkedin-pie .franja-btn:hover{ color:#fff; }

/* =========================================================
   INFORMACIÓN AL CIRUJANO
   ========================================================= */
.cirujano-pag{ padding:var(--sec-pad) 0 calc(var(--sec-pad) - 24px); }
.accesos{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:26px;
}
.acceso{
  display:flex; flex-direction:column; align-items:center;
  flex:0 1 300px;
  padding:38px 30px 32px;
  border:1px solid var(--borde);
  border-radius:var(--card-radio);
  background:var(--blanco);
  box-shadow:var(--sombra-card);
  text-align:center;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease),
             border-color .45s var(--ease);
}
.acceso:hover{
  transform:translateY(-8px);
  box-shadow:var(--sombra-card-hov);
  border-color:transparent;
}
.acceso-ic{
  width:74px; height:74px; margin-bottom:20px; padding:14px;
  border-radius:50%;
  background:var(--celeste-suave);
  transition:background .45s var(--ease), transform .45s var(--ease-out);
}
.acceso:hover .acceso-ic{ background:var(--azul-3); transform:scale(1.06); }
.acceso-ic img{
  width:100%; height:100%; object-fit:contain;
  transition:filter .45s var(--ease);
}
.acceso:hover .acceso-ic img{ filter:brightness(0) invert(1); }
.acceso-titulo{
  margin:0 0 8px;
  font-size:17px; font-weight:600;
  color:var(--azul-oscuro);
}
.acceso-txt{
  margin:0 0 22px;
  font-size:13px; line-height:1.75;
  color:var(--texto-suave);
}
.acceso-btn{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:auto; padding:10px 22px;
  border-radius:var(--btn-radio);
  background:var(--azul-3);
  color:#fff;
  font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  transition:background .3s var(--ease), gap .3s var(--ease-out), color .3s var(--ease);
}
.acceso-btn svg{ width:13px; height:13px; }
.acceso:hover .acceso-btn{ background:var(--azul-4); color:#fff; gap:13px; }

/* ---- Panel de Instagram ---- */
.instagram-cta{ padding:0 0 var(--sec-pad); }
.ig-panel{
  position:relative;
  display:flex; align-items:center; gap:24px;
  max-width:760px; margin:0 auto;
  padding:30px 34px;
  border-radius:var(--card-radio);
  background:linear-gradient(100deg, var(--azul-2) 0%, var(--azul-3) 55%, var(--azul-4) 100%);
  color:#fff;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(10, 42, 140, .28);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.ig-panel::after{                  /* destello al pasar el mouse */
  content:"";
  position:absolute; top:0; left:-130%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg);
  transition:left .9s var(--ease-out);
}
.ig-panel:hover{ color:#fff; transform:translateY(-4px); box-shadow:0 26px 56px rgba(10,42,140,.38); }
.ig-panel:hover::after{ left:140%; }
.ig-ic{
  position:relative; z-index:2;
  flex:0 0 auto;
  width:58px; height:58px; padding:13px;
  border-radius:18px;
  background:rgba(255,255,255,.18);
  color:#fff;
}
.ig-txt{ position:relative; z-index:2; flex:1 1 auto; min-width:0; }
.ig-txt strong{
  display:block;
  font-size:19px; font-weight:600; letter-spacing:-.01em;
}
.ig-txt em{
  display:block; margin-top:2px;
  font-size:14px; font-style:normal;
  color:rgba(255,255,255,.85);
}
.ig-btn{
  position:relative; z-index:2;
  flex:0 0 auto;
  padding:11px 26px;
  border-radius:var(--btn-radio);
  background:#fff;
  color:var(--azul-3);
  font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.ig-panel:hover .ig-btn{ background:var(--celeste-luz); color:var(--azul-1); }

@media (max-width:600px){
  .ig-panel{ flex-direction:column; text-align:center; gap:16px; padding:28px 22px; }
  .acceso{ flex:1 1 100%; }
}

/* =========================================================
   PÁGINA DE CONTACTO
   ========================================================= */
.contacto-pag{ padding:var(--sec-pad) 0 calc(var(--sec-pad) - 30px); }
.contacto-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:56px;
  align-items:start;
}
.contacto-form .section-title,
.contacto-datos .section-title{ font-size:24px; margin-bottom:32px; }

.dato{
  display:flex; align-items:flex-start; gap:16px;
  margin-bottom:14px; padding:18px 20px;
  border:1px solid var(--borde);
  border-radius:var(--card-radio);
  background:var(--blanco);
  box-shadow:var(--sombra-card);
  color:var(--texto);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}
.dato:hover{
  color:var(--texto);
  transform:translateX(5px);
  box-shadow:var(--sombra-card-hov);
  border-color:transparent;
}
.dato-ic{
  flex:0 0 auto;
  width:42px; height:42px; padding:11px;
  border-radius:50%;
  background:var(--celeste-suave);
  color:var(--azul-3);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.dato:hover .dato-ic{ background:var(--azul-3); color:#fff; }
.dato--wa:hover .dato-ic{ background:#25d366; }
.dato-txt{
  font-size:13px; line-height:1.7;
  color:var(--texto-suave);
}
.dato-txt strong{
  display:block; margin-bottom:2px;
  font-size:13.5px; font-weight:600;
  color:var(--azul-oscuro);
}

/* ---- Mapa ---- */
.mapa{ padding:0 0 var(--sec-pad); }
.mapa-marco{
  border-radius:var(--card-radio);
  overflow:hidden;
  box-shadow:var(--sombra-card);
  line-height:0;
}
.mapa-marco iframe{
  width:100%; height:420px;
  border:0; display:block;
  filter:saturate(.9);
  transition:filter .5s var(--ease);
}
.mapa-marco:hover iframe{ filter:saturate(1); }

/* =========================================================
   VENTANAS MODALES (formulario y textos legales)
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:320;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal-fondo{
  position:absolute; inset:0;
  background:rgba(4,17,63,.62);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.modal.is-open .modal-fondo{ opacity:1; }
.modal .modal-caja{
  position:relative;
  width:100%; max-width:620px;
  max-height:calc(100vh - 48px);
  padding:44px 44px 40px;
  border-radius:var(--radio-lg);
  background:var(--blanco);
  box-shadow:0 40px 90px rgba(4,17,63,.45);
  overflow-y:auto;
  opacity:0;
  transform:translateY(26px) scale(.96);
  transition:opacity .4s var(--ease), transform .45s var(--ease-out);
}
.modal.is-open .modal-caja{ opacity:1; transform:none; }
.modal-caja--texto{ max-width:680px; }
.modal-cerrar{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; padding:11px;
  border:0; border-radius:50%;
  background:var(--fondo-alt);
  color:var(--azul-oscuro);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out);
}
.modal-cerrar:hover{ background:var(--azul-3); color:#fff; transform:rotate(90deg); }
.modal .modal-titulo{
  position:relative;
  margin:0 0 8px; padding-bottom:16px;
  font-size:24px; font-weight:600;
  color:var(--azul-oscuro);
}
.modal .modal-titulo::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:54px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--azul-3), var(--celeste));
}
.modal-bajada{
  margin:14px 0 26px;
  font-size:13.5px; line-height:1.75;
  color:var(--texto-suave);
}

/* ---- Campos ---- */
.form-cv .campo{ margin-bottom:16px; }
.form-cv .campo-fila{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.form-cv label{
  display:block; margin-bottom:6px;
  font-size:12.5px; font-weight:600;
  color:var(--azul-oscuro);
}
.req{ color:#c8324a; }
.form-cv input[type="text"],
.form-cv input[type="email"],
.form-cv input[type="tel"],
.form-cv textarea{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--borde);
  border-radius:var(--radio-sm);
  background:var(--fondo-alt);
  font-family:inherit; font-size:14px;
  color:var(--texto);
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.form-cv input:focus,
.form-cv textarea:focus{
  outline:none;
  border-color:var(--azul-4);
  background:var(--blanco);
  box-shadow:0 0 0 3px rgba(17,64,182,.12);
}
.form-cv textarea{ resize:vertical; min-height:76px; }
.form-cv .campo-ayuda{
  display:block; margin-top:6px;
  font-size:11.5px; color:var(--texto-suave);
}
.form-cv .error{ border-color:#c8324a; background:#fff6f7; }

/* trampa anti-bots: fuera de la vista pero no con display:none */
.campo-trampa{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---- Selector de archivo ---- */
.campo-archivo{ position:relative; }
.campo-archivo input[type="file"]{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.campo-archivo-cara{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  border:1px dashed var(--borde);
  border-radius:var(--radio-sm);
  background:var(--fondo-alt);
  font-size:13.5px;
  color:var(--texto-suave);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.campo-archivo-cara svg{ width:17px; height:17px; flex:0 0 auto; color:var(--azul-4); }
.campo-archivo:hover .campo-archivo-cara,
.campo-archivo input:focus + .campo-archivo-cara{
  border-color:var(--azul-4); color:var(--azul-oscuro);
}
.campo-archivo.tiene-archivo .campo-archivo-cara{
  border-style:solid; border-color:var(--azul-4);
  color:var(--azul-oscuro); background:var(--celeste-suave);
}

/* ---- Consentimiento ---- */
.form-cv .campo-check{
  display:flex; align-items:flex-start; gap:11px;
  margin:22px 0 18px; padding:16px 18px;
  border:1px solid var(--borde);
  border-radius:var(--radio-sm);
  background:var(--fondo-alt);
  font-size:12.5px; font-weight:400; line-height:1.7;
  color:var(--texto);
  margin-bottom:18px;
}
.form-cv .campo-check input{
  flex:0 0 auto; width:17px; height:17px; margin-top:2px;
  accent-color:var(--azul-3);
}
.enlace-terminos{
  display:inline; padding:0;
  border:0; background:none;
  color:var(--azul-4);
  font:inherit; text-decoration:underline;
}
.enlace-terminos:hover{ color:var(--celeste); }

/* ---- Captcha ---- */
.campo-captcha{ margin-bottom:16px; }
.campo-captcha:empty{ margin-bottom:0; }   /* sin clave configurada, no ocupa espacio */
.campo-captcha > div{ max-width:100%; }

/* ---- Aviso y botón ---- */
.form-aviso{
  margin-bottom:16px; padding:13px 16px;
  border-radius:var(--radio-sm);
  font-size:13px; line-height:1.65;
}
.form-aviso.es-error{ background:#fdeff1; color:#9d2438; border:1px solid #f3c9d1; }
.form-aviso.es-ok{ background:#eaf7ef; color:#1d6b3d; border:1px solid #c2e7d1; }

.form-enviar{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 28px;
  border:0; border-radius:var(--btn-radio);
  background:var(--azul-3);
  color:#fff;
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:background .3s var(--ease), transform .3s var(--ease-out), opacity .3s var(--ease);
}
.form-enviar:hover{ background:var(--azul-4); transform:translateY(-2px); }
.form-enviar[disabled]{ opacity:.6; transform:none; cursor:not-allowed; }
.form-enviar-carga{
  display:none;
  width:15px; height:15px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:girar .8s linear infinite;
}
.form-enviar.enviando .form-enviar-carga{ display:block; }
@keyframes girar{ to{ transform:rotate(360deg); } }

/* ---- Aviso de consentimiento ---- */
.legal-intro{
  margin:18px 0 22px;
  font-size:13px; line-height:1.8;
  color:var(--texto);
}
.legal-intro p{ margin:0 0 12px; }
.legal-intro p:last-child{ margin:0; }

.legal-bloques{
  border:1px solid var(--borde);
  border-radius:var(--radio-sm);
  overflow:hidden;
}
.legal-bloque{
  padding:14px 18px;
  border-bottom:1px solid var(--borde);
}
.legal-bloque:last-child{ border-bottom:0; }
.legal-bloque:nth-child(even){ background:var(--fondo-alt); }
.legal-bloque h4{
  position:relative;
  margin:0 0 5px; padding-left:16px;
  font-size:13px; font-weight:600;
  color:var(--azul-oscuro);
}
.legal-bloque h4::before{          /* viñeta */
  content:"";
  position:absolute; left:0; top:7px;
  width:7px; height:7px; border-radius:50%;
  background:var(--celeste);
}
.legal-bloque p{
  margin:0; padding-left:16px;
  font-size:12.5px; line-height:1.75;
  color:var(--texto-suave);
}

.legal-consents{ margin-top:22px; }
.legal-check{
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:12px; padding:14px 16px;
  border:1px solid var(--borde);
  border-radius:var(--radio-sm);
  font-size:12.5px; line-height:1.75;
  color:var(--texto);
  cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.legal-check:hover{ border-color:var(--azul-4); }
.legal-check input{
  flex:0 0 auto; width:17px; height:17px; margin-top:2px;
  accent-color:var(--azul-3);
}
.legal-check input:checked ~ span{ color:var(--azul-oscuro); }
.legal-check strong{ color:var(--azul-oscuro); }

.legal-acciones{
  display:flex; flex-direction:column; gap:10px;
  margin-top:22px;
}
.legal-aceptar,
.legal-cancelar{
  width:100%; padding:14px 24px;
  border:0; border-radius:var(--radio-sm);
  font-size:14px; font-weight:600;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.legal-aceptar{ background:var(--azul-3); color:#fff; }
.legal-aceptar:hover:not([disabled]){ background:var(--azul-4); }
.legal-aceptar[disabled]{
  background:var(--borde); color:var(--texto-suave); cursor:not-allowed;
}
.legal-cancelar{ background:var(--fondo-alt); color:var(--azul-3); }
.legal-cancelar:hover{ background:var(--celeste-suave); }

/* ---- Texto legal ---- */
.texto-legal{
  margin-top:22px;
  font-size:13px; line-height:1.85;
  color:var(--texto);
}
.texto-legal p{ margin:0 0 14px; }
.texto-legal strong{ color:var(--azul-oscuro); }
.texto-legal-nota{
  margin-top:20px; padding:13px 16px;
  border-left:3px solid var(--celeste);
  background:var(--fondo-alt);
  font-size:12px; color:var(--texto-suave);
}

/* el botón de "Envíanos tu CV" es <button>: hay que igualarlo al <a> */
button.via{
  width:100%;
  border:1px solid rgba(255,255,255,.2);
  font-family:inherit; font-size:inherit; text-align:left;
}

/* ---- Aviso de cookies / seguimiento ---- */
.aviso-cookies{
  position:fixed; left:24px; bottom:24px; z-index:310;
  width:min(420px, calc(100vw - 48px));
  padding:22px 24px;
  border-radius:var(--radio);
  background:var(--blanco);
  box-shadow:0 24px 60px rgba(4,17,63,.28);
  transform:translateY(24px);
  opacity:0;
  transition:opacity .4s var(--ease), transform .45s var(--ease-out);
}
.aviso-cookies[hidden]{ display:none; }
.aviso-cookies.is-open{ opacity:1; transform:none; }
.aviso-cookies h4{
  margin:0 0 8px;
  font-size:15px; font-weight:600;
  color:var(--azul-oscuro);
}
.aviso-cookies p{
  margin:0 0 16px;
  font-size:12.5px; line-height:1.7;
  color:var(--texto-suave);
}
.aviso-cookies-botones{ display:flex; gap:10px; flex-wrap:wrap; }
.aviso-cookies button{
  padding:9px 20px;
  border-radius:var(--btn-radio);
  border:1px solid var(--azul-3);
  font-size:12px; font-weight:600;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.aviso-cookies .acepta{ background:var(--azul-3); color:#fff; }
.aviso-cookies .acepta:hover{ background:var(--azul-4); border-color:var(--azul-4); }
.aviso-cookies .lee{ background:transparent; color:var(--azul-3); }
.aviso-cookies .lee:hover{ background:var(--celeste-suave); }

@media (max-width:600px){
  .modal{ padding:12px; }
  .modal .modal-caja{ padding:34px 22px 28px; }
  .form-cv .campo-fila{ grid-template-columns:1fr; }
  .aviso-cookies{ left:12px; right:12px; bottom:12px; width:auto; }
}

/* =========================================================
   NUESTRA EMPRESA
   ========================================================= */
.empresa{ padding:var(--sec-pad) 0; }
.empresa-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px 64px;
  max-width:1040px;
}
.empresa-txt p{
  font-size:var(--parrafo-size); line-height:1.95;
  color:var(--texto-suave);
  text-align:var(--parrafo-align);
}
.empresa-txt p strong,
.empresa-txt p b{ color:var(--azul-oscuro); }
.empresa-cert{
  width:80%; max-width:330px;
  margin:34px 0 0;
  transition:transform .5s var(--ease-out);
}
.empresa-cert:hover{ transform:scale(1.04); }
.empresa-img{
  position:relative;
  border-radius:var(--radio-lg);
  padding:14px;
  background:radial-gradient(circle at 50% 45%, var(--celeste-suave), transparent 70%);
}
.empresa-img img{
  width:100%;
  animation:floatY 8s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-14px); }
}

/* =========================================================
   FRANJA DE CONTACTO
   ========================================================= */
.franja{
  position:relative;
  padding:calc(var(--sec-pad) - 12px) 0;
  background:var(--franja-bg);
  color:#fff;
  overflow:hidden;
}
.franja::before{                  /* halo suave en movimiento */
  content:"";
  position:absolute; top:-40%; left:-10%;
  width:620px; height:620px;
  background:radial-gradient(circle, rgba(37,150,211,.22), transparent 65%);
  animation:haloDrift 16s ease-in-out infinite;
  pointer-events:none;
}
@keyframes haloDrift{
  0%,100%{ transform:translate(0,0); }
  50%    { transform:translate(140px, 60px); }
}
.franja-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
}
.franja-col{ padding:0 10px; }
.franja-col + .franja-col{
  border-left:1px solid rgba(255,255,255,.16);
  padding-left:56px;
  text-align:right;
}
.franja-pre{
  display:block;
  font-size:12px; font-weight:300; letter-spacing:.08em;
  color:rgba(255,255,255,.7);
}
.franja-title{
  margin:4px 0 16px;
  font-size:32px; font-weight:300; letter-spacing:.09em;
  color:#fff;
}
.franja p{
  font-size:13px;
  color:rgba(255,255,255,.78);
  margin-bottom:26px;
}
.franja-btn{
  position:relative;
  display:inline-block;
  padding:11px 28px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--btn-radio);
  background:transparent;
  color:#fff;
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  overflow:hidden;
  transition:color .4s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease);
  z-index:1;
}
.franja-btn::before{
  content:"";
  position:absolute; inset:0;
  background:#fff;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .45s var(--ease-out);
  z-index:-1;
}
.franja-btn:hover{
  color:var(--morado);
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.25);
}
.franja-btn:hover::before{ transform:scaleX(1); transform-origin:left center; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  position:relative;
  padding:calc(var(--sec-pad) - 16px) 0 28px;
  background:var(--footer-bg);
  color:rgba(255,255,255,.85);
  overflow:hidden;
}
.footer-glow{
  position:absolute; top:-160px; left:-90px;
  width:880px; height:460px;
  background:radial-gradient(ellipse at center, rgba(74,160,255,.45), transparent 65%);
  animation:haloDrift 20s ease-in-out infinite;
  pointer-events:none;
}
.footer-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:46px;
}
.footer-brand img{
  width:186px; margin-bottom:24px;
  transition:transform .45s var(--ease-out);
}
.footer-brand:hover img{ transform:translateY(-3px); }
.footer-col p{
  font-size:12.5px; line-height:1.95;
  color:rgba(255,255,255,.78);
}
.footer-col h4{
  position:relative;
  margin:0 0 24px; padding-bottom:12px;
  font-size:16px; font-weight:600; letter-spacing:.01em;
  color:#fff;
}
.footer-col h4::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:34px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.55);
}
.footer-contact li{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
  font-size:13px;
}
.footer-contact svg{
  width:15px; height:15px; flex:0 0 auto; color:#fff;
  transition:transform .35s var(--ease-out);
}
.footer-contact li:hover svg{ transform:translateY(-2px) scale(1.1); }
.footer-contact a{
  position:relative;
  color:rgba(255,255,255,.88);
}
.footer-contact a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:#fff;
  transition:width .35s var(--ease-out);
}
.footer-contact a:hover{ color:#fff; }
.footer-contact a:hover::after{ width:100%; }

.footer-social{ display:flex; gap:10px; margin-top:26px; }
.footer-social a{
  display:block;
  width:36px; height:36px; padding:9px;
  border-radius:50%;
  background:rgba(255,255,255,.13);
  color:#fff;
  transition:background .35s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.footer-social a:hover{
  background:#fff; color:var(--azul-nav);
  transform:translateY(-5px);
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}

/* carrusel ISO */
.footer-col--iso{ display:flex; align-items:flex-start; justify-content:center; }
.iso-carousel{
  position:relative;
  width:100%; max-width:262px;
  padding:0 28px;
}
.iso-viewport{ position:relative; height:186px; overflow:hidden; }
.iso-slide{
  position:absolute; inset:0;
  margin:0;
  display:flex; align-items:center; justify-content:center;
  transform:translateX(100%);
  transition:transform .65s cubic-bezier(.32,.72,0,1);
}
.iso-slide.sin-anim{ transition:none; }
.iso-slide img{ max-height:186px; width:auto; }
.iso-arrow{
  position:absolute; top:50%; z-index:3;
  width:26px; height:26px; padding:4px;
  transform:translateY(-50%);
  border:0; border-radius:50%;
  background:transparent;
  color:rgba(255,255,255,.8);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.iso-arrow:hover{ color:#fff; background:rgba(255,255,255,.2); }
.iso-arrow--prev{ left:2px; }
.iso-arrow--next{ right:2px; }
.iso-dots{ display:flex; justify-content:center; gap:7px; margin-top:14px; }
.iso-dots button{
  width:7px; height:7px; padding:0;
  border:0; border-radius:999px;
  background:rgba(255,255,255,.4);
  transition:background .3s var(--ease), width .4s var(--ease-out);
}
.iso-dots button.is-active{ width:20px; background:#fff; }

.footer-divider{
  position:relative; z-index:2;
  height:1px; margin:52px 0 22px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.footer-copy{
  position:relative; z-index:2;
  margin:0;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.72);
}

/* =========================================================
   WHATSAPP
   ========================================================= */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:200;
  width:54px; height:54px; padding:12px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  box-shadow:0 8px 22px rgba(37,211,102,.42);
  animation:wa-in .5s var(--ease-out) both;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.wa-float::before{                /* anillo que late */
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:waPulse 2.6s var(--ease-out) infinite;
}
@keyframes waPulse{
  0%  { transform:scale(1);    opacity:.8; }
  70% { transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}
.wa-float:hover{ color:#fff; transform:scale(1.1) rotate(-6deg); box-shadow:0 12px 30px rgba(37,211,102,.5); }
@keyframes wa-in{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:scale(1); } }

/* =========================================================
   REVELADO AL HACER SCROLL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(42px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change:opacity, transform;
}
.reveal--left  { transform:translateX(-48px); }
.reveal--right { transform:translateX(48px); }
.reveal--zoom  { transform:scale(.94); }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1199px){
  .deco-circle{ display:none; }
  .hero-title{ font-size:64px; }
}

@media (max-width:991px){
  .hero{ height:560px; }
  .hero-title{ font-size:52px; }
  .hero-sub{ font-size:22px; }
  .hero-text{ font-size:17px; }
  .hero-ring--lg{ width:600px; height:600px; }
  .hero-ring--sm{ width:400px; height:400px; }

  .header-contact{ gap:22px; }
  .header-contact li + li{ padding-left:22px; }
  .header-contact p{ font-size:11.5px; }
  .brand img{ width:134px; }

  .section-title{ font-size:27px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-col--iso{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .header-contact{ display:none; }

  .header-nav{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s var(--ease-out);
  }
  .header-nav.is-open{ max-height:560px; }
  .menu{ display:block; padding:8px 0; }
  .menu > li > a{ padding:13px 24px; }
  .menu > li > a::after{ display:none; }
  .menu .has-sub > a::before{ display:none; }

  .sub-toggle{
    display:block;
    position:absolute; right:10px; top:7px;
    width:34px; height:34px;
    border:0; border-radius:50%;
    background:rgba(255,255,255,.14);
  }
  .sub-toggle::before{
    content:"";
    position:absolute; left:50%; top:45%;
    width:7px; height:7px;
    border-right:2px solid #fff; border-bottom:2px solid #fff;
    transform:translate(-50%,-50%) rotate(45deg);
    transition:transform .3s var(--ease-out);
  }
  .sub-toggle.is-open::before{ transform:translate(-50%,-20%) rotate(225deg); }

  .sub-menu{
    position:static;
    opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden;
    padding:0; border-radius:0; box-shadow:none;
    background:rgba(255,255,255,.07);
    transition:max-height .4s var(--ease-out);
  }
  .sub-menu.is-open{ max-height:220px; }
  .sub-menu a{ color:#fff; padding-left:38px; }
  .sub-menu a:hover{ background:rgba(255,255,255,.1); color:#fff; }

  .sol-grid,
  .razones-grid,
  .posts-li{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .razones-fotos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ficha-caja{ grid-template-columns:1fr; max-height:calc(100vh - 40px); }
  .ficha-foto img{ min-height:0; aspect-ratio:16 / 9; }
  .ficha-texto{ padding:30px 28px 34px; }

  .intro-grid,
  .empresa-grid,
  .franja-grid,
  .contacto-grid{ grid-template-columns:1fr; }
  .mapa-marco iframe{ height:320px; }
  .franja-col + .franja-col{
    border-left:0; border-top:1px solid rgba(255,255,255,.16);
    padding-left:10px; padding-top:40px; text-align:left;
  }
  .intro-col:last-child{ display:flex; flex-direction:column-reverse; }
  .intro-col:last-child .intro-fig{ margin:0 0 26px; }
  .reveal--left, .reveal--right{ transform:translateY(42px); }
}

@media (max-width:600px){
  .container{ padding:0 18px; }
  .hero{ height:470px; }
  .hero-title{ font-size:36px; }
  .hero-sub{ font-size:17px; padding-bottom:12px; }
  .hero-text{ font-size:14px; }
  .hero-text br{ display:none; }
  .hero-ring--lg{ width:430px; height:430px; }
  .hero-ring--sm{ width:290px; height:290px; }
  .hero-arrow{ width:44px; height:44px; padding:12px; }
  .hero-arrow--prev{ left:8px; }
  .hero-arrow--next{ right:8px; }

  .topbar-inner{ justify-content:center; padding-top:10px; padding-bottom:10px; }
  .intro{ padding:64px 0 48px; }
  .soluciones{ padding:56px 0 70px; }
  .empresa{ padding:70px 0; }
  .franja{ padding:64px 0; }
  .marcas{ grid-template-columns:1fr; max-width:340px; }
  .sol-grid,
  .razones-grid,
  .posts-li,
  .postular-vias{ grid-template-columns:1fr; }
  .postular-titulo{ font-size:18px; }
  .banner-int{ min-height:230px; }
  .banner-int-title{ font-size:32px; }
  .banner-int-sub{ font-size:12px; letter-spacing:.12em; }
  .ficha{ padding:14px; }
  .ficha-titulo{ font-size:21px; }
  .footer-grid{ grid-template-columns:1fr; }
  .section-title{ font-size:23px; margin-bottom:34px; }
  .franja-title{ font-size:26px; }
}

/* =========================================================
   ESTILO CLÍNICO MODERNO
   Estas reglas vivían en un archivo de tema aparte. Al quedarnos
   con este estilo se integraron aquí, después de las reglas base
   porque las sobrescriben.
   ========================================================= */
:root{
  --sec-pad:          96px;
  --hero-alto:        640px;
  --card-radio:       12px;
  --img-radio:        12px;
  --btn-radio:        999px;
  --titulo-size:      31px;
  --titulo-align:     center;
  --titulo-weight:    600;
  --parrafo-align:    left;
  --parrafo-size:     14.5px;

  /* Los fondos oscuros se arman con la misma escala de azules de arriba */
  --sec-alt-bg:       linear-gradient(165deg, var(--azul-2) 0%, var(--azul-3) 48%, var(--azul-1) 100%);
  --franja-bg:        var(--azul-1);
  --footer-bg:        linear-gradient(160deg, var(--azul-2) 0%, var(--azul-3) 100%);
  --morado:           var(--azul-1);   /* color del texto del botón al rellenarse */
}

/* ---- Cierre de página: franja de contacto y footer ---- */
.franja::before{ display:none; }
.franja-grid{ gap:0; }
.franja-col + .franja-col{ border-left-color:rgba(255,255,255,.14); }
.franja-pre{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.franja-title{
  margin:10px 0 18px;
  font-size:44px; font-weight:700; letter-spacing:-.03em;
}
.franja-btn{
  padding:15px 34px;
  border-radius:0;
  font-size:10px; letter-spacing:.18em;
}

.footer-glow{ display:none; }
.footer-col h4{
  padding-bottom:0;
  font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.footer-col h4::after{ display:none; }
.footer-social a{ border-radius:0; }
.iso-dots button{ border-radius:0; height:3px; }

@media (max-width:600px){
  .franja-title{ font-size:32px; }
}

/* ---- Soluciones terapéuticas sobre azul profundo ---- */
.soluciones{
  position:relative;
  overflow:hidden;
  --celeste:var(--celeste-luz);   /* sobre azul oscuro, el acento sube de brillo */
}
.soluciones::before{              /* halo que respira detrás del título */
  content:"";
  position:absolute; top:-30%; left:50%;
  width:900px; height:900px;
  background:radial-gradient(circle, rgba(56,182,255,.16), transparent 62%);
  transform:translateX(-50%);
  animation:respirar 12s ease-in-out infinite;
  pointer-events:none;
}
.soluciones .container{ position:relative; z-index:2; }
.soluciones .section-title{ color:#fff; }
.soluciones .section-title::after{
  background:var(--celeste-luz);
  box-shadow:0 0 18px rgba(56,182,255,.6);
}
.deco-circle{ border-color:rgba(56,182,255,.5); }

.marcas{ max-width:900px; gap:24px; }
.marca{
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
}
.marca::before{ background:linear-gradient(180deg, rgba(4,17,63,.35), rgba(4,17,63,.72)); }
.marca:hover::before{ background:linear-gradient(180deg, rgba(4,17,63,.15), rgba(4,17,63,.55)); }
.marca:hover{ border-color:rgba(56,182,255,.55); }
.marca-btn{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
}
.marca:hover .marca-btn{ background:var(--celeste); border-color:var(--celeste); color:#fff; }

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   BLOQUES PROPIOS DE MEDSURGICAL
   Todo lo de arriba es compartido con Spinex y Jointex.
   Desde aquí hacia abajo, lo que sólo existe en este sitio.
   ========================================================= */

/* ---------- Texto sobre las tarjetas de solución ---------- */
.marca-txt{
  position:relative; z-index:2;
  max-width:200px;
  color:#fff;
  font-size:17px; font-weight:600; line-height:1.35;
  text-align:center;
  text-shadow:0 2px 14px rgba(0,40,70,.55);
  transition:transform .5s var(--ease-out);
}
.marca:hover .marca-txt{ transform:translateY(-4px); }

/* Frase destacada bajo un título */
.empresa-lema{
  margin:0 0 18px;
  font-size:18px; font-weight:500; font-style:italic; line-height:1.6;
  color:var(--azul-3);
}

/* ---------- Franja de especialidades de la portada ---------- */
.destacados{
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg, var(--blanco) 0%, var(--fondo-alt) 18%, var(--fondo-alt) 82%, var(--blanco) 100%);
}
.especialidades{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px;
  margin:0; padding:0; list-style:none;
  max-width:860px; margin-inline:auto;
}
.especialidades li{
  padding:11px 24px;
  border:1px solid var(--borde);
  border-radius:var(--btn-radio);
  background:var(--blanco);
  box-shadow:var(--sombra-sm);
  font-size:14px; font-weight:500;
  color:var(--azul-oscuro);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.especialidades li:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:var(--sombra-md);
}

/* ---------- Catálogo de soluciones ---------- */
.catalogo{ padding:var(--sec-pad) 0; }
.cat-intro{
  max-width:780px; margin:0 auto 54px;
  text-align:center;
  font-size:15.5px; line-height:1.9;
}
.cat-grupo{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:40px 56px;
  max-width:1000px; margin:0 auto 78px;
  scroll-margin-top:120px;   /* el título no queda bajo el menú fijo */
}
.cat-grupo:last-child{ margin-bottom:0; }
.cat-grupo:nth-child(even) .cat-foto{ order:2; }
.cat-foto{
  border-radius:var(--img-radio);
  overflow:hidden;
  background:var(--blanco);
  box-shadow:var(--sombra-md);
}
.cat-foto img{
  width:100%; aspect-ratio:4 / 3;
  object-fit:contain;
  background:var(--blanco);
  transition:transform .6s var(--ease-out);
}
.cat-grupo:hover .cat-foto img{ transform:scale(1.04); }
.cat-titulo{
  position:relative;
  margin:0 0 20px; padding-bottom:16px;
  font-size:25px; font-weight:600;
  color:var(--azul-oscuro);
}
.cat-titulo::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:54px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--azul-3), var(--azul-5));
}
.cat-txt p{ margin:0 0 16px; font-size:15px; line-height:1.9; }

/* ---------- Página de texto simple (Organización) ---------- */
.pagina-texto{ padding:var(--sec-pad) 0; }
.pagina-texto .caja{
  max-width:820px; margin:0 auto;
}
.pagina-texto p{ margin:0 0 20px; font-size:15.5px; line-height:1.95; }
.pagina-texto .destacado-cita{
  margin:34px 0;
  padding:26px 30px;
  border-left:3px solid var(--azul-4);
  border-radius:var(--radio-sm);
  background:var(--celeste-suave);
  font-size:16px; line-height:1.8;
  color:var(--azul-oscuro);
}

/* ---------- Adaptación a pantallas chicas ---------- */
@media (max-width:860px){
  .cat-grupo{ grid-template-columns:1fr; gap:26px; }
  .cat-grupo:nth-child(even) .cat-foto{ order:0; }
  .cat-titulo{ font-size:21px; }
}
@media (max-width:620px){
  .especialidades li{ padding:9px 18px; font-size:13px; }
  .marca-txt{ font-size:15px; }
}

/* Foto única del equipo, en lugar de la tira de cuatro de Spinex */
.equipo-foto{
  margin:46px auto 0;
  max-width:760px;
  border-radius:var(--img-radio);
  overflow:hidden;
  box-shadow:var(--sombra-md);
}
.equipo-foto img{ width:100%; display:block; }

/* Bajada bajo el título de "Sé parte de nuestro equipo" */
.postular-bajada{
  max-width:680px; margin:-10px auto 34px;
  text-align:center;
  font-size:15px; line-height:1.85;
  color:rgba(255,255,255,.82);
}

/* Lista de modalidades de acceso a los equipos */
.modalidades{
  margin:0 0 22px; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.modalidades li{
  position:relative;
  padding:11px 16px 11px 44px;
  border-radius:var(--radio-sm);
  background:var(--celeste-suave);
  font-size:14.5px; font-weight:500;
  color:var(--azul-oscuro);
}
.modalidades li::before{
  content:"";
  position:absolute; left:18px; top:50%;
  width:8px; height:8px; margin-top:-4px;
  border-radius:50%;
  background:var(--azul-4);
}

/* ---------- Especialidades dentro del slider ----------
   En el sitio actual van en una sola línea separadas por barras, que a ese
   tamaño cuesta leer. Aquí se reparten en etiquetas sobre la foto. */
.hero-especialidades{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px;
  max-width:760px; margin:0 auto 30px; padding:0;
  list-style:none;
}
.hero-especialidades li{
  padding:9px 20px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--btn-radio);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(3px);
  color:#fff;
  font-size:14px; font-weight:500; letter-spacing:.01em;
  text-shadow:0 1px 8px rgba(0,30,50,.4);
}

/* Titular más corto para las frases largas del slider */
.hero-title--chico{ font-size:clamp(26px, 4vw, 46px); line-height:1.2; }

@media (max-width:620px){
  .hero-especialidades li{ padding:7px 14px; font-size:12.5px; }
}

/* ---------- Variante clara de la sección de tarjetas ----------
   La portada lleva dos bloques de tarjetas seguidos: el del grupo y el de
   equipos. Si los dos van en celeste oscuro se funden en una franja
   larguísima, así que el segundo se aclara. */
.soluciones--clara{
  background:linear-gradient(180deg, var(--blanco) 0%, var(--fondo-alt) 18%, var(--fondo-alt) 82%, var(--blanco) 100%);
  --celeste:#0094d6;
}
.soluciones--clara::before{ display:none; }
.soluciones--clara .section-title{ color:var(--titulo-color); }
.soluciones--clara .deco-circle{ display:none; }

/* ---------- Barra superior ----------
   Este sitio no lleva banderas a la izquierda, sólo los botones de redes.
   Con un único elemento, space-between los empujaría al borde izquierdo,
   así que se alinean a la derecha como en Spinex.
   En móvil no aplica: ahí la barra ya se centra (ver más arriba). */
@media (min-width:601px){
  .topbar-inner{ justify-content:flex-end; }
}

/* =========================================================
   SEPARAR LOS DOS BLOQUES OSCUROS
   "Sé parte de nuestro equipo" y la franja de contacto venían
   con el mismo fondo plano y se leían como una sola mancha.
   Se separan de tres formas, todas suaves:
     1. el bloque de postulación lleva su propio degradado
     2. la franja arranca con una línea tenue
     3. un filo de luz celeste marca el corte
   ========================================================= */
.postular{
  background:linear-gradient(180deg, #073a52 0%, var(--azul-1) 100%);
}

.franja{
  border-top:1px solid rgba(255,255,255,.07);
}
.franja::after{
  content:"";
  position:absolute; top:0; left:50%;
  width:min(620px, 72%); height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--celeste-luz), transparent);
  opacity:.5;
  pointer-events:none;
}

/* ---------- Botón de pago Webpay ----------
   Va junto a los datos de contacto. El logo se muestra tal cual lo entrega
   Transbank, sin recolorear: es una marca registrada y se usa como viene. */
.boton-webpay{
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  margin-top:22px;
  padding:24px 22px;
  border:1px solid var(--borde);
  border-radius:var(--card-radio);
  background:var(--blanco);
  box-shadow:var(--sombra-card);
  text-align:center;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.boton-webpay:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:var(--sombra-card-hov);
}
.boton-webpay img{
  width:210px; height:auto;
  transition:transform .4s var(--ease-out);
}
.boton-webpay:hover img{ transform:scale(1.04); }
.boton-webpay-txt{
  font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--texto-suave);
}
.boton-webpay-pie{
  font-size:12.5px; line-height:1.6;
  color:var(--texto);
}

/* ---------- Webpay en el pie ----------
   Reemplaza al carrusel de certificaciones ISO, que no corresponde a este
   sitio. El logo va tal cual lo entrega Transbank, sin recolorear. */
.footer-col--pago{ display:flex; flex-direction:column; }
.webpay-pie{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  gap:12px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--card-radio);
  background:rgba(255,255,255,.96);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease), background .4s var(--ease);
}
.webpay-pie:hover{
  transform:translateY(-4px);
  background:#fff;
  box-shadow:0 14px 30px rgba(0,30,50,.28);
}
.webpay-pie img{ width:190px; height:auto; display:block; }
.webpay-pie span{
  font-size:11.5px; line-height:1.5;
  color:var(--texto-suave);
}