/* ================== SERVICIOS (servicios.html) ================== */
/* Solo lo propio de esta página. Lo común (tipografía, colores, navbar, formulario,
   mapa, footer y WhatsApp) está en general.css, que se carga antes. */

/* ======= SECCIÓN TRATAMIENTOS CIRCULARES ======= */

.tratamientos-circulares {
  padding: 100px 20px 60px; /* 100px arriba: el título no queda debajo del navbar fijo */
  background: #ffffff;
  font-family: var(--fuente);
}

.tc-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.tc-container h1 {
  font-size: 32px;
  color: #111827;
  margin-bottom: 10px;
}

.tc-container h1 span {
  font-weight: 700;
}

.tc-subtitle {
  max-width: 600px;
  margin: 0 auto 60px;
  font-size: 15px;
  color: #6b7280;
}

/* Círculo principal */
.tc-circle-wrapper {
  display: flex;
  justify-content: center;
}

.tc-circle {
  position: relative;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  margin: 0 auto;
  background: radial-gradient(circle at center, #ffffff 45%, #f9fafb 100%);
}

/* Imagen central */
.tc-center {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.tc-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Items alrededor */
.tc-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  width: 140px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: all 0.25s ease;
}

/* Estado activo / hover */
.tc-item:hover {
  background: #0ea5e9;
  color: #ffffff;
  border-color: #0ea5e9;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Descripción */
.tc-descripcion {
  margin-top: 60px;
  font-size: 14px;
  color: #4b5563;
}

/* ========================= */
/* CASOS CLINICOS */
/* ========================= */

.clinical-cases {

    width: 100%;

    min-height: 100vh;

    padding: 100px 40px;

    text-align: center;
}

/* TITULO */

.clinical-cases h2 {

    font-size: 55px;

    margin-bottom: 40px;
}

/* SELECT */

#categorySelect {

    padding: 12px 20px;

    width: 280px;

    border-radius: 8px;

    border: 1px solid #999;

    margin-bottom: 70px;

    font-size: 15px;

    outline: none;
}

/* GRID */

.cases-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

    max-width: 1100px;

    margin: 0 auto;
}

/* CARD IMAGEN */

.case-item {

    width: 100%;

    height: 280px;

    overflow: hidden;

    border-radius: 18px;

    cursor: pointer;

    transition: 0.4s ease;

    position: relative;
}

/* IMAGEN */

.case-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.4s ease;

    display: block;
}

/* HOVER */

.case-item:hover img {

    transform: scale(1.08);
}

/* ========================= */
/* RESPONSIVE TABLET */
/* ========================= */

/* Cortes responsive del sitio (iguales en todos los CSS; píxeles CSS, iguales en iOS y Android):
   1024px tablets grandes y horizontal · 768px tablets en vertical · 480px celulares · 360px celulares pequeños */
@media (max-width: 1024px) {

    .cases-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .treatments-circle {

        transform: scale(0.8);

        transform-origin: top center;
    }
}

/* ========================= */
/* RESPONSIVE MOVIL */
/* ========================= */

@media (max-width: 768px) {

      .tc-circle {
    width: 320px;
    height: 320px;
  }

  .tc-center {
    width: 170px;
    height: 170px;
  }

  .tc-item {
    width: 120px;
    font-size: 10px;
    padding: 6px 8px;
  }

  .tc-container h1 {
    font-size: 26px;
  }

    .clinical-cases {

        padding: 70px 25px;
    }

    .clinical-cases h2 {

        font-size: 40px;
    }

    .cases-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 15px;
    }

    .case-item {

        height: 140px;
    }

    #categorySelect {

        width: 100%;
    }
}

/* ================== CÍRCULO DE TRATAMIENTOS -> CUADRÍCULA DE TARJETAS ================== */
/* En tablet vertical y celular el círculo no cabe (6 de los 10 botones quedaban fuera de la
   pantalla). Hasta 768px se muestra como cuadrícula de tarjetas con la foto de cada tratamiento.
   En PC y tablets grandes el círculo sigue igual. La foto la pone servicios.js en --tc-img. */
@media (max-width: 768px) {
    .tc-subtitle {
        margin-bottom: 30px;
    }

    .tc-circle {
        position: static;
        width: 100%;
        max-width: 680px;
        height: auto;
        border-radius: 0;
        background: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Sin imagen central ni texto de "Selecciona un tratamiento": cada tarjeta ya tiene su foto */
    .tc-center,
    .tc-descripcion {
        display: none;
    }

    .tc-item {
        position: static;
        left: auto !important;   /* anula la posición en círculo que calcula servicios.js */
        top: auto !important;
        transform: none;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 10px 14px;
        border-radius: 16px;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.3;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    }

    /* Foto arriba de cada tarjeta */
    .tc-item::before {
        content: "";
        display: block;
        width: calc(100% + 20px);
        margin: 0 -10px 12px;
        aspect-ratio: 4 / 3;
        background: var(--tc-img) center / cover no-repeat, #e5e7eb;
    }

    .tc-item:hover {
        transform: translateY(-3px);
    }

    /* Con 3 columnas, la última tarjeta (10ª) queda sola: se centra */
    .tc-item:last-of-type:nth-of-type(3n + 1) {
        grid-column: 2;
    }
}

/* Celulares: dos tarjetas por fila */
@media (max-width: 480px) {
    .tc-circle {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tc-item {
        font-size: 13px;
    }

    /* Con 2 columnas no queda ninguna sola */
    .tc-item:last-of-type:nth-of-type(3n + 1) {
        grid-column: auto;
    }
}