/* ============================================================
   Artmedica — Portada (/)

   La puerta de la calle: presenta a Artmedica y lleva a las dos
   entradas, la del equipo y la de pacientes.

   NO hereda de login.css. Aquella monta una retícula de dos
   columnas a pantalla completa para una puerta con formulario;
   esto es una página que se recorre. Comparten tokens.css, que
   es donde vive la identidad, y nada más. Por eso aquí abajo hay
   un reset propio: son veinte líneas y evitan que un retoque en
   la pantalla de ingreso mueva la portada sin querer.

   TODO LO QUE SE MUEVE LO MUEVE CSS. La página no lleva ni una
   línea de JavaScript —ver la nota de index.html— y todas las
   animaciones se apagan con prefers-reduced-motion.
   ============================================================ */

/* ---------- 0. Lo que tokens.css no tiene ----------
   El rosa es de la identidad de artmedica.com.co (se usa en el
   sitio corporativo) pero no está en tokens.css, y no se añade
   allí: tokens.css lo cargan las quince pantallas del panel y
   cambiarlo obliga a resellarlas todas. Aquí vive el acento de
   esta página; el día que lo use una segunda, sube a tokens. */
:root {
  --acento: #cc3366;
  /* Los dos extremos oscuros del degradado corporativo, los mismos
     que ya usa --grad-panel en tokens.css. */
  --noche: #0b1030;
  --noche-media: #171d47;
}

/* ---------- 1. Reset acotado ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-600);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.022em; }

ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sobre el fondo oscuro, un foco azul marino no se ve. */
.heroe :focus-visible,
.barra :focus-visible,
.pie :focus-visible {
  outline-color: #a9b6ff;
}

/* ---------- 2. Salto al contenido ----------
   Primer elemento tabulable de la página: quien navega con
   teclado llega al acceso sin recorrer la portada entera. */
.saltar {
  position: absolute;
  left: -9999px;
  z-index: 10;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-field) 0;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 600;
}
.saltar:focus {
  left: 0;
  top: 0;
  text-decoration: none;
}

/* ============================================================
   3. Cabecera
   ============================================================ */
.barra {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px clamp(20px, 5vw, 64px);
}

.barra__marca img { width: 196px; height: auto; }
.barra__marca:hover { text-decoration: none; }

.barra__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-size: 0.9375rem;
}

.barra__nav a {
  color: rgba(255, 255, 255, 0.82);
  padding-block: 8px;
}
.barra__nav a:hover { color: #fff; text-decoration: none; }

/* La entrada de pacientes se marca: es la que menos gente conoce
   y la que mas falta hace senalar. */
.barra__cta {
  padding: 9px 19px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.barra__cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   4. Portada
   ============================================================ */
.heroe {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(140px, 17vh, 190px) clamp(20px, 5vw, 64px) clamp(72px, 9vw, 104px);
  background:
    radial-gradient(120% 90% at 78% 8%, #2c3260 0%, rgba(44, 50, 96, 0) 58%),
    linear-gradient(158deg, var(--noche) 0%, var(--noche-media) 48%, #2a3163 100%);
  color: #fff;
}

/* La malla de datos, a sangre y por detras de todo. */
.heroe__malla {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /* Se desvanece hacia abajo para que no compita con el texto. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
}

.heroe__nodos circle { opacity: 0.85; }

/* Tres nodos que laten, con el anillo creciendo hacia fuera.
   Desfasados para que no parezcan un metronomo. */
.heroe__pulsos circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: latido 3.6s ease-out infinite;
}
.heroe__pulsos circle:nth-child(2) { animation-delay: 1.2s; }
.heroe__pulsos circle:nth-child(3) { animation-delay: 2.4s; }

@keyframes latido {
  0%   { transform: scale(1);   opacity: 0.85; stroke-width: 2; }
  70%  { transform: scale(5.5); opacity: 0;    stroke-width: 0.6; }
  100% { transform: scale(5.5); opacity: 0;    stroke-width: 0.6; }
}

.heroe__brillo {
  position: absolute;
  top: -180px;
  left: -140px;
  z-index: -1;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 97, 230, 0.38) 0%, rgba(77, 97, 230, 0) 68%);
  pointer-events: none;
}

.heroe__dentro {
  max-width: 1120px;
  margin-inline: auto;
}

/* ---------- Etiqueta ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
}

.etiqueta__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 3px rgba(204, 51, 102, 0.22);
}

/* ---------- Titular ---------- */
.heroe__titular {
  margin: 0 0 22px;
  max-width: 17ch;
  font-weight: 600;
  font-size: clamp(2.2rem, 5.6vw, 4.1rem);
  line-height: 1.04;
  color: #fff;
}
.heroe__titular em {
  font-style: normal;
  background: linear-gradient(96deg, #a9b6ff 0%, #ff8fb4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heroe__lede {
  margin: 0 0 40px;
  max-width: 58ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
}

/* ---------- Las dos puertas ---------- */
.puertas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 16px;
  max-width: 880px;
  margin-bottom: 52px;
}

.puerta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 19px 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease,
              transform 0.14s ease, box-shadow 0.25s ease;
}
.puerta:hover {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.85);
  text-decoration: none;
}
.puerta:active { transform: translateY(0); }

