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

    :root{
      /* ===== Bravia: dorado + blanco/negro ===== */
      --bg:#f6f6f6;
      --card:#ffffff;
      --text:#111;
      --muted:#555;
      --border:#e6e6e6;
      --border2:#d6d6d6;

      /* Dorado (acento) */
      --primary:#C9A24D;
      --primary-weak:#F6EEDB;

      /* Alias para compatibilidad (antes se usaba --gold) */
      --gold: var(--primary);

      --shadow:0 8px 24px rgba(0, 0, 0, 0.08);
      --shadow-strong:0 8px 24px rgba(0, 0, 0, 0.12);

      --gap-page: 32px;
      --gap-cols: 34px;
      --gap-grid: 24px;
      --radius: 16px;

      --fs-h2: 20px;
      --fs-section: 18px;
      --fs-field: 13px;
      --fs-body: 14px;
      --fs-small: 11px;
      --gold-soft:var(--primary-weak);
      --sep:rgba(201,162,77,.22);
      --maxw:1080px;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
      padding: 24px;
    }
    button, input, select, textarea { font-family: inherit; }

    .page {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: var(--gap-page);
      align-items: flex-start;
    }

    .main-panel {
      flex: 1 1 0;
      background: var(--card);
      border-radius: var(--radius);
      padding: 22px 24px 30px;
      box-shadow: var(--shadow);
    }

    .summary-card {
      width: 340px;
      background: var(--card);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow-strong);
      position: sticky;
      top: 16px;
    }

    .summary-card h2 {
      font-size: var(--fs-h2);
      margin-bottom: 18px;
      font-weight: 600;
      letter-spacing: .1px;
    }

    .price-main {
      font-size: 32px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 4px;
      line-height: 1.1;
    }



    .precio-normal-referencia{
      display: block;
      font-size: 13px;
      color: #777;
      margin-bottom: 10px;
      line-height: 1.35;
    }

    .precio-normal-referencia .antes-label{
      font-weight: 700;
      color: #666;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-right: 4px;
    }

    .precio-normal-referencia .precio-normal-tachado{
      text-decoration: line-through;
      color: #888;
      font-weight: 700;
    }

    .precio-normal-tachado{
      text-decoration: line-through !important;
      color: #888;
      font-weight: 700;
    }


    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      margin-bottom: 4px;
      gap: 12px;
      line-height: 1.35;
    }

    .summary-label { color: #333; }
    .summary-value { text-align: right; white-space: nowrap; }

    .summary-section-title {
      font-weight: 600;
      margin-top: 12px;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .summary-subtitle {
      font-weight: 700;
      margin-top: 10px;
      margin-bottom: 6px;
      font-size: 13px;
      color: #111;
    }

    .summary-totals {
      border-top: 1px solid #e4e4ee;
      margin-top: 12px;
      padding-top: 12px;
      font-size: 15px;
    }

    .summary-note {
      margin-top: 14px;
      font-size: var(--fs-small);
      color: #555;
      line-height: 1.45;
    }

    .whatsapp-btn {
      margin-top: 18px;
      width: 100%;
      padding: 12px 16px;
      border-radius: 999px;
      border: none;
      background: #16a34a;
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
    }
    .whatsapp-btn:hover { background: #15803d; }
    .whatsapp-btn:disabled,
    .whatsapp-btn.bloqueado-agenda {
      background: #9ca3af;
      cursor: not-allowed;
      opacity: .9;
    }

    .agenda-disponibilidad-box{
      margin-top:10px;
      min-height:52px;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#f9fafb;
      color:#555;
      font-size:12px;
      line-height:1.35;
    }
    .agenda-disponibilidad-box.ok{
      border-color:rgba(22,163,74,.35);
      background:rgba(22,163,74,.08);
      color:#166534;
    }
    .agenda-disponibilidad-box.warning{
      border-color:rgba(201,162,77,.45);
      background:rgba(201,162,77,.12);
      color:#7a5a12;
    }
    .agenda-disponibilidad-box.error{
      border-color:rgba(220,38,38,.35);
      background:rgba(220,38,38,.08);
      color:#991b1b;
    }


    /* ===== Header visual ===== */
    .brand-header {
      text-align: center;
      margin-bottom: 16px;
      color: #C9A24D;
    }
.brand-title,
.brand-title:visited,
.brand-title:hover,
.brand-title:active{
      font-family: "Dancing Script", cursive;
      font-size: 64px;
      font-weight: 600;
      line-height: 1;
      margin-top: 2px;
      color:var(--gold);
text-decoration: none;
    }
    .brand-tagline {
      font-family: "shania quinton", "Dancing Script", cursive;
      font-size: 50px;
      font-weight: 400;
      margin-top: 6px;
      line-height: 1.1;
      color:var(--gold);
    }


    /* ✅ Separador gris como referencia */
    .divider {
      height: 1px;
      background: #e5e7eb; /* gris */
      margin: 14px 0 16px;
    }

    .form-title {
      text-align: center;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: .2px;
      margin-top: 4px;
      color: #111;
    }
    .form-subtitle {
      text-align: center;
      font-size: 13px;
      color: var(--muted);
      margin-top: 2px;
      margin-bottom: 12px;
      line-height: 1.35;
    }

    /* ===== Secciones ===== */
    .section { margin-bottom: 22px; }

    .section-title {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: var(--fs-section);
      line-height: 1.2;
      color: #111;
    }

    .section-subtitle {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 5px;
      line-height: 1.35;
    }

    /* Layout 2 columnas */
    .row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-cols);
      align-items: start;
    }

    /* ✅ MÁS ESPACIO + SEPARADOR VERTICAL (solo donde se agregue la clase .vsep) */
    .vsep{
      position: relative;
      gap: 56px; /* más espacio entre columnas */
    }
    .vsep::before{
      content:"";
      position:absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      background: #e5e7eb; /* mismo gris del separador */
      transform: translateX(-0.5px);
      pointer-events:none;
    }

    .center-block { text-align: center; }
    .center-block .radio-pill-group { justify-content: center; }

    /* Pills */
    .pill-group {
      display: inline-flex;
      border-radius: 999px;
      background: var(--primary-weak);
      padding: 4px;
      gap: 6px;
    }

    .pill {
      border-radius: 999px;
      border: none;
      padding: 7px 18px;
      font-size: 14px;
      cursor: pointer;
      background: transparent;
      color: #111;            /* antes morado */
      min-width: 90px;
      text-align: center;
      font-weight: 500;
    }

    .pill.active {
      background: var(--primary);
      color: #111;            /* dorado + negro */
      box-shadow: 0 2px 6px rgba(201, 162, 77, 0.35);
      font-weight: 600;
    }

    .radio-pill-group {
      display: flex;
      gap: 10px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    .radio-pill {
      border-radius: 999px;
      border: 1px solid var(--border2);
      padding: 7px 16px;
      font-size: 14px;
      cursor: pointer;
      background: #fff;
      min-width: 110px;
      text-align: center;
      color: #111;
      user-select: none;
      font-weight: 500;
    }

    .radio-pill input { display: none; }

    .radio-pill.active {
      border-color: var(--primary);
      background: var(--primary-weak);
      color: #111;
      font-weight: 600;
      box-shadow: 0 1px 4px rgba(201,162,77,.18);
    }

    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: var(--fs-body);
      line-height: 1.35;
    }

    .time-input-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      margin-bottom: 6px;
      margin-left: 22px;
      color: #333;
      line-height: 1.35;
    }

    input[type="number"] {
      width: 64px;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid var(--border2);
      font-size: 13px;
    }

    select,
    input[type="text"],
    input[type="date"],
    input[type="time"],
    input[type="email"],
    textarea {
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid var(--border2);
      font-size: 13px;
      min-width: 180px;
      outline: none;
    }

    textarea { resize: vertical; }

    select:disabled,
    input:disabled {
      background: #f3f4f6;
      cursor: not-allowed;
    }

    .help-text {
      font-size: var(--fs-small);
      color: #777;
      margin-top: 6px;
      line-height: 1.45;
    }

    .characters-box {
      border-radius: 10px;
      border: 1px solid #ececf6;
      padding: 12px;
      max-height: 160px;
      overflow-y: auto;
      background: #fbfbff;
      margin-top: 6px;
      margin-bottom: 10px;
      font-size: 13px;
    }

    .characters-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .characters-row label { font-size: 13px; }

    .hidden { display: none !important; }

    /* Personajes: 2 columnas internas */
    .personajes-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-cols);
      align-items:start;
      margin-top: 6px;
    }

    /* Datos del evento */
    .event-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: start;
      margin-top: 8px;
    }

    .field-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
      line-height: 1.2;
      color: #111;
    }

    .field-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .full-width { width: 100%; }

    @media (max-width: 1024px) {
      .page { flex-direction: column; }
      .summary-card { position: static; width: 100%; }
      .row-2, .event-grid, .personajes-grid { grid-template-columns: 1fr; }
      .brand-title { font-size: 52px; }
      .brand-tagline { font-size: 22px; }

      /* ✅ Ocultar separador vertical cuando se va a 1 columna */
      .vsep::before{ display:none; }
      .vsep{ gap: var(--gap-cols); }
    }

    /* ✅ NUEVO: Mobile real (sin cambiar escritorio) */
    @media (max-width: 520px){
      body{ padding: 14px; }

      .main-panel{ padding: 18px 16px 22px; }
      .summary-card{ padding: 18px 16px; }

      .brand-title{ font-size: 40px; }
      .brand-tagline{ font-size: 18px; }

      .pill-group{ flex-wrap: wrap; justify-content: center; }
      .pill{ min-width: 0; padding: 7px 14px; }

      /* Evitar desbordes por min-width */
      select,
      input[type="text"],
      input[type="date"],
      input[type="time"],
      input[type="email"],
      textarea{
        min-width: 0;
        width: 100%;
      }

      /* Filas con 2 inputs (fecha/hora) y similares */
      .field-row{ width: 100%; }
      .field-row > *{ flex: 1 1 0; min-width: 0; }

      /* Ajuste para inputs numéricos sin romper layout */
      input[type="number"]{ width: 74px; }

      /* Caja personajes y grids sin overflow */
      .characters-box{ max-height: 200px; }

      /* En resumen: permitir salto del valor si es necesario */
      .summary-value{ white-space: normal; }

      /* ✅ FIX: Resumen grande y legible en teléfono (sin tocar desktop) */
      .summary-card{
        width: 100%;
        max-width: 100%;
      }
      .summary-card h2{
        font-size: 22px;
      }
      .price-main{
        font-size: 36px;
      }
      .summary-row{
        font-size: 14px;
      }
      .summary-section-title{
        font-size: 15px;
      }
      .summary-totals{
        font-size: 16px;
      }
    }
    /* === MOBILE FULL WIDTH FIX === */
    @media (max-width: 768px) {
      body { padding: 12px; }

      .page { width: 100%; max-width: 100%; padding: 0; }

      .main-panel,
      .summary-card { width: 100%; max-width: 100%; }

      /* Evitar que Safari “achique” la página por overflow */
      select,
      input[type="text"],
      input[type="date"],
      input[type="time"],
      input[type="email"],
      textarea{
        min-width: 0;
        width: 100%;
      }

      .field-row{ width: 100%; }
      .field-row > *{ flex: 1 1 0; min-width: 0; }
    }

  

  .footer{
        margin-top:48px;
        padding:44px 0 36px;
        background:#fff;
        border-top:1px solid rgba(181,139,59,.22);
        font-size:13px;
      }
  
      .footer-wrap{
        width:min(var(--maxw), calc(100% - 48px));
        margin:0 auto;
        color:#2b2b2b;
      }
  
      .footer-cta{
        display:flex;
        justify-content:center;
        gap:14px;
        flex-wrap:wrap;
        margin-bottom:20px;
      }
  
      .footer-btn{
        padding:14px 36px;
        border-radius:999px;
        background:var(--gold-soft);
        color:var(--gold);
        border:2px solid rgba(181,139,59,.55);
        text-decoration:none;
        font-size:14px;
        letter-spacing:.12em;
        text-transform:uppercase;
      }
  
      .footer-btn.outline{ background:#fff; }
  
      .footer-sep{
        margin:22px auto;
        height:1px;
        border:none;
        background:linear-gradient(90deg, transparent, var(--sep), transparent);
      }
  
      .footer-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:28px;
      }
  
      .footer-block h4{
        color:var(--gold);
        font-weight:700;
        margin-bottom:8px;
      }
  
      .footer-block a{
        color:var(--gold);
        text-decoration:none;
      }
  
      .footer-notes{
        font-size:12px;
        color:rgba(43,43,43,.85);
        line-height:1.55;
      }
  
      .footer-legal{
        font-size:11px;
        color:rgba(43,43,43,.7);
        line-height:1.5;
        margin-top:18px;
      }
  
      .footer-copy{
        margin-top:14px;
        text-align:center;
        font-size:11px;
        color:rgba(43,43,43,.6);
      }
  
      @media(max-width:760px){
        .footer-grid{
          grid-template-columns:1fr;
          text-align:center;
        }
      }


    /* FIX: pisar min-width inline en móvil (sin tocar desktop) */
    @media (max-width: 768px){
      #eventoDireccion,
      #eventoDeptoOficina,
      #eventoComuna,
      #eventoReferencia,
      #celebOtroTexto,
      #cumpleNombre,
      #cumpleRelacion,
      #eventoEdadMin,
      #eventoEdadMax,
      #otrosPersonajes,
      #empresaRazonSocial,
      #tipoEntidad,
      #empresaRut,
      #empresaGiro,
      #empresaCorreoFactura,
      #clienteCargoEmpresa,
      #clienteDeptoOficina,
      #empresaDireccion,
      #empresaDeptoOficina{
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
      }
    }

  

    /* ✅ Evita que comentarios largos se salgan del resumen */
    #resumenComentarios{
      display:block;
      width:100%;
      max-width:100%;
      white-space:normal !important;
      overflow-wrap:anywhere;
      word-break:break-word;
      text-align:left;
      line-height:1.35;
    }
    #resumenComentariosSection .summary-row{
      display:block;
      align-items:flex-start;
    }
    #resumenComentariosSection .summary-label{
      display:block;
      margin-bottom:4px;
    }

    .campo-error{
      border-color:#dc2626 !important;
      box-shadow:0 0 0 2px rgba(220,38,38,.12) !important;
      outline:2px solid rgba(220,38,38,.35) !important;
      outline-offset:3px;
      border-radius:8px;
    }

