/* ============================================================
   NANAI NANAI · pages.css
   Estilos de composición para las 5 vistas + Design System.
   ============================================================ */

/* ============================================================
   HOME · HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(78vh, 640px);
  display: flex; align-items: center;
  border-radius: var(--radius-premium);
  overflow: hidden;
  margin-top: var(--space-6);
  color: #fff;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after { /* velo emocional en baja opacidad */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(38,33,30,0.82) 0%, rgba(38,33,30,0.5) 55%, rgba(38,33,30,0.15) 100%);
}
.hero__inner { padding: var(--space-8); max-width: 640px; }
.hero__title {
  color: #fff;
  font-size: var(--fs-4xl);
  line-height: 1.05;
  margin-block: var(--space-4);
}
.hero__title em { font-style: italic; color: var(--color-brand-primary); }
.hero__lead { color: rgba(255,255,255,0.85); font-size: var(--fs-lg); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero .overline { color: var(--color-brand-primary); }

/* ============================================================
   HOME · GRILLA DE TERRITORIOS
   ============================================================ */
.territory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.territory-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 320px;
  padding: var(--space-6);
  border-radius: var(--radius-premium);
  overflow: hidden;
  color: var(--color-text-dark);
  transition: var(--transition-smooth);
}
.territory-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.territory-card--contencion { background: var(--color-territorio-contencion); }
.territory-card--memoria    { background: var(--color-territorio-memoria); }
.territory-card--renacer    { background: var(--color-territorio-renacer); }
.territory-card__num {
  font-family: var(--font-titles); font-size: var(--fs-2xl);
  opacity: 0.35; margin-bottom: auto;
}
.territory-card__title { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
.territory-card__desc { font-size: var(--fs-sm); color: var(--color-text-dark); opacity: 0.75; max-width: 30ch; }
.territory-card__link {
  margin-top: var(--space-4);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.territory-card__link::after { content: "→"; transition: var(--transition-fast); }
.territory-card:hover .territory-card__link::after { transform: translateX(4px); }

/* ============================================================
   PLP · CATÁLOGO
   ============================================================ */
.plp-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.filter-chip {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 0.5em 1.1em; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text-muted); background: var(--color-bg-elevated);
  transition: var(--transition-fast);
}
.filter-chip:hover { border-color: var(--color-text-muted); color: var(--color-text-dark); }
.filter-chip.is-active {
  background: var(--color-text-dark); border-color: var(--color-text-dark); color: #fff;
}
.plp-count { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Oculta cards filtradas */
.product-card.is-hidden { display: none; }

/* ============================================================
   PDP · DETALLE DE PRODUCTO
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: var(--space-8); align-items: start; }

/* Galería */
.gallery {
  position: sticky; top: calc(var(--navbar-h) + var(--space-5));
  display: grid; grid-template-columns: 76px 1fr; gap: var(--space-4); align-items: start;
}
.gallery__main {
  aspect-ratio: 1 / 1; border-radius: var(--radius-premium);
  overflow: hidden; background: var(--color-bg-sunken);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery__thumb {
  width: 76px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer; background: var(--color-bg-sunken); padding: 0;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--color-brand-primary); }

/* Panel de compra */
.buy-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.buy-panel__title { font-size: var(--fs-3xl); }
.buy-panel__price-row { display: flex; flex-direction: column; gap: var(--space-1); }
.buy-panel__tax { font-size: var(--fs-xs); color: var(--color-text-muted); }

.buy-panel__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: calc(-1 * var(--space-2)); }
.stock-badge { font-size: var(--fs-sm); font-weight: 600; color: var(--color-territorio-renacer-ink); }
.stock-badge.is-low { color: #b06a3d; }
.stock-badge.is-out { color: var(--color-text-muted); }
.custom-badge {
  font-size: var(--fs-xs); font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-bg-sunken); color: var(--color-text-dark);
  letter-spacing: var(--tracking-wide);
}

.buy-panel__section { display: flex; flex-direction: column; gap: var(--space-3); }
.pill-set { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Bloque condicional (nombres de hilos) */
.conditional {
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--color-bg-sunken);
}
.conditional[hidden] { display: none; }

.pdp-detail { margin-top: var(--space-9); max-width: 860px; }
.pdp-detail__lead { font-family: var(--font-titles); font-size: var(--fs-xl); color: var(--color-text-dark); margin-bottom: var(--space-6); }

/* ============================================================
   CARRITO (vista dedicada)
   ============================================================ */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-7); align-items: start; }
