/* ==========================================================================
   El Diablito Restobar — Diseño "Terracota Nocturno"
   Tema único de todo el sitio: fondo marrón oscuro, acento terracota,
   texto crema, tarjetas oscuras con borde sutil, titulares en Playfair
   Display (Cormorant Garamond itálica reservada para el logo del nav y
   los títulos grandes de index.html).
   ========================================================================== */

:root {
  /* Paleta base "Terracota Nocturno" */
  --terra-bg: #1C1410;
  --terra-card-bg: #241A14;
  --terra-accent: #D97A4A;
  --terra-text: #F4EAD9;
  --terra-text-muted: #CBB89A;
  --terra-border: #3A2A20;
  --terra-border-strong: #5A3D2B;

  /* Alias semánticos usados en el resto de este archivo (formularios,
     tarjetas, tablas, botones, badges): todos apuntan a la paleta de
     arriba. Se conservan estos nombres de variable porque ya los usan
     decenas de reglas en todo el sitio — así el remapeo es de un solo
     lugar en vez de editar cada selector. */
  --red-accent: var(--terra-accent);
  --dark: var(--terra-bg);
  --warm-bg: var(--terra-bg);
  --text-body: var(--terra-text);
  --text-secondary: var(--terra-text-muted);
  --text-on-dark: var(--terra-text-muted);
  --divider: var(--terra-border);
  --input-bg: #2A1E17;
  --input-border: var(--terra-border-strong);
  --title-dark: var(--terra-text);
  --bg-placeholder: var(--terra-border);
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* Niveles del Club de Socios (colores propios de cada nivel, no forman
     parte del esquema claro/oscuro) */
  --tier-starter: #6B5A4A;
  --tier-diablito: #7A2E3D;

  /* Tipografías */
  --font-logo: 'Caveat', cursive;
  --font-heading: 'Poppins', sans-serif;
  --font-title: 'Playfair Display', serif;
  --font-body: 'Work Sans', sans-serif;

  /* Espaciado */
  --space-section: 20px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;

  /* Bordes, radios y sombras */
  --radius-input: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Layout */
  --content-max-width: 1140px;
}

/* Reset básico */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--warm-bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Barra de scroll del navegador: se mantiene visible y funcional (para
   poder desplazar la página), pero delgada y sin los botones de flecha
   arriba/abajo del estilo clásico de Windows. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--terra-border-strong) var(--terra-bg);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--terra-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--terra-border-strong);
  border-radius: 999px;
  border: 3px solid var(--terra-bg);
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul {
  list-style: none;
}

/* ==========================================================================
   Tipografía compartida
   ========================================================================== */

.section-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red-accent);
  margin: 0 0 var(--gap-sm);
}

.hero-title {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 40px;
  color: var(--title-dark);
  margin: 0 0 6px;
}

.hero-subtitle {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.card-title {
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--title-dark);
  margin: 0 0 10px;
}

/* ==========================================================================
   Botones e inputs (usados en reservas.html)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-radius: var(--radius-input);
  border: none;
  background: var(--red-accent);
  color: var(--terra-bg);
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.9;
}

/* Íconos oficiales (Waze, Google Maps): se mantiene la proporción
   original de cada archivo para no deformar el logo. */
.btn-icon-img {
  height: 20px;
  width: auto;
  flex-shrink: 0;
  border-radius: 4px;
}

/* Variante secundaria: mismo tamaño/tipografía, fondo transparente con
   borde rojo, para acompañar a un .btn principal (ej. Waze junto a Maps). */
.btn-outline {
  background: transparent;
  color: var(--red-accent);
  border: 2px solid var(--red-accent);
}

.btn-outline:hover {
  background: var(--red-accent);
  color: var(--terra-bg);
  opacity: 1;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Oculta un elemento en escritorio (Waze solo tiene sentido en el celular,
   donde puede abrir la app y navegar de inmediato). Reutilizable. */
@media (min-width: 1024px) {
  .mobile-only {
    display: none;
  }
}

input,
textarea,
select {
  display: block;
  background: var(--input-bg);
  color: var(--title-dark);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}

textarea {
  min-height: 90px;
  resize: vertical;
  font-family: var(--font-body);
}

/* ==========================================================================
   Formularios (reservas.html y cualquier otra página con formulario)
   ========================================================================== */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-body);
}

