/* ============================================================
   Subaru Ecuador — skin de marca
   El brief pide los autos sobre fondos de aventura, así que acá el hero
   es una foto a sangre con la tarjeta del formulario encima. Es la
   diferencia estructural más clara contra Mercedes (estudio blanco) y
   smart (arco lima): Subaru vive afuera.
   ============================================================ */

/* ---------- Avenir, la tipografía de marca (extraída del .ttc del Drive) ---------- */

@font-face {
  font-family: "Avenir";
  src: url("assets/fonts/avenir-roman.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("assets/fonts/avenir-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("assets/fonts/avenir-heavy.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Muestreados del logo vectorial oficial */
  --navy:    #1A2351;   /* el azul del word mark */
  --azul:    #135CA5;   /* el azul de las Pléyades */
  --cielo:   #1E9BD7;   /* el celeste del CTA, del mockup */

  --fg:      #14203C;
  --bg:      #FFFFFF;
  --surface: #EEF1F5;
  --line:    #D5DBE3;
  --muted:   #5A6478;
  --danger:  #C0392B;

  --accent:       var(--cielo);
  --accent-ink:   #FFFFFF;
  --accent-hover: #1785BC;

  --font-display: "Avenir", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Avenir", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Avenir", "Helvetica Neue", Arial, sans-serif;

  --campo: #FFFFFF;   /* superficie de los campos del formulario */
  --field-radius: 4px;
  --radius-card: 8px;

  --panel-w: clamp(360px, 30vw, 440px);
  --nav-h: 72px;
}

::selection { background: var(--cielo); color: #fff; }
.hero, .slider, .panel, .foot { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ============================================================
   HEADER — claro, como en el mockup
   ============================================================ */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--bg); } }

.nav__in {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(16px, 3vw, 46px);
  height: var(--nav-h); padding-inline: var(--gutter);
}
.nav__brand { display: flex; align-items: center; justify-self: start; }
.nav__brand img { width: 132px; height: auto; }

.nav__menu { display: flex; justify-self: center; gap: clamp(16px, 2.2vw, 36px); }
.nav__menu a {
  position: relative; padding-block: 8px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__menu a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
  height: 2px; background: var(--cielo);
  scale: 0 1; transform-origin: left;
  transition: scale var(--dur-base) var(--ease);
}
.nav__menu a:hover { color: var(--cielo); }
.nav__menu a:hover::after { scale: 1 1; }

.nav__acts { display: flex; align-items: center; justify-self: end; gap: 10px; }
.nav__wa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--field-radius);
  font-size: .8125rem; font-weight: 500; color: var(--navy); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__wa:hover { border-color: var(--navy); }
.nav__cta {
  padding: 11px 22px; border-radius: var(--field-radius);
  background: var(--cielo); color: #fff;
  font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__cta:hover { background: var(--accent-hover); }

.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 42px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--field-radius);
  background: none; cursor: pointer;
}
.nav__burger span {
  display: block; height: 2px; background: var(--navy);
  transition: translate var(--dur-base) var(--ease), rotate var(--dur-base) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { translate: 0 6px; rotate: 45deg; }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -6px; rotate: -45deg; }

.nav__movil { display: none; }
.nav__movil a {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: .875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
}
.nav__movil a:last-child { border-bottom: 0; }

/* ============================================================
   HERO — foto de aventura a sangre con el formulario encima
   ============================================================ */

.hero {
  position: relative; isolation: isolate;
  /* minmax(0,...): sin esto la pista crece al max-content del hijo mas ancho
     y se desborda del hero, y cualquier max-width:100% de adentro miente. */
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  min-height: calc(100svh - var(--nav-h));
  overflow: clip;
}

/* Las fotos se cruzan por opacidad; el hero es también el slider. */
.hero__fotos { position: absolute; inset: 0; z-index: 0; }
.hero__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; scale: 1.05;
  transition: opacity 900ms var(--ease), scale 9s linear;
}
.hero__foto.is-on { opacity: 1; scale: 1; }

