/* ============================================
   Hotel Campestre Resplandor — Cotizador
   Valores extraídos del diseño cotizador.pen
   ============================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  --hotel-green: #2d6a4f;
  --hotel-green-dark: #1b4332;
  --hotel-green-light: #d8f3dc;
  --hotel-gold: #c9a84c;
  --hotel-gray-dark: #1e293b;
  --hotel-gray-text: #334155;
  --hotel-gray-muted: #94a3b8;
  --hotel-gray-border: #e2e8f0;
  --hotel-gray-bg: #f9fafb;
  --hotel-white: #ffffff;
  --hotel-red: #dc2626;
  --hotel-transition: 0.2s ease;
}

/* ---------- Reset & Base ---------- */
.cotizador-wrapper * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cotizador-wrapper {
  font-family: 'DM Sans', sans-serif;
  color: var(--hotel-gray-text);
  line-height: 1.5;
  background: var(--hotel-gray-bg);
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.cotizador-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hotel-green-dark);
  color: var(--hotel-white);
  padding: 0 48px;
  height: 72px;
}

.cotizador-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 18px;
}

.cotizador-header__logo-icon {
  width: 40px;
  height: 40px;
  background: var(--hotel-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--hotel-white);
  flex-shrink: 0;
}

.cotizador-header__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--hotel-white);
  text-decoration: none;
  font-weight: 500;
}

.cotizador-header__phone:hover {
  opacity: 0.85;
}

/* ---------- Hero / Title ---------- */
.cotizador-hero {
  background: linear-gradient(180deg, var(--hotel-green) 0%, var(--hotel-green-dark) 100%);
  padding: 32px 48px;
}

.cotizador-hero__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--hotel-white);
  margin-bottom: 8px;
}

.cotizador-hero__subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  line-height: 1.5;
}

/* ---------- Main Layout (2 columnas) ---------- */
.cotizador-body {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  background: var(--hotel-white);
  padding: 32px 48px;
}

.cotizador-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cotizador-sidebar {
  align-self: start;
  position: sticky;
  top: 20px;
}

/* ---------- Section Headings ---------- */
.cotizador-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--hotel-gray-dark);
  margin-bottom: 16px;
}

.cotizador-section-title__icon {
  color: var(--hotel-green);
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* ---------- Dates Section ---------- */
.cotizador-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cotizador-field-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--hotel-gray-dark);
  margin-bottom: 6px;
}

.cotizador-field-group input,
.cotizador-field-group select,
.cotizador-field-group textarea {
  width: 100%;
  padding: 0 14px;
  height: 44px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  border: 1px solid var(--hotel-gray-border);
  border-radius: 8px;
  color: var(--hotel-gray-text);
  background: var(--hotel-white);
  transition: border-color var(--hotel-transition);
}

.cotizador-field-group textarea {
  height: 80px;
  padding: 12px 14px;
  resize: vertical;
}

.cotizador-field-group input:focus,
.cotizador-field-group select:focus,
.cotizador-field-group textarea:focus {
  outline: none;
  border-color: var(--hotel-green);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.cotizador-field-group input.error,
.cotizador-field-group select.error {
  border-color: var(--hotel-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.cotizador-field-error {
  font-size: 12px;
  color: var(--hotel-red);
  margin-top: 4px;
  display: none;
}

.cotizador-field-error.visible {
  display: block;
}

/* ---------- Date trigger (custom date picker input) ---------- */
.cotizador-date-trigger {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--hotel-white);
  border: 1px solid var(--hotel-gray-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--hotel-gray-text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--hotel-transition), box-shadow var(--hotel-transition);
}

.cotizador-date-trigger__text {
  flex: 1;
  color: #94a3b8;
  font-weight: normal;
}

.cotizador-date-trigger__text:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}

.cotizador-date-trigger--filled .cotizador-date-trigger__text {
  color: var(--hotel-gray-text);
  font-weight: 500;
}

.cotizador-date-trigger__icon {
  font-size: 18px;
  color: #94a3b8;
  margin-left: 8px;
}

.cotizador-date-trigger--filled .cotizador-date-trigger__icon {
  color: var(--hotel-green);
}

.cotizador-date-trigger--filled {
  border: 2px solid var(--hotel-green);
  padding: 0 13px;
}

.cotizador-date-trigger:hover {
  border-color: var(--hotel-green);
}

.cotizador-date-trigger.error {
  border-color: var(--hotel-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* ---------- Date Picker (custom calendar) ---------- */
.cotizador-datepicker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: 'DM Sans', sans-serif;
}

.cotizador-datepicker--open {
  display: block;
}

.cotizador-datepicker__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}

.cotizador-datepicker--mobile .cotizador-datepicker__overlay {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.cotizador-datepicker__sheet {
  position: fixed;
  width: 300px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.cotizador-datepicker--mobile .cotizador-datepicker__sheet {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-radius: 16px 16px 0 0;
  border: none;
  padding: 20px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cotizador-datepicker__modal-header {
  display: none;
  align-items: center;
  justify-content: space-between;
}

.cotizador-datepicker--mobile .cotizador-datepicker__modal-header {
  display: flex;
  padding: 0;
  border-bottom: none;
}

.cotizador-datepicker__modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #1b4332;
}

.cotizador-datepicker__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #334155;
  font-size: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.cotizador-datepicker__calendar {
  display: flex;
  flex-direction: column;
}

.cotizador-datepicker--mobile .cotizador-datepicker__calendar {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  overflow: hidden;
}

.cotizador-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 14px;
  background: #1b4332;
}

.cotizador-datepicker__nav {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
}

.cotizador-datepicker__month-label {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  flex: 1;
  text-align: center;
}

.cotizador-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 12px 12px 4px 12px;
}

.cotizador-datepicker__weekdays span {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}

.cotizador-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 12px 12px 12px;
}

