.elementor-18121 .elementor-element.elementor-element-20092de > .elementor-background-overlay{background-color:#242157;opacity:0.96;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-18121 .elementor-element.elementor-element-20092de > .elementor-container{min-height:250px;}.elementor-18121 .elementor-element.elementor-element-20092de{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:50px 0px 0px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Barlow Semi Condensed;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-18121 .elementor-element.elementor-element-4974efb{text-align:center;}.elementor-18121 .elementor-element.elementor-element-4974efb .elementor-heading-title{font-family:"Lato", Barlow Semi Condensed;font-size:52px;font-weight:300;text-transform:uppercase;color:#FFFFFF;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Barlow Semi Condensed;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-18121 .elementor-element.elementor-element-ada421e{--divider-border-style:solid;--divider-color:#EE2130;--divider-border-width:3px;}.elementor-18121 .elementor-element.elementor-element-ada421e .elementor-divider-separator{width:12%;margin:0 auto;margin-center:0;}.elementor-18121 .elementor-element.elementor-element-ada421e .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-18121 .elementor-element.elementor-element-4a4ffb4{text-align:center;}.elementor-18121 .elementor-element.elementor-element-4a4ffb4 .elementor-heading-title{font-family:"Lato", Barlow Semi Condensed;font-size:16px;font-weight:300;color:#FFFFFF;}.elementor-18121 .elementor-element.elementor-element-eb1ea73 > .elementor-element-populated{padding:5% 0% 0% 0%;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-18121 .elementor-element.elementor-element-20092de{margin-top:0px;margin-bottom:0px;padding:50px 0px 50px 0px;}.elementor-18121 .elementor-element.elementor-element-4974efb > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18121 .elementor-element.elementor-element-4974efb .elementor-heading-title{font-size:30px;}}/* Start custom CSS for html, class: .elementor-element-d781375 */#step1 {
  text-align: center;
}
    :root {
      --primary: #1e40af;
      --primary-dark: #1e3a8a;
      --accent: #dc2626;
      --accent-light: #fef2f2;
      --accent-hover: #b91c1c;
      --background: #ffffff;
      --card: #ffffff;
      --foreground: #111827;
      --muted: #6b7280;
      --muted-light: #9ca3af;
      --border: #e5e7eb;
      --border-light: #f3f4f6;
      --success: #10b981;
      --radius: 12px;
      --radius-lg: 16px;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      color: var(--foreground);
    }
    a:hover, a:focus {
  color: white;
}
#successTitle {
  color: #242157;
  font-weight: bold;
}
    .container {
      max-width: 680px;
      margin: 0 auto;
      min-height: 50vh;
      display: flex;
      flex-direction: column;
    }

    .rac-header {
      text-align: center;
      padding: 24px 0;
    }

    .rac-logo {
      font-size: 30px!important;
      font-weight: 700;
      color: black;
      letter-spacing: -0.5px;
    }

    .rac-small {
      font-size: 14px;
      color: var(--muted);
      margin-top: 4px;
      font-weight: 500;
    }

    .card-main {
      background: var(--card);
      border-radius: var(--radius-lg);
      padding: 32px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-light);
      flex-grow: 1;
      position: relative;
      overflow: hidden;
    }

    .card-main::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
    }

    .title {
      font-size: 20px;
      font-weight: 700;
      color: var(--foreground);
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }

    .subtitle {
      color: var(--muted);
      font-size: 16px;
      margin-bottom: 16px;
    }

    .muted-note {
      color: var(--muted-light);
      font-size: 14px;
      margin-top: 20px;
      line-height: 1.5;
      text-align: center;
    }

    .reservation-tag {
      background: var(--accent-light);
      color: var(--accent);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
    }

    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
      padding: 16px;
      background: var(--border-light);
      border-radius: var(--radius);
      transition: var(--transition);
    }

    .checkbox-row:hover {
      background: #e5e7eb;
    }

    .checkbox-row input[type="checkbox"] {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: 2px solid var(--muted);
      cursor: pointer;
      accent-color: var(--accent);
    }

    .checkbox-label {
      font-size: 15px;
      font-weight: 600;
      color: var(--foreground);
      cursor: pointer;
    }

    .stars {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin: 32px 0;
    }

    .star {
      font-size: 48px;
      color: var(--border);
      cursor: pointer;
      transition: var(--transition);
      line-height: 1;
      user-select: none;
    }

    .star:hover {
      transform: scale(1.2);
      color: #fbbf24;
    }

    .star.selected {
      color: var(--accent);
      transform: scale(1.1);
    }

    .star-labels {
      display: flex;
      justify-content: space-between;
      max-width: 400px;
      margin: 0 auto 24px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
    }

    .tap-hint {
      text-align: center;
      color: var(--muted-light);
      font-size: 14px;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    .loading {
      text-align: center;
      padding: 40px 0;
    }

    .loading-svg {
      animation: spin 1s linear infinite;
      margin-bottom: 16px;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .step2 {
      opacity: 0;
      transform: translateY(10px);
      transition: var(--transition);
    }

    .step2.active {
      opacity: 1;
      transform: translateY(0);
    }

    .mini-stars {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 32px;
      padding: 20px;
      background: var(--border-light);
      border-radius: var(--radius);
    }

    .mini-stars .star {
      font-size: 24px;
    }

    .btn {
     padding: 15px;
      border-radius: var(--radius);
      font-size: 15px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }

    .btn-ghost:hover {
      background: var(--border-light);
      color: var(--foreground);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
    }

    .btn-outline {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }

    .btn-outline:hover {
      background: var(--border-light);
      color: var(--foreground);
    }

    .btn-blue {
      background: #d32323;
      color: white;
      width: 100%;
    }

    .btn-blue:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(30, 64, 175, 0.25);
    }

    .btn-secondary {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
      width: 100%;
    }

    .btn-secondary:hover {
      background: var(--border-light);
      color: var(--foreground);
    }

    .controls {
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }

    .rac-label {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: var(--foreground);
      margin-bottom: 8px;
    }

    textarea, input[type="email"] {
      width: 100%;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      transition: var(--transition);
      background: var(--background);
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    textarea:focus, input[type="email"]:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }

    .success {
      text-align: center;
      padding: 40px 0;
      opacity: 0;
      transform: scale(0.95);
      animation: success-appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes success-appear {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .check-icon {
  width: 80px;
  height: 80px;
  background: white;
  color: red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  margin: 0 auto 24px;
  border: 7px solid;
}

    @keyframes check-glow {
      0%, 100% { box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3); }
      50% { box-shadow: 0 8px 35px rgba(16, 185, 129, 0.5); }
    }

    .external-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 32px;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }

    .btn-external {
      padding: 16px;
      border: 2px solid var(--border);
      background: transparent;
      color: var(--foreground);
      border-radius: var(--radius);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    .btn-external:hover {
      background: rgba(220, 38, 38, 0.1);
      border-color: var(--accent);
      color: var(--foreground);
      transform: translateY(-2px);
    }

    footer {
      text-align: center;
      padding: 24px 0;
      color: var(--muted);
      font-size: 14px;
      margin-top: auto;
    }

    .fade-in {
      animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Responsive */
    @media (max-width: 480px) {
      .card-main {
        padding: 24px;
      }
      
      .title {
        font-size: 24px;
      }
      
      .stars {
        gap: 8px;
      }
      
      .star {
        font-size: 40px;
      }
      
      .controls {
        flex-direction: column;
      }
      
      .btn {
        width: 100%;
      }
    }

    .hidden {
      display: none !important;
    }
@media (max-width: 600px) {
#mainCard {
  margin: 5%;
}
}
#miniStarsWrap {
  text-align: center;
  display: block;
}
#commentLabel {
  display: inline-block;
}
.btn-secondary {
  background-color: transparent !important;
  color: black !important;
}
.celebration {
  font-size: 75px;
}
 
