/* =============================================================================
   Europa 3G · Landing de modelo (/6421-reparar-iphone-18-pro-max) — 01/10/2026
   -----------------------------------------------------------------------------
   Diseño: design/design.pen, láminas 19 (escritorio), 20 (móvil), 21 (Samsung)
   y 22 (detalle y estados). Documentación: docs/landing-modelo.md. La registra
   europa3gcategorylanding solo en las páginas de modelo de las marcas activas
   (E3gModelLanding::has()), DESPUÉS de landing-marca.css (prioridad 220 → 230),
   cuyas secciones reutiliza tal cual: condiciones, por qué, reseñas, preguntas,
   tienda y guía. Aquí solo va lo propio, con prefijo e3gmo-: el panel de compra,
   los tres pasos, «Otros modelos» y la barra fija.

   Tres anchos (los de landing-marca.css):
   - < 768: una columna. Cabecera, modelo en pequeño, lista y resumen; sin las
     garantías, que repetiría la franja de condiciones de debajo (§10). Barra
     fija al pie (landing-modelo.js decide cuándo sale).
   - 768-991 (tableta): la misma columna, con la lista en dos columnas y sin
     garantías. La foto grande no cabe: sigue la tarjeta pequeña del modelo.
   - ≥ 992: dos columnas. Foto en la órbita y garantías a la izquierda; la
     compra a la derecha. Nada fijo al desplazar: la foto fija dejaba pasar las
     garantías por encima, y el resumen pegado al pie (~400 px) tapaba las
     opciones en un portátil de 1440 × 900.
   Las pastillas de variante (memoria, calidad de pantalla) van dentro de la
   tarjeta de la opción elegida; la descripción de la reparación no se pinta (el
   enlace a la ficha va en el resumen).

   Sin JS el panel es un formulario que funciona igual (§9).

   La cabecera con selector de modelo (los AirPods, E3gSelectorLanding) usa esta
   misma hoja: «¿Qué AirPods tienes?» y el resumen sin modelo van en §14.

   :has() y sus alternativas: el estado (opción y «dónde» elegidos, pastillas a la
   vista, foco) lo deduce el CSS con :has(), y además landing-modelo.js pone clases
   (.is-elegida, .is-foco; en <html>, .e3gmo-pagina y .e3gmo-con-barra). Cada caso
   lleva DOS reglas separadas, nunca una lista que mezcle las dos: un navegador sin
   :has() descarta la lista entera si un selector no lo entiende.

   Colores: solo tokens del tema (AGENTS.md «Paleta de marca»). El lima es
   siempre superficie con área (órbita, círculos, botón, pastilla), nunca texto
   ni borde fino sobre claro: la opción elegida se marca con plata y tinta.
   ========================================================================== */

/* --- 1. Base ---------------------------------------------------------------- */
.e3gmo {
  /* Ancho de la columna de la foto (≥ 992). */
  --e3gmo-col: min(500px, 36vw);
}

/* Migas de pan más pegadas al panel, solo en estas páginas: el tema deja 40 px
   debajo (.breadcrumb__wrapper) y el panel tiene que caber en la primera
   pantalla de un portátil. */
body:has(.e3gmo) .breadcrumb__wrapper {
  margin-bottom: 8px;
}

html.e3gmo-pagina .breadcrumb__wrapper {
  margin-bottom: 8px;
}

/* landing-marca.css corta el scroll lateral de los sangrados a 100vw con
   body:has(.e3gm); esta es la misma regla sin :has(). */
html.e3gmo-pagina body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Campos visualmente ocultos pero accesibles y enfocables (radios de las
   opciones y de «dónde»): toda la tarjeta es su <label>. */
.e3gmo-opcion__radio,
.e3gmo-donde__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}


/* --- 2. Panel: rejilla --------------------------------------------------------- */
.e3gmo-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 18px;
  padding: 0 var(--e3gm-pad) 32px;
}

/* La foto grande va primera en el DOM (orden de tabulado de escritorio), pero
   por debajo de 992 la sustituye la tarjeta pequeña (§5). */
.e3gmo-panel__modelo {
  display: none;
}

.e3gmo-panel__compra {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}

@media (min-width: 768px) {
  .e3gmo-panel {
    row-gap: 24px;
    padding-top: 8px;
    padding-bottom: 56px;
  }

  .e3gmo-panel__compra {
    gap: 20px;
  }
}

/* Escritorio: la foto y, debajo, las garantías a la izquierda; la compra a la
   derecha, a lo alto de las dos filas. La segunda fila (1fr) se queda con lo que
   sobre de alto, para que las garantías vayan pegadas a la foto. */
