/* ==========================================================================
   Medicald Inversiones — "ficha tecnica clinica"
   Una sola tipografia (Bai Jamjuree) y dos superficies: tinta (identidad) y
   papel (informacion). La jerarquia la dan el peso, el espaciado y la escala,
   no el cambio de familia.
   ========================================================================== */
:root{
  --tinta:#0B1F38;        /* azul casi negro: el panel de identidad          */
  --tinta-alta:#10294A;   /* un paso mas claro, para degradados             */
  --azul:#3C78BE;         /* el azul del logo: filos y acentos graficos     */
  --azul-texto:#2F62A0;   /* el mismo azul, oscurecido hasta pasar AA       */
  --azul-claro:#8FB6E2;
  --papel:#F2F5F8;        /* blanco frio, de sala clinica                   */
  --papel-puro:#FFFFFF;
  --grafito:#3A424D;      /* texto principal sobre papel                    */
  --gris:#69737F;         /* texto secundario                               */
  /* Las etiquetas van a 10-11px: este gris es lo mas tenue que todavia
     alcanza 4.5:1 sobre el papel. Aclararlo las vuelve ilegibles. */
  --gris-tenue:#646E7B;
  --linea:#DDE4EB;

  --tipo:'Bai Jamjuree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --paso:clamp(1.5rem,3.2vw,3.25rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--papel);
  color:var(--grafito);
  font-family:var(--tipo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Grano tenue sobre todo el documento: le quita el plano digital perfecto  */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");
}

.lamina{
  display:grid;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  min-height:100vh;
}

/* ---------- Panel de identidad (tinta) ---------------------------------- */
.identidad{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:var(--paso);
  color:#fff;
  isolation:isolate;
  /* Gradiente lateral en capas: una base que corre en diagonal y tres focos de
     luz que se solapan. Las capas se superponen con distinta escala y opacidad
     para que la superficie tenga profundidad y no se lea como un degradado
     plano de dos paradas. */
  background:
    radial-gradient(115% 85% at 92% 12%,rgba(60,120,190,.58),transparent 60%),
    radial-gradient(95% 75% at 4% 92%,rgba(26,84,153,.50),transparent 66%),
    radial-gradient(55% 48% at 58% 55%,rgba(143,182,226,.13),transparent 72%),
    linear-gradient(104deg,#05111E 0%,#0A1E36 40%,#0F2C52 74%,#143A6B 100%);
}
/* Velo de luz diagonal que cruza el panel, muy tenue, en deriva lenta */
.identidad::before{
  content:'';
  position:absolute;
  inset:-30% -20%;
  z-index:-2;
  background:linear-gradient(76deg,
    transparent 32%,
    rgba(143,182,226,.13) 47%,
    rgba(143,182,226,.04) 55%,
    transparent 68%);
  animation:deriva 22s ease-in-out infinite alternate;
}
@keyframes deriva{
  from{transform:translate3d(-4%,-2%,0) rotate(-1.5deg)}
  to{transform:translate3d(5%,3%,0) rotate(1.5deg)}
}
/* Filo de luz en la costura entre la tinta y el papel */
.identidad::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom,
    transparent,
    rgba(143,182,226,.55) 26%,
    rgba(143,182,226,.18) 68%,
    transparent);
}
/* La M de la marca, enorme y sangrada por el borde derecho */
.marca-agua{
  position:absolute;
  z-index:-1;
  right:-12%;
  bottom:16%;
  width:min(62%,330px);
  opacity:.07;
  pointer-events:none;
  user-select:none;
}

.identidad-cabeza{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  justify-content:space-between;
}
.sello{
  font-family:var(--tipo);
  font-size:.6875rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  /* Aclarado respecto al azul de marca: el gradiente llega a rgb(41,86,141)
     en su punto mas luminoso y a 11px hay que pasar 4.5:1 tambien ahi. */
  color:#C4D9F0;
  white-space:nowrap;
}
/* Marcas de calibracion, como las de un instrumento */
.calibracion{
  display:flex;
  gap:5px;
  align-items:flex-end;
  height:15px;
}
.calibracion i{
  display:block;
  width:1px;
  height:6px;
  background:rgba(143,182,226,.55);
}
.calibracion i:nth-child(4n+1){height:14px;background:var(--azul-claro)}

.identidad-centro{padding:var(--paso) 0}
.logo-blanco{
  display:block;
  width:100%;
  max-width:340px;
  height:auto;
}
.lema{
  margin:1.75rem 0 0;
  max-width:26ch;
  font-size:clamp(1.0625rem,1.45vw,1.3125rem);
  font-weight:300;
  line-height:1.55;
  color:#C9D8EA;
}
.lema b{
  font-weight:500;
  color:#fff;
  box-shadow:inset 0 -.35em 0 rgba(60,120,190,.42);
}

