/* ============================================================
   Humanismo y Democracia — hoja de estilos del sitio público
   Tokens + clases de componentes. El responsive vive al final,
   en un único bloque @media; sin !important porque ya no
   competimos contra estilos inline.
   ============================================================ */

:root{
  /* Paleta */
  --cream:#f4efe6;
  --tan:#dad3c0;
  --ink:#1a1712;
  --green:#3c4126;
  --accent:#d77f28;
  --line:rgba(26,23,18,.14);

  /* Tinta sobre claro */
  --ink-80:rgba(26,23,18,.8);
  --ink-72:rgba(26,23,18,.72);
  --ink-70:rgba(26,23,18,.7);
  --ink-66:rgba(26,23,18,.66);
  --ink-65:rgba(26,23,18,.65);
  --ink-62:rgba(26,23,18,.62);
  --ink-60:rgba(26,23,18,.6);
  --ink-55:rgba(26,23,18,.55);

  /* Tarjeta verde (evento) */
  --gc-text:#e7e3d4;
  --gc-heading:#f2eee0;
  --gc-label:#a9ac8f;
  --gc-meta:#d3d2bd;
  --gc-body:#bcbca6;
  --gc-muted:#9a9a86;
  --gc-field-bg:rgba(0,0,0,.14);
  --gc-field-border:rgba(231,227,212,.24);
  --gc-btn:#cfceb8;
  --gc-btn-ink:#20261c;
  --gc-error:#e0a39a;

  /* Pie oscuro */
  --foot-text:#cbc7ba;
  --foot-strong:rgba(203,199,186,.7);
  --foot-label:rgba(203,199,186,.5);
  --foot-line:rgba(203,199,186,.14);

  /* Tipografías */
  --serif:'Newsreader',Georgia,serif;
  --display:'Playfair Display',Georgia,serif;

  /* Medidas */
  --wrap:1180px;
  --wrap-narrow:960px;
  --wrap-prose:820px;
  --pad-x:40px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
::placeholder{color:rgba(26,23,18,.38)}
input[data-dark]::placeholder{color:rgba(231,227,212,.5)}
input:focus{outline:none}

/* ---------- Utilidades de layout ---------- */
.page{width:100%;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.wrap--prose{max-width:var(--wrap-prose)}
.section{padding-top:72px;padding-bottom:76px}
.section--divide{border-bottom:1px solid var(--line)}
.bg-tan{background:var(--tan)}
.bg-cream{background:var(--cream)}

/* ---------- Tipografía compartida ---------- */
.eyebrow{margin:0 0 20px;font:600 12px/1 var(--serif);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}
.eyebrow--sm{font-size:11px;letter-spacing:.18em}

.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:38px}
.sec-head--tight{margin-bottom:26px}
.sec-num{font:400 13px/1 var(--serif);color:var(--accent);letter-spacing:.05em}
.sec-title{margin:0;font:500 35px/1.1 var(--serif);letter-spacing:-.01em}
.sec-intro{margin:0 0 40px;max-width:560px;font:400 16.5px/1.7 var(--serif);color:var(--ink-72)}

.conv-list-head{display:flex;align-items:baseline;justify-content:space-between;
  margin:64px 0 8px;padding-top:20px}
.conv-list-head h3{margin:0;font:500 26px/1.1 var(--serif)}
.conv-list-head span{font:400 14px/1 var(--serif);color:var(--ink-55)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font:400 15px/1 var(--serif);cursor:pointer;border:1px solid transparent;
  padding:15px 26px;transition:background .18s,color .18s,border-color .18s}
.btn--dark{background:var(--ink);color:var(--cream)}
.btn--dark:hover{background:#2c2820}
.btn--outline{background:transparent;color:var(--ink);border-color:rgba(26,23,18,.55)}
.btn--outline:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--cream{background:var(--gc-btn);color:var(--gc-btn-ink)}
.btn--cream:hover{background:#dcdbc6}
.btn--sm{padding:13px 22px;font-size:14.5px}
.btn--block{width:100%;justify-content:center;padding:14px}
button.link-btn{width:100%;background:none;border:none;text-align:left;cursor:pointer;
  font-family:var(--serif);color:inherit;padding:0}

/* ============================================================
   Encabezado principal + navegación
   ============================================================ */
.site-header{position:relative;background:var(--cream);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:22px;padding-bottom:22px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:44px;width:auto;display:block}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin:-10px;
  color:var(--ink);line-height:0}
.nav-toggle svg{display:block}
.nav-toggle .icon-close{display:none}
.site-header.nav-open .nav-toggle .icon-open{display:none}
.site-header.nav-open .nav-toggle .icon-close{display:block}

.site-nav{display:flex;align-items:center;gap:30px;font:400 15px/1 var(--serif)}
.site-nav a{text-decoration:none;color:var(--ink-78,rgba(26,23,18,.78))}

/* Encabezado simple de páginas internas */
.subheader{background:var(--cream);border-bottom:1px solid var(--line)}
.subheader__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:22px;padding-bottom:22px}
.subheader__inner .brand img{height:40px}
.back-link{text-decoration:none;font:400 15px/1 var(--serif);color:var(--ink-70)}

/* ============================================================
   Hero
   ============================================================ */
.hero__inner{display:flex;gap:56px;align-items:center;padding-top:74px;padding-bottom:78px}
.hero__main{flex:1 1 auto;max-width:640px}
.hero__title{margin:0;font:500 62px/1.04 var(--display);letter-spacing:-.012em;color:var(--ink)}
.hero__lead{margin:30px 0 0;max-width:400px;font:400 18px/1.6 var(--serif);color:var(--ink-72)}
.hero__cta{display:flex;gap:14px;margin-top:34px}
.hero__aside{flex:0 0 300px;align-self:stretch;display:flex;align-items:center}
.hero__quote-wrap{padding-left:34px;border-left:1px solid rgba(26,23,18,.22)}
.hero__quote{margin:0;font:500 21px/1.4 var(--serif);font-style:italic;color:var(--ink)}
.hero__quote-cite{margin:22px 0 0;font:400 15px/1.6 var(--serif);color:var(--ink-60)}

/* ============================================================
   Quiénes somos
   ============================================================ */
.who-grid{display:grid;grid-template-columns:1.35fr 1fr;column-gap:64px;row-gap:0}
.who-cell{border-top:1px solid var(--line);padding:26px 0 30px}
.who-cell p{margin:0;font:400 16.5px/1.72 var(--serif);color:var(--ink-72)}
.who-cell--lead p{color:var(--ink-80)}
.who-tag{display:block;margin-bottom:8px;font:400 12px/1 var(--serif);color:var(--accent);letter-spacing:.06em}
.who-cell h3{margin:0 0 6px;font:600 18px/1.3 var(--serif)}
.who-cell h3 + p{font:400 16px/1.55 var(--serif);color:var(--ink-66)}

/* ============================================================
   Tarjeta de evento (próximo conversatorio)
   ============================================================ */
.event-card{background:var(--green);color:var(--gc-text);display:grid;
  grid-template-columns:1fr 400px;gap:0}
.event-card--empty{display:block;padding:36px 46px}
.event-card__body{padding:48px 46px;display:flex;flex-direction:column;justify-content:center}
.event-card__eyebrow{margin:0 0 22px;font:600 12px/1 var(--serif);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gc-label)}
.event-card__title{margin:0 0 28px;font:600 30px/1.22 var(--serif);color:var(--gc-heading)}
.event-meta{display:flex;flex-wrap:wrap;gap:14px 30px;margin-bottom:26px;
  font:400 17px/1 var(--serif);color:var(--gc-meta)}