.form-field-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.form-field-hint code {
  font-family: monospace;
  background: var(--terra-border);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Botón de mostrar/ocultar contraseña, superpuesto dentro del input */
.password-field-wrap {
  position: relative;
}

.password-field-wrap input {
  padding-right: 46px;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
  color: var(--terra-accent);
}

/* Selector de código de país junto al input de teléfono */
.phone-input {
  display: flex;
  align-items: stretch;
}

.phone-country {
  flex: 0 0 100px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--input-bg);
  color: var(--terra-text);
  border: 1px solid var(--input-border);
  border-right: none;
  border-radius: var(--radius-input) 0 0 var(--radius-input);
  padding: 10px 6px 10px 12px;
}

.phone-input input {
  flex: 1 1 0%;
  min-width: 0;
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--gap-md);
}

@media (min-width: 768px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Placeholders de imagen — TODO: reemplazar con fotos reales.
   ========================================================================== */

.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  background: var(--bg-placeholder);
  color: #B36B6B;
  font-family: var(--font-body);
  font-size: 11px;
  text-align: center;
  overflow: hidden;
}

.img-placeholder-icon {
  font-size: 24px;
  opacity: 0.7;
}

/* ==========================================================================
   Header / Nav (compartido en las 8 secciones de navegación)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgb(20, 14, 10);
  border-bottom: 1px solid var(--terra-border-strong);
}

.nav-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-md);
  padding: 14px var(--space-section);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-md);
  margin: 0;
  padding: 0;
}

/* Desktop: logo arriba y menú centrado debajo, ambos bien más grandes, para
   que la franja no se vea con tanto espacio muerto a los costados en
   pantallas anchas. La franja crece de alto para acomodar las dos filas. */
@media (min-width: 1024px) {
  .nav-container {
    max-width: 1400px;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-md);
    padding: 22px calc(var(--space-section) * 1.2) 26px;
  }
}

/* Entre ~481px y 1023px el logo y el nav no caben en una sola fila y el nav
   baja a su propia línea; en ese rango se centra en vez de quedar pegado
   a la izquierda con espacio vacío a la derecha. Debajo de 481px se deja
   el comportamiento original (logo e items alineados a la izquierda). */
@media (min-width: 481px) and (max-width: 1023px) {
  .nav-container nav {
    flex: 1 1 100%;
  }

  .nav-list {
    justify-content: center;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--terra-bg);
  border-top: 1px solid var(--terra-border);
  padding: calc(var(--space-section) * 1.4) var(--space-section);
  text-align: center;
}

.footer-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.footer-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--terra-text);
  margin: 0;
}

.footer-line {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-on-dark);
  margin: var(--gap-sm) 0 0;
}

.footer-line a {
  text-decoration: none;
}

.footer-line a:hover {
  color: var(--red-accent);
}

.footer-whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-whatsapp-icon {
  flex-shrink: 0;
}

.footer-credit {
  margin-top: var(--gap-lg);
}

.footer-credit strong {
  color: var(--red-accent);
}

.footer-email {
  margin-top: 2px;
}

/* ==========================================================================
   Contenedor de sección genérico
   ========================================================================== */

.section {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-section);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero-text {
  padding: calc(var(--space-section) * 1.3) var(--space-section) 0;
}

.hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 2.8 / 1;
  border-radius: var(--radius-lg);
  margin-top: var(--space-section);
  object-fit: cover;
  object-position: center 78%;
}

/* ==========================================================================
   Horarios / Ubicación — 2 columnas en todos los anchos (según diseño)
   ========================================================================== */

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  padding: calc(var(--space-section) * 1.1) 0;
}

.content-block-text {
  font-family: var(--font-body);
  color: var(--text-body);
  font-size: 11px;
  margin: 0;
  line-height: 1.7;
}

/* ==========================================================================
   Tarjetas flotantes (Reservas vive en reservas.html)
   ========================================================================== */

.floating-card {
  background: var(--terra-card-bg);
  border: 1px solid var(--terra-border);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  box-shadow: var(--card-shadow);
  margin-bottom: var(--space-section);
}

/* Modificador: tarjeta con borde de acento, para formularios/contenido que
   necesite destacarse más (ej. Reservas). Se combina con .floating-card. */
.card-outlined {
  border: 2px solid var(--red-accent);
  padding: calc(var(--space-section) * 1.4);
}

/* Espaciado vertical estándar para el contenido de una página (además del
   ancho centrado que ya da .section). Reutilizable en cualquier página. */
.page-section {
  padding-top: calc(var(--space-section) * 1.5);
  padding-bottom: calc(var(--space-section) * 1.5);
}

