/* ========================================================================
   Identidad visual SOLES 2026 · Paleta oficial de gerencia · 04/09/2026
   Capa visual no invasiva: preserva la lógica, los formularios y los pagos.
   ======================================================================== */

.demo3,
.guest-body,
.payment-body {
  --soles-orange: #f57421;
  --soles-orange-deep: #f25822;
  --soles-orange-soft: #f8951e;
  --soles-action: #f25822;
  --soles-yellow: #f8951e;
  --soles-cream: #fff7f2;
  --soles-cream-2: #ffede5;
  --soles-cocoa: #282828;
  --soles-cocoa-deep: #242424;
  --soles-brown: #f25822;
  --soles-muted: #666666;
  --soles-line: rgba(242, 88, 34, 0.18);
  --green-950: #242424;
  --green-900: #2b2b2b;
  --green-800: #f25822;
  --green-700: #f25822;
  --green-600: #f25822;
  --green-500: #f57421;
  --lime: #f8951e;
  --ink: #282828;
  --muted: #666666;
  --paper: #fff7f2;
  --sand: #ffede5;
  --line: rgba(242, 88, 34, 0.18);
  font-family: "Manrope", Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 128px;
}

.demo3 {
  --d3-paper: #fff7f2;
  --d3-paper-2: #ffede5;
  --d3-charcoal: #242424;
  --d3-navy: #f25822;
  --d3-ink: #282828;
  --d3-muted: #666666;
  --d3-green: #f25822;
  --d3-green-dark: #f25822;
  --d3-mint: #f8951e;
  --d3-amber: #f8951e;
  --d3-orange: #f57421;
  --d3-line: rgba(242, 88, 34, 0.18);
  --d9-font-display: "Manrope", Arial, sans-serif;
  --d9-font-body: "Manrope", Arial, sans-serif;
  --d9-font-label: "Manrope", Arial, sans-serif;
  --d9-body: clamp(15px, 0.95vw, 17px);
  --d9-label: 11px;
  background:
    radial-gradient(circle at 96% 8%, rgba(248, 149, 30, 0.16), transparent 23%),
    var(--soles-cream);
  color: var(--soles-cocoa);
}

.demo3 :where(a, button, input, select, textarea):focus-visible,
.guest-body :where(a, button, input, select, textarea):focus-visible,
.payment-body :where(a, button):focus-visible {
  outline: 3px solid var(--soles-yellow);
  outline-offset: 3px;
}

/* Encabezado: flotante, translúcido y persistente durante todo el recorrido. */
.demo3 .d3-header {
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  background: linear-gradient(108deg, rgba(255, 255, 255, 0.9), rgba(255, 247, 242, 0.86));
  border: 1px solid rgba(248, 149, 30, 0.42);
  box-shadow: 0 18px 46px rgba(36, 36, 36, 0.24);
  left: 50%;
  margin: 0;
  position: fixed;
  top: 18px;
  transform: translateX(-50%);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  width: calc(100% - 48px);
  z-index: 2400;
}

@media (hover: hover) and (pointer: fine) {
  .demo3 .d3-header:hover {
    background: linear-gradient(108deg, rgba(255, 255, 255, 0.95), rgba(255, 247, 242, 0.92));
    border-color: rgba(248, 149, 30, 0.58);
    box-shadow: 0 22px 54px rgba(36, 36, 36, 0.3);
  }
}

.demo3 .d3-brand {
  min-width: 0;
}

.demo3 .d3-brand img {
  filter: brightness(0) invert(1);
  height: auto;
  max-height: 68px;
  object-fit: contain;
  width: 205px;
}

