/*
 * Hidrocarburos del Norte — Estilos de páginas internas
 * Cabecera de página, fichas de producto, historia, contacto, estaciones, 404.
 * Depende de tokens.css + base.css.
 */

/* Deja aire bajo el header fijo en páginas sin hero */
.page-body { padding-top: 84px; }

/* ═══════════════════════════ PAGE HEADER ═══ */
.page-header {
  background: var(--surface-dark); color: var(--text-inverse);
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--border-accent);
}
.page-header .eyebrow { color: var(--accent); }
.page-header h1 { color: var(--color-limestone-100); }
.page-header p { color: var(--text-inverse-muted); margin-top: var(--space-3); }
.breadcrumb { display: flex; gap: var(--space-2); align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-inverse-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--text-inverse-muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ═══════════════════════════ FICHAS DE PRODUCTO ═══ */
.spec {
  display: grid; grid-template-columns: 380px 1fr; gap: var(--space-12);
  align-items: center; scroll-margin-top: 100px;
  padding-block: var(--space-16); border-bottom: 1px solid var(--border);
}
.spec:last-child { border-bottom: none; }
.spec:nth-child(even) .spec__media { order: 2; }
.spec__media { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; place-items: center; }
.spec__media img { max-height: 280px; width: auto; }
.spec__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); }
.spec h2 { margin: var(--space-2) 0 var(--space-4); }
.spec__table { margin-top: var(--space-6); width: 100%; border-collapse: collapse; }
.spec__table th, .spec__table td { text-align: left; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.spec__table th { color: var(--text-secondary); font-weight: var(--weight-medium); width: 45%; }
.spec__table td { color: var(--text-primary); font-weight: var(--weight-medium); }
.spec__table td .pending { color: var(--text-muted); font-style: italic; font-weight: var(--weight-normal); }
@media (max-width: 760px) {
  .spec { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-12); }
  .spec:nth-child(even) .spec__media { order: -1; }
  .spec__media { order: -1; }
}

/* ═══════════════════════════ HISTORIA / VALORES ═══ */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.story__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .story { grid-template-columns: 1fr; gap: var(--space-8); } }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.value-card svg { width: 34px; height: 34px; color: var(--accent); }
.value-card h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-lg); }
.value-card p { font-size: var(--text-sm); color: var(--text-secondary); }

.timeline { margin-top: var(--space-8); border-left: 2px solid var(--border-accent); padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) - 6px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.timeline__year { font-family: var(--font-display); font-size: var(--text-xl); color: var(--accent-text); font-weight: var(--weight-bold); }

/* ═══════════════════════════ CONTACTO ═══ */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-16); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

.field { margin-bottom: var(--space-5); }
.field label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-2); color: var(--text-primary); }
.field input, .field textarea {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--border-accent); }
.field textarea { min-height: 140px; resize: vertical; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-status { margin-top: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.form-status--ok { color: var(--color-success); }
.form-status--err { color: var(--color-danger); }

.office-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); }
.office-card__img img { width: 100%; height: 160px; object-fit: cover; }
.office-card__body { padding: var(--space-5) var(--space-6); }
.office-card h3 { font-size: var(--text-lg); }
.office-card address { font-style: normal; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-loose); margin-top: var(--space-2); }
.office-card address a { color: var(--accent-text); }
.office-card .contact-line { display: flex; gap: var(--space-2); align-items: center; }
.office-card .contact-line svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ═══════════════════════════ ESTACIONES / MAPA ═══ */
.stations-layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .stations-layout { grid-template-columns: 1fr; } }

.station-filter { position: sticky; top: 100px; }
.station-filter select, .station-filter input {
  width: 100%; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.station-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-4); }
.station-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 460px; overflow-y: auto; }
.station-item { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.station-item:hover, .station-item.is-active { border-color: var(--accent); background: var(--bg-alt); }
.station-item strong { display: block; font-size: var(--text-sm); }
.station-item span { font-size: var(--text-xs); color: var(--text-secondary); font-family: var(--font-mono); }
.station-item .badge { float: right; background: var(--accent); color: var(--color-petroleum-800); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); padding: 1px var(--space-2); border-radius: var(--radius-pill); }

#map { height: 560px; border-radius: var(--radius-lg); border: 1px solid var(--border); z-index: var(--z-base); }
@media (max-width: 900px) { #map { height: 420px; } }
.leaflet-popup-content { font-family: var(--font-body); }
.leaflet-popup-content strong { font-family: var(--font-display); }
.map-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-3); }
.hn-marker__pin {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--color-gold-500); color: var(--color-petroleum-800);
  border: 2px solid var(--color-petroleum-800); border-radius: 50%;
  font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* ═══════════════════════════ 404 ═══ */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.notfound__code { font-family: var(--font-display); font-size: clamp(5rem, 20vw, 12rem); line-height: 1; color: var(--accent); }

/* ═══════════════════════════ SLIDER TIPO TOYOTA (Quiénes somos) ═══ */
.qs-slider {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 16 / 11; background: var(--color-petroleum-900);
}
.qs-slider__track { position: absolute; inset: 0; }
.qs-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity .7s ease; pointer-events: none;
}
.qs-slide.is-active { opacity: 1; pointer-events: auto; }
.qs-slide img { width: 100%; height: 100%; object-fit: cover; }
.qs-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,13,27,0) 45%, rgba(4,13,27,.85) 100%);
}
.qs-slide__cap {
  position: absolute; left: var(--space-6); bottom: var(--space-6); z-index: 2;
  display: flex; flex-direction: column;
}
.qs-slide__cap span {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--accent);
}
.qs-slide__cap strong {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.05; text-transform: uppercase;
  color: var(--color-limestone-100); margin-top: var(--space-1); max-width: 18ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.qs-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(6,15,26,.55); color: var(--color-limestone-100);
  display: grid; place-items: center; backdrop-filter: blur(4px);
  transition: background-color var(--transition-fast);
}
.qs-slider__arrow:hover { background: var(--accent); color: var(--color-petroleum-800); }
.qs-slider__arrow svg { width: 22px; height: 22px; }
.qs-slider__arrow--prev { left: var(--space-4); }
.qs-slider__arrow--next { right: var(--space-4); }
.qs-slider__dots { position: absolute; bottom: var(--space-4); right: var(--space-6); z-index: 3; display: flex; gap: var(--space-2); }
.qs-dot {
  width: 20px; height: 4px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.4); transition: background-color var(--transition-fast);
}
.qs-dot.is-active { background: var(--accent); }
@media (max-width: 820px) { .qs-slider { aspect-ratio: 16 / 10; } }


/* Slider grande a todo el ancho del contenedor (Quiénes somos) */
.story-intro { max-width: 62ch; margin: 0 auto var(--space-12); text-align: center; }
.story-intro .eyebrow { color: var(--accent-text); }
.story-intro p { margin-inline: auto; }
.qs-slider--wide { aspect-ratio: 16 / 8; }
.qs-slider--wide .qs-slide__cap { left: var(--space-10); bottom: var(--space-8); }
.qs-slider--wide .qs-slide__cap strong { font-size: clamp(1.8rem, 4vw, 3rem); max-width: 22ch; }
.qs-slider--wide .qs-slider__dots { flex-wrap: wrap; max-width: 60%; justify-content: flex-end; }
@media (max-width: 820px) { .qs-slider--wide { aspect-ratio: 4 / 3; } .qs-slider--wide .qs-slide__cap { left: var(--space-5); bottom: var(--space-5); } }