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

   Esta hoja es hermana de la de Spinex: misma estructura,
   mismos componentes y mismos nombres de variables. Lo único
   que cambia es el bloque de colores de aquí abajo.

   Eso significa que una corrección de maquetación hecha en un
   sitio se puede trasladar al otro copiando y pegando, siempre
   que no se toque :root.
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  /* ---------------------------------------------------------
     ESCALA DE ÍNDIGOS — todos los azules del sitio salen de aquí.
     Son cinco pasos del mismo tono (matiz 245-248°), sacados del
     logo de Jointex (#24214f) y del azul eléctrico que usa el
     sitio actual (#112ff0), suavizado para poder leerlo.
     --------------------------------------------------------- */
  --azul-1:        #0a0827;   /* el más oscuro: fondos de sección */
  --azul-2:        #171043;   /* títulos y fondos oscuros */
  --azul-3:        #24214f;   /* ÍNDIGO DE MARCA: es el color exacto del logo */
  --azul-4:        #2f2a7e;   /* enlaces y degradados */
  --azul-5:        #3d37ad;   /* el más claro */

  /* Acento eléctrico: uno para fondo claro y otro para fondo oscuro */
  --celeste:       #2f47e0;
  --celeste-luz:   #6f86ff;
  --celeste-suave: #eff0ff;

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

  --texto:         #4b556e;
  --texto-suave:   #6b7690;
  --gris-ic:       #eef0f9;
  --borde:         #e4e6f2;
  --fondo-alt:     #f7f8fc;
  --blanco:        #ffffff;

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

  --sombra-sm:     0 2px 10px rgba(20, 15, 80, .06);
  --sombra-md:     0 14px 34px rgba(20, 15, 80, .12);
  --sombra-lg:     0 26px 60px rgba(20, 15, 80, .18);

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

  /* ---- Enganches de tema ---- */
  --sec-pad:          96px;
  --hero-alto:        640px;
  --hero-fade:        .8s;     /* duración del deslizamiento entre diapositivas */
  --hero-zoom:        13s;     /* duración del acercamiento de la imagen */
  --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);
  --nav-bg:           linear-gradient(100deg, var(--azul-2), var(--azul-3) 45%, var(--azul-4) 100%);
  --sec-alt-bg:       linear-gradient(180deg, var(--blanco) 0%, var(--fondo-alt) 22%, var(--fondo-alt) 78%, var(--blanco) 100%);
  --franja-bg:        linear-gradient(115deg, #2b2660 0%, #24214f 55%, #1a1640 100%);
  --footer-bg:        linear-gradient(115deg, var(--azul-5) 0%, var(--azul-4) 38%, var(--azul-2) 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 JOINTEX
   Todo lo de arriba es compartido con Spinex. Desde aquí hacia
   abajo están los componentes que sólo existen en este sitio:
   la cirugía de cadera, el catálogo de implantes y la página
   para el paciente.
   ========================================================= */

/* ---------- Barra superior: grupo de empresas ---------- */
.topbar-grupo{
  margin:0;
  font-size:12px; letter-spacing:.02em;
  color:var(--texto-suave);
}
.topbar-grupo a{
  color:var(--azul-4);
  font-weight:500;
}
.topbar-grupo a:hover{ color:var(--celeste); }
.topbar-grupo span{ margin:0 4px; color:var(--borde); }

/* ---------- 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(8,6,40,.5);
  transition:transform .5s var(--ease-out);
}
.marca:hover .marca-txt{ transform:translateY(-4px); }

/* =========================================================
   DESTACADOS — las tres nociones clave de la portada
   ========================================================= */
/* Ojo: --sec-alt-bg en este diseño es un degradado OSCURO (el que usa la
   sección de soluciones). Aquí queremos lo contrario: una banda clara que
   deje descansar la vista entre el slider y el bloque de valores. */
.destacados{
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg, var(--blanco) 0%, var(--fondo-alt) 18%, var(--fondo-alt) 82%, var(--blanco) 100%);
}
.destacados-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.destacado{
  display:flex; flex-direction:column;
  padding:34px 30px 30px;
  border:1px solid var(--borde);
  border-radius:var(--card-radio);
  background:var(--blanco);
  box-shadow:var(--sombra-card);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.destacado:hover{
  transform:translateY(-8px);
  border-color:transparent;
  box-shadow:var(--sombra-card-hov);
}
.destacado h3{
  margin:0 0 14px;
  font-size:18px; font-weight:600; line-height:1.4;
  color:var(--azul-oscuro);
}
.destacado p{
  margin:0 0 22px;
  font-size:var(--parrafo-size); line-height:1.8;
  color:var(--texto);
}
.destacado strong{ color:var(--azul-4); font-weight:600; }
.destacado-btn{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--celeste);
  transition:gap .35s var(--ease-out);
}
.destacado-btn::after{
  content:"";
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-top:1.5px solid currentColor;
  transform:rotate(45deg);
}
.destacado:hover .destacado-btn{ gap:13px; }

/* Frase destacada dentro del bloque de valores */
.empresa-lema{
  margin:0 0 18px;
  font-size:19px; font-weight:500; font-style:italic; line-height:1.6;
  color:var(--azul-4);
}

/* =========================================================
   DATOS ÚTILES — seis accesos con icono
   ========================================================= */
.datos{ padding:var(--sec-pad) 0; }
.datos-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.dato{
  display:flex; align-items:center; gap:18px;
  padding:22px 24px;
  border:1px solid var(--borde);
  border-radius:var(--card-radio);
  background:var(--blanco);
  box-shadow:var(--sombra-card);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease), background .4s var(--ease);
}
.dato:hover{
  transform:translateY(-5px);
  box-shadow:var(--sombra-card-hov);
  background:linear-gradient(115deg, var(--blanco), var(--celeste-suave));
}
.dato-ic{
  flex:0 0 58px;
  display:grid; place-items:center;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--celeste-suave);
  transition:transform .5s var(--ease-out);
}
.dato-ic img{ width:30px; height:30px; }
.dato:hover .dato-ic{ transform:scale(1.08) rotate(-4deg); }
.dato-txt{
  font-size:14.5px; font-weight:500; line-height:1.5;
  color:var(--azul-oscuro);
}

