/* ========================================
   PERSPECTIVA DE GÉNERO — patrón 2 (ancho completo, sin menú de página,
   ver CLAUDE.md) pero sin bandas: una sola columna centrada sobre fondo
   blanco, secciones separadas por una línea inferior.

   A diferencia de memorias/noticias (grillas de cards, wrapper sin
   padding lateral) el contenido es texto de lectura, así que el wrapper
   lleva gutter horizontal como institucional. El ancho de CONTENIDO de
   referencia sigue siendo 1160px (ver [[feedback_container_width]]);
   box-sizing: content-box para que el padding lateral quede fuera de los
   1160 y no lo coma el border-box global de hello-biz.

   Todo antepone #inacoop-perspectiva-genero para ganar especificidad vs.
   Elementor/hello-biz sin ir contando clases (ver
   [[feedback_elementor_css_specificity]]). Tipografía en rem (ver
   [[feedback_css_units]]).

   Medidas según Figma (archivo "Web-INACOOP", node 735-8825 desktop /
   735-9236 mobile).
   ======================================== */

#inacoop-perspectiva-genero {
  box-sizing: content-box;
  max-width: 1160px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  font-family: Asap, sans-serif;
  color: #1e2939;
}

/* ---- Secciones ---- */
#inacoop-perspectiva-genero .inacoop-pg-section {
  padding: 2.5rem 0;
  border-bottom: 1px solid #f3f4f6;
}

#inacoop-perspectiva-genero .inacoop-pg-section--intro {
  max-width: 46.25rem; /* 740px de lectura (Figma) */
}

#inacoop-perspectiva-genero .inacoop-pg-section--last {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---- Encabezado de sección (punto de color + título) ---- */
#inacoop-perspectiva-genero .inacoop-pg-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

#inacoop-perspectiva-genero .inacoop-pg-head__dot {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

#inacoop-perspectiva-genero .inacoop-pg-head__titulo {
  margin: 0;
  font-family: Asap, sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: #401e5e;
}

/* ---- Tipografía de cuerpo ---- */
#inacoop-perspectiva-genero .inacoop-pg-eyebrow {
  margin: 0 0 1rem;
  font-family: Asap, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.08125rem;
  text-transform: uppercase;
  color: #c73557;
}

#inacoop-perspectiva-genero .inacoop-pg-lead {
  margin: 0;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.4;
  color: #401e5e;
}

#inacoop-perspectiva-genero .inacoop-pg-lead + .inacoop-pg-parrafo {
  margin-top: 1.25rem;
}

#inacoop-perspectiva-genero .inacoop-pg-parrafo {
  margin: 0 0 1rem;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: #1e2939;
}

#inacoop-perspectiva-genero .inacoop-pg-parrafo:last-child {
  margin-bottom: 0;
}

#inacoop-perspectiva-genero .inacoop-pg-section--intro .inacoop-pg-parrafo {
  font-size: 1.0625rem;
}

#inacoop-perspectiva-genero .inacoop-pg-parrafo a {
  color: #c73557;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* el kit de Elementor pone font-size: 1.25rem a todos los <a> */
  font-size: inherit;
}

/* ---- Layout de dos columnas ---- */
#inacoop-perspectiva-genero .inacoop-pg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

#inacoop-perspectiva-genero .inacoop-pg-cols--acciones {
  grid-template-columns: minmax(0, 1fr) 25rem; /* 744 | 400 (Figma) */
}

/* Divisoria vertical entre las columnas (Figma: border-r + pr en la
   primera columna). En mobile pasa a línea inferior. */
#inacoop-perspectiva-genero .inacoop-pg-cols--divisor .inacoop-pg-col:first-child {
  padding-right: 3rem;
  border-right: 1px solid #f3f4f6;
}

/* ---- Cita (Barreras y desafíos) ---- */
#inacoop-perspectiva-genero .inacoop-pg-cita {
  margin: 0 0 1.25rem;
  padding-left: 1rem;
  border-left: 4px solid #c73557;
}

#inacoop-perspectiva-genero .inacoop-pg-cita blockquote {
  margin: 0;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #401e5e;
}

#inacoop-perspectiva-genero .inacoop-pg-cita figcaption {
  margin-top: 0.5rem;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #99a1af;
}

/* ---- Callout "Un camino colectivo" ---- */
#inacoop-perspectiva-genero .inacoop-pg-callout {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  max-width: 50rem; /* 800px (Figma) */
  padding: 1.5rem 2rem;
  border-radius: 16px;
  background: #e8f7f6;
}

#inacoop-perspectiva-genero .inacoop-pg-callout__icon {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #3fb4a6;
}

#inacoop-perspectiva-genero .inacoop-pg-callout__icon img {
  display: block;
  width: 20px;
  height: 20px;
}

#inacoop-perspectiva-genero .inacoop-pg-callout__titulo {
  margin: 0 0 0.375rem;
  font-family: Asap, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #1d6e68;
}