.identidad-pie{position:relative}
/* Trazo de pulso: se dibuja en bucle, como un monitor en reposo */
.pulso{
  display:block;
  width:100%;
  height:46px;
  margin-bottom:1.1rem;
  overflow:visible;
}
.pulso path{
  fill:none;
  stroke:var(--azul-claro);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.5;
}
.pulso .vivo{
  stroke:#fff;
  stroke-width:1.75;
  opacity:1;
  stroke-dasharray:150 1050;
  animation:latido 5.5s linear infinite;
  filter:drop-shadow(0 0 5px rgba(143,182,226,.85));
}
@keyframes latido{
  from{stroke-dashoffset:1200}
  to{stroke-dashoffset:0}
}
.ubicacion{
  margin:0;
  font-family:var(--tipo);
  font-size:.6875rem;
  line-height:1.85;
  letter-spacing:.055em;
  color:#BECFE2;
}
.ubicacion span{color:#DCE8F5}

/* ---------- Panel de informacion (papel) -------------------------------- */
.ficha{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1.75rem,3vw,2.75rem);
  padding:calc(var(--paso) * 1.35) clamp(1.5rem,4.4vw,4.5rem);
  background:
    linear-gradient(100deg,rgba(60,120,190,.10) 0%,rgba(60,120,190,.02) 26%,transparent 46%),
    radial-gradient(65% 50% at 100% 0%,rgba(60,120,190,.08),transparent 72%),
    var(--papel);
}

.rotulo{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:0 0 1.35rem;
  font-family:var(--tipo);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--azul-texto);
}
.rotulo::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(to right,var(--linea),transparent);
}

.semblanza{
  margin:0;
  max-width:60ch;
  font-size:clamp(1.0625rem,1.32vw,1.25rem);
  font-weight:300;
  line-height:1.78;
  color:var(--grafito);
  text-wrap:pretty;
}
.semblanza strong{
  font-weight:500;
  color:var(--tinta);
}

.canales{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--linea);
}
.canal{
  position:relative;
  display:grid;
  grid-template-columns:minmax(6.5rem,auto) 1fr auto;
  align-items:center;
  gap:clamp(.85rem,2vw,1.75rem);
  padding:1.05rem .35rem 1.05rem .75rem;
  border-bottom:1px solid var(--linea);
  color:var(--grafito);
  text-decoration:none;
  transition:background-color .28s ease,padding-left .28s ease,color .28s ease;
}
/* Filo azul que crece desde la izquierda al pasar el cursor */
.canal::before{
  content:'';
  position:absolute;
  left:0;
  top:-1px;
  bottom:-1px;
  width:2px;
  background:var(--azul);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .28s ease;
}
.canal:hover,
.canal:focus-visible{
  background:var(--papel-puro);
  padding-left:1.35rem;
  color:var(--tinta);
}
.canal:hover::before,
.canal:focus-visible::before{transform:scaleY(1)}
.canal:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}

.canal-tipo{
  font-family:var(--tipo);
  font-size:.625rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--gris-tenue);
  transition:color .28s ease;
}
.canal:hover .canal-tipo,
.canal:focus-visible .canal-tipo{color:var(--azul-texto)}

.canal-dato{
  font-family:var(--tipo);
  font-size:clamp(.875rem,1.05vw,.9688rem);
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}

.canal-flecha{
  width:15px;
  height:15px;
  flex:none;
  color:var(--gris-tenue);
  transition:transform .28s ease,color .28s ease;
}
.canal:hover .canal-flecha,
.canal:focus-visible .canal-flecha{
  transform:translateX(5px);
  color:var(--azul-texto);
}

.rubrica{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:0;
  font-family:var(--tipo);
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris-tenue);
}
.separador-pie{color:var(--linea)}
.credito a{
  color:var(--gris-tenue);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .22s ease,border-color .22s ease;
}
.credito a:hover,
.credito a:focus-visible{
  color:var(--azul-texto);
  border-bottom-color:var(--azul-texto);
}
.credito a:focus-visible{outline:2px solid var(--azul);outline-offset:3px}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Entrada escalonada ------------------------------------------ */
/* El retardo se declara por elemento con --d: contarlos con nth-child falla,
   porque la marca de agua tambien es hija del panel y corre la numeracion. */
.revela{
  opacity:0;
  transform:translateY(14px);
  animation:emerge .85s cubic-bezier(.22,.68,.36,1) var(--d,0s) forwards;
}
@keyframes emerge{
  to{opacity:1;transform:none}
}

/* ---------- Adaptacion a pantallas angostas ----------------------------- */
@media (max-width:900px){
  .lamina{grid-template-columns:1fr}
  .identidad{
    min-height:auto;
    padding:clamp(1.5rem,6vw,2.5rem);
    gap:1.75rem;
  }
  .identidad-centro{padding:1.5rem 0 .5rem}
  .logo-blanco{max-width:270px}
  .lema{max-width:38ch}
  .marca-agua{right:-24%;bottom:auto;top:6%;width:64%}
  .pulso{height:34px;margin-bottom:.85rem}
  .ficha{
    justify-content:flex-start;
    padding:clamp(2rem,7vw,3rem) clamp(1.25rem,6vw,2.5rem) clamp(2.5rem,8vw,3.5rem);
  }
}
@media (max-width:520px){
  .canal{
    grid-template-columns:1fr auto;
    row-gap:.3rem;
    padding-block:.95rem;
  }
  .canal-tipo{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  .revela{animation:none;opacity:1;transform:none}
  .pulso .vivo{animation:none;stroke-dasharray:none;opacity:.85}
  .identidad::before{animation:none;transform:none}
  .canal,.canal::before,.canal-flecha,.canal-tipo,.credito a{transition:none}
  .canal:hover,.canal:focus-visible{padding-left:.75rem}
}