@media (min-width: 992px) {
  .e3gmo-panel {
    grid-template-columns: var(--e3gmo-col) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(40px, 4.5vw, 64px);
    row-gap: 28px;
    padding-bottom: 72px;
  }

  .e3gmo-panel__modelo {
    position: relative;
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .e3gmo-panel__compra {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* Las garantías (fila 2): en §10, después del reset de su <ul>. */
}


/* --- 3. Foto en la órbita (lámina 19) ------------------------------------------
   Círculo lima (96 % de la caja), círculo blanco al 83 % del lima y la foto al
   70 % del blanco, centrada: es el JPG de la categoría, con fondo blanco, y así
   sus esquinas no tocan el lima. */
.e3gmo-orbita {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.e3gmo-orbita::before,
.e3gmo-orbita::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.e3gmo-orbita::before {
  inset: 2%;
  background: var(--nxr-accent);
}

.e3gmo-orbita::after {
  inset: 10%;
  background: var(--nxr-surface);
}

.e3gmo-orbita__img {
  position: relative;
  z-index: 1;
  width: 56%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* «¿No es tu modelo? Cámbialo»: pastilla sobre el borde inferior izquierdo
   de la órbita. */
.e3gmo-cambiar {
  position: absolute;
  bottom: 3.2%;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--nxr-ink);
  border-radius: 999px;
  background: var(--nxr-surface);
  color: var(--nxr-ink);
  font-size: var(--e3g-text-14);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.e3gmo-cambiar .e3gm-ico {
  width: 16px;
  height: 16px;
}

.e3gmo-cambiar:hover,
.e3gmo-cambiar:focus-visible {
  background: var(--nxr-surface-alt);
}

.e3gmo-cambiar:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}


/* --- 4. Cabecera: antetítulo, H1 y nota de Google ------------------------------ */
.e3gmo-head {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.e3gmo-head__eyebrow {
  color: var(--nxr-ink);
  font-size: var(--e3g-text-12);
  letter-spacing: 1px;
}

/* «Reparar {modelo}»: en escritorio, en una línea (Madrid va en el antetítulo).
   En móvil puede partirse; «pretty» evita la palabra suelta al final. */
.e3gmo-head__h1 {
  max-width: 100%;
  font-size: var(--e3g-text-32);
  font-weight: 600;
  letter-spacing: -0.9px;
  line-height: 1.08;
  text-wrap: pretty;
}

.e3gmo-head__google {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--nxr-ink);
  font-size: var(--e3g-text-14);
  line-height: 1.5;
  text-decoration: none;
}

.e3gmo-head__g {
  width: 18px;
  height: 18px;
}

/* El amarillo de las estrellas de Google, como en el hero de la landing de
   marca (.e3gm-hero__stars): es de Google, no de la paleta. */
.e3gmo-head__stars {
  color: #fbbc05;
  font-size: var(--e3g-text-16);
  font-weight: 700;
  letter-spacing: 1px;
}

.e3gmo-head__google:hover .e3gmo-head__rating,
.e3gmo-head__google:focus-visible .e3gmo-head__rating {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .e3gmo-head {
    gap: 12px;
  }

  .e3gmo-head__eyebrow {
    font-size: var(--e3g-text-12);
    letter-spacing: 1.1px;
  }

  .e3gmo-head__google {
    gap: 4px 10px;
  }

  .e3gmo-head__g {
    width: 20px;
    height: 20px;
  }

  .e3gmo-head__stars {
    font-size: var(--e3g-text-18);
  }

  .e3gmo-head__h1 {
    font-size: var(--e3g-text-40);
    letter-spacing: -1.2px;
    line-height: 1.06;
  }
}

/* Los nombres largos (más de 26 caracteres con «Reparar», E3gModelLanding::
   H1_LARGO; el mayor, «Reparar Samsung Z Fold 8 Ultra», 30): a 40 px caben en
   la columna de 1440, pero no entre 992 y 1199, donde la columna es más
   estrecha. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .e3gmo-head__h1--largo {
    font-size: var(--e3g-text-32);
  }

  /* Más de 34 caracteres (H1_MUY_LARGO; los mayores, 37: «Reparar Xiaomi Redmi Note
     15 Pro Plus»). Va después: a igual especificidad, gana. */
  .e3gmo-head__h1--muy-largo {
    font-size: var(--e3g-text-32);
  }
}

/* Y desde 1200 tampoco caben todos a 40 px: «Reparar Lenovo Tab M10 FHD Plus 2 Gen»
   ocupa 702 px y la columna da 690 (02/10/2026). A 38, los de más de 34 caracteres
   caben (las cuatro Redmi Note Pro Plus y ese Lenovo). */
@media (min-width: 1200px) {
  .e3gmo-head__h1--muy-largo {
    font-size: var(--e3g-text-40);
  }
}


/* --- 5. El modelo en pequeño (< 992) -------------------------------------------
   Lleva .e3gm-solo-movil, que lo oculta desde 768: aquí se vuelve a enseñar en
   la tableta (esta hoja va después) y se oculta desde 992, donde está la foto. */
.e3gmo-modelo-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--nxr-line);
  border-radius: 12px;
  color: var(--nxr-ink);
  text-decoration: none;
}

.e3gmo-modelo-mini:hover,
.e3gmo-modelo-mini:focus-visible {
  border-color: var(--nxr-ink);
}

.e3gmo-modelo-mini:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

/* Órbita mini: anillo lima de 5 px y la foto dentro del blanco. */
.e3gmo-modelo-mini__orbita {
  display: grid;
  flex: none;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 5px solid var(--nxr-accent);
  border-radius: 50%;
  background: var(--nxr-surface);
}

.e3gmo-modelo-mini__img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.e3gmo-modelo-mini__txt {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.e3gmo-modelo-mini__nombre {
  font-size: var(--e3g-text-16);
  font-weight: 700;
  line-height: 1.5;
}

.e3gmo-modelo-mini__cambiar {
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  line-height: 1.5;
}

.e3gmo-modelo-mini > .e3gm-ico {
  width: 18px;
  height: 18px;
}

@media (min-width: 992px) {
  .e3gmo-modelo-mini {
    display: none;
  }
}


/* --- 6. Lista de reparaciones (lámina 22, A) -----------------------------------
   El <legend> va en la misma fila que la nota. Flotante (como lo deja ya
   Bootstrap) no es la leyenda «pintada» sobre el borde del fieldset sino un
   elemento más, y entra en la rejilla (donde el float no hace nada). */
.e3gmo-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.e3gmo-lista__titulo {
  float: left;
  width: auto;
  margin: 0;
  padding: 6px 0 0;
  color: var(--nxr-ink);
  font-size: var(--e3g-text-16);
  font-weight: 700;
  line-height: 1.5;
}

.e3gmo-lista__nota {
  padding-top: 6px;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-12);
  line-height: 1.5;
  text-align: end;
}

