/* ============================================================
   Instituto Mexicano de Mujeres del Agro, A.C.
   Sitio institucional · mujeresdelagro.org

   Misma paleta y mismos elementos de papelería que el sitio
   del DNC 360° (encuesta.mujeresdelagro.org), para que los dos
   se vean como parte de la misma casa.
   ============================================================ */
:root{
  /* Marca */
  --magenta:#B33D87;        /* barras de sección de la hoja membretada */
  --magenta-logo:#B9379F;   /* magenta del logotipo */
  --magenta-osc:#8F2D6C;
  --magenta-claro:#F1D7EC;
  --magenta-papel:#FBF2F8;
  --verde:#0D5729;          /* verde de títulos */
  --verde-osc:#08401E;
  --verde-logo:#1D4A22;
  --verde-vivo:#2DA442;     /* verde del trazo curvo del logo */
  --verde-claro:#E6F0E9;
  --verde-papel:#F4F9F5;

  /* Neutros */
  --tinta:#292929;
  --gris:#6E6E6E;
  --linea:#E6E4E1;
  --fondo:#FFFFFF;
  --papel:#FFFFFF;

  --radio:10px;
  --sombra:0 1px 2px rgba(41,41,41,.05), 0 6px 18px rgba(41,41,41,.05);
  --franja:clamp(70px, 11vw, 168px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:86px;background:var(--fondo)}
body{margin:0;background:transparent;color:var(--tinta);position:relative;
  padding-right:var(--franja);
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--verde)}
h1,h2,h3{line-height:1.22;margin:0 0 .4em}
img{max-width:100%}
.contenedor{max-width:1080px;margin:0 auto;padding:0 20px}
.estrecho{max-width:880px}

/* ------------------------------------------------------------
   Papelería institucional: franja de íconos agrícolas a la
   derecha y marca de agua del logotipo abajo a la izquierda.
   ------------------------------------------------------------ */
body::after{
  content:'';position:fixed;top:0;right:0;bottom:0;width:var(--franja);
  background:url('franja-derecha.png?v=3') no-repeat right top;background-size:cover;
  pointer-events:none;z-index:6;
}
/* La marca de agua va como elemento fijo y no como background-attachment:fixed,
   porque Safari en iOS no soporta esa propiedad. El alto es el 39.4% del ancho,
   que es la proporción real de la imagen (926x365). */
body::before{
  content:'';position:fixed;left:0;bottom:0;z-index:-1;pointer-events:none;
  width:clamp(230px, 25vw, 430px);
  height:clamp(91px, 9.85vw, 170px);
  background:url('marca-agua.png') no-repeat left bottom;background-size:contain;
}
@media(max-width:1023px){
  :root{ --franja:30px }
  body::after{background-size:118px auto}
  body::before{display:none}
}
@media(max-width:400px){
  :root{ --franja:24px }
  body::after{background-size:96px auto}
}

