/* EG · Popup del 10 % 2026 (pieza 5) · eg-nivel. La encola mu-plugins/eg-popup-2026.php (wp_enqueue_scripts 105,
   dependencia emporio-garcia-main, versión filemtime). Viste el MISMO marcado de footer.php (#eg-pop-overlay y
   #eg-pop-newsletter con el mc4wp 3686): panel abajo, fondo tinta al 50 %, × de 44 px, patrón de modal de la casa.
   REGLAS DE ESTA HOJA
   - Todo selector empieza con body.eg-pop26 #eg-pop-newsletter o body.eg-pop26 #eg-pop-overlay. Única excepción:
     html.eg-pop26-bloqueo. El bloqueo en el body no bloquea en este sitio (eg-rebajas.php:27 sirve
     html,body{overflow-x:clip}); no «corregirla» a body.eg-pop26.
   - Nunca .eg-pop a secas: eg-motion.php le pone esa clase al enlace de la bolsa.
   - «Tu email» solo con .mc4wp-form-fields p > label: el alcance «.mc4wp-form-fields label» a secas también atrapa las
     tres pastillas (label.eg-nl-pref-opt) y las dejaría en 1 x 1 px (PREFGENDER es obligatorio: nadie podría suscribirse).
   - .eg-pref-err: solo margen, letra, espaciado y color. Nunca display, visibility ni opacity (lo esconde su propio script).
   - !important solo contra !important de main.css (botones, foco, pastillas, campo y botón del popup) y el estilo en línea
     de .eg-pref-err. Tokens de la base siempre con respaldo: la base puede estar apagada.
   - Íconos con máscara: siempre el par -webkit-mask + mask, y CanvasText en contraste forzado.
   - Sin el signo menor que (tampoco en comentarios), sin importar otras hojas y content con escapes. */

/* ── 0 · Testigo: el JS no abre si no lee --eg-pop26-ok (sin esta hoja el panel quedaría invisible y la página bloqueada) */
body.eg-pop26 #eg-pop-newsletter{ --eg-pop26-ok:1; }

/* ── 1 · Escondidos de verdad: una regla de autor con display le gana al [hidden] del navegador ── */
body.eg-pop26 #eg-pop-overlay[hidden],
body.eg-pop26 #eg-pop-newsletter[hidden]{ display:none !important; }

/* ── 2 · Fondo: tinta al 50 %, fundido de 200 ms. Neutraliza main.css:7833-7843 (0,55, z 9000, 280 ms) ── */
body.eg-pop26 #eg-pop-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:10010;
  background:rgba(26,26,26,.5); opacity:0; transition:opacity 200ms ease;
  cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent;
}
body.eg-pop26 #eg-pop-overlay.eg-pop26-abierto{ opacity:1; }

/* ── 3 · Panel: abajo, a todo el ancho en celular. Neutraliza main.css:7844-7861 y 7984-7990.
   Si algo de la página desborda a lo ancho, el celular agranda el viewport de diseño (ficha 2026 de staging a 375 px:
   465 x 1005) y un fijo con bottom:0 queda bajo el borde de la pantalla. El JS lo ancla a visualViewport con estilo en
   línea (bottom, left, max-width y max-height); max-width:100vw y 85vh son el respaldo sin visualViewport. ── */
