:root {
  --upc-green: #00863A;
  --upc-green-dark: #006c2e;
  --upc-green-tint: #e8f6ee;
  --upc-gray: #3C4043;
  --upc-gray-light: #6b6f72;
  --border: #e6e7e8;
  --shadow-sm: 0 1px 2px rgba(16,24,20,0.06);
  --shadow-md: 0 8px 24px rgba(16,24,20,0.08);
  --shadow-lg: 0 20px 45px rgba(16,24,20,0.14);
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: var(--upc-gray);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  letter-spacing: -0.01em;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero. Matches the real site's own look: white background, dark gray
   text, green used only as an accent (logo mark, badge, big word, button).
   Top nav, partner marquee, and headline all share this one white panel,
   with no border at the bottom, so it blends straight into the card
   content that follows instead of reading as a separate block. */
header.hero-v2 {
  position: relative;
  color: var(--upc-gray);
  background: #fff;
  padding: 20px 24px 56px;
  overflow: hidden;
}
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0 8px;
}
.hero-top img.logo-mono { height: 34px; display: block; }
.hero-top img.logo-big { height: 52px; }
.hero-top a.brand-link { flex-shrink: 0; line-height: 0; }
a.back-link-light {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--upc-green);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.92rem;
  transition: opacity 0.15s;
}
a.back-link-light:hover { opacity: 0.7; }

.eyebrow-badge {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--upc-green-dark);
  background: var(--upc-green-tint);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* Auto-scrolling partner logo marquee that sits inline in the same top row as
   the brand logo and the back link, filling the space between them, rather
   than as a separate row. Repeated 8x so the track is always wider than
   any viewport; with too few copies the strip runs out of logos before
   the animation loops and visibly stalls at the last one. UPC Global stays
   in this scrolling list too, alongside the bigger static logo at left. */
.marquee-strip {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: #fff;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marquee-scroll 22s linear infinite;
}
.marquee-track img { height: 24px; width: auto; object-fit: contain; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-12.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.hero-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-copy { margin-top: 12px; }
.hero-invite {
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  color: var(--upc-gray-light);
  font-size: 1.15rem;
  margin-bottom: 4px;
}
h1.hero-word {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--upc-green);
  font-size: clamp(3.2rem, 11vw, 7rem);
  line-height: 0.92;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.hero-subtitle {
  max-width: 620px;
  margin: 0 auto;
  color: var(--upc-gray);
  font-size: 1.15rem;
  line-height: 1.5;
}
.hero-meta {
  margin: 18px auto 0;
  color: var(--upc-gray-light);
  font-size: 0.95rem;
  line-height: 1.6;
}

.hero-tagline {
  margin-top: 32px;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  color: var(--upc-gray-light);
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  header.hero-v2 { padding: 16px 16px 40px; }
}

main { padding: 40px 0 96px; }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 28px 30px;
  margin-bottom: 24px;
}

section.intro h2, section.programa h2, section.form-section h2 {
  font-size: 1.3rem;
  margin: 0 0 14px;
  color: var(--upc-gray);
}
section.intro p { line-height: 1.65; color: var(--upc-gray-light); font-size: 1rem; margin: 0; }

section.programa .subtitle { color: var(--upc-gray-light); font-size: 0.92rem; margin-bottom: 16px; }