/* Corpóreos visible solo en Visita y Ambos; controlado por JS */

    /* ✅ Servicios extra ocupan todo el ancho cuando Actividades está oculto (Visita) */
    #animacionExtrasRow.solo-servicios{
      grid-template-columns: 1fr;
    }
    #animacionExtrasRow.solo-servicios::before{
      display:none;
    }



    /* ✅ FIX resumen: evita que textos largos se salgan de la tarjeta */
    .summary-row{
      align-items:flex-start;
      min-width:0;
    }

    .summary-label{
      flex:0 0 46%;
      max-width:46%;
      overflow-wrap:anywhere;
      word-break:break-word;
    }

    .summary-value{
      flex:1 1 0;
      min-width:0;
      max-width:54%;
      white-space:normal !important;
      overflow-wrap:anywhere;
      word-break:break-word;
      text-align:right;
    }

    #resumenPersonajesLista,
    #resumenComentarios,
    #resumenDisponibilidadAgenda,
    #resumenDireccion,
    #resumenClienteNombre,
    #resumenClienteTelefono,
    #resumenClienteCorreo,
    #resumenClienteRut,
    #resumenClienteCargoEmpresa,
    #resumenGrupoPersonajes,
    #resumenCorporeosLista,
    #resumenCumpleNombre,
    #resumenCumpleEdad,
    #resumenCumpleRelacion,
    #resumenRegionEvento,
    #resumenComunaEvento,
    #resumenReferencia,
    #resumenClienteApellido,
    #resumenClienteRegion,
    #resumenClienteComuna,
    #resumenClienteDireccion,
    #resumenDisponibilidadAgenda,
    #resumenTipoCliente,
    #resumenEmpresaRazonSocial,
    #resumenEmpresaRut,
    #resumenEmpresaGiro,
    #resumenEmpresaCorreoFactura,
    #resumenEmpresaDireccion{
      white-space:normal !important;
      overflow-wrap:anywhere;
      word-break:break-word;
    }



    /* ===== Agenda Bravía estilo calendario ===== */
    /* FIX: evita que la agenda agrande la columna y saque el formulario de sus márgenes */
    .event-grid > div,
    .row-2 > div,
    .personajes-grid > div{
      min-width:0;
    }

    .agenda-bravia-card{
      margin-top:4px;
      width:100%;
      max-width:100%;
      min-width:0;
      overflow:hidden;
      border:1px solid var(--border);
      background:#fff;
      border-radius:16px;
      padding:14px;
      box-shadow:0 6px 18px rgba(0,0,0,.05);
    }
    .agenda-bravia-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .agenda-bravia-title{
      font-size:15px;
      font-weight:700;
      color:#111;
    }
    .agenda-nav-btn{
      flex:0 0 28px;
      width:28px;
      height:28px;
      border-radius:999px;
      border:1px solid var(--border2);
      background:#fff;
      color:#111;
      font-size:18px;
      cursor:pointer;
      line-height:1;
    }
    .agenda-nav-btn:hover{ border-color:var(--primary); background:var(--primary-weak); }

    .agenda-mes-anio-wrap{
      display:grid;
      grid-template-columns:minmax(0, .75fr) minmax(0, 1.15fr) minmax(0, 1fr);
      gap:8px;
      margin:8px 0 12px;
      width:100%;
    }
    .agenda-mes-anio-wrap select{
      width:100%;
      min-width:0;
      border-radius:10px;
      border:1px solid var(--border2);
      background:#fff;
      color:#111;
      font-size:13px;
      font-weight:500;
      padding:9px 10px;
    }
    .agenda-mes-anio-wrap select:disabled{
      background:#e5e7eb;
      color:#8a8a8a;
      cursor:not-allowed;
    }
    .agenda-dias-wrap{
      display:flex;
      align-items:center;
      gap:6px;
      width:100%;
      max-width:100%;
      min-width:0;
    }
    .agenda-dias-wrap .agenda-nav-btn{
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 26px;
      width:26px;
      height:48px;
      font-size:20px;
      font-weight:400;
    }
   .agenda-dias-carousel{
  display:flex;
  gap:5px;
  overflow-x:hidden;
  overflow-y:hidden;
  scroll-behavior:smooth;
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  scrollbar-width:none;
}
.agenda-dias-carousel::-webkit-scrollbar{
  display:none;
}
    .agenda-dias-carousel::-webkit-scrollbar{ height:6px; }
    .agenda-dias-carousel::-webkit-scrollbar-thumb{ background:#d6d6d6; border-radius:999px; }
    .agenda-dias-carousel::-webkit-scrollbar-track{ background:#f3f4f6; border-radius:999px; }
    .agenda-dia-btn{
      flex:0 0 52px;
      scroll-snap-align:start;
      border:1px solid var(--border2);
      background:#fff;
      border-radius:10px;
      padding:5px 4px;
      cursor:pointer;
      text-align:center;
      color:#111;
      min-height:50px;
    }
    .agenda-dia-btn:hover{ border-color:var(--primary); background:var(--primary-weak); }
    .agenda-dia-btn.active{
      border-color:var(--primary);
      background:var(--primary-weak);
      box-shadow:0 2px 8px rgba(201,162,77,.18);
    }
    .agenda-dia-semana{
      display:block;
      font-size:9px;
      color:#666;
      text-transform:uppercase;
      letter-spacing:.02em;
      margin-bottom:2px;
    }
    .agenda-dia-numero{
      display:block;
      font-size:16px;
      font-weight:700;
      line-height:1;
      color:#111;
    }
    .agenda-dia-mes{
      display:block;
      font-size:9px;
      color:#666;
      margin-top:2px;
      text-transform:uppercase;
    }
    .agenda-horas-title{
      margin-top:14px;
      margin-bottom:8px;
      font-size:13px;
      font-weight:600;
      color:#111;
    }
    .agenda-horas-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
      width:100%;
      max-width:100%;
      min-width:0;
    }
    .agenda-hora-btn{
      min-width:0;
      width:100%;
      border:1px solid var(--border2);
      background:#fff;
      border-radius:999px;
      padding:9px 8px;
      font-size:13px;
      font-weight:500;
      color:#111;
      cursor:pointer;
    }
    .agenda-hora-btn:hover:not(:disabled){ border-color:var(--primary); background:var(--primary-weak); }
    .agenda-hora-btn.selected{
      background:var(--primary);
      border-color:var(--primary);
      color:#111;
      box-shadow:0 2px 8px rgba(201,162,77,.25);
    }
    .agenda-hora-btn:disabled{
      background:#f3f4f6;
      color:#999;
      border-color:#e5e7eb;
      cursor:not-allowed;
      text-decoration:line-through;
    }
    .agenda-hora-btn.warning:not(.selected){
      border-color:rgba(201,162,77,.65);
      background:rgba(201,162,77,.10);
    }
    .agenda-ver-mas{
      margin-top:10px;
      border:none;
      background:transparent;
      color:var(--primary);
      font-weight:600;
      font-size:13px;
      cursor:pointer;
      padding:6px 2px;
    }
    .agenda-hidden-inputs{
      position:absolute;
      width:1px;
      height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      white-space:nowrap;
    }

    .agenda-bravia-card.agenda-bloqueada{
      background:#f3f4f6;
      border-color:#d1d5db;
      box-shadow:none;
      color:#777;
    }
    .agenda-bravia-card.agenda-bloqueada .agenda-bravia-title,
    .agenda-bravia-card.agenda-bloqueada .agenda-horas-title{
      color:#777;
    }
    .agenda-bravia-card.agenda-bloqueada .agenda-dia-btn,
    .agenda-bravia-card.agenda-bloqueada .agenda-hora-btn,
    .agenda-bravia-card.agenda-bloqueada .agenda-mes-anio-wrap select,
    .agenda-bravia-card.agenda-bloqueada .agenda-ver-mas{
      background:#e5e7eb;
      border-color:#d1d5db;
      color:#8a8a8a;
      box-shadow:none;
      cursor:not-allowed;
      opacity:.9;
    }
    .agenda-bravia-card.agenda-bloqueada .agenda-dia-btn.active{
      background:#e5e7eb;
      border-color:#d1d5db;
      box-shadow:none;
    }
    .agenda-lock-msg{
      margin-top:10px;
      padding:10px 12px;
      border-radius:12px;
      background:#e5e7eb;
      color:#666;
      font-size:12px;
      line-height:1.35;
    }

    .agenda-modal-backdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.42);
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      overflow:hidden;
      overscroll-behavior:contain;
    }
    .agenda-modal{
      width:min(520px, 100%);
      max-height:min(680px, 92vh);
      overflow:hidden;
      background:#fff;
      border-radius:18px;
      box-shadow:0 18px 50px rgba(0,0,0,.24);
      padding:18px;
      display:flex;
      flex-direction:column;
    }
    .agenda-modal-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .agenda-modal-title{
      font-size:18px;
      font-weight:800;
      color:#111;
      margin-bottom:4px;
    }
    .agenda-modal-fecha{
      font-size:13px;
      color:#555;
      line-height:1.35;
    }
    .agenda-modal-close{
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid var(--border2);
      background:#fff;
      cursor:pointer;
      font-size:20px;
      line-height:1;
    }
    .agenda-modal .agenda-horas-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      overflow-y:auto;
      overflow-x:hidden;
      max-height:calc(min(680px, 92vh) - 94px);
      padding-right:4px;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }

    html, body{
      max-width:100%;
      overflow-x:hidden;
    }
    body.agenda-modal-open{
      overflow:hidden;
    }

    @media (max-width:520px){
      .agenda-bravia-card{ padding:12px; }
      .agenda-mes-anio-wrap{ grid-template-columns:minmax(0, .75fr) minmax(0, 1.05fr) minmax(0, .9fr); gap:6px; }
      .agenda-mes-anio-wrap select{ font-size:12px; padding:8px 7px; }
      .agenda-dias-wrap .agenda-nav-btn{ flex-basis:24px; width:24px; height:54px; }
      .agenda-dia-btn{ flex-basis:58px; min-height:58px; }
      .agenda-horas-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }


    /* ✅ Layout equilibrado: reparte campos entre izquierda y derecha en escritorio,
       y se adapta a una columna en pantallas angostas. */
    #clienteComentariosRow{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
      gap:56px;
      align-items:start;
    }
    #clienteComentariosRow::before{
      display:block;
    }
    #datosClienteSection,
    #clienteDerechaComentarios,
    #datosClienteDerecha,
    #datosEmpresaBasicaCliente,
    #comentariosSection{
      min-width:0;
    }
    #clienteDerechaComentarios{
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
      align-items:start;
    }
    #datosClienteDerecha{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      align-items:start;
    }
    #comentariosSection{
      margin-top:0;
    }
    #comentariosExtra{
      min-height:180px;
    }
    @media (max-width:1024px){
      #clienteComentariosRow{
        gap:34px;
      }
      #clienteDerechaComentarios{
        gap:18px;
      }
      #comentariosExtra{
        min-height:170px;
      }
    }
    @media (max-width:760px){
      #clienteComentariosRow{
        grid-template-columns:1fr;
        gap:20px;
      }
      #clienteComentariosRow::before{
        display:none;
      }
    }



/* ===== BRAVÍA: resaltado estable de obligatorios pendientes =====
   No inserta mensajes bajo los campos, para evitar saltos visuales. */
.bravia-pendiente,
.campo-error{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 2px rgba(239,68,68,.14) !important;
  outline:2px solid rgba(239,68,68,.28) !important;
  outline-offset:2px;
}
.bravia-grupo-pendiente{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 2px rgba(239,68,68,.12) !important;
  outline:2px solid rgba(239,68,68,.24) !important;
  outline-offset:3px;
  border-radius:14px;
}
.bravia-label-pendiente,
.campo-error-label{
  color:#dc2626 !important;
}
.bravia-section-pendiente > .section-title{
  color:#dc2626 !important;
}
.bravia-pendiente::placeholder{
  color:#9ca3af;
}
@media (max-width:768px){
  .bravia-grupo-pendiente{ outline-offset:2px; }
}
    /* ===== Código Bravía: descuento manual ===== */
    .codigo-bravia-box{
      margin-top:14px;
      padding-top:12px;
      border-top:1px solid #e5e7eb;
      font-family: inherit;
    }
    .codigo-bravia-title{
      font-size:14px;
      font-weight:600;
      margin-bottom:8px;
      color:#111;
      font-family: inherit;
    }
    .codigo-bravia-row{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .codigo-bravia-row input{
      flex:1 1 auto;
      min-width:0;
      width:100%;
      border-radius:10px;
      border:1px solid var(--border2);
      padding:10px 12px;
      font-size:13px;
      font-family: inherit;
    }
    .codigo-bravia-row button{
      flex:0 0 auto;
      border:none;
      border-radius:999px;
      padding:10px 16px;
      background:var(--primary);
      color:#111;
      font-size:13px;
      font-weight:600;
      cursor:pointer;
      white-space:nowrap;
      font-family: inherit;
    }
    .codigo-bravia-msg{
      margin-top:7px;
      font-size:12px;
      line-height:1.35;
      color:#666;
      font-family: inherit;
    }
    .codigo-bravia-msg.ok{ color:#166534; }
    .codigo-bravia-msg.error{ color:#991b1b; }

    #filaFinalDescuentoBravia .summary-label,
    #filaFinalDescuentoBravia .summary-value{
      font-weight:700;
      color:#166534;
      font-family: inherit;
    }

    @media (max-width:520px){
      .codigo-bravia-row{
        flex-direction:column;
        align-items:stretch;
      }
      .codigo-bravia-row button{
        width:100%;
      }
    }



/* =========================================================
   OVERRIDE LÍNEA INDEX — ARMA TU PLAN
   Mantiene layout y lógica; unifica paleta y tipografía.
========================================================= */

:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0b0b0b;
  --muted:#5f5f5f;
  --border:#e5e5e5;
  --border2:#d6d6d6;

  --primary:#0b0b0b;
  --primary-weak:#f4f4f4;
  --gold:#0b0b0b;
  --gold-soft:#f4f4f4;
  --sep:rgba(0,0,0,.14);

  --shadow:none;
  --shadow-strong:none;
}

body{
  font-family:Calibri, "Segoe UI", Arial, sans-serif;
  background:#ffffff;
  color:#0b0b0b;
}

.main-panel,
.summary-card{
  border:1px solid rgba(0,0,0,.14);
  border-radius:0;
  box-shadow:none;
  background:#ffffff;
}

.brand-header{
  color:#0b0b0b;
}

.brand-title,
.brand-title:visited,
.brand-title:hover,
.brand-title:active{
  font-family:Calibri, "Segoe UI", Arial, sans-serif;
  color:#0b0b0b;
  font-size:clamp(34px, 5vw, 52px);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:900;
  text-transform:uppercase;
}

.brand-tagline{
  font-family:Calibri, "Segoe UI", Arial, sans-serif;
  color:#5f5f5f;
  font-size:clamp(16px, 2vw, 19px);
  line-height:1.35;
  margin-top:10px;
}

.form-title,
.section-title,
.field-title,
.summary-card h2,
.summary-section-title,
.summary-subtitle,
.agenda-bravia-title,
.agenda-horas-title{
  color:#0b0b0b;
  font-weight:900;
}

.form-subtitle,
.section-subtitle,
.help-text,
.summary-note,
.summary-label{
  color:#5f5f5f;
}

.price-main{
  color:#0b0b0b;
}

.pill-group{
  background:#f4f4f4;
}

.pill.active,
.radio-pill.active,
.agenda-hora-btn.selected{
  background:#111111;
  border-color:#111111;
  color:#ffffff;
  box-shadow:none;
}

.radio-pill,
.pill,
.agenda-dia-btn,
.agenda-hora-btn,
.agenda-nav-btn,
select,
input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="number"],
textarea{
  border-color:rgba(0,0,0,.22);
}

.radio-pill.active{
  color:#ffffff;
}

.whatsapp-btn{
  background:#111111;
  color:#ffffff;
}

.whatsapp-btn:hover{
  background:#333333;
}

.agenda-bravia-card{
  border-color:rgba(0,0,0,.14);
  border-radius:0;
  box-shadow:none;
}

.agenda-nav-btn:hover,
.agenda-dia-btn:hover,
.agenda-hora-btn:hover:not(:disabled){
  border-color:#0b0b0b;
  background:#f4f4f4;
}

.agenda-dia-btn.active{
  border-color:#0b0b0b;
  background:#f4f4f4;
  box-shadow:none;
}

.agenda-ver-mas{
  color:#0b0b0b;
}

.footer{
  background:#ffffff;
  border-top:1px solid rgba(0,0,0,.22);
  color:#5f5f5f;
}

.footer-wrap{
  color:#5f5f5f;
}

.footer-block h4,
.footer-block a{
  color:#0b0b0b;
}

.footer-btn{
  background:#ffffff;
  border:1.5px solid rgba(0,0,0,.32);
  color:#0b0b0b;
  font-weight:900;
}

