.elementor-7507 .elementor-element.elementor-element-538cd86{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --celeste: #74ACDF; --celeste-oscuro: #3a7ab8; --celeste-claro: #a8d4f5;
    --verde: #1a5c2a; --verde-oscuro: #0d3317; --teal: #00b4a0;
    --dorado: #F6B40E; --dorado-oscuro: #c8900a; --blanco: #ffffff;
  }
  html, body { min-height: 100vh; }
  body { font-family: 'Barlow', sans-serif; background: #0b1624; color: var(--blanco); display: flex; flex-direction: column; }

  /* ── HEADER ── */
  header { padding: 0; width: 100%; }
  .header-stripe { background: var(--celeste); height: 8px; width: 100%; }
  .header-white {
    background: #fff;
    height: 64px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    width: 100%;
  }
  .header-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
  }
  .header-logos img {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-shrink: 0;
  }
  .header-logos img.bus {
    border-radius: 8px;
    width: auto;
    height: 38px;
  }
  .header-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .header-center h1 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(14px, 3vw, 20px);
    color: var(--celeste-oscuro);
    letter-spacing: 3px;
    line-height: 1;
    white-space: nowrap;
  }
  .header-center p {
    font-size: clamp(8px, 1.5vw, 10px);
    color: #999;
    letter-spacing: 2px;
    margin-top: 3px;
    font-weight: 600;
    white-space: nowrap;
  }
  .header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .mundial-badge {
    background: var(--celeste-oscuro);
    color: var(--dorado);
    font-family: 'Anton', sans-serif;
    font-size: clamp(9px, 1.5vw, 11px);
    padding: 6px 12px;
    border-radius: 8px;
    letter-spacing: 1px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }

  /* ── HERO ── */
  main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 16px 60px; width: 100%; }
  .hero {
    width: 100%;
    background: linear-gradient(180deg, #0b1624, #0d2040 60%, #0b1624);
    text-align: center;
    padding: 36px 20px 32px;
    position: relative;
    overflow: hidden;
  }
  .hero::before, .hero::after {
    content: '';
    position: absolute; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--celeste), #fff, var(--celeste), transparent);
  }
  .hero::before { top: 0; } .hero::after { bottom: 0; }
  .hero-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(10px, 2vw, 12px);
    font-weight: 700; letter-spacing: 4px;
    color: var(--celeste-claro); margin-bottom: 10px;
  }
  .hero-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(36px, 10vw, 56px);
    line-height: 0.95; letter-spacing: 2px; margin-bottom: 4px;
  }
  .c-white { color: #fff; } .c-celeste { color: var(--celeste); } .c-gold { color: var(--dorado); }
  .stars { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; font-size: 18px; color: var(--dorado); }
  .hero-sub {
    font-size: clamp(13px, 3vw, 15px);
    color: rgba(255,255,255,0.55);
    max-width: 480px; margin: 14px auto 0; line-height: 1.7;
  }

  /* ── FORM ── */
  .form-wrapper { width: 100%; max-width: 520px; margin-top: 32px; }
  .form-card {
    background: rgba(116,172,223,0.06);
    border: 1px solid rgba(116,172,223,0.2);
    border-radius: 20px; padding: 28px 28px 24px;
    position: relative; overflow: hidden;
  }
  .form-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--celeste), #fff, var(--celeste));
  }
  .section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 3px;
    color: var(--celeste); margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
  }
  .section-label::after { content: ''; flex: 1; height: 1px; background: rgba(116,172,223,0.2); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .fg { display: flex; flex-direction: column; gap: 6px; }
  .fg.full { grid-column: 1 / -1; }
  label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.45); text-transform: uppercase;
  }
  input[type="text"] {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(116,172,223,0.25);
    border-radius: 10px; padding: 13px 14px;
    color: #fff; font-family: 'Barlow', sans-serif;
    font-size: 15px; transition: all 0.2s; outline: none; width: 100%;
    -webkit-appearance: none;
  }
  input[type="text"]::placeholder { color: rgba(255,255,255,0.2); }
  input[type="text"]:focus {
    border-color: var(--celeste);
    background: rgba(116,172,223,0.1);
    box-shadow: 0 0 0 3px rgba(116,172,223,0.1);
  }

  /* ── FOTO ── */
  .foto-area {
    border: 2px dashed rgba(116,172,223,0.3); border-radius: 14px;
    padding: 28px 20px; text-align: center; cursor: pointer;
    transition: all 0.2s; position: relative; overflow: hidden;
  }
  .foto-area:hover { border-color: var(--celeste); background: rgba(116,172,223,0.06); }
  .foto-area.loaded { border-color: var(--verde); border-style: solid; background: rgba(26,92,42,0.08); }
  .foto-area input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  #foto-preview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; display: none; border: 2px solid var(--celeste); }
  .foto-icon { font-size: 32px; margin-bottom: 8px; }
  .foto-text { font-size: 14px; color: rgba(255,255,255,0.55); font-weight: 500; }
  .foto-hint { font-size: 11px; color: rgba(255,255,255,0.25); margin-top: 5px; line-height: 1.5; }

  /* ── BASES ── */
  .bases-row {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 20px; padding: 14px 16px;
    background: rgba(116,172,223,0.06);
    border: 1px solid rgba(116,172,223,0.15); border-radius: 12px;
  }
  .bases-row input[type="checkbox"] {
    width: 20px; height: 20px; min-width: 20px;
    margin-top: 1px; accent-color: var(--celeste); cursor: pointer;
  }
  .bases-row label {
    font-size: 13px; color: rgba(255,255,255,0.65);
    letter-spacing: 0; font-weight: 400; text-transform: none;
    cursor: pointer; line-height: 1.6;
  }
  .bases-row label a { color: var(--celeste); text-decoration: underline; }
  .bases-row label a:hover { color: var(--celeste-claro); }

  /* ── BOTÓN GENERAR ── */
  .btn-generar {
    width: 100%;
    background: linear-gradient(135deg, var(--celeste-oscuro), var(--celeste));
    color: #fff; font-family: 'Anton', sans-serif;
    font-size: clamp(16px, 4vw, 20px); letter-spacing: 3px;
    padding: 18px; border: none; border-radius: 14px;
    cursor: pointer; margin-top: 16px; transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(116,172,223,0.25);
    -webkit-tap-highlight-color: transparent;
  }
  .btn-generar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(116,172,223,0.4); }
  .btn-generar:active:not(:disabled) { transform: translateY(0); }
  .btn-generar:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

  /* ── LOADING ── */
  .loading-area { display: none; text-align: center; padding: 50px 20px; }
  .loading-area.visible { display: block; }
  .spinner {
    width: 60px; height: 60px; margin: 0 auto 24px;
    border: 3px solid rgba(116,172,223,0.15);
    border-top-color: var(--celeste); border-right-color: #fff;
    border-radius: 50%; animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font-family: 'Anton', sans-serif; font-size: 18px; color: var(--celeste); letter-spacing: 2px; margin-bottom: 8px; }
  .loading-sub { font-size: 12px; color: rgba(255,255,255,0.3); line-height: 1.6; }

  /* ── RESULTADO ── */
  .result-area {
    display: none; flex-direction: column; align-items: center;
    gap: 16px; width: 100%; max-width: 380px; margin-top: 32px;
  }
  .result-area.visible { display: flex; }
  .result-title { font-family: 'Anton', sans-serif; font-size: clamp(20px, 5vw, 26px); color: var(--dorado); letter-spacing: 3px; text-align: center; }
  .result-sub { font-size: 13px; color: rgba(255,255,255,0.4); text-align: center; }
  #figurita-container {
    position: relative; width: 100%; border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(116,172,223,0.2);
  }
  #figurita-img { width: 100%; display: block; border-radius: 16px; }
  #logo-overlay {
    position: absolute; top: 10px; left: 10px;
    width: clamp(52px, 14%, 66px); height: clamp(52px, 14%, 66px);
    border-radius: 50%;
    object-fit: contain;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
  }
  .btn-descargar {
    width: 100%;
    background: linear-gradient(135deg, var(--dorado-oscuro), var(--dorado));
    color: #0d1a0a; font-family: 'Anton', sans-serif;
    font-size: clamp(16px, 4vw, 19px); letter-spacing: 2px;
    padding: 17px; border: none; border-radius: 14px;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(246,180,14,0.3);
    -webkit-tap-highlight-color: transparent;
  }
  .btn-descargar:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(246,180,14,0.5); }
  .btn-descargar:active { transform: translateY(0); }
  .btn-otra {
    background: transparent; color: rgba(255,255,255,0.4);
    border: 1px solid rgba(116,172,223,0.2); border-radius: 14px;
    padding: 13px; font-family: 'Barlow', sans-serif; font-size: 14px;
    cursor: pointer; width: 100%; transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .btn-otra:hover { border-color: var(--celeste); color: var(--celeste); }

  /* ── ERROR ── */
  .error-box {
    display: none; background: rgba(220,50,50,0.1);
    border: 1px solid rgba(220,50,50,0.3); border-radius: 12px;
    padding: 14px 18px; font-size: 14px; color: #ff8080;
    max-width: 520px; width: 100%; text-align: center; margin-top: 16px;
    line-height: 1.5;
  }
  .error-box.visible { display: block; }

  /* ── FOOTER ── */
  footer { width: 100%; }
  .footer-white { background: #fff; padding: 16px; text-align: center; }
  .footer-white p { font-family: 'Anton', sans-serif; font-size: 13px; color: var(--celeste-oscuro); letter-spacing: 2px; }
  .footer-white span { font-family: 'Barlow', sans-serif; font-size: 11px; color: #aaa; display: block; margin-top: 3px; }

  /* ── RESPONSIVE MOBILE ── */
  @media (max-width: 480px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-card { padding: 20px 16px 18px; }
    .header-white { height: 58px; padding: 0 12px; gap: 8px; }
    .header-logos img { height: 38px; width: 38px; }
    .header-logos img.bus { height: 32px; }
    .mundial-badge { padding: 4px 8px; font-size: 9px; }
    .hero { padding: 28px 16px 26px; }
    .form-wrapper { margin-top: 24px; }
    .result-area { max-width: 100%; }
    .bases-row label { font-size: 12px; }
  }

  @media (max-width: 360px) {
    .header-center h1 { font-size: 13px; letter-spacing: 1px; }
    .header-logos img.bus { display: none; }
  }/* End custom CSS */