/* align-items: start: la elegida crece con sus pastillas y la de al lado no
   tiene por qué estirarse (lámina 22, «Ampliar memoria»). */
.e3gmo-lista__opciones {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

/* La opción: tarjeta con borde plata; al pasar el ratón, borde de tinta; la
   elegida, fondo plata y borde de tinta de 2 px (el segundo es una sombra
   interior: el cambio no mueve nada). Nunca borde lima: sobre blanco no se ve.
   Baja (~50 px: icono de 34 y 6 px arriba y abajo) para que el resumen y
   «Reservar» suban (con 46 px quedaba apretada; con 54, alta). El <label> mide
   solo la fila (~36 px): su ::after lo extiende hasta el borde de la tarjeta,
   así que se pulsa la tarjeta entera, 50 px, por encima de los 44 px de un
   objetivo táctil. */
.e3gmo-opcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 50px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--nxr-line);
  border-radius: 10px;
  background: var(--nxr-surface);
}

.e3gmo-opcion:hover {
  border-color: var(--nxr-ink);
}

.e3gmo-opcion:has(.e3gmo-opcion__radio:checked) {
  border-color: var(--nxr-ink);
  background: var(--nxr-surface-alt);
  box-shadow: inset 0 0 0 1px var(--nxr-ink);
}

.e3gmo-opcion.is-elegida {
  border-color: var(--nxr-ink);
  background: var(--nxr-surface-alt);
  box-shadow: inset 0 0 0 1px var(--nxr-ink);
}

/* Foco de teclado: con flechas el foco y la elección van juntos, así que la
   elegida necesita un anillo propio además del borde. */
