/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Base */
body {
  background: #ffffff;
  min-height: 100vh;
  color: #111;
}

/* Header */
.top {
  padding: 16px;
}

.logo {
  font-size: 18px;       /* un poco más grande que antes (era 16px) */
  font-weight: 700;      /* más negrita que antes (era 600) */
  text-decoration: none; /* quita subrayado de link */
  color: #111;           /* mantiene el color original */
  display: inline-block; /* asegura que respete el layout */
}



/* Bloque principal (pantalla A móvil) */
.hero {
  max-width: 420px;
  margin: 24px auto 0 auto; /* antes px */
  padding: 0 20px;
}

.hero h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.claim {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
  margin-top: 28px;
  margin-bottom: 14px;
}



.hero h1 {
  margin-bottom: 0;
}


/* Botón */
.cta {
  display: inline-block;      
  background: #f05a28;
  color: white;
  text-decoration: none;
  padding: 14px 22px;         
  border-radius: 6px;
  font-size: 18px;            
  font-weight: 700;           
  margin-top: 40px;            /* un poco más abajo, solo un pequeño respiro */
  transition: background 0.3s;
}

.cta:hover {
  background: #e04e1f;
}

.proof-btn {
  display: block;
  text-decoration: none;
  background-color: #fafafa;      /* gris muy suave */
  border: 1px solid #e6e6e6;     /* borde discreto */
  border-radius: 6px;
  padding: 14px 20px;             /* margen interno consistente con columnas */
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  margin: 28px auto 0 auto;       /* centra en la columna */
  max-width: 420px;               /* ancho idéntico a los otros bloques de la columna */
  
  /* Esto asegura que respete la columna central en cualquier pantalla */
  width: 100%;                     
  box-sizing: border-box;

  transition: background 0.3s;
}

.proof-btn strong {
  font-weight: 700;
}

.proof-btn span {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: #555;
}

.proof-btn:hover {
  background-color: #f5f5f5;      /* sutil al pasar el dedo */
}

/* Sección inferior */
.about {
  max-width: 420px;
  margin: 40px auto 0 auto;
  padding: 0 20px;
  text-align: justify;
}

.about h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.about p {
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

body {
  background: white !important;
}

/* ===== MANIFIESTO MOBILE ===== */

.page-manifesto .top {
  padding: 16px;
}

.page-manifesto .logo {
  font-size: 16px;
}

.page-manifesto .manifest {
  max-width: 680px;      /* ancho de lectura */
  margin: 0 auto;        /* centra */
  padding: 24px 20px;    /* aire lateral en celular */
}



.page-manifesto .title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #f05a28;
}

.page-manifesto .subtitle {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 20px;
}

.page-manifesto .manifest-box {
  background: #f2f2f2;
  padding: 18px;
  margin: 24px 0;
  border-radius: 6px;
}


.page-manifesto .manifest-box p {
  font-size: 18px;
  text-align: justify;
  line-height: 1.5;
}
.page-manifesto .manifest-box p.concretamente {
  margin-top: 24px;
}
.page-manifesto .manifest-box p.sin-embargo {
  margin-top: 28px;
}

.page-manifesto .manifest-box p.contradiccion {
  margin-top: 32px;
  text-align: center;
  font-size: 17px;
}

/* Primer cuadro: urgencia */

.page-manifesto .highlight {
  color: #f05a28;       /* mismo naranja que los botones / barra lateral */
  font-weight: 600;     /* un poco más negrita que el texto normal */
  font-size: 22px;      /* ajustable si querés que se note más */
  line-height: 1.5;     /* mantiene legibilidad en celular */
  margin-top: 4px;     /* un poco de espacio arriba */
  margin-bottom: 20px;  /* un poco de espacio abajo */
}

.page-manifesto .proposal {
  background-color: #fff2e6;      /* naranja muy suave */
  border-left: 5px solid #f05a28; /* barra lateral naranja más intensa */
  padding: 16px 20px;
  border-radius: 6px;
  margin-top: 2px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.5;
}

/* Segundo cuadro: concientización y convocatoria */
.page-manifesto .proposal.secondary {
  background-color: #fff7f0;      /* naranja aún más suave para diferenciar */
  border-left: 5px solid #f05a28;
  padding: 16px 20px;
  border-radius: 6px;
  margin-top: 16px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.5;
}