.footer-btn:not(.outline){
  background:#111111;
  border-color:#111111;
  color:#ffffff;
}

.footer-sep{
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.14), transparent);
}


/* Header global ya muestra la marca; se oculta el bloque antiguo interno */
.brand-header{
  display:none;
}
/* =========================================================
   FIX FINAL RESPONSIVE ARMA TU PLAN — 2026-06-12
   Capa segura: corrige móvil/tablet sin tocar scripts, IDs,
   cálculos, validaciones, WhatsApp ni Google Sheet.
========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

img,
picture,
video,
canvas,
svg,
iframe{
  max-width:100%;
  height:auto;
}

button,
input,
select,
textarea{
  max-width:100%;
}

.bravia-site-header,
.bravia-main-menu,
.page,
.main-panel,
.summary-card,
.section,
.row-2,
.event-grid,
.personajes-grid,
.field-row,
.characters-box,
.agenda-bravia-card,
.agenda-dias-wrap,
.agenda-dias-carousel,
.agenda-horas-grid,
.footer-wrap{
  min-width:0 !important;
}

/* Menú: 2 columnas en teléfono y sin desbordes */
@media screen and (max-width:620px){
  .bravia-site-header{
    width:min(100% - 26px, 1160px) !important;
    padding:22px 0 18px !important;
  }

  .bravia-brand-logo{
    width:min(260px, 84vw) !important;
  }

  .bravia-main-menu{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    width:100% !important;
    gap:7px !important;
  }

  .bravia-main-menu a{
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    padding:8px 8px !important;
    font-size:11px !important;
    letter-spacing:.07em !important;
    white-space:normal !important;
    line-height:1.15 !important;
    text-align:center !important;
  }

  .bravia-main-menu .bravia-menu-cta{
    grid-column:1 / -1 !important;
  }
}

@media screen and (max-width:380px){
  .bravia-main-menu{
    grid-template-columns:1fr !important;
  }
}

/* Tablet: todo baja a una columna real */
@media screen and (max-width:980px){
  body{
    padding:0 !important;
  }

  .page{
    display:flex !important;
    flex-direction:column !important;
    width:min(100% - 26px, 1200px) !important;
    max-width:1200px !important;
    padding:26px 0 48px !important;
    gap:26px !important;
  }

  .main-panel,
  .summary-card{
    width:100% !important;
    max-width:100% !important;
  }

  .summary-card{
    position:static !important;
    top:auto !important;
  }

  .row-2,
  .event-grid,
  .personajes-grid,
  #clienteComentariosRow{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .vsep::before,
  #clienteComentariosRow::before{
    display:none !important;
  }

  #datosEventoBloqueUbicacion{
    width:100% !important;
    max-width:100% !important;
  }
}

/* Móvil: controles a ancho completo, sin min-width heredados */
@media screen and (max-width:620px){
  .main-panel,
  .summary-card{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .form-title{
    font-size:20px !important;
  }

  .section-title{
    font-size:17px !important;
  }

  .field-title{
    font-size:14px !important;
  }

  .pill-group,
  .radio-pill-group{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:8px !important;
  }

  .pill,
  .radio-pill{
    width:100% !important;
    min-width:0 !important;
    padding:10px 12px !important;
  }

  .field-row,
  #datosEventoBloqueUbicacion .field-row,
  #datosEventoBloqueUbicacion .bravia-direccion-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:8px !important;
  }

  .field-row > *,
  #datosEventoBloqueUbicacion .field-row > *,
  #datosEventoBloqueUbicacion .bravia-direccion-row > *{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:initial !important;
    grid-column:auto !important;
  }

  select,
  input[type="text"],
  input[type="date"],
  input[type="time"],
  input[type="email"],
  input[type="number"],
  textarea{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .checkbox-row{
    align-items:flex-start !important;
  }

  .checkbox-row input[type="checkbox"],
  .checkbox-row input[type="radio"]{
    width:auto !important;
    flex:0 0 auto !important;
    margin-top:2px;
  }

  .characters-box{
    max-height:240px !important;
  }

  .agenda-bravia-card{
    padding:12px !important;
  }

  .agenda-mes-anio-wrap{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .agenda-dias-wrap{
    gap:5px !important;
  }

  .agenda-dia-btn{
    flex-basis:56px !important;
  }

  .agenda-horas-grid,
  .agenda-modal .agenda-horas-grid{
    grid-template-columns:1fr !important;
  }

  .codigo-bravia-row{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .codigo-bravia-row button{
    width:100% !important;
  }

  .summary-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:3px !important;
  }

  .summary-label,
  .summary-value{
    max-width:100% !important;
    width:100% !important;
    text-align:left !important;
  }

  .price-main{
    font-size:clamp(30px, 10vw, 36px) !important;
    overflow-wrap:anywhere !important;
  }

  .footer-wrap{
    width:min(100% - 26px, 1160px) !important;
  }

  .footer-cta{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .footer-btn{
    width:100% !important;
    text-align:center !important;
    padding:13px 14px !important;
  }
}

/* =========================================================
   BRAVÍA: presentación lineal del encabezado del wizard
   Solo cambia cómo se muestra la información. No toca cálculos ni campos.
   Este bloque queda en CSS externo para no seguir cargando diseño dentro del HTML.
========================================================= */
.main-panel.bravia-wizard-activo{
  overflow:visible !important;
}

.main-panel.bravia-wizard-activo .divider:not(#sepAfterDatosEvento):not(#sepBeforeDatosEvento){
  margin-left:auto !important;
  margin-right:auto !important;
}

.bravia-wizard-progress{
  width:100% !important;
  max-width:980px !important;
  margin:22px auto 22px !important;
  border-top:1px solid rgba(0,0,0,.12) !important;
  border-bottom:1px solid rgba(0,0,0,.12) !important;
}

.bravia-wizard-progress-main,
.bravia-wizard-progress-sub{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  width:100% !important;
}

.bravia-wizard-progress-main{
  padding:16px 0 14px !important;
}

.bravia-wizard-progress-sub{
  padding:14px 0 16px !important;
  border-top:1px solid rgba(0,0,0,.10) !important;
}

.bravia-wizard-progress-item{
  appearance:none !important;
  border:0 !important;
  background:transparent !important;
  color:#5f5f5f !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  font-family:inherit !important;
  text-align:center !important;
  cursor:pointer !important;
  line-height:1.25 !important;
  box-shadow:none !important;
}

/* Encabezado superior: más legible, sin formato pill. */
.bravia-wizard-progress-main-item{
  font-size:16px !important;
  font-weight:800 !important;
}

.bravia-wizard-progress-sub-item{
  font-size:14px !important;
  font-weight:600 !important;
}

.bravia-wizard-progress-item span{
  display:inline-block !important;
  border-bottom:2px solid transparent !important;
  padding-bottom:4px !important;
}

.bravia-wizard-progress-item.is-active{
  color:#0b0b0b !important;
  font-weight:900 !important;
}

.bravia-wizard-progress-item.is-active span{
  border-bottom-color:#0b0b0b !important;
}

.bravia-wizard-progress-item.is-done{
  color:#0b0b0b !important;
}

.bravia-wizard-progress-item.is-locked{
  color:#a8a8a8 !important;
  cursor:not-allowed !important;
  opacity:.75 !important;
}

.bravia-wizard-progress-sep{
  color:#a8a8a8 !important;
  font-size:18px !important;
  line-height:1 !important;
  user-select:none !important;
}

.bravia-wizard-step-header{
  width:100% !important;
  max-width:820px !important;
  margin:22px auto 24px !important;
  text-align:center !important;
}

/* Título central: tamaño normal, no gigante. */
.bravia-wizard-main-title{
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#0b0b0b !important;
  margin-bottom:8px !important;
}

.bravia-wizard-main-desc{
  max-width:760px !important;
  margin:0 auto !important;
  color:#5f5f5f !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

.bravia-wizard-header-line{
  width:100% !important;
  height:1px !important;
  background:#e5e5e5 !important;
  margin:18px auto 22px !important;
}

.bravia-wizard-sub-title,
.bravia-wizard-sub-desc{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:left !important;
}

.bravia-wizard-sub-title{
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  color:#5f5f5f !important;
  margin-bottom:8px !important;
}

.bravia-wizard-sub-desc{
  color:#5f5f5f !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.main-panel.bravia-wizard-activo #braviaPasoDetalle > .section-title,
.main-panel.bravia-wizard-activo #braviaPasoDetalle > .section-subtitle,
.main-panel.bravia-wizard-activo #personajesContainer > .section-title,
.main-panel.bravia-wizard-activo #personajesContainer > .section-subtitle,
.main-panel.bravia-wizard-activo #datosEventoSection > .section-title,
.main-panel.bravia-wizard-activo #datosEventoSection > .section-subtitle,
.main-panel.bravia-wizard-activo #datosClienteSection > .section-title,
.main-panel.bravia-wizard-activo #datosClienteSection > .section-subtitle,
.main-panel.bravia-wizard-activo #comentariosSection > .section-title,
.main-panel.bravia-wizard-activo #comentariosSection > .section-subtitle{
  display:none !important;
}

.main-panel.bravia-wizard-activo .bravia-panel-actual{
  max-width:760px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.main-panel.bravia-wizard-activo #datosEventoBloqueAgenda.bravia-panel-actual,
.main-panel.bravia-wizard-activo #datosEventoBloqueUbicacion.bravia-panel-actual{
  max-width:900px !important;
}

.main-panel.bravia-wizard-activo .bravia-panel-actual > .section-title:first-child,
.main-panel.bravia-wizard-activo .bravia-panel-actual > .field-title:first-child,
.main-panel.bravia-wizard-activo .bravia-panel-actual > .section-subtitle:first-child{
  display:none !important;
}

.main-panel.bravia-wizard-activo .bravia-panel-actual > .section-title:first-child + .section-subtitle,
.main-panel.bravia-wizard-activo .bravia-panel-actual > .field-title:first-child + .section-subtitle,
.main-panel.bravia-wizard-activo .bravia-panel-actual > .field-title:first-child + .help-text{
  display:none !important;
}

.main-panel.bravia-wizard-activo #datosEventoBloqueAgenda.bravia-panel-actual #agendaEventoTitle,
.main-panel.bravia-wizard-activo #datosEventoBloqueAgenda.bravia-panel-actual #agendaEventoTitle + .agenda-horas-title{
  display:none !important;
}

.main-panel.bravia-wizard-activo #braviaPasoDetalle .row-2,
.main-panel.bravia-wizard-activo #personajesSection .personajes-grid,
.main-panel.bravia-wizard-activo #animacionExtrasRow,
.main-panel.bravia-wizard-activo #datosEventoFilaPrincipal,
.main-panel.bravia-wizard-activo #clienteComentariosRow{
  justify-items:center !important;
}

.main-panel.bravia-wizard-activo #braviaWizardNav{
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:760px){
  .bravia-wizard-progress{
    margin-top:18px !important;
    overflow-x:visible !important;
    max-width:100% !important;
  }

  .bravia-wizard-progress-main,
  .bravia-wizard-progress-sub{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:8px 10px !important;
    padding-left:0 !important;
    padding-right:0 !important;
    min-width:0 !important;
  }

  .bravia-wizard-progress-item{
    flex:0 1 auto !important;
    white-space:normal !important;
    text-align:left !important;
    max-width:100% !important;
  }

  .bravia-wizard-progress-item span{
    white-space:normal !important;
  }

  .bravia-wizard-progress-sep{
    flex:0 0 auto !important;
  }

  .bravia-wizard-progress-main-item{
    font-size:14px !important;
  }

  .bravia-wizard-progress-sub-item{
    font-size:13px !important;
  }

  .bravia-wizard-main-title{
    font-size:18px !important;
  }

  .bravia-wizard-main-desc{
    font-size:13px !important;
  }

  .bravia-wizard-sub-title{
    font-size:15px !important;
  }
}