.cotizador-datepicker__day {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #334155;
  border-radius: 50%;
  margin: 1px 0;
}

.cotizador-datepicker__day--empty {
  cursor: default;
  pointer-events: none;
}

.cotizador-datepicker__day--disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

.cotizador-datepicker__day--today {
  border: 1px solid #2d6a4f;
}

.cotizador-datepicker__day--selected,
.cotizador-datepicker__day--selected.cotizador-datepicker__day--today {
  background: #2d6a4f;
  color: #ffffff;
  font-weight: 700;
  border: none;
}

.cotizador-datepicker__day:not(.cotizador-datepicker__day--disabled):not(.cotizador-datepicker__day--selected):hover {
  background: #d8f3dc;
}

.cotizador-datepicker--mobile .cotizador-datepicker__day {
  height: 44px;
  font-size: 14px;
}

.cotizador-datepicker__confirm {
  display: none;
  width: 100%;
  height: 52px;
  background: #2d6a4f;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.cotizador-datepicker--mobile .cotizador-datepicker__confirm {
  display: block;
}

.cotizador-datepicker__confirm:hover {
  background: #1b4332;
}

/* ---------- Room Cards ---------- */
.cotizador-rooms {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cotizador-room-card {
  border: 1px solid var(--hotel-gray-border);
  border-radius: 12px;
  padding: 20px;
  background: var(--hotel-white);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cotizador-room-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cotizador-room-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hotel-green);
}

.cotizador-room-card__delete {
  width: 28px;
  height: 28px;
  background: var(--hotel-gray-bg);
  border: none;
  border-radius: 14px;
  font-size: 14px;
  color: var(--hotel-gray-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--hotel-transition);
}

.cotizador-room-card__delete:hover {
  background: #fef2f2;
  color: var(--hotel-red);
}

.cotizador-room-card__delete:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Room type select */
.cotizador-room-type label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--hotel-gray-dark);
  margin-bottom: 6px;
}

.cotizador-room-type select {
  width: 100%;
  padding: 0 14px;
  height: 44px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  border: 1px solid var(--hotel-gray-border);
  border-radius: 8px;
  color: var(--hotel-gray-dark);
  font-weight: 500;
  background: var(--hotel-white);
  cursor: pointer;
  transition: border-color var(--hotel-transition);
}

.cotizador-room-type select:focus {
  outline: none;
  border-color: var(--hotel-green);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

/* Stepper (counter) — barra unida: [−][valor][+] */
.cotizador-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cotizador-counter-row__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--hotel-gray-dark);
}

.cotizador-counter-row__controls {
  display: flex;
  align-items: center;
}

.cotizador-counter-btn {
  width: 36px;
  height: 36px;
  border: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--hotel-transition);
  line-height: 1;
  padding: 0;
}

.cotizador-counter-btn--minus {
  background: var(--hotel-green-light);
  color: var(--hotel-green);
  border-radius: 8px 0 0 8px;
}

.cotizador-counter-btn--minus:hover:not(:disabled) {
  background: #b7e4c7;
}

.cotizador-counter-btn--plus {
  background: var(--hotel-green);
  color: var(--hotel-white);
  border-radius: 0 8px 8px 0;
}

.cotizador-counter-btn--plus:hover:not(:disabled) {
  background: var(--hotel-green-dark);
}

.cotizador-counter-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cotizador-counter-value {
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--hotel-gray-dark);
  background: var(--hotel-white);
  border-top: 1px solid var(--hotel-gray-border);
  border-bottom: 1px solid var(--hotel-gray-border);
}

/* Room subtotal */
.cotizador-room-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--hotel-gray-border);
}

.cotizador-room-subtotal__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--hotel-gray-text);
}

.cotizador-room-subtotal__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--hotel-green);
}

