/* ==============================================================
   nosotros.css  –  Revista Horizonte Médico CUU
   Sección "Nosotros"
   Fuente: PT Sans (Google Fonts)
   Responsive: celular baja/alta gama · tablet · laptop · desktop
   ============================================================== */

/* ── Variables globales ─────────────────────────────────────── */
:root {
  --color-teal:       #007b7f;
  --color-teal-dark:  #005457;
  --color-gold:       #b8963e;
  --color-gold-light: #d4af5a;
  --color-black:      #0d0d0d;
  --color-white:      #ffffff;
  --color-text:       #1a1a1a;
  --color-cuadro-bg:  rgba(255, 255, 255, 0.93);

  --font-main: 'PT Sans', sans-serif;

  --txt-size-desktop: 18px;
  --txt-size-laptop:  17px;
  --txt-size-tablet:  16px;
  --txt-size-mobile:  15px;

  --line-height-txt: 38px;

  --section-pad-v-desktop: 90px;
  --section-pad-v-mobile:  50px;
}

/* ── Reset básico ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background: var(--color-black);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* ==============================================================
   SECCIÓN NOSOTROS – fondo fijo (parallax)
   Archivo: images/back-nosotros.jpg
   ============================================================== */
.Nosotros-background {
  position: relative;
  width: 100%;
  min-height: 100vh;
  

  /* ── Imagen de fondo fija ── */
  background-image: url('../images/back-nosotros.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Overlay oscuro para legibilidad */
  overflow: hidden;
}

.Nosotros-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 60, 63, 0.72) 0%,
    rgba(0, 30, 32, 0.55) 50%,
    rgba(0, 0, 0, 0.60) 100%
  );
  z-index: 0;
}

/* ==============================================================
   CONTENEDOR GENERAL
   ============================================================== */
.Nosotros-Container-gral {
  position: relative;
  top: 40px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;           /* alineación a la base */
  justify-content: center;
  gap: 0px;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--section-pad-v-desktop) 40px var(--section-pad-v-desktop) 40px;
}

/* ==============================================================
   COLUMNA IZQUIERDA (barra-título + cuadro de texto)
   ============================================================== */
.Nosotros-Left-Col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 55%;
  max-width: 680px;
  gap: 24px;
}

/* ── Barra / título Nosotros ────────────────────────────────── */
/* Animación: slideInLeft → definida en @keyframes más abajo     */
.Barrita-nosotros {
  width: 100%;
  /* Estado inicial para la animación (JS agrega la clase .animate) */
  opacity: 0;
  transform: translateX(-120px);
  transition: none;                /* la transición la maneja la clase JS */
}

.Barrita-nosotros.animate {
  animation: slideInLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.Titulo-nosotros {
  max-width: 100%;
  height: auto;
  display: block;
  /* Si la imagen no carga, mostramos un fallback visual */
  min-height: 60px;
  background: transparent;
}

/* ── Cuadro de texto ────────────────────────────────────────── */
/* Animación: zoomIn → definida en @keyframes más abajo          */
.Cuadro-Txt-Us {
  width: 100%;
  padding: 40px 44px;
  border-radius: 12px;

  /* Fondo blanco semitransparente + imagen de fondo */
  background-color: var(--color-cuadro-bg);
  background-image: url('../images/Back-Txt-Nosotros.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;

  /* Borde dorado sutil */
  border: 1.5px solid rgba(184, 150, 62, 0.35);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.30),
    0 2px 8px  rgba(0, 0, 0, 0.15);

  /* Estado inicial para la animación */
  opacity: 0;
  transform: scale(0);
  transform-origin: top left;
  max-width: 620px;/*////////////*/
}

.Cuadro-Txt-Us.animate {
  animation: zoomIn 0.85s cubic-bezier(0.34, 1.30, 0.64, 1) 0.35s forwards;
}

/* ── Tipografía del texto ─────────────────────────────────────*/
.Texto-Nosotros {
 /* font-family: var(--font-main);
  font-size: var(--txt-size-desktop);   /* base 18 px → ajustado a ~18-19px */
  /*font-size: clamp(15px, 1.3vw, 19px);
  line-height: var(--line-height-txt);
  color: var(--color-text);
  margin-bottom: 20px;*/
   font-family: var(--font-main);
 font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.9;
  color: #2b2b2b;
  margin-bottom: 22px;
  letter-spacing: 0.2px;

}

.Texto-Nosotros:last-of-type {
  margin-bottom: 12px;
}

.vinculo-titulo {
  font-weight: 700;
  color: var(--color-teal-dark);
  margin-bottom: 8px;
}

/* ── Lista con bullets dorados ──────────────────────────────── */
.Lista-Nosotros {
  list-style: none;
  padding: 0;
  margin: 0;
}

.Lista-Nosotros li {
  font-family: var(--font-main);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: var(--line-height-txt);
  color: var(--color-text);
  padding-left: 22px;
  position: relative;
}

.Lista-Nosotros li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-size: 1.2em;
  line-height: inherit;
}