/* Párrafo breve bajo un .section-label (reutilizable en cualquier página) */
.section-intro {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 0 var(--space-section);
}

/* Botón grande centrado (variante de .btn) */
.btn-lg {
  padding: 14px 40px;
  font-size: 13px;
}

.btn-center {
  text-align: center;
  margin-top: var(--space-section);
}

/* Fila de botones centrada (ej. Google Maps + Waze) — columna en mobile,
   lado a lado desde 480px. */
.btn-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-md);
  margin-top: var(--space-section);
}

@media (min-width: 480px) {
  .btn-group {
    flex-direction: row;
    justify-content: center;
  }
}

/* Ambos botones del mismo ancho solo mientras los dos son visibles
   (Waze se oculta en desktop vía .mobile-only, min-width:1024px). */
@media (min-width: 480px) and (max-width: 1023px) {
  .btn-group > .btn {
    flex: 1 1 0;
  }
}

/* ==========================================================================
   Dirección + mapa (ubicacion.html; reutilizable en otras páginas)
   ========================================================================== */

.address-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: var(--title-dark);
  margin: 0 0 var(--gap-sm);
}

.map-embed {
  display: block;
  width: 100%;
  height: 320px;
  border: none;
  border-radius: var(--radius-lg);
  margin: var(--space-section) 0;
}

@media (min-width: 768px) {
  .map-embed {
    height: 420px;
  }
}

/* ==========================================================================
   Tarjetas de contacto (contacto.html)
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  padding-bottom: var(--space-section);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 0;
  padding: calc(var(--space-section) * 1.4) var(--space-section);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover,
.contact-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.contact-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
}

.contact-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red-accent);
}

.contact-value {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--title-dark);
  word-break: break-word;
}

/* ==========================================================================
   Estados de envío de formulario (reservas.html, contacto.html)
   ========================================================================== */

.form-success {
  display: none;
  text-align: center;
  padding: var(--space-section) 0;
}

.form-success.is-visible {
  display: block;
}

.form-success-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: var(--gap-md);
}

.form-success-title {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--title-dark);
  margin: 0 0 6px;
}

.form-success-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.form-error-message {
  display: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--red-accent);
  text-align: center;
  margin: var(--gap-md) 0 0;
}

.form-error-message.is-visible {
  display: block;
}

.form-success-message {
  display: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: #2E7D32;
  text-align: center;
  margin: var(--gap-md) 0 0;
}

.form-success-message.is-visible {
  display: block;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-link-row {
  text-align: center;
  margin: var(--gap-md) 0 0;
}

.link-inline {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--red-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Panel de administración (admin.html)
   ========================================================================== */

.is-hidden {
  display: none !important;
}

.admin-login-card {
  max-width: 420px;
  margin: 0 auto;
}

.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-md);
  margin-bottom: var(--space-section);
}

.admin-panel-header .section-label {
  margin-bottom: 0;
}

.admin-tabs {
  display: flex;
  gap: var(--gap-sm);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--space-section);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.admin-tab-btn {
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-tab-btn.active {
  color: var(--red-accent);
  border-bottom-color: var(--red-accent);
}

.admin-subsection-title {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--title-dark);
  margin: calc(var(--space-section) * 1.6) 0 var(--gap-md);
  padding-top: var(--space-section);
  border-top: 1px solid var(--divider);
}

.admin-checkbox-field label {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-body);
}

.admin-checkbox-field input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-subsection-title-sm {
  font-size: 14px;
  margin: var(--space-section) 0 var(--gap-sm);
  padding-top: 0;
  border-top: none;
}

.admin-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-section);
}

.admin-checkbox-field-warning {
  background: rgba(217, 122, 74, 0.12);
  border: 1px solid var(--terra-accent);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
}

.admin-checkbox-field-warning label {
  color: var(--terra-text);
  font-weight: 600;
}

.admin-item-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-item-reorder button {
  width: 28px;
  height: 24px;
  padding: 0;
  font-size: 11px;
}

.btn-group-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 10px;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  margin-top: var(--space-section);
}

.admin-item {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
  background: var(--terra-card-bg);
  border: 1px solid var(--terra-border);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
  box-shadow: var(--card-shadow);
}

.admin-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-placeholder);
  flex-shrink: 0;
}

.correo-masivo-imagen-preview {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius-md);
  margin-top: 8px;
  border: 1px solid var(--terra-border);
}

.admin-item-info {
  flex: 1;
  min-width: 180px;
}

.admin-item-title {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--title-dark);
  margin: 0 0 4px;
}

