/* ══════════════════════════════════════════
   layout.css — Page structure & sections
   ══════════════════════════════════════════ */

/* ── Top Bar ── */
.topbar { background: #495746; color: var(--ivory); font-size: 0.875rem; padding: 0.5rem 0; display: none; }
@media (min-width: 768px) { .topbar { display: block; } }
.topbar .icon { width: 0.875rem; height: 0.875rem; color: var(--gold); margin-right: 0.375rem; }

/* ── Header ── */
#site-header {
  position: sticky; top: 0; z-index: 50;
}
.header {
  background: hsla(40, 33%, 97%, 0.95); backdrop-filter: blur(18px);
  border-bottom: 1px solid hsla(36, 20%, 88%, 0.8); box-shadow: 0 4px 20px -8px hsla(30, 10%, 15%, 0.1);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
@media (min-width: 1024px) { .header-inner { height: 5rem; } }
.header-logo { display: flex; align-items: center; gap: 0.75rem; }
.header-logo img { height: 2.5rem; width: auto; }
@media (min-width: 1024px) { .header-logo img { height: 3rem; } }
.header-logo-text { display: none; }
@media (min-width: 640px) { .header-logo-text { display: block; line-height: 1.25; } }
.header-logo-text .name { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; }
@media (min-width: 1024px) { .header-logo-text .name { font-size: 1rem; } }
.header-logo-text .sub { font-size: 0.75rem; color: var(--muted-foreground); }

/* ── Navigation ── */
.nav-desktop { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .nav-desktop { display: flex; } }
.nav-link {
  padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500;
  border-radius: var(--radius); transition: all 0.2s; color: var(--foreground);
}
.nav-link:hover { color: var(--gold); background: hsla(40, 20%, 93%, 0.5); }
.nav-link.active { color: var(--gold); background: var(--secondary); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.btn-acceso { display: none; }
@media (min-width: 640px) { .btn-acceso { display: inline-flex; } }

/* ── Language Selector (dropdown) ── */
.lang-dropdown { position: relative; }
.lang-toggle {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.125rem; border: none; background: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--muted-foreground); transition: color 0.2s;
}
.lang-toggle:hover { color: var(--gold); }
.lang-toggle .chevron { width: 10px; height: 10px; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
.lang-dropdown:hover .lang-toggle .chevron { opacity: 1; transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 0.35rem); right: 0;
  display: none; flex-direction: column; min-width: 2.75rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 100; overflow: hidden;
}
.lang-dropdown:hover .lang-menu,
.lang-dropdown:focus-within .lang-menu { display: flex; }
.lang-option {
  padding: 0.375rem 0.625rem; border: none; background: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em;
  color: var(--foreground); text-align: center; transition: background 0.15s, color 0.15s;
}
.lang-option:hover { background: var(--secondary); color: var(--gold); }
.lang-option.active { color: var(--gold); font-weight: 700; }

.mobile-toggle {
  display: block; padding: 0.5rem; background: none; border: none; cursor: pointer; color: var(--foreground);
  border-radius: 9999px; transition: background 0.2s, color 0.2s, transform 0.2s;
}
.mobile-toggle:hover,
.mobile-toggle[aria-expanded='true'] {
  background: hsla(41, 56%, 56%, 0.10);
  color: var(--gold-dark);
}
.mobile-toggle[aria-expanded='true'] { transform: rotate(90deg); }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }
.mobile-nav {
  display: none; border-top: 1px solid hsla(41, 56%, 56%, 0.14);
  background: linear-gradient(180deg, hsla(42, 24%, 98%, 0.98), hsla(40, 18%, 94%, 0.98));
  padding: 1rem 1.25rem 1.25rem; box-shadow: inset 0 1px 0 hsla(41, 56%, 56%, 0.06), 0 18px 36px -30px hsla(108, 18%, 12%, 0.32);
}
.mobile-nav.open { display: flex; flex-direction: column; gap: 0.25rem; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }
.mobile-nav .nav-link { padding: 0.875rem 1rem; display: block; }
.mobile-nav .btn { margin-top: 0.5rem; }

