/* ═══════════════════════════════════════════════════════════════
   redesign-mision-vision.css
   Secciones específicas de mision-vision.html
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero override ───────────────────────────── */
.rd-page-hero {
  min-height: 380px;
  background-color: var(--color-dark);
  background-size: cover;
  background-position: center;
}

/* ── Section 1: Filosofía intro ──────────────── */
.rd-filosofia-intro {
  background-image: url('/assets/media/redesign/filosofia/filosofia.png');
  background-size: 45% 100%;
  background-position: right center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  min-height: 85vh;
}

.rd-filosofia-intro__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 85vh;
  align-items: stretch;
  max-width: var(--container-max);
  margin-inline: auto;
}

.rd-filosofia-intro__left {
  background-color: #ffffff;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(2rem, 4vw, 4rem) clamp(3.5rem, 7vw, 7rem) clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.rd-filosofia-intro__right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(2rem, 4vw, 4rem);
  min-width: 0;
}

.rd-filosofia-intro__right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 0.85) 25%,
    rgba(255, 255, 255, 0.4)  55%,
    rgba(255, 255, 255, 0)    80%
  );
  pointer-events: none;
  z-index: 0;
}

.rd-filosofia-intro__right .rd-sidebar {
  position: relative;
  top: auto;
  z-index: 1;
  width: 100%;
}

/* ── Display heading ─────────────────────────── */
/* !important necesario: app.css tiene h1/h2 { font-family: Roboto !important } */
.rd-filosof-display {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  text-align: left;
}

/* ── Subtitle text ───────────────────────────── */
.rd-filosof-subtitle {
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  text-align: left;
}

/* ── Mission / Vision cards ──────────────────── */
.rd-mv-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rd-mv-card {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid var(--color-light-mid);
  transition: box-shadow 0.25s ease;
}

.rd-mv-card:hover {
  box-shadow: 0 4px 20px rgba(22, 71, 142, 0.07);
}

.rd-mv-card__icon-box {
  flex-shrink: 0;
  width: 92px;
  background-color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.rd-mv-card__icon-box img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.rd-mv-card__sep {
  flex-shrink: 0;
  width: 1px;
  background-color: var(--color-light-mid);
  margin-block: 1.5rem;
}

.rd-mv-card__body {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.75rem;
}

.rd-mv-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

.rd-mv-card__line {
  width: 2rem;
  height: 2px;
  background-color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.rd-mv-card__text {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
  text-align: left;
}

/* ── Section 2: Política de calidad ──────────── */
.rd-calidad {
  background-color: var(--color-light);
  padding-block: clamp(4rem, 8vw, 6rem);
}

.rd-calidad__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.rd-calidad__heading {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-align: left;
}

.rd-calidad__divider {
  width: 2.75rem;
  height: 2px;
  background-color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.rd-calidad__text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  text-align: left;
}

/* ── ISO callout ─────────────────────────────── */
.rd-iso {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  padding: 1.75rem;
  background: #ffffff;
  border: 1px solid var(--color-light-mid);
}

.rd-iso__seal {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.rd-iso__badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--color-dark);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.35;
}

.rd-iso__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.35rem;
}

.rd-iso__title {
  font-family: var(--font-serif);
  font-size: 0.97rem;
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.35;
  margin-bottom: 0.4rem;
}

.rd-iso__text {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
  text-align: left;
}

/* ── Objectives 3x2 grid ─────────────────────── */
.rd-calidad__objectives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rd-obj-card {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.25rem 1.25rem;
  background: #ffffff;
  border: 1px solid var(--color-light-mid);
  transition: box-shadow 0.25s ease;
}

.rd-obj-card:hover {
  box-shadow: 0 4px 20px rgba(22, 71, 142, 0.07);
}

.rd-obj-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rd-obj-card__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.rd-obj-card__sep {
  width: 1px;
  height: 28px;
  background: var(--color-light-mid);
  flex-shrink: 0;
  margin-inline: 1rem;
}

.rd-obj-card__text {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* ── Section 3: Labor Social ─────────────────── */
.rd-labor {
  background-color: #ffffff;
  padding-block: clamp(4rem, 8vw, 6rem);
}

.rd-labor__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.rd-labor__heading {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  text-align: left;
}

.rd-labor__desc {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 2rem;
  text-align: left;
}

.rd-labor__items {
  display: flex;
  flex-direction: column;
  padding-left: 0;
}

.rd-labor-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--color-light-mid);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.5;
  text-align: left;
  list-style: none;
}

.rd-labor-item__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-light-mid);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rd-labor-item__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.rd-labor-item:first-child {
  border-top: 1px solid var(--color-light-mid);
}

/* ── Labor photos (right column) ─────────────── */
.rd-labor__photos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 120px;
}

.rd-labor__photo {
  width: 100%;
  aspect-ratio: 20 / 9;
  object-fit: cover;
  display: block;
  height: 80%;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
  .rd-filosofia-intro__grid {
    grid-template-columns: 1fr;
  }

  .rd-filosofia-intro__left {
    padding-inline: var(--container-pad);
    padding-block: clamp(3rem, 6vw, 5rem);
  }

  .rd-filosofia-intro__right {
    min-height: 70vh;
  }
}

@media (max-width: 900px) {
  .rd-calidad__container {
    grid-template-columns: 1fr;
  }

  .rd-labor__container {
    grid-template-columns: 1fr;
  }

  .rd-labor__photos {
    position: static;
  }
}

@media (max-width: 640px) {
  .rd-filosof-display {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
    letter-spacing: -0.01em;
  }

  .rd-calidad__objectives {
    grid-template-columns: 1fr;
  }

  .rd-mv-card__icon-box {
    width: 56px;
  }

  /* El widget de reCAPTCHA es de ancho fijo (304px) y no se achica;
     se reduce el padding de la columna/sidebar para dejarle espacio. */
  .rd-filosofia-intro__right {
    padding-inline: 1rem;
  }

  .rd-filosofia-intro__right .rd-sidebar {
    padding: 1.25rem;
  }
}

/* Pantallas muy angostas (iPhone SE, etc.): ni reduciendo el padding
   alcanza el espacio para el reCAPTCHA de 304px, así que se escala.
   transform-origin top-left: lo que sobra del box original queda
   vacío (sin contenido visible), lo clipea el overflow-x:hidden global
   sin recortar nada visible. */
@media (max-width: 360px) {
  .rd-filosofia-intro__right .g-recaptcha {
    transform: scale(0.8);
    transform-origin: left top;
  }
}