.admin-item-meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  margin: 4px 0 0;
}

.admin-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--bg-placeholder);
  color: var(--red-accent);
}

.admin-badge-promocion {
  background: #FFF3CD;
  color: #8A6100;
}

.admin-badge-evento {
  background: #E3F0FF;
  color: #0B5FA5;
}

.admin-badge-inactivo {
  background: #EEEEEE;
  color: #888888;
}

.admin-empty {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  padding: var(--space-section) 0;
}

.admin-reservas-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-md);
}

.admin-reservas-bulk .form-field {
  flex: 0 0 auto;
  margin: 0;
}

.admin-reservas-bulk .form-error-message {
  flex: 1 1 100%;
}

.admin-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--terra-card-bg);
  border: 1px solid var(--terra-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  font-size: 12px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}

.admin-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: var(--terra-border);
  white-space: nowrap;
}

.admin-table select {
  width: auto;
  min-width: 130px;
}

/* ==========================================================================
   Destacados (destacados.html) — datos reales desde Firestore
   ========================================================================== */

.page-message {
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  padding: calc(var(--space-section) * 1.5) 0;
}

.page-message-block {
  text-align: center;
  padding: calc(var(--space-section) * 1.5) 0;
}

.destacados-section {
  margin-bottom: calc(var(--space-section) * 1.6);
}

.destacados-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

@media (min-width: 700px) {
  .destacados-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .destacados-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.destacado-card {
  display: flex;
  flex-direction: column;
  background: var(--terra-card-bg);
  border: 1px solid var(--terra-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.destacado-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-placeholder);
}

.destacado-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--gap-lg);
}

.destacado-card-title {
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--title-dark);
  margin: 0;
}

.destacado-card-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}

.destacado-card-meta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--red-accent);
  margin: 4px 0 0;
}

/* ==========================================================================
   Club de Socios (club.html) — vitrina de niveles + login/registro
   ========================================================================== */

.club-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  margin: var(--space-section) 0;
}

@media (min-width: 700px) {
  .club-tiers {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
}

.club-tier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--terra-card-bg);
  border: 1px solid var(--terra-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  padding: var(--gap-lg);
  text-align: center;
}

.club-tier-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 28px;
  margin-bottom: var(--gap-sm);
}

.club-tier-icon-img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin: 0 auto var(--gap-sm);
  filter: drop-shadow(0 0 3px rgba(122, 46, 61, 0.6));
}

.club-tier-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--gap-sm);
}

.club-tier-starter .club-tier-name {
  color: var(--tier-starter);
}

.club-tier-diablito .club-tier-name {
  color: var(--tier-diablito);
}

.club-tier-subtitulo {
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 var(--gap-sm);
}

.club-tier-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.club-tier-benefits li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
  padding-left: 22px;
  position: relative;
}

.club-tier-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.club-tier-starter .club-tier-benefits li::before {
  color: var(--tier-starter);
}

.club-tier-diablito .club-tier-benefits li::before {
  color: var(--tier-diablito);
}

.club-tier-note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 640px;
  margin: var(--gap-md) auto 0;
  line-height: 1.5;
}

/* ==========================================================================
   Dashboard del socio (socio.html)
   ========================================================================== */

.socio-block {
  margin-bottom: calc(var(--space-section) * 1.6);
}

.socio-main-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-lg);
  margin-bottom: calc(var(--space-section) * 1.6);
}

@media (min-width: 700px) {
  .socio-main-card {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Banner del 10% de primera compra: colores vivos a propósito (fuera de la
   paleta terracota del resto del sitio) para que se lea como algo especial
   y urgente, no como una tarjeta más del dashboard. */
.descuento-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  border-radius: var(--radius-md);
  padding: var(--gap-lg);
  margin-bottom: calc(var(--space-section) * 1.6);
  background: linear-gradient(135deg, #F5C518, #2ECC71);
  box-shadow: 0 0 28px rgba(245, 197, 24, 0.35), var(--card-shadow);
}

.descuento-banner-urgente {
  background: linear-gradient(135deg, #F5C518, #E8232A);
  box-shadow: 0 0 28px rgba(232, 35, 42, 0.45), var(--card-shadow);
}

.descuento-banner-icono {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
}

.descuento-banner-contenido {
  flex: 1;
  min-width: 0;
}

.descuento-banner-etiqueta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #1C1410;
  opacity: 0.7;
  margin: 0 0 4px;
}

.descuento-banner-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 19px;
  color: #1C1410;
  margin: 0 0 10px;
}

.descuento-banner-contador {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: #FFF8E7;
  background: rgba(28, 20, 16, 0.72);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 10px;
}

.descuento-banner-instruccion {
  font-family: var(--font-body);
  font-size: 12px;
  color: #1C1410;
  opacity: 0.8;
  margin: 0;
}

.socio-nombre {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--title-dark);
  margin: 0;
}