/* =========================================================
   ESTILOS MOVIDOS DESDE EL HTML
   Mantiene el wizard sin depender de <style> internos.
========================================================= */


/* --- style_2 --- */
/* ✅ BRAVÍA: estabiliza el resumen para que la hoja no “pestañee” */
#disponibilidadAgendaBox{
  min-height:52px;
  display:flex;
  align-items:center;
}
#resumenDisponibilidadAgenda{
  min-height:38px;
  display:block;
}
.summary-card{
  contain:layout paint;
}


/* --- bravia-progresivo-css --- */
/* =========================================================
   BRAVÍA: aparición progresiva de secciones e ítems
   No cambia cálculos, IDs ni estructura base. Solo controla visibilidad.
========================================================= */
.bravia-step-oculto,
.bravia-summary-oculto{
  display:none !important;
}

/* Cuando el bloque 2 (agenda) todavía no aparece, se oculta la línea vertical del bloque 1. */
.vsep.bravia-una-columna-visible::before{
  display:none !important;
}
.vsep.bravia-una-columna-visible{
  grid-template-columns:1fr !important;
}


/* --- bravia-wizard-slide-css --- */
/* =========================================================
   BRAVÍA: navegación por pasos tipo slide
   Separa cada subítem del formulario en su propio paso.
========================================================= */
.bravia-wizard-oculto{
  display:none !important;
}

.main-panel.bravia-wizard-activo{
  overflow:hidden;
}

.bravia-wizard-panel-animando{
  animation: braviaWizardSlideNext .28s ease both;
  will-change: transform, opacity;
}

.bravia-wizard-panel-animando.bravia-wizard-back{
  animation-name: braviaWizardSlideBack;
}

@keyframes braviaWizardSlideNext{
  from{ opacity:.25; transform:translateX(42px); }
  to{ opacity:1; transform:translateX(0); }
}

@keyframes braviaWizardSlideBack{
  from{ opacity:.25; transform:translateX(-42px); }
  to{ opacity:1; transform:translateX(0); }
}

/* Oculta separadores internos mientras está activo el flujo por pasos. */
.main-panel.bravia-wizard-activo #sepAfterDetalle,
.main-panel.bravia-wizard-activo #sepAfterPersonajes,
.main-panel.bravia-wizard-activo #sepBeforeDatosEvento,
.main-panel.bravia-wizard-activo #sepAfterDatosEvento{
  display:none !important;
}

.bravia-wizard-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid #e5e5e5;
}

.bravia-wizard-btn{
  min-height:42px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.28);
  background:#fff;
  color:#111;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
}

.bravia-wizard-btn:hover:not(:disabled){
  background:#111;
  color:#fff;
}

.bravia-wizard-btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.bravia-wizard-btn-next{
  background:#111;
  color:#fff;
  border-color:#111;
}

.bravia-wizard-btn-next:disabled{
  background:#e5e5e5;
  border-color:#d6d6d6;
  color:#777;
}

.bravia-wizard-estado{
  flex:1 1 auto;
  text-align:center;
  color:#666;
  font-size:13px;
  line-height:1.35;
}

.bravia-wizard-estado strong{
  color:#111;
}

/* Cuando un subítem queda solo, ocupa todo el ancho y se elimina la línea vertical. */
.main-panel.bravia-wizard-activo .bravia-wizard-una-columna{
  grid-template-columns:1fr !important;
  gap:22px !important;
}

.main-panel.bravia-wizard-activo .bravia-wizard-una-columna::before{
  display:none !important;
}

.main-panel.bravia-wizard-activo #datosEventoFilaPrincipal.bravia-wizard-evento-una-columna{
  grid-template-columns:1fr !important;
}
.main-panel.bravia-wizard-activo #datosEventoFilaPrincipal.bravia-wizard-evento-una-columna::before{
  display:none !important;
}

@media(max-width:620px){
  .bravia-wizard-nav{
    flex-wrap:wrap;
  }
  .bravia-wizard-estado{
    order:-1;
    flex-basis:100%;
  }
  .bravia-wizard-btn{
    flex:1 1 0;
    padding:0 14px;
  }
}


/* --- bravia-corporeos-filtro-css --- */
/* Filtro de corpóreos por película/serie/grupo y reducción de pestañeo visual. */
#corporeoGrupoSelect{
  width:100%;
  max-width:100%;
}
#corporeosExtraLista{
  min-height:120px;
}
.corporeo-extra-row[style*="display: none"]{
  display:none !important;
}


/* --- bravia-agenda-sin-recuadro-css --- */
/* =========================================================
   BRAVÍA: agenda sin recuadro exterior
   Quita solo el borde/caja del bloque 4.3 Agenda del evento.
========================================================= */
#agendaBraviaSelector{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
  overflow:visible !important;
}


/* --- bravia-ubicacion-ancho-completo-css-final --- */
/* =========================================================
   BRAVÍA: ubicación ancho completo real
   Aplica también en Meet & Greet.
========================================================= */
#datosEventoBloqueUbicacion{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#datosEventoBloqueUbicacion > .field-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(160px, .8fr) !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
}

#datosEventoBloqueUbicacion select,
#datosEventoBloqueUbicacion input{
  min-width:0 !important;
  max-width:100% !important;
}

#datosEventoBloqueUbicacion #valorTransporte{
  grid-column:auto !important;
  width:100% !important;
}

#datosEventoBloqueUbicacion .bravia-direccion-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(100px, 150px) !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
}

#datosEventoBloqueUbicacion .bravia-direccion-row #eventoDireccion,
#datosEventoBloqueUbicacion .bravia-direccion-row #eventoNumero{
  grid-column:auto !important;
  width:100% !important;
}

#datosEventoBloqueUbicacion .bravia-direccion-row #eventoDeptoOficina{
  grid-column:1 / -1 !important;
  width:100% !important;
}

#datosEventoBloqueUbicacion #eventoReferencia{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

@media(max-width:760px){
  #datosEventoBloqueUbicacion > .field-row,
  #datosEventoBloqueUbicacion .bravia-direccion-row{
    grid-template-columns:1fr !important;
  }

  #datosEventoBloqueUbicacion #valorTransporte,
  #datosEventoBloqueUbicacion .bravia-direccion-row #eventoDireccion,
  #datosEventoBloqueUbicacion .bravia-direccion-row #eventoNumero,
  #datosEventoBloqueUbicacion .bravia-direccion-row #eventoDeptoOficina{
    grid-column:1 / -1 !important;
  }
}


/* --- bravia-depto-misma-linea-css-final --- */
/* =========================================================
   BRAVÍA: Dirección, número y depto/oficina en una misma línea
========================================================= */
#datosEventoBloqueUbicacion .bravia-direccion-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(100px, 150px) minmax(170px, .85fr) !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
}

#datosEventoBloqueUbicacion .bravia-direccion-row #eventoDireccion,
#datosEventoBloqueUbicacion .bravia-direccion-row #eventoNumero,
#datosEventoBloqueUbicacion .bravia-direccion-row #eventoDeptoOficina{
  grid-column:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

@media(max-width:760px){
  #datosEventoBloqueUbicacion .bravia-direccion-row{
    grid-template-columns:1fr !important;
  }

  #datosEventoBloqueUbicacion .bravia-direccion-row #eventoDireccion,
  #datosEventoBloqueUbicacion .bravia-direccion-row #eventoNumero,
  #datosEventoBloqueUbicacion .bravia-direccion-row #eventoDeptoOficina{
    grid-column:1 / -1 !important;
  }
}


/* --- bravia-actividad-check-fix-css --- */
/* FIX: si ya hay una actividad marcada, no debe quedar el recuadro rojo antiguo. */
#actividadesBlock:has(#juegosChk:checked, #bailesChk:checked, #cumpleChk:checked, #pinataChk:checked, #regalosChk:checked){
  border-color:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}