.cart-panel { background: var(--color-bg-elevated); border: 1px solid var(--color-line); border-radius: var(--radius-premium); padding: var(--space-5) var(--space-6); }
.summary {
  position: sticky; top: calc(var(--navbar-h) + var(--space-5));
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-premium);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.summary__row { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--color-text-muted); }
.summary__row--total {
  font-size: var(--fs-lg); color: var(--color-text-dark);
  font-weight: var(--fw-semibold);
  padding-top: var(--space-4); border-top: 1px solid var(--color-line);
}
.summary__row--total .price { font-size: var(--fs-xl); }

/* ============================================================
   CHECKOUT (one-page, dos columnas)
   ============================================================ */
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: start; }
.checkout-form { display: flex; flex-direction: column; gap: var(--space-7); }
.form-block { display: flex; flex-direction: column; gap: var(--space-4); }
.form-block__title {
  font-family: var(--font-titles); font-size: var(--fs-xl);
  display: flex; align-items: center; gap: var(--space-3);
}
.form-block__num {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: #fff; background: var(--color-brand-primary); border-radius: 50%;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.checkout-summary {
  position: sticky; top: calc(var(--navbar-h) + var(--space-5));
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-premium);
  padding: var(--space-6);
}
.checkout-summary__scroll { display: flex; flex-direction: column; gap: var(--space-4); }
.mini-line { display: flex; gap: var(--space-3); }
.mini-line__media { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--color-bg-sunken); }
.mini-line__media img { width: 100%; height: 100%; object-fit: cover; }
.personal-note {
  font-size: var(--fs-xs); color: var(--color-text-muted);
  background: var(--color-bg-sunken); border-radius: var(--radius-sm);
  padding: var(--space-3); margin-top: var(--space-2);
  border-left: 2px solid var(--color-brand-primary);
}
.personal-note em { color: var(--color-text-dark); font-style: italic; }

/* ============================================================
   DESIGN SYSTEM (guía viva)
   ============================================================ */
.ds-hero { padding-block: var(--space-8) var(--space-6); border-bottom: 1px solid var(--color-line); }
.ds-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.ds-nav a { font-size: var(--fs-sm); padding: 0.4em 0.9em; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); color: var(--color-text-muted); }
.ds-nav a:hover { border-color: var(--color-text-dark); color: var(--color-text-dark); }

.ds-block { padding-block: var(--space-8); border-bottom: 1px solid var(--color-line); scroll-margin-top: calc(var(--navbar-h) + var(--space-4)); }
.ds-block__title { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
.ds-block__intro { color: var(--color-text-muted); margin-bottom: var(--space-6); }

/* Muestra + código */
.ds-demo {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-premium);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.ds-demo__preview {
  padding: var(--space-7);
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
  background:
    repeating-conic-gradient(var(--color-bg-sunken) 0% 25%, transparent 0% 50%) 50% / 22px 22px;
}
.ds-demo__preview--stack { flex-direction: column; align-items: stretch; }
.ds-demo__preview--plain { background: var(--color-bg-elevated); }
.ds-demo__code {
  margin: 0; padding: var(--space-5);
  background: var(--color-text-dark);
  color: #e9e2d8;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-xs); line-height: 1.7;
  overflow-x: auto; white-space: pre;
}
.ds-demo__code .c-tag { color: #9db9c9; }
.ds-demo__code .c-attr { color: #d8b978; }
.ds-demo__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-line);
  background: var(--color-bg-elevated);
  font-size: var(--fs-xs); color: var(--color-text-muted);
}
.ds-demo__meta code {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  background: var(--color-bg-sunken); padding: 0.15em 0.5em; border-radius: 5px;
  color: var(--color-text-dark);
}

/* Lista de recursos del proyecto (Figma, repositorio) */
.resource-list { display: flex; flex-direction: column; gap: var(--space-4); }
.resource {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line); border-radius: var(--radius-premium);
}
.resource__icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--color-bg-sunken); color: var(--color-text-dark);
}
.resource__body { flex: 1; min-width: 220px; }
.resource__title { font-size: var(--fs-lg); margin-bottom: 2px; }
.resource__desc { font-size: var(--fs-sm); color: var(--color-text-muted); }
.resource__ver {
  display: inline-block; font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--color-brand-primary-soft); color: var(--color-brand-primary-dark);
}
.resource__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Etiqueta de variante en demos */
.ds-variant-label {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-soft);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-3);
}