body.eg-pop26 #eg-pop-newsletter{
  position:fixed; top:auto; right:0; bottom:0; left:0; z-index:10011;
  box-sizing:border-box; width:auto; max-width:100vw; max-height:85vh; margin:0;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background:var(--eg-papel,#FAF8F3); color:var(--eg-tinta,#1A1A1A);
  font-family:var(--eg-ui, var(--font-sans, system-ui, sans-serif)); font-weight:400; text-align:left;
  border:0; border-top:1px solid var(--eg-linea,#E5E0D5); border-radius:0; box-shadow:none;
  opacity:1; transform:translateY(100%); transition:transform 250ms ease-out;
}
@supports (height:1dvh){
  body.eg-pop26 #eg-pop-newsletter{ max-height:85dvh; }
}
body.eg-pop26 #eg-pop-newsletter.eg-pop26-abierto{ transform:translateY(0); }
body.eg-pop26 #eg-pop-newsletter:focus{ outline:none !important; }

/* ── 4 · La ×: 44 x 44, a 8 px del borde de arriba y del derecho, pegada arriba aunque el panel se desplace.
   El carácter queda en 0 px y se dibuja el ícono de la base (--eg-i-x, con su cadena como respaldo). ── */
body.eg-pop26 #eg-pop-newsletter .eg-pop-close{
  position:-webkit-sticky; position:sticky; top:0; right:auto; left:auto; z-index:2;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:44px; height:44px; margin:0 -8px -44px auto; padding:0 !important;
  border:0 !important; border-radius:0 !important; background:var(--eg-papel,#FAF8F3) !important;
  color:var(--eg-tinta,#1A1A1A) !important; font-size:0 !important; line-height:0; opacity:1;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
body.eg-pop26 #eg-pop-newsletter .eg-pop-close:hover{ opacity:1; }
body.eg-pop26 #eg-pop-newsletter .eg-pop-close::before{
  content:""; display:block; flex:none; width:18px; height:18px; background:currentColor;
  -webkit-mask:var(--eg-i-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m1 1 16 16M17 1 1 17' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")) center / 18px 18px no-repeat;
  mask:var(--eg-i-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m1 1 16 16M17 1 1 17' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")) center / 18px 18px no-repeat;
}

/* ── 5 · Textos (los de hoy, tal cual). Rótulo a 24 px del borde de arriba: 8 de relleno + 16.
   text-wrap: sin palabra suelta en la última línea del título («nadie.») ni de la bajada («online.») a 360-375 px;
   el navegador que no lo entiende lo ignora. ── */
body.eg-pop26 #eg-pop-newsletter .eg-pop-eyebrow{
  margin:16px 0 0; padding:0;
  font:400 14px/1.45 var(--eg-ui, var(--font-sans, system-ui, sans-serif)); letter-spacing:.06em; text-transform:uppercase;
  color:var(--eg-tinta-2,#555);
}
body.eg-pop26 #eg-pop-newsletter .eg-pop-title{
  margin:12px 0 0; padding:0;
  font:300 28px/1.2 var(--eg-ui, var(--font-sans, system-ui, sans-serif)); font-style:normal; letter-spacing:0; text-transform:none;
  color:var(--eg-tinta,#1A1A1A); text-wrap:balance;
}
/* Playfair ya no hace títulos (eg-nivel): el em va con la misma letra, sin cursiva. Abrir el popup no baja ninguna fuente. */
body.eg-pop26 #eg-pop-newsletter .eg-pop-title em{ font:inherit; font-style:normal; }
body.eg-pop26 #eg-pop-newsletter .eg-pop-lead{
  margin:12px 0 0; padding:0;
  font:400 16px/1.6 var(--eg-ui, var(--font-sans, system-ui, sans-serif)); letter-spacing:0;
  color:var(--eg-tinta-2,#555); text-wrap:pretty;
}
/* 30-sep · Rafael: nada en negrita (DECISIONES 29-sep) ⇒ el destacado de la bajada va en 400, solo con el color de tinta. */
body.eg-pop26 #eg-pop-newsletter .eg-pop-lead strong{ font-weight:400; color:var(--eg-tinta,#1A1A1A); }
body.eg-pop26 #eg-pop-newsletter .eg-pop-foot{
  margin:16px 0 0; padding:0;
  font:400 14px/1.5 var(--eg-ui, var(--font-sans, system-ui, sans-serif)); letter-spacing:0;
  color:var(--eg-tinta-2,#555);
}

/* ── 6 · Formulario mc4wp 3686 (intacto) vestido como el del pie nuevo, en claro. Neutraliza main.css:7913-7950 ── */
body.eg-pop26 #eg-pop-newsletter .mc4wp-form{ margin:24px 0 0; padding:0; }
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields{
  display:flex; flex-wrap:wrap; align-items:center; gap:0; row-gap:0; margin:0; padding:0;
  border:0; border-bottom:1px solid var(--eg-tinta,#1A1A1A); background:transparent;
}
/* «Me interesa»: solo para lector de pantalla; da nombre al grupo de pastillas (role=radiogroup lo pone el JS) */
body.eg-pop26 #eg-pop-newsletter .eg-nl-pref-label{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; font-weight:400;
}
/* pastillas: fila a todo el ancho, 8 px entre ellas (le gana al 6 px !important de main.css:1054-1057) */
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields .eg-nl-pref{
  flex-basis:100% !important; width:100% !important; display:flex !important; flex-wrap:wrap !important;
  gap:8px !important; align-items:center !important; margin:0 0 18px !important; padding:0 !important; border:0 !important;
  color:var(--eg-tinta,#1A1A1A);
}
body.eg-pop26 #eg-pop-newsletter .eg-nl-pref-opt span{
  display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box;
  min-width:48px; height:44px; padding:0 12px !important;
  border:1px solid var(--eg-linea,#E5E0D5) !important; border-radius:0 !important; background:transparent !important;
  font-family:var(--eg-ui, var(--font-sans, system-ui, sans-serif)); font-weight:400; font-size:14px !important; line-height:1;
  letter-spacing:.04em !important; white-space:nowrap !important; opacity:1; color:var(--eg-tinta,#1A1A1A);
  transition:border-color .2s, background-color .2s, color .2s !important;
}
body.eg-pop26 #eg-pop-newsletter .eg-nl-pref-opt:hover span{ opacity:1; border-color:var(--eg-tinta,#1A1A1A) !important; }
body.eg-pop26 #eg-pop-newsletter .eg-nl-pref-opt input:checked + span{
  background:var(--eg-tinta,#1A1A1A) !important; color:var(--eg-papel,#FAF8F3) !important; border-color:var(--eg-tinta,#1A1A1A) !important; opacity:1;
}
/* fila del correo y del botón */
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields > p{ display:flex; align-items:center; margin:0; padding:0; }
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields > p:first-of-type{ flex:1 1 120px; min-width:0; }
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields > p:last-of-type{ flex:0 0 auto; }
/* «Tu email»: solo para lector de pantalla, asociada al campo por el JS (for + id). Selector fijo: p > label. */
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields p > label{
  display:block; position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* 17 px y no 14: bajo 16 px el iPhone acerca la página al tocar el campo */
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields input[type="email"]{
  flex:1; box-sizing:border-box; width:100%; min-width:0; min-height:48px; margin:0; padding:12px 0 !important;
  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none;
  color:var(--eg-tinta,#1A1A1A) !important; font:400 17px/1.3 var(--eg-ui, var(--font-sans, system-ui, sans-serif)); letter-spacing:0;
  outline:none !important; -webkit-appearance:none; appearance:none;
}
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields input[type="email"]::placeholder{ color:var(--eg-tinta-2,#555); opacity:1; }
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields input[type="submit"]{
  width:auto; min-height:48px; margin:0; padding:0 0 0 16px !important; cursor:pointer;
  border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--eg-tinta,#1A1A1A) !important;
  font:500 14px/1 var(--eg-ui, var(--font-sans, system-ui, sans-serif)) !important; letter-spacing:.06em !important;
  text-transform:uppercase !important; -webkit-appearance:none; appearance:none;
}
/* «Elige una opción para continuar.» (eg-newsletter-pref-required.php): solo margen, letra, espaciado y color */
body.eg-pop26 #eg-pop-newsletter .eg-pref-err{
  margin:0 0 12px !important; color:var(--eg-tinta,#1A1A1A) !important;
  font-family:var(--eg-ui, var(--font-sans, system-ui, sans-serif)) !important; font-size:14px !important; line-height:1.45;
  letter-spacing:0 !important;
}
body.eg-pop26 #eg-pop-newsletter .mc4wp-response{
  font:400 14px/1.5 var(--eg-ui, var(--font-sans, system-ui, sans-serif)); letter-spacing:0; color:var(--eg-tinta,#1A1A1A);
}
body.eg-pop26 #eg-pop-newsletter .mc4wp-response:not(:empty){ margin-top:12px; }
body.eg-pop26 #eg-pop-newsletter .mc4wp-response p{ margin:0; }

/* ── 7 · Foco visible (maqueta: 2 px tinta, desplazado 3 px; en la pastilla, 2 px). Contra main.css:105-111 ── */
body.eg-pop26 #eg-pop-newsletter .eg-pop-close:focus-visible,
body.eg-pop26 #eg-pop-newsletter input[type="submit"]:focus-visible{ outline:2px solid var(--eg-tinta,#1A1A1A) !important; outline-offset:3px !important; }
body.eg-pop26 #eg-pop-newsletter .eg-pop-close:focus:not(:focus-visible),
body.eg-pop26 #eg-pop-newsletter input[type="submit"]:focus:not(:focus-visible){ outline:none !important; }
body.eg-pop26 #eg-pop-newsletter .eg-nl-pref-opt input[type="radio"]:focus-visible + span{ outline:2px solid var(--eg-tinta,#1A1A1A) !important; outline-offset:2px !important; }
/* campo del correo sin recuadro: el foco se nota en la raya de abajo, que pasa a 2 px (como el pie nuevo) */
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields input[type="email"]:focus,
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields input[type="email"]:focus-visible{ outline:none !important; box-shadow:inset 0 -1px 0 var(--eg-tinta,#1A1A1A); }

/* ── 8 · «¡Bienvenido!»: centrado; el ✓ en tinta, sin círculo, fuera del título (nombre del diálogo) y mudo para el lector ── */
body.eg-pop26 #eg-pop-newsletter.eg-pop26-exito{ text-align:center; }
body.eg-pop26 #eg-pop-newsletter.eg-pop26-exito .eg-pop-eyebrow::after{
  content:"\2713"; content:"\2713" / "";
  display:block; margin:16px 0 20px; font:400 32px/1 var(--eg-ui, var(--font-sans, system-ui, sans-serif));
  letter-spacing:0; text-transform:none; color:var(--eg-tinta,#1A1A1A);
}

/* ── 9 · Escritorio (901 px, el corte de la casa): el mismo panel, de 480 px, abajo al centro ── */
@media (min-width:901px){
  body.eg-pop26 #eg-pop-newsletter{
    left:50%; right:auto; width:480px; max-width:calc(100vw - 32px); padding:8px 40px 40px;
    border:1px solid var(--eg-linea,#E5E0D5); border-bottom:0;
    transform:translate(-50%, 100%);
  }
  body.eg-pop26 #eg-pop-newsletter.eg-pop26-abierto{ transform:translate(-50%, 0); }
  body.eg-pop26 #eg-pop-newsletter .eg-pop-close{ margin-right:-32px; }
  body.eg-pop26 #eg-pop-newsletter .eg-pop-eyebrow{ margin-top:32px; }
}

/* ── 10 · Movimiento reducido: el panel aparece y se va sin moverse; el fondo mantiene su fundido.
   El !important es contra el de Elementor (frontend.min.css: html *{transition-duration:0s !important} con reduce). ── */
@media (prefers-reduced-motion:reduce){
  body.eg-pop26 #eg-pop-newsletter{ transition:none; }
  body.eg-pop26 #eg-pop-overlay{ transition-duration:200ms !important; }
}

/* ── 11 · Contraste forzado: el ícono con máscara tomaría el color del fondo y desaparecería ── */
@media (forced-colors:active){
  body.eg-pop26 #eg-pop-newsletter .eg-pop-close::before{ forced-color-adjust:none; background:CanvasText; }
}

/* ── 12 · Bloqueo de la página mientras está abierto. En html y no en body (ver REGLAS). 0-1-1 le gana a eg-rebajas ── */
html.eg-pop26-bloqueo{ overflow:hidden; scrollbar-gutter:stable; }

/* 30-sep · Rafael probó el panel en negro y prefirió el blanco de siempre («mejor fondo blanco»). Se queda solo sin negrita
   en el botón (DECISIONES 29-sep: nada en negrita). */
body.eg-pop26 #eg-pop-newsletter .mc4wp-form-fields input[type="submit"]{ font-weight:400 !important; }