/* --- bravia-whatsapp-solo-formulario-completo-css --- */
/* =========================================================
   BRAVÍA: WhatsApp solo activo con formulario completo
   Evita que el botón del resumen quede disponible durante pasos intermedios.
========================================================= */
.whatsapp-btn:disabled,
.whatsapp-btn.bloqueado-validacion-total{
  background:#d9d9d9 !important;
  color:#8a8a8a !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}


/* --- bravia-responsive-final-css --- */
/* =========================================================
   FIX RESPONSIVE FINAL — ARMA TU PLAN
   Base: versión más actualizada enviada por Andy.
   Solo ajusta visual responsive y seguridad del wizard.
========================================================= */

html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

body{
  margin:0 !important;
}

img,
picture,
video,
canvas,
svg,
iframe{
  max-width:100% !important;
  height:auto;
}

button,
input,
select,
textarea{
  max-width:100% !important;
}

.bravia-site-header,
.bravia-main-menu,
.page,
.main-panel,
.summary-card,
.section,
.row-2,
.event-grid,
.personajes-grid,
.field-row,
.characters-box,
.agenda-bravia-card,
.agenda-dias-wrap,
.agenda-dias-carousel,
.agenda-horas-grid,
.footer-wrap{
  min-width:0 !important;
}

/* Header / menú */
.bravia-site-header{
  width:min(1160px, calc(100% - 42px)) !important;
}

.bravia-main-menu{
  max-width:100% !important;
}

.bravia-main-menu a{
  min-width:0 !important;
  white-space:normal !important;
  text-align:center !important;
}

/* Layout principal */
.page{
  width:min(1200px, calc(100% - 42px)) !important;
  max-width:1200px !important;
}

.main-panel{
  min-width:0 !important;
}

.summary-card{
  min-width:0 !important;
}

/* Evita que el modo slide recorte contenido al achicar la ventana */
.main-panel.bravia-wizard-activo{
  overflow:visible !important;
}

/* El navegador de pasos siempre visible si el wizard está activo */
.main-panel.bravia-wizard-activo #braviaWizardNav,
#braviaWizardNav{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Controles responsivos sin deformar el diseño */
.pill-group,
.radio-pill-group{
  max-width:100% !important;
}

.pill,
.radio-pill{
  min-width:0 !important;
  max-width:100% !important;
  white-space:normal !important;
}

/* Resumen: no permitir textos fuera de la tarjeta */
.summary-row{
  min-width:0 !important;
}

.summary-label,
.summary-value{
  min-width:0 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.summary-value{
  white-space:normal !important;
}

.price-main{
  overflow-wrap:anywhere !important;
}

/* Agenda */
.agenda-bravia-card,
.agenda-dias-wrap,
.agenda-dias-carousel,
.agenda-horas-grid,
.agenda-modal,
.agenda-modal .agenda-horas-grid{
  min-width:0 !important;
  max-width:100% !important;
}

/* Tablet y pantallas angostas */
@media screen and (max-width:980px){
  .bravia-site-header{
    width:min(1160px, calc(100% - 26px)) !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:18px !important;
    padding:22px 0 18px !important;
  }

  .bravia-brand-logo{
    width:min(280px, 84vw) !important;
  }

  .bravia-main-menu{
    justify-content:center !important;
    width:100% !important;
  }

  .page{
    display:flex !important;
    flex-direction:column !important;
    width:min(1200px, calc(100% - 26px)) !important;
    max-width:1200px !important;
    padding:26px 0 48px !important;
    gap:26px !important;
  }

  .main-panel,
  .summary-card{
    width:100% !important;
    max-width:100% !important;
  }

  .summary-card{
    position:static !important;
    top:auto !important;
  }

  .row-2,
  .event-grid,
  .personajes-grid,
  #clienteComentariosRow{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .vsep::before,
  #clienteComentariosRow::before{
    display:none !important;
  }

  #datosEventoBloqueUbicacion{
    width:100% !important;
    max-width:100% !important;
  }

  #datosEventoBloqueUbicacion > .field-row,
  #datosEventoBloqueUbicacion .bravia-direccion-row{
    grid-template-columns:1fr !important;
  }
}

/* Menú en celular: 2 columnas claras, WhatsApp al ancho completo */
@media screen and (max-width:620px){
  .bravia-site-header{
    width:min(1160px, calc(100% - 22px)) !important;
  }

  .bravia-main-menu{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
    width:100% !important;
  }

  .bravia-main-menu a{
    width:100% !important;
    min-height:40px !important;
    padding:8px 8px !important;
    font-size:11px !important;
    letter-spacing:.07em !important;
    line-height:1.15 !important;
  }

  .bravia-main-menu .bravia-menu-cta{
    grid-column:1 / -1 !important;
  }

  .main-panel,
  .summary-card{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .form-title{
    font-size:20px !important;
  }

  .section-title{
    font-size:17px !important;
  }

  .field-title{
    font-size:14px !important;
  }

  /* Tipo de servicio: mantiene 3 opciones si el ancho alcanza */
  #tipoServicioGroup{
    display:flex !important;
    flex-wrap:wrap !important;
    width:100% !important;
    gap:7px !important;
    border-radius:22px !important;
  }

  #tipoServicioGroup .pill{
    flex:1 1 105px !important;
    padding:10px 10px !important;
  }

  .radio-pill-group{
    display:flex !important;
    flex-wrap:wrap !important;
    width:100% !important;
    gap:8px !important;
  }

  .radio-pill{
    flex:1 1 135px !important;
    padding:10px 12px !important;
  }

  .field-row,
  #datosEventoBloqueUbicacion .field-row,
  #datosEventoBloqueUbicacion .bravia-direccion-row,
  #datosEventoBloqueUbicacion > .field-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:8px !important;
  }

  .field-row > *,
  #datosEventoBloqueUbicacion .field-row > *,
  #datosEventoBloqueUbicacion .bravia-direccion-row > *,
  #datosEventoBloqueUbicacion > .field-row > *{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:initial !important;
    grid-column:auto !important;
  }

  select,
  input[type="text"],
  input[type="date"],
  input[type="time"],
  input[type="email"],
  input[type="number"],
  textarea{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .checkbox-row{
    align-items:flex-start !important;
  }

  .checkbox-row input[type="checkbox"],
  .checkbox-row input[type="radio"]{
    width:auto !important;
    flex:0 0 auto !important;
    margin-top:2px;
  }

  .characters-box{
    max-height:240px !important;
  }

  .agenda-bravia-card{
    padding:12px !important;
  }

  .agenda-mes-anio-wrap{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .agenda-dias-wrap{
    gap:5px !important;
  }

  .agenda-dia-btn{
    flex-basis:56px !important;
  }

  .agenda-horas-grid,
  .agenda-modal .agenda-horas-grid{
    grid-template-columns:1fr !important;
  }

  .codigo-bravia-row{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .codigo-bravia-row button{
    width:100% !important;
  }

  .summary-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:3px !important;
  }

  .summary-label,
  .summary-value{
    max-width:100% !important;
    width:100% !important;
    text-align:left !important;
  }

  .price-main{
    font-size:clamp(30px, 10vw, 36px) !important;
  }

  .footer-wrap{
    width:min(1160px, calc(100% - 22px)) !important;
  }

  .footer-cta{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .footer-btn{
    width:100% !important;
    text-align:center !important;
    padding:13px 14px !important;
  }

  /* Wizard en móvil: navegación visible, no se pierde bajo el resumen */
  .bravia-wizard-nav{
    position:sticky !important;
    bottom:0 !important;
    z-index:80 !important;
    background:#fff !important;
    padding:12px 0 !important;
    margin-top:22px !important;
    box-shadow:0 -10px 18px rgba(255,255,255,.92) !important;
  }

  .bravia-wizard-btn{
    min-height:42px !important;
    padding:0 14px !important;
    font-size:12px !important;
  }

  .bravia-wizard-estado{
    font-size:12px !important;
  }
}

@media screen and (max-width:360px){
  .bravia-main-menu{
    grid-template-columns:1fr !important;
  }

  #tipoServicioGroup .pill,
  .radio-pill{
    flex-basis:100% !important;
  }

  .bravia-wizard-nav{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .bravia-wizard-estado{
    order:-1;
  }

  .bravia-wizard-btn{
    width:100% !important;
  }
}


/* =========================================================
   FIX FINAL: quitar recuadros exteriores del formulario y resumen
   Solo elimina caja visual. No cambia wizard, IDs, scripts ni cálculos.
========================================================= */
.main-panel,
.summary-card,
.main-panel.bravia-wizard-activo,
.summary-card.bravia-wizard-activo{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Mantiene el fondo general blanco para que no aparezca una caja gris alrededor. */
body,
.page{
  background:#ffffff !important;
}


/* =========================================================
   AJUSTE FINAL: títulos del encabezado del wizard más pequeños
   Mantiene negro/negrita donde corresponde, sin tocar lógica ni estructura.
========================================================= */
.bravia-wizard-main-title{
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  margin-bottom:6px !important;
}

.bravia-wizard-main-desc{
  font-size:12px !important;
  line-height:1.4 !important;
}

.bravia-wizard-sub-title{
  font-size:14px !important;
  line-height:1.25 !important;
  color:#0b0b0b !important;
  font-weight:900 !important;
  margin-bottom:6px !important;
}

.bravia-wizard-sub-desc{
  font-size:12px !important;
  line-height:1.4 !important;
}

@media(max-width:760px){
  .bravia-wizard-main-title{
    font-size:15px !important;
  }

  .bravia-wizard-main-desc,
  .bravia-wizard-sub-desc{
    font-size:12px !important;
  }

  .bravia-wizard-sub-title{
    font-size:13px !important;
  }
}

/* =========================================================
   AJUSTE FINAL: quitar línea duplicada bajo el título del paso
   Solo elimina la línea inferior del encabezado interno del wizard.
========================================================= */
.bravia-wizard-header-line{
  display:none !important;
}

/* =========================================================
   AJUSTE FINAL: quitar las dos líneas marcadas
   1) Línea bajo el subtítulo "Elige tipo de servicio..."
   2) Línea bajo la descripción del título del paso actual
   No cambia HTML, wizard, IDs, scripts ni cálculos.
========================================================= */
.main-panel > .form-subtitle + .divider,
.main-panel.bravia-wizard-activo > .form-subtitle + .divider{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.bravia-wizard-header-line,
.bravia-wizard-step-header .bravia-wizard-header-line{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.bravia-wizard-step-header{
  border-bottom:none !important;
}

.main-panel.bravia-wizard-activo .bravia-wizard-step-header + .divider{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

/* =========================================================
   AJUSTE FINAL: líneas del encabezado retiradas
   La línea bajo el subtítulo principal se retiró también del HTML.
   Esta regla mantiene oculto el separador generado por el encabezado del wizard.
========================================================= */
.bravia-wizard-header-line,
.bravia-wizard-step-header .bravia-wizard-header-line{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.bravia-wizard-step-header{
  border-bottom:none !important;
}

/* =========================================================
   BRAVÍA: ocultar nombre del subpaso en el pie del wizard
   Mantiene visible solo “Paso X de X”. No toca HTML ni scripts.
========================================================= */
.bravia-wizard-estado{
  font-size:0 !important;
}

.bravia-wizard-estado strong{
  display:block !important;
  font-size:13px !important;
  line-height:1.35 !important;
  color:#0b0b0b !important;
  font-weight:900 !important;
}

.bravia-wizard-estado br{
  display:none !important;
}

/* =========================================================
   AJUSTE: Tipo de servicio en vertical
   Solo cambia la presentación de Animación / Meet & Greet / Ambos.
   No toca el wizard, cálculos, validaciones ni envíos.
========================================================= */
#tipoServicioGroup{
  display:grid !important;
  grid-template-columns:1fr !important;
  width:min(280px, 100%) !important;
  max-width:100% !important;
  gap:8px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
}

#tipoServicioGroup .pill{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  display:block !important;
  border:1px solid rgba(0,0,0,.22) !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:#0b0b0b !important;
  padding:10px 16px !important;
  text-align:center !important;
  box-shadow:none !important;
}

#tipoServicioGroup .pill.active{
  background:#111111 !important;
  border-color:#111111 !important;
  color:#ffffff !important;
  font-weight:900 !important;
}

/* =========================================================
   AJUSTE: Duración total en horizontal
   Mantiene 30 / 60 / 90 / 120 minutos en fila, con salto solo si no cabe.
   No toca HTML, wizard, cálculos, validaciones ni envíos.
========================================================= */
#duracionGroup,
#duracionGroup.radio-pill-group{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}

#duracionGroup .radio-pill{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:110px !important;
  max-width:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  text-align:center !important;
  padding:9px 18px !important;
}

@media(max-width:520px){
  #duracionGroup,
  #duracionGroup.radio-pill-group{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
  }

  #duracionGroup .radio-pill{
    flex:1 1 calc(33.333% - 8px) !important;
    min-width:0 !important;
    width:auto !important;
    padding:9px 10px !important;
    font-size:13px !important;
  }
}

@media(max-width:360px){
  #duracionGroup .radio-pill{
    flex:1 1 100% !important;
  }
}

/* =========================================================
   CORRECCIÓN: Duración total en vertical
   Revierte la presentación horizontal de 30 / 60 / 90 / 120 minutos.
   No toca HTML, wizard, cálculos, validaciones ni envíos.
========================================================= */
#duracionGroup,
#duracionGroup.radio-pill-group{
  display:grid !important;
  grid-template-columns:1fr !important;
  width:min(280px, 100%) !important;
  max-width:100% !important;
  gap:8px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
}