/* Add room button */
.cotizador-add-room {
  width: 100%;
  height: 48px;
  border: 2px solid var(--hotel-green);
  border-radius: 10px;
  background: rgba(45, 106, 79, 0.03);
  color: var(--hotel-green);
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all var(--hotel-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cotizador-add-room:hover {
  background: rgba(45, 106, 79, 0.08);
}

.cotizador-add-room:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Contact Section ---------- */
.cotizador-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cotizador-contact-grid--2col {
  grid-template-columns: 1fr 1fr;
}

/* ---------- Summary Panel ---------- */
.cotizador-summary {
  border: 1px solid var(--hotel-gray-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.cotizador-summary__header {
  background: linear-gradient(180deg, var(--hotel-green-dark) 0%, var(--hotel-green) 100%);
  color: var(--hotel-white);
  padding: 20px 24px 16px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cotizador-summary__header-icon {
  color: var(--hotel-gold);
}

/* Summary meta (dates, nights, rooms) */
.cotizador-summary-meta {
  background: var(--hotel-green-light);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cotizador-summary-meta__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.cotizador-summary-meta__label {
  color: var(--hotel-gray-text);
  font-weight: 500;
}

.cotizador-summary-meta__value {
  font-weight: 600;
  color: var(--hotel-gray-dark);
}

.cotizador-summary-meta__value--accent {
  color: var(--hotel-green);
  font-weight: 700;
}

/* Summary room breakdown */
.cotizador-summary-breakdown {
  padding: 16px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cotizador-summary-room {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cotizador-summary-room__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hotel-gray-dark);
}

.cotizador-summary-room__detail {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--hotel-gray-text);
}

.cotizador-summary-room__detail-price {
  font-weight: 600;
  color: var(--hotel-gray-dark);
}

.cotizador-summary-room__nights {
  font-size: 12px;
  color: var(--hotel-gray-muted);
}

.cotizador-summary-room__subtotal {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  font-weight: 700;
  color: var(--hotel-gray-dark);
}

.cotizador-summary-divider {
  height: 1px;
  background: var(--hotel-gray-border);
  border: none;
}

/* Summary room breakdown wrapper */
.cotizador-summary-breakdown,
#summary-rooms {
  padding: 16px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Summary total */
.cotizador-summary-total {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cotizador-summary-total__divider {
  height: 2px;
  background: var(--hotel-gold);
  border: none;
  margin: 0;
}

.cotizador-summary-total__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cotizador-summary-total__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--hotel-gray-dark);
}

.cotizador-summary-total__amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--hotel-green);
}

.cotizador-summary-total__currency {
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--hotel-gray-text);
  font-weight: 500;
}

/* Summary includes */
.cotizador-summary-includes {
  background: var(--hotel-green-light);
  padding: 12px 24px 16px;
  border-radius: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cotizador-summary-includes__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--hotel-green);
}

.cotizador-summary-includes__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hotel-gray-text);
}

.cotizador-summary-includes__item::before {
  content: '✓';
  color: var(--hotel-green);
  font-weight: 700;
}

/* ---------- Submit Button ---------- */
.cotizador-submit {
  width: 100%;
  height: 52px;
  background: var(--hotel-green);
  color: var(--hotel-white);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--hotel-transition);
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.25);
}

.cotizador-submit:hover {
  background: var(--hotel-green-dark);
  box-shadow: 0 6px 16px rgba(45, 106, 79, 0.35);
}

.cotizador-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cotizador-submit--loading {
  pointer-events: none;
}

/* ---------- Footer ---------- */
.cotizador-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 56px;
  background: var(--hotel-green-dark);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.67);
}

.cotizador-footer a {
  color: var(--hotel-white);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.cotizador-footer a:hover {
  opacity: 0.85;
}

/* ---------- Confirmation Message ---------- */
.cotizador-confirmation {
  display: none;
  text-align: center;
  padding: 48px 24px;
  background: var(--hotel-white);
}

.cotizador-confirmation.visible {
  display: block;
}

.cotizador-confirmation__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.cotizador-confirmation__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--hotel-gray-dark);
  margin-bottom: 8px;
}

.cotizador-confirmation__text {
  font-size: 14px;
  color: var(--hotel-gray-muted);
  max-width: 400px;
  margin: 0 auto 24px;
}

.cotizador-confirmation__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #25d366;
  color: var(--hotel-white);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background var(--hotel-transition);
}

.cotizador-confirmation__whatsapp:hover {
  background: #1da851;
}

/* ---------- Mobile Floating Bar ---------- */
.cotizador-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--hotel-green-dark);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.19);
  padding: 0 16px;
  height: 60px;
  z-index: 100;
  align-items: center;
  justify-content: space-between;
}

.cotizador-mobile-bar__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cotizador-mobile-bar__label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.67);
}

.cotizador-mobile-bar__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--hotel-white);
}

