/* ==========================================================================
   Más Global — Estilos específicos de secciones/páginas
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: calc(var(--space-6) + 20px);
  padding-bottom: var(--space-7);
  overflow: hidden;
  background: var(--mist-100);
}
.hero--compact { padding-bottom: var(--space-6); }
.hero--compact .hero__visual { aspect-ratio: 4/3; }
.hero--compact .breadcrumb { margin-bottom: var(--space-3); }
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  .hero .container { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.hero__content { max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hero__meta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--mist-200);
}
.hero__meta div strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--petrol-900); }
.hero__meta div span { font-size: 0.8rem; color: var(--ink-soft); }

.hero__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--petrol-800) 0%, var(--petrol-600) 46%, var(--slate-400) 100%);
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sección Placas UV — editorial -------------------------------------------- */

.editorial {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--petrol-900);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .editorial { grid-template-columns: 1.05fr 0.95fr; min-height: 520px; }
}
.editorial__visual {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}
.editorial__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial__content {
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.editorial__content .eyebrow { color: var(--slate-300); }
.editorial__content h2 { color: var(--white); max-width: 14ch; }
.editorial__content p { color: rgba(255,255,255,0.78); max-width: 42ch; }
.editorial__swatches { display: flex; gap: 0.6rem; margin-top: var(--space-1); }
.editorial__swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); }

/* About / Nosotros ---------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 960px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.about-visual {
  aspect-ratio: 5/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-item { padding: var(--space-3); border: 1px solid var(--mist-200); border-radius: var(--radius-md); }
.value-item h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.value-item p { font-size: 0.86rem; color: var(--ink-soft); }

.culture-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: var(--space-3); }
.culture-list li { display: flex; gap: 0.7rem; font-size: 0.96rem; color: var(--ink-soft); }
.culture-list svg { width: 18px; height: 18px; color: var(--petrol-600); flex: none; margin-top: 3px; }

/* Producto — detalle ---------------------------------------------------------- */

.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 960px) {
  .product-detail { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); }
}

.product-gallery__main {
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.product-gallery__thumbs button {
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
}
.product-gallery__thumbs button[aria-current="true"] { border-color: var(--petrol-600); }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-info__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }

.product-info__section { padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--mist-200); }
.product-info__section h2 { font-size: 1.05rem; margin-bottom: var(--space-2); }

.related-products { margin-top: var(--space-7); }

.no-price-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--slate-400);
  margin-top: var(--space-2);
}
.no-price-note svg { width: 16px; height: 16px; }

/* Contact page hero ----------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; }
}

/* Page intro (Productos / Aplicaciones / Nosotros / Contacto headers) ---------- */

.page-intro {
  padding-top: calc(var(--space-6) + 10px);
  padding-bottom: var(--space-5);
  background: var(--mist-100);
}
.page-intro__inner { max-width: 640px; }

/* Map embed placeholder --------------------------------------------------------- */
.map-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid var(--mist-200);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }