/* PANAMA CROSSROADS — /actividades/expresa-tu-arte/ (convocatoria). Loads after main.css.
   Todo sobre la textura del body, copia en blanco. Reutiliza el vocabulario de
   /entradas/: la píldora morada con amarillo (FASE 2) en los
   premios, el degradado teal de General en el cronograma, el
   amarillo de los COMPRAR en los números. El formulario va en tarjeta blanca (como el de
   /se-de-los-primeros/) para que los campos se lean sin pelear con la textura.
   entradas.css entra entero por @import para reutilizar tal cual sus píldoras
   COMPRAR (.tier__buy); sólo trae clases ent-* y tier*, nada que toque esta página. */

@import url(/css/entradas.css);

:root {
  --eta-purple: #6C1BD1;
  --eta-yellow: #F4F343;
  --eta-ink: #16131C;
  --eta-error: #C4113F;
}

/* A1 — hero -------------------------------------------------------------- */

.eta-hero { position: relative; overflow: hidden; }
.eta-hero__inner {
  position: relative;
  max-width: 900px;
  padding-top: 70px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  color: var(--white);
}
.eta-hero__title {
  font-family: kikuta, sans-serif;
  font-size: 7.4em;              /* 126px */
  line-height: .9;
  text-transform: uppercase;
  color: var(--white);
}
/* la segunda línea en el amarillo de marca */
.eta-hero__title span {
  display: block;
  color: var(--eta-yellow);
  text-shadow: 0 6px 0 var(--eta-purple);
}
.eta-hero__lead {
  max-width: 760px;
  font-size: 1.45em;
  line-height: 1.4;
}
/* .tier__buy mide todo en --k (1px a ancho completo en la .ent-box de entradas);
   fuera de esa caja hay que dárselo: el CTA a 1.5× el COMPRAR, el envío a 1.25× */
.eta-cta { --k: 1.5px; }
.eta-hero__dates {
  font-family: config, sans-serif;
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

/* secciones ---------------------------------------------------------------- */

.eta-sec { position: relative; overflow: hidden; padding: 50px 0; color: var(--white); }
/* la copia pinta encima de la capa .deco, que va antes en el DOM */
.eta-sec > .container { position: relative; }
.eta-box { max-width: 1000px; }
.eta-box--narrow { max-width: 790px; }
.eta-title {
  margin-bottom: 34px;
  font-family: kikuta, sans-serif;
  font-size: 4.2em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}
.eta-text {
  font-size: 1.35em;
  line-height: 1.45;
  text-align: center;
}
.eta-text + .eta-text { margin-top: 1em; }

/* A2 — premios */
.eta-premios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.eta-premio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 30px 32px;
  border-radius: 31px;
  background: var(--eta-purple);
  text-align: center;
  box-shadow: 0 10px 24px -8px rgba(70, 0, 55, .35);
}
.eta-premio strong {
  font-family: kikuta, sans-serif;
  font-size: 3.4em;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--eta-yellow);
}
.eta-premio span { font-size: 1.15em; line-height: 1.4; }

/* A4 — mecánica */
.eta-pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: paso;
}
.eta-pasos li {
  counter-increment: paso;
  padding: 0 6px;
  font-size: 1.15em;
  line-height: 1.45;
  text-align: center;
}
.eta-pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 86px; height: 86px;
  margin: 0 auto 18px;
  padding-top: .12em;            /* las mayúsculas de kikuta van altas en su caja */
  border-radius: 50%;
  background: var(--eta-yellow);
  color: var(--eta-purple);
  font-family: kikuta, sans-serif;
  font-size: 3em;
  line-height: 1;
}

/* A5 — cronograma: cards blancas con la fecha en una franja de color
   (el degradado teal de General de /entradas/; el verde liso es solo Heineken/VIP). */