.cotizador-mobile-bar__btn {
  padding: 0 16px;
  height: 38px;
  background: var(--hotel-gold);
  color: var(--hotel-white);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--hotel-transition);
}

.cotizador-mobile-bar__btn:hover {
  background: #b8963f;
}

/* ---------- Spinner ---------- */
.cotizador-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--hotel-white);
  border-radius: 50%;
  animation: cotizador-spin 0.6s linear infinite;
}

@keyframes cotizador-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE — Tablet (max-width: 900px)
   ============================================ */
@media (max-width: 900px) {
  .cotizador-header {
    padding: 0 24px;
    height: 60px;
  }

  .cotizador-header__brand {
    font-size: 16px;
    gap: 10px;
  }

  .cotizador-header__logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
  }

  .cotizador-hero {
    padding: 24px;
  }

  .cotizador-hero__title {
    font-size: 28px;
  }

  .cotizador-hero__subtitle {
    font-size: 14px;
  }

  .cotizador-body {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 24px;
  }

  .cotizador-sidebar {
    position: static;
  }

  /* Cuando JS mueve el sidebar dentro del form en tablet/mobile, mantenerlo full width */
  .cotizador-form .cotizador-sidebar {
    position: static;
    align-self: stretch;
    width: 100%;
    top: auto;
  }

  .cotizador-rooms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .cotizador-rooms-grid .cotizador-room-card {
    margin-bottom: 0;
  }

  .cotizador-footer {
    padding: 0 24px;
    height: 50px;
    font-size: 11px;
  }

}

/* ============================================
   TABLET ONLY (601-900px) — items "Incluye" en horizontal
   ============================================ */
@media (min-width: 601px) and (max-width: 900px) {
  .cotizador-summary-includes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 14px 24px 16px;
  }

  .cotizador-summary-includes__title {
    flex-basis: 100%;
    margin-bottom: 2px;
  }

  /* Versión alta-especificidad WordPress */
  body .entry-content .cotizador-wrapper .cotizador-summary-includes {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 18px !important;
    padding: 14px 24px 16px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-summary-includes__title {
    flex-basis: 100% !important;
    margin-bottom: 2px !important;
  }
}

/* ============================================
   RESPONSIVE — Mobile (max-width: 600px)
   ============================================ */
@media (max-width: 600px) {
  .cotizador-header {
    padding: 0 14px;
    height: 52px;
    gap: 10px;
  }

  .cotizador-header__brand {
    font-size: 12px;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
  }

  .cotizador-header__logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
  }

  .cotizador-header__phone {
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Ocultar icono flotante de Click to Chat (WhatsApp) en mobile,
     SOLO en la página dedicada /cotiza-tu-estadia/ (no en la landing,
     donde no hay mobile-bar fija y el ícono puede verse) */
  body:not(:has(.cotizador-landing)) .ht-ctc,
  body:not(:has(.cotizador-landing)) .ht-ctc-chat,
  body:not(:has(.cotizador-landing)) #ht-ctc-chat,
  body:not(:has(.cotizador-landing)) .click_to_chat_button,
  body:not(:has(.cotizador-landing)) #click-to-chat,
  body:not(:has(.cotizador-landing)) .ht_ctc_chat_style_1,
  body:not(:has(.cotizador-landing)) .ht_ctc_chat_style_2,
  body:not(:has(.cotizador-landing)) .ht_ctc_chat_style_3,
  body:not(:has(.cotizador-landing)) .ht-ctc-style-1,
  body:not(:has(.cotizador-landing)) .ht-ctc-style-2,
  body:not(:has(.cotizador-landing)) .ht-ctc-style-3,
  body:not(:has(.cotizador-landing)) [id^="ht-ctc"],
  body:not(:has(.cotizador-landing)) [class*="ht-ctc"] {
    display: none !important;
  }

  .cotizador-hero {
    padding: 20px 16px;
  }

  .cotizador-hero__title {
    font-size: 24px;
  }

  .cotizador-hero__subtitle {
    font-size: 13px;
  }

  .cotizador-body {
    padding: 20px 16px;
    gap: 24px;
  }

  .cotizador-form {
    gap: 24px;
  }

  .cotizador-dates {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cotizador-rooms-grid {
    grid-template-columns: 1fr;
  }

  .cotizador-contact-grid--2col {
    grid-template-columns: 1fr;
  }

  .cotizador-summary-total__amount {
    font-size: 24px;
  }

  .cotizador-footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    height: auto;
    padding: 14px 16px;
    margin-bottom: 60px;
  }

  .cotizador-mobile-bar {
    display: flex;
  }

  /* Cuando JS mueve el sidebar dentro del form, resetear posicionamiento sticky */
  .cotizador-form .cotizador-sidebar {
    position: static;
    align-self: stretch;
    width: 100%;
  }
}


