@font-face {
  font-family: 'Windsor Elongated Regular';
  src: url('../fonts/Windsor-Elongated-Regular.woff') format('woff'),
       url('../fonts/Windsor-Elongated-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --pw-black: #0b0a09;
  --pw-yellow: #fad905;
  --pw-yellow-soft: #ffe45c;
  --pw-red: #91180a;
  --pw-red-dark: #6e1208;
  --pw-cream: #fff6ef;
  --pw-dark: #241b14;
  --pw-brown: #8a7a63;
  --pw-border: #ecdfc9;
  --pw-kv: url('/img/kv-pollo-week.jpg');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--pw-cream);
  color: var(--pw-dark);
  line-height: 1.5;
}

.ms-hero {
  padding: 64px 24px 56px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 60%, #000 100%),
    var(--pw-kv);
  background-size: cover;
  background-position: center 30%;
  border-bottom: 4px solid var(--pw-red);
}

.ms-logo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--pw-yellow);
  margin-bottom: 16px;
}

.ms-badge {
  display: block;
  color: var(--pw-yellow-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ms-hero h1 {
  font-family: 'Windsor Elongated Regular', 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--pw-yellow);
}

.ms-city-label {
  display: block;
  color: var(--pw-yellow-soft);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.ms-city {
  font-family: 'Windsor Elongated Regular', 'Segoe UI', sans-serif;
  font-weight: 400;
  margin: 0 0 16px;
  color: var(--pw-yellow-soft);
  text-transform: uppercase;
  font-size: 2.2rem;
  line-height: 1.1;
}

.ms-subtitle {
  max-width: 480px;
  margin: 0 auto;
  color: #f1e9dc;
  font-size: 1.05rem;
}

/* Plain image-only banner (hero block with mostrar_texto:false) — used on
   the calificación landing, whose badge/name/city/subtitle move into
   .ms-hero-info below instead of sitting on top of the image. No dark
   overlay here (unlike .ms-hero) since there's no text over it to protect. */
.ms-hero-plain {
  padding: 0;
  background-image: var(--pw-kv);
  background-size: cover;
  background-position: center 30%;
}

.ms-hero-info {
  padding: 40px 24px 8px;
  text-align: center;
  background: var(--pw-cream);
}

.ms-hero-info h1 {
  font-family: 'Windsor Elongated Regular', 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--pw-yellow);
  text-transform: uppercase;
}

.ms-badge-light { color: var(--pw-red); }
.ms-city-label-light { color: var(--pw-red); }
.ms-city-light { color: var(--pw-yellow); }
.ms-subtitle-light { color: var(--pw-dark); }

.ms-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
}

.ms-section h2 {
  font-family: 'Windsor Elongated Regular', 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--pw-yellow);
  text-transform: uppercase;
  font-size: 1.8rem;
  margin: 0 0 24px;
  text-align: center;
}

.ms-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.ms-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--pw-border);
}

.ms-info {
  background: #fff;
  border: 1px solid var(--pw-border);
  border-radius: 12px;
  padding: 8px 24px;
}

.ms-info-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pw-border);
  flex-wrap: wrap;
}

.ms-info-row:last-child { border-bottom: none; }

.ms-info-row strong {
  color: var(--pw-red);
  font-size: 0.9rem;
}

.ms-info-row span {
  color: var(--pw-dark);
  text-align: right;
}

.ms-cta {
  background: var(--pw-yellow);
  padding: 56px 24px 72px;
  text-align: center;
}

/* The 72px bottom padding is sized to leave room below the CTA button —
   without one (no texto_boton/link_boton set), it just reads as a big
   empty gap before whatever comes next. */
.ms-cta-no-btn { padding-bottom: 32px; }

/* Two CTA bands back to back (e.g. the WhatsApp CTA followed by the
   Colombiana one) would otherwise stack a full top+bottom padding gap
   between them — close that up since they already share a background. */
.ms-cta + .ms-cta { padding-top: 0; }

.ms-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.ms-cta-logo {
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  border-radius: 10px;
}

.ms-cta h2 {
  font-family: 'Windsor Elongated Regular', 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--pw-red);
  text-transform: uppercase;
  font-size: 2rem;
  margin: 0 0 12px;
}

.ms-cta p {
  color: var(--pw-red);
  margin: 0 0 28px;
}

.ms-btn {
  display: inline-block;
  background: var(--pw-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ms-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(145, 24, 10, 0.45); }

.ms-footer {
  font-family: 'Windsor Elongated Regular', 'Segoe UI', sans-serif;
  text-align: center;
  padding: 24px;
  background: var(--pw-black);
  color: var(--pw-yellow);
  font-size: 1rem;
}

.ms-footer-credit {
  display: block;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  margin-top: 6px;
  color: var(--pw-yellow);
  opacity: 0.8;
  font-size: 0.78rem;
  text-decoration: none;
}
.ms-footer-credit:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 560px) {
  .ms-hero h1 { font-size: 2.2rem; }
  .ms-info-row { flex-direction: column; gap: 4px; }
  .ms-info-row span { text-align: left; }

  /* On a narrow/tall phone screen, a fixed 90vh height + background-size:
     cover zooms the (very wide) banner image in hard enough to crop the
     text right off both edges. Matching the box to the image's own aspect
     ratio instead means "cover" needs no cropping at all — the whole
     banner fits. min-height needs !important to beat the block's own
     inline style (altura:90vh). */
  .ms-hero-plain {
    min-height: auto !important;
    aspect-ratio: 1920 / 1000;
  }
}

