/* ==========================================================================
   MINI Ecuador — estilos base (todas las páginas)
   Tokens oficiales: design.md §3.2 (manual MINI). No usar colores ni medidas sueltos.
   ========================================================================== */

/* ---------- Tipografías oficiales (WOFF2, latín) ---------- */
@font-face { font-family: "MINI Serif"; src: url("../Fonts/mini-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MINI Serif"; src: url("../Fonts/mini-serif-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MINI Serif"; src: url("../Fonts/mini-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "MINI Sans Serif"; src: url("../Fonts/mini-sans-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MINI Sans Serif"; src: url("../Fonts/mini-sans-serif-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Color (CI-STA p. 21, 52) */
  --color-negro: #000000;
  --color-blanco: #ffffff;
  --color-amarillo: #ffe419;
  --color-naranja: #ed510d;
  --color-rojo: #b51919;
  --color-azul-claro: #56c5e5;
  --color-azul: #2d46df;
  --color-turquesa: #26d6c3;
  --color-verde: #01693e;
  --color-jcw-rojo: #cc0000;
  --color-jcw-verde: #006139;
  --gris-fondo: #f5f5f5;
  --gris-linea: #e0e0e0;
  --gris-borde: #d9d9d9;
  --gris-medio: #b4b4b4;   /* líneas base de pestañas y tablas de mini.com.mx */
  --color-texto-secundario: #444444;
  --color-texto-suave: #5a5a5a;
  /* Acento de interfaz (botón principal, enlaces, foco, menú activo): el de mini.com.mx, medido en el botón
     «CONFIGÚRALO» (reposo rgb(1,126,164); hover/foco rgb(0,101,131)). Contraste con blanco 4,6:1 (AA).
     El azul de comunicación (--color-azul) queda solo para el marco, como pide el manual (CI-STA p. 21). */
  --color-acento: #017ea4;
  --color-acento-hover: #006583;
  --gris-hover: #e0e0e0;

  /* Tipografía (CI-STA p. 15–19) */
  --fuente-titulares: "MINI Serif Headline", "MINI Serif", Georgia, "Times New Roman", serif;
  --fuente-texto: "MINI Serif", Georgia, "Times New Roman", serif;
  --fuente-ui: "MINI Sans Serif", Arial, Helvetica, sans-serif;
  --peso-regular: 400;
  --peso-bold: 700;
  --lh-titular: 1.1;
  --lh-texto: 1.6;

  /* Medida X = altura del ala del logo (CI-STA p. 6, 9–10) */
  --x: clamp(20px, 3.125vw, 60px);
  --esp-05x: calc(var(--x) * .5);
  --esp-1x: var(--x);
  --esp-2x: calc(var(--x) * 2);
  --marco-grosor: calc(var(--x) / 3);

  /* Interfaz */
  --alto-cabecera: 64px;
  --ancho-max: 1200px;
  --ancho-lectura: 68ch;
  --tactil-min: 44px;
  --transicion: .25s ease;
  --z-cabecera: 1000;
  --z-submenu: 1200;
  --z-banner: 3000;

  /* Esquinas redondeadas: las del sitio original (pedido del usuario, revierte CM-13) y botones en píldora
     como MINI México (pedido del usuario, ajusta CM-12) */
  --radio-boton: 999px;
  --radio-panel: 16px;
  --radio-imagen: 14px;
  --radio-caja: 12px;
  --radio-tarjeta: 10px;
  --radio-item: 6px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: var(--lh-texto);
  color: var(--color-negro);
  background: var(--color-blanco);
  padding-top: var(--alto-cabecera);
  overflow-x: clip;
}
img, picture, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
/* Punto de enfoque de una imagen recortada (object-fit: cover): lo declara el registro del medio ('foco'), ver imagen() */
.imagen--foco-arriba { object-position: 50% 22%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulares);
  font-weight: var(--peso-bold);
  line-height: var(--lh-titular);
  letter-spacing: normal;
  margin: 0 0 .5em;
}
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
/* Elementos que reciben el foco por código (títulos al cambiar de modelo, destinos de salto): sin recuadro */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
[hidden] { display: none !important; }

.solo-lector {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar-contenido {
  position: absolute; left: 8px; top: -60px; z-index: 5000;
  background: var(--color-negro); color: var(--color-blanco);
  padding: 10px 16px; font-family: var(--fuente-ui); text-decoration: none;
}
.saltar-contenido:focus { top: 8px; }
.contenedor { width: min(100% - 32px, var(--ancho-max)); margin-inline: auto; }
.icono { width: 24px; height: 24px; flex: none; }

/* ---------- Botones (CI-STA p. 16, 33–35: rectangulares, Sans en mayúsculas) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 56px; padding: 0 24px;
  font-family: var(--fuente-ui); font-weight: var(--peso-regular); font-size: 1.125rem; line-height: 1.25rem;
  text-transform: uppercase; letter-spacing: normal; text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--radio-boton);
  transition: color .2s ease-in-out, opacity .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}
/* Foco como mini.com.mx: anillo blanco + acento + blanco (se ve sobre fotos y sobre fondo blanco) */
.boton:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-blanco), 0 0 0 6px var(--color-acento), 0 0 0 8px var(--color-blanco); }
.boton--primario { background: var(--color-acento); color: var(--color-blanco); border-color: transparent; }
.boton--primario:hover, .boton--primario:focus-visible, .boton--primario:active { background: var(--color-acento-hover); }
.boton--neutro { background: var(--color-negro); color: var(--color-blanco); border-color: var(--color-negro); }
.boton--neutro:hover { background: var(--color-blanco); color: var(--color-negro); }
.boton--claro { background: var(--color-blanco); color: var(--color-negro); border-color: var(--color-blanco); }
.boton--claro:hover, .boton--claro:focus-visible { background: var(--gris-hover); border-color: var(--gris-hover); color: var(--color-negro); }
.boton--contorno { background: transparent; color: var(--color-negro); border-color: var(--color-negro); }
.boton--contorno:hover { background: var(--color-negro); color: var(--color-blanco); }
.boton--contorno-claro { background: transparent; color: var(--color-blanco); border-color: var(--color-blanco); }
.boton--contorno-claro:hover { background: var(--color-blanco); color: var(--color-negro); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: var(--z-cabecera);
  height: var(--alto-cabecera);
  background: var(--color-blanco); border-bottom: 1px solid var(--gris-linea);
  font-family: var(--fuente-ui);
}
.cabecera__interior { height: 100%; display: flex; align-items: stretch; justify-content: flex-start; gap: clamp(24px, 4vw, 64px); padding: 0 clamp(16px, 2vw, 28px); }
.cabecera__logo { display: flex; align-items: center; min-height: var(--tactil-min); padding: 7px 0; flex: none; }
.cabecera__logo img { height: 36px; width: auto; }
.cabecera__derecha { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cabecera__boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tactil-min); height: var(--tactil-min);
  background: none; border: 0; color: var(--color-negro); text-decoration: none;
}
.cabecera__menu-movil { display: none; }
.cabecera__menu-movil .icono--cerrar { display: none; }
.cabecera__menu-movil[aria-expanded="true"] .icono--abrir { display: none; }
.cabecera__menu-movil[aria-expanded="true"] .icono--cerrar { display: block; }