/* ================================================================
   WORDPRESS / ASTRA OVERRIDES — alta especificidad
   ----------------------------------------------------------------
   El tema Astra envuelve el cotizador en:
     body.page > .hfeed.site > #content.site-content > .ast-container
       > #primary > main#main > article > .entry-content > .cotizador-wrapper
   Astra aplica padding 3em, max-width 1200px y fondo blanco.
   Estos selectores tienen mayor especificidad que cualquier regla
   de Astra y SOLO se activan cuando el cotizador está presente.
   ================================================================ */

/* ---------- Romper contenedores padre de Astra ---------- */
/* Versión moderna con :has() — Chrome 105+, Safari 15.4+, Firefox 121+ */
body .ast-container:has(.cotizador-wrapper),
body #content:has(.cotizador-wrapper),
body #primary:has(.cotizador-wrapper),
body .site-main:has(.cotizador-wrapper),
body main#main:has(.cotizador-wrapper),
body article:has(.cotizador-wrapper),
body .entry-content:has(.cotizador-wrapper) {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Fallback sin :has() — apunta a TODOS los contenedores en cualquier .page
   donde se haya embebido el cotizador. Se aplica a la página entera. */
body.page .ast-container,
body.page #content,
body.page #primary,
body.page .site-main,
body.page main#main,
body.page article.post,
body.page article.page,
body.page .entry-content {
  /* Solo aplican si la página contiene el cotizador (slug específico) */
}

/* Fallback por slug de página: forzar reset en /cotiza-tu-estadia/ */
body.page-id-cotiza .ast-container,
body.page-id-cotiza #content,
body.page-id-cotiza #primary,
body.page-id-cotiza .site-main,
body.page-id-cotiza main#main,
body.page-id-cotiza article,
body.page-id-cotiza .entry-content {
  max-width: 100% !important;
  width: 100% !important;
}

/* Eliminar padding del entry-content que envuelve directamente al wrapper.
   El margin se maneja en la regla del wrapper principal (margin: 0 auto). */
body .entry-content > .cotizador-wrapper {
  padding: 0 !important;
}

/* Quitar el word-wrap que rompe layouts en .entry-content */
body .entry-content .cotizador-wrapper,
body .entry-content .cotizador-wrapper * {
  word-wrap: normal !important;
  overflow-wrap: normal !important;
}

/* ---------- Wrapper principal ---------- */
body .entry-content .cotizador-wrapper,
html body .cotizador-wrapper {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background-color: #f1f5f9 !important;
  background: #f1f5f9 !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #334155 !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Font-family DM Sans en TODO el cotizador */
body .entry-content .cotizador-wrapper,
body .entry-content .cotizador-wrapper *,
body .entry-content .cotizador-wrapper *::before,
body .entry-content .cotizador-wrapper *::after {
  font-family: 'DM Sans', sans-serif !important;
  box-sizing: border-box !important;
}

/* Excepción: los íconos de Lucide necesitan su propia font-family
   para renderizarse correctamente (de lo contrario salen como cuadrados). */
body .entry-content .cotizador-wrapper [class^="icon-"],
body .entry-content .cotizador-wrapper [class*=" icon-"],
body .entry-content .cotizador-wrapper [class^="icon-"]::before,
body .entry-content .cotizador-wrapper [class*=" icon-"]::before {
  font-family: 'lucide' !important;
}

/* La regla del <select> se define MÁS ABAJO, después del reset general
   de inputs, para evitar que el background: #ffffff del reset sobreescriba
   el background-image (flecha SVG). */

/* ---------- Header ---------- */
body .entry-content .cotizador-wrapper .cotizador-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #1b4332 !important;
  background-color: #1b4332 !important;
  color: #ffffff !important;
  padding: 0 48px !important;
  height: 72px !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

body .entry-content .cotizador-wrapper .cotizador-header__brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-header__logo-icon {
  width: 40px !important;
  height: 40px !important;
  background: #c9a84c !important;
  background-color: #c9a84c !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-header__phone {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- Hero ---------- */
body .entry-content .cotizador-wrapper .cotizador-hero {
  background: linear-gradient(180deg, #2d6a4f 0%, #1b4332 100%) !important;
  background-color: #1b4332 !important;
  padding: 32px 48px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body .entry-content .cotizador-wrapper .cotizador-hero__title {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

body .entry-content .cotizador-wrapper .cotizador-hero__subtitle {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 600px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Body (2 columnas) ---------- */
body .entry-content .cotizador-wrapper .cotizador-body {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 32px !important;
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  padding: 32px 48px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- Section titles ---------- */
body .entry-content .cotizador-wrapper .cotizador-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-section-title__icon {
  color: #2d6a4f !important;
  font-size: 18px !important;
}

/* ---------- Inputs / Selects / Textarea ---------- */
body .entry-content .cotizador-wrapper input[type="text"],
body .entry-content .cotizador-wrapper input[type="email"],
body .entry-content .cotizador-wrapper input[type="tel"],
body .entry-content .cotizador-wrapper input[type="date"],
body .entry-content .cotizador-wrapper input[type="number"],
body .entry-content .cotizador-wrapper textarea {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 14px !important;
  height: 44px !important;
  font-size: 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  line-height: normal !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  outline: none !important;
}

/* <select> — definido APARTE del reset de inputs para que el background
   shorthand con la flecha SVG no se vea sobreescrito por background: #ffffff. */
body .entry-content .cotizador-wrapper select {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 36px 0 14px !important;
  height: 44px !important;
  font-size: 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  box-shadow: none !important;
  line-height: normal !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23334155' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center / 12px !important;
}

body .entry-content .cotizador-wrapper textarea {
  height: 80px !important;
  padding: 12px 14px !important;
  resize: vertical !important;
}

body .entry-content .cotizador-wrapper input:focus,
body .entry-content .cotizador-wrapper select:focus,
body .entry-content .cotizador-wrapper textarea:focus {
  outline: none !important;
  border-color: #2d6a4f !important;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1) !important;
}

body .entry-content .cotizador-wrapper .cotizador-field-group label,
body .entry-content .cotizador-wrapper .cotizador-room-type label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

/* Dates grid */
body .entry-content .cotizador-wrapper .cotizador-dates {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* ---------- Date trigger (WP overrides) ---------- */
body .entry-content .cotizador-wrapper .cotizador-date-trigger {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  cursor: pointer !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
}

body .entry-content .cotizador-wrapper .cotizador-date-trigger--filled {
  border: 2px solid #2d6a4f !important;
  padding: 0 13px !important;
}

body .entry-content .cotizador-wrapper .cotizador-date-trigger:hover {
  border-color: #2d6a4f !important;
}

body .entry-content .cotizador-wrapper .cotizador-date-trigger.error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

body .entry-content .cotizador-wrapper .cotizador-date-trigger__text {
  flex: 1 !important;
  color: #94a3b8 !important;
  font-weight: normal !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
}

body .entry-content .cotizador-wrapper .cotizador-date-trigger__text:empty::before {
  content: attr(data-placeholder) !important;
  color: #94a3b8 !important;
}

body .entry-content .cotizador-wrapper .cotizador-date-trigger--filled .cotizador-date-trigger__text {
  color: #334155 !important;
  font-weight: 500 !important;
}

body .entry-content .cotizador-wrapper .cotizador-date-trigger__icon {
  font-size: 18px !important;
  color: #94a3b8 !important;
  margin-left: 8px !important;
}

body .entry-content .cotizador-wrapper .cotizador-date-trigger--filled .cotizador-date-trigger__icon {
  color: #2d6a4f !important;
}

/* ---------- Date Picker (lives outside .cotizador-wrapper, attached to body) ---------- */
html body #cotizador-datepicker {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99999 !important;
  font-family: 'DM Sans', sans-serif !important;
}

html body #cotizador-datepicker.cotizador-datepicker--open {
  display: block !important;
}

html body #cotizador-datepicker .cotizador-datepicker__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
  cursor: default !important;
}

html body #cotizador-datepicker.cotizador-datepicker--mobile .cotizador-datepicker__overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  pointer-events: auto !important;
}

html body #cotizador-datepicker .cotizador-datepicker__sheet {
  position: fixed !important;
  width: 300px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body #cotizador-datepicker.cotizador-datepicker--mobile .cotizador-datepicker__sheet {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  border-radius: 16px 16px 0 0 !important;
  border: none !important;
  padding: 20px 20px 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

html body #cotizador-datepicker .cotizador-datepicker__modal-header {
  display: none !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body #cotizador-datepicker.cotizador-datepicker--mobile .cotizador-datepicker__modal-header {
  display: flex !important;
  padding: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
}

html body #cotizador-datepicker .cotizador-datepicker__modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1b4332 !important;
  font-family: 'DM Sans', sans-serif !important;
}

html body #cotizador-datepicker .cotizador-datepicker__close {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: #334155 !important;
  font-size: 24px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html body #cotizador-datepicker .cotizador-datepicker__calendar {
  display: flex !important;
  flex-direction: column !important;
}

html body #cotizador-datepicker.cotizador-datepicker--mobile .cotizador-datepicker__calendar {
  border: 1px solid #d1d5db !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html body #cotizador-datepicker .cotizador-datepicker__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 44px !important;
  padding: 0 14px !important;
  background: #1b4332 !important;
}

html body #cotizador-datepicker .cotizador-datepicker__nav {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: #ffffff !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html body #cotizador-datepicker .cotizador-datepicker__month-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  flex: 1 !important;
  text-align: center !important;
  font-family: 'DM Sans', sans-serif !important;
}