/* ---------- Barra de navegación ---------- */
.barra{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--linea)}
.barra .contenedor{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px}
.barra .logo{width:104px;height:auto;display:block;flex:none}
.menu{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.menu a{color:var(--gris);text-decoration:none;font-size:.86rem;font-weight:700;
  padding:8px 11px;border-radius:7px;transition:.15s;white-space:nowrap}
.menu a:hover{background:var(--verde-claro);color:var(--verde)}
.barra .boton{padding:10px 18px;font-size:.86rem;flex:none}
@media(max-width:900px){
  .menu{display:none}
  .barra .contenedor{gap:12px;justify-content:space-between}
  .barra .boton{margin-left:auto}
}

/* ---------- Portada ---------- */
.portada{position:relative;background:var(--verde-osc);color:#fff;overflow:hidden;
  min-height:min(82vh,660px);display:grid;align-items:center}
.portada .foto-fondo{position:absolute;inset:0;z-index:0}
.portada .foto-fondo img{width:100%;height:100%;object-fit:cover;display:block}
.portada .velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(8,64,30,.92) 0%, rgba(13,87,41,.80) 46%, rgba(13,87,41,.38) 100%)}
.portada .contenedor{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.portada .logo-portada{width:clamp(150px,20vw,224px);height:auto;display:block;margin:0 0 26px;
  background:rgba(255,255,255,.94);border-radius:14px;padding:14px 18px}
.portada h1{font-size:clamp(1.7rem,4.2vw,3rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;margin:0 0 14px;max-width:16ch}
.portada .lema{font-size:clamp(1.05rem,2vw,1.4rem);font-weight:700;color:#F7DCEF;margin:0 0 10px}
.portada .entrada{font-size:1.02rem;max-width:52ch;margin:0 0 30px;color:rgba(255,255,255,.93)}
.portada .acciones{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Secciones ---------- */
.seccion{padding:64px 0}
.seccion.alterna{background:var(--verde-papel)}
.seccion.rosa{background:var(--magenta-papel)}
.rotulo{display:inline-block;background:var(--magenta);color:#fff;font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;padding:5px 13px;border-radius:99px;margin:0 0 14px}
.seccion h2{color:var(--verde);font-size:clamp(1.4rem,2.8vw,2rem);font-weight:700;
  text-transform:uppercase;letter-spacing:-.005em;margin:0 0 6px}
.seccion h2 + .regla{width:64px;height:3px;background:var(--magenta);border:0;margin:0 0 22px}
.seccion p{color:#3d3d3d;margin:0 0 16px}
.seccion p:last-child{margin-bottom:0}
.destacado{font-size:1.06rem;font-weight:700;color:var(--verde)}

/* Bloque de texto con fotografía al lado */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.duo.invertido .texto{order:2}
@media(max-width:860px){
  .duo,.duo.invertido{grid-template-columns:1fr;gap:28px}
  .duo.invertido .texto{order:0}
}

/* ---------- Marco de fotografía ----------
   Si el archivo todavía no existe, el marco muestra en su lugar
   un recuadro con el nombre que debe tener la foto. */
.foto{border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
  background:var(--verde-claro);position:relative}
.foto img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.foto.retrato img{aspect-ratio:3/4}
.foto.vacia{display:grid;place-items:center;text-align:center;padding:30px 22px;
  aspect-ratio:4/3;border:2px dashed var(--verde-vivo);background:var(--verde-papel)}
.foto.retrato.vacia{aspect-ratio:3/4}
.foto.vacia::after{content:'📷 Falta la foto:\A' attr(data-archivo);white-space:pre-line;
  color:var(--verde);font-size:.84rem;font-weight:700;line-height:1.7}

/* ---------- Misión y visión ---------- */
.par{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.par{grid-template-columns:1fr}}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden}
.tarjeta .titulo{background:var(--magenta);color:#fff;padding:13px 22px}
.tarjeta .titulo h3{margin:0;font-size:1.02rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:#fff}
.tarjeta .cuerpo{padding:22px}
.tarjeta .cuerpo p{margin:0;color:#3d3d3d}

/* ---------- Estrategias ---------- */
.banda{background:var(--verde);color:#fff;border-radius:var(--radio);padding:34px 30px;
  box-shadow:var(--sombra)}
.banda h2{color:#fff;text-align:center;margin:0 0 4px}
.banda .pie-banda{text-align:center;color:rgba(255,255,255,.8);font-size:.9rem;margin:0 0 26px}
.tercias{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.tercias{grid-template-columns:1fr}}
.estrategia{display:flex;gap:15px;align-items:flex-start}
.estrategia .num{flex:none;width:44px;height:44px;border-radius:9px;display:grid;place-items:center;
  background:var(--verde-vivo);color:#fff;font-weight:700;font-size:1.02rem}
.estrategia p{margin:0;color:#fff;font-weight:700;line-height:1.45}

/* ---------- Valores ---------- */
.valores{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:900px){.valores{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.valores{grid-template-columns:1fr}}
.valor{background:var(--papel);border:1px solid var(--linea);border-left:4px solid var(--magenta);
  color:var(--magenta);
  border-radius:var(--radio);padding:20px 18px;box-shadow:var(--sombra)}
.valor .n{color:var(--magenta);font-weight:700;font-size:.82rem;letter-spacing:.06em}
.valor h3{margin:6px 0 0;color:var(--verde);font-size:1.02rem}

/* Símbolo de cada valor. Dibujo de línea delgada, del mismo vocabulario
   gráfico que la franja de íconos agrícolas de la hoja membretada. */
.valor .simbolo{display:block;width:42px;height:42px;margin:0 0 12px;
  fill:none;stroke:var(--magenta);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.valor:hover .simbolo{stroke:var(--verde)}
@media(max-width:900px){
  .valor{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  .valor .simbolo{grid-row:1/3;margin:0;width:38px;height:38px}
  .valor h3{margin:2px 0 0}
}

/* ---------- Perfiles / sectores ---------- */
.sectores{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
@media(max-width:900px){.sectores{grid-template-columns:1fr}}
.sector{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column}
.sector .encabezado-sector{background:var(--verde);color:#fff;padding:16px 20px;display:flex;
  align-items:center;gap:12px}
.sector .encabezado-sector .num{flex:none;width:34px;height:34px;border-radius:8px;display:grid;
  place-items:center;background:rgba(255,255,255,.2);font-weight:700;font-size:.9rem}
.sector .encabezado-sector h3{margin:0;color:#fff;font-size:.98rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em}
.sector ul{margin:0;padding:18px 20px 22px 20px;list-style:none;display:grid;gap:8px}
.sector li{position:relative;padding-left:18px;font-size:.92rem;color:#3d3d3d}
.sector li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--magenta)}

/* ---------- Comités ---------- */
.comites{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-top:26px}
.comite{flex:0 1 184px;aspect-ratio:1;border-radius:50%;border:5px solid var(--verde);
  background:var(--papel);display:grid;place-items:center;text-align:center;padding:26px 18px;
  color:var(--verde);font-weight:700;font-size:.87rem;text-transform:uppercase;letter-spacing:.02em;
  line-height:1.35;box-shadow:var(--sombra);transition:.18s}
.comite:nth-child(even){border-color:var(--magenta);color:var(--magenta-osc)}
.comite:hover{transform:translateY(-4px)}
@media(max-width:560px){
  .comites{gap:16px}
  .comite{flex:0 1 150px;font-size:.78rem;padding:18px 12px;border-width:4px}
}

/* ---------- Colaboraciones ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin-top:28px}
.logo-aliado{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:22px 18px;display:grid;place-items:center;min-height:130px;box-shadow:var(--sombra)}
.logo-aliado img{max-height:74px;width:auto;object-fit:contain}
.logo-aliado.vacia{border:2px dashed var(--magenta);background:var(--magenta-papel);
  color:var(--magenta-osc);font-size:.82rem;font-weight:700;text-align:center;line-height:1.6}
.logo-aliado.vacia::after{content:attr(data-nombre) '\A' attr(data-archivo);white-space:pre-line}

/* ---------- Llamados a la acción ---------- */
.llamados{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.llamados{grid-template-columns:1fr}}
.llamado{border-radius:var(--radio);padding:30px 28px;color:#fff;box-shadow:var(--sombra)}
.llamado.socias{background:var(--magenta)}
.llamado.aliados{background:var(--verde)}
.llamado h3{color:#fff;font-size:1.22rem;text-transform:uppercase;margin:0 0 8px}
.llamado p{color:rgba(255,255,255,.93);margin:0 0 20px;font-size:.96rem}

/* ---------- Contacto ---------- */
.contacto{display:grid;gap:12px;margin-top:22px;max-width:440px}
.contacto a{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--tinta);
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:14px 18px;
  font-weight:700;transition:.15s;box-shadow:var(--sombra)}
.contacto a:hover{border-color:var(--verde);background:var(--verde-papel);color:var(--verde)}
.contacto .icono{flex:none;width:34px;height:34px;border-radius:50%;background:var(--verde-claro);
  color:var(--verde);display:grid;place-items:center}
.contacto .icono svg{width:18px;height:18px;fill:currentColor}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--verde);
  color:#fff;border:0;border-radius:8px;padding:13px 26px;font:inherit;font-weight:700;
  cursor:pointer;text-decoration:none;transition:.15s}
.boton:hover{background:var(--verde-osc);color:#fff}
.boton.magenta{background:var(--magenta)}
.boton.magenta:hover{background:var(--magenta-osc)}
.boton.claro{background:#fff;color:var(--verde)}
.boton.claro:hover{background:var(--verde-claro);color:var(--verde-osc)}
.boton.contorno{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85)}
.boton.contorno:hover{background:rgba(255,255,255,.14);color:#fff}

/* ---------- Pie ---------- */
.pie{background:var(--verde-osc);color:rgba(255,255,255,.82);padding:38px 0 46px;font-size:.88rem}
.pie .filas{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.pie a{color:#fff}
.pie .marca{font-weight:700;color:#fff;font-size:.98rem}
.pie p{margin:.3em 0}

/* ============================================================
   Página del aviso de privacidad (aviso-de-privacidad.html)
   Lectura larga: columna angosta, tipografía algo mayor y
   numeración visible de las secciones.
   ============================================================ */
.documento{padding:52px 0 70px}
.documento h1{color:var(--verde);font-size:clamp(1.55rem,3.4vw,2.2rem);font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;margin:0 0 6px}
.documento .entradilla{color:var(--gris);font-size:1.02rem;margin:0 0 26px}
.documento section{margin:0 0 34px}
.documento h2{color:var(--verde);font-size:1.12rem;font-weight:700;margin:0 0 12px;
  display:flex;align-items:baseline;gap:11px}
.documento h2 .n{flex:none;background:var(--magenta);color:#fff;font-size:.82rem;
  min-width:27px;height:27px;border-radius:7px;display:inline-grid;place-items:center;
  align-self:center}
.documento p{color:#3d3d3d;margin:0 0 14px;line-height:1.7}
.documento ul,.documento ol.numerada{margin:0 0 14px;padding-left:0;list-style:none;display:grid;gap:9px}
.documento ul li{position:relative;padding-left:20px;color:#3d3d3d;line-height:1.65}
.documento ul li::before{content:'';position:absolute;left:0;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--magenta)}
.documento ol.numerada{counter-reset:paso}
.documento ol.numerada li{position:relative;padding-left:30px;color:#3d3d3d;line-height:1.65;
  counter-increment:paso}
.documento ol.numerada li::before{content:counter(paso) '.';position:absolute;left:0;top:0;
  color:var(--magenta);font-weight:700}

/* Ficha de datos del documento y botón de descarga */
.ficha{background:var(--verde-papel);border:1px solid var(--linea);border-left:4px solid var(--verde);
  border-radius:var(--radio);padding:22px 24px;margin:0 0 30px}
.ficha dl{margin:0 0 18px;display:grid;gap:11px}
.ficha dl > div{display:grid;grid-template-columns:190px 1fr;gap:14px}
.ficha dt{color:var(--verde);font-weight:700;font-size:.86rem;text-transform:uppercase;
  letter-spacing:.03em}
.ficha dd{margin:0;color:#3d3d3d;font-size:.94rem}
@media(max-width:620px){
  .ficha dl > div{grid-template-columns:1fr;gap:2px}
  .ficha{padding:18px 18px}
}
.boton.secundario{background:#fff;color:var(--verde);border:1px solid var(--verde)}
.boton.secundario:hover{background:var(--verde-claro);color:var(--verde-osc)}
.descargar::before{content:'⬇';font-size:1.05em}

/* Índice de secciones */
.indice{background:var(--magenta-papel);border:1px solid var(--magenta-claro);
  border-radius:var(--radio);padding:22px 26px;margin:0 0 38px}
.indice h2{color:var(--magenta-osc);font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;
  margin:0 0 12px;display:block}
.indice ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.indice li{margin:0 0 7px;font-size:.92rem;break-inside:avoid}
.indice a{color:var(--verde);text-decoration:none}
.indice a:hover{text-decoration:underline}
.indice .mini{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--magenta-claro)}
@media(max-width:620px){.indice ol{columns:1}}

/* Tablas del aviso */
.documento .tabla-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);
  margin:0 0 16px}
.documento table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.documento th{background:var(--magenta);color:#fff;text-align:left;padding:11px 14px;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.documento td{padding:11px 14px;border-top:1px solid var(--linea);color:#3d3d3d;
  vertical-align:top;line-height:1.55}
.documento tbody tr:nth-child(even){background:var(--fila,#FBFBFB)}
.documento td.casilla{text-align:center;font-size:1.15rem;color:var(--gris);white-space:nowrap}

/* Aviso simplificado y fuentes */
.simplificado{background:var(--verde-papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 28px;margin-top:44px}
.simplificado h2{display:block}
.fuentes h2{display:block;font-size:.95rem}
.fuentes li{font-size:.9rem}
@media(max-width:620px){.simplificado{padding:20px 18px}}

.nota-documento{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--linea);
  color:var(--gris);font-size:.86rem;line-height:1.65}

/* Enlace discreto al aviso en el pie de las dos páginas */
.pie .legal{margin-top:10px;font-size:.82rem;opacity:.85}

/* Nota legal bajo los botones de formulario */
.llamado .aviso-legal{margin:14px 0 0;font-size:.8rem;color:rgba(255,255,255,.8);line-height:1.5}
.llamado .aviso-legal a{color:#fff;text-decoration:underline}

/* El menú de una sola liga (páginas de documento) sí se ve en celular */
@media(max-width:900px){
  .menu.simple{display:flex;margin-left:0}
  .menu.simple a{padding:8px 4px;font-size:.8rem}
  .barra .contenedor:has(.menu.simple){gap:10px}
}