/* Muestrario de color */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: var(--space-4); }
.swatch { border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; }
.swatch__chip { height: 84px; }
.swatch__meta { padding: var(--space-3); font-size: var(--fs-xs); }
.swatch__name { font-weight: var(--fw-semibold); color: var(--color-text-dark); display: block; }
.swatch__var { font-family: 'SF Mono', ui-monospace, monospace; color: var(--color-text-muted); }

/* Muestrario tipográfico */
.type-row { padding-block: var(--space-4); border-bottom: 1px solid var(--color-line); }
.type-row__meta { font-size: var(--fs-xs); color: var(--color-text-muted); font-family: 'SF Mono', ui-monospace, monospace; margin-bottom: var(--space-2); }

/* ============================================================
   RESPONSIVE de páginas
   ============================================================ */
@media (max-width: 980px) {
  .pdp, .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .gallery, .summary, .checkout-summary { position: static; }
  .territory-grid { grid-template-columns: 1fr; }
  .hero__title { font-size: var(--fs-3xl); }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .hero__inner { padding: var(--space-5); }
  /* Galería: en móvil los thumbnails pasan a una fila bajo la imagen */
  .gallery { grid-template-columns: 1fr; }
  .gallery__thumbs { flex-direction: row; flex-wrap: wrap; order: 2; }
}

/* ============================================================
   CARRUSEL (Home · scroll-snap)
   ============================================================ */
.carousel__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.carousel__nav { display: flex; gap: var(--space-2); }
.carousel__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: var(--color-bg-elevated); color: var(--color-text-dark);
  font-size: var(--fs-lg); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition-fast);
}
.carousel__btn:hover:not(:disabled) { background: var(--color-text-dark); color: #fff; border-color: var(--color-text-dark); }
.carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.carousel__track {
  display: flex; gap: var(--space-5);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3); /* espacio para sombra hover */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

/* ============================================================
   RESEÑAS (PDP)
   ============================================================ */
.pdp-reviews { margin-top: var(--space-9); scroll-margin-top: calc(var(--navbar-h) + var(--space-4)); }
.reviews-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
.review {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-premium);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.review__author { font-weight: var(--fw-semibold); }
.review__stars { color: var(--color-star); letter-spacing: 1px; }
.review__date { font-size: var(--fs-xs); color: var(--color-text-soft); }
.review__text { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-body); }

/* ============================================================
   CONFIRMACIÓN DE PEDIDO
   ============================================================ */
.confirm { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.confirm__icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-success); color: #fff; margin-bottom: var(--space-2);
}
.confirm__card {
  width: 100%; text-align: left; margin-top: var(--space-6);
  background: var(--color-bg-elevated); border: 1px solid var(--color-line);
  border-radius: var(--radius-premium); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.confirm__row { display: flex; justify-content: space-between; font-size: var(--fs-sm); }

/* ============================================================
   CARRITO VACÍO
   ============================================================ */
.cart-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding: var(--space-8) var(--space-4); text-align: center;
}

@media (max-width: 560px) {
  .carousel__track > * { flex-basis: 82%; }
}

/* ============================================================
   HERO SLIDER (Home · full-width, bajo y alargado)
   ============================================================ */
.hero-slider { position: relative; overflow: hidden; background: var(--color-bg-sunken); }
.hero-slider__viewport { overflow: hidden; }
.hero-slider__track { display: flex; transition: transform 0.6s cubic-bezier(.4, 0, .2, 1); }
.hero-slide {
  flex: 0 0 100%;
  min-height: clamp(300px, 40vh, 420px);
  display: flex; align-items: center;
  background-image:
    linear-gradient(90deg, rgba(38,33,30,.86) 0%, rgba(38,33,30,.55) 46%, rgba(38,33,30,.15) 100%),
    var(--slide-bg);
  background-size: cover; background-position: center;
  color: #fff;
}
.hero-slide__inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-3); max-width: 640px; padding-block: var(--space-6);
}
.hero-slide .overline { color: var(--color-brand-primary); }
.hero-slide__title {
  color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.06; letter-spacing: -0.01em;
}
.hero-slide__title em { font-style: italic; color: var(--color-brand-primary); }
.hero-slide__lead { color: rgba(255,255,255,.85); font-size: var(--fs-lg); max-width: 42ch; }
.hero-slide .btn { margin-top: var(--space-2); }

