/* =========================================================
   Sección Cirugía de mínima invasión
   (usa las variables definidas en styles/styles.css)
   ========================================================= */

.cir {
  --sky-light: #8dc0f5;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
  min-height: min(100svh, 920px);
  background: var(--navy);
  color: var(--white);
  scroll-margin-top: var(--header-h);
  overflow: hidden;
}

/* ---------- Imagen ---------- */
.cir__media {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background: #2b4d7d;
}
/* Capa que se mueve con el scroll (parallax) */
.cir__parallax {
  position: absolute;
  left: 0; right: 0;
  top: -7%; bottom: -7%;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.cir__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;      /* ajusta si tu foto necesita otro encuadre */
  transform: scale(1.14);
  transition: transform 1.8s var(--ease);
}
.cir.is-in .cir__img { transform: scale(1); }

/* ---------- Contenido ---------- */
.cir__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 96px) var(--pad-x);
}

.cir__eyebrow {
  margin: 0;
  font-size: clamp(.82rem, 1.05vw, 1rem);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--sky-light);
}
.cir__eyebrow span { margin: 0 .5em; font-weight: 500; }

.cir__title {
  margin: clamp(18px, 2.6vw, 34px) 0 0;
  max-width: 11em;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.cir__text {
  margin: clamp(22px, 3.6vw, 52px) 0 0;
  max-width: 34em;
  font-size: clamp(.98rem, 1.3vw, 1.2rem);
  line-height: 1.9;
  color: rgba(255, 255, 255, .86);
}

.cir__subtitle {
  margin: clamp(26px, 3.6vw, 52px) 0 0;
  font-size: clamp(.92rem, 1.15vw, 1.1rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sky-light);
}

/* Beneficios */
.cir__benefits {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: clamp(12px, 1.6vw, 20px) 0;
}
.cir__benefits li {
  display: flex;
  align-items: center;
  font-size: clamp(.92rem, 1.1vw, 1.05rem);
  padding-right: 20px;
}
.cir__benefits li:nth-child(even) { padding-right: 0; }
.cir__benefits li:nth-child(even)::before {      /* punto separador */
  content: "";
  width: 5px; height: 5px;
  margin-right: 22px;
  border-radius: 50%;
  background: var(--sky-light);
  flex: none;
}

.cir__note {
  margin: clamp(26px, 3.6vw, 52px) 0 0;
  max-width: 27em;
  font-size: clamp(.82rem, .98vw, .95rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, .72);
}

/* Botón */
.cir__btn {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  margin-top: clamp(18px, 2.4vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 22px 30px;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.cir__btn:hover { background: #4a8bd0; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 0, 0, .3); }
.cir__btn:active { transform: scale(.97); }
.cir__btn::before {                   /* brillo */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease);
}
.cir__btn:hover::before { left: 130%; }
.cir__btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.cir__btn:hover svg { transform: translateX(6px); }

/* ---------- Animación de entrada / salida ---------- */
.js [data-cir] {
  opacity: 0;
  transition: opacity .45s ease, transform .45s var(--ease), clip-path .5s var(--ease);
  transition-delay: 0s;                        /* salida: rápida */
}
.js [data-cir="up"]   { transform: translateY(32px); }
.js [data-cir="item"] { transform: translateX(-18px); }
.js [data-cir="reveal"] { clip-path: inset(0 100% 0 0); opacity: 1; }

.js .cir.is-in [data-cir] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition-duration: .8s, .9s, 1.3s;
  transition-delay: var(--d, 0s);
}
/* El botón responde al hover sin retraso tras la entrada */
.js .cir.is-in .cir__btn { transition-duration: .8s, .3s, 1.3s; }
.js .cir.is-in .cir__btn:hover { transform: translateY(-3px); transition-delay: 0s; transition-duration: .3s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cir { grid-template-columns: 1fr; min-height: 0; }
  .cir__media { aspect-ratio: 4 / 3; min-height: 0; }
  .js [data-cir="reveal"] { clip-path: inset(0 0 100% 0); }
  .cir__title { max-width: none; }
}

@media (max-width: 560px) {
  .cir__benefits { grid-template-columns: 1fr; }
  .cir__benefits li { padding-right: 0; }
  .cir__benefits li:nth-child(even)::before { display: none; }
  .cir__benefits li::before {
    content: "";
    width: 5px; height: 5px;
    margin-right: 14px;
    border-radius: 50%;
    background: var(--sky-light);
    flex: none;
  }
  .cir__btn { align-self: stretch; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cir__parallax { transform: none !important; }
}