.eta-crono {
  display: grid;
  gap: 22px;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.eta-crono__card {
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  color: #111;
  box-shadow: 0 10px 28px rgba(70, 0, 55, .28);
}
.eta-crono__date {
  margin: 0;
  padding: 26px 26px 18px;           /* Kikuta's caps sit high: more room on top */
  background: linear-gradient(90deg, #4EC8A2, #4EC8CF);
  color: #111;
  font-family: kikuta, sans-serif;
  font-size: 2em;
  line-height: 1.05;
  text-transform: uppercase;
}
.eta-crono__what {
  margin: 0;
  padding: 22px 26px 26px;
  font-family: config, sans-serif;
  font-size: 1.15em;
  line-height: 1.4;
}

/* A6 — formulario ------------------------------------------------------- */

.eta-card {
  padding: 44px 48px;
  border: 2px solid #EEEEF0;
  border-radius: 31px;
  background: #fff;
  color: var(--eta-ink);
  box-shadow: 0 14px 34px -12px rgba(70, 0, 55, .35);
}
.eta-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.eta-fields:disabled { opacity: .55; }
.eta-banner {
  margin-bottom: 28px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--eta-purple);
  color: var(--eta-yellow);
  font-family: kikuta, sans-serif;
  font-size: 1.3em;
  line-height: 1.15;
  text-align: center;
}
.eta-note { font-size: .95em; line-height: 1.4; color: #55515E; }
.eta-req { color: var(--eta-error); }
.eta-group {
  margin: 34px 0 6px;
  padding-bottom: 10px;
  border-bottom: 2px solid #EEEEF0;
  font-family: kikuta, sans-serif;
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--eta-purple);
}

.eta-field { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.eta-field > label,
.eta-field > legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
  font-size: 1em;
  line-height: 1.35;
}
.eta-field :is(input[type=text], input[type=tel], input[type=email], input[type=number]),
.eta-field textarea {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 2px solid #D9D7E0;
  border-radius: 12px;
  background: #fff;
  color: var(--eta-ink);
  font: inherit;
  font-size: 1em;
  line-height: 1.35;
  transition: border-color .15s ease;
}
.eta-field textarea { resize: vertical; min-height: 7em; }
.eta-field input::placeholder { color: #8E8A97; }
.eta-card :focus-visible { outline: 3px solid var(--eta-purple); outline-offset: 2px; }
.eta-field input:focus, .eta-field textarea:focus { border-color: var(--eta-purple); }
.eta-field.is-invalid :is(input[type=text], input[type=tel], input[type=email], input[type=number]),
.eta-field.is-invalid textarea { border-color: var(--eta-error); }
.eta-hint { margin-top: 6px; font-size: .9em; line-height: 1.4; color: #55515E; }
.eta-error { margin-top: 6px; font-size: .92em; font-weight: 600; line-height: 1.4; color: var(--eta-error); }
.eta-error:empty { display: none; }
.eta-sub { margin-top: 12px; padding-left: 16px; border-left: 3px solid var(--eta-yellow); }

/* radios como píldoras: el input nativo sigue ahí (foco, flechas, lector) */
.eta-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.eta-chip { position: relative; cursor: pointer; }
.eta-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.eta-chip span {
  display: block;
  padding: 11px 18px;
  border: 2px solid #D9D7E0;
  border-radius: 999px;
  line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.eta-chip:hover span { border-color: var(--eta-purple); }
.eta-chip input:checked + span { border-color: var(--eta-purple); background: var(--eta-purple); color: #fff; }
.eta-chip input:focus-visible + span { outline: 3px solid var(--eta-purple); outline-offset: 2px; }
.eta-field.is-invalid .eta-chip span { border-color: var(--eta-error); }

.eta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }

.eta-money { position: relative; }
.eta-money span {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: #55515E;
  pointer-events: none;
}
.eta-field .eta-money input { padding-left: 32px; }

/* boceto: zona de soltar; el <input type=file> transparente la cubre entera */
.eta-drop {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 30px 20px;
  border: 2px dashed #B9B5C6;
  border-radius: 16px;
  background: #F7F5FB;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.eta-drop input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.eta-drop:hover, .eta-drop:has(input:focus-visible) { border-color: var(--eta-purple); background: #F0EAFB; }
.eta-drop:has(input:focus-visible) { outline: 3px solid var(--eta-purple); outline-offset: 2px; }
.eta-field.is-invalid .eta-drop { border-color: var(--eta-error); }
.eta-drop__btn {
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--eta-purple);
  color: #fff;
  font-weight: 600;
  line-height: 1;
}
.eta-drop__txt { color: #55515E; }
.eta-preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: .95em; line-height: 1.3; word-break: break-all; }
.eta-preview img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #EEEEF0; }

.eta-check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; line-height: 1.4; cursor: pointer; }
.eta-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--eta-purple); }
.eta-check a, .eta-fine a { color: var(--eta-purple); text-decoration: underline; text-underline-offset: 2px; }
.eta-fine { margin: 8px 0 0 34px; font-size: .88em; line-height: 1.4; color: #55515E; }

.eta-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile { margin-top: 26px; }
.eta-status { margin-top: 18px; font-weight: 600; line-height: 1.4; }
.eta-status:empty { display: none; }
.eta-submit { --k: 1.25px; margin-top: 24px; text-align: center; }
.eta-submit .tier__buy { border: 0; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(70, 0, 55, .35); }
.eta-submit .tier__buy:disabled { opacity: .7; cursor: progress; transform: none; }

.eta-success { text-align: center; font-size: 1.2em; line-height: 1.45; }
.eta-success:focus { outline: none; }
.eta-success__title {
  margin-bottom: 14px;
  font-family: kikuta, sans-serif;
  font-size: 2.2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--eta-purple);
}

/* A7 — términos, entre EL y ELLA (como .ent-foot de entradas.css: caja de
   580px, --char deja ~20px de aire a cada lado; ≤1023 manda main.css) ---------- */

.eta-foot { --char: min(460px, 53vw - 300px); padding-top: 60px; }
.eta-tyc { width: 100%; max-width: 580px; margin-inline: auto; color: var(--white); }
.eta-tyc h2 {
  text-align: center;
  font-family: kikuta, sans-serif;
  font-size: 2.2em;
  line-height: 1;
  text-transform: uppercase;
}
.eta-tyc ul { margin-top: 22px; padding-left: 1.2em; list-style: disc; }
.eta-tyc li { font-size: 1.05em; line-height: 1.5; }
.eta-tyc li + li { margin-top: .6em; }
.eta-tyc__foot { --h: calc(var(--foot) + 300px); }   /* palmera 280 + aire */

/* responsive ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .eta-tyc__foot { --h: calc(var(--foot) + var(--char-h) + 24px); }
}

@media (max-width: 767px) {
  .eta-hero__inner { padding-top: 110px; padding-bottom: 50px; gap: 20px; }
  .eta-hero__title { font-size: 3.6em; }
  .eta-hero__title span { text-shadow: 0 4px 0 var(--eta-purple); }
  .eta-hero__lead { font-size: 1.15em; }
  /* .tier__buy mide todo en --k (1px a ancho completo en la .ent-box de entradas);
   fuera de esa caja hay que dárselo: el CTA a 1.5× el COMPRAR, el envío a 1.25× */
.eta-cta { --k: 1.5px; }
.eta-hero__dates { font-size: 1em; }

  .eta-sec { padding: 36px 0; }
  .eta-title { margin-bottom: 24px; font-size: 2.4em; }
  .eta-text { font-size: 1.1em; }
  .eta-premios, .eta-pasos { grid-template-columns: 1fr; gap: 18px; }
  .eta-premio { padding: 28px 22px 24px; }
  .eta-premio strong { font-size: 2.5em; }
  .eta-pasos li::before { width: 70px; height: 70px; font-size: 2.5em; }
  /* la fecha encima y lo que pasa debajo: a 375 no caben lado a lado */
  .eta-crono { gap: 18px; }
  .eta-crono__date { padding: 20px 20px 14px; font-size: 1.6em; }
  .eta-crono__what { padding: 16px 20px 20px; font-size: 1.05em; }
  .eta-cta { --k: 1.2px; }

  /* 14px: deja los 300px que el widget de Turnstile necesita a 375 */
  .eta-card { padding: 26px 14px; border-radius: 20px; }
  .eta-row { grid-template-columns: 1fr; }
  .eta-tyc h2 { font-size: 1.6em; }
}

/* display:flex/grid de arriba ganaría al [hidden] del navegador */
.eta-preview[hidden], .eta-sub[hidden], .eta-success[hidden] { display: none; }