/* ============================================================
   SCRUM — Secciones y páginas
   ============================================================ */

/* ------------------------------------------------------------
   HERO — la tesis de la marca
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--pitch-deep);
  color: var(--chalk);
  overflow: hidden;
  contain: paint; /* el scale(1.1→1) del fondo no debe filtrar scroll horizontal */
  /* La nav sticky transparente se apoya encima del hero */
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + var(--s-6));
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  animation: heroDrift 34s var(--ease) infinite alternate;
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
  .hero__media { animation: none; }
}

/* Duotono verde: el pasto mojado bajo reflector */
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--pitch-deep) 2%, rgba(11,26,19,.82) 34%, rgba(11,26,19,.34) 68%, rgba(11,26,19,.6)),
    linear-gradient(105deg, rgba(18,41,31,.85), rgba(11,26,19,.25) 55%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--brass-soft);
  margin-bottom: var(--s-5);
}
.hero__eyebrow::before { content: ''; width: 40px; height: 3px; background: var(--brass); }

/* El título rompe la grilla: dos líneas desplazadas */
.hero__title { margin-bottom: var(--s-6); }
.hero__title span { display: block; }
.hero__title .l2 { padding-left: clamp(0px, 7vw, 8.5rem); color: var(--brass-soft); }

.hero__foot {
  display: grid;
  gap: var(--s-6);
  align-items: end;
  padding-top: var(--s-6);
  border-top: 1px solid rgba(242,239,233,.2);
}
@media (min-width: 860px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); }
}
.hero__foot p {
  font-family: var(--font-serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 20, 'WONK' 0;
  font-weight: 300;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: #C8D5CD;
  max-width: 40ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Contadores de campaña */
.hero__stats { display: flex; gap: var(--s-7); flex-wrap: wrap; margin-top: var(--s-6); }
.hero__stat strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 116;
  font-size: var(--t-xl); font-weight: 800;
  line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero__stat span { font-size: var(--t-2xs); letter-spacing: .15em; text-transform: uppercase; color: #8FA79A; }

/* Entrada escalonada del hero */
.hero__inner > * { animation: riseIn 900ms var(--ease-out) both; }
.hero__inner > *:nth-child(1) { animation-delay: 120ms; }
.hero__inner > *:nth-child(2) { animation-delay: 220ms; }
.hero__inner > *:nth-child(3) { animation-delay: 340ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__inner > *, .hero__media img { animation: none; }
}

.scroll-cue {
  position: absolute;
  right: var(--gutter); bottom: clamp(2.5rem, 5vw, 5rem);
  z-index: 3;
  display: none;
  writing-mode: vertical-rl;
  font-size: var(--t-2xs); letter-spacing: .2em; text-transform: uppercase;
  color: #8FA79A;
  align-items: center; gap: var(--s-3);
}
@media (min-width: 1500px) { .scroll-cue { display: flex; } }
.scroll-cue::after {
  content: ''; width: 1px; height: 54px;
  background: linear-gradient(to bottom, var(--brass), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%,100% { opacity: .35; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ------------------------------------------------------------
   Grid de productos
   ------------------------------------------------------------ */
.p-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
}
@media (min-width: 680px)  { .p-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-6) var(--s-5); } }
@media (min-width: 1080px) { .p-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.p-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 780px) { .p-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Grid editorial: la nueva colección no se alinea a la baseline */
@media (min-width: 900px) {
  .p-grid--editorial > *:nth-child(2) { margin-top: var(--s-9); }
  .p-grid--editorial > *:nth-child(4) { margin-top: var(--s-9); }
}

/* ------------------------------------------------------------
   Rail horizontal — Retro Heritage
   ------------------------------------------------------------ */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70vw, 1fr);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-5);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 640px)  { .rail { grid-auto-columns: minmax(38vw, 1fr); gap: var(--s-5); } }
@media (min-width: 1024px) { .rail { grid-auto-columns: minmax(23rem, 1fr); } }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-track { background: var(--line); }
.rail::-webkit-scrollbar-thumb { background: var(--fg-muted); }

/* Card de archivo con año grabado */
.arch-card { position: relative; }
.arch-card__year {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  z-index: 2;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 118;
  font-size: var(--t-xl); font-weight: 900;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(242,239,233,.75);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.arch-card:hover .arch-card__year { color: rgba(242,239,233,.92); }

/* ------------------------------------------------------------
   Split editorial (Filosofía / Historia)
   ------------------------------------------------------------ */
.split { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 7rem); }
  .split--reverse > *:first-child { order: 2; }
}
.split__media { position: relative; }
.split__media .ratio { border-radius: var(--r-sm); }
/* Cita superpuesta que rompe el borde de la imagen */
.split__tag {
  position: absolute;
  bottom: var(--s-5); left: calc(var(--s-5) * -1);
  background: var(--oxblood);
  color: #fff;
  padding: var(--s-4) var(--s-5);
  max-width: 15rem;
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.4;
  box-shadow: var(--sh-md);
}
@media (max-width: 600px) { .split__tag { left: 0; bottom: calc(var(--s-5) * -1); } }

/* ------------------------------------------------------------
   Manifiesto — bloque de tipografía grande
   ------------------------------------------------------------ */
.manifesto { position: relative; }
.manifesto__q {
  font-family: var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.75rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 22ch;
}
.manifesto__q em { font-style: italic; color: var(--accent); }
.manifesto__by { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-4); }
.manifesto__by img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }

/* ------------------------------------------------------------
   Edición limitada — full bleed oscuro
   ------------------------------------------------------------ */
.limited { position: relative; overflow: hidden; }
.limited__bg { position: absolute; inset: 0; }
.limited__bg img { width: 100%; height: 100%; object-fit: cover; }
.limited__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, var(--pitch-deep) 12%, rgba(11,26,19,.86) 48%, rgba(11,26,19,.5));
}
.limited__inner { position: relative; z-index: 1; display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 940px) { .limited__inner { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--s-10); } }

/* El "8" como número de camiseta, no como adorno */
.limited__numeral {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900;
  font-size: clamp(9rem, 26vw, 22rem);
  line-height: .74;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--brass);
  user-select: none;
}
.limited__spec { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.limited__spec dt { font-size: var(--t-2xs); letter-spacing: .15em; text-transform: uppercase; color: #8FA79A; margin-bottom: 5px; }
.limited__spec dd { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); }

/* ------------------------------------------------------------
   Tiles de categoría
   ------------------------------------------------------------ */
.cat-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-4); } }

.cat-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  contain: paint;
  border-radius: var(--r-sm);
  display: flex; align-items: flex-end;
  color: var(--chalk);
  isolation: isolate;
}
.cat-tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.cat-tile::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(11,26,19,.92) 8%, rgba(11,26,19,.42) 46%, rgba(11,26,19,.12));
  transition: background var(--dur) var(--ease);
}
.cat-tile:hover img { transform: scale(1.07); }
.cat-tile:hover::after { background: linear-gradient(to top, rgba(139,31,43,.9) 6%, rgba(11,26,19,.55) 52%, rgba(11,26,19,.2)); }
.cat-tile__body { padding: var(--s-5); width: 100%; }
.cat-tile h3 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 110;
  font-size: var(--t-lg); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.015em; line-height: 1.05;
}
.cat-tile p { font-size: var(--t-2xs); letter-spacing: .13em; text-transform: uppercase; color: #B9C7BF; margin-top: 6px; }

/* ------------------------------------------------------------
   Campaña full-bleed
   ------------------------------------------------------------ */
.campaign { position: relative; min-height: 78svh; display: grid; align-items: center; overflow: hidden; color: var(--chalk); }
.campaign img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.campaign::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,26,19,.9) 6%, rgba(11,26,19,.55) 48%, rgba(11,26,19,.75));
}
.campaign__inner { position: relative; z-index: 2; }
.campaign__inner .d2 { max-width: 16ch; }

/* ------------------------------------------------------------
   Journal
   ------------------------------------------------------------ */