.socio-codigo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--red-accent);
  margin: 4px 0 12px;
}

.nivel-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 20px;
  color: var(--terra-text);
}

.nivel-starter {
  background: var(--tier-starter);
}

.nivel-diablito {
  background: var(--tier-diablito);
}

.nivel-insignia {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.nivel-insignia-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.nivel-insignia-icono-starter {
  color: var(--tier-starter);
}

.nivel-insignia-icono-diablito {
  color: var(--tier-diablito);
}

.nivel-insignia-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(122, 46, 61, 0.6));
}

.nivel-explicacion {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  margin: var(--gap-sm) 0 0;
}

.gracia-banner {
  background: rgba(122, 46, 61, 0.12);
  border: 1px solid var(--tier-diablito);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
  margin-top: var(--gap-sm);
}

.gracia-banner-texto {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--tier-diablito);
  margin: 0;
}

.socio-qr-wrap {
  /* Excepción deliberada: el código QR necesita un fondo blanco real
     (no la paleta oscura del sitio) para que los lectores de cámara lo
     puedan escanear con buen contraste. */
  background: #FFFFFF;
  padding: var(--gap-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  flex-shrink: 0;
  line-height: 0;
}

.progreso-track {
  width: 100%;
  height: 10px;
  background: var(--divider);
  border-radius: 20px;
  overflow: hidden;
}

.progreso-fill {
  height: 100%;
  background: var(--red-accent);
  border-radius: 20px;
}

.progreso-texto {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-body);
  margin: var(--gap-sm) 0 0;
}

.progreso-motivacional {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: #F5D667;
  background: rgba(232, 197, 71, 0.14);
  border-left: 3px solid #E8C547;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin: 10px 0 0;
}

.progreso-motivacional.is-hidden {
  display: none;
}

.beneficios-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.beneficios-list li {
  background: var(--terra-card-bg);
  border: 1px solid var(--terra-border);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
  box-shadow: var(--card-shadow);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-body);
}

.beneficios-list-locked li {
  opacity: 0.55;
  border-style: dashed;
}

.beneficio-usado {
  text-decoration: line-through;
  opacity: 0.6;
}

.beneficio-usado-etiqueta {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.beneficios-nota {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  margin: var(--gap-sm) 0 0;
  line-height: 1.5;
}

.anuncio-card {
  background: var(--terra-card-bg);
  border: 1px solid var(--terra-border);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
  box-shadow: var(--card-shadow);
  margin-bottom: var(--gap-sm);
}

.anuncio-titulo {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--title-dark);
  margin: 0 0 4px;
}

.anuncio-mensaje {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

.admin-badge-vigente {
  background: #E6F4EA;
  color: #1E7E34;
}

.admin-badge-vencido {
  background: #EEEEEE;
  color: #888888;
}

.socio-block-title {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--title-dark);
  margin: 0 0 var(--gap-md);
}

.cumpleanos-card {
  background: var(--red-accent);
  /* Texto oscuro fijo: el fondo es el acento terracota (claro/medio), no
     la paleta oscura del sitio. */
  color: var(--terra-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-section);
  text-align: center;
  box-shadow: var(--card-shadow);
}

.cumpleanos-icono {
  font-size: 40px;
  line-height: 1;
  margin: 0 0 var(--gap-sm);
}

.cumpleanos-titulo {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--terra-bg);
  margin: 0 0 6px;
}

.cumpleanos-mensaje {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--terra-bg);
  opacity: 0.85;
  margin: 0;
}

/* ==========================================================================
   Escaneo de socios (staff.html)
   ========================================================================== */

.staff-scan-card {
  text-align: center;
}

#qr-reader {
  max-width: 340px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.staff-result-icon {
  font-size: 40px;
  line-height: 1;
  margin: 0 0 var(--gap-md);
}

.staff-result-nombre {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--title-dark);
  margin: 0 0 4px;
}

.staff-result-rut {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 4px;
}

.staff-result-mensaje {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-section);
}

.staff-result-recordatorios {
  text-align: left;
  background: rgba(217, 122, 74, 0.12);
  border: 1px solid var(--terra-border-strong);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
  margin: var(--gap-sm) 0 var(--gap-md);
}

