/* PANAMA CROSSROADS — /actividades/espacio-market/ (PAL-16). Loads after main.css.
   Per the design mock (13 Nov), on the site's body texture like Expresa tu arte, with black copy;
   the benefits table has square edges and alternating white / translucent rows; the forms sit on white cards. kikuta for the hero and closing titles,
   condensed config (600) for section titles, purple pills with yellow kikuta for the CTAs, and a
   General/VIP benefits table. The mock is mobile; on wider screens the same column is centered.
   Also skins the shared form components (.pcf-*, src/components/forms/forms.css). */

.em {
  --em-purple: #6C1BD1;
  --em-yellow: #F4F343;
  --em-ink: #111;
  --em-muted: #55515E;
  --em-line: #E6E4EA;
  --em-error: #C4113F;
  position: relative;
  overflow-x: clip;
  padding: 56px 16px 80px;
  color: var(--em-ink);
  line-height: 1.4;
}

/* sections: one centered column */
.em-sec { position: relative; max-width: 760px; margin: 0 auto; padding: 36px 0; text-align: center; }
.em-sec > * + * { margin-top: 18px; }
/* objects (src/components/Deco.astro): the layer spans the viewport, centred on the column; the
   copy paints above it */
.em-sec > .deco { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.em-sec > .deco + * { margin-top: 0; }
.em-sec > :not(.deco) { position: relative; }

.em-display {
  font-family: kikuta, sans-serif;
  font-size: 3.4em;
  font-weight: 400;
  line-height: 1.02;
  text-transform: uppercase;
}
.em-display span { display: block; }   /* the mock's line break; inline on phones */
.em-title {
  font-family: config, sans-serif;
  font-size: 2.3em;
  font-weight: 600;
  line-height: 1.1;
}
.em-text { font-size: 1.2em; }
.em-lead { font-size: 1.7em; font-weight: 600; line-height: 1.2; }
.em-strong { font-size: 1.35em; font-weight: 600; line-height: 1.25; text-transform: uppercase; }
.em-small { font-size: 1.05em; }

.em-btn {
  display: inline-block;
  padding: 14px 40px 10px;          /* kikuta's caps sit high in their box */
  border: 0;
  border-radius: 999px;
  background: var(--em-purple);
  color: var(--em-yellow);
  font-family: kikuta, sans-serif;
  font-size: 2.2em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease;
}
.em-btn:hover, .em-btn:focus-visible { transform: scale(1.04); }
.em :focus-visible { outline: 3px solid var(--em-purple); outline-offset: 3px; }

/* M1 */
.em-hero { padding-top: 12px; }
.em-hero .em-strong { margin-top: 28px; }

/* M3 — benefits table: black header with rounded top corners; body rows alternate translucent /
   solid white (the texture shows through the odd ones); thin lines split the columns */
.em-tabla {
  width: 100%;
  margin-top: 36px;
  border-collapse: separate;          /* collapse ignores the header radius */
  border-spacing: 0;
  color: var(--em-ink);
  font-size: 1em;
}
.em-tabla th, .em-tabla td { padding: 16px 10px; vertical-align: middle; }
.em-tabla :is(th, td):first-child { padding-left: 18px; text-align: left; }
.em-tabla :is(th, td) + :is(th, td) { border-left: 2px solid rgba(214, 90, 170, .28); }

.em-tabla thead th {
  padding-top: 14px;
  padding-bottom: 10px;               /* kikuta's caps sit high */
  background: #111;
  color: #fff;
  font-family: kikuta, sans-serif;
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1;
  text-transform: uppercase;
}
.em-tabla thead th + th { border-left-color: rgba(255, 255, 255, .85); }
.em-tabla thead th:first-child { border-top-left-radius: 16px; }
.em-tabla thead th:last-child { border-top-right-radius: 16px; }
.em-tabla thead th span { display: block; }

.em-tabla tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .5); }
.em-tabla tbody tr:nth-child(even) { background: #fff; }
.em-tabla tbody th { font-weight: 400; line-height: 1.3; }
.em-tabla td { width: 20%; text-align: center; font-size: 1.15em; font-weight: 600; }
.em-tabla__txt { display: block; font-size: .8em; font-weight: 400; line-height: 1.25; }
.em-tabla__nota { margin-top: 14px; }

/* M4 — steps: yellow bar with purple copy; the number on a purple tile that sits on the bar's
   left edge (a third of it outside), aligned with its top */
.em-pasos {
  display: grid;
  gap: 18px;
  max-width: 640px;
  margin: 28px auto 0;
  padding: 0 0 0 20px;                /* room for the part of the tile outside the bar */
  list-style: none;
  counter-reset: paso;
  text-align: left;
}
.em-pasos li {
  --tile: 60px;
  position: relative;
  min-height: calc(var(--tile) - 8px);
  padding: 10px 18px 10px calc(var(--tile) * .67 + 16px);
  border-radius: 12px;
  background: var(--em-yellow);
  color: var(--em-purple);
  counter-increment: paso;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.22;
}
.em-pasos li::before {
  content: counter(paso) ".";
  position: absolute;
  left: calc(var(--tile) * -.33);
  top: -4px;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  padding-top: .12em;                 /* kikuta's caps sit high */
  border-radius: 12px;
  background: var(--em-purple);
  color: var(--em-yellow);
  font-family: kikuta, sans-serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1;
}

/* M6 — closing */
.em-cierre { padding-top: 56px; }

/* M9 — the mountains foot (main.css .montanas-foot) runs edge to edge and meets the footer */
.em > .em-foot { margin: 40px -16px -80px; }
/* as .eta-foot on Expresa: 580px box between EL and ELLA, --char leaves ~20px air on each side */
.em-foot { --char: min(460px, 53vw - 300px); padding-top: 60px; }
.em-foot__box { width: 100%; max-width: 580px; margin-inline: auto; text-align: center; }
.em-foot__box > * + * { margin-top: 18px; }
.em-foot__ground { --h: calc(var(--foot) + 300px); }   /* palmera 280 + aire */
@media (max-width: 1023px) {
  .em-foot__ground { --h: calc(var(--foot) + var(--char-h) + 24px); }
}

/* M7/M8 — forms */
.em-form-sec { padding-top: 56px; }
.em-card {
  margin-top: 28px;
  padding: 36px 40px;
  border: 2px solid #EEEEF0;
  border-radius: 24px;
  background: #fff;
  color: var(--em-ink);
  text-align: left;
  box-shadow: 0 14px 34px -12px rgba(70, 0, 55, .35);
}
.em-note { font-size: .95em; color: var(--em-muted); }
.em-group {
  margin: 30px 0 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--em-line);
  font-family: config, sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.1;
}

