/* ElectroPC · El sistema que comparten todas las pantallas nuevas (26/9).
 *
 * "Agregar al carrito" y el buscador se mueven con resortes y cambian de forma
 * sin cortes, y el resto de la web se veía de otra casa: 48 tamaños de letra,
 * 22 radios, casi todo en negrita, botones cuadrados en la home y redondos en
 * la ficha. Esta hoja y la escala que ya usan las demás hojas lo emparejan.
 *
 *   Letra     Inter. Tamaños 12 · 14 · 16 · 18 · 20 · 24 · 28 px y cinco
 *             títulos fluidos (ver DESIGN.md). Grosores: 400 para leer, 600
 *             para botones, etiquetas y valores, 700 solo títulos y precios.
 *             Nada en mayúsculas sostenidas.
 *   Radios    8 miniaturas · 12 controles y opciones · 16 tarjetas y cajas ·
 *             píldora todo lo que se toca (botones, chips, sellos, cantidad)
 *   Botones   píldora, 48px de alto, 16px en 600; al apretarlos se hunden y
 *             vuelven con el mismo resorte del carrito (`boton.js`)
 *   Movimiento dos curvas: `--ep-suave` (resorte sin sobreimpulso) para
 *             colores y bordes, `--ep-vivo` (un 1% de sobreimpulso) para lo
 *             que cambia de tamaño. Ninguna rebota.
 *
 * Las curvas son la misma cuenta de `agregar.js` (`resorte()`), pasada a
 * `linear()`: suave es r=.5 z=1, vivo es r=.42 z=.82, la de la forma del botón.
 * Si el navegador no entiende `linear()`, la transición usa `ease`.
 *
 * Solo carga en la vista previa (`EPH_Sistema`). Las reglas van colgadas de
 * `body.eph-sis` repetida porque las hojas de cada pantalla se imprimen en
 * orden distinto según quién las encola (algunas al pie, desde un shortcode):
 * esta gana por peso y no por llegar última.
 */
:root{
  --ep-suave:linear(0, .052, .164, .296, .425, .541, .639, .72, .785, .837, .877, .907, .931, .949, .962, .972, .979, .985, .989, .992, .994, .996, .997, .998, 1);
  --ep-vivo:linear(0, .05, .166, .308, .451, .583, .695, .787, .858, .911, .949, .975, .992, 1.003, 1.008, 1.011, 1.011, 1.01, 1.009, 1.007, 1.006, 1.004, 1.003, 1.002, 1);
  --ep-rapido:.2s;
  --ep-resorte:.45s;
}

/* ── Botones ──
   Todos los que compran, conversan o confirman, en todas las pantallas. */
body.eph-sis.eph-sis.eph-sis :is(
  .eph-btn, .epa-btn,
  .eph-pr-acciones button.single_add_to_cart_button, .eph-pr-acciones button[type="submit"], .eph-pr-boton,
  .epa-medida summary, .epa-medida-enviar,
  .epa-ca-actualizar, .eph-co-login-btn, .eph-co-sena-btn, #place_order,
  .eph-cu-btn, .eph-cu .woocommerce .button, .eph-gr-pago .button,
  .eph-inf .btn-submit, .header-cart-drawer__panel .btn,
  .eph-presupuesto-fila button, .epa-sumale-item button
){
  border-radius:999px;
  min-height:3rem;
  box-sizing:border-box;
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.01em;
  transition:background-color var(--ep-rapido) var(--ep-suave,ease),
    border-color var(--ep-rapido) var(--ep-suave,ease),
    color var(--ep-rapido) var(--ep-suave,ease),
    filter var(--ep-rapido) var(--ep-suave,ease),
    box-shadow var(--ep-rapido) var(--ep-suave,ease),
    transform var(--ep-resorte) var(--ep-vivo,ease);
}

/* 48 justos, no "por lo menos 48". El alto mínimo solo no alcanzaba: cada
   hoja les daba su propio relleno y medían 49, 52, 54 y 56 según la pantalla
   (medido el 26/9). Estos centran el texto solos (flex, o son <button>), así
   que el relleno vertical sobra. El de WhatsApp de la barra no entra: es un
   ícono y toma el alto de su vecino. */
body.eph-sis.eph-sis.eph-sis :is(
  .eph-btn, .epa-btn, .eph-presupuesto-fila button, .epa-sumale-item button
):not(.epa-barra-wa){
  padding-block:0;
  line-height:1.25;
}

/* Los campos de "¿Cuánto querés invertir?" van al lado del botón y el botón
   se estira a su alto: con 55px de campo, el botón medía 55. */