.demo3 .d3-nav a {
  color: rgba(255, 255, 255, 0.82);
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.demo3 .d3-nav a::after {
  background: var(--soles-yellow);
  height: 2px;
}

.demo3 .d3-nav a:hover {
  color: #ffffff;
}

.demo3 .header-socials a {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.demo3 .header-socials a:hover {
  background: var(--soles-yellow);
  border-color: var(--soles-yellow);
  color: var(--soles-cocoa-deep);
}

.demo3 .d3-header-cta,
.demo3 .d3-hero-cta {
  background: linear-gradient(115deg, var(--soles-yellow), var(--soles-orange-soft));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72), 0 12px 30px rgba(242, 88, 34, 0.3);
  color: var(--soles-cocoa-deep);
}

/* Banner oficial: siempre se muestra completo, proporcional y sin superposiciones. */
.demo3 .soles-hero {
  background: linear-gradient(180deg, #ffede5 0%, #fff7f2 100%);
  margin: 0;
  max-width: none;
  padding: 132px 92px 0;
  width: 100%;
}

.soles-banner-frame {
  background: var(--soles-orange);
  border: 1px solid rgba(242, 88, 34, 0.18);
  border-radius: 32px;
  box-shadow: 0 28px 75px rgba(242, 88, 34, 0.2);
  line-height: 0;
  margin: 0 auto;
  max-width: 1920px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}

.soles-banner-image {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.demo3 .soles-hero .d3-stats {
  background: linear-gradient(110deg, var(--soles-cocoa-deep), var(--soles-brown));
  border: 1px solid rgba(248, 149, 30, 0.24);
  box-shadow: 0 24px 55px rgba(36, 36, 36, 0.22);
  margin: 28px auto 0;
}

.demo3 .soles-hero .d3-stats strong {
  color: var(--soles-yellow);
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.055em;
}

.demo3 .soles-hero .d3-stats span {
  color: rgba(255, 255, 255, 0.76);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 11px;
}

/* Ritmo tipográfico inspirado en el contraste fino/negrita del banner. */
.demo3 :where(.d3-heading-grid h2, .d3-agenda h2, .tariffs-heading h2, .d7-benefits-heading h2),
.guest-body :where(.guest-intro h1, .guest-form-heading h2, .guest-success h2),
.payment-body h1 {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.demo3 :where(.d3-heading-grid h2 em, .tariffs-heading h2 em, .d7-benefits-heading h2 strong) {
  font-family: inherit;
  font-weight: 800;
}

.demo3 :where(.d3-section-tag, .d5-story-code, .d5-hero-overline, .d5-hero-meta, .d3-visual-tag, .d5-visual-index, .d3-stats span, .d3-brochure-strip span, .d4-speaker-info small, .agenda-activity small, .stage-card-top span, .stage-card-top b, .company-rates-intro > span, .company-rate-options small, .d7-panel-title > span, .d7-panel-title b, .event-contact-links small, .pse-modal-head > span, .pse-modal-head > p, .aside-overline, .screen-step, .field > span) {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Cintillo y acceso a tarifas. */
.demo3 .d4-impact-ticker {
  background: #ffede5;
  border-color: rgba(242, 88, 34, 0.22);
  color: var(--soles-cocoa);
  margin-top: 42px;
}

.demo3 .d4-impact-ticker span {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.demo3 .d4-impact-ticker i {
  color: var(--soles-orange-deep);
}

.demo3 .d3-brochure-strip {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(242, 88, 34, 0.25);
  box-shadow: 0 20px 50px rgba(242, 88, 34, 0.08);
}

.demo3 .d3-brochure-strip span {
  color: var(--soles-orange-deep);
}

.demo3 .d3-brochure-strip a {
  background: var(--soles-cocoa);
  color: #ffffff;
}

.demo3 .d3-brochure-strip a:hover {
  background: var(--soles-orange-deep);
}

/* Speakers. */
.demo3 .d3-speakers {
  background:
    radial-gradient(circle at 90% 5%, rgba(245, 116, 33, 0.35), transparent 30%),
    linear-gradient(145deg, #242424 0%, #f25822 62%, #f25822 100%);
}

.demo3 .d3-speakers::before {
  -webkit-text-stroke-color: rgba(248, 149, 30, 0.11);
}

.demo3 .d3-section-tag.light,
.demo3 .d4-speaker-info small {
  color: #f8951e;
}

.demo3 .d4-speaker-intro {
  border-color: rgba(255, 255, 255, 0.19);
}

.demo3 .d4-speaker-intro strong {
  color: var(--soles-yellow);
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 400;
}

.demo3 .d4-speaker-card {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(248, 149, 30, 0.16);
  box-shadow: 0 26px 65px rgba(36, 36, 36, 0.4);
}

.demo3 .d3-speaker-photo {
  background:
    linear-gradient(145deg, rgba(245, 116, 33, 0.78), rgba(36, 36, 36, 0.52)),
    url(../hero-demo3.png) 72% / cover;
}

.demo3 .d3-speaker-photo.speaker-2 {
  background:
    linear-gradient(145deg, rgba(248, 149, 30, 0.45), rgba(242, 88, 34, 0.65)),
    url(../hero-demo3.png) 91% 55% / cover;
}

.demo3 .d3-speaker-photo > i {
  background: var(--soles-yellow);
  color: var(--soles-cocoa-deep);
}

.demo3 .d4-speaker-info > strong {
  font-family: "Manrope", Arial, sans-serif;
}

/* Agenda. */
.demo3 .agenda-redesign {
  background:
    radial-gradient(circle at 100% 0, rgba(248, 149, 30, 0.23), transparent 27%),
    linear-gradient(135deg, #fff7f2 0%, #ffede5 100%);
}

.demo3 .agenda-redesign::before {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 800;
  -webkit-text-stroke-color: rgba(242, 88, 34, 0.08);
}

.demo3 .agenda-redesign .d3-agenda-head h2 {
  color: var(--soles-cocoa);
}

.demo3 .d3-section-tag,
.demo3 .agenda-activity small {
  color: var(--soles-orange-deep);
}

.demo3 .d3-section-tag::before {
  background: var(--soles-yellow);
  box-shadow: 0 0 0 5px rgba(248, 149, 30, 0.18);
}

.demo3 .agenda-schedule {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(242, 88, 34, 0.22);
  box-shadow: 0 30px 75px rgba(242, 88, 34, 0.1);
}

.demo3 .agenda-row + .agenda-row {
  border-color: rgba(242, 88, 34, 0.14);
}

.demo3 .agenda-row:nth-child(3),
.demo3 .agenda-row:nth-child(5),
.demo3 .agenda-row:nth-child(7),
.demo3 .agenda-row:nth-child(9) {
  background: linear-gradient(90deg, rgba(248, 149, 30, 0.13), rgba(245, 116, 33, 0.09));
}

.demo3 .agenda-time {
  border-color: rgba(242, 88, 34, 0.16);
}

.demo3 .agenda-time > span {
  color: var(--soles-orange-deep);
  font-family: "Manrope", Arial, sans-serif;
}

.demo3 .agenda-time time,
.demo3 .agenda-activity h3 {
  color: var(--soles-cocoa);
  font-family: "Manrope", Arial, sans-serif;
}

/* Tarifas. */
.demo3 .tariffs-section {
  background:
    radial-gradient(circle at 8% 8%, rgba(245, 116, 33, 0.36), transparent 29%),
    radial-gradient(circle at 96% 92%, rgba(248, 149, 30, 0.2), transparent 29%),
    #242424;
}

.demo3 .tariffs-section::before {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 800;
  -webkit-text-stroke-color: rgba(248, 149, 30, 0.1);
}

.demo3 .tariffs-heading .d3-section-tag,
.demo3 .stage-card-top span {
  color: #f8951e;
}

.demo3 .tariffs-heading h2 em {
  color: var(--soles-yellow);
}

.demo3 .stage-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(245, 116, 33, 0.07));
  border-color: rgba(255, 255, 255, 0.16);
}

.demo3 .stage-card:hover,
.demo3 .stage-card.current {
  border-color: rgba(248, 149, 30, 0.74);
  box-shadow: 0 30px 80px rgba(36, 36, 36, 0.48);
}

.demo3 .stage-card.current::after,
.demo3 .stage-card.current .stage-card-top b {
  background: var(--soles-yellow);
}

.demo3 .stage-card.current::after {
  box-shadow: 0 0 72px rgba(248, 149, 30, 0.64);
}

.demo3 .stage-prices > div:first-child strong,
.demo3 .stage-card > a span {
  color: var(--soles-yellow);
}

.demo3 .company-rates {
  background: linear-gradient(120deg, var(--soles-orange-deep), var(--soles-orange-soft) 58%, var(--soles-yellow));
  box-shadow: 0 34px 90px rgba(36, 36, 36, 0.42);
  color: var(--soles-cocoa-deep);
}

.demo3 .company-rates-intro p {
  color: rgba(40, 40, 40, 0.75);
}

.demo3 .company-rate-options {
  background: var(--soles-cocoa-deep);
}

.demo3 .company-rate-options article > span {
  color: var(--soles-yellow);
}

.demo3 .company-rate-options article > b {
  background: #ffede5;
  color: var(--soles-cocoa-deep);
}

.demo3 .company-rate-cta {
  background: #ffffff;
  color: var(--soles-cocoa);
}

.demo3 .company-rate-cta:hover {
  background: var(--soles-cocoa-deep);
  color: #ffffff;
}

/* Beneficios y contacto. */
.demo3 .d7-benefits {
  background:
    radial-gradient(circle at 95% 8%, rgba(248, 149, 30, 0.22), transparent 25%),
    linear-gradient(135deg, #fff7f2 0%, #ffede5 100%);
}

.demo3 .d7-benefits::before {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 800;
  -webkit-text-stroke-color: rgba(242, 88, 34, 0.08);
}

.demo3 .d7-benefits-heading h2 {
  color: var(--soles-cocoa);
}

.demo3 .d7-benefits-heading h2 strong {
  color: var(--soles-orange-deep);
}

.demo3 .d7-benefits-heading > p,
.demo3 .d7-benefit-grid p {
  color: var(--soles-muted);
}

.demo3 .d7-access-panel {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(242, 88, 34, 0.62);
  box-shadow: 0 28px 75px rgba(242, 88, 34, 0.12), inset 0 1px rgba(255, 255, 255, 0.8);
}

.demo3 .d7-panel-title {
  background: linear-gradient(112deg, #f25822 0%, var(--soles-orange) 66%, var(--soles-orange-soft) 100%);
  box-shadow: 0 24px 55px rgba(242, 88, 34, 0.3);
}

.demo3 .d7-panel-title > span {
  color: #ffede5;
}

.demo3 .d7-panel-title b,
.demo3 .d7-benefit-icon > span {
  background: var(--soles-yellow);
  color: var(--soles-cocoa-deep);
}

.demo3 .d7-benefit-grid article {
  border-color: rgba(242, 88, 34, 0.14);
}

.demo3 .d7-benefit-icon,
.demo3 .d7-benefit-grid article:nth-child(2n) .d7-benefit-icon,
.demo3 .d7-benefit-grid article:last-child .d7-benefit-icon {
  background: linear-gradient(145deg, #fff7f2, #ffede5);
  border-color: rgba(245, 116, 33, 0.25);
  color: var(--soles-orange-deep);
}

.demo3 .d7-benefit-grid h4 {
  color: var(--soles-cocoa);
}

.demo3 .event-contact-strip {
  background:
    radial-gradient(circle at 95% 100%, rgba(245, 116, 33, 0.32), transparent 32%),
    linear-gradient(110deg, #242424 0%, #f25822 64%, #f25822 100%);
}

.demo3 .event-contact-strip > div:first-child > span {
  color: #f8951e;
}

.demo3 .event-contact-links > a:first-child {
  background: linear-gradient(120deg, #f25822, #f25822);
}

.demo3 .email-symbol {
  background: var(--soles-yellow);
  color: var(--soles-cocoa-deep);
}

.demo3 .floating-whatsapp {
  align-items: center;
  background: linear-gradient(145deg, #f25822, #f25822);
  border-color: var(--soles-yellow);
  bottom: 20px;
  box-shadow: 0 18px 45px rgba(36, 36, 36, 0.36);
  display: grid;
  height: 62px;
  min-height: 62px;
  min-width: 62px;
  padding: 0;
  place-items: center;
  position: fixed;
  right: 18px;
  width: 62px;
  z-index: 2800;
}

.demo3 .floating-whatsapp span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.demo3 .floating-whatsapp:hover {
  background: linear-gradient(145deg, #f25822, #f57421);
  box-shadow: 0 22px 55px rgba(36, 36, 36, 0.44);
}

/* Inscripción y pago: misma identidad sin alterar el comportamiento. */
.demo3 .pse-backdrop {
  background: rgba(36, 36, 36, 0.9);
}

.demo3 .pse-overlay {
  z-index: 3000;
}

.demo3 .pse-modal {
  background: var(--soles-cream);
  border-color: rgba(248, 149, 30, 0.2);
  box-shadow: 0 40px 120px rgba(36, 36, 36, 0.68);
}

.demo3 .pse-modal-head {
  background: linear-gradient(105deg, #242424, #f25822);
}

.demo3 .pse-modal-head > span {
  color: #f8951e;
}

.demo3 .pse-modal-head > span i {
  background: var(--soles-yellow);
  box-shadow: 0 0 0 6px rgba(248, 149, 30, 0.15);
}

.demo3 .pse-modal-head > p b {
  color: var(--soles-yellow);
}

.demo3 .registration-aside {
  background:
    radial-gradient(circle at 18% 12%, rgba(248, 149, 30, 0.28), transparent 25%),
    linear-gradient(155deg, #f25822 0%, #f25822 54%, #f25822 100%);
}

.demo3 .registration-aside > div:first-child > p,
.demo3 .privacy-note p {
  color: rgba(255, 255, 255, 0.78);
}

.demo3 .registration-panel {
  background: #fff7f2;
}

.demo3 .profile-tabs button.selected {
  background: rgba(245, 116, 33, 0.08);
  border-color: var(--soles-orange-deep);
  box-shadow: inset 0 -2px var(--soles-orange-deep);
}

.demo3 .profile-symbol {
  background: #ffede5;
  color: var(--soles-orange-deep);
}

.demo3 .profile-tabs button.selected > i::after {
  background: var(--soles-orange-deep);
}

.demo3 .field > span {
  color: var(--soles-brown);
}

.demo3 .field input,
.demo3 .field select,
.demo3 .attendees-title select {
  background: #ffffff;
  border-color: rgba(242, 88, 34, 0.2);
  color: var(--soles-cocoa);
}

.demo3 .field input:focus,
.demo3 .field select:focus,
.demo3 .attendees-title select:focus {
  border-color: var(--soles-orange-deep);
  box-shadow: 0 0 0 3px rgba(245, 116, 33, 0.12);
}

.demo3 .flow-primary,
.demo3 .add-attendee {
  background: var(--soles-action);
  color: #ffffff;
}

.demo3 .flow-primary:not(:disabled):hover,
.demo3 .add-attendee:hover {
  background: var(--soles-brown);
}

.demo3 .flow-secondary {
  border-color: rgba(242, 88, 34, 0.24);
  color: var(--soles-brown);
}

.demo3 .screen-step,
.demo3 .block-title > span,
.demo3 .attendee-number {
  color: var(--soles-orange-deep);
}

.demo3 .step-icon.active {
  background: var(--soles-yellow);
  border-color: var(--soles-yellow);
  box-shadow: 0 0 0 6px rgba(248, 149, 30, 0.16);
  color: var(--soles-cocoa-deep);
}

.demo3 .step-icon.done {
  background: var(--soles-orange-deep);
  border-color: var(--soles-orange-deep);
}

.demo3 .identity-guidance,
.demo3 .match-banner {
  background: #ffede5;
  border-color: rgba(245, 116, 33, 0.24);
  color: var(--soles-cocoa);
}

.demo3 .identity-guidance > span,
.demo3 .match-banner b {
  background: var(--soles-yellow);
  color: var(--soles-cocoa-deep);
}

.demo3 .identity-guidance p,
.demo3 .match-banner small {
  color: var(--soles-muted);
}

.demo3 .identity-guidance strong,
.demo3 .match-banner strong {
  color: var(--soles-cocoa);
}

.demo3 .photo-field,
.demo3 .attendee-row,
.demo3 .summary-profile,
.demo3 .checkout-amount {
  background: #fff7f2;
  border-color: rgba(242, 88, 34, 0.14);
}

.demo3 .summary-profile > span,
.demo3 .checkout-logo {
  background: var(--soles-cocoa);
  color: var(--soles-yellow);
}

.demo3 .summary-profile button,
.demo3 .checkout-amount strong,
.demo3 .checkout-methods b {
  color: var(--soles-orange-deep);
}

.demo3 .summary-attendees {
  background: rgba(242, 88, 34, 0.13);
  border-color: rgba(242, 88, 34, 0.13);
}

.demo3 .price-box,
.demo3 .checkout-card {
  border-color: rgba(242, 88, 34, 0.17);
}

.demo3 .checkout-card {
  box-shadow: 0 18px 45px rgba(242, 88, 34, 0.1);
}

.demo3 .price-box > div:not(.price-demo-tag),
.demo3 .checkout-head {
  border-color: rgba(242, 88, 34, 0.12);
}

.demo3 .price-demo-tag {
  background: #ffede5;
  color: var(--soles-brown);
}

.demo3 .price-box .discount-line,
.demo3 .simulation-message {
  background: rgba(245, 116, 33, 0.08);
}

.demo3 .price-box .discount-line span,
.demo3 .price-box .discount-line strong {
  color: var(--soles-orange-deep);
}

.demo3 .price-box .price-total {
  background: var(--soles-cocoa-deep);
}

.demo3 .price-box .price-total strong {
  color: var(--soles-yellow);
}

.demo3 .checkout-methods button {
  border-color: rgba(242, 88, 34, 0.16);
  color: var(--soles-cocoa);
}

.demo3 .checkout-methods i {
  background: #ffede5;
  color: var(--soles-orange-deep);
}

.demo3 .simulation-message {
  border-color: rgba(245, 116, 33, 0.2);
}

.demo3 .simulation-message > span {
  background: var(--soles-orange-deep);
}

.demo3 .terms-check input,
.guest-body .terms-check input {
  accent-color: var(--soles-orange-deep);
}

.demo3 .attendee-count {
  background: #ffede5;
  border-color: rgba(245, 116, 33, 0.28);
  color: var(--soles-orange-deep);
}

.demo3 .company-discount-hint {
  background: linear-gradient(110deg, #ffede5, #f8951e);
  border-color: rgba(245, 116, 33, 0.32);
}

/* Invitaciones privadas. */
.guest-body {
  background: var(--soles-cream);
  color: var(--soles-cocoa);
}

.guest-body .guest-brand {
  background: var(--soles-cocoa-deep);
  border-bottom-color: rgba(248, 149, 30, 0.24);
}

.guest-body .guest-brand img {
  filter: brightness(0) invert(1);
}

.guest-body .guest-brand span,
.guest-body .guest-overline {
  color: #f8951e;
  font-family: "Manrope", Arial, sans-serif;
}

.guest-body .guest-card {
  background: #fff7f2;
}

.guest-body .guest-intro {
  background:
    radial-gradient(circle at 18% 12%, rgba(248, 149, 30, 0.31), transparent 26%),
    linear-gradient(150deg, #f25822 0%, #f25822 58%, #f25822 100%);
}

.guest-body .guest-intro::after {
  color: transparent;
  content: "SOLES";
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(100px, 12vw, 190px);
  font-weight: 800;
  opacity: 0.5;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
}

.guest-body .guest-zero {
  background: var(--soles-yellow);
  color: var(--soles-cocoa-deep);
}

.guest-body .guest-form-heading > span,
.guest-body .guest-help a {
  color: var(--soles-orange-deep);
}

.guest-body .guest-form-heading h2,
.guest-body .guest-success h2,
.guest-body .guest-success strong {
  color: var(--soles-cocoa);
}

.guest-body .guest-form-heading p,
.guest-body .guest-help,
.guest-body .guest-success p {
  color: var(--soles-muted);
}

.guest-body .field > span {
  color: var(--soles-brown);
}

.guest-body .guest-form .field input {
  border-color: rgba(242, 88, 34, 0.2);
  color: var(--soles-cocoa);
}

.guest-body .guest-form .field input:focus {
  border-color: var(--soles-orange-deep);
  box-shadow: 0 0 0 3px rgba(245, 116, 33, 0.12);
}

.guest-body .guest-submit,
.guest-body .guest-success a {
  background: var(--soles-action);
  color: #ffffff;
}

.guest-body .guest-submit:hover,
.guest-body .guest-success a:hover {
  background: var(--soles-brown);
}

.guest-body .guest-success > span {
  background: #ffede5;
  color: var(--soles-orange-deep);
}

/* Estado del pago. */
.payment-body {
  background:
    radial-gradient(circle at 84% 9%, rgba(248, 149, 30, 0.25), transparent 29%),
    linear-gradient(145deg, #fff7f2, #ffede5);
  color: var(--soles-cocoa);
  display: grid;
  margin: 0;
  min-height: 100vh;
  padding: 22px;
  place-items: center;
}

.payment-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(245, 116, 33, 0.23);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(242, 88, 34, 0.14);
  padding: clamp(28px, 5vw, 42px);
  width: min(610px, 100%);
}

.payment-brand {
  color: var(--soles-orange-deep);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.payment-status {
  background: #ffede5;
  border-radius: 50%;
  color: var(--soles-orange-deep);
  display: grid;
  font-size: 28px;
  height: 64px;
  margin: 25px 0;
  place-items: center;
  width: 64px;
}

.payment-body h1 {
  font-size: clamp(32px, 7vw, 48px);
  line-height: 1;
  margin: 0;
}

.payment-body p {
  color: var(--soles-muted);
  line-height: 1.65;
}

.payment-details {
  background: #fff7f2;
  border: 1px solid rgba(245, 116, 33, 0.13);
  border-radius: 15px;
  display: grid;
  gap: 9px;
  margin: 24px 0;
  padding: 18px;
}

.payment-details span {
  display: flex;
  font-size: 13px;
  gap: 18px;
  justify-content: space-between;
}

.payment-details b {
  text-align: right;
}

.payment-back {
  background: var(--soles-action);
  border-radius: 11px;
  color: #ffffff;
  display: inline-block;
  font-weight: 700;
  padding: 14px 18px;
  text-decoration: none;
}

.payment-back:hover {
  background: var(--soles-brown);
}

.payment-note {
  color: var(--soles-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 0;
  }

  .demo3 .soles-hero {
    padding: 0;
  }

  .soles-banner-frame {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .demo3 .soles-hero .d3-stats {
    margin-top: 18px;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .demo3 .soles-hero {
    padding-right: 76px;
  }
}

@media (max-width: 680px) {
  .demo3 .soles-hero .d3-stats {
    width: calc(100% - 24px);
  }

  .demo3 .agenda-time {
    border-bottom-color: rgba(242, 88, 34, 0.14);
  }

  .payment-body {
    padding: 12px;
  }

  .payment-details span {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .payment-details b {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .demo3 *,
  .demo3 *::before,
  .demo3 *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

/* ========================================================================
   Paleta oficial de gerencia
   Marca: #F57421 · #F25822 · #F8951E
   Neutros funcionales: blanco y grafito para contraste y accesibilidad.
   ======================================================================== */

.demo3 .d3-brand img {
  filter: brightness(0);
  opacity: 0.84;
}

.demo3 .d3-nav a {
  color: rgba(36, 36, 36, 0.78);
}

.demo3 .d3-nav a:hover {
  color: #242424;
}

.demo3 .header-socials a {
  background: rgba(242, 88, 34, 0.08);
  border-color: rgba(242, 88, 34, 0.22);
  color: #f25822;
}

.demo3 .header-socials a:hover {
  background: #f8951e;
  border-color: #f8951e;
  color: #242424;
}

.demo3 .d3-header-cta,
.demo3 .d3-hero-cta {
  background: linear-gradient(115deg, #f8951e, #f57421);
  color: #242424;
}

.demo3 .soles-hero .d3-stats {
  background:
    radial-gradient(circle at 92% 18%, rgba(245, 116, 33, 0.3), transparent 34%),
    #242424;
}

.demo3 .d3-speakers {
  background:
    radial-gradient(circle at 90% 5%, rgba(245, 116, 33, 0.32), transparent 30%),
    linear-gradient(145deg, #242424 0%, #2b2b2b 100%);
}

.demo3 .tariffs-section {
  background:
    radial-gradient(circle at 8% 8%, rgba(245, 116, 33, 0.36), transparent 29%),
    radial-gradient(circle at 96% 92%, rgba(248, 149, 30, 0.2), transparent 29%),
    #242424;
}

.demo3 .event-contact-strip {
  background:
    radial-gradient(circle at 95% 100%, rgba(245, 116, 33, 0.32), transparent 32%),
    linear-gradient(110deg, #242424 0%, #2b2b2b 100%);
}

.demo3 .event-contact-links > a:first-child {
  background: linear-gradient(120deg, #f25822, #f8951e);
  color: #242424;
}

.demo3 .d7-panel-title {
  color: #242424;
}

.demo3 .d7-panel-title > span {
  color: rgba(36, 36, 36, 0.72);
}

.demo3 .floating-whatsapp {
  background: linear-gradient(145deg, #f25822, #f57421);
  border-color: #f8951e;
  color: #242424;
}

.demo3 .floating-whatsapp:hover {
  background: linear-gradient(145deg, #f57421, #f8951e);
}

.demo3 .pse-modal-head {
  background:
    radial-gradient(circle at 92% 12%, rgba(245, 116, 33, 0.32), transparent 34%),
    linear-gradient(105deg, #242424, #2b2b2b);
}

.demo3 .registration-aside,
.guest-body .guest-intro {
  background:
    radial-gradient(circle at 18% 12%, rgba(248, 149, 30, 0.28), transparent 25%),
    linear-gradient(155deg, #242424 0%, #2b2b2b 100%);
}

.demo3 .flow-primary,
.demo3 .add-attendee,
.guest-body .guest-submit,
.guest-body .guest-success a,
.payment-back {
  background: #f25822;
  color: #242424;
}

.demo3 .flow-primary:not(:disabled):hover,
.demo3 .add-attendee:hover,
.guest-body .guest-submit:hover,
.guest-body .guest-success a:hover,
.payment-back:hover {
  background: #f57421;
  color: #242424;
}

/* ========================================================================
   Cierre editorial y tipográfico · versión final
   Una sola familia para títulos, subtítulos, etiquetas y contenido.
   ======================================================================== */

.demo3 :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, a, button, label, input, select, textarea, time),
.guest-body :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, a, button, label, input, select, textarea, time),
.payment-body :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, a, button, label, input, select, textarea, time) {
  font-family: "Manrope", Arial, sans-serif !important;
}

.demo3 :where(h1, h2),
.guest-body :where(h1, h2),
.payment-body :where(h1, h2) {
  font-weight: 800 !important;
  text-wrap: balance;
}

.demo3 :where(h3, h4),
.guest-body :where(h3, h4),
.payment-body :where(h3, h4) {
  font-weight: 700 !important;
  text-wrap: balance;
}

.demo3 :where(.d3-section-tag, .aside-overline, .screen-step, .d4-speaker-intro span, .d4-speaker-info small, .agenda-activity small, .stage-card-top span, .stage-card-top b, .company-rates-intro > span, .company-rate-options small, .d7-panel-title > span, .d7-panel-title b, .d7-benefit-icon > span, .event-contact-strip > div:first-child > span, .event-contact-links small) {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em;
  line-height: 1.35;
}

.demo3 .field > span,
.guest-body .field > span {
  font-size: 13px !important;
}

.demo3 .d3-heading-grid.editorial-clean {
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1.58fr);
}

.demo3 .d3-agenda-head.editorial-clean {
  grid-template-columns: 1fr;
}

.demo3 .tariffs-heading.editorial-clean,
.demo3 .d7-benefits-heading.editorial-clean {
  grid-template-columns: minmax(150px, 0.38fr) minmax(0, 1.62fr);
}

.demo3 .d3-brochure-strip.editorial-clean > div {
  gap: 0;
}

.demo3 .d4-speaker-intro.editorial-clean {
  justify-content: flex-start;
}

.demo3 .d4-speaker-info.editorial-clean > span {
  margin-top: 30px;
}

.demo3 .company-rates-intro.editorial-clean h3,
.demo3 .event-contact-strip > div:first-child h3 {
  margin-bottom: 0;
}

@media (max-width: 1000px) {
  .demo3 .d3-heading-grid.editorial-clean,
  .demo3 .d3-agenda-head.editorial-clean,
  .demo3 .tariffs-heading.editorial-clean,
  .demo3 .d7-benefits-heading.editorial-clean {
    gap: 24px;
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   Gerencia · 04/09/2026 · Encabezado SOLES v2
   Franja naranja #F25822 de extremo a extremo, sin cápsula ni borde.
   Logo blanco y navegación blanca con escala visual inspirada en el “01”
   de la franja de referencia entregada por gerencia. El menú móvil sigue
   oculto según la decisión anterior.
   ======================================================================== */
@media (min-width: 901px) {
  .demo3 .d3-header {
    background: #f25822;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(36, 36, 36, 0.18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    grid-template-columns: minmax(185px, 220px) 1fr auto;
    gap: clamp(14px, 1.35vw, 28px);
    left: 0;
    min-height: 104px;
    padding: 13px clamp(22px, 2.2vw, 44px);
    top: 0;
    transform: none;
    width: 100%;
  }

  .demo3 .d3-header:hover {
    background: #f25822;
    border: 0 !important;
    box-shadow: 0 10px 28px rgba(36, 36, 36, 0.2);
  }

  .demo3 .d3-brand img {
    filter: brightness(0) invert(1);
    opacity: 1;
  }

  .demo3 .d3-nav {
    gap: clamp(14px, 1.55vw, 30px);
  }

  .demo3 .d3-nav a {
    color: #ffffff;
    font-size: clamp(24px, 2.15vw, 42px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
  }

  .demo3 .d3-nav a:hover {
    color: #ffffff;
  }

  .demo3 .d3-nav a::after {
    background: #ffca08;
    bottom: -10px;
    height: 3px;
  }

  .demo3 .header-socials a {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.42);
    color: #ffffff;
  }

  .demo3 .header-socials a:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #f25822;
  }
}

/* Evita desbordamientos en portátiles y tablets horizontales sin alterar
   la escala principal del menú en pantallas de escritorio amplias. */
@media (min-width: 901px) and (max-width: 1180px) {
  .demo3 .d3-header {
    grid-template-columns: 170px 1fr auto;
    gap: 12px;
    padding-inline: 18px;
  }

  .demo3 .d3-brand img {
    width: 170px;
  }

  .demo3 .d3-nav {
    gap: 12px;
  }

  .demo3 .d3-nav a {
    font-size: clamp(19px, 1.9vw, 24px) !important;
  }

  .demo3 .d4-header-actions {
    gap: 7px;
  }

  .demo3 .d3-header-cta {
    min-height: 54px;
    padding-inline: 14px;
  }
}


/* ========================================================================
   Gerencia · 04/09/2026 · Encabezado y banner SOLES v2.1.3
   - Banner oficial a ancho completo, sin franjas laterales.
   - Navegación de escritorio redistribuida con espaciado uniforme.
   - WhatsApp e Instagram sin cajas: iconos blancos, limpios y más visibles.
   Capa exclusivamente visual; no modifica formularios, pagos, QR ni asistencia.
   ======================================================================== */
@media (min-width: 901px) {
  .demo3 .d3-header {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) auto;
    column-gap: clamp(26px, 2.6vw, 56px);
    padding-left: clamp(28px, 3vw, 64px);
    padding-right: clamp(28px, 2vw, 46px);
  }

  .demo3 .d3-nav {
    display: flex;
    justify-content: space-evenly;
    gap: clamp(24px, 2.15vw, 52px);
    min-width: 0;
    width: 100%;
  }

  .demo3 .d4-header-actions {
    gap: clamp(13px, 1.05vw, 22px);
  }

  .demo3 .header-socials {
    gap: clamp(12px, 0.8vw, 18px);
  }

  .demo3 .header-socials a {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff;
    height: 48px;
    padding: 0;
    width: 34px;
  }

  .demo3 .header-socials a:hover {
    background: transparent !important;
    border: 0 !important;
    color: #ffffff;
    opacity: 0.78;
    transform: translateY(-2px) scale(1.04);
  }

  .demo3 .header-socials svg {
    height: 29px;
    stroke-width: 1.9;
    width: 29px;
  }

  .demo3 .d3-header-cta {
    margin-left: 2px;
  }

  .demo3 .soles-hero {
    margin: 0;
    max-width: none;
    padding: 104px 0 0 !important;
    width: 100% !important;
  }

  .demo3 .soles-banner-frame {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-width: none;
    width: 100%;
  }

  .demo3 .soles-banner-image {
    display: block;
    height: auto;
    max-width: none;
    object-fit: contain;
    width: 100%;
  }
}

/* En portátiles, conserva el aire entre elementos sin provocar desbordamientos. */
@media (min-width: 901px) and (max-width: 1360px) {
  .demo3 .d3-header {
    grid-template-columns: minmax(160px, 190px) minmax(0, 1fr) auto;
    column-gap: clamp(14px, 1.4vw, 24px);
    padding-left: 20px;
    padding-right: 20px;
  }

  .demo3 .d3-brand img {
    width: 175px;
  }

  .demo3 .d3-nav {
    gap: clamp(13px, 1.25vw, 22px);
    justify-content: center;
  }

  .demo3 .d3-nav a {
    font-size: clamp(19px, 1.9vw, 28px) !important;
  }

  .demo3 .header-socials {
    gap: 10px;
  }

  .demo3 .header-socials a {
    width: 30px;
  }

  .demo3 .header-socials svg {
    height: 25px;
    width: 25px;
  }
}


/* ========================================================================
   Gerencia · 04/09/2026 · Franja de datos SOLES v2.1.4
   - Franja a todo el ancho, sin cápsula, bordes redondeados ni sombra.
   - Fondo exacto de referencia: #FEF1E6.
   - Se eliminan 01 / 02 / 06 / ∞ y los conceptos toman la escala visual
     de los números anteriores.
   Capa exclusivamente visual; no modifica formularios, pagos, QR ni asistencia.
   ======================================================================== */
.demo3 .soles-hero .d3-stats {
  background: #fef1e6 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 28px 0 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  min-height: 165px;
  padding: 0 clamp(18px, 3.4vw, 68px) !important;
  width: 100vw !important;
}

.demo3 .soles-hero .d3-stats article,
.demo3 .soles-hero .d3-stats article:nth-child(2n),
.demo3 .soles-hero .d3-stats article:nth-child(-n+2) {
  align-items: center;
  border-bottom: 0 !important;
  border-right: 1px solid rgba(242, 88, 34, 0.18) !important;
  justify-content: center;
  min-height: 165px;
  padding: 24px clamp(18px, 2.25vw, 42px);
  text-align: center;
}

.demo3 .soles-hero .d3-stats article:last-child,
.demo3 .soles-hero .d3-stats article:nth-child(4) {
  border-right: 0 !important;
}

.demo3 .soles-hero .d3-stats strong {
  color: #f8951e !important;
  font-family: "Manrope", Arial, sans-serif !important;
  font-size: clamp(34px, 3.05vw, 56px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.98 !important;
  text-transform: none;
}

@media (max-width: 900px) {
  .demo3 .soles-hero .d3-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 18px !important;
    padding: 0 14px !important;
    width: 100vw !important;
  }

  .demo3 .soles-hero .d3-stats article,
  .demo3 .soles-hero .d3-stats article:nth-child(2n),
  .demo3 .soles-hero .d3-stats article:nth-child(-n+2) {
    border-bottom: 1px solid rgba(242, 88, 34, 0.18) !important;
    min-height: 132px;
    padding: 20px 14px;
  }

  .demo3 .soles-hero .d3-stats article:nth-child(2n) {
    border-right: 0 !important;
  }

  .demo3 .soles-hero .d3-stats article:nth-child(n+3) {
    border-bottom: 0 !important;
  }

  .demo3 .soles-hero .d3-stats strong {
    font-size: clamp(28px, 7vw, 42px) !important;
  }
}

@media (max-width: 420px) {
  .demo3 .soles-hero .d3-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-inline: 8px !important;
  }

  .demo3 .soles-hero .d3-stats article,
  .demo3 .soles-hero .d3-stats article:nth-child(2n),
  .demo3 .soles-hero .d3-stats article:nth-child(-n+2) {
    min-height: 118px;
    padding: 18px 8px;
  }

  .demo3 .soles-hero .d3-stats strong {
    font-size: clamp(24px, 7.5vw, 32px) !important;
    line-height: 1.02 !important;
  }
}

/* ========================================================================
   Gerencia · 04/09/2026 · Speakers y CTA orgánicos v2.1.5
   - Se eliminan las franjas ticker y brochure antes de speakers.
   - La sección “Dos voces confirmadas” toma fondo naranja completo.
   - Los espacios de speakers adoptan una forma orgánica inspirada en el sol.
   - El botón “Inscríbete aquí” adopta una forma orgánica coherente.
   Capa exclusivamente visual; no modifica formularios, pagos, QR ni asistencia.
   ======================================================================== */

.demo3 {
  --soles-speaker-orange: #f85b1f;
  --soles-speaker-orange-deep: #f25822;
  --soles-speaker-orange-soft: #fb8f1b;
  --soles-speaker-yellow: #f5cf08;
  --soles-speaker-ink: #4d1804;
}

.demo3 .d4-impact-ticker,
.demo3 .d3-brochure-strip {
  display: none !important;
}

.demo3 .d3-speakers {
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 196, 0, 0.18), transparent 22%),
    radial-gradient(circle at 92% 16%, rgba(255, 206, 82, 0.18), transparent 26%),
    linear-gradient(135deg, var(--soles-speaker-orange) 0%, #f57421 58%, var(--soles-speaker-orange-deep) 100%) !important;
  padding-top: clamp(76px, 7vw, 110px);
}

.demo3 .d3-speakers::before {
  -webkit-text-stroke-color: rgba(255, 238, 214, 0.16) !important;
}

.demo3 .d3-speakers .d3-heading-grid h2 {
  color: #fff !important;
}

.demo3 .d3-speakers .d3-heading-grid h2 em {
  color: #fff2d8 !important;
  font-weight: 800 !important;
}

.demo3 .d3-speakers .d3-section-tag.light {
  color: #ffe7cf !important;
}

.demo3 .d4-speaker-intro {
  border-color: rgba(255, 233, 213, 0.35) !important;
}

.demo3 .d4-speaker-intro strong,
.demo3 .d4-speaker-intro span {
  color: #fff7ef !important;
}

.demo3 .d3-speaker-grid {
  align-items: stretch;
  gap: clamp(26px, 2.4vw, 38px);
}

.demo3 .d4-speaker-card {
  align-items: center;
  background: rgba(255, 247, 242, 0.12) !important;
  border: 1px solid rgba(255, 240, 224, 0.24) !important;
  border-radius: 34px !important;
  box-shadow: 0 24px 55px rgba(121, 33, 0, 0.16) !important;
  display: grid !important;
  gap: clamp(18px, 2.2vw, 34px);
  grid-template-columns: minmax(220px, 340px) minmax(260px, 1fr);
  overflow: visible !important;
  padding: clamp(22px, 2vw, 28px) !important;
}

.demo3 .d3-speaker-photo {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(145deg, rgba(255, 191, 76, 0.16), rgba(255, 186, 48, 0.08)),
    url(../hero-demo3.png) center / cover no-repeat !important;
  border-radius: 50%;
  box-shadow: 0 16px 42px rgba(94, 20, 0, 0.18);
  justify-self: center;
  min-height: 280px;
  overflow: visible !important;
  position: relative;
  width: min(100%, 340px);
}

.demo3 .d3-speaker-photo::before {
  background: inherit;
  content: "";
  filter: none;
  height: 31%;
  left: -9%;
  position: absolute;
  top: 35%;
  transform: rotate(0deg);
  width: 36%;
  z-index: 0;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.demo3 .d3-speaker-photo::after {
  background: linear-gradient(145deg, rgba(255, 214, 80, 0.18), rgba(255, 255, 255, 0.06));
  border-radius: 50%;
  content: "";
  inset: 6%;
  opacity: 0.55;
  position: absolute;
  z-index: 0;
}

.demo3 .d3-speaker-photo.speaker-2::before {
  left: auto;
  right: -9%;
  transform: scaleX(-1);
}

.demo3 .d3-speaker-photo > span,
.demo3 .d3-speaker-photo > i,
.demo3 .d3-speaker-photo > b {
  position: relative;
  z-index: 1;
}

.demo3 .d3-speaker-photo > span {
  color: #fff6ed !important;
  left: 8%;
  top: 8%;
}

.demo3 .d3-speaker-photo > i {
  background: rgba(255, 249, 241, 0.94) !important;
  color: var(--soles-speaker-ink) !important;
}

.demo3 .d3-speaker-photo > b {
  color: rgba(255, 245, 233, 0.82) !important;
}

.demo3 .d4-speaker-info {
  background: rgba(73, 17, 0, 0.14);
  border: 1px solid rgba(255, 238, 224, 0.18);
  border-radius: 26px;
  min-height: 100%;
  padding: clamp(24px, 2vw, 32px);
}

.demo3 .d4-speaker-info small {
  color: #fff0d6 !important;
}

.demo3 .d4-speaker-info > strong,
.demo3 .d4-speaker-info > span {
  color: #ffffff !important;
}

.demo3 .d4-speaker-info > span b {
  color: #ffe1b8 !important;
}

.demo3 .d3-header-cta {
  background: linear-gradient(135deg, #f58f1d 0%, #f57f1e 55%, #f67e20 100%) !important;
  border: 1px solid rgba(255, 237, 217, 0.62) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px rgba(255, 248, 240, 0.74), 0 14px 30px rgba(146, 49, 0, 0.18) !important;
  color: #2c1406 !important;
  min-height: 64px;
  padding: 0 28px 0 32px !important;
  position: relative;
}

.demo3 .d3-header-cta::before {
  background: inherit;
  border: inherit;
  border-right: 0;
  border-top: 0;
  content: "";
  height: 28px;
  left: -12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 28px;
  border-radius: 0 0 0 10px;
}

.demo3 .d3-header-cta svg {
  position: relative;
  z-index: 1;
}

.demo3 .d3-header-cta:hover {
  background: linear-gradient(135deg, #f7a11f 0%, #f8901e 55%, #f78423 100%) !important;
  color: #241004 !important;
}

@media (max-width: 1100px) {
  .demo3 .d4-speaker-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .demo3 .d4-speaker-info {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .demo3 .d3-speakers {
    padding-top: 62px;
  }

  .demo3 .d3-speaker-grid {
    gap: 24px;
  }

  .demo3 .d3-speaker-photo {
    min-height: 250px;
    width: min(100%, 285px);
  }

  .demo3 .d3-header-cta {
    min-height: 58px;
    padding: 0 22px 0 26px !important;
  }
}

@media (max-width: 560px) {
  .demo3 .d4-speaker-card {
    border-radius: 24px !important;
    padding: 18px !important;
  }

  .demo3 .d3-speaker-photo {
    min-height: 220px;
    width: min(100%, 240px);
  }

  .demo3 .d4-speaker-info {
    border-radius: 20px;
    padding: 20px;
  }
}

/* ========================================================================
   Gerencia · 04/09/2026 · Ajustes tipográficos y limpieza visual v2.1.6
   - Se referencia la familia NOAH HEAD con fallback seguro.
   - Franja principal en mayúsculas.
   - Se eliminan tags numerados de sección.
   - Fotos de speakers sobre forma amarilla tipo sol.
   - Se ocultan números de fila en agenda y tarjetas numeradas.
   Capa exclusivamente visual; no modifica formularios, pagos, QR ni asistencia.
   ======================================================================== */

@font-face {
  font-family: "NOAH HEAD";
  src: local("NOAH HEAD Regular"), local("NOAH HEAD"), local("Noah Head Regular"), local("Noah Head");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "NOAH HEAD";
  src: local("NOAH HEAD ExtraBold"), local("Noah Head ExtraBold"), local("NOAH HEAD");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

.demo3 :where(.d3-heading-grid h2, .d3-agenda-head h2, .tariffs-heading h2, .d7-benefits-heading h2, .company-rates-intro h3, .d7-panel-title h3, .soles-hero .d3-stats strong) {
  font-family: "NOAH HEAD", "Manrope", Arial, sans-serif !important;
  font-weight: 400 !important;
}

.demo3 :where(.d3-heading-grid h2 em, .tariffs-heading h2 em, .d7-benefits-heading h2 strong, .company-rates-intro h3 strong, .d7-panel-title h3 strong) {
  font-family: "NOAH HEAD", "Manrope", Arial, sans-serif !important;
  font-weight: 800 !important;
}

.demo3 .soles-hero .d3-stats strong {
  text-transform: uppercase !important;
}

.demo3 .d3-section-tag {
  display: none !important;
}

.demo3 .d3-heading-grid,
.demo3 .d3-agenda-head,
.demo3 .tariffs-heading,
.demo3 .d7-benefits-heading {
  row-gap: 0 !important;
}

.demo3 .d3-heading-grid h2,
.demo3 .d3-agenda-head h2,
.demo3 .tariffs-heading h2,
.demo3 .d7-benefits-heading h2 {
  margin-top: 0 !important;
}

.demo3 .d3-speaker-photo {
  background: #f5cf08 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 18px 38px rgba(113, 39, 0, 0.16) !important;
  overflow: visible !important;
  position: relative;
}

.demo3 .d3-speaker-photo::before {
  background: #f5cf08 !important;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: "";
  height: 31%;
  left: -10%;
  position: absolute;
  top: 35%;
  width: 36%;
  z-index: 0;
}

.demo3 .d3-speaker-photo.speaker-2::before {
  left: auto;
  right: -10%;
  transform: scaleX(-1);
}

.demo3 .d3-speaker-photo::after {
  background: url(../hero-demo3.png) center / cover no-repeat;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(85, 24, 0, 0.18);
  content: "";
  inset: 10%;
  position: absolute;
  z-index: 1;
}

.demo3 .d3-speaker-photo.speaker-2::after {
  background-position: 58% center;
}

.demo3 .d3-speaker-photo > span,
.demo3 .d3-speaker-photo > i,
.demo3 .d3-speaker-photo > b {
  position: relative;
  z-index: 2;
}

.demo3 .d3-speaker-photo > span {
  color: #ffffff !important;
}

.demo3 .d3-speaker-photo > i {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #4d1804 !important;
}

.demo3 .d3-speaker-photo > b {
  color: rgba(77, 24, 4, 0.6) !important;
}

.demo3 .agenda-time > span,
.demo3 .company-rate-options article > span,
.demo3 .d7-benefit-icon > span {
  display: none !important;
}

.demo3 .agenda-time {
  gap: 0 !important;
  min-width: 185px;
}

.demo3 .agenda-time time {
  display: block;
  width: 100%;
}

@media (max-width: 900px) {
  .demo3 .agenda-time {
    min-width: 0;
  }
}

/* ========================================================================
   Gerencia · 04/09/2026 · Ajustes de composición v2.1.7
   - Títulos de Speakers y Tarifas centrados.
   - Horarios de Agenda siempre en una sola línea.
   - Se retira el texto visual “SIN LÍMITE” de inscripción empresarial.
   - Forma amarilla exacta entregada por gerencia para speakers y CTA.
   Capa visual; no modifica pagos, QR, asistencia ni estructura de base de datos.
   ======================================================================== */

/* Título de speakers centrado y con ancho suficiente para evitar cortes forzados. */
.demo3 .d3-speakers .d3-heading-grid.editorial-clean {
  display: block !important;
  grid-template-columns: none !important;
  text-align: center !important;
  width: 100%;
}

.demo3 .d3-speakers .d3-heading-grid.editorial-clean h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1320px;
  text-align: center !important;
  width: 100%;
}

/* Título de tarifas centrado. */
.demo3 .tariffs-heading.editorial-clean {
  display: block !important;
  grid-template-columns: none !important;
  text-align: center !important;
  width: 100%;
}

.demo3 .tariffs-heading.editorial-clean h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1320px;
  text-align: center !important;
  width: 100%;
}

/* Agenda: el rango horario se mantiene íntegro en una sola línea. */
.demo3 .agenda-time {
  grid-template-columns: 1fr !important;
  min-width: clamp(255px, 19vw, 330px) !important;
}

.demo3 .agenda-time time {
  display: block !important;
  white-space: nowrap !important;
  width: max-content !important;
  max-width: 100%;
}

/* Forma exacta entregada por gerencia: sin círculos internos, textos ni adornos. */
.demo3 .d3-speaker-photo,
.demo3 .d3-speaker-photo.speaker-2 {
  aspect-ratio: 963 / 773 !important;
  background: url('forma-speaker-amarilla.png') center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  width: min(100%, 390px) !important;
}

.demo3 .d3-speaker-photo::before,
.demo3 .d3-speaker-photo::after,
.demo3 .d3-speaker-photo.speaker-2::before,
.demo3 .d3-speaker-photo.speaker-2::after {
  content: none !important;
  display: none !important;
}

.demo3 .d3-speaker-photo > span,
.demo3 .d3-speaker-photo > i,
.demo3 .d3-speaker-photo > b {
  display: none !important;
}

/* CTA con la misma silueta exacta. El texto conserva su enlace y función. */
.demo3 .d3-header-cta,
.demo3 .d4-mobile-cta {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #3b1b08 !important;
  isolation: isolate;
  min-height: 82px !important;
  min-width: 190px;
  padding: 0 24px 0 46px !important;
  position: relative;
}

.demo3 .d3-header-cta::before,
.demo3 .d4-mobile-cta::before {
  background: url('forma-speaker-amarilla.png') center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  content: "" !important;
  display: block !important;
  inset: -6px -12px !important;
  position: absolute !important;
  transform: none !important;
  z-index: -1;
}

.demo3 .d3-header-cta:hover,
.demo3 .d4-mobile-cta:hover {
  background: transparent !important;
  color: #3b1b08 !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .demo3 .agenda-time {
    min-width: 0 !important;
    width: 100%;
  }

  .demo3 .agenda-time time {
    font-size: clamp(16px, 5vw, 20px) !important;
    max-width: 100%;
    white-space: nowrap !important;
  }

  .demo3 .d3-speaker-photo,
  .demo3 .d3-speaker-photo.speaker-2 {
    width: min(100%, 320px) !important;
  }
}

@media (max-width: 420px) {
  .demo3 .agenda-time time {
    font-size: 15px !important;
    letter-spacing: -0.055em !important;
  }
}


/* ========================================================================
   SOLES v2.2.2 · 04/09/2026 · CORRECCIÓN FINAL DE CENTRADO
   Causa corregida: los H2 eran auto-colocados en la primera columna de grids
   editoriales de 3 columnas. Se fuerza una sola columna y el H2 ocupa 1/-1.
   Solo afecta los 3 encabezados solicitados.
   ======================================================================== */
.demo3 .d3-speakers .d3-heading-grid.editorial-clean.soles-title-fix-v222,
.demo3 .tariffs-section .tariffs-heading.editorial-clean.soles-title-fix-v222,
.demo3 .d7-benefits .d7-benefits-heading.editorial-clean.soles-title-fix-v222 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}
.demo3 .d3-speakers .d3-heading-grid.editorial-clean.soles-title-fix-v222 > h2,
.demo3 .tariffs-section .tariffs-heading.editorial-clean.soles-title-fix-v222 > h2,
.demo3 .d7-benefits .d7-benefits-heading.editorial-clean.soles-title-fix-v222 > h2 {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 clamp(18px, 2.2vw, 42px) !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  font-family: "NOAH HEAD", "Manrope", Arial, sans-serif !important;
  font-size: clamp(50px, 4.7vw, 84px) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
  font-weight: 400 !important;
}
.demo3 .soles-title-fix-v222 > h2 em,
.demo3 .soles-title-fix-v222 > h2 strong {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 800 !important;
}
@media (max-width: 900px) {
  .demo3 .soles-title-fix-v222 > h2 {
    max-width: 760px !important;
    font-size: clamp(38px, 10.2vw, 60px) !important;
    line-height: .97 !important;
    padding-inline: 14px !important;
  }
}


/* ========================================================================
   SOLES v2.4.6 · Banner móvil a pantalla completa
   - Solo en móviles, el banner vertical ocupa la pantalla completa al abrir.
   - Se ocultan las estadísticas bajo el banner en móvil porque ya están
     integradas visualmente en la pieza entregada por gerencia.
   - Desktop permanece intacto.
   ======================================================================== */
@media (max-width: 900px) {
  .demo3 .soles-hero {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100svh !important;
    background: #f67725 !important;
  }

  .demo3 .soles-banner-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    background: #f67725 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .demo3 .soles-banner-frame picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .demo3 .soles-banner-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 100svh !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }

  .demo3 .soles-hero .d3-stats {
    display: none !important;
  }
}


/* ========================================================================
   SOLES v2.4.7 · Banner móvil fullscreen + franja de estadísticas visible
   - Conserva el banner móvil ocupando toda la pantalla al abrir.
   - Restaura la franja de estadísticas inmediatamente después del banner.
   ======================================================================== */
@media (max-width: 900px) {
  .demo3 .soles-hero {
    min-height: auto !important;
  }

  .demo3 .soles-hero .d3-stats {
    display: grid !important;
    width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}