.staff-result-recordatorios p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.staff-result-recordatorios p + p {
  margin-top: 6px;
}

/* ==========================================================================
   Términos y Condiciones (legal.html)
   ========================================================================== */

.legal-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  max-width: 720px;
  margin: 0 auto var(--space-section);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--divider);
}

.legal-index a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--red-accent);
  text-decoration: underline;
}

.legal-seccion {
  max-width: 720px;
  margin: 0 auto;
}

.legal-seccion + .legal-seccion {
  margin-top: calc(var(--space-section) * 2);
  padding-top: calc(var(--space-section) * 1.5);
  border-top: 1px solid var(--divider);
}

.legal-titulo-seccion {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--red-accent);
  margin: 0 0 var(--gap-md);
}

.legal-contenido {
  max-width: 720px;
  margin: 0 auto;
}

.legal-intro {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-section);
}

.legal-contenido h3 {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--title-dark);
  margin: var(--space-section) 0 var(--gap-sm);
}

.legal-contenido p {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 var(--gap-md);
}

.legal-contacto {
  margin-top: var(--space-section) !important;
  padding-top: var(--space-section);
  border-top: 1px solid var(--divider);
}

/* ==========================================================================
   Modal genérico (ej. Términos y Condiciones en club.html)
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 14, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-lg);
  z-index: 1000;
}

.modal-content {
  position: relative;
  background: var(--terra-card-bg);
  border: 1px solid var(--terra-border);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 48px var(--space-section) var(--space-section);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
}

.modal-close:hover {
  color: var(--red-accent);
}

/* ==========================================================================
   Cuenta sin ficha de socio (socio.html)
   ========================================================================== */

.socio-no-existe-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-sm);
  margin-top: var(--space-section);
}

/* ==========================================================================
   Eliminar cuenta (socio.html)
   ========================================================================== */

.eliminar-cuenta-link {
  text-align: center;
  margin-top: var(--gap-md);
}

.eliminar-cuenta-link a {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: underline;
}

.eliminar-cuenta-aviso {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 var(--gap-lg);
}

/* ==========================================================================
   Panel admin — pestaña "Contenido de Inicio" (filas editables de
   galería/horarios/reseñas)
   ========================================================================== */

.inicio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--divider);
}

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

.inicio-row-fields {
  flex: 1 1 220px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.inicio-row-field {
  flex: 1 1 140px;
  min-width: 0;
}

.inicio-row-field label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0 0 4px;
}

.inicio-row-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-input);
  flex-shrink: 0;
}

/* ==========================================================================
   "Terracota Nocturno" — tema visual de todo el sitio
   El header/nav (con logo + "El Diablito" en Cormorant Garamond) es el
   mismo en todas las páginas, generado por partials.js. El resto de las
   clases .terra- (hero, historia, galería, horarios, reseñas) son
   exclusivas del contenido propio de index.html.
   ========================================================================== */

/* Cinta "Desde 1984" — inyectada por partials.js en todas las páginas
   públicas (no en admin.html). Técnica de "caja recortada" fija a la
   esquina del viewport: .ribbon-desde-1984-box es un contenedor fijo,
   sin fondo/borde propio, con overflow:hidden, siempre anclado a
   top:0/left:0 del viewport y con z-index por encima del header
   (9999). La cinta en sí (.ribbon-desde-1984) es más grande y rotada
   -45deg dentro de esa caja.

   El logo del nav está centrado (ver ".terra-logo-lockup" / regla de
   .nav-container más abajo), así que la esquina superior izquierda
   queda libre en todos los anchos — la cinta no necesita cruzar el
   logo ni los enlaces del nav en ningún breakpoint.

   Para que no se vea ningún borde recto de la cinta (solo la forma
   diagonal limpia), las 4 esquinas del rectángulo de la cinta (antes
   de rotar) deben quedar en coordenadas x<0 o y<0 respecto al propio
   contenedor — así el recorte del overflow:hidden solo corta en zonas
   sin color, nunca a mitad de un borde recto visible. El tamaño de la
   caja (.ribbon-desde-1984-box) solo debe alcanzar para mostrar el
   texto completo, sin achicarlo. */

.ribbon-desde-1984-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

.ribbon-desde-1984 {
  position: absolute;
  top: 20px;
  left: -60px;
  width: 220px;
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #B0201E;
  transform: rotate(-45deg);
  transform-origin: center;
}

