/*! epl-encuentra.v2.css · Encuentra tu Rol, bundle 2.0 · state + behavior CSS only
 *
 * The visual layer (layout, type, surfaces, buttons, fields) is Webflow-native on the page's
 * encuentra_* classes. This file adds only what the Style panel cannot express or what belongs
 * to the bundle: hidden-state guarantees, reveal, pointer-gated hover, the F-A «Anillo» focus ring,
 * form control states, reduced motion. Every selector hangs off .encuentra_page (the combo class
 * on <main>), so it can never leak to another page.
 *
 * Law: DESIGN.md §11 rev 2. Tokens are the section-library values verbatim (zero new tokens).
 * Motion tokens are the project set (E2/E3 board): dur-s .3 · dur-m .7 · dur-l 1.1 · ease-main · ease-snap · stagger .08.
 * No u-* / is-* selector anywhere in this file (AT-17). No transform on the shelf cards and no
 * reveal on the shelf (PM ruling 2026-10-06: E2 owns the shelf's one scroll sequence).
 */

/* ---- 1. Tokens --------------------------------------------------------------------------- */
.encuentra_page {
  --brand-500: #0066ff;
  --brand-700: rgb(0, 41, 102);
  --wash: rgb(232, 239, 250);
  --g900: #2b3543;
  --g800: #3a4656;
  --g700: #45556b;
  --g500: #64748b;
  --dot-identity: 8px;
  --dur-s: 0.3s;
  --dur-m: 0.7s;
  --dur-l: 1.1s;
  --ease-main: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --stagger: 0.08s;
  font-family: Urbanist, system-ui, sans-serif;
}

/* ---- 2. Hidden-state guarantee ------------------------------------------------------------
   Component classes set display (flex/inline-flex) on some blocks that the bundle toggles with
   the `hidden` attribute; this keeps `hidden` authoritative everywhere on the page. */
.encuentra_page [hidden],
.encuentra_page .encuentra_hidden {
  display: none !important;
}

/* ---- 3. Text details the Style panel cannot reach ---------------------------------------- */
.encuentra_page .encuentra_card_emotional p,
.encuentra_page .encuentra_card_official p {
  margin: 0;
}
.encuentra_page .encuentra_card_emotional em {
  font-style: normal;
}
.encuentra_page .encuentra_hero_title,
.encuentra_page .encuentra_shelf_title,
.encuentra_page .encuentra_display_title,
.encuentra_page .encuentra_display_line,
.encuentra_page .encuentra_card_title,
.encuentra_page .encuentra_card_emotional,
.encuentra_page .encuentra_form_step_title,
.encuentra_page .encuentra_success_title {
  text-wrap: balance;
}
.encuentra_page .encuentra_hero_text,
.encuentra_page .encuentra_display_desc,
.encuentra_page .encuentra_success_echo,
.encuentra_page .encuentra_after_text,
.encuentra_page .encuentra_check_text {
  text-wrap: pretty;
}
@media (max-width: 480px) {
  .encuentra_page .encuentra_hero_title {
    font-size: 1.8rem;
    max-width: 17ch;
  }
}

/* ---- 4. Hero scroll cue: pointer-gated nudge ---------------------------------------------- */
.encuentra_page .encuentra_hero_cue_chev {
  transition: transform var(--dur-s) var(--ease-main);
}
@media (hover: hover) and (pointer: fine) {
  .encuentra_page .encuentra_hero_cue_wrap:hover .encuentra_hero_cue_chev {
    transform: translate(2px, 2px) rotate(45deg);
  }
}

/* ---- 5. Role cards: colour/border only, never a transform -------------------------------- */
.encuentra_page .encuentra_card {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-s) var(--ease-snap), box-shadow var(--dur-s) var(--ease-snap);
}
.encuentra_page .encuentra_card_title {
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .encuentra_page .encuentra_card:hover {
    border-color: rgba(0, 102, 255, 0.35);
  }
  .encuentra_page .encuentra_card:hover .encuentra_card_dot {
    filter: brightness(1.45);
  }
}
.encuentra_page .encuentra_card:active {
  border-color: rgba(0, 102, 255, 0.55);
}
.encuentra_page .encuentra_card[aria-pressed="true"] {
  border-color: var(--brand-500);
  box-shadow: 0 10px 30px rgba(0, 41, 102, 0.16);
}
.encuentra_page .encuentra_card_dot {
  transition: filter var(--dur-s) var(--ease-snap);
}
.encuentra_page .encuentra_card:focus-visible .encuentra_card_dot {
  filter: brightness(1.45);
}
@media (max-width: 699px) {
  .encuentra_page .encuentra_card {
    padding: 20px 16px;
  }
  .encuentra_page .encuentra_card_title {
    font-size: 0.98rem;
  }
  .encuentra_page .encuentra_card_emotional {
    font-size: 0.84rem;
  }
}
/* the shelf is inert once the signup is submitted (map §3) */
.encuentra_page.encuentra_submitted #epl-roles-shelf {
  pointer-events: none;
}