.select-all-row { margin-bottom: 16px; }
button.select-all {
  background: var(--upc-green-tint);
  border: 1.5px solid var(--upc-green);
  color: var(--upc-green-dark);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, transform 0.1s;
}
button.select-all:hover { background: #d8f0e2; }
button.select-all:active { transform: scale(0.98); }

.bloque-row {
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.bloque-row:has(input:checked) {
  border-color: var(--upc-green);
  background: var(--upc-green-tint);
}
.bloque-row-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bloque-row input[type=checkbox] {
  margin-top: 3px;
  width: 19px;
  height: 19px;
  accent-color: var(--upc-green);
  flex-shrink: 0;
  cursor: pointer;
}
.bloque-row label { cursor: pointer; flex: 1 1 auto; min-width: 0; }
.bloque-row .titulo { font-weight: 600; color: var(--upc-gray); display: block; margin-bottom: 2px; }
.bloque-row .horario { color: var(--upc-gray-light); font-size: 0.86rem; }

.details-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px 2px;
  margin-top: 2px;
  color: var(--upc-green);
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
.details-toggle:hover { opacity: 0.75; }
.details-toggle .chevron { transition: transform 0.15s; }
.details-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.details-toggle-label { white-space: nowrap; }

.bloque-detalle {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.bloque-detalle p {
  margin: 0 0 10px;
  color: var(--upc-gray);
  font-size: 0.92rem;
  line-height: 1.55;
}
.bloque-detalle ul {
  margin: 0;
  padding-left: 20px;
  color: var(--upc-gray-light);
  font-size: 0.88rem;
  line-height: 1.65;
}
.bloque-detalle li { margin-bottom: 4px; }

@media (max-width: 600px) {
  .bloque-row-main { flex-wrap: wrap; }
  .details-toggle { margin-left: 33px; }
}

/* Form */
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 0.9rem; }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=url],
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #d7d9da;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--upc-green);
  box-shadow: 0 0 0 3px var(--upc-green-tint);
}

/* Phone number: a country picker next to the number, which is formatted
   as it is typed in that country's own style. The picker stays hidden
   until the phone library has loaded, so the plain field still works
   without it. */
.phone-field { display: flex; gap: 8px; align-items: stretch; }
.phone-field select {
  flex: 0 0 auto; width: auto; max-width: 40%;
  padding: 12px 10px; border: 1.5px solid #d7d9da; border-radius: 8px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--upc-gray);
}
.phone-field select:focus { outline: none; border-color: var(--upc-green); box-shadow: 0 0 0 3px var(--upc-green-tint); }
.phone-field input[type=tel] { flex: 1 1 auto; min-width: 0; }
.field-hint { font-size: 0.82rem; color: var(--upc-gray-light); margin-top: 6px; }
.field-hint:empty { display: none; }
.field-hint.is-error { color: #a02718; }
@media (max-width: 600px) {
  .phone-field { flex-wrap: wrap; }
  .phone-field select { max-width: 100%; width: 100%; }
}

fieldset { border: 1.5px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 22px; }
fieldset legend { font-weight: 600; font-size: 0.9rem; padding: 0 8px; }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.radio-row input[type=radio] { width: 17px; height: 17px; accent-color: var(--upc-green); cursor: pointer; }
.radio-row label { cursor: pointer; }

button.submit {
  background: var(--upc-green);
  color: #fff;
  border: none;
  padding: 16px 34px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background 0.15s, transform 0.1s;
}
button.submit:hover { background: var(--upc-green-dark); transform: translateY(-1px); }
button.submit:active { transform: translateY(0); }

.notice { padding: 16px 18px; border-radius: 10px; margin-bottom: 24px; font-size: 0.95rem; }
.notice.success { background: var(--upc-green-tint); border: 1px solid var(--upc-green); color: var(--upc-green-dark); }
.notice.error { background: #fdecea; border: 1px solid #c0392b; color: #a02718; }

/* Admin */
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; }
.admin-table select { padding: 6px 8px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; }
.badge.Pendiente { background: #fff3cd; color: #8a6d00; }
.badge.Aceptado { background: var(--upc-green-tint); color: var(--upc-green); }
.badge.Lista-de-espera { background: #e2e3ff; color: #3f3fae; }
.badge.Rechazado { background: #fdecea; color: #c0392b; }

@media (max-width: 600px) {
  header.hero { padding: 64px 0 48px; }
  header.hero h1 { font-size: 1.7rem; }
  .card { padding: 22px 20px; }
  .partners-card { padding: 18px 20px; }
}