/* ============================================================
   Chiquilladas — responsive.css
   Ajustes por breakpoint. Las reglas base viven en styles.css;
   aquí se corrigen navegación, hero, grids y componentes por viewport.
   ============================================================ */

@media (max-width: 1199.98px) {
  .page-hero { min-height: 340px; }

  .brand-lockup { min-width: 164px; }
  .brand-logo-img { width: 168px; }

  .navbar .nav-link {
    padding-inline: .52rem !important;
    font-size: .8rem;
  }

  .nav-whatsapp {
    padding-inline: .9rem;
    font-size: .84rem;
  }

  .packages-grid {
    gap: 1.4rem;
  }
}

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

  .chq-navbar,
  .chq-navbar.is-scrolled {
    min-height: 76px;
  }

  .chq-navbar .container {
    max-width: 100%;
    padding-inline: 1.5rem;
  }

  .brand-lockup { min-width: 150px; }

  .brand-logo-img {
    top: 0;
    width: 145px;
  }

  .navbar-toggler {
    flex: 0 0 auto;
    margin-left: auto;
    border: 0;
    box-shadow: none !important;
  }

  .hero-v2 {
    min-height: auto;
    padding-top: 21.5rem;
    padding-bottom: 6rem;
    text-align: center;
  }

  .hero-v2-bg {
    background-size: auto 500px;
    background-position: center top;
  }

  .hero-v2::before {
    background: linear-gradient(
      180deg,
      transparent 19%,
      rgba(61,13,143,.15) 31%,
      rgba(63,14,145,.91) 53%,
      #3b1087 76%
    );
  }

  .hero-v2::after { height: 52px; }

  .hero-v2-copy {
    max-width: 820px;
    margin-inline: auto;
  }

  .hero-v2-title {
    max-width: 820px;
    font-size: clamp(3rem, 7vw, 4.3rem);
  }

  .hero-v2-lead {
    max-width: 680px;
  }

  .hero-highlights {
    margin-top: 1.5rem;
  }

  .highlight-promo {
    min-height: 220px;
    margin-top: .35rem;
  }

  .packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .gallery-item,
  .gallery-wide {
    grid-column: span 6;
    grid-row: auto;
    min-height: 330px;
  }

  .gallery-wide { min-height: 430px; }

  .package-featured { transform: none; }
  .package-featured:hover { transform: translateY(-8px); }

  .page-hero {
    text-align: center;
    padding-top: 6.6rem;
  }

  .page-hero .breadcrumb-nav,
  .filter-tabs {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .chq-navbar .container {
    padding-inline: 1rem;
  }

  .hero-v2 {
    padding-top: 18.2rem;
    padding-bottom: 5.4rem;
  }

  .hero-v2-bg {
    background-size: auto 405px;
  }

  .hero-v2-copy {
    max-width: 100%;
    padding-inline: .75rem;
  }

  .hero-v2-title {
    max-width: 100%;
    padding-inline: .15rem;
    font-size: clamp(2.25rem, 8.8vw, 3.2rem);
    line-height: .98;
  }

  .hero-title-top,
  .hero-title-bottom {
    -webkit-text-stroke-width: 1.5px;
    text-shadow:
      0 4px 0 #4b159a,
      0 7px 11px rgba(25,2,71,.46);
  }

  .hero-v2-lead {
    max-width: 560px;
    padding-inline: .25rem;
    font-size: 1.02rem;
  }

  .hero-main-cta {
    width: min(250px, 100%);
    min-width: 0;
    font-size: 1.08rem;
  }

  /*
   * Bootstrap aplica márgenes negativos a .row. En el bloque de
   * highlights eso provocaba corte lateral real en móviles.
   */
  .hero-highlights {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: .9rem;
    --bs-gutter-y: 1rem;
  }

  .hero-highlights > [class*="col-"] {
    min-width: 0;
  }

  .highlight-card {
    min-width: 0;
    min-height: 98px;
  }

  .promo-value { font-size: 6.8rem; }

  .section-pad { padding: 4.7rem 0; }

  .section-heading h2,
  .process-section h2,
  .booking-section h2,
  .faq-section h2,
  .page-hero h1 {
    font-size: clamp(2.05rem, 8.8vw, 3rem);
  }

  .packages-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .gallery-grid { gap: 12px; }

  .gallery-item,
  .gallery-wide {
    grid-column: span 12;
    min-height: 310px;
  }

  .gallery-wide { min-height: 360px; }

  .promo-panel { border-radius: 26px; }

  .process-item {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .process-item > span {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .floating-whatsapp span { display: none; }

  .floating-whatsapp {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    justify-content: center;
    padding: 0;
  }

  .back-to-top {
    left: max(14px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  .page-hero {
    min-height: 300px;
    padding-top: 6.2rem;
  }

  .package-card-v2 .tier-table {
    font-size: .82rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
  }

  .filter-tabs {
    width: 100%;
  }
}

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

  .chq-navbar,
  .chq-navbar.is-scrolled {
    min-height: 70px;
  }

  .chq-navbar .container {
    padding-inline: .9rem;
  }

  .brand-lockup { min-width: 124px; }

  .brand-logo-img {
    top: 1px;
    width: 122px;
  }

  .brand-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .brand-wordmark i {
    font-size: .72rem;
  }

  .navbar-toggler {
    padding: .4rem .35rem;
  }

  .hero-v2 {
    padding-top: 15.6rem;
    padding-bottom: 4.8rem;
  }

  .hero-v2-bg {
    background-size: auto 332px;
    background-position: center top;
  }

  .hero-v2::before {
    background: linear-gradient(
      180deg,
      transparent 13%,
      rgba(61,13,143,.2) 25%,
      rgba(63,14,145,.94) 47%,
      #3b1087 70%
    );
  }

  .hero-v2-copy {
    width: 100%;
    padding-inline: .7rem;
  }

  .hero-v2-title {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
    font-size: clamp(2rem, 9.35vw, 2.55rem);
    line-height: 1;
    letter-spacing: -.025em;
  }

  .hero-v2-title span {
    max-width: 100%;
  }

  .hero-title-top,
  .hero-title-bottom {
    -webkit-text-stroke-width: 1px;
    text-shadow:
      0 3px 0 #4b159a,
      0 6px 9px rgba(25,2,71,.45);
  }

  .hero-v2-lead {
    max-width: 32rem;
    margin-top: .8rem;
    padding-inline: .35rem;
    font-size: .94rem;
    line-height: 1.38;
  }

  .hero-main-cta {
    width: min(220px, 100%);
    min-width: 0;
    padding: .68rem 1.25rem;
    border-width: 3px;
    font-size: .98rem;
  }

  .hero-highlights {
    margin-top: 1.45rem;
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .9rem;
  }

  .highlight-card {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 88px;
    gap: .75rem;
    padding: .82rem;
    border-radius: 18px;
  }

  .highlight-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.3rem;
  }

  .highlight-card strong {
    font-size: 1rem;
    line-height: 1.2;
  }

  .highlight-card small {
    font-size: .8rem;
    line-height: 1.35;
  }

  .highlight-promo {
    min-height: 225px;
    margin-top: .45rem;
    border-radius: 20px;
  }

  .promo-ribbon { font-size: .92rem; }
  .promo-value { font-size: 5.8rem; }

  .hero-tagline-bar {
    padding: .4rem 1rem .85rem;
    text-align: center;
    font-size: 1.1rem;
  }

  .section-pad { padding: 4rem 0; }
  .section-pad-sm { padding: 2.8rem 0; }

  .section-heading h2,
  .process-section h2,
  .booking-section h2,
  .faq-section h2,
  .page-hero h1 {
    font-size: clamp(1.9rem, 8.8vw, 2.6rem);
    line-height: 1.08;
  }

  .service-card-body { padding: 1.2rem; }

  .package-card {
    padding: 1.25rem;
    border-radius: 22px;
  }

  .package-card h3 {
    font-size: 1.7rem;
  }

  .popular-label {
    position: static;
    display: inline-block;
    margin-bottom: .75rem;
  }

  .package-card-v2 .pkg-body {
    padding: 1.2rem;
  }

  .package-card-v2 h3 {
    font-size: 1.35rem;
  }

  .package-card-v2 .tier-table {
    font-size: .78rem;
  }

  .package-card-v2 .tier-table th,
  .package-card-v2 .tier-table td {
    padding-right: .35rem;
  }

  .booking-form {
    padding: 1.25rem;
    border-radius: 22px;
  }

  .booking-form .form-control,
  .booking-form .form-select {
    min-height: 48px;
  }

  .filter-tabs {
    gap: .4rem;
  }

  .filter-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem .8rem;
    font-size: .8rem;
    text-align: center;
  }

  .gallery-item,
  .gallery-wide {
    min-height: 280px;
    border-radius: 20px;
  }

  .gallery-wide {
    min-height: 320px;
  }

  .service-grid-card-body { padding: 1.15rem; }
  .contact-info-card { padding: 1.2rem; }

  .stats-grid {
    gap: .7rem;
  }

  .stat-card {
    padding: 1.1rem .8rem;
  }

  .site-footer {
    padding-top: 3.5rem;
  }
}

@media (max-width: 420px) {
  .chq-navbar,
  .chq-navbar.is-scrolled {
    min-height: 68px;
  }

  .chq-navbar .container {
    padding-inline: .75rem;
  }

  .brand-lockup {
    min-width: 114px;
  }

  .brand-logo-img {
    width: 112px;
  }

  .navbar-toggler {
    padding-inline: .25rem;
  }

  .hero-v2 {
    padding-top: 14.8rem;
    padding-bottom: 4.4rem;
  }

  .hero-v2-bg {
    background-size: auto 312px;
  }

  .hero-v2-copy {
    padding-inline: .65rem;
  }

  .hero-v2-title {
    font-size: clamp(1.92rem, 9.1vw, 2.35rem);
    line-height: 1.02;
  }

  .hero-v2-lead {
    padding-inline: .2rem;
    font-size: .9rem;
  }

  .hero-main-cta {
    width: min(218px, 100%);
    padding-inline: 1rem;
    font-size: .94rem;
  }

  .highlight-card {
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 84px;
    gap: .68rem;
    padding: .75rem;
  }

  .highlight-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 1.2rem;
  }

  .highlight-card strong { font-size: .96rem; }
  .highlight-card small { font-size: .78rem; }

  .promo-value {
    font-size: 5.25rem;
    -webkit-text-stroke-width: 3px;
  }

  .promo-value sup {
    -webkit-text-stroke-width: 1.5px;
  }

  .page-hero {
    min-height: 280px;
    padding-top: 5.8rem;
    padding-bottom: 3rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .floating-whatsapp {
    width: 50px;
    height: 50px;
  }

  .back-to-top {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 359.98px) {
  .brand-lockup { min-width: 106px; }
  .brand-logo-img { width: 104px; }

  .hero-v2 {
    padding-top: 14rem;
  }

  .hero-v2-bg {
    background-size: auto 292px;
  }

  .hero-v2-copy {
    padding-inline: .5rem;
  }

  .hero-v2-title {
    font-size: 1.86rem;
    letter-spacing: -.02em;
  }

  .hero-v2-lead {
    font-size: .86rem;
  }

  .hero-main-cta {
    width: min(210px, 100%);
    font-size: .9rem;
  }

  .highlight-card {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: .7rem;
  }

  .highlight-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .highlight-card strong { font-size: .92rem; }
  .highlight-card small { font-size: .75rem; }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .filter-tab {
    flex-basis: 100%;
  }
}

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 600px) {
  .hero-v2 {
    padding-top: 15.5rem;
    padding-bottom: 4.5rem;
  }

  .hero-v2-bg {
    background-size: auto 350px;
  }

  .hero-v2-title {
    font-size: clamp(2.3rem, 6vw, 3.4rem);
  }
}

/* ============================================================
   CHIQUILLADAS UI 4.1 — RESPONSIVE DE NUEVAS IMPLEMENTACIONES
   Catálogo dinámico, temporadas, cotizador y Asesor Virtual.
   ============================================================ */

@media (max-width: 1199.98px) {
  #eventos-temporada .package-card { padding: 1.45rem; }

  .advisor-panel {
    width: min(390px, calc(100vw - 24px));
    height: min(570px, 72vh);
  }
}

@media (max-width: 991.98px) {
  #eventos-temporada .row.align-items-end > .text-lg-end { text-align: left !important; }
  #eventos-temporada .row.align-items-end .btn { margin-top: .25rem; }

  .catalog-toolbar {
    align-items: stretch;
  }
  .catalog-search {
    flex-basis: 100%;
    max-width: none;
  }
  .catalog-toolbar-side {
    width: 100%;
    justify-content: flex-start;
  }

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

  .chq-advisor {
    right: 16px;
    bottom: 84px;
  }
}

@media (max-width: 767.98px) {
  #eventos-temporada .section-heading,
  #eventos-temporada .col-lg-8 {
    max-width: 100%;
  }

  .catalog-toolbar-side {
    align-items: stretch;
  }
  .catalog-page-size {
    flex: 1 1 auto;
  }
  #serviceCategory {
    min-width: 0;
    flex: 1 1 100%;
  }
  .catalog-pagination {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: .25rem;
    scrollbar-width: thin;
  }

  .quote-panel {
    padding: 1.2rem;
    border-radius: 20px;
  }
  .quote-services-grid {
    grid-template-columns: 1fr;
  }
  .quote-service-main {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .quote-service-price {
    grid-column: 2;
    text-align: left;
  }
  .quote-summary-card {
    padding: 1.25rem;
    border-radius: 22px;
  }

  .advisor-panel {
    width: min(380px, calc(100vw - 24px));
  }
}