/* ---- 6. F-A «Anillo» focus ring (DESIGN.md §11.8), instant -------------------------------- */
.encuentra_page :is(a[href], button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6.5px var(--brand-500);
  transition-duration: 0s;
}
.encuentra_page .encuentra_card:focus-visible {
  border-color: transparent;
}
.encuentra_page .encuentra_field_input:focus-visible {
  border-color: transparent;
  background-color: #fff;
}
.encuentra_page [tabindex="-1"]:focus,
.encuentra_page [tabindex="-1"]:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* ---- 7. Form controls --------------------------------------------------------------------- */
.encuentra_page .encuentra_field_input {
  font-family: inherit;
  transition: border-color var(--dur-s) var(--ease-snap), background-color var(--dur-s) var(--ease-snap);
}
.encuentra_page .encuentra_field_input:focus {
  border-color: var(--brand-500);
  background-color: #fff;
}
.encuentra_page .encuentra_field_input[aria-invalid="true"] {
  border-color: var(--g900);
}
.encuentra_page textarea.encuentra_field_input {
  min-height: 88px;
  resize: vertical;
}
.encuentra_page select.encuentra_field_input {
  min-height: 3rem;
}
.encuentra_page .encuentra_field_error {
  margin-top: 0.4rem;
}
.encuentra_page .encuentra_field_error::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.45rem;
  vertical-align: 0.08em;
  background-color: var(--g900);
  border-radius: 50%;
}

/* checkbox / radio rows: native inputs (plain markup in embeds), library brand-700, 44 px rows */
.encuentra_page .encuentra_check {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
}
.encuentra_page .encuentra_check input[type="checkbox"],
.encuentra_page .encuentra_check input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0 0.7rem 0 0;
  accent-color: var(--brand-700);
  cursor: pointer;
}
.encuentra_page .encuentra_check_pledge {
  align-items: flex-start;
}
.encuentra_page .encuentra_check_pledge input[type="checkbox"] {
  margin-top: 0.8rem;
}
.encuentra_page .encuentra_check_pledge .encuentra_check_text {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.encuentra_page .encuentra_legal_link {
  text-decoration: underline;
}

/* buttons */
.encuentra_page .encuentra_btn,
.encuentra_page .encuentra_btn_secondary {
  font-family: inherit;
  text-decoration: none;
  transition: transform var(--dur-s) var(--ease-snap), opacity var(--dur-s) var(--ease-snap);
}
@media (hover: hover) and (pointer: fine) {
  .encuentra_page .encuentra_btn:hover {
    transform: translateY(-2px);
  }
  .encuentra_page .encuentra_btn_secondary:hover {
    text-decoration: underline;
  }
}
.encuentra_page .encuentra_btn:disabled,
.encuentra_page input.encuentra_btn[disabled] {
  background-color: var(--wash);
  color: var(--g700);
  box-shadow: inset 0 0 0 1.5px var(--g500);
  cursor: not-allowed;
}
.encuentra_page [aria-busy="true"] input[type="submit"] {
  opacity: 0.7;
  cursor: progress;
}
.encuentra_page .encuentra_form_actions {
  gap: 1rem;
}

/* 44 px hit areas, exact (rem rounding on a fluid root can land at 43.9) */
.encuentra_page .encuentra_check,
.encuentra_page .encuentra_btn_secondary,
.encuentra_page .encuentra_hero_cue_wrap,
.encuentra_page .encuentra_form_gate_link,
.encuentra_page .encuentra_form_flag_change,
.encuentra_page .encuentra_after_link,
.encuentra_page .encuentra_success_again {
  min-height: 44px;
}

/* ---- 8. Reveal: one orchestrated entrance per section, trigger-once (map §6) ---------------
   Hidden base state exists ONLY after the bundle armed the page (.encuentra_armed), so a visitor whose
   bundle failed, or who runs no JS, never meets opacity:0. The shelf never reveals (E2). */
.encuentra_page.encuentra_armed [data-epl-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-m) var(--ease-main), transform var(--dur-m) var(--ease-main);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.encuentra_page.encuentra_armed [data-epl-reveal].encuentra_in {
  opacity: 1;
  transform: none;
}
/* the role display swap: one entrance, ≤ 8 px (map §4) */
@keyframes encuentra-swap {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.encuentra_page .encuentra_display_content:not([hidden]) {
  animation: encuentra-swap var(--dur-m) var(--ease-main) both;
}

/* ---- 9. After-success: one fade-up after the hand-off ----------------------------------- */
.encuentra_page .encuentra_after:not([hidden]) {
  animation: encuentra-swap var(--dur-m) var(--ease-main) both;
}

/* ---- 10. Reduced motion: the composed final state ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .encuentra_page *,
  .encuentra_page *::before,
  .encuentra_page *::after {
    animation: none !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .encuentra_page [data-epl-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}