.ribbon-desde-1984-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.5px;
  color: #FBEAE7;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .ribbon-desde-1984-box {
    width: 110px;
    height: 150px;
  }

  .ribbon-desde-1984 {
    top: 16px;
    left: -70px;
    width: 220px;
  }
}

/* Nav */

.terra-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.terra-logo-img {
  height: 64px;
  width: auto;
}

.terra-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--terra-text);
}

.terra-nav-list {
  gap: 18px;
}

.terra-nav-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--terra-text-muted);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.terra-nav-link:hover {
  color: var(--terra-text);
}

.terra-nav-link.active {
  color: var(--terra-text);
  border-bottom-color: var(--terra-accent);
}

/* Ítem "The Fun Room" del nav: letras que van cambiando de color una por
   una (efecto arcoíris/pop-art), para que resalte sobre el resto del
   menú — coherente con la paleta de la página funroom.html. */
.terra-nav-link-funroom {
  font-weight: 700;
}

.nav-rainbow-letter {
  display: inline-block;
  animation: nav-rainbow-cycle 2.4s linear infinite;
}

@keyframes nav-rainbow-cycle {
  0%, 100% { color: #E8232A; }
  33% { color: #3B7DD8; }
  66% { color: #F4D53B; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-rainbow-letter {
    animation: none;
    color: #E8232A;
  }
}

@media (min-width: 1024px) {
  .terra-logo-img {
    height: 80px;
  }

  .terra-logo-text {
    font-size: 26px;
  }

  .terra-nav-link {
    font-size: 13px;
  }
}

/* Hero */

.terra-hero {
  min-height: 460px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.terra-hero-overlay {
  width: 100%;
  background: linear-gradient(180deg, rgba(28, 20, 16, 0.1) 0%, rgba(28, 20, 16, 0.95) 95%);
  padding: 80px 20px 44px;
  text-align: center;
}

.terra-hero-kicker {
  font-family: var(--font-body);
  font-weight: 600;
  /* --hero-subtitulo-escala: mismo mecanismo que --hero-titulo-escala,
     editable desde admin.html ("Pequeño"=0.85, "Mediano"=1, "Grande"=1.15). */
  font-size: calc(clamp(10px, 1.8vw, 13px) * var(--hero-subtitulo-escala, 1));
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--terra-text-muted);
  margin: 24px 0 0;
}

.terra-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  /* --hero-titulo-escala: multiplicador editable desde admin.html
     ("Pequeño"=0.85, "Mediano"=1, "Grande"=1.15), aplicado por inicio.js.
     El tamaño base usa clamp() para escalar con el ancho de pantalla en
     vez de saltar entre valores fijos por breakpoint. */
  font-size: calc(clamp(22px, 6.5vw, 34px) * var(--hero-titulo-escala, 1));
  line-height: 1.25;
  color: var(--terra-text);
  margin: 0 0 28px;
}

.terra-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.terra-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.terra-btn-primary {
  background: var(--terra-accent);
  color: var(--terra-bg);
  border: 1px solid var(--terra-accent);
}

.terra-btn-primary:hover {
  opacity: 0.88;
}

.terra-btn-outline {
  background: transparent;
  color: var(--terra-text);
  border: 1px solid var(--terra-text-muted);
}

.terra-btn-outline:hover {
  border-color: var(--terra-accent);
  color: var(--terra-accent);
}

@media (min-width: 768px) {
  .terra-hero {
    min-height: 560px;
  }

  .terra-hero-title {
    font-size: calc(clamp(28px, 4.2vw, 40px) * var(--hero-titulo-escala, 1));
  }

  .terra-hero-actions {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .terra-hero {
    min-height: 680px;
  }

  .terra-hero-overlay {
    padding: 100px 20px 60px;
  }

  .terra-hero-title {
    font-size: calc(clamp(28px, 2.8vw, 42px) * var(--hero-titulo-escala, 1));
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Secciones genéricas */

.terra-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px var(--space-section);
}

.terra-section-wide {
  max-width: 1200px;
}

.terra-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: var(--terra-text);
  text-align: center;
  margin: 0 0 32px;
}

@media (min-width: 1024px) {
  .terra-section {
    padding: 80px var(--space-section);
  }

  .terra-section-title {
    font-size: 32px;
  }
}

/* Nuestra historia */

.terra-historia-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 768px) {
  .terra-historia-grid {
    /* Columna de la foto más angosta que la del texto, y ambas
       estiradas a la misma altura (align-items: stretch) para que la
       imagen termine exactamente donde termina el texto, sin importar
       cuánto ocupe el texto. */
    grid-template-columns: 1fr 1.4fr;
    gap: 56px;
    align-items: stretch;
  }
}

.terra-historia-foto-wrap {
  /* aspect-ratio solo aplica en mobile (1 columna, sin fila compartida
     con el texto que darle altura); en desktop se sobrescribe abajo. */
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--terra-bg);
}