/* Menú de escritorio: los submenús se abren con clic (como el original) o con el teclado */
.menu__lista, .submenu { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; align-items: stretch; }
.menu__lista { display: flex; align-items: stretch; gap: clamp(16px, 2.2vw, 32px); }
.menu__lista > .menu__item { display: flex; align-items: center; }
.menu__item { position: relative; }
.menu__enlace, .menu__disparador {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: var(--tactil-min); padding: 0;
  background: none; border: 0;
  font-size: .9375rem; text-transform: none; letter-spacing: normal; text-decoration: none; color: var(--color-negro);
  white-space: nowrap;
}
.menu__enlace:hover, .menu__disparador:hover, .menu__disparador[aria-expanded="true"], .menu__enlace[aria-current="page"] { color: var(--color-acento); }
/* Barra del ítem activo al pie de la cabecera (escritorio) */
@media (min-width: 769px) {
  .menu__lista > .menu__item { position: relative; }
  .menu__lista > .menu__item::after {
    content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 3px;
    background: var(--color-acento); transform: scaleX(0); transition: transform var(--transicion);
  }
  .menu__lista > .menu__item:has(> [aria-current="page"])::after,
  .menu__lista > .menu__item:has(> [aria-expanded="true"])::after,
  .menu__lista > .menu__item:hover::after { transform: scaleX(1); }
  .submenu { top: 100%; }
}
.menu__chevron { width: 16px; height: 16px; transition: transform var(--transicion); }
.menu__disparador[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }
.submenu {
  display: none; position: absolute; z-index: var(--z-submenu);
  top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 220px; padding: 8px 0; flex-direction: column;
  background: var(--color-blanco); border: 1px solid var(--gris-linea);
}
.menu__item--abierto > .submenu, .menu__item--sub:focus-within > .submenu { display: flex; }
.submenu .menu__enlace, .submenu .menu__disparador { width: 100%; justify-content: space-between; padding: 0 16px; font-size: .875rem; }
.submenu .menu__enlace:hover, .submenu .menu__disparador:hover { background: var(--gris-fondo); text-decoration: none; }
.submenu--n3 { top: -9px; left: 100%; transform: none; }
.submenu .menu__disparador[aria-expanded="true"] .menu__chevron { transform: none; }