#inacoop-perspectiva-genero .inacoop-pg-callout__texto {
  margin: 0;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #1e2939;
}

/* ---- Acciones y herramientas (lista con íconos) ---- */
#inacoop-perspectiva-genero .inacoop-pg-acciones {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

#inacoop-perspectiva-genero .inacoop-pg-acciones__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.375rem 0;
}

#inacoop-perspectiva-genero .inacoop-pg-acciones__item img {
  display: block;
  flex: 0 0 18px;
  margin-top: 0.1875rem;
}

#inacoop-perspectiva-genero .inacoop-pg-acciones__item span {
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #364153;
}

/* ---- Documentos de referencia (tarjetas de leyes) ---- */
#inacoop-perspectiva-genero .inacoop-pg-leyes {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}

#inacoop-perspectiva-genero .inacoop-pg-ley {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
}

#inacoop-perspectiva-genero a.inacoop-pg-ley:hover,
#inacoop-perspectiva-genero a.inacoop-pg-ley:focus-visible {
  border-color: #c73557;
  outline: none;
}

#inacoop-perspectiva-genero .inacoop-pg-ley__icon {
  display: block;
  flex: 0 0 18px;
  margin-top: 0.125rem;
}

#inacoop-perspectiva-genero .inacoop-pg-ley__body {
  flex: 1 1 auto;
  min-width: 0;
}

#inacoop-perspectiva-genero .inacoop-pg-ley__num {
  display: block;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #c73557;
}

#inacoop-perspectiva-genero .inacoop-pg-ley__titulo {
  display: block;
  margin-top: 0.125rem;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #1e2939;
}

#inacoop-perspectiva-genero .inacoop-pg-ley__external {
  display: block;
  flex: 0 0 14px;
  margin-top: 0.25rem;
}

#inacoop-perspectiva-genero .inacoop-pg-nota {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin: 0.75rem 0 0;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #99a1af;
}

#inacoop-perspectiva-genero .inacoop-pg-nota img {
  display: block;
  flex: 0 0 12px;
}

/* ---- Contenido audiovisual ---- */
#inacoop-perspectiva-genero .inacoop-pg-av {
  display: grid;
  grid-template-columns: 30rem minmax(0, 1fr); /* 480 | 680 (Figma) */
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

#inacoop-perspectiva-genero .inacoop-pg-video {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

#inacoop-perspectiva-genero .inacoop-pg-video__media {
  position: relative;
  display: block;
  background: #101828;
}

#inacoop-perspectiva-genero .inacoop-pg-video__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #101828;
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}

#inacoop-perspectiva-genero .inacoop-pg-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
}

#inacoop-perspectiva-genero .inacoop-pg-video__play img {
  display: block;
  width: 18px;
  height: 18px;
}

#inacoop-perspectiva-genero .inacoop-pg-video__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  line-height: 1.5;
  color: #fff;
}

#inacoop-perspectiva-genero .inacoop-pg-video__badge img {
  display: block;
}

#inacoop-perspectiva-genero .inacoop-pg-video__body {
  padding: 1rem;
}

#inacoop-perspectiva-genero .inacoop-pg-video__titulo {
  margin: 0;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #1e2939;
}

#inacoop-perspectiva-genero .inacoop-pg-video__subtitulo {
  margin: 0.25rem 0 0;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #6a7282;
}

#inacoop-perspectiva-genero .inacoop-pg-av__aside .inacoop-pg-parrafo {
  margin-bottom: 1rem;
}

#inacoop-perspectiva-genero a.inacoop-pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border: 1px solid #c73557;
  border-radius: 999px;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #c73557;
  text-decoration: none;
}

#inacoop-perspectiva-genero a.inacoop-pg-btn:hover,
#inacoop-perspectiva-genero a.inacoop-pg-btn:focus-visible {
  background: rgba(199, 53, 87, 0.06);
  color: #c73557;
}

#inacoop-perspectiva-genero .inacoop-pg-btn img {
  display: block;
  flex: 0 0 auto;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 860px) {
  #inacoop-perspectiva-genero .inacoop-pg-cols,
  #inacoop-perspectiva-genero .inacoop-pg-cols--acciones {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  #inacoop-perspectiva-genero .inacoop-pg-cols--divisor .inacoop-pg-col:first-child {
    padding-right: 0;
    padding-bottom: 2rem;
    border-right: 0;
    border-bottom: 1px solid #f3f4f6;
  }

  #inacoop-perspectiva-genero .inacoop-pg-av {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 767px) {
  #inacoop-perspectiva-genero {
    padding: 2rem 1.25rem 3.5rem;
  }

  #inacoop-perspectiva-genero .inacoop-pg-lead {
    font-size: 1.25rem;
  }

  #inacoop-perspectiva-genero .inacoop-pg-callout {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
}