/* =========================================================
   CATÁLOGO DE IMPLANTES (Soluciones Terapéuticas)
   ========================================================= */
.catalogo{ padding:var(--sec-pad) 0; }
.cat-intro{
  max-width:780px; margin:0 auto 60px;
  text-align:center;
  font-size:15.5px; line-height:1.9;
}
.cat-grupo{ margin-bottom:64px; }
.cat-grupo:last-child{ margin-bottom:0; }
.cat-grupo-titulo{
  margin:0 0 8px;
  font-size:21px; font-weight:600;
  color:var(--azul-oscuro);
}
.cat-grupo-bajada{
  margin:0 0 30px;
  font-size:13.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--celeste);
  font-weight:600;
}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.cat-item{
  display:flex; flex-direction:column; align-items:center;
  padding:26px 20px 22px;
  border:1px solid var(--borde);
  border-radius:var(--card-radio);
  background:var(--blanco);
  box-shadow:var(--sombra-card);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.cat-item:hover{ transform:translateY(-7px); box-shadow:var(--sombra-card-hov); }
.cat-item-img{
  display:grid; place-items:center;
  width:100%; aspect-ratio:1 / 1;
  margin-bottom:16px;
  border-radius:var(--img-radio);
  background:var(--blanco);
  overflow:hidden;
}
.cat-item-img img{
  width:78%; height:78%;
  object-fit:contain;
  transition:transform .55s var(--ease-out);
}
.cat-item:hover .cat-item-img img{ transform:scale(1.08); }
.cat-item-nombre{
  margin:0 0 4px;
  font-size:15px; font-weight:600; text-align:center;
  color:var(--azul-oscuro);
}
.cat-item-tipo{
  margin:0;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--texto-suave);
  text-align:center;
}