/* ==============================================================
   COLUMNA DERECHA – imagen de doctores
   Animación: fadeInUp → definida en @keyframes más abajo
   ============================================================== */
.Doctores-img {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;           /* alineada a la base del contenedor */
  justify-content: flex-end;
  /* Desplazamiento vertical para que los pies queden a la misma
     altura que la base del Cuadro-Txt-Us.
     Ajusta este valor si cambia la imagen real. */
  margin-bottom: -40px;
  margin-left: -30px;              /* leve solapamiento visual */

  /* Estado inicial para la animación */
  opacity: 0;
  transform: translateY(80px);
}

.Doctores-img.animate {
  animation: fadeInUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.Doctores-image {
  display: block;
  max-width: 100%;
  height: auto;
  /* Sombra para integrar la imagen al fondo */
  filter: drop-shadow(-8px 12px 28px rgba(0, 0, 0, 0.55));
  /* Desplazamiento ascendente para que los pies queden
     alineados con la parte inferior del cuadro de texto.
     Si la imagen viene recortada al borde inferior, usar top
     negativo relativo al contenedor; si no, ajustar aquí. */
  position: relative;
  top: -80px;                      /* ≈ sube la imagen para alinear bases */
  max-height: 700px;
  object-fit: contain;
  object-position: bottom;
}

/* ==============================================================
   @KEYFRAMES
   ============================================================== */

/* Slide desde la izquierda */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Zoom de 0 a 100% */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fade + sube (transparencia 0 → 1, de abajo hacia arriba) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==============================================================
   RESPONSIVE – Laptop (≤ 1280 px)
   ============================================================== */
@media (max-width: 1280px) {
  .Nosotros-Container-gral {
    padding: 70px 30px;
    gap: 0;
  }

  .Nosotros-Left-Col {
    max-width: 600px;
  }

  .Doctores-image {
    max-height: 600px;
    top: -60px;
  }

  .Cuadro-Txt-Us {
    padding: 32px 36px;
  }
}

/* ==============================================================
   RESPONSIVE – Tablet (≤ 1024 px)
   ============================================================== */
@media (max-width: 1024px) {
  .Nosotros-Container-gral {
    flex-direction: column;
    align-items: center;
    padding: 60px 24px 0 24px;
    gap: 0;
  }

  .Nosotros-Left-Col {
    max-width: 100%;
    width: 100%;
  }

  .Cuadro-Txt-Us {
    padding: 30px 30px;
  }

  .Doctores-img {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: -20px;
  }

  .Doctores-image {
    top: 0;
    max-height: 480px;
  }
}

/* ==============================================================
   RESPONSIVE – Mobile Alta Gama (≤ 768 px)
   ============================================================== */
@media (max-width: 768px) {
  :root {
    --section-pad-v-desktop: 50px;
    --line-height-txt: 32px;
  }

  .Nosotros-background {
    /* En iOS background-attachment:fixed tiene bugs; usamos local */
    background-attachment: scroll;
  }

  .Nosotros-Container-gral {
    padding: 50px 18px 0 18px;
  }

  .Cuadro-Txt-Us {
    padding: 24px 20px;
    border-radius: 10px;
  }

  .Texto-Nosotros,
  .Lista-Nosotros li {
    font-size: 15px;
    line-height: 30px;
  }

  .Doctores-image {
    max-height: 380px;
  }

  .Doctores-img {
    margin-top: -10px;
  }
}

/* ==============================================================
   RESPONSIVE – Mobile Baja Gama (≤ 480 px)
   ============================================================== */
@media (max-width: 480px) {
  .Nosotros-Container-gral {
    padding: 36px 12px 0 12px;
  }

  .Cuadro-Txt-Us {
    padding: 20px 16px;
    border-radius: 8px;
  }

  .Texto-Nosotros,
  .Lista-Nosotros li {
    font-size: 14px;
    line-height: 26px;
  }

  .Doctores-image {
    max-height: 300px;
  }

  .Barrita-nosotros {
    max-width: 90vw;
  }

  .Titulo-nosotros {
    width: 100%;
  }
}

/* ==============================================================
   RESPONSIVE – Mobile Muy Pequeño (≤ 360 px)
   ============================================================== */
@media (max-width: 360px) {
  .Cuadro-Txt-Us {
    padding: 16px 12px;
  }

  .Texto-Nosotros,
  .Lista-Nosotros li {
    font-size: 13px;
    line-height: 24px;
  }

  .Doctores-image {
    max-height: 250px;
  }
}