html body #cotizador-datepicker .cotizador-datepicker__weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  padding: 12px 12px 4px 12px !important;
}

html body #cotizador-datepicker .cotizador-datepicker__weekdays span {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-align: center !important;
  font-family: 'DM Sans', sans-serif !important;
}

html body #cotizador-datepicker .cotizador-datepicker__grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  padding: 0 12px 12px 12px !important;
}

html body #cotizador-datepicker .cotizador-datepicker__day {
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #334155 !important;
  border-radius: 50% !important;
  margin: 1px 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html body #cotizador-datepicker .cotizador-datepicker__day--empty {
  cursor: default !important;
  pointer-events: none !important;
}

html body #cotizador-datepicker .cotizador-datepicker__day--disabled {
  color: #d1d5db !important;
  cursor: not-allowed !important;
}

html body #cotizador-datepicker .cotizador-datepicker__day--today {
  border: 1px solid #2d6a4f !important;
}

html body #cotizador-datepicker .cotizador-datepicker__day--selected,
html body #cotizador-datepicker .cotizador-datepicker__day--selected.cotizador-datepicker__day--today {
  background: #2d6a4f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
}

html body #cotizador-datepicker .cotizador-datepicker__day:not(.cotizador-datepicker__day--disabled):not(.cotizador-datepicker__day--selected):not(.cotizador-datepicker__day--empty):hover {
  background: #d8f3dc !important;
}