.j-grid { display: grid; gap: var(--s-7) var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .j-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .j-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.j-card { display: flex; flex-direction: column; position: relative; }
.j-card__media { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 4/3; position: relative; }
.j-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: transform 820ms var(--ease-out), filter var(--dur-slow) var(--ease);
}
.j-card:hover .j-card__media img { transform: scale(1.05); filter: grayscale(0) contrast(1); }
.j-card__body { padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.j-card__meta { display: flex; gap: var(--s-3); align-items: center; }
.j-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); }
.j-card h3 {
  font-family: var(--font-serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 0, 'WONK' 1;
  font-size: var(--t-lg); font-weight: 500; line-height: 1.2; letter-spacing: -.012em;
  transition: color var(--dur-fast) var(--ease);
}
.j-card:hover h3 { color: var(--accent); }
.j-card h3 a::after { content: ''; position: absolute; inset: 0; }
.j-card p { font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.62; }
.j-card__foot { margin-top: auto; padding-top: var(--s-4); font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }

/* Artículo destacado del Journal */
.j-hero { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .j-hero { grid-template-columns: 1.25fr 1fr; gap: var(--s-9); } }
.j-hero__media { position: relative; overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 16/10; }
.j-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   Timeline — Historia (usa la franja como riel)
   ------------------------------------------------------------ */
.timeline { position: relative; display: grid; gap: 0; }
.tl-item {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
  align-items: start;
  transition: background var(--dur) var(--ease);
}
.tl-item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) {
  .tl-item { grid-template-columns: 9rem minmax(0, 18rem) minmax(0, 1fr); gap: var(--s-6); align-items: baseline; }
}
.tl-item__year {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 118;
  font-size: var(--t-xl); font-weight: 900;
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.tl-item__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); text-transform: uppercase; letter-spacing: .01em; }
.tl-item__text { color: var(--fg-muted); font-size: var(--t-base); max-width: 52ch; }

/* ------------------------------------------------------------
   SHOP — barra de filtros
   ------------------------------------------------------------ */
.shop-head { padding-top: var(--s-8); padding-bottom: var(--s-6); }

.filters {
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
  background: var(--chalk);
  border-block: 1px solid var(--line);
  padding-block: var(--s-3);
  margin-bottom: var(--s-8);
}
.filters__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }

.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-muted);
  min-height: 36px;
  display: inline-flex; align-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--pitch); border-color: var(--pitch); color: var(--chalk); }

.filters__tools { display: flex; gap: var(--s-3); align-items: center; margin-left: auto; }
.filters__count { font-size: var(--t-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.filters .select-wrap .field { padding-block: var(--s-2); min-height: 36px; font-size: var(--t-xs); border-radius: 999px; }

/* Panel lateral de filtros finos */
.shop-layout { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 1020px) { .shop-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-9); } }

/* En mobile/tablet los filtros van apilados arriba de la grilla; en desktop pasan a columna lateral sticky */
.facets { padding-bottom: var(--s-7); margin-bottom: var(--s-7); border-bottom: 1px solid var(--line); }
@media (min-width: 1020px) {
  .facets { position: sticky; top: calc(var(--nav-h) + 5rem); padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
}
.facet + .facet { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.facet h3 { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--s-4); }
.facet__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.size-chip {
  min-width: 42px; min-height: 36px;
  display: inline-grid; place-items: center;
  padding-inline: var(--s-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  transition: all var(--dur-fast) var(--ease);
}
.size-chip:hover { border-color: var(--fg); color: var(--fg); }
.size-chip[aria-pressed="true"] { background: var(--pitch); border-color: var(--pitch); color: var(--chalk); }

.no-results { padding-block: var(--s-11); text-align: center; }

/* ------------------------------------------------------------
   PRODUCTO
   ------------------------------------------------------------ */
.pdp { display: grid; gap: var(--s-7); padding-top: var(--s-6); }
@media (min-width: 940px) {
  .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; }
}

.pdp__gallery { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .pdp__gallery { grid-template-columns: repeat(2, 1fr); } }
.pdp__gallery .ratio { border-radius: var(--r-sm); }
@media (min-width: 640px) { .pdp__gallery > *:first-child { grid-column: 1 / -1; } }

.pdp__info { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
@media (max-width: 939px) { .pdp__info { position: static; } }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--t-2xs); letter-spacing: .11em; text-transform: uppercase; color: var(--fg-muted); }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb span { color: var(--fg-faint); }