.e3gmo-opcion:has(.e3gmo-opcion__radio:focus-visible) {
  border-color: var(--nxr-ink);
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

.e3gmo-opcion.is-foco {
  border-color: var(--nxr-ink);
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

.e3gmo-opcion__sel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* El área pulsable del <label>, hasta el borde de la tarjeta: el relleno (6 px
   arriba y abajo, 8 a la izquierda; 12, o 14 desde 768, a la derecha) más el
   borde de 1 px. Hacia abajo baja 7 px y las pastillas de la elegida empiezan a
   10 (el hueco de la tarjeta); además van posicionadas (§7), por encima. */
.e3gmo-opcion__sel::after {
  content: "";
  position: absolute;
  inset: -7px -13px -7px -9px;
}

/* Sin variantes desplegables, las tarjetas de una fila comparten altura aunque
   un síntoma ocupe más líneas. El área pulsable cubre también el espacio añadido.
   Las listas con variantes conservan su crecimiento independiente. */
.e3gmo-lista__opciones:not(:has(.e3gmo-variantes)) {
  align-items: stretch;
}

.e3gmo-lista__opciones:not(:has(.e3gmo-variantes)) > .e3gmo-opcion {
  position: relative;
}

.e3gmo-lista__opciones:not(:has(.e3gmo-variantes)) .e3gmo-opcion__sel {
  position: static;
}

.e3gmo-lista__opciones:not(:has(.e3gmo-variantes)) .e3gmo-opcion__sel::after {
  inset: 0;
}

.e3gmo-opcion__img {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--nxr-surface);
  object-fit: cover;
}

.e3gmo-opcion__txt {
  display: grid;
  flex: 1;
  min-width: 0;
}

.e3gmo-opcion__label {
  font-size: var(--e3g-text-16);
  font-weight: 700;
  line-height: 1.3;
}

/* El síntoma, en una línea: si no cabe, con puntos suspensivos (la tarjeta no
   crece a dos líneas por una pista). En la elegida, entero (hasta dos líneas). */
.e3gmo-opcion__sintoma {
  overflow: hidden;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e3gmo-opcion:has(.e3gmo-opcion__radio:checked) .e3gmo-opcion__sintoma {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.e3gmo-opcion.is-elegida .e3gmo-opcion__sintoma {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.e3gmo-opcion__precio {
  flex: none;
  font-size: var(--e3g-text-16);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.e3gmo-opcion__tiempo {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 3px;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-12);
  line-height: 1.4;
}

.e3gmo-opcion__tiempo[hidden] { display: none; }
.e3gmo-opcion__tiempo .e3gm-ico { flex: none; width: 14px; height: 14px; margin-top: 1px; }

@media (min-width: 768px) {
  .e3gmo-lista {
    gap: 12px;
  }

  .e3gmo-lista__titulo {
    padding-top: 0;
    font-size: var(--e3g-text-18);
  }

  .e3gmo-lista__nota {
    padding-top: 0;
    font-size: var(--e3g-text-14);
  }

  .e3gmo-lista__opciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .e3gmo-opcion {
    padding-right: 14px;
  }

  .e3gmo-opcion__sel::after {
    right: -15px;
  }
}


/* --- 7. Variantes (memoria, calidad de pantalla…) -----------------------------
   Pastillas dentro de la tarjeta de la opción elegida, a todo su ancho y bajo su
   fila; la pulsada, en tinta. Las de las demás opciones, ocultas del todo (no se
   tabulan). Sin JS salen deshabilitadas en el HTML (informan, pero no cambian lo
   que se compra): el JS las habilita al arrancar. */
/* Posicionadas: por encima del ::after del <label> (el área pulsable de la
   tarjeta), sean cuales sean los rellenos y huecos. */
.e3gmo-variantes {
  position: relative;
  display: none;
}

.e3gmo-opcion:has(.e3gmo-opcion__radio:checked) > .e3gmo-variantes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.e3gmo-opcion.is-elegida > .e3gmo-variantes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.e3gmo-variante {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--nxr-ink);
  border-radius: 999px;
  background: var(--nxr-surface);
  color: var(--nxr-ink);
  font: 700 var(--e3g-text-14)/1.2 var(--nxr-font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.e3gmo-variante:not(:disabled):hover {
  background: var(--nxr-surface-alt);
}

.e3gmo-variante[aria-pressed="true"],
.e3gmo-variante[aria-pressed="true"]:not(:disabled):hover {
  background: var(--nxr-ink);
  color: var(--nxr-surface);
}

.e3gmo-variante:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

.e3gmo-variante:disabled {
  cursor: default;
  opacity: 1;
}


/* --- 8. Resumen: dónde, precio final, cuotas, nota y botones -------------------- */
.e3gmo-resumen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--nxr-ink);
  border-radius: 16px;
  background: var(--nxr-surface);
}

/* En tienda / a domicilio: control segmentado; el elegido, en tinta. */
.e3gmo-donde {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--nxr-ink);
  border-radius: var(--e3gm-radius-sm);
}

.e3gmo-donde__op {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  margin: 0;
  padding: 4px 10px;
  color: var(--nxr-ink);
  font-size: var(--e3g-text-14);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.e3gmo-donde__op:hover {
  background: var(--nxr-surface-alt);
}

.e3gmo-donde__op:has(.e3gmo-donde__radio:checked) {
  background: var(--nxr-ink);
  color: var(--nxr-surface);
}

.e3gmo-donde__op.is-elegida {
  background: var(--nxr-ink);
  color: var(--nxr-surface);
}

/* El anillo va por dentro: la caja recorta lo que salga (overflow). */
.e3gmo-donde__op:has(.e3gmo-donde__radio:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

.e3gmo-donde__op.is-foco {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

.e3gmo-donde__op .e3gm-ico {
  width: 16px;
  height: 16px;
}

/* Cifras, a todo ancho (lámina 20): «qué» en su propia fila y, debajo, el total
   a la izquierda y las cuotas (con los logos en escritorio) a la derecha, alineados
   por abajo. .e3gmo-resumen__precio se disuelve en la rejilla. Así, al pasar a
   «a domicilio», el «qué» más largo no empuja las cuotas a otra fila. */
.e3gmo-resumen__cifras {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 2px 12px;
}

.e3gmo-resumen__precio {
  display: contents;
}

/* Flex que se parte: si «Qué incluye…» no cabe al lado, baja sin sangría. */
.e3gmo-resumen__que {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 0 8px;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  line-height: 1.5;
}

/* «Qué incluye la reparación»: discreto (13 px, como lo elegido), pero en tinta,
   negrita y subrayado: el gris del texto de al lado no basta para un enlace. */
.e3gmo-resumen__ficha {
  color: var(--nxr-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.e3gmo-resumen__ficha:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

.e3gmo-resumen__ficha[hidden] {
  display: none;
}

.e3gmo-resumen__total {
  font-size: var(--e3g-text-40);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  white-space: nowrap;
}

.e3gmo-resumen__financia {
  min-width: 0;
  text-align: end;
}

.e3gmo-resumen__cuotas {
  font-size: var(--e3g-text-14);
  font-weight: 700;
  line-height: 1.5;
}

/* El asterisco del precio con el descuento de primera compra: pequeño y arriba,
   sin mover la línea. */
.e3gmo-resumen__ast {
  position: relative;
  top: -0.6em;
  margin-left: 2px;
  font-size: 0.5em;
}

/* La nota del asterisco, bajo el precio y las cuotas: «* 5 % menos en tu
   primera reparación. Sin descuento: 459 €». El precio normal, sin tachar. */
.e3gmo-resumen__nota {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  line-height: 1.5;
}

.e3gmo-resumen__botones {
  display: grid;
  gap: 16px;
}

/* Primario: lima con texto de tinta (.e3gm-btn). Secundario: borde de tinta. */
/* Dos piezas: «Reservar reparación» y « · 459 €». Si no caben en una línea (320
   px, precios de cuatro cifras), el precio baja entero a la siguiente. */
.e3gmo-reservar {
  flex-wrap: wrap;
  width: 100%;
  min-height: 54px;
  gap: 0 0.3em;
  font-size: var(--e3g-text-16);
  text-align: center;
}

.e3gmo-reservar__precio {
  white-space: nowrap;
}

.e3gmo-carrito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border: 1.5px solid var(--nxr-ink);
  border-radius: var(--e3gm-radius-sm);
  background: var(--nxr-surface);
  color: var(--nxr-ink);
  font: 700 var(--e3g-text-16)/1.2 var(--nxr-font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.e3gmo-carrito:hover {
  background: var(--nxr-surface-alt);
}

.e3gmo-reservar:focus-visible,
.e3gmo-carrito:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

.e3gmo-carrito .e3gm-ico {
  width: 17px;
  height: 17px;
}

/* Mientras «Reservar» espera la respuesta del carrito (landing-modelo.js). */
.e3gmo-reservar[aria-busy="true"],
.e3gmo-barra__btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .e3gmo-resumen {
    gap: 20px;
    padding: 24px;
  }

  .e3gmo-donde__op {
    gap: 8px;
    min-height: 52px;
    font-size: var(--e3g-text-16);
  }

  .e3gmo-donde__op .e3gm-ico {
    width: 18px;
    height: 18px;
  }

  .e3gmo-resumen__cifras {
    column-gap: 24px;
  }

  .e3gmo-resumen__total {
    font-size: var(--e3g-text-40);
  }

  .e3gmo-resumen__financia {
    display: grid;
    justify-items: end;
    gap: 8px;
  }

  .e3gmo-resumen__cuotas {
    font-size: var(--e3g-text-14);
  }

  /* Lleva .e3gm-solo-escritorio (en línea): aquí, fila de logos. */
  .e3gmo-resumen__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
  }

  .e3gmo-resumen__logos img {
    width: auto;
    height: 20px;
  }

  .e3gmo-resumen__logos .e3gmo-resumen__klarna {
    height: 32px;
  }

  .e3gmo-resumen__botones {
    display: flex;
    gap: 12px;
  }

  .e3gmo-reservar {
    flex: 1;
    width: auto;
    min-height: 56px;
  }

  .e3gmo-carrito {
    gap: 10px;
    min-height: 56px;
    font-size: var(--e3g-text-16);
  }

  .e3gmo-carrito .e3gm-ico {
    width: 18px;
    height: 18px;
  }
}


/* --- 9. Sin JS: el resumen no puede mentir --------------------------------------
   Sin JS el formulario compra lo marcado, pero nadie recalcula las cifras: son
   las de lo marcado en el HTML. Si se marca otra reparación (o «a domicilio»,
   que suma), se ocultan qué (con su enlace a la ficha), precio, cuotas, la nota
   del descuento, el precio del botón y el texto para lectores de pantalla;
   vuelven al dejar lo de partida. Con JS (.e3gmo--js) no aplica. Sin :has() no
   hay forma de saberlo sin JS: ese navegador enseña las cifras de partida. */
.e3gmo:not(.e3gmo--js) .e3gmo-panel__compra:has(.e3gmo-opcion__radio:checked:not([checked]), .e3gmo-donde__radio:checked:not([checked])) :is(.e3gmo-resumen__cifras, .e3gmo-reservar__precio, [data-e3gmo-vivo]) {
  display: none;
}

/* El plazo del resumen también es el inicial; cada tarjeta conserva el suyo. */
.e3gmo:not(.e3gmo--js) .e3gmo-panel__compra:has(.e3gmo-opcion__radio:checked:not([checked])) [data-e3gmo-repair-time] {
  display: none;
}


/* --- 10. Garantías ----------------------------------------------------------------
   Solo en escritorio (≥ 992): en la columna de la foto, bajo ella, con filete entre
   una y otra. Por debajo, fuera del todo (display: none, también para los lectores
   de pantalla): ya no está la foto y la franja lima de condiciones, justo debajo del
   panel, dice lo mismo («Ven sin cita previa», «Hasta 12 meses de garantía»). */
.e3gmo-garantias {
  display: none;
}

@media (min-width: 992px) {
  .e3gmo-garantias {
    display: block;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.e3gmo-garantia {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 0;
  border-top: 1px solid var(--nxr-line);
}

.e3gmo-garantia__ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
}

.e3gmo-garantia__ico .e3gm-ico {
  width: 18px;
  height: 18px;
}

/* Rejilla: el título y la descripción (spans) quedan uno bajo otro. */
.e3gmo-garantia__txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.e3gmo-garantia__titulo {
  font-size: var(--e3g-text-16);
  font-weight: 700;
  line-height: 1.5;
}

.e3gmo-garantia__desc {
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  line-height: 1.5;
}


/* --- 11. Cómo funciona: tres pasos (lámina 19; móvil, 20) -----------------------
   PORTADO de modules/europa3ghome/views/css/home.css («9. Proceso»,
   .e3gh-proceso / .e3gh-paso → .e3gmo-pasos / .e3gmo-paso), sin el botón del
   final. Si cambia el bloque de la home, se traslada aquí a mano. Las piezas
   genéricas (eyebrow, h2, lead, sec) ya son las e3gm- de landing-marca.css. */
.e3gmo-pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.e3gmo-pasos__head,
.e3gmo-pasos__title {
  display: grid;
  gap: 12px;
}

.e3gmo-pasos__pasos {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Móvil: número a la izquierda y el paso a la derecha, con filete entre pasos. */
.e3gmo-paso {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  row-gap: 12px;
  padding: 24px 0;
  border-top: 1px solid var(--nxr-line);
}

.e3gmo-paso__num {
  grid-row: 1 / 3;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-16);
  font-weight: 700;
  line-height: 1.5;
}

.e3gmo-paso__h3 {
  font-size: var(--e3g-text-24);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.15;
}

.e3gmo-paso__txt {
  grid-column: 2;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-16);
  line-height: 1.5;
}

.e3gmo-pasos__nota {
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
}

.e3gmo-pasos__nota a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .e3gmo-pasos {
    gap: 40px;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .e3gmo-pasos__head {
    grid-template-columns: minmax(0, 760fr) minmax(0, 400fr);
    column-gap: 120px;
    align-items: end;
  }

  .e3gmo-pasos__pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .e3gmo-paso {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0 0;
    border-top-color: var(--nxr-ink);
  }

  .e3gmo-paso__num {
    font-size: var(--e3g-text-16);
  }

  .e3gmo-paso__h3 {
    font-size: var(--e3g-text-24);
  }
}


/* --- 12. Otros modelos (lámina 19; móvil, 20) ------------------------------------
   Filete plata de borde a borde encima (como la lámina) y, debajo, la cabecera:
   en escritorio el enlace «Ver todos» va arriba a la derecha y en móvil al
   final; es el mismo DOM, lo coloca la rejilla. */
.e3gmo-otros {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.e3gmo-otros::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  border-top: 1px solid var(--nxr-line);
}

.e3gmo-otros__head {
  display: grid;
  gap: 10px;
}

.e3gmo-otros__head .e3gm-eyebrow {
  color: var(--nxr-ink);
  font-size: var(--e3g-text-12);
  letter-spacing: 1px;
}

.e3gmo-otros__head .e3gm-h2 {
  font-size: var(--e3g-text-24);
  letter-spacing: -0.6px;
}

.e3gmo-otros__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.e3gmo-otros__lista > li {
  display: grid;
  min-width: 0;
}

/* Móvil: foto de 48 px al lado del nombre. */
.e3gmo-otro {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--nxr-line);
  border-radius: 12px;
  color: var(--nxr-ink);
  text-decoration: none;
}

.e3gmo-otro:hover,
.e3gmo-otro:focus-visible {
  border-color: var(--nxr-ink);
}

.e3gmo-otro:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

.e3gmo-otro__img {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.e3gmo-otro__txt {
  display: grid;
  min-width: 0;
}

.e3gmo-otro__nombre {
  font-size: var(--e3g-text-14);
  font-weight: 700;
  line-height: 1.3;
}

.e3gmo-otro__serie {
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-12);
  line-height: 1.3;
}

.e3gmo-otros__todos {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 8px;
  color: var(--nxr-ink);
  font-size: var(--e3g-text-14);
  line-height: 1.5;
}

.e3gmo-otros__todos .e3gm-ico {
  width: 16px;
  height: 16px;
}

/* Tableta y escritorio: tarjetas verticales, foto de 112 px y texto centrado. */
@media (min-width: 768px) {
  .e3gmo-otros {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 28px 24px;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .e3gmo-otros__head .e3gm-eyebrow {
    font-size: var(--e3g-text-12);
    letter-spacing: 1.1px;
  }

  .e3gmo-otros__head .e3gm-h2 {
    font-size: var(--e3g-text-32);
    letter-spacing: -0.8px;
  }

  .e3gmo-otros__lista {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .e3gmo-otros__todos {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--e3g-text-16);
  }

  .e3gmo-otros__todos .e3gm-ico {
    width: 18px;
    height: 18px;
  }

  .e3gmo-otro {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 16px 12px 18px;
    text-align: center;
  }

  .e3gmo-otro__img {
    width: 112px;
    height: 112px;
  }

  .e3gmo-otro__nombre {
    margin-top: 4px;
    font-size: var(--e3g-text-16);
    line-height: 1.5;
  }

  .e3gmo-otro__serie {
    font-size: var(--e3g-text-14);
    line-height: 1.5;
  }
}

@media (min-width: 992px) {
  .e3gmo-otros__lista {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}


/* --- 13. Barra fija del pie (móvil, lámina 20) -----------------------------------
   Sale con [hidden] y la enseña landing-modelo.js (elegida o lista pasada, y el
   resumen fuera de la pantalla). Solo por debajo de 768. */
.e3gmo-barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 12px;
  /* env(safe-area-inset-bottom) vale 0 mientras el viewport del tema no lleve
     viewport-fit=cover; si un día lo lleva, la barra deja libre la zona del gesto
     de inicio del iPhone sin tocar nada aquí. */
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--nxr-ink);
  background: var(--nxr-surface);
  color: var(--nxr-ink);
}

.e3gmo-barra[hidden] {
  display: none;
}

.e3gmo-barra__info {
  flex: 1;
  min-width: 0;
}

.e3gmo-barra__que {
  overflow: hidden;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e3gmo-barra__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.e3gmo-barra__total {
  font-size: var(--e3g-text-24);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  white-space: nowrap;
}

/* «−5 % 1.ª reparación»: el descuento de primera compra, en corto (la nota del
   resumen no está a la vista). */
.e3gmo-barra__dto {
  color: var(--nxr-ink);
  font-size: var(--e3g-text-12);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.e3gmo-barra__cuota {
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-12);
  line-height: 1.6;
  white-space: nowrap;
}

.e3gmo-barra__btn {
  flex: none;
  min-height: 50px;
  font-size: var(--e3g-text-16);
}

.e3gmo-barra__btn:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  /* Con la barra a la vista (landing-modelo.js pone .e3gmo-con-barra en <html>
     en el mismo momento): que no tape el final de la página ni el botón flotante
     de WhatsApp (nxr_whatsapp, abajo a la derecha). */
  html.e3gmo-con-barra body {
    padding-bottom: var(--e3gmo-barra-alto, 80px);
  }

  /* --e3gmo-barra-alto lo pone landing-modelo.js con el alto real de la barra, que
     ya incluye su relleno inferior (y la zona segura, si la hay). */
  html.e3gmo-con-barra .nxr-whatsapp__btn {
    bottom: calc(var(--e3gmo-barra-alto, 80px) + 12px);
  }
}

@media (min-width: 768px) {
  .e3gmo-barra {
    display: none;
  }
}


/* --- 14. Selector de modelo (los AirPods) ----------------------------------------
   Solo en las cabeceras con selector (E3gSelectorLanding; docs/landing-modelo.md,
   «Landing con selector»). Va donde la landing de modelo pone la tarjeta pequeña
   del modelo, en todos los anchos. Cada modelo, una tarjeta con su foto y su
   nombre, del mismo dibujo que las opciones (§6): borde plata, de tinta al pasar
   el ratón y, el elegido (aria-current), fondo plata y borde de tinta de 2 px.
   Tres por fila en móvil (a 320, 92 px: «AirPods Pro 2» baja a dos líneas) y
   cinco desde 768 (los AirPods en la primera fila, Pro y Max en la segunda).
   Con cuatro modelos (--4, la tablet Huawei y la Switch), dos y cuatro; con tres
   (--3, la PS4), tres: sin hueco al final. */
.e3gmo-sel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.e3gmo-sel__titulo {
  margin: 0;
  color: var(--nxr-ink);
  font-size: var(--e3g-text-16);
  font-weight: 700;
  line-height: 1.5;
}

.e3gmo-sel__modelos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.e3gmo-sel__modelo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  min-height: 84px;
  padding: 8px 4px;
  border: 1px solid var(--nxr-line);
  border-radius: 10px;
  background: var(--nxr-surface);
  color: var(--nxr-ink);
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.e3gmo-sel__modelo:hover {
  border-color: var(--nxr-ink);
  color: var(--nxr-ink);
}

.e3gmo-sel__modelo[aria-current="true"] {
  border-color: var(--nxr-ink);
  background: var(--nxr-surface-alt);
  box-shadow: inset 0 0 0 1px var(--nxr-ink);
}

.e3gmo-sel__modelo:focus-visible {
  border-color: var(--nxr-ink);
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

/* La foto de la categoría: JPG de 300 px con fondo blanco y mucho margen (el
   aparato ocupa ~60 %). Se amplía un 35 % dentro de su caja, y se multiplica para
   que su blanco no deje un cuadrado sobre la plata del elegido ni tape nada al
   salirse de la caja. */
.e3gmo-sel__img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(1.35);
}

.e3gmo-sel__nombre {
  font-size: var(--e3g-text-14);
  font-weight: 700;
  line-height: 1.25;
}

.e3gmo-sel__modelos--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tres modelos (--3, la PS4): tres por fila en todos los anchos, sin hueco al final. */
.e3gmo-sel__modelos--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Diez modelos o más (--muchos, el Apple Watch): cuatro por fila en móvil y seis desde
   768, más bajas y con el nombre corto («Series 9»), para que la lista no baje tanto. */
.e3gmo-sel__modelos--muchos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.e3gmo-sel__modelos--muchos .e3gmo-sel__modelo {
  min-height: 72px;
  padding: 6px 2px;
}

.e3gmo-sel__modelos--muchos .e3gmo-sel__img {
  width: 34px;
  height: 34px;
}

@media (min-width: 768px) {
  .e3gmo-sel__titulo {
    font-size: var(--e3g-text-18);
  }

  .e3gmo-sel__modelos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .e3gmo-sel__modelos--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .e3gmo-sel__modelos--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .e3gmo-sel__modelos--muchos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .e3gmo-sel__nombre {
    font-size: var(--e3g-text-14);
  }
}

/* Por generaciones (--gen: las landings de avería del iPhone, 39 a 51 modelos). Una
   pastilla por generación («18», «17»… «Anteriores») y, debajo, las tarjetas de la
   abierta: tres por fila en móvil y cinco desde 768 (ninguna generación pasa de cinco
   salvo «Anteriores», que baja a más filas). Sin JS no hay pastillas: salen todas las
   generaciones, cada una con su nombre encima (.e3gmo-sel__gen). Con JS (.e3gmo--js,
   que landing-modelo.js quita si su arranque falla), solo la abierta (.is-abierta).
   La pastilla elegida, de tinta; al pasar el ratón, lima, como las de la landing de
   marca (.e3gm-chip). */
.e3gmo-gens {
  display: none;
}

.e3gmo--js .e3gmo-gens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.e3gmo-gen {
  min-width: 44px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--nxr-line);
  border-radius: 999px;
  background: var(--nxr-surface);
  color: var(--nxr-ink);
  font: 700 var(--e3g-text-14)/1.2 var(--nxr-font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.e3gmo-gen:hover {
  border-color: var(--nxr-accent);
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
}

.e3gmo-gen[aria-pressed="true"] {
  border-color: var(--nxr-ink);
  background: var(--nxr-ink);
  color: var(--nxr-surface);
}

.e3gmo-gen:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: 2px;
}

.e3gmo-sel__grupo {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.e3gmo-sel__gen {
  margin: 4px 0 0;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  font-weight: 700;
  line-height: 1.4;
}

.e3gmo--js .e3gmo-sel__gen,
.e3gmo--js .e3gmo-sel__grupo:not(.is-abierta) {
  display: none;
}

/* El precio de la tarjeta (las averías de una sola reparación: «69 €», «desde 79 €»). */
.e3gmo-sel__precio {
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .e3gmo-sel__modelos--gen {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Una reparación que el modelo elegido no tiene: fuera (el JS le pone hidden; el
   reset del tema ya lo hace, pero .e3gmo-opcion declara su display). */
.e3gmo-opcion[hidden] {
  display: none;
}

/* El resumen sin modelo o sin reparación (.is-pendiente): en lugar de las cifras,
   lo que falta («Elige tu modelo para ver el precio»), y los botones apagados.
   Sin JS lo pinta así el servidor; con JS, landing-modelo.js. */
.e3gmo-resumen__aviso {
  margin: 0;
  color: var(--nxr-ink);
  font-size: var(--e3g-text-16);
  font-weight: 700;
  line-height: 1.5;
}

.e3gmo-resumen.is-pendiente .e3gmo-resumen__cifras,
.e3gmo-resumen.is-pendiente .e3gmo-reservar__precio {
  display: none;
}

.e3gmo-reservar:disabled:not([aria-busy]),
.e3gmo-carrito:disabled:not([aria-busy]) {
  cursor: not-allowed;
  opacity: 0.45;
}

.e3gmo-carrito:disabled:not([aria-busy]):hover {
  background: var(--nxr-surface);
}


/* --- 15. Panel de presupuesto (la Xbox) ------------------------------------------
   Una cabecera sin nada a la venta (E3gSelectorLanding, `presupuesto`;
   _presupuesto.tpl): el esqueleto del panel (§2-5 y §10) con la lista de §6, pero
   cada reparación es un enlace a WhatsApp, sin precio («Pedir precio»), y donde va
   el resumen, cómo pedirlo. Sin estados de elegida: no hay nada que marcar. */
.e3gmo-pres__op .e3gmo-opcion__sel {
  color: var(--nxr-ink);
  text-decoration: none;
}

.e3gmo-pres__op .e3gmo-opcion__sel:hover {
  color: var(--nxr-ink);
}

.e3gmo-pres__op .e3gmo-opcion__sel:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--nxr-ink);
  outline-offset: 8px;
}

/* Sin elegida que lo enseñe entero, el síntoma puede ir en dos líneas. */
.e3gmo-pres__op .e3gmo-opcion__sintoma {
  white-space: normal;
}

/* «Pedir precio», donde el panel pone el precio: tinta, con subrayado (un enlace de
   acento sobre claro no se distingue por el color). */
.e3gmo-pres__pedir {
  flex: none;
  font-size: var(--e3g-text-14);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* El título de la lista es un <h2> (en el panel de compra, un <legend>): sin los
   márgenes de los encabezados del tema. */
.e3gmo-panel--presupuesto .e3gmo-lista__titulo {
  font-family: inherit;
  letter-spacing: normal;
}

.e3gmo-pres__titulo {
  margin: 0;
  color: var(--nxr-ink);
  font-size: var(--e3g-text-18);
  font-weight: 700;
  line-height: 1.35;
}

.e3gmo-pres__texto {
  margin: 0;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  line-height: 1.5;
}

.e3gmo-pres .e3gmo-reservar,
.e3gmo-pres .e3gmo-carrito {
  text-decoration: none;
}

.e3gmo-pres .e3gmo-reservar .e3gm-ico {
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .e3gmo-pres__titulo {
    font-size: var(--e3g-text-20);
  }

  .e3gmo-pres__texto {
    font-size: var(--e3g-text-16);
  }
}


/* --- 16. Recuperación de datos (la 6257) ------------------------------------------
   Lo que solo trae esa cabecera de presupuesto (E3gSelectorLanding, `lead` y
   `presupuesto.enlace`): una entradilla bajo el H1, qué móviles y qué casos, y una
   línea bajo los botones con el enlace al precio cerrado del iPhone (la 808). El
   enlace, de tinta y subrayado: el lima sobre blanco no se lee (paleta de marca). */
.e3gmo-head__lead {
  max-width: 34em;
  margin: 0;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-16);
  line-height: 1.5;
}

.e3gmo-pres__enlace {
  margin: 0;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  line-height: 1.5;
}

.e3gmo-pres__enlace a {
  color: var(--nxr-accent-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 768px) {
  .e3gmo-head__lead {
    font-size: var(--e3g-text-16);
  }
}

/* Precios pendientes: contacto, sin compra ni financiación de cero euros. */
.e3gmo-resumen.is-consulta .e3gmo-resumen__cifras,
.e3gmo-resumen.is-consulta .e3gmo-resumen__botones,
.e3gmo-resumen.is-consulta .e3gmo-donde { display: none; }
.e3gmo-consulta p { margin-bottom: 1rem; }
.e3gmo-consulta > a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 1rem; white-space: nowrap; }
.e3gmo-repair-time { margin: 1rem 0; font-size: var(--e3g-text-14); line-height: 1.5; }
.e3gmo-repair-time small { display: block; margin-top: .25rem; color: var(--nxr-text-muted, #5c636a); }
.e3gmo-tarifas { margin-block: 2rem; }
.e3gmo-tarifas details { border-bottom: 1px solid var(--nxr-border, #e5e7eb); padding: 1rem 0; }
.e3gmo-tarifas summary { font-weight: 600; cursor: pointer; }
.e3gmo-tarifas ul { padding-left: 1.25rem; margin-top: .75rem; }
.e3gmo-tarifas li { margin: .5rem 0; }
.e3gmo-tarifas__nombre { margin: 0; font: inherit; }
.e3gmo-tarifas h3.e3gmo-tarifas__nombre { font-size: var(--e3g-text-18); font-weight: 600; }
.e3gmo-tarifas a { text-decoration: underline; text-underline-offset: .16em; }
.e3gmo-tarifas__precio { white-space: nowrap; }
.e3gmo-tarifas__detalle { margin: .5rem 0 1rem; }
.e3gmo-tarifas--sin-modelos > ul { display: grid; gap: 1rem 2rem; padding-left: 0; }
@media (min-width: 768px) {
  .e3gmo-tarifas--sin-modelos > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}