/* ==========================================================================
   marcas.css: Auto Summit premium (ford.html / chery.html)
   Estilos propios de las paginas de marca, prefijados con `.brand-`.
   No redefine componentes de components.css: usa .card, .chip, .btn, .modal,
   .field tal cual. Depende de tokens.css + base.css + components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
 * Hero split de marca: consume .hero-photo--split de la fundacion (foto del
 * modelo estrella sangrando fuera del contenedor). Aqui solo el contenido de
 * texto: eyebrow con acento por marca, telefono en mono grande y prueba social.
 * ------------------------------------------------------------------------ */
/* El texto del hero split va SIEMPRE por encima de la foto que sangra, para
   que la trompa del auto entre al bloque sin llegar a tapar ninguna palabra. */
.hero-photo--split .hero-photo__content {
  z-index: 1;
}
/* Scrim de legibilidad: donde la foto del modelo entra al bloque de texto,
   un velo navy detras del contenido (mas denso del lado del texto, transparente
   hacia la foto) garantiza contraste incluso con fotos de fondo claro (Chery
   en estudio blanco), sin apagar el sangrado del auto. Solo desktop, que es
   donde ocurre el solape; en movil la foto va aparte. */
@media (min-width: 900px) {
  .hero-photo--split .hero-photo__content::before {
    content: "";
    position: absolute;
    inset: -10% -8%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      var(--navy) 40%,
      rgba(13, 22, 55, 0.72) 62%,
      transparent 100%
    );
  }
  .hero-photo--split.hero-photo--mirror .hero-photo__content::before {
    background: linear-gradient(
      270deg,
      var(--navy) 40%,
      rgba(13, 22, 55, 0.72) 62%,
      transparent 100%
    );
  }
}
.brand-hero__eyebrow {
  color: var(--orange);
}
body[data-page="chery"] .brand-hero__eyebrow {
  color: var(--chery-red);
}

/* Telefono de ventas como pieza de tablero: mono grande, blanco, hover naranja. */
.brand-hero__tel {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-7);
}
.brand-hero__tel-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-navy-50);
}
.brand-hero__tel-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  transition: color var(--t-fast);
}
.brand-hero__tel:hover .brand-hero__tel-num {
  color: var(--orange);
}
.brand-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.brand-hero__proof {
  margin-top: var(--space-7);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--on-navy-72);
}

/* --------------------------------------------------------------------------
 * Marquee de modelos (sello 6): la cinta ya vive en components.css; aqui solo
 * garantizamos que respire entre el hero navy y el grid claro.
 * ------------------------------------------------------------------------ */
.brand-marquee-strip {
  padding-block: var(--space-9);
}

/* --------------------------------------------------------------------------
 * Filtros + contador
 * ------------------------------------------------------------------------ */
.brand-section-num {
  display: block;
  margin-bottom: var(--space-4);
}
.brand-filters-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.brand-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
 * Card de modelo
 * ------------------------------------------------------------------------ */
.brand-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.brand-card[hidden] {
  display: none;
}
.brand-card__media {
  aspect-ratio: 4 / 3;
  background: var(--navy-2);
  overflow: hidden;
}
.brand-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom en hover con la duracion y el ease firma de la direccion de arte. */
  transition: transform var(--dur-card) var(--ease-signature);
}
.brand-card:hover .brand-card__media img {
  transform: scale(1.06);
}
.brand-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.brand-card__placeholder img {
  width: 40%;
  opacity: 0.6;
}
.brand-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.brand-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h5);
  letter-spacing: -0.01em;
}
.brand-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.brand-card__price-usd {
  font-weight: 600;
  font-size: var(--fs-h5);
  color: var(--orange-deep);
}
.brand-card__price-pen {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.brand-card__chips {
  margin-top: var(--space-1);
}
.brand-card__versions {
  border-top: 1px dashed var(--line);
  padding-top: var(--space-3);
}
.brand-card__versions summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--orange-deep);
  list-style: none;
}
.brand-card__versions summary::-webkit-details-marker {
  display: none;
}
.brand-card__versions summary::before {
  content: "+ ";
}
.brand-card__versions[open] summary::before {
  content: "− ";
}
.brand-card__version-list {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.brand-card__version-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.brand-card__version-price {
  color: var(--orange-deep);
  font-weight: 500;
}
.brand-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.brand-card__link {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.brand-card__link:hover {
  color: var(--orange-deep);
}

/* --------------------------------------------------------------------------
 * Acento Chery: SOLO puntual (borde superior de card + badge de marca).
 * Nunca superficies grandes de --chery-red (SPEC 6).
 * ------------------------------------------------------------------------ */
body[data-page="chery"] .brand-card {
  border-top: 3px solid var(--chery-red);
}

/* --------------------------------------------------------------------------
 * Modal de cotizacion: ajustes puntuales sobre .modal/.field del sistema
 * ------------------------------------------------------------------------ */
.brand-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
 * Franja final: test drive con foto (no cards con iconito). Foto de un modelo
 * a un lado, promesa + CTA al otro, sobre navy con grano.
 * ------------------------------------------------------------------------ */
.brand-testdrive {
  overflow: hidden;
}
.brand-testdrive__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.brand-testdrive__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-2);
}
.brand-testdrive__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-card) var(--ease-signature);
}
.brand-testdrive:hover .brand-testdrive__media img {
  transform: scale(1.05);
}
.brand-testdrive__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.brand-testdrive__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.brand-testdrive__micro {
  font-size: var(--fs-sm);
  color: var(--on-navy-72);
}
@media (max-width: 900px) {
  .brand-testdrive__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .brand-testdrive__media {
    order: -1;
  }
}

/* Cross-sell sobrio: dos enlaces editoriales, no cards con iconito. */
.brand-crosslinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-12);
  margin-top: var(--space-10);
}
.brand-crosslink {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-3);
}
.brand-crosslink__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: 1;
  color: var(--orange);
}
.brand-crosslink__title {
  font-size: var(--fs-h5);
  margin-bottom: var(--space-2);
}
.brand-crosslink__title a {
  color: #fff;
  text-decoration: none;
  transition: color var(--t-fast);
}
.brand-crosslink__title a:hover {
  color: var(--orange);
}
.brand-crosslink p {
  margin: 0;
  color: var(--on-navy-72);
  font-size: var(--fs-sm);
}
@media (max-width: 640px) {
  .brand-crosslinks {
    grid-template-columns: 1fr;
  }
}