.puerta__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.18s ease, color 0.18s ease;
}
.puerta--equipo .puerta__icono { color: #a9b6ff; }
.puerta--paciente .puerta__icono { color: #ff9dbb; }
.puerta--equipo:hover .puerta__icono { background: var(--brand-blue); color: #fff; }
.puerta--paciente:hover .puerta__icono { background: var(--acento); color: #fff; }

.puerta__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;   /* sin esto el texto largo estira la tarjeta */
}

.puerta__que {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: #fff;
}

.puerta__como {
  font-size: 0.8125rem;
  line-height: 1.45;
}

.puerta__flecha {
  flex: none;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.18s ease, transform 0.18s ease;
}
.puerta:hover .puerta__flecha {
  color: #fff;
  transform: translateX(4px);
}

/* ---------- Cifras ---------- */
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(32px, 6vw, 68px);
  margin: 0;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cifras dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.cifras dd {
  margin: 5px 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ============================================================
   5. Bloques de contenido
   ============================================================ */
.bloque {
  padding: clamp(64px, 9vw, 104px) clamp(20px, 5vw, 64px);
}

.bloque--tecnologia {
  background: var(--surface);
}

.bloque--claro {
  background: linear-gradient(180deg, var(--surface-tint) 0%, var(--surface) 100%);
}

.bloque--sedes {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
}

.bloque__antetitulo,
.bloque__titulo,
.bloque__lede {
  max-width: 1120px;
  margin-inline: auto;
}

.bloque__antetitulo {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.bloque__titulo {
  margin: 0 0 16px;
  max-width: 20ch;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.14;
  color: var(--brand-navy);
}

.bloque__lede {
  margin: 0 0 44px;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--ink-450);
}
.bloque__titulo + .rejilla { margin-top: 44px; }

/* ---------- Rejillas ---------- */
.rejilla {
  display: grid;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
}

/* 250 y no 270: son CUATRO tarjetas y a 270 no caben en los 1120 del
   contenedor —4x270 + 3x18 de hueco son 1134— asi que la cuarta bajaba
   sola a una segunda fila. Catorce pixeles de diferencia. */
.rejilla--tec { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* SEIS pilares, asi que 300px para que salgan TRES columnas y dos filas
   llenas. A 240 entraban cuatro y la segunda fila quedaba coja, con dos
   sueltos y medio bloque vacio. El hueco vertical es mayor que el
   horizontal: sin caja que los separe, es lo unico que agrupa cada
   pilar con su propio texto. */
.rejilla--pilares {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 30px 24px;
}

/* ---------- Tarjeta de tecnología ----------
   El filo superior de color aparece al pasar por encima. Es la
   única floritura de la sección y se apaga sola sin movimiento. */
.tarjeta {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-blue), var(--acento));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.tarjeta:hover {
  border-color: var(--border-strong);
  box-shadow: 0 20px 42px -30px rgba(58, 65, 112, 0.6);
  transform: translateY(-3px);
}
.tarjeta:hover::before { transform: scaleX(1); }

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: var(--surface-sunken);
  color: var(--brand-blue);
}

.tarjeta h3 {
  margin: 0 0 9px;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--brand-navy);
}

.tarjeta p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink-450);
}

/* ---------- Pilares ----------
   Sin caja: una raya a la izquierda basta y deja respirar la
   sección después de cuatro tarjetas seguidas. */
.rejilla--pilares li {
  padding-left: 18px;
  border-left: 2px solid var(--border-strong);
  transition: border-color 0.2s ease;
}
.rejilla--pilares li:hover { border-left-color: var(--brand-blue); }

