/* ═══════════════════════════════════════════════════════════════════════════
   INTERIORES — el diseño de las páginas que no son la portada.

   Nace del reclamo de Rodrigo Mena (31-ago-2026): «la estructura de las demás
   —catálogo, distribuidores, etc.— me gustó, pero están muy simples, todo es
   blanco y sin nada de diseño».

   No replantea nada: la estructura se queda igual. Pone las dos cosas que
   faltaban en cada página interna —una FOTO REAL del cliente junto al titular,
   y UNA SECCIÓN OSCURA invertida que sostiene el argumento— usando los tokens
   que cada marca ya trae (--fondo, --acento, --acento-vivo, --hueso, --linea).
   Una sola pieza para las tres marcas y los dos idiomas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. El titular deja de flotar solo en el crema ─────────────────────── */

.cabFoto {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.cabFoto > .cab { margin: 0; max-width: none; }

.cabFoto .marco {
  margin: 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--panel2);
  aspect-ratio: 4 / 5;
  box-shadow: 0 42px 84px -52px rgba(20, 20, 15, .55);
}
.cabFoto .marco img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El pie de foto va DENTRO, sobre un degradado local que arranca en 0 —
   nunca una capa oscura encima de toda la imagen. */
.cabFoto .marco figcaption,
.oscura .marco figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 44px 16px 14px;
  color: #fff;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase; line-height: 1.5;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.26) 46%, rgba(0,0,0,0) 100%);
}

@media (max-width: 900px) {
  .cabFoto { grid-template-columns: 1fr; gap: 24px; }
  .cabFoto > .cab { order: 1; }
  .cabFoto .marco { order: 2; aspect-ratio: 4 / 3; }
}

/* ── 2. La sección oscura invertida ────────────────────────────────────── */
/* El grafito sale de la tinta de cada marca aclarada con su propio crema:
   así cada sitio tiene SU oscuro y ninguno cae en negro puro. */

.oscura {
  background: #26241D;
  background: color-mix(in oklab, var(--hueso) 84%, var(--fondo) 16%);
  color: var(--fondo);
  margin-top: clamp(46px, 7vw, 92px);
  padding: clamp(52px, 7vw, 96px) 0;
}
.oscura .eyebrow { color: var(--acento-vivo); }
.oscura h2, .oscura h3, .oscura b, .oscura strong { color: var(--fondo); }
.oscura p, .oscura li { color: rgba(255, 255, 255, .76); }

.oscura .dosCol {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
}
.oscura .marco {
  margin: 0; position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  aspect-ratio: 4 / 5;
  box-shadow: 0 42px 84px -52px rgba(0, 0, 0, .7);
}
.oscura .marco img { width: 100%; height: 100%; object-fit: cover; display: block; }

.oscura .grande {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 860;
  font-size: clamp(28px, 3.9vw, 46px);
  line-height: 1.06; letter-spacing: -.026em;
  margin: 12px 0 0; color: var(--fondo);
}
.oscura .grande i { font-style: normal; color: var(--acento-vivo); }

/* Los números: dato real, nunca inventado. */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.cifra {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 15px 15px 14px;
  background: rgba(255, 255, 255, .05);
}
.cifra b {
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 86, 'wght' 850;
  font-size: clamp(24px, 3vw, 33px); line-height: 1;
  letter-spacing: -.02em; color: var(--acento-vivo);
  font-variant-numeric: tabular-nums;
}
.cifra span {
  display: block; margin-top: 7px;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}

.oscura .btn.btn-o {
  border-color: rgba(255, 255, 255, .32);
  color: var(--fondo);
}
.oscura .btn.btn-o:hover { border-color: var(--acento-vivo); color: var(--acento-vivo); }

@media (max-width: 900px) {
  .oscura .dosCol { grid-template-columns: 1fr; gap: 24px; }
  .oscura .marco { order: 2; aspect-ratio: 4 / 3; }
  .oscura .dosCol > div { order: 1; }
  .cifras { grid-template-columns: 1fr; gap: 10px; }
  .cifra { display: flex; align-items: baseline; gap: 12px; }
  .cifra b { font-size: 26px; }
  .cifra span { margin-top: 0; }
}

/* ── 3. El encabezado se lee HORIZONTAL, no en una columna angosta ──────── */
/* Reclamo de Alex (31-ago-2026): «el título y eso ponlo horizontal, en todas
   las páginas, porque tiene un hueco a la derecha blanco». El `.cab` nacía con
   `max-width:44ch`, así que el titular caía en tres o cuatro renglones y la
   mitad derecha del ancho se quedaba en crema vacío.
   De 920px para arriba se reparte: antetítulo y titular a la izquierda, la
   entrada a la derecha, alineados por su base. Abajo de 920 se queda apilado
   igual que antes — en teléfono partirlo lo rompería.
   Solo aplica al encabezado que SÍ trae entrada: uno de puro titular no tiene
   nada con qué llenar la segunda columna. */

@media (min-width: 920px) {
  body .cab:has(> p) {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: clamp(30px, 4vw, 58px);
    row-gap: 12px;
    align-items: end;
    max-width: none;
  }
  body .cab:has(> p) > .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 2px; }
  body .cab:has(> p) > h1,
  body .cab:has(> p) > h2 { grid-column: 1; grid-row: 2; margin: 0; }
  body .cab:has(> p) > p  { grid-column: 2; grid-row: 2; margin: 0; max-width: 40ch; }

  /* Dentro de .cabFoto el encabezado ya vive en una rejilla de dos con la
     foto: ahí NO se vuelve a partir, se quedaría en columnas de 200px. */
  body .cabFoto > .cab:has(> p) {
    display: flex; flex-direction: column; gap: 14px; max-width: none;
  }
}