body.eph-sis.eph-sis.eph-sis .eph-presupuesto-n select{
  height:3rem;
  box-sizing:border-box;
  padding-block:0;
}
body.eph-sis.eph-sis.eph-sis .eph-presupuesto-campo input[type="text"]{
  height:calc(3rem - 3px);
  padding-block:0;
}

/* ── Lo que se toca ──
   Hundirse al apretar y volver con el resorte lo hace `boton.js` (anima
   `scale`, así no pisa el `transform` de cada botón). Acá solo va la
   transición de color y borde de chips y opciones, con la misma curva. */
body.eph-sis.eph-sis.eph-sis :is(
  .eph-chip-uso, .epa-mej-op .epa-mej-caja, .tupc-opcion, .eph-presupuesto-modo span
){
  transition:background-color var(--ep-rapido) var(--ep-suave,ease),
    border-color var(--ep-rapido) var(--ep-suave,ease),
    color var(--ep-rapido) var(--ep-suave,ease),
    box-shadow var(--ep-rapido) var(--ep-suave,ease);
}

/* ── Lo que es del tema ──
   Encabezado, menús y pie los dibuja el tema en todas las pantallas; la web
   nueva solo los viste (`menu-alt.css`). Acá entran a la misma escala: sin
   mayúsculas sostenidas, sin el 500 y sin tamaños sueltos (10, 11, 13, 15).

   El menú desplegable de "Productos" sube de 11 a 12, el mínimo de la escala,
   y nada más: entran 47 destinos en una pantalla. Se midió que siga entrando
   en 1280×720. */
body.eph-sis.eph-sis.eph-sis :is(.mega-dropdown__title, .mega-col__heading){
  font-size:.75rem;
  text-transform:none;
  letter-spacing:normal;
}
/* "CATEGORÍAS" viene escrito así en el marcado del tema, que también ve el
   cliente: se corrige acá y no allá. */
body.eph-sis.eph-sis.eph-sis .mega-dropdown__title{display:inline-block;text-transform:lowercase}
body.eph-sis.eph-sis.eph-sis .mega-dropdown__title::first-letter{text-transform:uppercase}
body.eph-sis.eph-sis.eph-sis .mega-col__subsubs a{font-size:.75rem}
body.eph-sis.eph-sis.eph-sis .mega-dropdown__explore{font-size:.875rem}

/* El menú del celular: la lista de secciones, en el tamaño de leer. */
body.eph-sis.eph-sis.eph-sis :is(.mobile-nav__link, .mobile-nav__accordion summary){
  font-size:1rem;
  font-weight:600;
}
body.eph-sis.eph-sis.eph-sis .mobile-nav__section-label{
  font-size:.75rem;
  font-weight:600;
  text-transform:none;
  letter-spacing:normal;
}

body.eph-sis.eph-sis.eph-sis .footer-column__title{
  text-transform:none;
  letter-spacing:normal;
}
body.eph-sis.eph-sis.eph-sis .breadcrumbs__current{font-weight:600}

/* El anillo de foco sigue la forma: con píldoras, el contorno cuadrado de
   algunos navegadores se veía de otra época. */
body.eph-sis.eph-sis.eph-sis :is(.eph-btn, .epa-btn, .eph-pr-boton, #place_order, .eph-chip-uso):focus-visible{
  outline:3px solid color-mix(in srgb, #0064FF 45%, transparent);
  outline-offset:2px;
}

/* Las PC de Mercado Libre: el precio de su publicación, tachado, arriba del de
   la web en todas las tarjetas (`EPH_Render::ml_antes`). Toma el lugar del
   precio al fondo de la tarjeta, que es el que empujaba con `margin-top:auto`:
   así los dos quedan juntos y las tarjetas de al lado no se desalinean. */
body.eph-sis.eph-sis.eph-sis .eph-ml-antes{
  display:block;
  margin-top:auto;
  font-size:.75rem;
  line-height:1.4;
  color:var(--color-text-secondary,#475569);
}
body.eph-sis.eph-sis.eph-sis .eph-ml-antes s{font-variant-numeric:tabular-nums}
body.eph-sis.eph-sis.eph-sis .eph-ml-antes + :is(.rp-pc-precio, .rl-pc-precio, .rt-pc-precio, .eph-rf-pc-precio, .rb-pc-precio){
  margin-top:0;
  padding-top:0;
}
/* En la búsqueda empuja un espaciador, no el precio. */
body.eph-sis.eph-sis.eph-sis .rb-empuje + .eph-ml-antes{margin-top:0}