.rejilla--pilares h3 {
  margin: 0 0 7px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-navy);
}
.rejilla--pilares p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-450);
}

/* ---------- Sedes ---------- */
.sedes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
}

.sedes li {
  padding: 9px 17px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.9375rem;
  color: var(--brand-navy);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.sedes li:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

/* ============================================================
   6. Pie
   ============================================================ */
.pie {
  padding: clamp(56px, 7vw, 76px) clamp(20px, 5vw, 64px) 30px;
  background: linear-gradient(162deg, var(--noche) 0%, var(--noche-media) 100%);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.875rem;
}

.pie__dentro {
  display: grid;
  grid-template-columns: minmax(min(100%, 240px), 1.5fr) repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 38px clamp(24px, 4vw, 52px);
  max-width: 1120px;
  margin: 0 auto 44px;
}

.pie__marca img { width: 186px; height: auto; margin-bottom: 18px; }
.pie__marca p {
  margin: 0;
  max-width: 34ch;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
}

/* h2 por el orden de encabezados de la página, no por el tamaño:
   el tamaño lo pone esta regla. */
.pie__columna h2 {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.pie__columna ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie a { color: rgba(255, 255, 255, 0.66); }
.pie a:hover { color: #fff; }

/* El rótulo del contacto: apagado, para que el número mande. */
.pie__rotulo {
  display: block;
  margin-bottom: 2px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.42);
}

/* Un número de teléfono NO se parte nunca. El correo sí puede, que es
   por lo que esto no vale para todos los enlaces del pie. */
.pie__numero { white-space: nowrap; }

.pie__raya {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.52);
}

.pie__aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  max-width: 68ch;
  line-height: 1.55;
}
.pie__aviso svg { flex: none; margin-top: 2px; color: var(--success); }

.pie__copia { margin: 0; }

/* ============================================================
   7. Pantallas pequeñas
   ============================================================ */
/* EL PIE SE CORTA A MANO Y NO CON auto-fit, y el corte es a 900 y no a
   720 como el resto. Las otras rejillas se apañan solas con
   minmax(min(100%, X), 1fr), pero esta lleva una pista fija DELANTE del
   repeat: auto-fit solo reparte lo que sobra despues de esa pista y no
   puede bajar de su minimo, asi que la ultima columna se salia por el
   borde. Se veia a 768 —entre dos cortes— y a 320. Medido en los dos. */
@media (max-width: 900px) {
  .pie__dentro { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .barra { padding: 18px 20px; }
  .barra__marca img { width: 152px; }
  /* El enlace del equipo sobra arriba: esta a un dedo en la
     tarjeta, y en 360px la barra no da para las dos cosas. */
  .barra__nav a:not(.barra__cta) { display: none; }
  .barra__cta { padding: 8px 15px; font-size: 0.875rem; }

  .heroe { padding-top: 118px; }
  .heroe__titular { max-width: none; }

  /* La malla lleva `slice`: en una pantalla estrecha y alta recorta el
     dibujo de 1200x700 y lo amplia, asi que las mismas lineas pasan de
     fondo a trazos gruesos cruzando el texto. Bajarla deja el degradado
     y el brillo llevando el peso, que es lo que se ve bien en un movil. */
  .heroe__malla { opacity: 0.45; }

  .puerta__flecha { display: none; }
  .cifras { gap: 16px 30px; }
}

@media (max-width: 480px) {
  /* A dos columnas, «WhatsApp nacional» y «Política de privacidad» ya no
     caben sin partirse feo. Una sola columna. */
  .pie__dentro { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 420px) {
  .puerta { padding: 16px; gap: 13px; }
  .etiqueta { font-size: 0.75rem; }
}

/* ============================================================
   8. Preferencias de accesibilidad
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* El latido se detiene en su primer fotograma, que es un punto
     quieto: sin esto se quedaria congelado a mitad de expansion,
     como un anillo suelto que nadie entiende. */
  .heroe__pulsos circle { animation: none; opacity: 0; }
}

@media (prefers-contrast: more) {
  .heroe__lede { color: rgba(255, 255, 255, 0.94); }
  .puerta__como { color: rgba(255, 255, 255, 0.9); }
  .bloque__lede, .tarjeta p, .rejilla--pilares p { color: var(--ink-600); }
  .pie, .pie a { color: rgba(255, 255, 255, 0.88); }
}