/* Vertical 17 — Aspecto claro (override sobre V16) */
/* Cárgalo DESPUÉS de style.css para mantener la parte operativa */

:root{
  --bg: #f6f7f8 !important;       /* gris muy claro */
  --ink: #111111 !important;      /* texto oscuro */
  --accent: #f2b705 !important;   /* botón idioma / acento */
  --muted: #555f6d !important;

  /* Tarjetas claras */
  --card: #ffffff !important;
  --card-bd: #e6e8ec !important;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.08);
}

/* Fondo y tipografía */
html, body{
  background: var(--bg) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mantener barra superior oscura con MISMA transparencia */
.topbar{
  background: rgba(5,7,10,.7) !important;
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.topbar a{ color:#fff !important; }

/* Héroe más neutro en claro */
.hero{
  background: linear-gradient(180deg,#f7f8fa 0%,#f3f4f6 60%,#f6f7f8 100%) !important;
}

/* Tarjetas, tablas, inputs */
.card, .contact-card, .calendar, .cart{
  background: var(--card) !important;
  border: 1px solid var(--card-bd) !important;
  box-shadow: var(--shadow) !important;
}
.cart-table th, .cart-table td{ border-bottom:1px solid var(--card-bd) !important; }
.input{
  background:#fff !important; color:#111 !important; border:1px solid var(--card-bd) !important;
}

/* Botones */
.btn{ background:#111 !important; color:#fff !important; }
.btn.ghost{ background:transparent !important; color:#111 !important; border:1px solid #111 !important; }

/* Botón idioma amarillo */
.lang-toggle{
  background:#FFD400 !important; color:#111 !important; border:1px solid rgba(0,0,0,.08) !important;
}

/* Footer claro */
.foot{ color:#444 !important; background:#f3f4f6 !important; border-top:1px solid var(--card-bd) !important; }

/* Badges y pills más sutiles en claro */
.badge{ background:#f0f2f5 !important; border:1px solid var(--card-bd) !important; }
.pill{ border:1px solid var(--card-bd) !important; }

/* Imagen de rotor/carrusel respetando una pantalla */
.rotor img{ max-height: calc(100vh - 240px) !important; aspect-ratio: 4/3 !important; object-fit: cover; }

/* Enlaces por defecto */
a{ color:#0e4ecf; }
a.btn, .btn a{ color: inherit !important; }


/* === Vertical 18 additions: "letreros" links instead of buttons === */
.tag-link{
  display:inline-block;
  padding:10px 14px;
  font-weight:900;
  letter-spacing:.3px;
  border-radius:10px;
  border:1px solid transparent;
  text-decoration:none !important;
  transition:transform .05s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.tag-link:active{ transform:translateY(1px); }
.tag-link.black{
  background:#111 !important; color:#fff !important; border-color:#111;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: 0 0 0 2px #111, 0 4px 12px rgba(0,0,0,.18);
  filter: drop-shadow(0 0 10px rgba(242,183,5,.25));
}
.tag-link.yellow{
  background:#FFD400 !important; color:#111 !important; border-color:#e4c100;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 0 0 2px #FFD400, 0 4px 12px rgba(0,0,0,.12);
}
/* Hide legacy .btn visuals so only tag-link appears if both exist */
.card .btn, .cta .btn { display:none !important; }


/* V18: mountain titles black */
.card-body h3, .card-body h3 a{ color:#000 !important; }

/* V18.1: etiqueta inferior del carrusel en negro (bajo la imagen) */
.rotor-label{
  margin-top:8px;
  padding:6px 2px 0 2px;
  text-align:center;
}
.rotor-label a{
  color:#000 !important;
  font-weight:900;
  letter-spacing:.2px;
  text-decoration:none !important;
  border-bottom:1px solid transparent;
}
.rotor-label a:hover{ border-bottom-color:#000; }

/* Vertical 19.8 — Título homogéneo fuera del hero (Contacto) */
.page-title{
  font-size: clamp(30px,5vw,52px);
  margin: .2em 0;
  color: #000 !important;
  line-height: 1.1;
}
/* Vertical 19.8 — Hero delgado para contacto */
.hero.slim{
  padding: 24px 0;
  min-height: 64px;
}