/* ----- Párrafos después del recuadro gris ----- */
p.concretamente,
p.sin-embargo,
p.contradiccion {
  text-align: justify;
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: 16px;
  color: #333; /* asegura buena lectura */
}
p.contradiccion {
  text-align: center;   /* centrado */
  font-size: 17px;      /* un pelín más grande para destacar */
  line-height: 1.6;     /* misma altura que los otros párrafos */
  margin: 20px 0;       /* separación arriba y abajo */
  color: #333;
}

p.highlight {
  text-align: center;   /* centrado */
  font-size: 17px;      /* tamaño un pelín más grande */
  line-height: 1.6;     /* misma altura que los párrafos del resto del texto */
  margin: 8px 0 20px 0;       /* espacio arriba y abajo */
  color: #333;
  font-weight: 700;     /* opcional, para destacar */
}
p.proposal.secondary {
  text-align: justify;      /* párrafo justificado */
  background-color: #fff7f0;  
  border-left: 5px solid #f05a28;
  padding: 16px 20px;
  border-radius: 6px;
  margin-top: 16px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.5;
}

span.meesi {
  color: #f05a28;          /* naranja */
  font-weight: 700;         /* negrita */
}
/* Mantener cuadro secundario igual */
.page-manifesto .proposal.secondary {
  background-color: #fff7f0;      
  border-left: 5px solid #f05a28;
  padding: 16px 20px;
  border-radius: 6px;
  margin-top: 16px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.5;
  max-width: 680px;       /* ancho de columna central */
  margin-left: auto;
  margin-right: auto;
}

/* Justificación del párrafo dentro del cuadro */
.page-manifesto .proposal.secondary p {
  text-align: justify;
  margin: 0;              /* elimina márgenes que rompan la columna */
}

/* “meESI” en naranja y negrita */
span.meesi {
  color: #f05a28;
  font-weight: 700;
}

.page-manifesto .subtitle {
  font-size: 28px;       /* tamaño un poco más pequeño para que entre en una línea */
  font-weight: 400;      /* opcional, si querés mantenerlo ligero */
  margin-bottom: 20px;   /* mantener separación con el bloque de abajo */
}

/* Fondo suave para el bloque informativo */
.page-manifesto .manifest-box.mingitorio-bg {
  background-image: url('logos/mingitorio-puertas.png'); /* ruta a tu imagen */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  padding: 20px;
  border-radius: 6px;
  position: relative;
  color: #111;
}

.page-manifesto .manifest-box.mingitorio-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.7); /* capa semitransparente para legibilidad */
  border-radius: 6px;
  z-index: 0;
}

.page-manifesto .manifest-box p {
  position: relative;
  z-index: 1;
  text-align: justify;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px; /* aire moderado entre oraciones */
}
.article-container {
  display: block;
  max-width: 680px;
}

.article-title {
  color: #f05a28;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 16px;
  text-align: left;   /* alineado a la izquierda */
}

.article-img {
  width: 100%;
  max-width: 680px;
  display: block;
  margin: 0;          /* elimina auto para que la imagen y título compartan margen izquierdo */
}

/* Caja conceptual en naranja muy suave */
.page-manifesto .concept-box {
  background-color: #fff7f0;  /* mismo naranja suave que usás en secondary */
  padding: 18px;
  margin: 28px 0;
  border-radius: 6px;
}

.page-manifesto .concept-box p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
}

.page-manifesto a {
  text-decoration: none;
  color: inherit;
}
.unsam-cta {
  color: #e26a00;   /* tu naranja */
  font-weight: 600; /* opcional, pero ayuda a que se lea mejor */
}
/* Contenedor principal de la pantalla */
.page-manifesto .manifest {
  max-width: 680px;       /* ancho uniforme para todos los bloques */
  margin: 0 auto;         /* centra la columna */
  padding: 24px 20px;     /* aire lateral consistente */
  display: flex;
  flex-direction: column;
  gap: 16px;              /* espacio uniforme entre bloques */
}

/* Cada bloque se ajusta al ancho de la columna */
.page-manifesto .manifest-box,
.page-manifesto .proposal.secondary,
.page-manifesto .proof-btn {
  width: 100%;            /* toman el ancho completo de la columna */
  box-sizing: border-box; /* aseguran padding sin salirse del ancho */
  margin: 0;              /* elimina márgenes laterales que rompan la columna */
}

.page-manifesto p.cierre {
  text-align: left;
  margin: 18px 0 22px 0;
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .page-manifesto p.cierre {
    font-size: 15px;
    line-height: 1.7;
  }
}

.screen-end {
  background: #efefef;
  padding: 28px 16px 36px 16px;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.btn-volver {
  background: #f05a28;
  color: #000;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
}

/* SOLO HOME */
.hero {
  min-height: calc(100vh - 72px); /* altura pantalla menos header */
  position: relative;
}

.hero p:last-of-type {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}

/* Footer fijo al final de la pantalla */
.footer-cta {
  text-align: center;
  font-size: 0.85em;
  color: #000;
  margin-top: 12px;
}

.footer-cta a {
  color: #000;
  text-decoration: none;
}

/* Ajuste de títulos un poco más pequeños */
.page-manifesto .title {
  font-size: 24px;  /* antes era 28px, un pelín más chico */
  font-weight: 700;
  margin-bottom: 16px;
}

/* Ajuste de párrafo dentro de manifest-box */
.page-manifesto .manifest-box p {
  font-size: 16px;  /* consistente con otras pantallas */
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Separa el título Contacto del bloque anterior */
.page-manifesto h1.title.contacto {
  margin-top: 32px;  /* ajustá el valor hasta que quede visualmente equilibrado */
}

/* Primera pantalla: hero */
main.hero h1 {
  margin-bottom: 16px; /* espacio después del título */
  font-size: 28px;     /* un poquito más grande si querés */
}

main.hero p.claim {
  margin-bottom: 24px; /* espacio entre subtítulo y botón */
  font-size: 18px;     /* subtítulo un poco más grande */
  line-height: 1.4;    /* hace que la línea respire */
}

/* Botón principal de la primera pantalla */
main.hero a.cta {
  padding: 14px 28px;      /* más grande y fácil de tocar en celular */
  font-size: 18px;          /* letra más grande */
  border-radius: 8px;       /* bordes un poco más redondeados */
}

/* Primera pantalla: hero */
main.hero {
  padding-top: 60px !important;    /* mueve todo un poquito hacia abajo */
  padding-bottom: 30px !important; /* espacio debajo del botón */
}

main.hero h1 {
  margin-bottom: 20px !important;  /* espacio después del título */
  font-size: 28px !important;      /* tamaño del título */
}

main.hero p.claim {
  margin-bottom: 24px !important;  /* espacio entre subtítulo y botón */
  font-size: 18px !important;      /* tamaño del subtítulo */
  line-height: 1.5 !important;     /* aire en la línea */
}

main.hero a.cta {
  display: inline-block !important;
  padding: 16px 32px !important;   /* botón más grande */
  font-size: 20px !important;      /* letra más grande */
  border-radius: 8px !important;   /* bordes redondeados */
  text-decoration: none !important;
}

/* Primera pantalla: hero ajustada */
main.hero h1 {
  font-size: 28px;
  margin-bottom: 16px;
}

main.hero p.claim {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 12px;
  margin-bottom: 24px;
}

main.hero a.cta {
  display: inline-block;
  padding: 16px 32px;
  font-size: 20px;
  border-radius: 8px;
  margin-top: 12px;
  text-decoration: none;
}
/* Mantener título en su lugar */
main.hero h1 {
  font-size: 28px;       
  margin-bottom: 16px;   /* espacio debajo del título, pequeño */
}

/* Bajar y espaciar más el subtítulo */
main.hero p.claim {
  font-size: 18px;       
  line-height: 1.5;
  margin-top: 40px;      /* mucho más abajo del título */
  margin-bottom: 32px;   /* espacio antes del botón */
}

/* Bajar y agrandar el botón */
main.hero a.cta {
  display: inline-block;
  padding: 18px 36px;    /* botón más grande */
  font-size: 20px;       
  border-radius: 8px;
  margin-top: 24px;      /* más espacio respecto al subtítulo */
  text-decoration: none;
}