/* Rating form block (calificacion_form) — used on /r/:slug/calificar */

.rt-form-section {
  max-width: 460px;
  text-align: center;
}

.rt-form-subtitle {
  color: var(--pw-dark);
  font-size: 0.95rem;
  margin: -12px 0 28px;
}

.rt-field { margin-bottom: 20px; text-align: left; }

.rt-label, .rt-field label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 8px;
  text-align: center;
  color: var(--pw-dark);
}

.rt-field input[type="tel"],
.rt-field input[type="text"],
.rt-field input[type="number"],
.rt-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--pw-border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--pw-dark);
}

.rt-field input[type="tel"]:focus,
.rt-field input[type="text"]:focus,
.rt-field input[type="number"]:focus,
.rt-field textarea:focus { outline: none; border-color: var(--pw-red); }

.rt-field textarea { resize: vertical; }

/* Searchable restaurant picker on the Form Ventas page (ventas_form block). */
.vf-combo { position: relative; }

.vf-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--pw-border);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(36, 27, 20, 0.15);
  text-align: left;
}

.vf-combo-list[hidden] { display: none; }

.vf-combo-option {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--pw-dark);
}

.vf-combo-option small {
  display: inline;
  margin: 0 0 0 6px;
  font-size: 0.78rem;
  color: var(--pw-brown);
}

.vf-combo-option:hover,
.vf-combo-option.is-active { background: var(--pw-cream); }

.vf-combo-empty {
  padding: 10px;
  font-size: 0.88rem;
  color: var(--pw-brown);
}

.rt-checkbox-field { text-align: center; }

.rt-checkbox-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--pw-dark);
  text-align: left;
  cursor: pointer;
}

.rt-checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  accent-color: var(--pw-red);
  flex-shrink: 0;
}

.rt-checkbox-label a { color: var(--pw-red); }

.rt-field small {
  display: block;
  color: var(--pw-brown);
  font-size: 0.78rem;
  margin-bottom: 6px;
  text-align: center;
}

.rt-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.rt-star {
  background: none;
  border: none;
  font-size: 2.4rem;
  line-height: 1;
  color: #d9cbb5;
  cursor: pointer;
  padding: 2px;
  transition: transform 0.1s ease, color 0.15s ease;
}

.rt-star:hover { transform: scale(1.1); }
.rt-star.is-active { color: var(--pw-yellow); text-shadow: 0 0 0 var(--pw-yellow); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }

.rt-upload-buttons {
  display: flex;
  gap: 10px;
}

.rt-upload-btn {
  flex: 1;
  padding: 12px 10px;
  border: 1.5px solid var(--pw-border);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--pw-red);
  color: #fff;
  cursor: pointer;
}

.rt-upload-btn-secondary {
  background: #fff;
  color: var(--pw-dark);
}

.rt-upload-btn:hover { opacity: 0.9; }

.rt-factura-preview {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1.5px solid var(--pw-border);
  border-radius: 10px;
  background: #fff;
}

.rt-factura-preview:not([hidden]) { display: flex; }

.rt-factura-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

.rt-factura-preview span {
  font-size: 0.8rem;
  color: var(--pw-dark);
  word-break: break-all;
}

.rt-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--pw-red);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.rt-btn:hover { background: var(--pw-red-dark); }
.rt-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.rt-alert {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
}
.rt-alert.success { background: #e6f4ea; color: #1e7b34; border: 1px solid #b7e0c3; }
.rt-alert.error { background: #fdecea; color: #b3261e; border: 1px solid #f4c7c3; }

/* `hidden` alone isn't enough once these classes set their own `display` —
   an author rule with a `display` value always beats the UA stylesheet's
   `[hidden] { display: none }`, regardless of selector order, so each class
   below needs its own [hidden] override or the popup shows up permanently. */
.rt-modal-overlay[hidden],
.rt-modal-actions[hidden],
.rt-modal-edit[hidden] {
  display: none;
}

.rt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 10, 9, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.rt-modal {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.rt-modal h3 {
  font-family: 'Windsor Elongated Regular', 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--pw-red);
  font-size: 1.3rem;
  margin: 0 0 12px;
}

.rt-modal p {
  color: var(--pw-dark);
  font-size: 0.95rem;
  margin: 0 0 20px;
}

.rt-modal-actions {
  display: flex;
  gap: 10px;
}

.rt-modal-actions .rt-btn { flex: 1; }

.rt-btn-secondary {
  background: #fff;
  color: var(--pw-red);
  border: 1.5px solid var(--pw-red);
}
.rt-btn-secondary:hover { background: #fdecea; }

.rt-modal-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.rt-modal-edit label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--pw-dark);
}

.rt-modal-edit input[type="number"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--pw-border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--pw-dark);
}
.rt-modal-edit input[type="number"]:focus { outline: none; border-color: var(--pw-red); }