@media (min-width: 768px) {
  .terra-historia-foto-wrap {
    aspect-ratio: auto;
    height: 100%;
  }
}

.terra-historia-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.terra-historia-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.75;
  text-align: left;
  color: var(--terra-text);
  margin: 0;
}

.terra-historia-text a {
  color: var(--terra-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terra-historia-text a:hover {
  color: var(--terra-text);
}

@media (min-width: 1024px) {
  .terra-historia-text {
    font-size: 24px;
  }
}

/* Galería (carrusel horizontal con scroll-snap) */

.terra-galeria-carousel {
  position: relative;
}

.terra-galeria-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  margin: -2px -2px -8px;
  scrollbar-width: none;
}

.terra-galeria-grid::-webkit-scrollbar {
  display: none;
}

.terra-galeria-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--terra-border);
  flex: 0 0 82%;
  scroll-snap-align: center;
}

@media (min-width: 640px) {
  .terra-galeria-item {
    flex-basis: 45%;
  }
}

@media (min-width: 1024px) {
  .terra-galeria-item {
    flex-basis: calc((100% - 32px) / 3);
  }
}

.terra-galeria-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--terra-bg);
  border: 1px solid var(--terra-text-muted);
  color: var(--terra-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.2s, color 0.2s;
}

.terra-galeria-arrow:hover {
  border-color: var(--terra-accent);
  color: var(--terra-accent);
}

.terra-galeria-arrow-prev {
  left: -8px;
}

.terra-galeria-arrow-next {
  right: -8px;
}

@media (min-width: 768px) {
  .terra-galeria-arrow {
    display: flex;
  }
}

.terra-galeria-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.terra-galeria-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--terra-border-strong);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.terra-galeria-dot:hover {
  background: var(--terra-text-muted);
}

.terra-galeria-dot.is-active {
  background: var(--terra-accent);
  transform: scale(1.3);
}

.terra-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.terra-galeria-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(20, 14, 10, 0.85), transparent);
  color: var(--terra-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 20px 12px 10px;
  margin: 0;
}

/* Horarios / Ubicación */

.terra-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 768px) {
  .terra-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.terra-horarios-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terra-horarios-row {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-md);
  font-family: var(--font-body);
  /* --horarios-texto-escala: mismo mecanismo que --ubicacion-texto-escala,
     editable desde admin.html ("Pequeño"=0.85, "Mediano"=1, "Grande"=1.15). */
  font-size: calc(clamp(11px, 2vw, 14px) * var(--horarios-texto-escala, 1));
  color: var(--terra-text-muted);
  border-bottom: 1px solid var(--terra-border);
  padding-bottom: 8px;
}

.terra-horarios-row span:last-child {
  color: var(--terra-text);
  font-weight: 600;
}

.terra-ubicacion-text {
  font-family: var(--font-body);
  /* --ubicacion-texto-escala: mismo mecanismo que --hero-titulo-escala,
     editable desde admin.html ("Pequeño"=0.85, "Mediano"=1, "Grande"=1.15). */
  font-size: calc(clamp(12px, 2.2vw, 15px) * var(--ubicacion-texto-escala, 1));
  line-height: 1.7;
  color: var(--terra-text-muted);
  margin: 0 0 16px;
}

.terra-map-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--terra-border);
  border-radius: 4px;
}

/* Reseñas */

.terra-resenas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .terra-resenas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.terra-resena-card {
  background: rgba(244, 234, 217, 0.04);
  border: 1px solid var(--terra-border);
  border-radius: 4px;
  padding: 26px 22px;
}

.terra-resena-logo {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  margin: 0 0 14px;
}

.terra-resena-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--terra-text);
  margin: 0 0 16px;
}

.terra-resena-nombre {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--terra-text-muted);
  margin: 0;
}

.terra-resena-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--terra-accent);
  text-decoration: none;
  border: 1px solid var(--terra-border-strong);
  border-radius: 2px;
  padding: 7px 12px;
  margin-top: 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.terra-resena-link:hover {
  border-color: var(--terra-accent);
  color: var(--terra-accent);
}

.terra-resena-link svg {
  flex-shrink: 0;
}