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

    body{
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }

    .navbar{
      background:#fff;
      padding:15px 30px;
      box-shadow:0 2px 10px rgba(0,0,0,0.1);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
    }
    .navbar-logo-left{ height:80px; width:auto; object-fit:contain; }
    .navbar-logo-right{ height:60px; width:auto; object-fit:contain; }

    .main-content{ padding:20px; }

    .container{
      max-width: 900px;
      margin: 0 auto;
      background:#fff;
      border-radius:20px;
      box-shadow:0 20px 60px rgba(0,0,0,0.3);
      overflow:hidden;
      animation: slideIn .6s ease-out;
    }
    @keyframes slideIn{
      from{ opacity:0; transform:translateY(30px); }
      to{ opacity:1; transform:translateY(0); }
    }

    .header{
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #4facfe 100%);
      padding:40px 30px;
      text-align:center;
      color:#fff;
    }
    .header h1{ font-size:28px; margin-bottom:10px; font-weight:700; }
    .header p{ font-size:16px; opacity:.95; }

    .intro{
      background:#f8f9ff;
      padding:25px;
      border-left:4px solid #667eea;
      margin:25px;
      border-radius:12px;
      line-height:1.6;
      color:#333;
    }

    .form-content{ padding: 0 25px 25px; }

    .section{ margin-bottom:34px; animation: fadeIn .5s ease-out; }
    @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

    .section-title{
      color:#667eea;
      font-size:20px;
      font-weight:700;
      margin-bottom:18px;
      padding-bottom:10px;
      border-bottom:3px solid #667eea;
    }

    .question{ margin-bottom:18px; }

    .question-label{
      display:block;
      font-weight:600;
      margin-bottom:10px;
      color:#2d3748;
      font-size:15px;
    }

    .checkbox-group{ display:flex; flex-direction:column; gap:10px; }

    .checkbox-label{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:12px;
      border:2px solid #e2e8f0;
      border-radius:10px;
      cursor:pointer;
      transition: all .2s ease;
      background:#fff;
    }

    .checkbox-label:hover{
      background:#f7fafc;
      border-color:#667eea;
    }

    .checkbox-label input[type="radio"]{
      margin-top:2px;
      width:18px;
      height:18px;
      cursor:pointer;
      flex:0 0 auto;
    }

    textarea{
      width:100%;
      min-height:95px;
      padding:14px;
      border:2px solid #e2e8f0;
      border-radius:10px;
      font-family:inherit;
      font-size:14px;
      resize:vertical;
      transition:border-color .2s ease;
    }
    textarea:focus{ outline:none; border-color:#667eea; }

    .submit-btn{
      width:100%;
      padding:16px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color:#fff;
      border:none;
      border-radius:12px;
      font-size:18px;
      font-weight:800;
      cursor:pointer;
      transition: all .2s ease;
      margin-top:18px;
    }
    .submit-btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(102,126,234,.35);
    }
    .submit-btn[disabled]{
      opacity:.7;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }

    .success-message{
      display:none;
      text-align:center;
      padding:55px 25px;
    }
    .success-message.show{
      display:block;
      animation: successSlide .55s ease-out;
    }
    @keyframes successSlide{
      from{ opacity:0; transform:scale(.95); }
      to{ opacity:1; transform:scale(1); }
    }
    .success-icon{
      width:80px; height:80px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 0 auto 18px;
      animation: checkmark .6s ease-out;
    }
    @keyframes checkmark{
      0%{ transform:scale(0); opacity:0;}
      50%{ transform:scale(1.15); }
      100%{ transform:scale(1); opacity:1;}
    }
    .success-icon::after{ content:"✓"; font-size:48px; color:#fff; }

    .holiday-message{
      margin-top:26px;
      padding:18px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius:14px;
      color:#fff;
      font-size:18px;
      font-weight:800;
      animation: pulse 2s ease-in-out infinite;
      display:inline-block;
    }
    @keyframes pulse{
      0%,100%{ transform:scale(1); }
      50%{ transform:scale(1.03); }
    }

    /* =======================
       Radios con caritas (1-5)
       ======================= */
    .face-scale{
      display:grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap:12px;
    }
    .face-scale input[type="radio"]{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }
    .face-option{
      border:2px solid #e2e8f0;
      border-radius:14px;
      padding:14px 10px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      cursor:pointer;
      background:#fff;
      transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
      user-select:none;
      text-align:center;
      min-height:92px;
    }
    .face-option:hover{
      transform: translateY(-2px);
      border-color:#667eea;
      box-shadow:0 10px 25px rgba(102,126,234,.15);
    }
    .face-emoji{ font-size:30px; line-height:1; }
    .face-label{ font-size:12px; color:#4a5568; font-weight:800; }
    .face-sub{ font-size:11px; color:#718096; font-weight:700; }
    .face-scale input[type="radio"]:checked + .face-option{
      border-color:#667eea;
      background:#f3f5ff;
      box-shadow:0 12px 28px rgba(102,126,234,.20);
    }
    @media (max-width: 600px){
      .face-scale{ grid-template-columns: repeat(2, 1fr); }
      .face-scale .span-5{ grid-column: span 2; }
      .navbar{ padding: 14px 16px; }
      .navbar-logo-left{ height:45px; }
      .navbar-logo-right{ height:40px; }
      .main-content{ padding: 12px 10px; }
      .intro{ margin: 18px; padding:18px; }
      .form-content{ padding: 0 18px 18px; }
      .header{ padding: 28px 18px; }
      .header h1{ font-size:22px; }
    }

    /* Confetti */
    .confetti{
      position:fixed;
      width:10px;
      height:10px;
      animation: confetti-fall 2.8s linear forwards;
      will-change: transform, opacity;
      z-index:9999;
      border-radius:2px;
    }
    @keyframes confetti-fall{
      to{ transform: translateY(60vh) rotate(360deg); opacity:0; }
    }