@media (max-width: 768px) {
  .cabecera__menu-movil { display: inline-flex; }
  .menu {
    display: none; position: fixed; inset: var(--alto-cabecera) 0 0;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-blanco); padding: 8px 20px 32px;
  }
  .menu--abierto { display: block; }
  body.menu-abierto { overflow: hidden; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista > .menu__item { border-bottom: 1px solid var(--gris-linea); }
  .menu__enlace, .menu__disparador { width: 100%; justify-content: space-between; min-height: 52px; font-size: 1rem; }
  .submenu, .submenu--n3 { position: static; transform: none; border: 0; min-width: 0; padding: 0 0 8px 16px; }
  .menu__item--sub:focus-within > .submenu { display: none; }
  .menu__item--abierto > .submenu { display: flex; }
  .submenu .menu__enlace, .submenu .menu__disparador { padding: 0; font-size: .9375rem; }
  .submenu .menu__disparador[aria-expanded="true"] .menu__chevron { transform: rotate(90deg); }
}

/* ---------- Pie ---------- */
.pie { text-align: center; padding: 30px 20px 24px; font-family: var(--fuente-texto); border-top: 1px solid var(--gris-linea); }
.pie__titulo { font-size: 1.125rem; margin: 0 0 14px; }
.pie__redes { list-style: none; display: flex; justify-content: center; gap: 12px; margin: 0 0 16px; padding: 0; }
.pie__red {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tactil-min); height: var(--tactil-min); border: 1px solid var(--color-negro); border-radius: 50%;
  color: var(--color-negro); transition: background-color var(--transicion), color var(--transicion);
}
.pie__red .icono { width: 20px; height: 20px; }
.pie__red:hover { background: var(--color-negro); color: var(--color-blanco); }
.pie__enlaces { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0; padding: 0; font-family: var(--fuente-ui); font-size: .8125rem; }
.pie__enlaces a, .pie__cookies { display: inline-flex; align-items: center; min-height: var(--tactil-min); color: var(--color-negro); text-decoration: none; background: none; border: 0; padding: 0; font-size: inherit; }
.pie__enlaces a:hover, .pie__cookies:hover { text-decoration: underline; }
.pie__linea { border: 0; border-top: 1px solid var(--gris-linea); margin: 12px auto 20px; max-width: var(--ancho-max); }
.pie__logo { height: 30px; width: auto; margin: 0 auto; }