.pdp__price { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pdp__tagline {
  font-family: var(--font-serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 20, 'WONK' 0;
  font-size: var(--t-lg); font-weight: 300; font-style: italic;
  color: var(--fg-muted); line-height: 1.4;
}

.opt { display: flex; flex-direction: column; gap: var(--s-3); }
.opt__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.opt__val { font-size: var(--t-xs); color: var(--fg-muted); }

.swatches { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.swatch {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  position: relative;
  transition: transform var(--dur-fast) var(--ease);
}
.swatch::after {
  content: ''; position: absolute; inset: -5px;
  border: 1.5px solid transparent; border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease);
}
.swatch:hover { transform: scale(1.06); }
.swatch[aria-pressed="true"]::after { border-color: var(--fg); }

.sizes { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.size-btn {
  min-width: 52px; min-height: 46px;
  padding-inline: var(--s-3);
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: all var(--dur-fast) var(--ease);
}
.size-btn:hover { border-color: var(--fg); }
.size-btn[aria-pressed="true"] { background: var(--pitch); border-color: var(--pitch); color: var(--chalk); }

/* Acordeón de detalles */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-block: var(--s-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
.acc__btn:hover { color: var(--accent); }
.acc__ico { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.acc__ico::before, .acc__ico::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
.acc__ico::before { width: 12px; height: 1.5px; }
.acc__ico::after  { width: 1.5px; height: 12px; transition: transform var(--dur) var(--ease-out); }
.acc__btn[aria-expanded="true"] .acc__ico::after { transform: scaleY(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p, .acc__panel li { font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.65; }
.acc__panel ul { padding-bottom: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.acc__panel li { padding-left: var(--s-4); position: relative; }
.acc__panel li::before { content: ''; position: absolute; left: 0; top: .65em; width: 7px; height: 2px; background: var(--accent); }
.acc__panel > div > p:last-child { padding-bottom: var(--s-5); }

/* Barras de confianza */
.assur { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0,1fr)); padding-block: var(--s-5); }
.assur div { display: flex; gap: var(--s-3); align-items: flex-start; }
.assur svg { width: 19px; height: 19px; stroke: var(--accent); fill: none; stroke-width: 1.6; flex-shrink: 0; margin-top: 1px; }
.assur strong { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; }
.assur span { font-size: var(--t-2xs); color: var(--fg-muted); line-height: 1.5; }

/* ------------------------------------------------------------
   Cabecera de página interior
   ------------------------------------------------------------ */
.page-head {
  background: var(--pitch);
  color: var(--chalk);
  padding-block: clamp(3.5rem, 3rem + 5vw, 7rem);
  position: relative;
  overflow: hidden;
}
.page-head__bg { position: absolute; inset: 0; opacity: .2; }
.page-head__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.page-head__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--pitch) 18%, transparent); }
.page-head__inner { position: relative; z-index: 1; }
.page-head .lead { color: #B9C7BF; }
.page-head__eyebrow { color: var(--brass-soft); margin-bottom: var(--s-4); display: block; }

/* ------------------------------------------------------------
   Bloques de About
   ------------------------------------------------------------ */
.values { display: grid; gap: var(--s-6); }
@media (min-width: 780px) { .values { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-7); } }
.value { padding-top: var(--s-5); border-top: var(--hoop) solid var(--accent); }
.value h3 { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; margin-bottom: var(--s-3); }
.value p { color: var(--fg-muted); font-size: var(--t-base); line-height: 1.65; }

.mosaic { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } }
.mosaic .ratio { border-radius: var(--r-sm); }
@media (min-width: 900px) {
  .mosaic > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .mosaic > *:nth-child(4) { grid-column: span 2; }
}

/* Cifras */
.figures { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 860px) { .figures { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.figure strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 118;
  font-size: var(--t-2xl); font-weight: 900;
  line-height: .9; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.figure span { display: block; margin-top: var(--s-3); font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5; }