/* El velo: oscuro a la izquierda para el titular, y un poco arriba y abajo.
   Sin esto el texto blanco depende de qué haya en la foto. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,16,34,.86) 0%, rgba(10,16,34,.66) 26%,
                    rgba(10,16,34,.34) 48%, rgba(10,16,34,.12) 66%, rgba(10,16,34,.05) 100%),
    linear-gradient(to top, rgba(10,16,34,.5) 0%, transparent 34%);
}

.hero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr var(--panel-w);
  align-items: center; gap: clamp(28px, 4vw, 72px);
  width: var(--shell); margin-inline: auto;
  /* el extra de abajo es la franja que ocupa el selector de modelos */
  padding-block: clamp(18px, 2.8vh, 44px) clamp(62px, 9vh, 92px);
}

/* ---------- Copy ---------- */

.copy { color: #fff; }
.headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.06;
  letter-spacing: -0.005em; text-transform: uppercase;
  max-width: 15ch;
}
.headline__line { display: block; overflow-y: clip; overflow-x: visible; }
.headline__line > span { display: block; }

.rule {
  display: block; width: 84px; height: 2px;
  margin-block: clamp(20px, 3vh, 30px) clamp(14px, 2vh, 20px);
  background: var(--cielo); transform-origin: left;
}
.lema {
  font-size: clamp(.875rem, 1vw, 1.0625rem); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

/* Sellos de aventura bajo el lema */
.rasgos {
  display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 30px);
  margin: clamp(26px, 4vh, 44px) 0 0; padding: 0; list-style: none;
}
.rasgo { display: flex; align-items: center; gap: 9px; color: #fff; }
.rasgo svg { flex: none; width: 30px; height: 30px; padding: 6px;
  border-radius: 999px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); color: #fff; }
.rasgo b { font-size: .8125rem; font-weight: 800; letter-spacing: .03em; }

/* ---------- Cotizador en su propia sección (sólo móvil) ---------- */

.cotizar { display: none; background: var(--surface); }
.cotizar__in {
  width: var(--shell); margin-inline: auto;
  padding-block: clamp(38px, 6vh, 64px);
}
.cotizar__titulo {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 5.6vw, 2.1rem); line-height: 1.1;
  text-transform: uppercase; color: var(--navy);
}
.cotizar__bajada {
  margin: 12px 0 24px; max-width: 46ch;
  font-size: .9375rem; line-height: 1.55; color: var(--muted);
}
/* Ahí el panel se apoya en blanco: ya no flota sobre una foto. */
.cotizar .panel {
  background: #fff; backdrop-filter: none;
  box-shadow: 0 14px 40px rgba(20, 32, 60, .10), 0 2px 6px rgba(20, 32, 60, .04);
  gap: clamp(14px, 2vh, 20px);
  padding: clamp(20px, 3vh, 28px) clamp(18px, 4vw, 26px) clamp(18px, 2.6vh, 24px);
}
.cotizar .panel__title { display: none; }   /* el H2 de la sección ya lo dice */

/* ---------- Panel del formulario ---------- */


.panel__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 1.15vw, 1.1875rem); line-height: 1.2;
  letter-spacing: .05em; text-transform: uppercase;
  text-align: center; color: var(--navy);
}