#duracionGroup .radio-pill{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(0,0,0,.22) !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:#0b0b0b !important;
  padding:10px 16px !important;
  text-align:center !important;
  box-shadow:none !important;
  white-space:normal !important;
}

#duracionGroup .radio-pill.active{
  background:#111111 !important;
  border-color:#111111 !important;
  color:#ffffff !important;
  font-weight:900 !important;
}

@media(max-width:520px){
  #duracionGroup,
  #duracionGroup.radio-pill-group{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
  }

  #duracionGroup .radio-pill{
    width:100% !important;
    min-width:0 !important;
    padding:10px 12px !important;
    font-size:13px !important;
  }
}

/* =========================================================
   FIX SEGURO: Datos del cliente y comentarios sin romper wizard
   No fuerza display en bloques que el wizard debe mantener ocultos.
========================================================= */
#clienteComentariosRow{
  grid-template-columns:1fr !important;
  gap:18px !important;
  align-items:start !important;
  justify-items:stretch !important;
  width:100% !important;
  max-width:760px !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

#clienteComentariosRow::before,
#clienteComentariosRow.vsep::before,
.main-panel.bravia-wizard-activo #clienteComentariosRow::before,
.main-panel.bravia-wizard-activo #clienteComentariosRow.vsep::before{
  display:none !important;
  content:none !important;
}

#datosClienteSection,
#clienteDerechaComentarios,
#datosClienteDerecha,
#datosPersonaNaturalCliente,
#datosEmpresaCliente,
#datosEmpresaBasicaCliente,
#comentariosSection{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

#datosClienteSection input,
#datosClienteSection select,
#clienteDerechaComentarios input,
#clienteDerechaComentarios select,
#clienteDerechaComentarios textarea{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#datosClienteSection .field-row,
#clienteDerechaComentarios .field-row{
  grid-template-columns:1fr !important;
  gap:8px !important;
  width:100% !important;
}

#datosClienteSection .field-row > *,
#clienteDerechaComentarios .field-row > *{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#comentariosSection,
.main-panel.bravia-wizard-activo #comentariosSection,
#comentariosSection.bravia-panel-actual,
.main-panel.bravia-wizard-activo #comentariosSection.bravia-panel-actual{
  width:100% !important;
  max-width:760px !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
  justify-self:stretch !important;
  align-self:start !important;
}

#comentariosSection .section-title,
#comentariosSection .section-subtitle,
#comentariosSection .field-title,
#comentariosSection .help-text{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

#comentariosExtra,
.main-panel.bravia-wizard-activo #comentariosExtra{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* =========================================================
   FIX FINAL: checkboxes de Datos del cliente
   El ajuste de una columna hacía que los checkbox heredaran width:100%.
   Se corrige solo el tamaño/alineación de checkbox y radio, sin tocar wizard.
========================================================= */
#datosClienteSection .checkbox-row,
#clienteDerechaComentarios .checkbox-row,
#datosEmpresaBasicaCliente .checkbox-row,
#datosEmpresaCliente .checkbox-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  text-align:left !important;
}

#datosClienteSection .checkbox-row input[type="checkbox"],
#datosClienteSection .checkbox-row input[type="radio"],
#clienteDerechaComentarios .checkbox-row input[type="checkbox"],
#clienteDerechaComentarios .checkbox-row input[type="radio"],
#datosEmpresaBasicaCliente .checkbox-row input[type="checkbox"],
#datosEmpresaBasicaCliente .checkbox-row input[type="radio"],
#datosEmpresaCliente .checkbox-row input[type="checkbox"],
#datosEmpresaCliente .checkbox-row input[type="radio"]{
  width:13px !important;
  min-width:13px !important;
  max-width:13px !important;
  height:13px !important;
  flex:0 0 13px !important;
  margin:0 !important;
  padding:0 !important;
}

#datosClienteSection .checkbox-row label,
#datosClienteSection .checkbox-row span,
#clienteDerechaComentarios .checkbox-row label,
#clienteDerechaComentarios .checkbox-row span,
#datosEmpresaBasicaCliente .checkbox-row label,
#datosEmpresaBasicaCliente .checkbox-row span,
#datosEmpresaCliente .checkbox-row label,
#datosEmpresaCliente .checkbox-row span{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  flex:0 1 auto !important;
  text-align:left !important;
  line-height:1.35 !important;
}


/* =========================================================
   FIX PANEL DERECHO: Código Bravía
   Hace visible la palabra "Aplicar" sobre botón negro, incluso si el botón
   está deshabilitado por no tener código ingresado.
========================================================= */
.codigo-bravia-row button,
.codigo-bravia-row button:disabled,
#btnAplicarCodigoBravia,
#btnAplicarCodigoBravia:disabled{
  background:#111111 !important;
  color:#ffffff !important;
  opacity:1 !important;
  text-indent:0 !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* =========================================================
   FIX RESUMEN PROGRESIVO SIN PARPADEO
   Oculta desde CSS las filas vacías del resumen antiguo antes de que cargue el JS.
   El JS solo agrega .bravia-summary-visible a lo que corresponde mostrar.
========================================================= */
.summary-card > .summary-section-title:not(.bravia-summary-visible),
.summary-card > .summary-row:not(.bravia-summary-visible),
#resumenPersonajesSection:not(.bravia-summary-visible),
#resumenActividadesSection:not(.bravia-summary-visible),
#resumenServiciosSection:not(.bravia-summary-visible),
#resumenDatosSection:not(.bravia-summary-visible),
#resumenClienteSection:not(.bravia-summary-visible),
#resumenComentariosSection:not(.bravia-summary-visible){
  display:none !important;
}

#resumenPersonajesSection .summary-row:not(.bravia-summary-visible),
#resumenActividadesSection .summary-row:not(.bravia-summary-visible),
#resumenServiciosSection .summary-row:not(.bravia-summary-visible),
#resumenDatosSection .summary-row:not(.bravia-summary-visible),
#resumenClienteSection .summary-row:not(.bravia-summary-visible),
#resumenComentariosSection .summary-row:not(.bravia-summary-visible),
.summary-card .summary-subtitle:not(.bravia-summary-visible){
  display:none !important;
}

.summary-card > .summary-section-title.bravia-summary-visible,
.summary-card .summary-subtitle.bravia-summary-visible{
  display:block !important;
}

.summary-card > .summary-row.bravia-summary-visible,
#resumenPersonajesSection .summary-row.bravia-summary-visible,
#resumenActividadesSection .summary-row.bravia-summary-visible,
#resumenServiciosSection .summary-row.bravia-summary-visible,
#resumenDatosSection .summary-row.bravia-summary-visible,
#resumenClienteSection .summary-row.bravia-summary-visible,
#resumenComentariosSection .summary-row.bravia-summary-visible{
  display:flex !important;
}

#resumenPersonajesSection.bravia-summary-visible,
#resumenActividadesSection.bravia-summary-visible,
#resumenServiciosSection.bravia-summary-visible,
#resumenDatosSection.bravia-summary-visible,
#resumenClienteSection.bravia-summary-visible,
#resumenComentariosSection.bravia-summary-visible{
  display:block !important;
}

.summary-card h2,
.summary-card .price-main,
.summary-card .precio-normal-referencia,
.summary-card #codigoBraviaBox,
.summary-card .summary-totals,
.summary-card .whatsapp-btn,
.summary-card .summary-note{
  display:block;
}

.summary-card .summary-totals .summary-row{
  display:flex;
}

