/* Armonía con lo nuevo de bios.do (21-oct, Julio). Los módulos de Raymond (mu-plugins: asistente, comparador) y las
   opiniones de la ficha llegan con su propio estilo (letra del sistema, azul #1d4ed8, bordes grises). Aquí toman el
   lenguaje del tema: Poppins, azul de la marca, superficies suaves sin borde, mismos radios y el verde de WhatsApp.
   No se toca su lógica. Todo va con «body» delante para ganar a los <style> que los módulos ponen al final de la página. */

/* ── Comparador (bios-comparar.php) ── */
body .bcmp-btn { gap: 6px; margin-top: 8px; padding: 7px 12px; border: 0; border-radius: 999px; background: var(--surface, #f3f6fa);
  color: var(--ink-2); font: 500 12.5px/1 var(--font); transition: background 160ms, color 160ms; }
body .bcmp-btn:hover { background: var(--cielo, #e6f4fb); color: var(--blue-700); }
body .bcmp-btn[aria-pressed="true"] { background: var(--cielo, #e6f4fb); color: var(--blue-700); }
body .bcmp-modal { background: rgb(10 37 64 / .55); font: 14px/1.5 var(--font); }
body .bcmp-caja { border-radius: 24px; box-shadow: var(--shadow-pop); color: var(--ink); }
body .bcmp-top h2 { font: 700 clamp(18px, 2vw, 22px)/1.25 var(--font); color: var(--navy); }
body .bcmp-x { border-radius: 12px; background: var(--surface, #f3f6fa); color: var(--navy); }
body .bcmp-tabla th, body .bcmp-tabla td { border-bottom-color: var(--line); }
body .bcmp-tabla thead td { border-bottom: 0; }
body .bcmp-tabla thead img { border-radius: 12px; }
body .bcmp-tabla thead a { font-weight: 600; }
body .bcmp-tabla th { color: var(--muted); font-weight: 500; }
body .bcmp-sinfoto { background: var(--surface, #f3f6fa); border-radius: 12px; }
body .bcmp-quitar { font-family: var(--font); }
/* R-02: la fila de precio de la tabla dice «Reacondicionada» (el comparador solo compara laptops Bios) */
body .bcmp-tabla .bcmp-condicion { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--font); color: #0a5d8f; }
body .bcmp-wa a, body .basis-wa a { background: var(--wa); color: var(--wa-ink); border-radius: 12px; font: 600 13.5px/1.2 var(--font); }
body .bcmp-wa a:hover, body .basis-wa a:hover { background: var(--wa-hover); }
body .bcmp-nota { color: var(--muted); }
body .basis-panel { border-radius: 20px; box-shadow: var(--shadow-pop); font: 14px/1.5 var(--font); color: var(--ink); }
body .basis-head { padding: 14px 16px; background: var(--navy); }
body .basis-head b { font: 600 15px/1.3 var(--font); }
body .basis-head small { color: #b9c7d6; opacity: 1; }
body .basis-x { width: 36px; height: 36px; border-radius: 10px; }
body .basis-x:hover { background: #ffffff1a; }
body .basis-msgs { background: var(--surface, #f3f6fa); gap: 10px; padding: 14px; }
body .basis-m { border-radius: 16px; }
body .basis-yo { background: var(--blue-700); }
body .basis-ia { border: 0; background: #fff; box-shadow: 0 1px 2px rgb(10 37 64 / .06); }
body .basis-card { border: 0; border-radius: 14px; background: var(--cielo, #e6f4fb); color: var(--navy); }
body .basis-card span { color: var(--blue-700); }
body .basis-sug button { border: 0; background: #fff; color: var(--ink-2); font: 500 12.5px/1.2 var(--font); padding: 8px 12px; }
body .basis-sug button:hover { background: var(--cielo, #e6f4fb); color: var(--blue-700); }
body .basis-form { border-top: 0; padding: 10px 12px 12px; }
body .basis-form input { border: 0; border-radius: 12px; background: var(--field, #e8f3fc); padding: 11px 12px; font: 400 14px/1.3 var(--font); }
body .basis-form button { border-radius: 12px; background: var(--blue-700); font: 600 14px/1 var(--font); }
body .basis-nota { color: var(--muted); }

/* ── Flotantes sin choques: WhatsApp, Vistos recientemente, asistente y barra del comparador ── */
@media (max-width: 767px) {
  body .basis-panel { right: 12px; left: 12px; width: auto; bottom: 12px; height: min(560px, calc(100dvh - 96px)); }
}

/* ── Opiniones de la ficha: mismo lenguaje que «Preguntas» (tarjetas suaves, sin borde) ── */
body .product .review { border: 0; border-radius: 16px; padding: 18px 20px; background: var(--niebla, #f3f6fa); }
body .product .review__reply { border-left: 0; border-radius: 12px; background: #fff; }
body .product .reviews__form textarea { border: 0; border-radius: var(--radius-sm); background: var(--field, #e8f3fc); }
body .product .reviews__thanks { border-radius: 16px; background: var(--niebla, #f3f6fa); }

/* ── Pestañas de la ficha en celular: con 5 (llegó «Opiniones») ya no caben en rejilla; una fila que se desliza ── */
@media (max-width: 900px) {
  body .product .tabs .tabs__list { display: flex !important; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  body .product .tabs .tabs__list::-webkit-scrollbar { display: none; }
  body .product .tabs .tabs__tab { flex: none; scroll-snap-align: start; white-space: nowrap; padding-inline: 16px; }
}

/* ── Empresas: el campo de texto como los demás campos ── */
body .empresas__form .field textarea { border: 0; background: var(--field, #e8f3fc); }

/* ═══ Rediseño 21-oct (Julio) ═══ */

/* ── Comparar en la tarjeta: botón redondo sobre la foto, como el «+» de versiones anteriores.
   «+» para añadir; azul con «✓» cuando ya está en la comparación. El texto sigue ahí para lectores de pantalla. ── */
body .card { position: relative; }
body .card .bcmp-btn {
  position: absolute; z-index: 3; top: 12px; right: 12px; place-items: center;
  width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%;
  background: #fff; color: var(--navy); font-size: 0; box-shadow: 0 2px 10px rgb(10 37 64 / .16);
  transition: background 160ms, color 160ms, transform 160ms var(--ease-out), box-shadow 160ms;
}
body .card .bcmp-btn::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body .card .bcmp-btn[aria-pressed="true"] { background: var(--blue-700); color: #fff; }
body .card .bcmp-btn[aria-pressed="true"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206%209%2017l-5-5'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206%209%2017l-5-5'%2F%3E%3C%2Fsvg%3E"); }
@media (hover: hover) {
  body .card .bcmp-btn:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgb(10 37 64 / .22); }
  /* etiqueta al pasar el ratón */
  body .card .bcmp-btn::after {
    content: "Comparar"; position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    padding: 6px 10px; border-radius: 999px; background: var(--navy); color: #fff; font: 600 12px/1 var(--font); white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 160ms;
  }
  body .card .bcmp-btn[aria-pressed="true"]::after { content: "En la comparación"; }
  body .card .bcmp-btn:hover::after, body .card .bcmp-btn:focus-visible::after { opacity: 1; }
}
/* en la ficha, el mismo icono dentro de un botón con texto */

/* ── Tabla de comparación al estilo «Compara con calma»: filas alternas, lo mejor de cada fila en azul ── */
body .bcmp-tabla tbody tr:nth-child(odd) th,
body .bcmp-tabla tbody tr:nth-child(odd) td { background: #f6f8fb; }
body .bcmp-tabla th, body .bcmp-tabla td { border-bottom: 0; padding: 12px 14px; }
body .bcmp-tabla tbody tr th:first-child,
body .bcmp-tabla tbody tr td:first-child { border-radius: 12px 0 0 12px; }
body .bcmp-tabla tbody tr th:last-child,
body .bcmp-tabla tbody tr td:last-child { border-radius: 0 12px 12px 0; }
body .bcmp-mejor { background: inherit; }
body .bcmp-tabla tbody tr:nth-child(odd) td.bcmp-mejor { background: #f6f8fb; }
body .bcmp-tabla td.bcmp-mejor .bcmp-condicion { color: var(--blue-700); }
@media (prefers-reduced-motion: reduce) { body .card .bcmp-btn { transition: none; } }
/* el botón se coloca respecto a la tarjeta (su fila de acciones también estaba posicionada) */
body .card .card__actions { position: static; }

/* ═══ Auditoría de botones (21-oct) ═══ */
/* Pausa de «Un equipo para cada plan»: solo el icono (la palabra no cabe en 44 px y ya está en aria-label) */
body .spotlights__pause [data-pause-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Áreas táctiles de 44 px en el celular */
@media (max-width: 767px) {
  .bios-hero-row .slide .btn--outline, .section__head .link, .section__head > .link { min-height: 44px; display: inline-flex; align-items: center; }
}
body .listing__filters-btn [data-selected]:empty { display: none; } /* contador vacío: no ocupa hueco (descentraba «Filtros») */
@media (max-width: 767px) { body .bios-hero-row .lx__cta .btn--outline { min-height: 44px !important; padding-block: 0 !important; } }

/* ═══ Espaciados (auditoría 21-oct): una sola escala ═══
   Entre secciones: el mismo aire de contenido a contenido (96 px escritorio → 64 px celular), tengan fondo o no:
   cada sección lleva la mitad arriba y la mitad abajo. La franja de servicios (banda compacta) queda aparte. */
:root { --ritmo: clamp(64px, 7vw, 96px); }
#main > :is(section, .spotlights, .band, .advice):not(.services) { padding-block: calc(var(--ritmo) / 2) !important; margin-block: 0 !important; }
#main > .services { margin-block: calc(var(--ritmo) / 4) !important; }
/* Título de sección: 8 px al subtítulo y 24 px al contenido */
#main .section__head { margin-bottom: 24px !important; }
#main .section__head :is(.section__sub, p) { margin-top: 8px !important; }
#main section > .wrap > :is(h2.h2, .h2.section__title):only-of-type + * { margin-top: 24px; }
/* Rejillas de tarjetas: el mismo hueco en todas */
#main .grid,
#main .grid--band,
#main .uf__cards,
#main .tiles { gap: 20px !important; }
@media (max-width: 767px) { #main :is(.grid, .grid--band, .uf__cards) { gap: 12px !important; } #main .tiles { gap: 12px !important; } }
#main > .bios-hero-row { padding-bottom: calc(var(--ritmo) / 2 - 18px) !important; }
#main .uf__sub { margin-top: 8px !important; }

/* ═══ Movimiento al estilo Jitter (21-oct) ═══
   Dos curvas para todo: resorte con un rebote ligero y salida suave. Solo se animan transform y opacity (los mueve la
   tarjeta gráfica sin recalcular la página). Los gestos de «pasar el mouse» solo existen con mouse, y nada se mueve
   con «reducir movimiento». */
:root { --resorte: cubic-bezier(.34, 1.56, .64, 1); --suave: cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: no-preference) {
  /* 1) Botones: se elevan con resorte y se hunden al pulsar */
  body :is(.btn, .card__more, .spotlight__cta, .bcmp-ver, .uf__all, .chip-toggle, .spotlights__branches button, .tabs__tab, .tile__go, .hero__btn, .spotlights__btn, .spotlights__pause) {
    transition: transform .34s var(--resorte), background-color .2s ease, color .2s ease;
  }
  body :is(.btn, .card__more, .spotlight__cta, .bcmp-ver, .uf__all, .chip-toggle, .spotlights__branches button, .tabs__tab, .hero__btn, .spotlights__btn, .spotlights__pause, .wa-float, .bcmp-btn):active {
    transform: scale(.96); transition-duration: .08s;
  }
  /* 2) Flecha «Split» (como el «View Cart Button» de Jitter): sale por la derecha y vuelve por la izquierda */
  @keyframes bios-split { 0% { transform: none; opacity: 1; } 38% { transform: translateX(12px); opacity: 0; } 39% { transform: translateX(-12px); opacity: 0; } 100% { transform: none; opacity: 1; } }
  /* 3) Comparar: el icono salta al marcarlo */
  @keyframes bios-pop { 0% { transform: scale(.3) rotate(-25deg); } 100% { transform: none; } }
  body .card .bcmp-btn[aria-pressed="true"]::before { animation: bios-pop .5s var(--resorte); }
  /* 4) Flotantes: entran una vez con rebote, escalonados (solo antes de terminar: no pisa el «apartarse al bajar») */
  @keyframes bios-entra { from { transform: translateY(28px) scale(.85); opacity: 0; } }
  body .recent-widget { animation: bios-entra .7s var(--resorte) .5s backwards; }
  body .wa-float { animation: bios-entra .7s var(--resorte) .65s backwards; }
  /* paneles del asistente y del comparador: aparecen con resorte desde abajo */
  @keyframes bios-panel { from { transform: translateY(16px) scale(.97); opacity: 0; } }
  body .basis-panel:not([hidden]) { animation: bios-panel .45s var(--resorte); }
  body .bcmp-modal:not([hidden]) .bcmp-caja { animation: bios-panel .45s var(--resorte); }
  /* 5) Iconos: el gesto breve del encabezado y los banners, también en servicios, categorías y redes del pie */
  body :is(.tile, .services li, .footer__social a, .info-card, .empresas__facts li):hover .icon { animation: header-icon-jitter 440ms ease-out 1; transform-origin: center; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  body :is(.btn, .card__more, .spotlight__cta, .bcmp-ver, .uf__all, .tile__go):hover { transform: translateY(-2px); }
  body :is(.card__more, .spotlight__cta, .link, .btn, .tile__go, .uf__all):hover > svg.icon:last-child { animation: bios-split .5s var(--suave); }
  /* tarjetas: se elevan y la foto se acerca un poco */
  body .card { transition: transform .45s var(--suave), box-shadow .45s var(--suave); }
  body .card:hover { transform: translateY(-4px); }
  body .card__media img { transition: transform .7s var(--suave); }
  body .card:hover .card__media img { transform: scale(1.04); }
  body .tile:hover .tile__go { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) { .card .card__media { overflow: clip; } } /* el acercamiento de la foto no se sale de su caja */

/* ═══ Flotantes en una columna (Julio, 21-oct) ═══
   A la derecha, de abajo arriba: WhatsApp, «Te ayudo a elegir» e historial. Llegan desplegados con su texto y, a los
   5 s de terminar de entrar, se recogen en su icono (flotantes.js pone html.flotantes-recogidos). Con mouse, el texto
   vuelve al pasar por encima. Mismo alto (56 px) y mismo hueco (12 px) para los tres. */
:root { --flot: 56px; --flot-gap: 12px; --flot-der: max(16px, env(safe-area-inset-right, 0px)); --flot-base: calc(18px + env(safe-area-inset-bottom, 0px)); --flot-suelo: calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { :root { --flot-der: 24px; --flot-base: 24px; --flot-suelo: 24px; } }
/* con la barra del comparador abierta (celular), la columna sube por encima de ella */
body .wa-float.wa-float { right: var(--flot-der); bottom: var(--flot-base); }
body .recent-widget.recent-widget { left: auto !important; right: var(--flot-der) !important; bottom: calc(var(--flot-base) + 2 * (var(--flot) + var(--flot-gap))) !important; }
body .recent-panel { left: auto !important; right: 0; }
body .basis-panel { right: var(--flot-der); bottom: var(--flot-base); }
body .wa-float.wa-float { height: var(--flot); padding: 0 20px 0 15px; gap: 8px; }
body :is(.wa-float > span) {
  display: inline-block !important; max-width: 14em; opacity: 1; overflow: hidden; white-space: nowrap;
  transition: max-width .55s var(--suave), opacity .3s ease;
}
.wa-float { transition: padding .55s var(--suave), gap .55s var(--suave), transform .34s var(--resorte), background-color .2s ease; }

/* con mouse, el texto vuelve al pasar por encima o al llegar con el teclado */

@media (prefers-reduced-motion: reduce) { :is(.wa-float, .wa-float > span) { transition: none !important; } }

/* ═══ Cada foto sobre un degradado sutil (Julio, 21-oct) ═══
   Las fotos de producto se mezclan con «multiply»: el blanco de la foto toma el degradado de su caja y el equipo no
   cambia. Luz arriba al centro y un tono gris azulado suave hacia los bordes; radios del tema. */
:root { --foto-fondo: radial-gradient(120% 95% at 50% 32%, #ffffff 0%, #f5f8fb 52%, #e9eff5 100%); }
body :is(.card__media, .tile__media, .uf-card__img, .spotlight__image, .product .gallery__main, .gallery__thumbs button, .recent-item, .bios-hero-row .showcase li > a) {
  background: var(--foto-fondo) !important;
}
body .uf-card__img,
body .spotlight__image { border-radius: 14px; }
body .card .card__media { border-radius: 16px 16px 0 0; }
body .mini { background: var(--foto-fondo) !important; }
body .mini img { background: transparent !important; mix-blend-mode: multiply; }
body :is(.spotlight__image, .spotlight .product-crop) img { mix-blend-mode: multiply; }

/* ═══ Plantillas de botones de Jitter (jitter.video/templates/buttons) ═══ */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* «Interactive Button: Glow»: un brillo cruza los botones principales al pasar el mouse */
  body :is(.btn--primary, .btn--whatsapp, .bcmp-ver, .card .card__more) { position: relative; overflow: hidden; isolation: isolate; }
  body :is(.btn--primary, .btn--whatsapp, .bcmp-ver, .card .card__more)::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 32%, rgb(255 255 255 / .38) 50%, transparent 68%);
    transform: translateX(-120%);
  }
  body :is(.btn--primary, .btn--whatsapp, .bcmp-ver, .card .card__more):hover::after { animation: bios-brillo .9s var(--suave); }
  @keyframes bios-brillo { to { transform: translateX(120%); } }
  /* «Back / Next Buttons»: la flecha empuja hacia su lado */
  body :is(.hero__btn, .hero__nav, .spotlights__btn, .gnav__btn, .uf__arrow)[data-prev]:hover .icon,
  body :is(.hero__nav--prev, .gnav__prev):hover .icon,
  body .spotlights__btn[data-scroll="-1"]:hover .icon { animation: bios-atras .45s var(--resorte); }
  body :is(.hero__btn, .hero__nav, .spotlights__btn, .gnav__btn, .uf__arrow)[data-next]:hover .icon,
  body :is(.hero__nav--next, .gnav__next):hover .icon,
  body .spotlights__btn[data-scroll="1"]:hover .icon { animation: bios-adelante .45s var(--resorte); }
  @keyframes bios-atras { 50% { transform: translateX(-4px); } }
  @keyframes bios-adelante { 50% { transform: translateX(4px); } }
}
@media (prefers-reduced-motion: no-preference) {
  /* «On / Off Toggle»: al elegir sucursal, pestaña, uso o filtro, la opción da un pequeño salto */
  body :is(.spotlights__branches button[aria-pressed="true"], .tabs__tab[aria-selected="true"], .uf__uses button[aria-pressed="true"], .chip-toggle[aria-pressed="true"]) { animation: bios-elegido .42s var(--resorte); }
  @keyframes bios-elegido { 0% { transform: scale(.92); } 100% { transform: none; } }
}

/* ═══ Cuarta ronda (21-oct) ═══ */
/* «+» centrado: el botón llevaba el texto del módulo como segundo elemento de la rejilla y empujaba el icono hacia arriba */
body .card .bcmp-btn { display: flex; align-items: center; justify-content: center; gap: 0; line-height: 0; }
/* «Un equipo para cada plan» en pantallas pequeñas o verticales: el carrusel llega al borde de la pantalla y la tarjeta
   que asoma se funde con un desenfoque (sin filo). En escritorio no hay desenfoque. */
@media (max-width: 1023px) {
  body .spotlights__track { margin-inline: calc(-1 * var(--gutter, 16px)); padding-inline: var(--gutter, 16px); scroll-padding-inline: var(--gutter, 16px); }
  body .spotlights__wrap::before, body .spotlights__wrap::after {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    top: var(--spot-track-top, 0); height: calc(var(--spot-track-h, 0px) - 18px); width: calc(var(--gutter, 16px) + 14px);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  }
  body .spotlights__wrap::before { left: 0; -webkit-mask: linear-gradient(90deg, #000 35%, transparent); mask: linear-gradient(90deg, #000 35%, transparent); }
  body .spotlights__wrap::after { right: 0; -webkit-mask: linear-gradient(270deg, #000 35%, transparent); mask: linear-gradient(270deg, #000 35%, transparent); }
}

/* ═══ Ventana del comparador (comparar-plus.js) ═══ */
body .bcmp-modal { align-items: center; padding: 24px 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body .bcmp-caja { max-width: 1040px; padding: clamp(18px, 3vw, 32px); }
body .bcmp-top { align-items: flex-start; margin-bottom: 4px; }
body .bcmp-top h2 { margin: 0; }
.bcmp-sub { margin: 4px 0 0; color: var(--muted); font: 500 13px/1.3 var(--font); }
body .bcmp-top > div, body .bcmp-top h2 + .bcmp-sub { order: 0; }
/* cabecera de cada equipo: foto sobre el degradado, nombre, precio y «Reacondicionada» */
body .bcmp-tabla thead td { padding: 14px 10px 18px; text-align: left; vertical-align: top; }
.bcmp-foto { display: grid; place-items: center; width: 100%; max-width: 190px; height: clamp(112px, 11vw, 148px); margin-bottom: 10px; padding: 10px; border-radius: 14px; background: var(--foto-fondo); }
body .bcmp-foto img { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; object-fit: contain; mix-blend-mode: multiply; }
body .bcmp-foto .bcmp-sinfoto { width: auto; max-width: none; aspect-ratio: auto; margin: 0; background: none; color: var(--muted); font: 500 12px/1.3 var(--font); }
.bcmp-titulo { display: grid; gap: 2px; }
.bcmp-precio .bcmp-pill { display: flex; width: fit-content; margin: 6px 0 0; }
body .bcmp-tabla thead a { display: block; color: var(--navy); font: 600 15px/1.3 var(--font); text-decoration: none; }
body .bcmp-tabla thead a:hover { color: var(--blue-700); }
.bcmp-precio { display: block; margin-top: 6px; color: var(--navy); font: 800 18px/1.1 var(--font-price); }
.bcmp-precio small { display: block; margin-top: 3px; color: #0a5d8f; font: 500 12px/1.2 var(--font); }
body .bcmp-quitar { margin-top: 8px; padding: 6px 10px; border-radius: 999px; background: var(--surface, #f3f6fa); color: var(--muted); text-decoration: none; font: 500 12px/1 var(--font); }
body .bcmp-quitar:hover { background: #fde8e8; color: #b42318; }
/* filas: etiqueta a la izquierda, valores; la fila de precio ya va en la cabecera */
body .bcmp-tabla tbody tr[data-fila="Precio"] { display: none; }
body .bcmp-tabla tbody th { width: 140px; font: 500 13px/1.35 var(--font); color: var(--muted); }
body .bcmp-tabla tbody td { font: 500 14px/1.4 var(--font); color: var(--ink); }
body .bcmp-tabla tbody tr.is-igual td { color: var(--muted); }
body .bcmp-mejor { color: var(--navy) !important; font-weight: 700; }
.bcmp-pill { display: inline-flex; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--cielo, #e6f4fb); color: var(--blue-700); font: 700 11px/1.3 var(--font); white-space: nowrap; vertical-align: 1px; }
body .bcmp-tabla.solo-dif tr.is-igual { display: none; }
/* interruptor «Solo diferencias» (plantilla On/Off Toggle de Jitter) */
.bcmp-switch { display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: var(--ink-2); font: 600 14px/1.2 var(--font); cursor: pointer; user-select: none; }
.bcmp-switch small { color: var(--muted); font-weight: 500; }
.bcmp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bcmp-switch__track { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: #d5dee8; transition: background .25s ease; }
.bcmp-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(10 37 64 / .25); transition: transform .45s var(--resorte); }
.bcmp-switch input:checked + .bcmp-switch__track { background: var(--blue-700); }
.bcmp-switch input:checked + .bcmp-switch__track::after { transform: translateX(18px); }
.bcmp-switch input:focus-visible + .bcmp-switch__track { outline: 2px solid var(--blue-700); outline-offset: 3px; }
/* botones de WhatsApp con su icono */
body .bcmp-wa { gap: 10px; margin-top: 18px; }
body .bcmp-wa a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
/* movimiento: la caja entra con resorte y las filas aparecen una tras otra */
@media (prefers-reduced-motion: no-preference) {
  body .bcmp-modal:not([hidden]) { animation: bios-fondo .3s ease; }
  @keyframes bios-fondo { from { opacity: 0; } }
  body .bcmp-modal:not([hidden]) .bcmp-tabla tbody tr { animation: bios-fila .5s var(--suave) backwards; animation-delay: calc(120ms + var(--i, 0) * 45ms); }
  @keyframes bios-fila { from { opacity: 0; transform: translateY(8px); } }
  .bcmp-pill { animation: bios-pop .5s var(--resorte) .5s backwards; }
}
/* celular: hoja que sube desde abajo, primera columna fija al desplazar de lado */
@media (max-width: 767px) {
  body .bcmp-modal { align-items: flex-end; padding: 0; }
  body .bcmp-caja { max-height: 92dvh; overflow: auto; border-radius: 24px 24px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  body .bcmp-tabla { min-width: 0; }
  body .bcmp-tabla thead td,
body .bcmp-tabla tbody td { min-width: 42vw; }
  body .bcmp-tabla tbody th, body .bcmp-tabla thead th { position: sticky; left: 0; z-index: 1; width: 88px; min-width: 88px; background: #fff; }
  body .bcmp-tabla tbody tr:nth-child(odd) th { background: #f6f8fb; }
  .bcmp-pill { display: flex; width: fit-content; margin: 6px 0 0; }
  @media (prefers-reduced-motion: no-preference) { body .bcmp-modal:not([hidden]) .bcmp-caja { animation: bios-hoja .5s var(--suave); } @keyframes bios-hoja { from { transform: translateY(100%); } } }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes bios-aparece { from { opacity: 0; transform: translateX(-8px); } }
}
 /* el número ya va en el icono; así caben las dos acciones */

/* ═══ Columna de flotantes: un solo lenguaje (Julio, 21-oct) ═══
   De abajo arriba: WhatsApp, asistente, historial y comparar (solo con equipos elegidos). Los cuatro: pastilla de 56 px,
   icono en un círculo de 40 px a la izquierda, texto Poppins 600, misma sombra y el mismo globito para los números.
   Azul marino para lo de Bios; verde para WhatsApp. */
:root { --flot-sombra: 0 10px 26px rgb(10 37 64 / .28); --flot-globo-bg: var(--blue); }
body :is(.wa-float.wa-float) {
  height: var(--flot); min-height: 0; padding: 0 20px 0 8px; gap: 10px; border: 0; border-radius: 999px;
  font: 600 15px/1 var(--font); box-shadow: var(--flot-sombra);
}
/* círculo del icono */
body .wa-float.wa-float > svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #17a74c; color: #fff; fill: currentColor; }
body .wa-float.wa-float { color: var(--wa-ink); }

body .fin-pick__ctl { background: #eef5fa; }
.fin-pick__filtros { display: grid; gap: 12px; min-width: 0; }
.fin-pick__tipos { display: inline-flex; gap: 6px; padding: 5px; width: fit-content; border-radius: 999px; background: #fff; }
.fin-pick__tipos button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--font); cursor: pointer; transition: background .25s ease, color .25s ease; }
.fin-pick__tipos button small { display: grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: 999px; background: var(--niebla, #f3f6fa); font: 700 11px/1 var(--font); color: var(--muted); }
.fin-pick__tipos button[aria-checked="true"] { background: var(--navy); color: #fff; }
.fin-pick__tipos button[aria-checked="true"] small { background: var(--blue-700); color: #fff; }
body .fin-pick__usos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { body .fin-pick__usos { grid-template-columns: repeat(2, minmax(0, 1fr)); } body .fin-pick__usos button:first-child { grid-column: auto; } }
/* tarjetas: foto sobre el degradado, datos, precio y botón «Financiar este» a todo el ancho */
.fin-pick__fila { position: relative; }
.fin-pick__lista { display: grid; grid-auto-flow: column; margin: 0; padding: 4px 2px 18px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fin-pick__lista > li { scroll-snap-align: start; }
.fin-pick__lista > .uf__empty { grid-column: 1 / -1; width: min(100%, 520px); }
.fin-pick__flecha { position: absolute; z-index: 3; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 6px 18px rgb(10 37 64 / .18); cursor: pointer; transition: opacity .2s ease, transform .34s var(--resorte); }
.fin-pick__flecha[data-paso="-1"] { left: -20px; } .fin-pick__flecha[data-paso="1"] { right: -20px; }
.fin-pick__flecha:disabled { opacity: 0; pointer-events: none; }
.fin-pick__flecha .icon { width: 22px; height: 22px; }
@media (max-width: 1023px) { .fin-pick__flecha { display: none; } .fin-pick__lista { margin-inline: calc(-1 * var(--gutter, 16px)); padding-inline: var(--gutter, 16px); scroll-padding-inline: var(--gutter, 16px); }
  .fin-pick__fila::after { content: ""; position: absolute; top: 0; bottom: 18px; right: calc(-1 * var(--gutter, 16px)); width: calc(var(--gutter, 16px) + 14px); pointer-events: none; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask: linear-gradient(270deg, #000 35%, transparent); mask: linear-gradient(270deg, #000 35%, transparent); } }
.fin-card { display: grid; grid-template-rows: auto 1fr auto; background: #fff; box-shadow: 0 1px 2px rgb(10 37 64 / .06), 0 8px 24px rgb(10 37 64 / .06); transition: box-shadow .3s ease, transform .45s var(--suave); }
.fin-card__foto { place-items: center; background: var(--foto-fondo); }
.fin-card__foto img { mix-blend-mode: multiply; }
.fin-card__body { display: grid; align-content: start; }
.fin-card__marca { margin: 0; color: var(--blue-700); font: 700 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.fin-card__nombre { margin: 0; color: var(--navy); font: 600 16px/1.3 var(--font); }
.fin-card__specs { display: flex; flex-wrap: wrap; margin: 2px 0 0; padding: 0; list-style: none; }
.fin-card__specs li { border-radius: 999px; background: var(--surface, #f3f6fa); color: var(--ink-2); font: 500 12px/1.3 var(--font); }
.fin-card__precio { margin: 6px 0 0; }
.fin-card__precio .price { display: block; color: var(--navy); font: 800 20px/1.1 var(--font-price); }
.fin-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--cielo, #e6f4fb); color: var(--blue-700); font: 700 14.5px/1 var(--font); cursor: pointer; transition: background .2s ease, color .2s ease, transform .34s var(--resorte); }
.fin-card__btn:hover { background: #cfe9f8; }
.fin-card.is-elegido { box-shadow: 0 0 0 2px var(--blue-700), 0 12px 28px rgb(0 92 140 / .18); }
.fin-card.is-elegido .fin-card__btn { background: var(--blue-700); color: #fff; }
/* la tarjeta de la columna destella al cambiar de equipo */
@media (prefers-reduced-motion: no-preference) {
  .fin-card { animation: bios-fila .5s var(--suave) backwards; }
  .fin-card:nth-child(2) { animation-delay: .04s; } .fin-card:nth-child(3) { animation-delay: .08s; } .fin-card:nth-child(4) { animation-delay: .12s; }
  .fin-card.is-elegido .fin-card__btn .icon { animation: bios-pop .5s var(--resorte); }
  [data-loan-product].is-nuevo .pick-card { animation: bios-panel .55s var(--resorte); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) { .fin-card:hover { transform: translateY(-3px); } }

/* garantía y Bios Refurbished en corto */
.fin-garantia { margin: 0 0 clamp(32px, 4vw, 48px); padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: var(--navy); color: #fff; }
.fin-garantia .h3 { margin: 0 0 16px; color: #fff; }
.fin-garantia__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.fin-garantia__lista li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 16px; background: #ffffff12; }
.fin-garantia__lista .icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--blue-700); color: #fff; }
.fin-garantia__lista b { display: block; margin-bottom: 4px; font: 600 15px/1.3 var(--font); }
.fin-garantia__lista p { margin: 0; color: #c9d6e3; font: 400 13.5px/1.5 var(--font); }
.fin-garantia .link { color: #9fdcff; }
@media (max-width: 1023px) { .fin-garantia__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .fin-garantia__lista { grid-template-columns: 1fr; } }
/* los usos de la portada también saltan al elegir (usan aria-checked) */
@media (prefers-reduced-motion: no-preference) { body :is(.uf__uses, .fin-pick__tipos) button[aria-checked="true"] { animation: bios-elegido .42s var(--resorte); } }

.fin-card { grid-template-columns: minmax(0, 1fr); min-width: 0; } .fin-card__foto { min-width: 0; overflow: hidden; } .fin-card__foto img { min-width: 0; }

/* ═══ Empresas: rediseño (Julio, 21-oct) ═══ */
/* Cabecera: banda azul marino con luz de la marca; ventajas en tarjetas de cristal; formulario como tarjeta elevada */
body.page-template-page-empresas .shop {
  padding-block: clamp(24px, 4vw, 56px) clamp(32px, 5vw, 72px);
  background: radial-gradient(70% 90% at 0% 0%, #0b5a8c 0%, transparent 60%), radial-gradient(60% 80% at 100% 100%, #0a3f66 0%, transparent 65%), var(--navy);
  color: #fff;
}
body.page-template-page-empresas .shop .crumbs a,
body.page-template-page-empresas .shop .crumbs li { color: #b9c7d6; }
body.page-template-page-empresas .shop .crumbs li[aria-current] { color: #fff; }
body.page-template-page-empresas .shop .eyebrow { color: #7fd3ff; }
body.page-template-page-empresas .shop .h1 { color: #fff; }
body.page-template-page-empresas .shop__lead { color: #d3e0ec; font-size: 1.0625rem; }
body.page-template-page-empresas .shop__lead strong { color: #fff; }
body .empresas__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .empresas__facts li { align-items: center; gap: 12px; border-radius: 16px; font: 500 14px/1.4 var(--font); }
body .empresas__facts .icon { flex: none; margin: 0; border-radius: 50%; }
body.page-template-page-empresas .shop__actions .btn--primary { background: var(--blue-700); }
body.page-template-page-empresas .shop__actions .btn--primary:hover { background: var(--blue-800); }
body .empresas__card { max-width: none; padding: clamp(20px, 3vw, 32px); border: 0; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .45); }
body .empresas__card .h3 { color: var(--navy); }
@media (max-width: 599px) { body .empresas__facts { grid-template-columns: 1fr; } }
/* Franja de marcas */
.emp-marcas { padding-block: 28px; background: #fff; border-bottom: 1px solid #edf2f7; }
.emp-marcas p { margin: 0 0 16px; text-align: center; color: var(--muted); font: 500 13px/1.4 var(--font); letter-spacing: .02em; }
.emp-marcas ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px clamp(24px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.emp-marcas svg { display: block; height: 34px; width: auto; fill: #8796a8; transition: fill .25s ease, transform .4s var(--resorte); }
@media (hover: hover) { .emp-marcas li:hover svg { fill: var(--navy); transform: translateY(-2px); } }
/* Lo que ofrecemos: tarjetas blancas sin borde con icono en círculo */
body.page-template-page-empresas .info-card { gap: 10px; padding: 24px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgb(10 37 64 / .05), 0 10px 30px rgb(10 37 64 / .06); transition: transform .45s var(--suave), box-shadow .3s ease; }
body.page-template-page-empresas .info-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cielo, #e6f4fb); color: var(--blue-700); }
body.page-template-page-empresas .info-card h3 { margin: 4px 0 0; color: var(--navy); font: 600 17px/1.3 var(--font); }
body.page-template-page-empresas .info-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { body.page-template-page-empresas .info-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(10 37 64 / .06), 0 16px 36px rgb(10 37 64 / .1); } }
/* Equipos disponibles: pestañas y fila deslizable (mismas piezas que Financiamiento) */
body [data-empresas-stock] .fin-pick__tipos { margin-bottom: 18px; background: var(--niebla, #f3f6fa); }
body [data-empresas-stock] .empresas__more { margin-top: 8px; }
/* Cómo funciona: pasos numerados en círculos azules unidos por una línea */
body.page-template-page-empresas .howto__steps--4 > li { position: relative; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgb(10 37 64 / .05), 0 10px 30px rgb(10 37 64 / .06); }
/* Financiamiento compacto (Julio, 21-oct): encabezado de una línea, controles más bajos y tarjetas más pequeñas */
.fin-pick { margin: 0 0 32px; }
.fin-pick__head { margin-bottom: 12px; }
.fin-pick__titulo { margin: 0; color: var(--navy); font: 600 18px/1.3 var(--font); }
.fin-pick__titulo span { color: var(--muted); font-weight: 500; font-size: 14px; }
body .fin-pick__ctl { gap: 16px; margin-bottom: 14px; padding: 14px; border-radius: 22px; }
body .fin-pick__usos button { padding: 10px 12px; border-radius: 14px; }
body .fin-pick__usos b { font-size: 13.5px; }
body .fin-pick__usos span { font-size: 12px; }
.fin-pick__tipos button { min-height: 34px; padding: 0 14px; font-size: 13px; }
body .fin-pick__ctl .uf__money output { font-size: 1.15rem; }
.fin-pick__lista { grid-auto-columns: clamp(180px, 17%, 200px); gap: 12px; padding-bottom: 12px; }
.fin-card { gap: 8px; padding: 8px 8px 10px; border-radius: 16px; }
.fin-card__foto { aspect-ratio: 16 / 10; padding: 6px; border-radius: 12px; }
.fin-card__body { gap: 4px; padding-inline: 2px; }
.fin-card__nombre { font-size: 14px; }
.fin-card__precio .price { font-size: 16px; }
.fin-card__btn { min-height: 38px; border-radius: 10px; font-size: 13px; }
.fin-pick__flecha { top: 30%; width: 42px; height: 42px; }
@media (max-width: 1023px) { .fin-pick__lista { grid-auto-columns: min(56vw, 210px); } }
/* encabezado de la página más contenido */
body[data-page="financiamiento"] .page-head .h1 { font-size: clamp(26px, 3vw, 34px); }
body[data-page="financiamiento"] .page-head { margin-bottom: 20px; }
body[data-page="financiamiento"] .page-head p:not(.eyebrow) { margin-top: 6px; font-size: 15px; }
body[data-page="financiamiento"] #main .page-head h1.h1 { font-size: clamp(24px, 2.6vw, 32px) !important; line-height: 1.2; margin-block: 4px 0; }
body[data-page="financiamiento"] #main .page-head { margin-bottom: 16px !important; padding-bottom: 0 !important; }
body[data-page="financiamiento"] #main .page-head > p:not(.eyebrow) { max-width: 70ch; margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
/* tarjetas de financiar/cotizar: todas las características, en píldoras pequeñas; foto centrada en su caja */
.fin-card__foto { position: relative; display: block; }
.fin-card__foto img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-width: none; object-fit: contain; object-position: center; }
.fin-card__specs { gap: 4px; }
.fin-card__specs li { padding: 2px 6px; font-size: 10.5px; line-height: 1.35; white-space: nowrap; }

/* ═══ Empresas · «1 · Arma tu pedido» en la cabecera (forms.js, stockEmpresas) ═══ */
.emp-paso { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--blue); color: #fff; font: 700 14px/1 var(--font); vertical-align: 2px; }
.emp-pedido { display: grid; gap: 14px; margin-top: 28px; padding: 20px; border-radius: 24px; background: #ffffff0d; }
.emp-pedido__head { display: flex; align-items: flex-start; gap: 0; }
.emp-pedido__head .emp-paso { margin-top: 1px; }
.emp-pedido__titulo { margin: 0; color: #fff; font: 600 18px/1.3 var(--font); }
.emp-pedido__head p { margin: 2px 0 0; color: #b9c9d9; font: 400 13.5px/1.45 var(--font); }
.emp-pedido .fin-pick__tipos { background: #ffffff14; }
.emp-pedido .fin-pick__tipos button { color: #d3e0ec; }
.emp-pedido .fin-pick__tipos button small { background: #ffffff1f; color: #d3e0ec; }
.emp-pedido .fin-pick__tipos button[aria-checked="true"] { background: #fff; color: var(--navy); }
.emp-pedido .fin-pick__tipos button[aria-checked="true"] small { background: var(--blue-700); color: #fff; }
.emp-pedido .fin-pick__lista { grid-auto-columns: 168px; gap: 10px; padding-bottom: 10px; scrollbar-color: #ffffff33 transparent; }
.emp-pedido .fin-card { box-shadow: none; }
.emp-pedido .fin-card__specs { display: none; } /* en la cabecera solo lo esencial; las características van en la ficha */
.emp-pedido .fin-card__nombre { font-size: 13.5px; }
.emp-pedido .fin-pick__flecha[data-paso="-1"] { left: -14px; } .emp-pedido .fin-pick__flecha[data-paso="1"] { right: -14px; }
/* bandeja «Tu pedido» */
.emp-bandeja { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: #ffffff12; }
.emp-bandeja__titulo { margin: 0; color: #fff; font: 600 15px/1.3 var(--font); }
.emp-bandeja__titulo b { color: #7fd3ff; font-weight: 600; }
.emp-bandeja__vacio { display: flex; align-items: center; gap: 10px; margin: 0; color: #9fb3c7; font: 400 13.5px/1.4 var(--font); }
.emp-bandeja__vacio .icon { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: #ffffff14; color: #7fd3ff; }
.emp-bandeja__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.emp-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 14px; background: #fff; color: var(--ink); }
.emp-item img { width: 48px; height: 48px; padding: 4px; border-radius: 10px; object-fit: contain; background: var(--foto-fondo); }
.emp-item b { display: block; overflow: hidden; color: var(--navy); font: 600 13.5px/1.3 var(--font); white-space: nowrap; text-overflow: ellipsis; }
.emp-item span { color: var(--muted); font: 500 12px/1.3 var(--font); }
.emp-item__cant { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--niebla, #f3f6fa); }
.emp-item__cant button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--navy); font: 600 16px/1 var(--font); cursor: pointer; }
.emp-item__cant button:hover { background: var(--blue-700); color: #fff; }
.emp-item__cant output { min-width: 22px; text-align: center; color: var(--navy); font: 700 14px/1 var(--font); }
.emp-item__quitar { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.emp-item__quitar:hover { background: #fde8e8; color: #b42318; }
.emp-bandeja__ir { justify-self: start; }
.empresas__card .h3 { display: flex; align-items: center; }
@media (max-width: 479px) { .emp-pedido { padding: 14px; } .emp-item { grid-template-columns: 40px minmax(0, 1fr) auto; } .emp-item img { width: 40px; height: 40px; } .emp-item__quitar { display: none; } }
body.page-template-page-empresas .shop__intro, .emp-pedido, .emp-pedido .fin-pick__fila { min-width: 0; }
.emp-pedido .fin-pick__lista { max-width: 100%; margin-inline: 0 !important; padding-inline: 2px !important; }
.emp-pedido .fin-pick__fila::after { content: none; }
.emp-pedido, .emp-bandeja { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479px) { .fin-pick__tipos { display: flex; width: 100%; } .fin-pick__tipos button { flex: 1; justify-content: center; gap: 6px; padding: 0 8px; } }

/* ═══ Empresas · simplificado (Julio: «criterio, simplicidad y buen gusto») ═══ */
/* ventajas: lista limpia en dos columnas, sin cajas */
body .empresas__facts { gap: 14px 28px; margin: 24px 0 0; }
body .empresas__facts li { padding: 0; background: none; color: #d3e0ec; font-size: 14px; }
body .empresas__facts .icon { width: 22px; height: 22px; padding: 0; background: none; color: #7fd3ff; }
/* en escritorio el formulario está al lado: sin botones repetidos */
@media (min-width: 1024px) { body.page-template-page-empresas .shop__actions { display: none; } }
/* paso 1 sin panel: título corto, pestañas y fila */
body .emp-pedido { gap: 14px; margin-top: 36px; padding: 0; background: none; border-radius: 0; }
body .emp-pedido__head { align-items: center; }
body .emp-pedido__titulo { font: 600 16px/1.3 var(--font); }
body .emp-pedido__titulo span { color: #9fb3c7; font-weight: 400; font-size: 13.5px; }
body .emp-pedido .fin-pick__tipos { background: none; padding: 0; gap: 4px; }
body .emp-pedido .fin-pick__tipos button { min-height: 32px; padding: 0 12px; }
body .emp-pedido .fin-pick__tipos button:not([aria-checked="true"]) small { display: none; }
/* «Tu pedido»: vacío es solo una línea; con equipos, la caja */
body .emp-bandeja.is-vacia { padding: 0; background: none; }
body .emp-bandeja.is-vacia .emp-bandeja__titulo { display: none; }
body .emp-bandeja__vacio { font-size: 13px; }
body .emp-bandeja__vacio .icon { width: 18px; height: 18px; padding: 0; background: none; }
/* formulario: lo opcional plegado */
.emp-mas { grid-column: 1 / -1; }
.emp-mas summary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; color: var(--blue-700); font: 600 14px/1.2 var(--font); cursor: pointer; list-style: none; }
.emp-mas summary::-webkit-details-marker { display: none; }
.emp-mas summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cielo, #e6f4fb); font-weight: 700; transition: transform .35s var(--resorte); }
.emp-mas[open] summary::before { transform: rotate(45deg); }
.emp-mas summary small { color: var(--muted); font-weight: 400; }
.emp-mas > .loan__fields { margin-top: 10px; }
/* cantidades juntas en una fila de tres */
@media (min-width: 640px) {
  body .empresas__form > .loan__fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body .empresas__form > .loan__fields > .field { grid-column: span 3; }
  body .empresas__form > .loan__fields > .field--full,
body .empresas__form > .loan__fields > .emp-mas { grid-column: 1 / -1; }
  body .empresas__form > .loan__fields > .field:has([name="laptops"], [name="desktops"], [name="monitores"]) { grid-column: span 2; }
}
.combo legend { margin-bottom: 8px; padding: 0; color: var(--navy); font: 600 14px/1.3 var(--font); }
.combo legend small { color: var(--muted); font-weight: 400; }
.combo ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.combo label { display: grid; grid-template-columns: 20px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 12px; cursor: pointer; transition: background .2s ease, box-shadow .2s ease; }
.combo label:has(input:checked) { background: var(--cielo, #e6f4fb); box-shadow: inset 0 0 0 1.5px var(--blue-700); }
.combo input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue-700); }
.combo img { width: 40px; height: 40px; padding: 3px; border-radius: 8px; object-fit: contain; background: var(--foto-fondo); mix-blend-mode: multiply; }
.combo b { display: block; overflow: hidden; color: var(--navy); font: 600 13px/1.3 var(--font); white-space: nowrap; text-overflow: ellipsis; }
.combo span small { color: var(--muted); font: 500 11.5px/1.3 var(--font); }
.combo em { color: var(--navy); font: 700 13px/1 var(--font); font-style: normal; white-space: nowrap; }
.combo__total { margin: 8px 2px 0; color: var(--ink-2); font: 500 13.5px/1.3 var(--font); }
.combo__total b { color: var(--navy); font-family: var(--font-price); font-size: 16px; }

/* ═══ Ficha (22-oct, Julio) ═══ */
/* Columna izquierda: la galería se queda a la vista y debajo van garantía, retiro, envío y horario en tarjetas 2×2 */
@media (min-width: 1024px) {
  body .product__main { position: sticky; top: 104px; align-self: start; display: grid; gap: 16px; }
  body .assurances.is-lateral { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
  body .assurances.is-lateral > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px; border: 0; border-radius: 18px; background: var(--niebla, #f3f6fa); }
  body .assurances.is-lateral > li > svg { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--cielo, #e6f4fb); color: var(--blue-700); }
  body .assurances.is-lateral b { display: block; margin-bottom: 2px; color: var(--navy); font: 600 14.5px/1.3 var(--font); }
  body .assurances.is-lateral span { color: var(--ink-2); font: 400 13px/1.45 var(--font); }
}
/* «Complétala con»: un renglón que se despliega; aparece a los 15 s de ver el equipo */
.combo { margin: 0; padding: 0; border: 0; border-radius: 14px; background: var(--niebla, #f3f6fa); overflow: clip; }
.combo__abrir { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.combo__abrir b { display: block; color: var(--navy); font: 600 14px/1.3 var(--font); }
.combo__abrir small { color: var(--muted); font: 500 12.5px/1.3 var(--font); }
.combo__abrir i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.combo__abrir i::before, .combo__abrir i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--blue-700); }
.combo__abrir i::after { transform: rotate(90deg); transition: transform .35s ease; }
.combo.is-abierto .combo__abrir i { transform: rotate(180deg); }
.combo.is-abierto .combo__abrir i::after { transform: rotate(0deg); }
.combo__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.16,1,.3,1); }
.combo__cuerpo > div { min-height: 0; overflow: hidden; padding-inline: 8px; }
.combo.is-abierto .combo__cuerpo { grid-template-rows: 1fr; }
.combo.is-abierto .combo__cuerpo > div { padding-bottom: 8px; }
.combo label { background: #fff; }
.combo label:hover { background: #fff; box-shadow: inset 0 0 0 1px #d5e3ef; }
@media (prefers-reduced-motion: no-preference) {
  .combo.is-nuevo { animation: combo-llega .7s cubic-bezier(.16,1,.3,1); }
  @keyframes combo-llega { from { opacity: 0; transform: translateY(-6px); } }
  .combo.is-abierto li { animation: bios-fila .45s cubic-bezier(.16,1,.3,1) backwards; }
  .combo.is-abierto li:nth-child(2) { animation-delay: .05s; }
  .combo.is-abierto li:nth-child(3) { animation-delay: .1s; }
  .combo.is-abierto li:nth-child(4) { animation-delay: .15s; }
}
@media (prefers-reduced-motion: reduce) { .combo__cuerpo { transition: none; } }

/* ═══ Financiamiento: carga uniforme y en orden (22-oct) ═══
   Al llegar los datos todo entra de arriba abajo: título → filtros → tarjetas → garantía (el hueco lo reserva la regla
   «.page-head + .loan» de más abajo, con el alto medido: selector 644 / 876 px en teléfono; garantía 252 / 620). */
@media (prefers-reduced-motion: no-preference) {
  .fin-pick.is-entrando > *, .fin-garantia.is-entrando { animation: fin-entra .6s cubic-bezier(.16,1,.3,1) backwards; }
  .fin-pick.is-entrando > :nth-child(1) { animation-delay: 0s; }
  .fin-pick.is-entrando > :nth-child(2) { animation-delay: .08s; }
  .fin-pick.is-entrando > :nth-child(3) { animation-delay: .16s; }
  .fin-garantia.is-entrando { animation-delay: .26s; }
  .fin-pick.is-entrando .fin-card { animation-delay: calc(.2s + var(--n, 0) * 40ms); }
  @keyframes fin-entra { from { opacity: 0; transform: translateY(10px); } }
}
/* Hueco reservado solo con CSS (se aplica desde el primer pintado, antes que cualquier JS): mientras la solicitud sigue
   pegada al título, lleva encima el alto de selector + garantía, con sus esqueletos dibujados. Al llegar el selector,
   se mete entre ambos y esta regla deja de aplicar: el hueco pasa a ser el contenido real, sin salto. */
body[data-page="financiamiento"] .page-head + .loan { position: relative; margin-top: calc(644px + 32px + 252px + clamp(32px, 4vw, 48px)); }
body[data-page="financiamiento"] .page-head + .loan::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + clamp(32px, 4vw, 48px)); height: calc(644px + 32px + 252px);
  border-radius: 22px; pointer-events: none;
  background:
    linear-gradient(var(--surface), var(--surface)) 0 0 / 280px 23px no-repeat,
    linear-gradient(var(--surface), var(--surface)) 0 37px / 100% 177px no-repeat,
    repeating-linear-gradient(90deg, var(--surface) 0 200px, transparent 200px 212px) 0 228px / 100% 392px no-repeat,
    linear-gradient(var(--surface), var(--surface)) 0 676px / 100% 252px no-repeat;
}
@media (max-width: 1023px) { body[data-page="financiamiento"] .page-head + .loan { margin-top: calc(644px + 32px + 400px + 32px); } body[data-page="financiamiento"] .page-head + .loan::before { height: calc(644px + 32px + 400px); } }
@media (max-width: 599px) {
  body[data-page="financiamiento"] .page-head + .loan { margin-top: calc(876px + 32px + 620px + 32px); }
  body[data-page="financiamiento"] .page-head + .loan::before { height: calc(876px + 32px + 620px); background:
    linear-gradient(var(--surface), var(--surface)) 0 0 / 220px 23px no-repeat,
    linear-gradient(var(--surface), var(--surface)) 0 37px / 100% 413px no-repeat,
    repeating-linear-gradient(90deg, var(--surface) 0 210px, transparent 210px 222px) 0 464px / 100% 398px no-repeat,
    linear-gradient(var(--surface), var(--surface)) 0 908px / 100% 620px no-repeat; }
}

/* ═══ Ficha · «¿Para qué sirve?» (sección de Raymond, 22-oct): una fila de opciones con icono y una explicación a la
   vez (ficha-combo.js convierte cada título en botón; lo demás queda plegado y la búsqueda del navegador lo abre) ═══ */
body .product .usos { margin-block: clamp(32px, 4vw, 48px) 0; }
body .product .usos .section__title { margin: 0 0 14px; font-size: clamp(20px, 2vw, 24px); }
body .product .usos .faq__grid { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; } /* sin separación entre líneas: la da el margen de cada opción (un panel oculto no deja hueco) */
body .product .usos .faq__item { display: contents; }
body .product .usos .faq__item dt { margin: 0 0 8px; }
body .product .usos .faq__item dd { order: 99; flex: 0 0 100%; max-width: none; margin: 0; padding: 16px max(20px, calc(100% - 68ch - 20px)) 16px 20px; border-radius: 16px; background: var(--cielo, #e6f4fb); color: var(--ink-2); font: 400 15px/1.55 var(--font); }
body .product .usos .section__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; color: var(--muted); font: 500 13px/1.3 var(--font); }
body .product .usos .section__sub .link { padding: 6px 12px; border-radius: 999px; background: var(--cielo, #e6f4fb); color: var(--blue-700); font: 600 13px/1.2 var(--font); text-decoration: none; }
body .product .usos .section__sub .link:hover { background: #cfe9f8; }

/* los «·» del HTML de Raymond sobran entre píldoras: el texto suelto se oculta a la vista (sigue para Google y
   lectores de pantalla) y la etiqueta se vuelve a poner con ::before */
body .product .usos .section__sub { font-size: 0; }
body .product .usos .section__sub::before { content: "Te puede ayudar:"; font: 500 13px/1.3 var(--font); color: var(--muted); margin-right: 2px; }
body .product .usos .section__sub { max-width: none; }
@media (max-width: 599px) {
  body .product .usos .faq__grid { gap: 0 8px; }
  body .product .usos .faq__grid::-webkit-scrollbar { display: none; }
  body .product .usos .section__sub { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter, 16px)); padding-inline: var(--gutter, 16px); scrollbar-width: none; }
  body .product .usos .section__sub::-webkit-scrollbar { display: none; }
  body .product .usos .section__sub .link { flex: none; white-space: nowrap; }
}
body .product .usos .section__sub::before { flex: none; white-space: nowrap; }
/* La columna de la foto cabe en la pantalla (foto + garantía/retiro/envío/horario) para poder quedarse fija mientras
   se baja por la compra: la galería deja de ser un cuadrado fijo y toma el alto que queda, entre 380 y 742 px. */
@media (min-width: 1024px) {
  body .product .product__main .gallery .gallery__main { aspect-ratio: auto !important; height: clamp(380px, calc(100vh - 104px - 24px - 16px - var(--alto-garantias, 164px)), 742px) !important; }
}

/* ═══ Pie de página ordenado (22-oct) ═══
   Contacto y horario en columnas propias; cada dato lleva su etiqueta pequeña arriba y el valor debajo. */
body .footer__contact li + li { margin-top: 14px; }
body .footer__contact small { display: block; margin-bottom: 2px; font: 500 12px/1.3 var(--font); color: rgb(255 255 255 / .6); }
body .footer__contact a { color: #fff; font-weight: 500; }
body .footer__hours { display: grid; gap: 10px; margin: 0; }
body .footer__hours dt { font: 500 12px/1.3 var(--font); color: rgb(255 255 255 / .6); }
body .footer__hours dd { margin: 2px 0 0; color: #fff; font-weight: 500; }
body .footer__inner .footer__note { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgb(255 255 255 / .6); }
body .footer__title--sub { margin-top: 24px; }
@media (min-width: 1024px) {
  body .footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  body .footer__inner > .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  body .footer__inner { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
  body .footer__inner > .footer__brand { grid-column: auto; }
}

/* ═══ Sistema de lectura (22-oct, Julio) ═══
   Textos que llegan de WordPress como texto corrido: guías de compra y políticas (páginas con plantilla por defecto,
   menos la portada, que comparte esa clase) y los bloques de posicionamiento que el PHP añade bajo Financiamiento y
   Taller (section.wrap.bios-…-seo). Cada tipo de contenido tiene su forma:
   · títulos con aire arriba y pegados a su texto; párrafos de ~68 caracteres;
   · puntos que empiezan en negrita (comparaciones) → tarjetas con la negrita delante, en su color; enlaces a equipos con su cifra → filas;
     puntos simples (requisitos) → lista con marca; tablas de precios → filas alternas sin bordes;
   · cifras en azul; preguntas frecuentes sin bordes con «+» que gira.
   Jerarquía de cajas: en página blanca las cajas son grises; en la banda gris (bloques de Financiamiento y Taller)
   las cajas son blancas. */
body.page-template-default:not(.home) main > .wrap { --caja: #f3f6fa; --caja-sobre: #e9f1f8; }
section.wrap[class*="-seo"] {
  --caja: #fff; --caja-sobre: #f6f9fc;
  margin: clamp(48px, 7vw, 96px) auto 0 !important; padding-block: clamp(40px, 5vw, 64px);
  background: var(--niebla, #f3f6fa); box-shadow: 0 0 0 100vmax #f3f6fa; clip-path: inset(0 -100vmax);
}
body.page-template-default:not(.home) main > .wrap { padding-bottom: clamp(48px, 6vw, 80px); }

/* títulos */
body.page-template-default:not(.home) main > .wrap > .page-head { padding-block: clamp(24px, 4vw, 48px) 0; }
body.page-template-default:not(.home) main > .wrap > .page-head .h1 { max-width: 22ch; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > h2 {
  max-width: 30ch; margin: clamp(40px, 5vw, 64px) 0 14px !important; color: var(--navy);
  font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--font); letter-spacing: -.01em; text-wrap: balance;
}
section.wrap[class*="-seo"] > h2:first-child { margin-top: 0 !important; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > h3 { margin: 32px 0 12px !important; color: var(--navy); font: 600 18px/1.3 var(--font); }

/* párrafos */
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > p {
  max-width: 68ch !important; margin: 0 0 16px !important; color: var(--ink-2); font-size: 16px; line-height: 1.7; text-wrap: pretty;
}
body.page-template-default:not(.home) main > .wrap > .page-head + p { max-width: 62ch !important; margin-top: 16px !important; font-size: clamp(16.5px, 1.4vw, 18px); line-height: 1.65; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > p.muted { margin-top: 12px !important; color: var(--muted); font-size: 13.5px !important; line-height: 1.55; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) :is(p, li, td) strong { color: var(--navy); font-weight: 600; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) :is(p, li) a,
.bios-faq a { color: var(--blue-700); font-weight: 500; text-underline-offset: 3px; }

/* listas */
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:not(.grid) {
  display: grid; gap: 10px; max-width: 880px; margin: 0 0 8px !important; padding: 0 !important; list-style: none !important;
}
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:not(.grid) > li { margin: 0 !important; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
/* · comparación: cada punto empieza en negrita → tarjetas; la negrita sigue en la línea (a veces los dos puntos van
     fuera de ella) y las cifras van en azul */
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:has(> li > strong:first-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; max-width: none; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:has(> li > strong:first-child) > li { padding: 20px 22px !important; border: 0 !important; border-radius: 18px !important; background: var(--caja); font-size: 15px; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:has(> li > strong:first-child) > li > strong:first-child { font: 600 16px/1.35 var(--font); }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:not(.grid) > li strong:not(:first-child) { color: var(--blue-700); }
/* · equipos con su cifra: cada punto empieza con el enlace → filas */
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:has(> li > a:first-child):not(.bios-guias-lista) { gap: 8px; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:has(> li > a:first-child):not(.bios-guias-lista) > li { padding: 14px 18px !important; border-radius: 14px; background: var(--caja); }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:has(> li > a:first-child):not(.bios-guias-lista) > li > a:first-child { color: var(--navy); font-weight: 600; text-decoration: none; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:has(> li > a:first-child):not(.bios-guias-lista) > li > a:first-child:hover { color: var(--blue-700); text-decoration: underline; }
/* · puntos simples (requisitos…) → lista con marca */
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:not(.grid):not(.bios-pv):not(:has(> li > strong:first-child, > li > a:first-child)) { gap: 8px; max-width: 68ch; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:not(.grid):not(.bios-pv):not(:has(> li > strong:first-child, > li > a:first-child)) > li { position: relative; padding-left: 30px; font-size: 16px; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > ul:not(.grid):not(.bios-pv):not(:has(> li > strong:first-child, > li > a:first-child)) > li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; background: var(--blue-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* · índice de guías: cada guía es una tarjeta que se pulsa entera */
body.page-template-default:not(.home) main > .wrap > .bios-guias-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; max-width: none; margin-top: 28px !important; }
body.page-template-default .bios-guias-lista > li { position: relative; padding: 20px 22px !important; border: 0 !important; border-radius: 18px !important; background: var(--caja); transition: background-color .15s ease-out, transform .2s ease-out; }
body.page-template-default .bios-guias-lista > li > a { display: block; color: var(--navy) !important; font: 600 17px/1.35 var(--font) !important; text-decoration: none; text-wrap: balance; }
body.page-template-default .bios-guias-lista > li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.page-template-default .bios-guias-lista > li > p { margin: 6px 0 0 !important; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
@media (hover: hover) { body.page-template-default .bios-guias-lista > li:hover { background: var(--caja-sobre); transform: translateY(-2px); } }
body.page-template-default .bios-guias-lista > li:focus-within { outline: 3px solid var(--blue-700); outline-offset: 2px; }

/* tablas de precios (Taller) */
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > table {
  width: 100% !important; max-width: 880px; margin: 20px 0 8px !important; border-collapse: separate !important; border-spacing: 0;
  border-radius: 18px; overflow: hidden; background: var(--caja); font-variant-numeric: tabular-nums;
}
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > table :is(th, td) { padding: 14px 20px !important; border: 0 !important; font-size: 15px; line-height: 1.45; }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > table th { color: var(--muted); font: 600 13px/1.3 var(--font); }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > table td { color: var(--ink-2); }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > table tbody tr:nth-child(odd) > td { background: rgb(10 37 64 / .035); }
:is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > table :is(th, td):last-child { text-align: right !important; white-space: nowrap; }
@media (max-width: 639px) {
  :is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > table :is(th, td) { padding: 12px 14px !important; font-size: 14px; }
  :is(body.page-template-default:not(.home) main > .wrap, section.wrap[class*="-seo"]) > table :is(th, td):last-child { white-space: normal; }
}

/* equipos en stock de las guías: sin borde */
body.page-template-default:not(.home) main > .wrap > ul.grid { margin: 8px 0 0 !important; }
body.page-template-default:not(.home) main > .wrap > ul.grid .card { border: 0 !important; background: #fff; box-shadow: 0 1px 2px rgb(10 37 64 / .05), 0 10px 30px rgb(10 37 64 / .07); }
/* 22-oct: quitado el "Reacondicionada" por CSS (marcaria tambien equipos nuevos); lo pone el generador de guias */

/* preguntas frecuentes (los estilos en línea del generador se anulan) */
.bios-faq { display: grid; gap: 10px; max-width: 880px; margin: 0 !important; }
section.wrap[class*="-seo"] > :not(h2) + .bios-faq { margin-top: 40px !important; }
section.wrap[class*="-seo"] > :not(h2) + .bios-faq::before { content: "Preguntas frecuentes"; margin-bottom: 6px; color: var(--navy); font: 600 clamp(20px, 2vw, 24px)/1.25 var(--font); }
.bios-faq details { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: var(--caja, #f3f6fa); transition: background-color .15s ease-out; }
.bios-faq summary { position: relative; padding: 18px 60px 18px 22px; color: var(--navy); font: 600 16px/1.4 var(--font) !important; list-style: none; cursor: pointer; }
.bios-faq summary::-webkit-details-marker { display: none; }
.bios-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--cielo, #e6f4fb); color: var(--blue-700); font: 500 19px/1 var(--font); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.bios-faq details[open] summary::after { transform: rotate(45deg); }
.bios-faq summary:focus-visible { outline: 3px solid var(--blue-700); outline-offset: -3px; border-radius: 16px; }
.bios-faq details > p { max-width: 70ch; margin: 0 !important; padding: 0 22px 20px; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
@media (hover: hover) { .bios-faq details:not([open]):hover { background: var(--caja-sobre, #e9f1f8); } }
@media (prefers-reduced-motion: no-preference) { .bios-faq details[open] > p { animation: faq-abre .3s ease-out; } @keyframes faq-abre { from { opacity: 0; transform: translateY(-4px); } } }

/* ═══ Financiamiento: «Antes de empezar» quieta y entera (22-oct) ═══
   No entra con animación y se compacta para quedar fija, completa, junto a la solicitud aun en pantallas de 768 px.
   Cajas sin bordes: la guía es gris claro y la solicitud es una tarjeta blanca con sombra suave. */
body .loan__aside { transform: none !important; opacity: 1 !important; transition: none !important; border: 0 !important; background: var(--niebla, #f3f6fa); }
body .loan__form { border: 0 !important; box-shadow: 0 1px 2px rgb(10 37 64 / .05), 0 14px 40px rgb(10 37 64 / .08); }
@media (min-width: 1024px) {
  body .loan__aside { top: 104px; gap: 10px; padding: 22px 24px; font-size: 14.5px; line-height: 1.5; }
  body .loan__aside .loan__reqs { gap: 6px; }
}

/* ═══ Contraste y letra mínima (22-oct) ═══
   Todo texto normal llega a 4.5:1 (WCAG AA). El azul de enlaces y acentos se oscurece un punto (#0077B6 → #006FA8):
   sobre los fondos celestes quedaba en 4.2–4.49. «Precio incluye ITBIS» sube a 12 px y a un gris más firme. */
html:root { --blue-700: #006fa8; } /* html:root: bios.css declara su :root después de sus @import */
body .price__itbis { font-size: 12px; color: #5b6574; }
body .cpu-banner .price__itbis { color: rgb(255 255 255 / .72); }
/* Ritmo tipográfico en todo el sitio: titulares repartidos en líneas parejas, párrafos sin palabras huérfanas,
   cifras de precio alineadas y toques sin la espera del doble toque en el teléfono. */
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }
main p, section p { text-wrap: pretty; }
.price, .card__price, .fin-card__precio, .bcmp-tabla td { font-variant-numeric: tabular-nums; }
a, button, summary, label, [role="button"] { touch-action: manipulation; }

/* ═══ Sistema y jerarquía (22-oct, novena ronda) ═══
   Escala de letra 12 · 13 · 14 · 16 · 18 · 22 · 28 · 36 (más títulos fluidos), radios 8 · 12 · 20 · 28 + pastilla y
   tres alturas de sombra, aplicados en todas las hojas con pp/sistema-css.js. Aquí sus fichas y las piezas nuevas. */
html:root {
  --muted: #5b6574;   /* gris secundario: 4.5:1 también sobre los fondos celestes */
  --sombra-1: 0 1px 2px rgb(10 37 64 / .05), 0 4px 16px rgb(10 37 64 / .05);
  --sombra-2: 0 2px 6px rgb(10 37 64 / .06), 0 12px 32px rgb(10 37 64 / .1);
  --sombra-3: 0 4px 12px rgb(10 37 64 / .1), 0 20px 48px rgb(10 37 64 / .22);
}

/* Caja de compra: una sola acción principal. WhatsApp lleno; Financiar como secundaria; Comparar y Telegram como
   acciones discretas (sin fondo), una debajo de otra. Orden: precio → accesorios → WhatsApp → Financiar → Comparar →
   Telegram → pago. */
body .buybox > * { order: 9; }
body .buybox > .product__price, body .buybox > .price__itbis, body .buybox > .price__antes, body .buybox > .price__refurb { order: 0; }
body .buybox > .price__itbis { margin-top: -4px; }
body .buybox > .combo { order: 1; }
body .buybox > .btn--whatsapp { order: 2; }
body .buybox > a[href*="financiamiento"] { order: 3; }
body .buybox > .bcmp-ficha { order: 4; margin: 0; }
body .buybox > .btn--telegram { order: 5; }
body .buybox > .buybox__pay { order: 6; }
body .buybox > .btn--telegram,
body .buybox > .bcmp-ficha .bcmp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 6px 10px;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--ink-2); font: 500 13px/1.25 var(--font); text-align: center;
  transition: background-color .15s ease-out, color .15s ease-out;
}
body .buybox > .btn--telegram .icon { flex: none; width: 18px; height: 18px; color: #229ed9; }
body .buybox > .bcmp-ficha .bcmp-btn::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--blue-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4 3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4 3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7'/%3E%3C/svg%3E") center / contain no-repeat; }
body .buybox > .bcmp-ficha .bcmp-btn[aria-pressed="true"] { background: var(--cielo, #e6f4fb); color: var(--blue-800); }
@media (hover: hover) { body .buybox > .btn--telegram:hover, body .buybox > .bcmp-ficha .bcmp-btn:hover { background: var(--niebla, #f3f6fa); color: var(--navy); } }

/* Tarjetas: la marca en letra normal (sin mayúsculas abiertas) y comparar con su icono de flechas, no un «+» */
body .card__brand, body .uf-card__brand, body .lx__brand, body .fin-card__marca { text-transform: none; letter-spacing: 0; font-weight: 600; }
body .card .bcmp-btn:not([aria-pressed="true"])::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4 3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4 3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Movimiento con intención: los bloques ya no entran deslizándose uno a uno al bajar (372 en seis páginas). Queda el
   momento de entrada de la portada y todo lo que responde a una acción del cliente (abrir, comparar, elegir). */
body [data-reveal][data-motion] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Flechas al final de enlaces: solo en el botón principal de cada bloque, donde indican «avanzar» */
a:not(.btn--primary) > svg.icon:has(> use[href$="#i-arrow-right"]):last-child,
button:not(.btn--primary) > svg.icon:has(> use[href$="#i-arrow-right"]):last-child,
body .bios-vids__arrow { display: none; }


/* Zonas táctiles en el teléfono: enlaces del pie y de la barra superior con 44 px de alto */
@media (max-width: 767px) {
  body .footer li > a { display: inline-flex; align-items: center; min-height: 44px; }
  body .footer li + li { margin-top: 0; }
  body .footer__contact li + li { margin-top: 6px; }
  body .topbar a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Estados vacíos: el marco del video late suave en vez de un bloque negro; los equipos sin foto en las guías llevan
   el mismo aviso «Foto en camino» que el catálogo. */
body .bios-vids__frame:not(:has(video.is-ready)) { background: linear-gradient(110deg, #0a2540 30%, #143a5c 50%, #0a2540 70%) 0 0 / 220% 100%; }
@media (prefers-reduced-motion: no-preference) { body .bios-vids__frame:not(:has(video.is-ready)) { animation: vids-espera 1.6s ease-in-out infinite; } @keyframes vids-espera { to { background-position: -120% 0; } } }
body .bios-vids__status { color: rgb(255 255 255 / .72); font-size: 13px; }
body.page-template-default:not(.home) main > .wrap > ul.grid .card__media:has(img[src*="placeholder.svg"]) { position: relative; background: var(--niebla, #f3f6fa); }
body.page-template-default:not(.home) main > .wrap > ul.grid .card__media:has(img[src*="placeholder.svg"]) img { opacity: .35; }
body.page-template-default:not(.home) main > .wrap > ul.grid .card__media:has(img[src*="placeholder.svg"])::after { content: "Foto en camino"; position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--ink-2); font: 500 12px/1 var(--font); white-space: nowrap; }
/* «⇄ Comparar» (texto del módulo) → icono de flechas + «Comparar»; la etiqueta visible no se lee dos veces */
body .buybox > .bcmp-ficha .bcmp-btn { gap: 0; font-size: 0; }
body .buybox > .bcmp-ficha .bcmp-btn::before { margin-right: 8px; }
body .buybox > .bcmp-ficha .bcmp-btn::after { content: "Comparar" / ""; font: 500 13px/1.25 var(--font); }
body .buybox > .bcmp-ficha .bcmp-btn[aria-pressed="true"]::after { content: "En comparación" / ""; }
/* Empresas: los campos opcionales se esconden desde el primer pintado y se reserva el renglón de «Añadir más detalles»;
   cuando company-order.js los mete en el desplegable, el formulario no cambia de alto (sin esto saltaba 0,05). */
body .empresas__form > .loan__fields > .field:has(> [name="rnc"], > [name="cargo"], > [name="uso"], > [name="plazo"], > [name="presupuesto"]) { display: none; }
body .empresas__form > .loan__fields:not(:has(> .emp-mas))::after { content: ""; grid-column: 1 / -1; height: 38px; }
body .buybox > a.btn--telegram { background: transparent !important; border: 0 !important; color: var(--ink-2) !important; font-weight: 500 !important; height: auto; }
@media (hover: hover) { body .buybox > a.btn--telegram:hover { background: var(--niebla, #f3f6fa) !important; color: var(--navy) !important; } }
/* Banners en video: si el archivo no llega (hoy 2659 y 3695 dan 404 en bios.do) se ve la marca, no un bloque negro.
   El logo va detrás; el video o su portada lo tapan en cuanto cargan. */
body .slide--video { background: radial-gradient(120% 90% at 80% 15%, #12507f 0%, #0a2540 60%) !important; }
body .slide--video::before { content: ""; position: absolute; inset: 0; margin: auto; width: min(36%, 260px); aspect-ratio: 135 / 40;
  background: url("../img/logo-bios.png") center / contain no-repeat; filter: brightness(0) invert(1); opacity: .22; pointer-events: none; }
body .slide--video > a { position: relative; z-index: 1; }
body .buybox > .btn--telegram { margin-top: -10px; } /* Comparar y Telegram se leen como un grupo */
/* Títulos sin mayúsculas: ganan tamaño y peso para seguir encabezando (pie, especificaciones de la ficha, antetítulos) */
body .footer__title { font-size: 14px; font-weight: 600; color: #fff; }
body .footer__contact li + li { margin-top: 12px; }

/* ═══ Sistema de diseño (22-oct, décima ronda) ═══
   Paleta con roles (de la marca, no inventada):
     suelo #ffffff · niebla #f3f6fa (superficie de información) · cielo #e6f4fb (tinte de lo elegido o destacado)
     tinta #0a2540 (títulos) · texto #344054 · tenue #5b6574 (secundario, AA sobre niebla y cielo)
     línea rgb(10 37 64 / .1) · acción #006fa8 (botones y enlaces) · acento #009de1 (azul del logo: marcas, iconos,
     lo destacado; nunca texto pequeño) · WhatsApp #25d366 (solo WhatsApp).
   Sombras con significado:
     plano (niebla, sin sombra) = información · nivel 1 = se puede pulsar (tarjetas de equipo, controles redondos) y
     sube a nivel 2 al pasar el mouse · nivel 2 = el panel de decisión (caja de compra, formularios) · nivel 3 =
     flota sobre la página (menús, burbujas, ventanas).
   Movimiento: una sola curva (salida suave), 150–300 ms; un trato por rol: los botones se inundan de color desde la
   izquierda, las tarjetas se elevan y su foto se acerca dentro del marco, los enlaces de menú dibujan su subrayado,
   las flechas avanzan, los desplegables abren su alto con suavidad. */
html:root {
  --niebla: #f3f6fa; --cielo: #e6f4fb; --linea: rgb(10 37 64 / .1); --acento: #009de1;
  --surface: var(--niebla);
  --sombra-1: 0 1px 2px rgb(10 37 64 / .05), 0 4px 16px rgb(10 37 64 / .06);
  --sombra-2: 0 2px 6px rgb(10 37 64 / .06), 0 14px 34px rgb(10 37 64 / .11);
  --sombra-3: 0 4px 12px rgb(10 37 64 / .1), 0 20px 48px rgb(10 37 64 / .22);
  --curva: cubic-bezier(.16, 1, .3, 1);
  --curva-alto: cubic-bezier(.4, 0, .2, 1); /* alturas: simétrica (la de salida exponencial se ve trabada al crecer) */
  interpolate-size: allow-keywords;
}
::selection { background: var(--cielo); color: var(--navy); }

/* Plano: la información no lleva sombra */
body .product .specgrid > div, body .assurances > li, body .usos .faq__item, body .product .tabs, body .info-card,
body .product .gallery__main, body .duo__card { box-shadow: none !important; }
body .product .tabs { background: transparent !important; padding-inline: 0; }
/* Nivel 1 → 2: lo que se pulsa */
body .grid > li .card, body .mini, body .uf-card, body .fin-card, body .store { box-shadow: var(--sombra-1) !important; transition: box-shadow .25s var(--curva), translate .25s var(--curva); }
@media (hover: hover) {
  body .grid > li .card:hover, body .mini:hover, body .uf-card:hover, body .fin-card:hover { box-shadow: var(--sombra-2) !important; translate: 0 -2px; }
  body .grid > li .card:hover .card__media img, body .uf-card:hover img { scale: 1.04; }
}
body .card__media { overflow: clip; }
body .card__media img, body .uf-card img { transition: scale .4s var(--curva); }
body .card .bcmp-btn, body .gnav__btn, body .hero__btn, body .hero__nav, body .spotlights__btn, body .spotlights__pause, body .fin-pick__flecha { box-shadow: 0 2px 8px rgb(10 37 64 / .14) !important; }
/* Nivel 2: la decisión */
body .product .buybox, body .loan__form, body .empresas__card { box-shadow: var(--sombra-2) !important; }

/* Botones: el color se inunda desde la izquierda (Jitter «fill»), al pulsar se hunden un poco */
body .btn { background-image: linear-gradient(var(--relleno, transparent) 0 0); background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size .35s var(--curva), color .2s ease-out, scale .1s ease-out, box-shadow .2s ease-out; }
body .btn--primary { --relleno: var(--blue-800); }
body .btn--whatsapp { --relleno: var(--wa-hover, #1fbe5b); }
body .btn--outline, body .btn--light { --relleno: rgb(0 111 168 / .12); }
@media (hover: hover) { body .btn:hover { background-size: 100% 100%; } }
body .btn:focus-visible { background-size: 100% 100%; }
body .btn:active { scale: .97; }
/* las flechas avanzan con el botón */
body .btn > svg.icon:last-child { transition: translate .25s var(--curva); }
@media (hover: hover) { body .btn:hover > svg.icon:last-child { translate: 4px 0; } }

/* Menú de categorías: el subrayado se dibuja (y queda en la categoría actual) */
body .catnav__link { background: linear-gradient(var(--acento) 0 0) left calc(100% - 10px) / 0% 2px no-repeat; transition: background-size .3s var(--curva), color .2s ease-out; }
@media (hover: hover) { body .catnav__link:hover { background-size: 100% 2px; color: var(--navy); } }
body .catnav__link:focus-visible, body .catnav__link[aria-current="page"] { background-size: 100% 2px; }

/* Desplegables nativos: abren su alto con suavidad */
@supports (interpolate-size: allow-keywords) {
  details::details-content { block-size: 0; overflow: clip; transition: block-size .28s var(--curva-alto), content-visibility .28s allow-discrete; }
  details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  body .btn, body .card__media img, body .grid > li .card, body .catnav__link { transition: none; }
  details::details-content { transition: none; }
}

/* ── Ficha: especificaciones con su icono ── */
body .product .specgrid > div::before { content: ""; position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 10px; background: #fff; }
body .product .specgrid > div::after { content: ""; position: absolute; left: 21px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; background: var(--acento);
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
body .product .specgrid > div[data-spec="pantalla"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'12'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2020h8M12%2016v4'%2F%3E%3C%2Fsvg%3E"); }
body .product .specgrid > div[data-spec="procesador"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'6'%20y%3D'6'%20width%3D'12'%20height%3D'12'%20rx%3D'2'%2F%3E%3Crect%20x%3D'9.5'%20y%3D'9.5'%20width%3D'5'%20height%3D'5'%20rx%3D'1'%2F%3E%3Cpath%20d%3D'M9%202.5v3M15%202.5v3M9%2018.5v3M15%2018.5v3M2.5%209h3M2.5%2015h3M18.5%209h3M18.5%2015h3'%2F%3E%3C%2Fsvg%3E"); }
body .product .specgrid > div[data-spec="ram"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'7'%20width%3D'20'%20height%3D'9'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M6%2016v3M10%2016v3M14%2016v3M18%2016v3M6%2010.5h2M11%2010.5h2M16%2010.5h2'%2F%3E%3C%2Fsvg%3E"); }
body .product .specgrid > div[data-spec="disco"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M3%2013h18M16.5%2016h.01'%2F%3E%3C%2Fsvg%3E"); }
body .product .specgrid > div[data-spec="grafica"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'6'%20width%3D'18'%20height%3D'11'%20rx%3D'2'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'11.5'%20r%3D'3'%2F%3E%3Cpath%20d%3D'M20%209h2M20%2013h2M6%2017v3M10%2017v3M14%2017v3'%2F%3E%3C%2Fsvg%3E"); }
body .product .specgrid > div[data-spec="so"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'8'%20height%3D'8'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'13'%20y%3D'3'%20width%3D'8'%20height%3D'8'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'3'%20y%3D'13'%20width%3D'8'%20height%3D'8'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'8'%20height%3D'8'%20rx%3D'1.5'%2F%3E%3C%2Fsvg%3E"); }
body .product .specgrid > div[data-spec="otro"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%2F%3E%3Cpath%20d%3D'M12%208v5M12%2016h.01'%2F%3E%3C%2Fsvg%3E"); }
body .product .specgrid dd { color: var(--navy); font-weight: 600; }

/* ── Ficha: «¿Para qué sirve?» como fila de opciones; una explicación a la vez ── */
body .usos .usos__opcion {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: var(--niebla); color: var(--ink-2); font: 500 14px/1.2 var(--font); cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, scale .1s ease-out;
}
body .usos .usos__opcion::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
body .usos .usos__opcion[data-uso="pantalla"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'12'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2020h8M12%2016v4'%2F%3E%3C%2Fsvg%3E"); }
body .usos .usos__opcion[data-uso="otro"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%2F%3E%3Cpath%20d%3D'M12%208v5M12%2016h.01'%2F%3E%3C%2Fsvg%3E"); }
body .usos .usos__opcion[data-uso="oficina"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'7'%20width%3D'18'%20height%3D'13'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2M3%2013h18'%2F%3E%3C%2Fsvg%3E"); }
body .usos .usos__opcion[data-uso="codigo"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm8%208-5%204%205%204M16%208l5%204-5%204M14%204l-4%2016'%2F%3E%3C%2Fsvg%3E"); }
body .usos .usos__opcion[data-uso="diseno"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2020h9M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z'%2F%3E%3C%2Fsvg%3E"); }
body .usos .usos__opcion[data-uso="juegos"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'6'%20width%3D'20'%20height%3D'12'%20rx%3D'6'%2F%3E%3Cpath%20d%3D'M6%2012h4M8%2010v4M15%2011h.01M18%2013h.01'%2F%3E%3C%2Fsvg%3E"); }
body .usos .usos__opcion[data-uso="llevar"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2010a4%204%200%200%201%204-4h6a4%204%200%200%201%204%204v10H5Z'%2F%3E%3Cpath%20d%3D'M9%206V4h6v2M8%2014h8'%2F%3E%3C%2Fsvg%3E"); }
body .usos .usos__opcion[data-uso="tactil"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2011V5.5a1.5%201.5%200%200%201%203%200V11M12%2010V4.5a1.5%201.5%200%200%201%203%200V11M15%2010.5a1.5%201.5%200%200%201%203%200V15a6%206%200%200%201-6%206h-1a6%206%200%200%201-5-2.7L3.6%2014.6a1.5%201.5%200%200%201%202.4-1.8L9%2015.5'%2F%3E%3C%2Fsvg%3E"); }
@media (hover: hover) { body .usos .usos__opcion:hover { background: var(--cielo); color: var(--navy); } }
body .usos .usos__opcion[aria-expanded="true"] { background: var(--navy); color: #fff; }
body .usos .usos__opcion:active { scale: .97; }

/* ── Ficha: garantía, retiro, envío y horario; el detalle se despliega al tocar ── */
body .assurances > li { position: relative; align-items: center; }
body .assurances .garantia__abrir { all: unset; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; }
body .assurances .garantia__abrir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body .assurances .garantia__abrir::before { content: ""; order: 2; flex: none; width: 16px; height: 16px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; transition: rotate .3s var(--curva); }
body .assurances .garantia__abrir[aria-expanded="true"]::before { rotate: 45deg; }
body .assurances .garantia__abrir:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 6px; border-radius: 8px; }
body .assurances .garantia__abrir + span { display: block; margin-top: 4px; }
/* desde el primer pintado ya se ven plegados (ficha-combo.js solo convierte los títulos en botones): sin saltos */
body .product .assurances b + span { display: none; }
body .product .usos .faq__grid:not(.usos__opciones) .faq__item:not(:first-child) dd { display: none; }
body .product .usos .faq__grid:not(.usos__opciones) dt { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px 0 38px; border-radius: 999px; background: var(--niebla); color: var(--ink-2); font: 500 14px/1.2 var(--font); }
body .product .usos .faq__grid:not(.usos__opciones) .faq__item:first-child dt { background: var(--navy); color: #fff; }
@media (hover: hover) { body .assurances > li:has(.garantia__abrir:hover) { background: var(--cielo); } }

body .assurances.is-lateral > li, body .assurances > li { align-items: center; } /* título y su icono a la misma altura */

/* Etiquetas sin mayúsculas espaciadas (criterio /awwwards: nada de antetítulo decorativo en mayúsculas sobre cada
   título). Las que informan quedan en letra normal y un punto más grandes; la que solo decora («Sin adivinar») se va. */
body .eyebrow, body .lx__eyebrow, body .spotlight__eyebrow, body .bios-vids__label, body .loan__step-count,
body .suggest__title, body .drawer__title, body .footer__title, body .scope__tag { text-transform: none !important; letter-spacing: 0 !important; }
body .eyebrow, body .lx__eyebrow, body .spotlight__eyebrow, body .bios-vids__label, body .loan__step-count { font-size: 13px; font-weight: 600; }
body .suggest__title, body .drawer__title { font-size: 13px; font-weight: 600; color: var(--muted); }
body .footer__title { font-size: 14px; font-weight: 600; color: #fff; }
body .uf__head > .eyebrow { display: none; }

/* Desplegables fluidos (22-oct): las alturas abren y cierran con una curva simétrica, sin frenazo ni salto final.
   · preguntas: el párrafo de respuesta ya no trae margen (aparecía de golpe al terminar: +16 px);
   · usos y garantías: su texto abre y cierra su alto en vez de saltar (al cerrarse del todo pasa a display: none);
   · el recuadro de foco solo con teclado, redondeado (al pulsar con el mouse ya no aparece). */
body .faq__list > details p { margin: 0 !important; padding-bottom: 20px; }
body .faq__list summary:focus:not(:focus-visible), body .bios-faq summary:focus:not(:focus-visible) { outline: none; }
body .faq__list summary:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 2px; border-radius: 10px; }
body .product .usos .faq__item dd, body .assurances .garantia__abrir + span {
  overflow: clip; transition: height .28s var(--curva-alto), padding-block .28s var(--curva-alto), margin-top .28s var(--curva-alto), opacity .2s ease-out, display .28s allow-discrete, content-visibility .28s allow-discrete;
}
body .product .usos .faq__item dd[hidden], body .assurances .garantia__abrir + span[hidden] { display: none; height: 0; padding-block: 0; margin-top: 0; opacity: 0; }
@starting-style { body .product .usos .faq__item dd:not([hidden]), body .assurances .garantia__abrir + span:not([hidden]) { height: 0; padding-block: 0; margin-top: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body .product .usos .faq__item dd, body .assurances .garantia__abrir + span { transition: none; } }