.form { display: grid; gap: clamp(9px, 1.3vh, 13px); }
.legend { font-size: .8125rem; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.field__label { font-weight: 800; color: var(--navy); font-size: .78125rem; }
.field__control { border-radius: var(--field-radius); background: #fff; }
.chip__face { border-radius: var(--field-radius); background: #fff; font-weight: 500; }
.chip__input:checked + .chip__face { border-color: var(--cielo); }
.chip__input:checked + .chip__face::after { border-color: var(--cielo); box-shadow: inset 0 0 0 4px var(--cielo); }

.btn {
  border-radius: var(--field-radius);
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.panel__legal { font-size: .625rem; line-height: 1.45; color: var(--muted); text-align: center; }
.panel__legal a { color: var(--muted); }
.form__feedback { font-size: .78125rem; color: var(--danger); min-height: 1lh; }

/* Tarjetas de modelo con foto */
.mcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mcards--4 { grid-template-columns: repeat(4, 1fr); }
.mcard { position: relative; display: block; cursor: pointer; }
.mcard__in { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mcard__face {
  display: grid; gap: 1px; padding: 7px 5px 8px;
  border: 1px solid var(--line); border-radius: var(--field-radius);
  background: #fff; text-align: center;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mcard__img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: contain; }
.mcard__n { font-size: .6875rem; font-weight: 800; color: var(--navy); line-height: 1.15; }
.mcard__in:hover + .mcard__face { border-color: var(--muted); }
.mcard__in:checked + .mcard__face {
  border-color: var(--cielo);
  box-shadow: inset 0 0 0 1px var(--cielo), 0 0 0 3px color-mix(in srgb, var(--cielo) 26%, transparent);
}
.mcard__in:focus-visible + .mcard__face { outline: 2px solid var(--navy); outline-offset: 3px; }
.mcard__in.is-invalid + .mcard__face { border-color: var(--danger); }

.form-done__star { width: 74px; height: auto; justify-self: center; }
.form-done__title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.375rem;
  line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; color: var(--navy);
}
.form-done__text { color: var(--muted); font-size: .875rem; }

/* ---------- Selector de escena / modelo, al pie del hero ---------- */

.escenas {
  position: absolute; z-index: 2;
  /* Alineado a la izquierda, con el mismo margen que el titular. */
  inset-block-end: clamp(18px, 3vh, 32px);
  inset-inline-start: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 999px;
  background: rgba(10,16,34,.42); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
}
.escena {
  padding: 6px 14px; border: 0; border-radius: 999px; background: none;
  font-family: inherit; font-size: .75rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.7); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.escena:hover { color: #fff; }
.escena[aria-pressed="true"] { background: var(--cielo); color: #fff; }

/* ---------- Cotizador en su propia sección (sólo móvil) ---------- */

.cotizar { display: none; background: var(--surface); }
.cotizar__in {
  width: var(--shell); margin-inline: auto;
  padding-block: clamp(38px, 6vh, 64px);
}
.cotizar__titulo {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 5.6vw, 2.1rem); line-height: 1.1;
  text-transform: uppercase; color: var(--navy);
}
.cotizar__bajada {
  margin: 12px 0 24px; max-width: 46ch;
  font-size: .9375rem; line-height: 1.55; color: var(--muted);
}
/* Ahí el panel se apoya en blanco: ya no flota sobre una foto. */
.cotizar .panel {
  background: #fff; backdrop-filter: none;
  box-shadow: 0 14px 40px rgba(20, 32, 60, .10), 0 2px 6px rgba(20, 32, 60, .04);
  gap: clamp(14px, 2vh, 20px);
  padding: clamp(20px, 3vh, 28px) clamp(18px, 4vw, 26px) clamp(18px, 2.6vh, 24px);
}
.cotizar .panel__title { display: none; }   /* el H2 de la sección ya lo dice */

/* ---------- Panel del formulario ---------- */

.panel {
  position: relative;
  display: grid; align-content: start; gap: clamp(10px, 1.5vh, 15px);
  padding: clamp(18px, 2.4vh, 26px) clamp(18px, 1.6vw, 26px) clamp(16px, 2.2vh, 22px);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(10, 16, 34, .34);
}
@supports not (backdrop-filter: blur(1px)) { .panel { background: var(--surface); } }

.panel__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 1.15vw, 1.1875rem); line-height: 1.2;
  letter-spacing: .05em; text-transform: uppercase;
  text-align: center; color: var(--navy);
}

.form { display: grid; gap: clamp(9px, 1.3vh, 13px); }
.legend { font-size: .8125rem; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.field__label { font-weight: 800; color: var(--navy); font-size: .78125rem; }
.field__control { border-radius: var(--field-radius); background: #fff; }
.chip__face { border-radius: var(--field-radius); background: #fff; font-weight: 500; }
.chip__input:checked + .chip__face { border-color: var(--cielo); }
.chip__input:checked + .chip__face::after { border-color: var(--cielo); box-shadow: inset 0 0 0 4px var(--cielo); }

.btn {
  border-radius: var(--field-radius);
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.panel__legal { font-size: .625rem; line-height: 1.45; color: var(--muted); text-align: center; }
.panel__legal a { color: var(--muted); }
.form__feedback { font-size: .78125rem; color: var(--danger); min-height: 1lh; }

/* Tarjetas de modelo con foto */
.mcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mcards--4 { grid-template-columns: repeat(4, 1fr); }
.mcard { position: relative; display: block; cursor: pointer; }
.mcard__in { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mcard__face {
  display: grid; gap: 1px; padding: 7px 5px 8px;
  border: 1px solid var(--line); border-radius: var(--field-radius);
  background: #fff; text-align: center;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mcard__img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: contain; }
.mcard__n { font-size: .6875rem; font-weight: 800; color: var(--navy); line-height: 1.15; }
.mcard__in:hover + .mcard__face { border-color: var(--muted); }
.mcard__in:checked + .mcard__face {
  border-color: var(--cielo);
  box-shadow: inset 0 0 0 1px var(--cielo), 0 0 0 3px color-mix(in srgb, var(--cielo) 26%, transparent);
}
.mcard__in:focus-visible + .mcard__face { outline: 2px solid var(--navy); outline-offset: 3px; }
.mcard__in.is-invalid + .mcard__face { border-color: var(--danger); }

.form-done__star { width: 74px; height: auto; justify-self: center; }
.form-done__title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.375rem;
  line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; color: var(--navy);
}
.form-done__text { color: var(--muted); font-size: .875rem; }

/* ============================================================
   SPECS — franja bajo el hero
   ============================================================ */

.specs-band { background: var(--navy); color: #fff; }
.specs-band__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(22px, 4vw, 64px);
  width: var(--shell); margin-inline: auto;
  padding-block: clamp(24px, 3.6vh, 40px);
}
.specs-band__modelo {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); text-transform: uppercase; letter-spacing: .03em;
  margin-right: auto;
}
.specs { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 52px); }
.spec { display: grid; gap: 3px; }
.spec__val { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.spec__key {
  font-size: .625rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* ============================================================
   PIE — barra fina, como el mockup
   ============================================================ */

.foot { background: #0F1730; color: rgba(255,255,255,.62); }
.foot__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 28px; width: var(--shell); margin-inline: auto;
  padding-block: clamp(16px, 2.4vh, 22px);
  font-size: .6875rem;
}
.foot__links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__links a { color: rgba(255,255,255,.62); text-decoration: none; }
.foot__links a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   ENTRADA
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .js .headline__line > span { translate: 0 105%; }
  .js .rule { scale: 0 1; }
  .js :where(.lema, .rasgos, .escenas, .specs-band__in > *) { opacity: 0; }
  .js .panel { opacity: 0; translate: 0 22px; }

  .js.is-ready .headline__line > span { translate: 0 0; transition: translate 820ms var(--ease) var(--d,0ms); }
  .js.is-ready .rule { scale: 1 1; transition: scale 620ms var(--ease) 430ms; }
  .js.is-ready :where(.lema, .rasgos, .escenas, .specs-band__in > *) {
    opacity: 1; transition: opacity 700ms var(--ease) var(--d,0ms);
  }
  .js.is-ready .panel {
    opacity: 1; translate: 0 0;
    transition: opacity 760ms var(--ease) 560ms, translate 760ms var(--ease) 560ms;
  }
  .js .headline__line:nth-child(1) > span { --d: 140ms; }
  .js .headline__line:nth-child(2) > span { --d: 225ms; }
  .js .lema    { --d: 520ms; }
  .js .rasgos  { --d: 700ms; }
  .js .escenas { --d: 840ms; }
  .js .specs-band__in > * { --d: 300ms; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Escalones por alto: el panel es alto (4 campos + tarjetas + chips + CTA)
   y el hero es de una sola pantalla. Se cede en este orden: aire, luego los
   sellos de aventura, luego el alto de los controles. */
@media (min-width: 1081px) and (max-height: 940px) {
  .hero__in { padding-block: clamp(14px, 2vh, 26px) clamp(56px, 8vh, 76px); }
  .panel { gap: 10px; padding-block: 18px 16px; }
  .form { gap: 10px; }
  .field { gap: 4px; }
  .field__control { padding-block: 10px; }
  .chip__face { padding-block: 9px; }
  .rasgos { margin-top: 20px; }
}
@media (min-width: 1081px) and (max-height: 840px) {
  .hero__in { padding-block: 12px 54px; }
  .panel { gap: 8px; padding-block: 15px 13px; }
  .form { gap: 8px; }
  .field__control { padding-block: 8px; }
  .chip__face { padding-block: 7px; }
  .chips { gap: 6px; }
  .btn { padding-block: 13px; }
  .rasgos { margin-top: 16px; gap: 12px 18px; }
  .panel__legal { display: none; }
}
@media (min-width: 1081px) and (max-height: 760px) {
  .hero__in { padding-block: 10px 50px; }
  .panel { gap: 7px; padding-block: 12px 11px; }
  .form { gap: 7px; }
  .field__label { font-size: .71875rem; }
  .field__control { padding-block: 7px; }
  .chip__face { padding-block: 6px; font-size: .8125rem; }
  .btn { padding-block: 11px; }
  .rasgos { display: none; }
  .form__feedback { min-height: 0; }
}

@media (max-width: 980px) {
  .nav__menu, .nav__wa { display: none; }
  .nav__burger { display: flex; }
  .nav__in { grid-template-columns: auto 1fr; }
  .nav__movil { display: grid; padding: 6px var(--gutter) 18px; border-top: 1px solid var(--line); }
}

@media (max-width: 1080px) {
  .hero { min-height: min(88svh, 720px); }
  .hero__in {
    grid-template-columns: 1fr;
    padding-block: clamp(40px, 7vh, 76px) clamp(20px, 3vh, 32px);
  }
  .copy { max-width: 640px; }
  .cotizar { display: block; }
  .cotizar .panel { max-width: 620px; }
  .js .panel { translate: 0 22px; }
  .specs-band__in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .specs-band__modelo { margin-right: 0; }
}

/* En pantallas angostas el selector deja de flotar sobre la foto y pasa a
   ocupar su propia fila: si no, se monta sobre el titular. */
@media (max-width: 1080px) {
  /* 1fr auto: el bloque del titular se queda con el alto sobrante y el selector
     mide lo que mide. Con filas auto las dos se estiraban a partes iguales y el
     ovalo quedaba tres veces mas alto que sus botones. */
  .hero { align-items: stretch; grid-template-rows: 1fr auto; }
  .escenas {
    position: static; translate: none;
    margin: 0 0 clamp(24px, 4vh, 38px);
    width: fit-content; max-width: 100%;
    flex-wrap: nowrap; justify-content: flex-start;
    margin-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2));
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  :root { --nav-h: 62px; }
  .nav__brand img { width: 108px; }
  .headline { font-size: clamp(1.75rem, 8.4vw, 2.4rem); max-width: none; }
  .rasgos { gap: 12px 18px; }
  .rasgo b { font-size: .75rem; }
  .mcards, .mcards--4 { grid-template-columns: 1fr 1fr; }
  /* Los cuatro caben en una fila; el texto y el padding escalan con el ancho
     para que siga entrando hasta 320 px sin envolver ni desbordar. */
  .escenas { gap: 2px; padding: 4px; }
  .escena {
    display: grid; place-items: center; min-height: 44px;  /* area tactil */
    padding-inline: clamp(6px, 2.6vw, 13px);
    font-size: clamp(.5625rem, 2.5vw, .6875rem);
    letter-spacing: .02em;
  }
  .specs { gap: 18px; }
  /* En móvil el pie va centrado: apilado y alineado a la izquierda dejaba
     todo el lado derecho vacío. */
  .foot__in { flex-direction: column; align-items: center; text-align: center; }
  .foot__links { justify-content: center; }
}

/* Firma del pie: el logo de Teojama junto al copyright. */
.foot__firma { display: flex; align-items: center; gap: 14px; }
.foot__teojama { flex: none; width: 112px; height: auto; opacity: .9; }

@media (max-width: 720px) {
  .foot__firma { flex-direction: column; gap: 10px; text-align: center; }
}