html body #cotizador-datepicker.cotizador-datepicker--mobile .cotizador-datepicker__day {
  height: 44px !important;
  font-size: 14px !important;
}

html body #cotizador-datepicker .cotizador-datepicker__confirm {
  display: none !important;
  width: 100% !important;
  height: 52px !important;
  background: #2d6a4f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html body #cotizador-datepicker.cotizador-datepicker--mobile .cotizador-datepicker__confirm {
  display: block !important;
}

html body #cotizador-datepicker .cotizador-datepicker__confirm:hover {
  background: #1b4332 !important;
}

/* ---------- Room cards ---------- */
body .entry-content .cotizador-wrapper .cotizador-room-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

body .entry-content .cotizador-wrapper .cotizador-room-card__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #2d6a4f !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-room-card__delete {
  width: 28px !important;
  height: 28px !important;
  background: #f9fafb !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ---------- Counter buttons (+/-) ---------- */
body .entry-content .cotizador-wrapper .cotizador-counter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body .entry-content .cotizador-wrapper .cotizador-counter-row__controls {
  display: flex !important;
  align-items: center !important;
}

body .entry-content .cotizador-wrapper .cotizador-counter-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: 'DM Sans', sans-serif !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body .entry-content .cotizador-wrapper .cotizador-counter-btn--minus {
  background: #d8f3dc !important;
  background-color: #d8f3dc !important;
  color: #2d6a4f !important;
  border-radius: 8px 0 0 8px !important;
}

