/* ==========================================================================
   Selección Oro Absoluto — Cómo Participar
   ========================================================================== */




.split-hero--participar {
  min-height: 85svh;
}

/* ---- Fondo: grano de papel muy sutil sobre el crema base ----
   Reemplaza el antiguo fondo ilustrado (participa-hero.png): ahora el
   protagonista es la fotografía real en .split-hero__media-wrap--photo,
   así que el fondo solo necesita romper el blanco puro sin competir con
   la imagen. Textura generada por SVG (feTurbulence) — sin peso de
   imagen adicional — teñida en tonos crema/dorado de marca. */
.split-hero--participar {
  background-color: var(--c-grey-050);
}

.split-hero--participar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: multiply;
  transition: opacity 1.3s var(--ease-out);
}

/* Halo dorado muy suave, apenas perceptible, ancla visualmente el lado
   del texto sin volver a caer en un fondo blanco plano. */
.split-hero--participar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 55% at 8% 15%, rgba(201, 162, 39, 0.10), transparent 70%);
  pointer-events: none;
}

.split-hero__content {
    max-width: 668px;
    text-align: left;
}

body.is-loading .split-hero--participar::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .split-hero--participar::before { transition: none; }
}

/* ---- Foto del hero: usa el componente compartido
   .split-hero__media-wrap--photo (site.css) pero acotado a un formato
   tipo tarjeta editorial (no a pantalla completa) — la foto original es
   panorámica y con height:85vh + width:auto se desbordaba sobre el
   texto. Se fija el ancho con --hero-photo-w / --hero-photo-r (custom
   properties) para poder calcular la posición del chip flotante contra
   el mismo borde sin duplicar valores. Además, un marco dorado
   desfasado propio de esta página. ---- */

.split-hero--participar {
  --hero-photo-w: clamp(360px, 60vw, 800px);
  --hero-photo-r: clamp(1.5rem, 3.5vw, 4vw);
}

.split-hero--participar .split-hero__media-wrap--photo {
  box-shadow: var(--shadow-lift);
}

/* Tamaño/posición de escritorio únicamente: en mobile (<=900px) site.css
   ya apila la foto de forma relativa (position:relative, ancho/alto
   propios) — si estas reglas no se acotan al mismo breakpoint que ese
   bloque, ganan por especificidad y rompen el apilado móvil. */
@media (min-width: 901px) {
  .split-hero--participar .split-hero__media-wrap--photo {
    top: 50%;
    right: var(--hero-photo-r);
    transform: translateY(-50%);
    height: min(74vh, 620px);
    width: var(--hero-photo-w);
    min-width: 0;
    border-radius: 0 0 0 clamp(60px, 8vw, 120px);
  }

  .split-hero--participar .split-hero__media-wrap--photo .split-hero__media {
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    object-position: center 20%;
  }
}

/* ---- Chip flotante sobre la foto ----
   Vive fuera de .split-hero__media-wrap (que tiene overflow:hidden para
   recortar la foto), posicionado en su propio absolute dentro de
   .split-hero para no quedar recortado por el marco de la imagen.
   Se ancla contra el mismo borde derecho + ancho que la foto, para que
   quede pegado a su esquina inferior izquierda sin importar el viewport. */

.split-hero__chip {
  position: absolute;
  z-index: 3;
  right: calc(var(--hero-photo-r) + var(--hero-photo-w) - 150px);
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.2rem 0.85rem 0.85rem;
  background: var(--c-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  max-width: 230px;
}

.split-hero__chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--c-white);
  font-size: 1.05rem;
  box-shadow: var(--shadow-gold);
}

.split-hero__chip-text {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--c-grey-text);
}

.split-hero__chip-text strong {
  color: var(--c-black);
  font-size: 0.92rem;
  font-weight: 600;
}

/* En mobile la foto pasa a apilada arriba del texto (regla compartida
   en site.css). El chip se re-posiciona relativo a esa franja en vez
   de calcularse contra el ancho de viewport. */
@media (max-width: 900px) {
  .split-hero--participar .split-hero__media-wrap--photo {
    outline-offset: 10px;
    margin-top: 25px;
  }

  .split-hero__chip {
    position: relative;
    right: auto;
    bottom: auto;
    margin: -1.75rem auto clamp(1.75rem, 5vh, 2.5rem);
    max-width: min(84vw, 320px);
  }
}

.steps {
    padding: var(--space-small) 0;
    background: var(--c-black);
}
.steps__head h2 {
    color: var(--c-white);
}
.steps__grid::before {
    background: #222;
}
.step-card h3 {
    color: var(--c-gold);
}
.step-card p {
    color: var(--c-white);
}
.steps__footnote{
    color: var(--c-white);
    background-color: transparent;
}

   /* ---- Requisitos + Datos del registro ---- */

.requisitos {
    padding: var(--space-small) 0;
}

.requisitos__head {
  max-width: 60ch;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}

.requisitos__head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  margin-top: 0.5rem;
}

/* Columna "Requisitos": lista plana, sin tarjeta ni borde */

.requisitos-block h3 {
  font-size: 1.8rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--c-gold);
}

.plain-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.plain-check-list li,
.plain-check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--c-black);
}

.plain-check-list li i,
.plain-check-list__item i {
  color: var(--c-gold);
  font-size: 1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* Columna "Datos del registro": tarjeta con esquinas redondeadas y sombra */

.datos-card {
  height: 100%;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.datos-card h3 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.datos-card__lead {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--c-grey-text);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--c-border);
}

.datos-card__grid { margin: 0; }

.datos-card__grid .plain-check-list__item { font-size: 0.95rem; }

/* ---- Después del registro ---- */

.registro-info {
  padding: clamp(2rem, 4vw, 3rem) 0 var(--space-section);
}

.registro-info__head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.registro-info__head .eyebrow { display: block; margin-bottom: 0.6rem; }

.registro-info__head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.registro-info__body {
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}

.registro-info__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-grey-text);
  margin: 0 0 0.85rem;
  text-align: center;
}

.registro-info__body p:last-child { margin-bottom: 0; }

.registro__notice {
  display: flex;
  gap: 0.75rem;
  padding: 1.1rem 1.3rem;
  background: var(--c-grey-100);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius-md);
}

.registro__notice i { color: var(--c-gold-dark); font-size: 1rem; margin-top: 0.15rem; }

.registro__notice p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--c-grey-text);
  text-align: left;
}

/* ---- ¿Dudas? ---- */

.registro-help {
  padding: 0 0 clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.registro-help p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--c-grey-text);
}

.registro-help a {
  color: var(--c-gold-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}