/* ---------- Aviso y preferencias de cookies ---------- */
.cookies-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: var(--z-banner);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 16px 20px; background: rgb(17 17 17 / .96); color: var(--color-blanco);
  font-family: var(--fuente-ui); font-size: .8125rem;
}
.cookies-banner__texto { margin: 0; flex: 1 1 320px; }
.cookies-banner__texto a { color: var(--color-blanco); }
.cookies-banner__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cookies-banner .boton { min-height: var(--tactil-min); padding: 8px 18px; font-size: .75rem; }

.cookies-modal { width: min(980px, 100% - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 0; color: var(--color-negro); }
.cookies-modal::backdrop { background: rgb(0 0 0 / .55); }
.cookies-modal__tarjeta { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); font-family: var(--fuente-ui); }
.cookies-modal__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--gris-linea); }
.cookies-modal__titulo { font-size: 1.25rem; margin: 0; }
.cookies-modal__cerrar { display: inline-flex; align-items: center; justify-content: center; width: var(--tactil-min); height: var(--tactil-min); background: none; border: 0; }
.cookies-modal__cuerpo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; padding: 20px; overflow-y: auto; }
.cookies-modal__config { border: 1px solid var(--gris-linea); padding: 16px; font-size: .875rem; }
.cookies-modal__config h3 { font-family: var(--fuente-ui); font-size: 1rem; }
.cookies-modal__politica { width: 100%; height: 420px; border: 1px solid var(--gris-linea); }
.cookies-modal__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--gris-linea); }
.interruptor { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gris-linea); cursor: pointer; }
.interruptor__texto strong { display: block; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista { position: relative; width: 44px; height: 24px; background: var(--gris-borde); transition: background-color var(--transicion); }
.interruptor__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--color-blanco); transition: transform var(--transicion); }
.interruptor input:checked + .interruptor__pista { background: var(--color-negro); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(20px); }
.interruptor input:disabled + .interruptor__pista { opacity: .5; }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--color-acento); outline-offset: 2px; }
@media (max-width: 900px) {
  .cookies-modal__cuerpo { grid-template-columns: 1fr; }
  .cookies-modal__politica { height: 320px; }
}

/* ---------- Ventana MINI Owners Club ---------- */
/* Esquinas ligeramente redondeadas: excepción a CM-13 pedida por el usuario para esta ventana */
.owners-club {
  position: fixed; width: min(680px, 100% - 24px); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--color-negro);
}
.owners-club::backdrop { background: rgb(0 0 0 / .62); }
.owners-club__imagen { display: block; }
.owners-club__imagen img { width: 100%; height: auto; max-height: calc(100dvh - 24px); object-fit: contain; }
.owners-club__cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tactil-min); height: var(--tactil-min); border: 0; border-radius: 50%;
  background: var(--color-blanco); color: var(--color-negro);
}
/* Sobre la franja oscura inferior de la imagen (contraste alto, sin caja blanca debajo) */
.owners-club__nunca {
  position: absolute; right: 12px; bottom: 8px; z-index: 1;
  min-height: var(--tactil-min); padding: 0 8px; background: none; border: 0;
  color: var(--color-blanco); text-decoration: underline; text-underline-offset: 3px;
  font-family: var(--fuente-ui); font-size: .8125rem; text-shadow: 0 1px 2px rgb(0 0 0 / .8);
}

/* ---------- Videos automáticos ---------- */
.video-auto { width: 100%; background: var(--color-negro); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Formularios: campo trampa (antispam) ---------- */
.campo-trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Esquinas redondeadas del original (cookies) ---------- */
.cookies-banner { border-radius: var(--radio-imagen); }
.cookies-modal { border-radius: var(--radio-panel); }
.cookies-modal__config, .cookies-modal__politica { border-radius: var(--radio-caja); }
.interruptor__pista { border-radius: var(--radio-boton); }
.interruptor__pista::after { border-radius: 50%; }