.em .pcf-fields { gap: 0; }
.em .pcf-field { display: block; margin: 22px 0 0; }
.em .pcf-field > label,
.em .pcf-field > legend { display: block; margin-bottom: 8px; padding: 0; font-weight: 600; line-height: 1.35; }
.em .pcf-field input:not([type=radio], [type=checkbox]),
.em .pcf-field textarea {
  padding: 13px 15px;
  border: 2px solid #D9D7E0;
  border-radius: 12px;
  color: var(--em-ink);
  line-height: 1.35;
  transition: border-color .15s ease;
}
.em .pcf-field textarea { min-height: 7em; }
.em .pcf-field input:focus, .em .pcf-field textarea:focus { border-color: var(--em-purple); }
.em .pcf-field.is-invalid :is(input, textarea) { border-color: var(--em-error); }
.em .pcf-req { color: var(--em-error); }
.em .pcf-hint { margin-top: 6px; font-size: .9em; line-height: 1.4; color: var(--em-muted); opacity: 1; }
.em .pcf-error { margin-top: 6px; font-size: .92em; font-weight: 600; line-height: 1.4; color: var(--em-error); }
.em .pcf-error:empty { display: none; }
.em .pcf-banner {
  margin-bottom: 24px;
  padding: 16px 20px 12px;
  border-radius: 14px;
  background: var(--em-purple);
  color: var(--em-yellow);
  font-family: kikuta, sans-serif;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}
.em .pcf-banner[hidden] { display: none; }

/* paquete: radios as pills (the native input stays: focus, arrows, screen readers) */
.em .pcf-options { gap: 10px; }
.em .pcf-option { position: relative; display: block; }
.em .pcf-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.em .pcf-option 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;
}
.em .pcf-option:hover span { border-color: var(--em-purple); }
.em .pcf-option input:checked + span { border-color: var(--em-purple); background: var(--em-purple); color: #fff; }
.em .pcf-option input:focus-visible + span { outline: 3px solid var(--em-purple); outline-offset: 2px; }
.em .pcf-field.is-invalid .pcf-option span { border-color: var(--em-error); }

.em .pcf-consent label { gap: 12px; font-weight: 400; line-height: 1.4; }
.em .pcf-consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--em-purple); }
.em .pcf-consent a { color: var(--em-purple); text-decoration: underline; text-underline-offset: 2px; }

.em .cf-turnstile { margin-top: 26px; }
.em .pcf-status { margin-top: 18px; font-weight: 600; line-height: 1.4; }
.em .pcf-submit { margin-top: 24px; text-align: center; }
.em .pcf-submit .em-btn { font-size: 1.7em; }
.em .pcf-submit .em-btn:disabled { opacity: .7; cursor: progress; transform: none; }

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

@media (max-width: 767px) {
  .em { padding-top: 84px; }          /* the fixed mobile header */
  .em-display span { display: inline; }
  /* room under the last line for the hero's and the closing's mobile accents (Deco `m` items) */
  .em-sec.em-hero, .em-sec.em-cierre { padding-bottom: 72px; }
  .em-sec { padding: 28px 0; }
  .em-display { font-size: 2em; }
  .em-title { font-size: 1.75em; }
  .em-text { font-size: 1.05em; }
  .em-lead { font-size: 1.35em; }
  .em-strong { font-size: 1.1em; }
  .em-btn { padding: 12px 26px 8px; font-size: 1.9em; }
  .em .pcf-submit .em-btn { font-size: 1.5em; }

  .em-tabla { font-size: .82em; }
  .em-tabla th, .em-tabla td { padding: 12px 5px; }
  .em-tabla :is(th, td):first-child { padding-left: 10px; }
  .em-tabla thead th { font-size: 1.2em; }
  .em-tabla td { width: 23%; }

  .em-pasos { padding-left: 14px; gap: 14px; }
  .em-pasos li { --tile: 46px; font-size: 1.02em; padding-right: 12px; }
  .em-pasos li::before { font-size: 2em; }

  /* 14px: leaves the 300px Turnstile needs at 375 */
  .em-card { padding: 24px 14px; border-radius: 18px; }
}