@media (max-width: 575.98px) {
  /* WhatsApp queda abajo; el asesor virtual vive encima. */
  .chq-advisor {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 66px));
  }

  .advisor-toggle {
    width: 52px;
    height: 52px;
    min-height: 52px;
    justify-content: center;
    padding: 0;
    border-radius: 18px;
  }
  .advisor-toggle i { font-size: 1.15rem; }
  .advisor-toggle .advisor-label { display: none; }

  .advisor-panel {
    position: fixed;
    inset: max(76px, calc(env(safe-area-inset-top) + 68px))
           max(10px, env(safe-area-inset-right))
           max(78px, calc(env(safe-area-inset-bottom) + 68px))
           max(10px, env(safe-area-inset-left));
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 22px;
    transform-origin: center bottom;
  }
  .advisor-head {
    min-height: 66px;
    padding: .85rem .9rem .85rem 1rem;
  }
  .advisor-close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .advisor-messages {
    padding: .85rem;
    gap: .65rem;
  }
  .advisor-msg {
    max-width: 92%;
    padding: .68rem .78rem;
    font-size: .88rem;
  }
  .advisor-form {
    min-height: 64px;
    padding: .58rem;
  }
  .advisor-form input {
    min-height: 44px;
    font-size: 16px; /* evita zoom automático en iOS */
  }
  .advisor-form button {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .advisor-handoff {
    padding: .68rem;
  }

  #eventos-temporada .package-card {
    padding: 1.2rem;
    border-radius: 22px;
  }
  #eventos-temporada .btn {
    width: 100%;
  }

  .catalog-toolbar {
    padding: .8rem;
    border-radius: 17px;
  }
  .catalog-toolbar-side {
    display: grid;
    grid-template-columns: 1fr;
  }
  .catalog-page-size {
    width: 100%;
    justify-content: space-between;
  }
  .catalog-page-size .form-select {
    width: auto;
    flex: 0 0 auto;
  }
  .catalog-results {
    white-space: normal;
  }

  .quote-panel-head {
    gap: .75rem;
  }
  .quote-step {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
  }
  .quote-summary-row {
    gap: .7rem;
  }
  .quote-total strong {
    font-size: 1.4rem;
  }
}

@media (max-width: 420px) {
  .advisor-panel {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
  }

  .advisor-msg {
    max-width: 94%;
    font-size: .86rem;
  }
  .advisor-handoff a {
    flex: 1 1 auto;
  }

  .catalog-pagination .page-link {
    min-width: 38px;
    min-height: 38px;
  }

  .quote-panel {
    padding: 1rem;
  }
  .quote-service-main {
    padding: .85rem;
    gap: .65rem;
  }
  .quote-service-qty {
    padding: .65rem .85rem;
  }
}

@media (max-width: 359.98px) {
  .advisor-panel {
    inset-top: max(70px, calc(env(safe-area-inset-top) + 62px));
  }
  .advisor-head strong { font-size: .92rem; }
  .advisor-head small { font-size: .7rem; }
  .advisor-msg { font-size: .84rem; }

  .catalog-page-size {
    align-items: flex-start;
    flex-direction: column;
  }
  .catalog-page-size .form-select {
    width: 100%;
  }
}

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 600px) {
  .advisor-panel {
    position: fixed;
    top: 70px;
    right: 12px;
    bottom: 12px;
    width: min(430px, calc(100vw - 24px));
    height: auto;
  }
  .advisor-messages { padding: .75rem; }
}