/* ── Hero ── */
.hero {
  position: relative; min-height: 85vh; display: flex; align-items: center;
  background-size: cover; background-position: center;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, hsla(109,11%,31%,0.95), hsla(109,11%,31%,0.80), hsla(109,11%,31%,0.60));
}
.hero-content { position: relative; z-index: 10; padding: 5rem 0; max-width: 42rem; }
.hero-content h1 { font-size: 2.25rem; font-weight: 700; color: var(--primary-foreground); line-height: 1.15; margin-bottom: 1rem; }
.hero-content h1 span { color: var(--gold); }
@media (min-width: 640px) { .hero-content h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .hero-content h1 { font-size: 3.75rem; } }
.hero-content .subtitle { color: hsla(42,30%,95%,0.8); font-size: 1.125rem; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .hero-content .subtitle { font-size: 1.25rem; } }
.hero-content .desc { color: hsla(42,30%,95%,0.6); margin-bottom: 2rem; max-width: 32rem; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ── Page Hero ── */
.page-hero {
  background: var(--navy); padding: 4rem 0; text-align: center;
  background-image: linear-gradient(135deg, var(--navy), var(--navy-light));
}
.page-hero h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--primary-foreground); margin-bottom: 0.5rem; }
@media (min-width: 640px) { .page-hero h1 { font-size: 2.5rem; } }
.page-hero p { color: var(--gold-light); font-size: 1rem; }

/* ── Page Hero – variante editorial ── */
.page-hero-editorial {
  background: var(--section-deep);
  background-image: linear-gradient(135deg, var(--section-deep), var(--section-deep-soft));
  padding: 1.75rem 0 2.25rem;
  text-align: left;
  position: relative;
}
.page-hero-editorial::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(calc(100% - 4rem), 1400px);
  height: 1px;
  background: var(--editorial-line);
  opacity: 0.9;
}
.page-hero-editorial h1 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 500; color: var(--primary-foreground); line-height: 1.2; margin-bottom: 0.35rem; }
.page-hero-editorial p { color: var(--gold-muted); font-size: 0.875rem; line-height: 1.5; }
.page-hero-editorial p:first-child { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; font-family: var(--font-body); font-weight: 500; }

/* ── Section Heading ── */
.section-heading { text-align: center; margin-bottom: 2.5rem; }
.section-heading h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .section-heading h2 { font-size: 1.75rem; } }
.section-heading p { color: var(--muted-foreground); max-width: 36rem; margin: 0 auto; }
.section-heading.light h2 { color: var(--primary-foreground); }
.section-heading.light p { color: hsla(42,30%,95%,0.7); }
.gold-separator { height: 1px; width: 4rem; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
@media (max-width: 640px) { .gold-separator { width: 100%; } }

/* ── Service Cards ── */
.service-card {
  display: block; padding: 1.5rem; border-radius: 0.5rem; background: var(--card);
  border: 1px solid var(--border); transition: all 0.3s; height: 100%;
}
.service-card:hover { border-color: var(--gold); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.service-card .icon { width: 2.5rem; height: 2.5rem; color: var(--gold); margin-bottom: 1rem; transition: transform 0.3s; }
.service-card:hover .icon { transform: scale(1.1); }
.service-card h3 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
.service-card p { font-size: 0.875rem; color: var(--muted-foreground); }

/* ── Horario Row ── */
.horario-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem; border-radius: 0.5rem; background: hsla(109,9%,40%,0.5); border: 1px solid hsla(42,78%,50%,0.2);
}
.horario-row .day { color: var(--primary-foreground); font-weight: 500; }
.horario-row .type { font-size: 0.875rem; color: var(--gold-light); }
.horario-row .time { color: var(--primary-foreground); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 3rem; }
.timeline::before { content: ''; position: absolute; left: 1rem; top: 0; bottom: 0; width: 1px; background: hsla(42,78%,50%,0.3); }
.timeline-item { position: relative; margin-bottom: 3rem; }
.timeline-item .dot { position: absolute; left: -2.125rem; top: 0.25rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--gold); border: 4px solid var(--background); }
.timeline-item .year { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--gold); margin-bottom: 0.25rem; }
.timeline-item .text { color: var(--muted-foreground); }