/* =========================================================
   INFORMACIÓN AL PACIENTE — página larga de lectura
   ========================================================= */
.paciente{ padding:var(--sec-pad) 0; }
.pac-intro{
  max-width:760px; margin:0 auto 70px;
  text-align:center;
  font-size:16px; line-height:1.9;
}
.pac-bloque{
  max-width:840px; margin:0 auto 70px;
  scroll-margin-top:120px;   /* para que el título no quede bajo el menú fijo */
}
.pac-bloque:last-child{ margin-bottom:0; }
.pac-titulo{
  position:relative;
  margin:0 0 26px; padding-bottom:16px;
  font-size:25px; font-weight:600;
  color:var(--azul-oscuro);
}
.pac-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));
}
.pac-bloque p{ margin:0 0 18px; font-size:15px; line-height:1.9; }
.pac-sub{
  margin:30px 0 14px;
  font-size:17px; font-weight:600;
  color:var(--azul-4);
}

/* Lista numerada con el número dentro de un círculo */
.pac-lista{ margin:0 0 20px; padding:0; list-style:none; counter-reset:pac; }
.pac-lista li{
  position:relative;
  margin-bottom:13px; padding-left:44px;
  font-size:15px; line-height:1.8;
  counter-increment:pac;
}
.pac-lista li::before{
  content:counter(pac);
  position:absolute; left:0; top:2px;
  display:grid; place-items:center;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--celeste-suave);
  color:var(--azul-4);
  font-size:12.5px; font-weight:600;
}

/* Tarjetas para riesgos, causas y cuidados */
.pac-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  margin:26px 0 10px;
}
.pac-card{
  padding:24px 26px;
  border-left:3px solid var(--celeste);
  border-radius:var(--radio-sm);
  background:var(--fondo-alt);
}
.pac-card h4{
  margin:0 0 9px;
  font-size:15.5px; font-weight:600;
  color:var(--azul-oscuro);
}
.pac-card p{ margin:0; font-size:14px; line-height:1.8; }

/* Aviso de que esto no reemplaza al médico */
.pac-aviso{
  max-width:840px; margin:0 auto;
  padding:22px 26px;
  border:1px dashed var(--borde);
  border-radius:var(--card-radio);
  background:var(--celeste-suave);
  font-size:13.5px; line-height:1.8;
  color:var(--texto);
}
.pac-aviso strong{ color:var(--azul-oscuro); }

/* ---------- Adaptación a pantallas chicas ---------- */
@media (max-width:980px){
  .destacados-grid,
  .datos-grid{ grid-template-columns:repeat(2, 1fr); }
  .cat-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:760px){
  .topbar-grupo{ font-size:11px; }
  .destacados-grid,
  .datos-grid,
  .pac-cards{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(2, 1fr); }
  .pac-titulo{ font-size:21px; }
  .pac-intro{ font-size:15px; }
  .marca-txt{ font-size:15px; }
}
@media (max-width:460px){
  .cat-grid{ grid-template-columns:1fr; }
  .dato{ padding:18px; gap:14px; }
}

/* =========================================================
   BLOG Y NOTICIAS
   Reutiliza la maqueta de lectura de la página del paciente
   (.paciente / .pac-bloque) y sólo agrega la fecha y la figura.
   ========================================================= */
.blog-fecha{
  margin:0 0 6px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--celeste);
}
.blog-figura{
  margin:30px 0 6px;
  padding:22px;
  border:1px solid var(--borde);
  border-radius:var(--card-radio);
  background:var(--fondo-alt);
}
.blog-figura img{ width:100%; border-radius:var(--radio-sm); }
.blog-figura figcaption{
  margin-top:14px;
  font-size:13px; line-height:1.7; text-align:center;
  color:var(--texto-suave);
}
.pac-aviso a{ color:var(--celeste); font-weight:600; }