/* Slide 1 · imagen responsive con swap por media query.
   Mobile: la slide es corta y el texto la ocupa casi entera → overlay parejo
   para legibilidad (la foto queda como telón cálido). */
.hero-slide--001 {
  --slide-bg: url('../../images/slide001-mobile.png');
  background-image:
    linear-gradient(180deg, rgba(38,33,30,.86) 0%, rgba(38,33,30,.66) 55%, rgba(38,33,30,.5) 100%),
    var(--slide-bg);
}
/* Desktop: imagen ancha → oscurece la izquierda (texto) y revela los productos
   hacia la derecha (copas, marco) sin taparlos. */
@media (min-width: 768px) {
  .hero-slide--001 {
    --slide-bg: url('../../images/slide001-desktop.png');
    background-image:
      linear-gradient(100deg, rgba(38,33,30,.92) 0%, rgba(38,33,30,.72) 42%, rgba(38,33,30,.34) 66%, rgba(38,33,30,0) 90%),
      var(--slide-bg);
    background-position: center right;
  }
}

/* Slide 2 · foto editorial (acompañamiento) con swap por media query. */
.hero-slide--002 {
  --slide-bg: url('../../images/slide002-mobile.png');
  background-image:
    linear-gradient(180deg, rgba(38,33,30,.84) 0%, rgba(38,33,30,.62) 55%, rgba(38,33,30,.46) 100%),
    var(--slide-bg);
}
@media (min-width: 768px) {
  .hero-slide--002 {
    --slide-bg: url('../../images/slide002-desktop.png');
    background-image:
      linear-gradient(100deg, rgba(38,33,30,.9) 0%, rgba(38,33,30,.62) 44%, rgba(38,33,30,.24) 70%, rgba(38,33,30,.05) 100%),
      var(--slide-bg);
    background-position: center;
  }
}

.hero-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; z-index: 2;
  background: rgba(255,255,255,.85); color: var(--color-text-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl); line-height: 1; transition: var(--transition-fast);
}
.hero-slider__arrow:hover { background: #fff; }
.hero-slider__arrow--prev { left: var(--space-4); }
.hero-slider__arrow--next { right: var(--space-4); }

.hero-slider__dots {
  position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--space-2); z-index: 2;
}
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); transition: var(--transition-fast); }
.hero-dot.is-active { background: #fff; width: 22px; border-radius: var(--radius-pill); }

/* ============================================================
   FRANJA DE VALOR (Home)
   ============================================================ */
.value-strip { background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-line); }
.value-strip__inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-2) var(--space-7); padding-block: var(--space-4);
  text-align: center;
}
.value-strip span {
  font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   PAGE HERO (Nosotros / Contacto)
   ============================================================ */
.page-hero { padding-block: var(--space-9) var(--space-6); border-bottom: 1px solid var(--color-line); }
.page-hero h1 { margin-block: var(--space-3) var(--space-4); max-width: 20ch; }
.page-hero .lead { max-width: 60ch; }

/* Páginas legales (Términos, Privacidad) */
.legal { max-width: 760px; }
.legal__updated { font-size: var(--fs-sm); color: var(--color-text-soft); margin-bottom: var(--space-7); }
.legal h2 { font-size: var(--fs-xl); margin: var(--space-8) 0 var(--space-3); }
.legal h2:first-of-type { margin-top: 0; }
.legal p { color: var(--color-text-muted); line-height: var(--lh-body); margin-bottom: var(--space-4); }
.legal ul { margin: 0 0 var(--space-4) var(--space-5); color: var(--color-text-muted); line-height: var(--lh-body); }
.legal li + li { margin-top: var(--space-2); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-8); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-info { background: var(--color-bg-elevated); border: 1px solid var(--color-line); border-radius: var(--radius-premium); padding: var(--space-6); }
.contact-info__list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.contact-info__list li { display: flex; flex-direction: column; gap: 2px; }
.contact-info__list .soft { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; }
.contact-info__list a { font-size: var(--fs-md); color: var(--color-text-dark); }
.contact-info__list a:hover { color: var(--color-brand-primary); }

@media (max-width: 860px) {
  .hero-slider__arrow { display: none; }
  .contact-layout { grid-template-columns: 1fr; }
}