/* =========================================================
   BRAVÍA: WhatsApp sin parpadeo
   El botón del resumen queda gris desde el inicio y solo se activa
   cuando el formulario está completo.
========================================================= */
.summary-card .whatsapp-btn:not(.bravia-whatsapp-activo),
.summary-card .whatsapp-btn:disabled,
.summary-card .whatsapp-btn.bloqueado-validacion-total,
.summary-card .whatsapp-btn.bloqueado-agenda{
  background:#d9d9d9 !important;
  color:#8a8a8a !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}

.summary-card .whatsapp-btn.bravia-whatsapp-activo:not(:disabled):not(.bloqueado-agenda):not(.bloqueado-validacion-total){
  background:#111111 !important;
  color:#ffffff !important;
  cursor:pointer !important;
  opacity:1 !important;
}

.summary-card .whatsapp-btn.bravia-whatsapp-activo:not(:disabled):not(.bloqueado-agenda):not(.bloqueado-validacion-total):hover{
  background:#333333 !important;
}



/* =========================================================
   BRAVÍA: ant parpadeo general del wizard/resumen
   Evita que se vea la versión completa/antigua antes de que el JS ordene la pantalla.
========================================================= */
html.bravia-ui-booting .page{
  opacity:0 !important;
  visibility:hidden !important;
}
html.bravia-ui-ready .page{
  opacity:1 !important;
  visibility:visible !important;
}

/* =========================================================
   BRAVÍA: sin validación roja al cargar ni al seleccionar
   Las clases pueden existir internamente, pero solo se pintan si el usuario intenta avanzar/enviar.
========================================================= */
body:not(.bravia-validacion-activa) .bravia-pendiente,
body:not(.bravia-validacion-activa) .campo-error,
body:not(.bravia-validacion-activa) .bravia-grupo-pendiente{
  border-color:inherit !important;
  box-shadow:none !important;
  outline:none !important;
}
body:not(.bravia-validacion-activa) .bravia-label-pendiente,
body:not(.bravia-validacion-activa) .campo-error-label,
body:not(.bravia-validacion-activa) .bravia-section-pendiente > .section-title{
  color:inherit !important;
}

/* Mantiene el contorno normal de los grupos aunque existan clases internas de pendiente. */
body:not(.bravia-validacion-activa) .pill-group.bravia-grupo-pendiente,
body:not(.bravia-validacion-activa) .radio-pill-group.bravia-grupo-pendiente,
body:not(.bravia-validacion-activa) .agenda-bravia-card.bravia-grupo-pendiente,
body:not(.bravia-validacion-activa) .characters-box.bravia-grupo-pendiente{
  border-color:rgba(0,0,0,.14) !important;
  box-shadow:none !important;
  outline:none !important;
}

/* =========================================================
   BRAVÍA: títulos principales del wizard en mayúsculas
   Solo cambia la visualización; no toca HTML, JS, cálculos ni validaciones.
========================================================= */
.bravia-wizard-progress-main-item,
.bravia-wizard-main-title{
  text-transform: uppercase !important;
}

/* =========================================================
   BRAVÍA: normalización de tamaños del wizard
   Unifica tamaños para que ningún título interno se vea más grande
   que el resto del formulario. No toca HTML, JS, cálculos ni validación.
========================================================= */
.main-panel.bravia-wizard-activo .bravia-wizard-progress-main-item{
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
}

.main-panel.bravia-wizard-activo .bravia-wizard-progress-sub-item{
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

.main-panel.bravia-wizard-activo .bravia-wizard-progress-sep{
  font-size:14px !important;
  line-height:1 !important;
}

.main-panel.bravia-wizard-activo .bravia-wizard-main-title{
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
}

.main-panel.bravia-wizard-activo .bravia-wizard-main-desc{
  font-size:12px !important;
  line-height:1.4 !important;
  font-weight:400 !important;
}

.main-panel.bravia-wizard-activo .bravia-wizard-sub-title{
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}

.main-panel.bravia-wizard-activo .bravia-wizard-sub-desc{
  font-size:12px !important;
  line-height:1.4 !important;
  font-weight:400 !important;
}

.main-panel.bravia-wizard-activo .bravia-panel-actual .field-title,
.main-panel.bravia-wizard-activo .bravia-panel-actual .bravia-subfield-title,
.main-panel.bravia-wizard-activo #datosEventoBloqueInvitados .field-title,
.main-panel.bravia-wizard-activo #eventoNinosBlock .field-title{
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}

.main-panel.bravia-wizard-activo .bravia-panel-actual .section-subtitle,
.main-panel.bravia-wizard-activo .bravia-panel-actual .help-text,
.main-panel.bravia-wizard-activo .bravia-panel-actual small,
.main-panel.bravia-wizard-activo .bravia-panel-actual p{
  font-size:12px !important;
  line-height:1.4 !important;
}

.main-panel.bravia-wizard-activo #datosEventoBloqueInvitados li,
.main-panel.bravia-wizard-activo #eventoNinosBlock li{
  font-size:14px !important;
  line-height:1.3 !important;
}

.main-panel.bravia-wizard-activo #datosEventoBloqueInvitados li::marker,
.main-panel.bravia-wizard-activo #eventoNinosBlock li::marker{
  font-size:13px !important;
}

@media(max-width:760px){
  .main-panel.bravia-wizard-activo .bravia-wizard-progress-main-item{
    font-size:13px !important;
  }
  .main-panel.bravia-wizard-activo .bravia-wizard-progress-sub-item{
    font-size:12px !important;
  }
  .main-panel.bravia-wizard-activo .bravia-wizard-main-title{
    font-size:14px !important;
  }
  .main-panel.bravia-wizard-activo .bravia-wizard-sub-title,
  .main-panel.bravia-wizard-activo .bravia-panel-actual .field-title,
  .main-panel.bravia-wizard-activo .bravia-panel-actual .bravia-subfield-title{
    font-size:13px !important;
  }
}

/* =========================================================
   BRAVÍA: Temática en listado vertical
   Cambia solo el grupo Fantasía / SuperHeroes / K-pop / Corpóreos / Animé / Series.
========================================================= */
#tematicaGroup{
  display:grid !important;
  grid-template-columns:1fr !important;
  width:min(100%, 340px) !important;
  max-width:340px !important;
  margin:12px auto 0 !important;
  gap:10px !important;
  justify-content:stretch !important;
  align-items:stretch !important;
}

#tematicaGroup .radio-pill{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 14px !important;
  text-align:center !important;
}

/* =========================================================
   BRAVÍA: Temática vertical alineada a la izquierda
   Ajusta solo el listado Fantasía / SuperHeroes / K-pop / Corpóreos / Animé / Series.
========================================================= */
.main-panel.bravia-wizard-activo #tematicaGroup{
  margin:12px 0 0 0 !important;
  justify-self:start !important;
  align-self:start !important;
}

.main-panel.bravia-wizard-activo #tematicaGroup .radio-pill{
  justify-content:center !important;
}


/* =========================================================
   FIX FINAL MÓVIL V5 — resumen alineado + sin zoom horizontal
   Base: CSS original. No oculta secciones ni cambia cálculos.
========================================================= */

/* Resumen: descripción a la izquierda y valor a la derecha */
.summary-card .summary-row,
.summary-card .summary-totals .summary-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:100% !important;
}

.summary-card .summary-label{
  flex:1 1 auto !important;
  width:auto !important;
  max-width:68% !important;
  min-width:0 !important;
  text-align:left !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.summary-card .summary-value{
  flex:0 1 auto !important;
  width:auto !important;
  max-width:32% !important;
  min-width:0 !important;
  margin-left:auto !important;
  text-align:right !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* Comentarios largos: siguen en bloque para no romper la tarjeta */
#resumenComentariosSection .summary-row{
  display:block !important;
}
#resumenComentariosSection .summary-label,
#resumenComentariosSection .summary-value{
  width:100% !important;
  max-width:100% !important;
  text-align:left !important;
  margin-left:0 !important;
}

/* Parte superior del resumen: siempre a la izquierda en teléfono */
.summary-card,
.summary-card h2,
.summary-card .price-main,
.summary-card .precio-normal-referencia{
  text-align:left !important;
}

@media screen and (max-width:760px){
  html,
  body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .page,
  .main-panel,
  .summary-card{
    max-width:100% !important;
    min-width:0 !important;
  }

  .main-panel,
  .summary-card{
    overflow-x:hidden !important;
  }

  .row-2,
  .event-grid,
  .personajes-grid,
  #datosEventoFilaPrincipal,
  #clienteComentariosRow,
  #animacionExtrasRow{
    grid-template-columns:minmax(0, 1fr) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .row-2 > *,
  .event-grid > *,
  .personajes-grid > *,
  #datosEventoFilaPrincipal > *,
  #clienteComentariosRow > *,
  #animacionExtrasRow > *,
  .section,
  .bravia-panel-actual,
  #datosEventoBloqueAgenda,
  #datosEventoBloqueUbicacion{
    max-width:100% !important;
    min-width:0 !important;
  }

  /* El menú de pasos no debe agrandar la página completa */
  .bravia-wizard-progress{
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .bravia-wizard-progress-main,
  .bravia-wizard-progress-sub{
    max-width:100% !important;
    min-width:0 !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
  }

  .bravia-wizard-progress-item,
  .bravia-wizard-progress-item span{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  .bravia-wizard-step-header,
  .bravia-wizard-main-title,
  .bravia-wizard-main-desc,
  .bravia-wizard-sub-title,
  .bravia-wizard-sub-desc{
    max-width:100% !important;
    min-width:0 !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  .bravia-wizard-main-desc,
  .bravia-wizard-sub-desc,
  .section-subtitle,
  .help-text,
  small,
  p{
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  /* Agenda: evita que selectores/carruseles fuercen ancho tipo zoom */
  .agenda-bravia-card,
  #agendaBraviaSelector,
  .agenda-mes-anio-wrap,
  .agenda-dias-wrap,
  .agenda-dias-carousel,
  .agenda-horas-grid,
  .agenda-modal .agenda-horas-grid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .agenda-mes-anio-wrap{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .agenda-dias-wrap{
    overflow:hidden !important;
  }

  .agenda-dias-carousel{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .agenda-horas-grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  select,
  input,
  textarea,
  button{
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* =========================================================
   FIX BRAVÍA: descuento solo visible con código aplicado
   Mantiene ocultas las filas "Total oferta" y "Final con descuento"
   hasta que el código Bravía sea válido.
========================================================= */
#filaTotalOfertaBravia:not(.bravia-descuento-activo),
#filaFinalDescuentoBravia:not(.bravia-descuento-activo){
  display:none !important;
}

#filaTotalOfertaBravia.bravia-descuento-activo,
#filaFinalDescuentoBravia.bravia-descuento-activo{
  display:flex !important;
}



/* Oculta cualquier fila antigua de IVA si quedó en caché o en una versión previa. */
.summary-row:has(#resumenIvaLabel),
.summary-row:has(#resumenRetencion){
  display:none !important;
}
#resumenIvaLabel,
#resumenRetencion{
  display:none !important;
}

/* =========================================================
   FIX RESUMEN: horas de llegada de servicios extra
   Si el JS ya quitó .hidden, estas filas deben mostrarse aunque
   todavía no tengan .bravia-summary-visible.
========================================================= */
#resumenServiciosSection.bravia-summary-visible #resumenPintaHoraRow:not(.hidden),
#resumenServiciosSection.bravia-summary-visible #resumenFotografiasDuracionRow:not(.hidden),
#resumenServiciosSection.bravia-summary-visible #resumenFotografiasHoraRow:not(.hidden),
#resumenServiciosSection.bravia-summary-visible #resumenDuracionBaileEntretenidoKidsRow:not(.hidden),
#resumenServiciosSection.bravia-summary-visible #resumenShowMagiaHoraRow:not(.hidden){
  display:flex !important;
}