/* GO RENTAL RD — Public Homepage Styles | v=20260802 */

/* ─── NAV ─── */
.pub-nav {
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* The header logo (assets/logo-header.png) already bakes the "GO RENTAL"
   wordmark into the artwork, so the nav no longer pairs it with a separate
   text span — that would just repeat the same words twice. */
.pub-nav-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.pub-nav-brand img { height: 24px; width: auto; }
.pub-nav-links { display: flex; align-items: center; gap: 28px; }
.pub-nav-link { font-size: 16px; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: color var(--transition); }
.pub-nav-link:hover { color: var(--accent); }
.pub-nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Hero banner lives in its own component now — see hero-banner.css + lib/hero-banner.js */

/* Shared by the final CTA band's gold button */
.btn-hero-primary { background: var(--accent); color: #1c1a15; font-weight: 700; }
.btn-hero-primary:hover { background: var(--accent-3); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,175,55,0.28); }

/* ─── SEARCH BAR (fechas → search.html) ───
   Lives inside #flota, right above the grid it filters (see .pub-fleet-search
   below) — not floating between sections or overlapping the hero. Dates are
   the only real filter (the whole fleet is bookable any hour, so a pickup/
   return time never fed into DB.hasRentalConflict — it was decorative).
   Type runs larger than the site's routine form fields since this is the
   page's primary action, not a settings field. */
.pub-search-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 22px 24px; display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap;
}
.pub-fleet-search { margin-bottom: 22px; }
.pub-search-field { flex: 1; min-width: 200px; }
.pub-search-field .form-label { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.pub-search-field .form-control { font-size: 18px; font-weight: 600; padding: 14px 16px; }
.pub-search-btn { flex-shrink: 0; padding: 16px 34px; font-size: 16px; justify-content: center; white-space: nowrap; }
@media (max-width: 700px) {
  .pub-search-card { flex-direction: column; align-items: stretch; padding: 18px; }
  .pub-search-btn { width: 100%; }
}

/* ─── GENERIC SECTION ─── */
.pub-section { padding: 44px 32px; }
.pub-section-alt { background: var(--surface-2); }
.pub-section-inner { max-width: 1180px; margin: 0 auto; }
.pub-section-header { text-align: center; max-width: 620px; margin: 0 auto 28px; }
.pub-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--accent-3); margin-bottom: 10px;
}
.pub-title { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--text-on-bg); line-height: 1.2; }
.pub-sub { font-size: 15px; color: var(--text-on-bg-mute); margin-top: 12px; line-height: 1.6; }

/* .pub-section-alt keeps its light --surface-2 card background (e.g. "Contáctanos")
   — restore the original dark-on-light colors there, since .pub-eyebrow/.pub-title/
   .pub-sub above were flipped to light for the (now black) plain .pub-section. */
.pub-section-alt .pub-eyebrow { color: var(--accent-2); }
.pub-section-alt .pub-title { color: var(--ink); }
.pub-section-alt .pub-sub { color: var(--ink-mute); }

/* ─── FLEET CTA ─── */
.pub-fleet-footer { text-align: center; margin-top: 24px; }

/* Fallback empty-state (no vehicles at all) sits directly on the now-black
   .pub-section, not inside a card — needs the light text variant too. */
#featured-fleet .empty-state { color: var(--text-on-bg-mute); }
#featured-fleet .empty-title { color: var(--text-on-bg); }

/* ─── CONTACT / SOCIAL ───
   WhatsApp + Instagram front and center: two dark "field notes" cards
   (same gold-on-ink family used elsewhere) plus a small grid of real
   Instagram post previews (assets/social/) that link straight out to the
   profile — actual social proof, not marketing copy. */
.pub-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 780px; margin: 0 auto 36px; }
.pub-contact-card {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(160deg, #1c1a15 0%, #2e2818 60%, #1c1a15 100%);
  border-radius: calc(var(--radius) + 4px); padding: 22px 24px;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.pub-contact-card::before {
  content: ""; position: absolute; top: -60px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.16), transparent 70%);
}
.pub-contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pub-contact-icon {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(212,175,55,0.16); color: var(--accent-3);
  display: flex; align-items: center; justify-content: center;
}
.pub-contact-icon svg { width: 24px; height: 24px; }
.pub-contact-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-contact-text strong { font-size: 15px; font-weight: 700; color: #fff; }
.pub-contact-text small { font-size: 12.5px; color: rgba(255,255,255,0.6); }

.pub-social-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 640px; margin: 0 auto; }
.pub-post-card {
  position: relative; display: block; aspect-ratio: 4/5;
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  background: linear-gradient(160deg, #1c1a15 0%, #2e2818 60%, #1c1a15 100%);
}
/* contain, not cover — the three uploaded photos aren't cropped identically
   (439x568, 407x568, 470x561), so cover would slice off part of the vehicle
   in at least one of them. contain guarantees the whole car always shows,
   and the shared aspect-ratio above keeps all three cards the same size. */
.pub-post-card img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.pub-post-card:hover img { transform: scale(1.06); }
.pub-post-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(10,8,5,0); color: #fff; font-size: 12.5px; font-weight: 700; text-align: center;
  opacity: 0; transition: background 0.25s ease, opacity 0.25s ease;
}
.pub-post-overlay svg { width: 15px; height: 15px; flex-shrink: 0; }
.pub-post-card:hover .pub-post-overlay, .pub-post-card:focus-visible .pub-post-overlay { opacity: 1; background: rgba(10,8,5,0.55); }

/* ─── FINAL CTA BAND ─── */
.pub-cta-band {
  background: var(--ink); color: #fff; text-align: center;
  padding: 44px 32px;
}
.pub-cta-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.pub-cta-sub { font-size: 15px; color: rgba(255,255,255,0.65); margin-top: 10px; }
.pub-cta-band .btn { margin-top: 20px; padding: 14px 30px; font-size: 15px; }

/* ─── FOOTER ─── */
.pub-footer { background: #100f0c; color: rgba(255,255,255,0.6); padding: 36px 32px 20px; }
.pub-footer-inner { max-width: 1180px; margin: 0 auto; }
.pub-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pub-footer-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.pub-footer-brand img { width: 46px; height: auto; }
.pub-footer-brand-text { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; }
.pub-footer-brand-text .dot { color: var(--accent-3); }
.pub-footer-tag { font-size: 13.5px; line-height: 1.6; max-width: 320px; }
.pub-footer-col h4 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.9); margin-bottom: 14px; }
.pub-footer-col a { display: block; font-size: 13.5px; color: rgba(255,255,255,0.55); text-decoration: none; margin-bottom: 10px; transition: color var(--transition); }
.pub-footer-col a:hover { color: var(--accent-3); }
.pub-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 20px; font-size: 12.5px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 980px) {
  .pub-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .pub-nav-links { display: none; }
}
@media (max-width: 600px) {
  .pub-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* Keep both nav CTAs inside 360-410px viewports — the wider labels a
     logged-in session shows ("Cerrar sesión" / "Ir a mi panel →") were
     pushing the row past the right edge and forcing a horizontal scrollbar. */
  .pub-nav { padding: 0 14px; }
  .pub-nav-brand img { height: 18px; }
  .pub-nav-cta { gap: 6px; }
  .pub-nav-cta .btn-sm { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
}
@media (max-width: 720px) {
  .pub-section { padding: 32px 20px; }
  .pub-contact-card { padding: 18px 20px; }
  .pub-footer-top { grid-template-columns: 1fr; gap: 24px; }
  .pub-cta-title { font-size: 24px; }
}