body .entry-content .cotizador-wrapper .cotizador-counter-btn--plus {
  background: #2d6a4f !important;
  background-color: #2d6a4f !important;
  color: #ffffff !important;
  border-radius: 0 8px 8px 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-counter-btn--minus:hover:not(:disabled) {
  background: #b7e4c7 !important;
  background-color: #b7e4c7 !important;
  color: #2d6a4f !important;
}

body .entry-content .cotizador-wrapper .cotizador-counter-btn--plus:hover:not(:disabled) {
  background: #1b4332 !important;
  background-color: #1b4332 !important;
  color: #ffffff !important;
}

body .entry-content .cotizador-wrapper .cotizador-counter-value {
  width: 48px !important;
  height: 36px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Room subtotal */
body .entry-content .cotizador-wrapper .cotizador-room-subtotal {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 12px !important;
  border-top: 1px solid #e2e8f0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-room-subtotal__price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2d6a4f !important;
}

/* ---------- Botón "Agregar habitación" ---------- */
body .entry-content .cotizador-wrapper .cotizador-add-room {
  width: 100% !important;
  height: 48px !important;
  border: 2px solid #2d6a4f !important;
  border-radius: 10px !important;
  background: rgba(45, 106, 79, 0.03) !important;
  background-color: rgba(45, 106, 79, 0.03) !important;
  color: #2d6a4f !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body .entry-content .cotizador-wrapper .cotizador-add-room:hover {
  background: rgba(45, 106, 79, 0.08) !important;
  background-color: rgba(45, 106, 79, 0.08) !important;
  color: #2d6a4f !important;
}

/* ---------- Sidebar / Summary ---------- */
body .entry-content .cotizador-wrapper .cotizador-sidebar {
  align-self: start !important;
  position: sticky !important;
  top: 20px !important;
}

body .entry-content .cotizador-wrapper .cotizador-summary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

body .entry-content .cotizador-wrapper .cotizador-summary__header {
  background: linear-gradient(180deg, #1b4332 0%, #2d6a4f 100%) !important;
  background-color: #1b4332 !important;
  color: #ffffff !important;
  padding: 20px 24px 16px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-summary__header-icon {
  color: #c9a84c !important;
}

body .entry-content .cotizador-wrapper .cotizador-summary-meta,
body .entry-content .cotizador-wrapper .cotizador-summary-includes {
  background: #d8f3dc !important;
  background-color: #d8f3dc !important;
}

body .entry-content .cotizador-wrapper .cotizador-summary-total__amount {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #2d6a4f !important;
}

body .entry-content .cotizador-wrapper .cotizador-summary-total__divider {
  height: 2px !important;
  background: #c9a84c !important;
  background-color: #c9a84c !important;
  border: none !important;
  margin: 0 !important;
}

/* ---------- Botón submit ---------- */
body .entry-content .cotizador-wrapper .cotizador-submit {
  width: 100% !important;
  height: 52px !important;
  background: #2d6a4f !important;
  background-color: #2d6a4f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.25) !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body .entry-content .cotizador-wrapper .cotizador-submit:hover {
  background: #1b4332 !important;
  background-color: #1b4332 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(45, 106, 79, 0.35) !important;
}

/* ---------- Ocultar secciones del formulario al mostrar la confirmación ----------
   Necesario porque las reglas anteriores aplican `display: grid/flex !important`
   al .cotizador-body / .cotizador-submit, así que el JS no puede ocultarlos
   con inline styles — usa la clase .hidden y estas reglas !important. */
body .entry-content .cotizador-wrapper .cotizador-body.hidden,
body .entry-content .cotizador-wrapper .cotizador-hero.hidden,
body .entry-content .cotizador-wrapper .cotizador-submit.hidden,
body .entry-content .cotizador-wrapper .cotizador-mobile-bar.hidden {
  display: none !important;
}

/* ---------- Confirmación ---------- */
body .entry-content .cotizador-wrapper .cotizador-confirmation {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  text-align: center !important;
  padding: 48px 24px !important;
  margin: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-confirmation__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-confirmation__text {
  font-size: 14px !important;
  color: #94a3b8 !important;
  max-width: 400px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-confirmation__whatsapp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: #25d366 !important;
  background-color: #25d366 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  text-shadow: none !important;
  margin: 0 !important;
}

body .entry-content .cotizador-wrapper .cotizador-confirmation__whatsapp:hover {
  background: #1da851 !important;
  background-color: #1da851 !important;
  color: #ffffff !important;
}

/* ---------- Footer ---------- */
body .entry-content .cotizador-wrapper .cotizador-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 48px !important;
  height: 56px !important;
  background: #1b4332 !important;
  background-color: #1b4332 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.67) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body .entry-content .cotizador-wrapper .cotizador-footer a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  background: transparent !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body .entry-content .cotizador-wrapper .cotizador-header {
    padding: 0 24px !important;
    height: 60px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-header__logo-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-hero {
    padding: 24px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-hero__title {
    font-size: 28px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-body {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 24px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-sidebar {
    position: static !important;
  }
  /* Cuando JS mueve el sidebar dentro del form en mobile/tablet, mantenerlo full width */
  body .entry-content .cotizador-wrapper .cotizador-form .cotizador-sidebar {
    position: static !important;
    align-self: stretch !important;
    width: 100% !important;
    top: auto !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-footer {
    padding: 0 24px !important;
    height: 50px !important;
    font-size: 11px !important;
  }

}

@media (max-width: 600px) {
  body .entry-content .cotizador-wrapper .cotizador-header {
    padding: 0 14px !important;
    height: 52px !important;
    gap: 10px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-header__logo-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-header__brand {
    font-size: 12px !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    line-height: 1.2 !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-header__phone {
    font-size: 11px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-hero {
    padding: 20px 16px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-hero__title {
    font-size: 24px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-body {
    padding: 20px 16px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-dates {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body .entry-content .cotizador-wrapper .cotizador-footer {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    height: auto !important;
    padding: 14px 16px !important;
    margin-bottom: 60px !important;
  }

}

/* ============================================
   LANDING — contexto diferenciado
   Cuando el cotizador está embebido en la landing (wrapper .cotizador-landing),
   se neutralizan comportamientos pensados para la página dedicada /cotiza-tu-estadia/
   ============================================ */

/* Mobile-bar: en la landing no debe flotar sobre otras secciones de la página */
.cotizador-landing .cotizador-mobile-bar {
  display: none !important;
}

/* Eliminar el margin-bottom compensatorio de la mobile-bar fija */
.cotizador-landing .cotizador-body,
.cotizador-landing body .entry-content .cotizador-wrapper .cotizador-footer {
  margin-bottom: 0 !important;
}