/* Tarjetas de vidrio del hero + tarjetas claras de las secciones */

.card-rail {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
  justify-content: flex-end;
  /* Crece hacia la IZQUIERDA, no hacia la derecha. Sangrando por la derecha la
     segunda tarjeta se salia del escenario y quedaba cortada por el borde de
     la ventana; asi el par entero queda dentro, alineado al margen derecho. */
  margin-left: calc(var(--gutter) * -2);
  margin-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

.glass-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  width: clamp(184px, 15vw, 224px);
  min-height: 196px;
  padding: var(--space-6) var(--space-6) var(--space-4);
  overflow: hidden;
  text-align: left;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    background-color var(--duration-normal) ease;
}

.glass-card:hover {
  transform: translate3d(0, -8px, 0);
  background: oklch(52% 0.12 250 / 0.46);
}

/* Glifo decorativo que sangra por la esquina, como el thumb del original */
.glass-card__glyph {
  position: absolute;
  right: -14%;
  bottom: -18%;
  width: 62%;
  z-index: 0;
  color: oklch(100% 0 0 / 0.16);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.glass-card:hover .glass-card__glyph {
  transform: translate3d(0, -6px, 0) scale(1.06);
}

.glass-card__body {
  position: relative;
  z-index: 1;
  max-width: 13ch;
}

.glass-card__title {
  font-size: var(--text-card);
  font-weight: 800;
  line-height: 1.1;
}

.glass-card__text {
  margin-top: 0.5em;
  font-size: var(--text-sm);
  color: var(--color-cream-soft);
}

.glass-card__go {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 0.55em 1.5em;
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    transform var(--duration-fast) var(--ease-spring),
    background-color var(--duration-fast) ease;
}

.glass-card__go:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: translate3d(0, -2px, 0);
}

/* --- Tarjetas de servicio ---
   Formato fila: el icono a un lado y el texto al otro. En columnas estrechas
   los titulos largos se partian con guion ("Electrocardio-grama"); asi el
   titulo dispone de todo el ancho util y cabe entero. */
.tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-body-text);
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    border-color var(--duration-fast) ease;
}

.tile:hover {
  transform: translate3d(0, -6px, 0);
  border-color: oklch(67.4% 0.145 236.1 / 0.5);
  box-shadow: var(--shadow-lift);
}

/* Halo celeste que aparece al pasar el cursor */
.tile::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(67.4% 0.145 236.1 / 0.3), transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-expo);
}

.tile:hover::before {
  opacity: 1;
}

.tile__icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: oklch(67.4% 0.145 236.1 / 0.16);
  color: var(--color-ink);
  transition: transform var(--duration-normal) var(--ease-spring);
}

.tile:hover .tile__icon {
  transform: scale(1.08);
}

.tile__title {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-wrap: balance;
  /* Sin hyphens: con el titulo a todo el ancho ya no hace falta partir, y el
     guion automatico rompia "Consulta medi-cina" sin necesidad. */
  overflow-wrap: break-word;
}

.tile__text {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  font-size: var(--text-sm);
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* El enlace global no lleva color ni subrayado propio. Dentro del cuerpo de una
   tarjeta hay que devolverselos: los correos y epssura.com se estaban leyendo
   como texto corriente y no habia forma de saber que se podia hacer clic. */
.tile__text a {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.tile__text a:hover {
  text-decoration-thickness: 2px;
}

.tile__meta {
  position: relative;
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  align-self: end;
  gap: 6px;
  padding-top: var(--space-4);
}

.tag {
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  border: 1px solid oklch(37.8% 0.182 262.5 / 0.16);
  color: var(--color-ink);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--accent {
  border-color: transparent;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Cierra la rejilla: 13 servicios dejan una tarjeta huerfana en la ultima
   fila de tres, y esta ocupa las dos celdas que sobran. */
.tile--cta {
  grid-column: span 2;
  border-style: dashed;
  border-color: oklch(67.4% 0.145 236.1 / 0.45);
  background: transparent;
}

.tile--cta .tile__icon {
  background: oklch(67.4% 0.145 236.1 / 0.16);
}

.tile__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tile__link svg {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.tile--cta:hover .tile__link svg {
  transform: translate3d(5px, 0, 0);
}

/* En columna estrecha el icono encima ocupa menos que a un lado */
@media (max-width: 520px) {
  .tile {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile--cta {
    grid-column: auto;
  }

  .tile__icon,
  .tile__title,
  .tile__text,
  .tile__meta {
    grid-column: 1;
  }

  .tile__icon {
    grid-row: auto;
  }

  .tile__title,
  .tile__text,
  .tile__meta {
    grid-row: auto;
  }
}

@media (max-width: 1160px) {
  .card-rail {
    /* Apilado el carril se desliza a lo ancho: sin anular la sangria de
       escritorio, la primera tarjeta arrancaria fuera de la pantalla. */
    margin-left: 0;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .glass-card {
    flex: none;
    width: min(72vw, 250px);
    scroll-snap-align: start;
  }
}