.event-meta span{display:inline-flex;align-items:center;gap:10px}
.event-card__desc{margin:0;max-width:420px;font:400 16.5px/1.62 var(--serif);color:var(--gc-body)}
.event-card__note{margin:0;font:400 17px/1.6 var(--serif);color:var(--gc-meta)}

.event-card__form{padding:34px;border-left:1px solid rgba(231,227,212,.16)}

/* ============================================================
   Formularios
   ============================================================ */
.form-title{margin:0 0 20px;font:500 18px/1 var(--serif);color:var(--gc-heading)}
.field{display:block;margin-bottom:8px;font:600 11px/1 var(--serif);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gc-label)}
.input{width:100%;padding:12px 13px;font:400 15px/1 var(--serif)}
.input--dark{margin-bottom:18px;background:var(--gc-field-bg);
  border:1px solid var(--gc-field-border);color:var(--gc-text)}
.input--dark.mb-tight{margin-bottom:16px}
.input--light{background:rgba(255,255,255,.55);border:1px solid rgba(26,23,18,.22);color:var(--ink);
  padding:14px 15px}
.check-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px;cursor:pointer;
  font:400 12.5px/1.5 var(--serif);color:#b7b7a1}
.check-row--light{margin-bottom:16px;font-size:13px;color:var(--ink-62)}
.check-row input{margin-top:2px;width:15px;height:15px;flex:none;accent-color:var(--accent);cursor:pointer}
.check-row a{color:var(--gc-text)}
.check-row--light a{color:var(--accent)}
.form-error{min-height:18px;font:400 12.5px/1.4 var(--serif)}
.form-error--dark{margin:6px 0 10px;color:var(--gc-error)}
.form-error--light{margin:14px 0 0;font-size:13px;color:#a1443a}
.form-hint{margin:14px 0 0;font:400 12px/1.5 var(--serif);color:var(--gc-muted);text-align:center}
.form-legal{margin:16px 0 0;font:400 14.5px/1.5 var(--serif);color:var(--ink-55)}

button[disabled]{opacity:.6;cursor:progress}

/* Estado "hecho" */
.done{display:none;flex-direction:column}
.done--dark{height:100%;min-height:230px;justify-content:center;text-align:center}
.done--dark .done__title{margin:0 0 8px;font:600 20px/1.3 var(--serif);color:var(--gc-heading)}
.done--dark .done__text{margin:0;font:400 15px/1.5 var(--serif);color:var(--gc-body)}
.done--dark .done__text strong{color:var(--gc-text);font-weight:500}
.done--dark .done__again{margin:20px 0 0;font:400 13px/1.5 var(--serif);color:var(--gc-muted)}
.done--dark .done__again a{color:#cfceb8;text-decoration:underline}
.done--light{padding:26px 28px;border:1px solid rgba(26,23,18,.2)}
.done--light .done__title{margin:0 0 6px;font:500 19px/1.3 var(--serif)}
.done--light .done__text{margin:0;font:400 15px/1.5 var(--serif);color:var(--ink-65)}
.done--light .done__again{margin:14px 0 0;font:400 13px/1.5 var(--serif);color:var(--ink-55)}
.done--light .done__again a{color:var(--accent);text-decoration:underline}

/* Validación custom (JS marca .hyd-invalid) */
input:invalid{box-shadow:none}
input.hyd-invalid{border-color:#b74a3f;background:rgba(183,74,63,.06)}
input[data-dark].hyd-invalid{border-color:#e0a39a;background:rgba(224,163,154,.10)}
input[type="checkbox"].hyd-invalid{outline:2px solid #b74a3f;outline-offset:2px}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px transparent inset !important;
  transition:background-color 9999s ease-in-out 0s}
input[data-dark]:-webkit-autofill{-webkit-text-fill-color:#e7e3d4 !important}

/* ============================================================
   Acordeón (conversatorios / boletines)
   ============================================================ */
.conv-item{border-top:1px solid var(--line)}
.conv-head{display:grid;grid-template-columns:76px 1fr auto;gap:28px;align-items:center;padding:24px 0}
.conv-head--wide{grid-template-columns:96px 1fr auto;padding:26px 0}
.conv-head--news{grid-template-columns:150px 1fr auto;padding:26px 0}
.conv-date p{margin:0}
.conv-date__mes{margin:0 0 2px !important;font:400 13px/1 var(--serif);color:var(--accent)}
.conv-date__dia{font:500 27px/1 var(--serif)}
.conv-date__anio{margin:2px 0 0 !important;font:400 13px/1 var(--serif);color:rgba(26,23,18,.4)}
.conv-date__num{margin:0 0 3px !important;font:600 13px/1 var(--serif);letter-spacing:.06em;color:var(--accent)}
.conv-date__periodo{font:500 19px/1.2 var(--serif)}
.conv-info h4{margin:0 0 5px;font:600 18px/1.3 var(--serif)}
.conv-head--wide .conv-info h4,.conv-head--news .conv-info h4{font-size:19px}
.conv-excerpt{margin:0;font:400 15px/1.5 var(--serif);color:var(--ink-60);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:600px}
.conv-expositor{margin:0 0 4px;font:400 13.5px/1.4 var(--serif);color:var(--accent)}
.conv-cta{display:inline-flex;align-items:center;gap:8px;font:400 13.5px/1 var(--serif);
  color:var(--accent);white-space:nowrap}

/* Item completo como link (reemplaza al acordeón — cada conversatorio tiene URL propia) */
.conv-link{display:block;text-decoration:none;color:inherit;transition:background .15s}
.conv-link:hover{background:rgba(215,127,40,.04)}
.conv-link:hover .conv-cta{color:var(--ink)}
.chev{display:inline-block;transition:transform .2s}
.open .chev{transform:rotate(180deg)}

[data-collapse]{display:none}
.open [data-collapse]{display:grid}
.conv-body{grid-template-columns:1fr 1fr;gap:40px;padding:4px 0 34px;align-items:start}
.conv-body--wide{gap:44px;padding:4px 0 38px}
.conv-body--single{grid-template-columns:1fr;gap:0;max-width:680px;padding:2px 0 38px}
.conv-body p{margin:0;font:400 16.5px/1.72 var(--serif);color:var(--ink-80)}
.conv-body__text{font:400 16.5px/1.72 var(--serif);color:rgba(26,23,18,.82)}

.video{position:relative;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video--placeholder{background:#20261c;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px}
.video--placeholder .play{display:inline-flex;width:52px;height:52px;border-radius:50%;
  background:var(--accent);align-items:center;justify-content:center}
.video--placeholder .cap{font:400 13px/1 var(--serif);color:#9a9a86}

.conv-foot{border-top:1px solid var(--line);padding-top:30px}
.archive-end{border-top:1px solid var(--line)}

/* Cuerpo de boletín (una sola columna con contenido largo) */
.news-body{grid-template-columns:1fr;gap:0;max-width:680px;padding:2px 0 38px}
.news-body__lead{margin:0 0 20px;font:400 16.5px/1.72 var(--serif);color:rgba(26,23,18,.82)}
.news-body__content{font:400 16.5px/1.72 var(--serif);color:rgba(26,23,18,.82)}

/* ============================================================
   Boletín (sección en portada)
   ============================================================ */
.news{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding-top:66px;padding-bottom:70px}
.news__intro{max-width:440px}
.news__title{margin:0 0 18px;font:500 38px/1.08 var(--serif);letter-spacing:-.01em}
.news__desc{margin:0;font:400 16px/1.65 var(--serif);color:var(--ink-70)}
.bol-fields{display:flex;gap:14px;margin-bottom:14px}
.bol-fields .input{flex:1;min-width:0;margin-bottom:0}

/* ============================================================
   Pie de página
   ============================================================ */
.site-footer{background:var(--ink);color:var(--foot-text)}
.site-footer__inner{padding-top:66px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:56px}
.footer-brand{max-width:340px}
.footer-brand img{height:52px;width:auto;display:block;margin-bottom:20px}
.footer-brand p{margin:0;font:400 15px/1.6 var(--serif);color:rgba(203,199,186,.7)}
.footer-col__title{margin:0 0 18px;font:600 11px/1 var(--serif);letter-spacing:.18em;
  text-transform:uppercase;color:var(--foot-label)}
.footer-col p{margin:0 0 12px;font:400 15px/1 var(--serif)}
.footer-col p:last-child{margin:0}
.footer-col a{text-decoration:none}
.footer-bottom{border-top:1px solid var(--foot-line);padding:22px 0;display:flex;
  justify-content:space-between;gap:20px;font:400 13.5px/1.4 var(--serif);color:var(--foot-label)}
.footer-bottom a{text-decoration:none;color:var(--foot-strong)}
.footer-bottom .links{display:flex;gap:22px}

/* Pie mínimo (páginas internas) */
.mini-footer{background:var(--ink);color:var(--foot-label)}
.mini-footer__inner{padding-top:24px;padding-bottom:24px;display:flex;justify-content:space-between;
  gap:20px;font:400 13.5px/1.4 var(--serif)}
.mini-footer a{text-decoration:none;color:var(--foot-strong)}

/* ============================================================
   Páginas internas (archivo / legal)
   ============================================================ */
.page-main{padding-top:60px;padding-bottom:90px}
.page-title{margin:0 0 14px;font:500 46px/1.06 var(--display);letter-spacing:-.012em}
.page-intro{margin:0 0 48px;max-width:620px;font:400 17px/1.65 var(--serif);color:var(--ink-66)}

/* ============================================================
   Contenido legal (privacidad)
   ============================================================ */
.legal-meta{margin:0 0 44px;font:400 16px/1.6 var(--serif);color:var(--ink-60)}
.legal-section{border-top:1px solid var(--line);padding:30px 0}
.legal-section h2{margin:0 0 12px;font:600 21px/1.3 var(--serif)}
.legal-section p{margin:0;font:400 16.5px/1.72 var(--serif);color:var(--ink-78,rgba(26,23,18,.78))}
.legal-section p + p,.legal-section p + ul{margin-top:14px}
.legal-section ul + p{margin-top:14px}
.legal-section p + .rights-grid{margin-top:14px}
.legal-section .rights-grid + p{margin-top:22px}
.legal-section a{color:var(--accent)}
.legal-section ul{margin:0;padding-left:22px;font:400 16.5px/1.8 var(--serif);color:rgba(26,23,18,.78)}
.legal-lead{margin-bottom:14px !important}
.rights-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.right-item{border-top:1px solid var(--line);padding:14px 0}
.right-item h3{margin:0 0 4px;font:600 16px/1.3 var(--serif)}
.right-item p{margin:0;font:400 15px/1.55 var(--serif);color:var(--ink-65)}
.legal-back{margin-top:40px}

/* Espaciados sueltos reutilizables */
.mt-24{margin-top:24px}
.mt-40{margin-top:40px}

/* ============================================================
   RESPONSIVE / MÓVIL  — un único breakpoint principal
   ============================================================ */
@media (max-width:820px){
  :root{--pad-x:20px}

  /* Header: nav colapsable con hamburguesa */
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:6px 20px 14px;box-shadow:0 12px 24px rgba(26,23,18,.08)}
  .site-header.nav-open .site-nav{display:flex}
  .site-nav a{padding:13px 0;border-top:1px solid var(--line)}
  .site-nav a:first-child{border-top:0}

  /* Titulares fluidos */
  .hero__title{font-size:clamp(34px,9vw,62px);line-height:1.06}
  .sec-title{font-size:clamp(26px,6.5vw,38px)}
  .news__title{font-size:clamp(26px,6.5vw,38px)}
  .page-title{font-size:clamp(30px,8vw,46px)}

  /* Menos aire vertical */
  .section{padding-top:52px;padding-bottom:56px}

  /* Hero a una columna */
  .hero__inner{flex-direction:column;gap:34px;align-items:stretch;
    padding-top:52px;padding-bottom:54px}
  .hero__aside{flex:1 1 auto}
  .hero__quote-wrap{padding-left:0;border-left:0;border-top:1px solid rgba(26,23,18,.18);padding-top:26px}
  .hero__cta{flex-wrap:wrap}
  .hero__cta .btn{flex:1 1 160px;justify-content:center}

  /* Grids a una columna */
  .who-grid{grid-template-columns:1fr;column-gap:0}
  .event-card{grid-template-columns:1fr}
  .event-card__form{border-left:0;border-top:1px solid rgba(231,227,212,.16)}
  .news{grid-template-columns:1fr;gap:34px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .rights-grid{grid-template-columns:1fr}

  /* Barras inferiores apiladas */
  .footer-bottom,.mini-footer__inner{flex-direction:column;align-items:flex-start;gap:10px}

  /* Acordeón: cabecera sin columna fija ni label, cuerpo a 1 columna */
  .conv-head,.conv-head--wide,.conv-head--news{grid-template-columns:auto 1fr auto;gap:14px}
  .conv-head > div{min-width:0}
  .conv-head .toggle-label{display:none}
  .open .conv-body{grid-template-columns:1fr;gap:22px}

  /* Formulario del boletín: inputs apilados */
  .bol-fields{flex-direction:column}

  /* Inputs a 16px: evita el zoom automático de iOS */
  input,textarea,select{font-size:16px}
}

@media (max-width:520px){
  .event-card__body{padding:34px 24px}
  .event-card__form{padding:28px 24px}
  .hero__cta .btn{flex:1 1 100%}
}