/* Estilo para el mensaje de éxito fijo */
#fixed-success-message {
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #ddd;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #000;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#fixed-success-message.visible {
  opacity: 1;
  transform: translateY(0);
}

#fixed-success-message .success-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
}

#fixed-success-message .success-content {
  flex: 1;
}

#fixed-success-message strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

/* El contenedor global siempre visible */
#global-fixed-success-message {
  margin-top: 20px;
}

/* Asegurar que siempre esté visible */
#global-fixed-success-message.hidden {
  display: none !important;
}/* End custom CSS */
/* Start custom CSS */<style>
    :root{
      /* Brand-aligned palette */
      --brand:#0b64d6;
      --brand-hover:#094fa9;
      --text:#1c2530;
      --muted:#4a5565;
      --bg:#f7fafc;
      --card:#ffffff;
      --border:#e3e8ef;
      --chip:#f1f5f9;
      --chip-border:#e5eaf1;
      --shadow:0 6px 18px rgba(17,24,39,.06);
      --footer:#0a3c7b;
      --success:#10b981;
      --success-bg:#d1fae5;
      --warning:#f59e0b;
      --warning-bg:#fef3c7;
    }
    
    *{
      box-sizing:border-box; 
      margin:0; 
      padding:0;
    }
    
    html, body{
      height:100%;
      background:var(--bg);
      color:var(--text);
      font-family:'Inter',system-ui,Segoe UI,Helvetica,Arial,sans-serif;
      line-height:1.5;
    }
    
    a{
      text-decoration:none;
      color:var(--brand);
    }
    
    .rac-container{
      max-width:600px;
      margin:0 auto;
      padding:20px 16px;
      min-height:calc(100vh - 200px);
    }

    /* Header */
    .rac-header{
      background:#fff;
      border-bottom:1px solid var(--border);
      box-shadow:0 4px 12px rgba(0,0,0,.03);
      padding:20px 0;
      text-align:center;
    }
    
    .rac-logo{
      font-weight:700;
      font-size:20px;
      color:var(--brand);
      margin:0;
    }

    /* Card */
    .rac-card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:14px;
      box-shadow:var(--shadow);
      padding:32px 24px;
      margin:24px 0;
      text-align:center;
    }

    /* Page Management */
    .rac-page{
      display:none;
    }
    
    .rac-page-active{
      display:block;
      animation:rac-fadeIn 0.3s ease;
    }
    
    @keyframes rac-fadeIn {
      from { opacity:0; transform:translateY(10px); }
      to { opacity:1; transform:translateY(0); }
    }
    
    .rac-title{
      font-size:28px;
      line-height:1.3;
      margin:0 0 12px;
      color:var(--text);
    }
    
    .rac-subtitle{
      color:var(--muted);
      margin:0 0 32px;
      font-size:16px;
      line-height:1.5;
    }
    
    .rac-welcome-text{
      color:var(--muted);
      margin:0 0 32px;
      font-size:16px;
      line-height:1.6;
      padding-bottom:24px;
      border-bottom:1px solid var(--border);
    }

    /* Star Rating */
    .rac-stars-container{
      display:flex;
      justify-content:center;
      gap:16px;
      margin:32px 0;
    }
    
    .rac-star{
      font-size:56px;
      cursor:pointer;
      transition:all 0.2s ease;
      color:#d1d5db;
      user-select:none;
    }
    
    .rac-star:hover{
      transform:scale(1.15);
      color:#fbbf24;
    }
    
    .rac-star-selected{
      color:#f59e0b;
    }
    
    .rac-star-labels{
      display:flex;
      justify-content:center;
      gap:16px;
      margin-top:8px;
    }
    
    .rac-star-label{
      width:56px;
      font-size:12px;
      color:var(--muted);
      text-align:center;
    }
    
    .rac-tap-hint{
      color:var(--muted);
      font-size:14px;
      margin-top:24px;
    }

    /* Low Rating Form */
    .rac-emoji{
      font-size:48px;
      margin-bottom:16px;
    }
    
    .rac-label{
      display:block;
      text-align:left;
      font-size:14px;
      color:var(--muted);
      margin:20px 0 8px;
      font-weight:500;
    }
    
    .rac-textarea, .rac-input{
      width:100%;
      padding:12px;
      border-radius:10px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      font-family:inherit;
      font-size:15px;
      transition:border-color 0.2s ease;
    }
    
    .rac-textarea:focus, .rac-input:focus{
      outline:none;
      border-color:var(--brand);
    }
    
    .rac-textarea{
      min-height:100px;
      resize:vertical;
    }
    
    .rac-textarea::placeholder, .rac-input::placeholder{
      color:#8a94a6;
    }
    
    .rac-checkbox-wrapper{
      display:flex;
      align-items:flex-start;
      gap:8px;
      margin:16px 0;
      text-align:left;
    }
    
    .rac-checkbox{
      width:18px;
      height:18px;
      cursor:pointer;
      margin-top:2px;
      flex-shrink:0;
    }
    
    .rac-checkbox-label{
      margin:0;
      cursor:pointer;
      font-size:14px;
      line-height:1.4;
    }

    /* Buttons */
    .rac-btn{
      width:100%;
      padding:14px 24px;
      border-radius:10px;
      border:0;
      font-weight:600;
      font-size:16px;
      cursor:pointer;
      transition:all 0.2s ease;
      margin-top:8px;
    }
    
    .rac-btn-primary{
      background:var(--brand);
      color:#fff;
    }
    
    .rac-btn-primary:hover{
      background:var(--brand-hover);
      transform:translateY(-1px);
      box-shadow:0 4px 12px rgba(11, 100, 214, 0.3);
    }
    
    .rac-btn-secondary{
      background:transparent;
      border:1px solid var(--border);
      color:var(--text);
    }
    
    .rac-btn-secondary:hover{
      background:var(--chip);
    }

    /* High Rating */
    .rac-celebration{
      font-size:64px;
      margin-bottom:16px;
      animation:rac-bounce 0.6s ease;
    }
    
    @keyframes rac-bounce{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-10px)}
    }

    .rac-link-secondary{
      display:block;
      margin-top:16px;
      color:var(--muted);
      font-size:14px;
      cursor:pointer;
      transition:color 0.2s ease;
    }
    
    .rac-link-secondary:hover{
      color:var(--text);
    }

    /* Reassurance */
    .rac-reassurance{
      background:var(--chip);
      border:1px solid var(--chip-border);
      border-radius:8px;
      padding:12px;
      margin-top:20px;
      font-size:13px;
      color:var(--muted);
      line-height:1.5;
    }

    /* Success message */
    .rac-success-message{
      background:var(--success-bg);
      border:1px solid var(--success);
      color:#065f46;
      padding:16px;
      border-radius:10px;
      margin-top:20px;
      font-size:14px;
      line-height:1.6;
    }

    .rac-success-icon{
      font-size:48px;
      margin-bottom:16px;
    }

    /* Footer */
    .rac-footer{
      background:var(--footer);
      color:#e6efff;
      padding:24px 0;
      margin-top:60px;
      text-align:center;
    }
    
    .rac-footer a{
      color:#cfe0ff;
      font-size:14px;
      margin:0 12px;
      transition:color 0.2s ease;
    }
    
    .rac-footer a:hover{
      color:#ffffff;
    }
    
    .rac-footer-text{
      font-size:12px;
      color:#cfe0ff;
      margin-top:12px;
    }

    /* Loading animation */
    .rac-loading{
      display:none;
      text-align:center;
      padding:40px;
    }
    
    .rac-loading-active{
      display:block;
    }
    
    .rac-spinner{
      border:3px solid var(--border);
      border-top:3px solid var(--brand);
      border-radius:50%;
      width:40px;
      height:40px;
      animation:rac-spin 0.8s linear infinite;
      margin:0 auto 16px;
    }
    
    @keyframes rac-spin{
      0%{transform:rotate(0deg)}
      100%{transform:rotate(360deg)}
    }

    /* Responsive */
    @media (max-width:640px){
      .rac-stars-container{
        gap:8px;
      }
      
      .rac-star{
        font-size:48px;
      }
      
      .rac-star-label{
        width:48px;
        font-size:11px;
      }
      
      .rac-title{
        font-size:24px;
      }
      
      .rac-card{
        padding:24px 16px;
        margin:16px 0;
      }
      
      .rac-container{
        padding:16px 12px;
      }
    }
    .g-recaptcha {
  margin-top: 5%;
}
</style>/* End custom CSS */