/* ── Footer CTA ── */
.footer-cta {
  background: linear-gradient(135deg, hsl(30,10%,12%) 0%, hsl(30,10%,16%) 100%);
  padding: 3rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.footer-cta::before,
.footer-cta::after {
  content: '';
  position: absolute;
  top: -40%; width: 60%; height: 200%;
  border-right: 1px solid hsla(36,45%,52%,0.07);
  pointer-events: none;
}
.footer-cta::before { left: -10%; transform: rotate(-15deg); }
.footer-cta::after  { right: -10%; border-right: none; border-left: 1px solid hsla(36,45%,52%,0.07); transform: rotate(15deg); }
.footer-cta__icon   { display: flex; justify-content: center; margin-bottom: 1.25rem; color: var(--gold); opacity: 0.7; }
.footer-cta__title  { font-family: var(--font-heading); font-size: 1.5rem; font-style: italic; color: var(--ivory); margin-bottom: 0.6rem; letter-spacing: 0.01em; }
.footer-cta__text   { font-size: 0.875rem; color: hsla(42,30%,95%,0.5); max-width: 34rem; margin: 0 auto 1.75rem; line-height: 1.7; }
.footer-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.footer-cta__btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  background: var(--gold); color: hsl(30,10%,12%);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  letter-spacing: 0.03em; transition: background .3s, transform .2s;
}
.footer-cta__btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
.footer-cta__btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  border: 1px solid hsla(36,45%,52%,0.5); color: var(--gold);
  font-size: 0.85rem; font-weight: 500; text-decoration: none;
  letter-spacing: 0.03em; transition: border-color .3s, color .3s;
}
.footer-cta__btn-outline:hover { border-color: var(--gold); color: var(--gold-light); }

/* ── Footer ── */
.footer { background: #495746; color: var(--ivory); }
.footer__topline { height: 2px; background: linear-gradient(90deg, transparent 5%, var(--gold) 30%, var(--gold-light, #e0b96a) 50%, var(--gold) 70%, transparent 95%); }
.footer__body    { padding: 3rem 1.5rem 1.75rem; }
.footer__grid    {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Identity column */
.footer__brand        { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.footer__brand img    { height: 2.75rem; width: auto; filter: brightness(1.2) drop-shadow(0 0 6px hsla(36,45%,52%,0.3)); }
.footer__brand-name   { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; color: var(--ivory); }
.footer__brand-unit   { font-size: 0.72rem; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
.footer__motto        { font-family: var(--font-heading); font-size: 0.82rem; font-style: italic; color: hsla(42,30%,95%,0.35); margin-bottom: 1.25rem; line-height: 1.6; }
.footer__contact      { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; }
.footer__contact li   { display: flex; align-items: flex-start; gap: 0.5rem; }
.footer__contact svg  { flex-shrink: 0; margin-top: 0.1rem; color: var(--gold); }
.footer__contact span,
.footer__contact a    { font-size: 0.82rem; color: hsla(42,30%,95%,0.55); text-decoration: none; transition: color .3s; }
.footer__contact a:hover { color: var(--gold); }
.footer__social       { display: flex; align-items: center; gap: 1rem; }
.footer__social a     { color: hsla(42,30%,95%,0.5); transition: color .3s; }
.footer__social a:hover { color: var(--gold); }

/* Nav & hours columns */
.footer__col-title  { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 1rem; }
.footer__links      { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.footer__links a    { font-size: 0.875rem; color: hsla(42,30%,95%,0.6); text-decoration: none; transition: color .3s; }
.footer__links a:hover { color: var(--gold); }
.footer__hours      { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.footer__hours li   { display: flex; justify-content: space-between; gap: 1rem; }
.footer__hours .day { font-size: 0.8rem; color: hsla(42,30%,95%,0.5); }
.footer__hours .time { font-size: 0.8rem; font-weight: 500; color: hsla(42,30%,95%,0.75); }

/* Bottom bar */
.footer__separator { height: 1px; background: linear-gradient(90deg, transparent, hsla(36,45%,52%,0.4), transparent); margin: 2rem 0 1.25rem; }
.footer__bottom    { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.75rem; color: hsla(42,30%,95%,0.35); }
.footer__bottom a  { color: inherit; text-decoration: none; transition: color .3s; }
.footer__bottom a:hover { color: var(--gold); }
.footer__legal     { display: flex; align-items: center; gap: 1.25rem; }
.footer__legal-dot { opacity: 0.3; }

/* ── Mobile overrides ── */
@media (max-width: 767px) {
  .header-inner { gap: 0.5rem; }
  .header-logo img { height: 2.2rem; }
  .hero { min-height: 72vh; }
  .hero-content { padding: 4rem 0; }
  .hero-content h1 { font-size: 2rem; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { width: 100%; }
  .horario-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  #contact-grid,
  #contact-grid > .grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .mobile-nav { max-height: calc(100vh - 4rem); overflow-y: auto; }
}