:root{
  --a4w:3508px;
  --a4h:4961px;
  --cabH:1580px;
  --pieH:380px;
  --color-bloque:#7ecad3;
  --cyan:#7bd3db;
  --black:#0b0b0b;
}
.poster-scale{
  width:var(--pageW);
  height:var(--pageH);
}

#poster{
  width:var(--pageW);
  height:var(--pageH);
}

.bloque{
  height:calc(var(--pageH) - var(--cabH) - var(--pieH));
}



body{
  background:#f4f5f6;
  font-family:Inter,system-ui,sans-serif;
}

.wrap{
  max-width:1200px;
  margin:30px auto;
  padding:0 12px;
}

/* ───────────────── PREVIEW ───────────────── */
.preview-fixed{
  width:420px;
  aspect-ratio:2480/3508;
  background:#eaeaea;
  border-radius:10px;
  border:1px solid #ccc;
  overflow:hidden;

  /* Siempre visible al hacer scroll */
  position: sticky;
  top: 16px;
  align-self: flex-start;
}

.poster-scale{
  position:absolute;
  width:var(--a4w);
  height:var(--a4h);
  transform-origin:top left;
}

/* ───────────────── POSTER ───────────────── */
#poster{
  width:var(--a4w);
  height:var(--a4h);
  background:#fff;
  position:relative;
  overflow:hidden;
}

/* ───────────────── CABECERA ───────────────── */
.cabecera{
  height:var(--cabH);
  position:relative;
  background:#ddd;
}

.cabecera-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:1;
}

.cabecera-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent 55%,
    rgba(255,0,0,.7)
  );
  z-index:2;
  opacity: 0.25; /* ajusta a tu gusto */
}



/* ───── IH RECORTE (GESTO GRÁFICO) ───── */
.ih-overlay{
  position:absolute;
  top:0;
  right:0;
  width:420px;
  height:100%;
  background:#000;
  opacity:.18;
  pointer-events:none;
  z-index:3;

  clip-path: polygon(
    25% 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

@supports not (clip-path: polygon(0 0)) {
  .ih-overlay{ clip-path:none; }
}

/* ───────────────── TARJETAS ───────────────── */
.cards{
  position:absolute;
  right:120px;
  top:1400px;
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:20px;
  z-index:4;
  letter-spacing: 0.7px;
  text-align:center;
  font-family: 'Anton', Inter, system-ui, sans-serif;


}

.card-black{
  background:#000;
  color:#fff;
  padding:42px;
}

.smalltop{
  font-weight:700;
  font-size:34px;
  /* Día de la semana = mismo color del bloque */
  color:#f4f4f4 !important;
}

.date-big{
  font-size:80px;
  font-weight:900;
  color:var(--cyan);
}

.date-month{
  font-size:46px;
  font-weight:800;
}

.date-year{
  font-size:40px;
  font-weight:700;
}

.date-time{
  margin-top:14px;
  font-size:26px;
}

.place-title{
  font-size:40px;
  font-weight:800;
  /* Lugar = mismo color del bloque */
    color:var(--cyan) !important;
}

.place-text{
  font-size:32px;
  white-space:pre-wrap;
  /* Lugar = mismo color del bloque */
   color:#f4f4f4 !important;
}

/* ───────────────── BLOQUE CENTRAL ───────────────── */
.bloque{
  background:var(--color-bloque);
  height:calc(var(--a4h) - var(--cabH) - var(--pieH));
  padding:150px 170px;
  position:relative;
  display:flex;
  flex-direction:column;
}

.tipo{
  letter-spacing:4px;
  font-weight:700;
  color:#fff; /* luego lo sobreescribe JS según radios */
  font-size:62px;
  font-family: 'Anton', Inter, system-ui, sans-serif;
}

.titulo{
  font-size:140px;
  font-weight:900;
  line-height:1.1;
  letter-spacing: 0.5px;
  margin:40px 0 70px;
  max-width:1500px;
  white-space:pre-wrap;
  color:#000; /* luego lo sobreescribe JS según radios */

  font-family: 'Anton', Inter, system-ui, sans-serif;
}


.cols{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:80px;
  border-top: 2px solid #000;
  padding-top: 70px;
}

.col-text{
  font-size:60px;
  line-height:1.45;
  white-space:pre-wrap;
  color:#000; /* luego lo sobreescribe JS según radios (col1/col2) */
}

.sesiones{
  font-size:50px;
  white-space:pre-wrap;
  color:#fff; /* luego lo sobreescribe JS según radios (col3) */
}

/* ───────────────── INFO ───────────────── */
.info{
  display:flex;
  gap:30px;
  align-items:flex-start;
  margin-top:auto;
}

.info-icon{
  width:80px;
  height:80px;
  border:10px solid #000;
  border-top:none;
  border-right:none;
  transform:rotate(-135deg);
  flex-shrink:0;
  margin-right:50px;
}

.flecha {
  width: 100px;
  margin-top: -10px;
  height: auto;
}

.info-text{
  font-size:42px;
  white-space:pre-wrap;
}

/* ───────────────── PIE ───────────────── */
.pie{
  height:var(--pieH);
  padding:60px 170px;
  background:#fff;
}

.pie-title{
  font-weight:700;
  margin-bottom:14px;
  font-size: 20px;
}

/* Logos: mejor distribución si hay varios */
.logos{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}

.logos img{
  height:100px;
  margin-right:0;
  object-fit:contain;
}

/* Organiza: logos a la derecha */
#logos_organiza{
  justify-content:flex-end;
}

/* ───────────────── FORMULARIO: estilos de radios (sin romper Bootstrap) ───────────────── */

/* Mantén el margen base de labels generales */
.form-label{
  margin-bottom:6px;
}

/* Solo los bloques mb-3 que contienen radios inline se vuelven una fila */
.card-body .mb-3:has(.form-check-inline){
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}

/* Texto "Color del texto (...)" */
.card-body .mb-3:has(.form-check-inline) > .form-label{
  margin:0;
  font-size:0.8rem;
  opacity:0.75;
  white-space:nowrap;
}

/* Radios Blanco / Negro */
.form-check-inline{
  margin:0 0.75rem 0 0;
}

.form-check-label{
  font-size:0.75rem;
  line-height:1;
}





.form-control {
  font-size: 13px !important;
}




.col-text em,
.sesiones em,
.info-text em{
  font-style: italic;
  opacity: 0.9;
}



#logos_colabora{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
}

.logos-box{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  padding:8px 0;
}

.logos-box img{
  height:100px;
  object-fit:contain;
}




/* ───────────────── LOGO IH ───────────────── */
.ih-logo{
  position: absolute;
  top: 0;
  right: 70px;
  height: 101%;          /* 👈 ocupa todo el alto de la cabecera */
  width: auto;           /* mantiene proporción del SVG */
  max-width: 35%;        /* seguridad: evita que invada demasiado */
  z-index: 3;            /* encima del fondo y overlays */
  pointer-events: none;
  object-fit: contain;
}