/*
Theme Name: Wolk Portal
Theme URI: https://wolksoft.com
Author: Wolk Software
Description: Tema lite para el Portal de Clientes Wolk (wolksoft.com). Login como portada, PWA instalable, tres esquemas de color configurables, i18n ES/EN. Pensado para convivir con WooCommerce y el plugin Wolk Tienda.
Version: 1.0.286
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: wolk-portal
*/

/* ============================================================
   TOKENS — 3 esquemas configurables (Customizer setea data-theme en <html>)
   ============================================================ */
:root{
  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius:20px; --maxw:460px;
  /* default = teal/navy */
  --bg-1:#E8FBF8; --bg-2:#F5FBFF; --page:#ECEEF2;
  --surface:#FFFFFF; --surface-2:#F4F6F8;
  --ink:#0A1628; --ink-soft:#52617A; --muted:#94A3B8; --line:#E6EAEF;
  --brand:#13B5A6; --brand-2:#2EC4B6; --on-brand:#062E2A;
  --sale:#E5484D; --on-sale:#FFFFFF; /* 1.0.107: color semántico de descuento (universal, no de marca) */
  /* 1.0.121 — BOTONES PRIMARIOS: azul marino oscuro + letras BLANCAS (decisión de
     marca de Deiby 2026-07-23; combina con el azul del logo). Contraste blanco/navy
     ≈10:1 AAA. El teal (--brand) queda de ACENTO: chips, iconos, links, focos. */
  --btn:#1C3D5A; --on-btn:#FFFFFF;
  /* Derivados del fondo (1.0.122): cambiar --btn en Personalizar re-calcula
     gradiente y sombra solos — dos valores gobiernan todo el sistema de botones. */
  --btn-2:color-mix(in srgb, var(--btn) 82%, #ffffff);
  --btn-shadow:color-mix(in srgb, var(--btn) 30%, transparent);
  --ring:rgba(19,181,166,.30); --accent-ink:#0B7A6F;
  --ok:#047857; --ok-soft:#D1FAE5; --gold:#B7791F; --gold-soft:#FEF3C7;
  --danger:#B91C1C; --danger-soft:#FEE2E2; --hist:#64748B; --hist-soft:#F1F5F9;
  --mesh-a:rgba(46,196,182,.45); --mesh-b:rgba(13,40,55,.10);
}
[data-theme="azul"]{
  --bg-1:#E7ECFB; --bg-2:#F4F7FF;
  --brand:#1E40AF; --brand-2:#3B82F6; --on-brand:#FFFFFF;
  --ring:rgba(30,64,175,.28); --accent-ink:#1E40AF;
  --mesh-a:rgba(59,130,246,.40); --mesh-b:rgba(15,23,42,.10);
}
[data-theme="dark"]{
  --bg-1:#08121F; --bg-2:#0B1A2E; --page:#06101C;
  --surface:#111D35; --surface-2:#16243F;
  --ink:#EEF3F9; --ink-soft:#9FB0C7; --muted:#6B7C96; --line:#22304C;
  --brand:#2EC4B6; --brand-2:#3DD5C7; --on-brand:#06231F;
  --sale:#FF6B6B; --on-sale:#231015;
  --btn:#2C567E; --on-btn:#FFFFFF; /* derivados heredan del :root (color-mix sobre --btn) */
  --btn-shadow:color-mix(in srgb, #000 45%, transparent);
  --ring:rgba(46,196,182,.35); --accent-ink:#5FE3D4;
  --ok:#34D399; --ok-soft:#0E3B33; --gold:#FBBF24; --gold-soft:#3A2E12;
  --danger:#F87171; --danger-soft:#3A1A1A; --hist:#7C8AA3; --hist-soft:#16243F;
  --mesh-a:rgba(46,196,182,.30); --mesh-b:rgba(46,196,182,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body.wolk{
  font-family:var(--body);background:var(--page);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.45;
  /* 1.0.167 — el overflow-x:hidden vivía en .wolk-app (más abajo), un DIV
     normal. Cualquier overflow != visible en un ancestro NO-body/html
     convierte a ESE div en el "contenedor de scroll" que WordPress/CSS usa
     para resolver position:sticky — y como .wolk-app nunca desborda su
     propio alto (crece con el contenido, no tiene tope), el que en
     realidad se mueve es el documento, no .wolk-app: el resultado es que
     TODO lo sticky del tema (esta franja, el resumen del carrito en
     checkout, la imagen de la ficha de producto en desktop) se queda
     "congelado" en su posición del documento y se va con el scroll en vez
     de pegarse — confirmado con un navegador real (Chromium), no solo
     leyendo el CSS. Poniendo overflow-x:hidden acá (en body, que el
     navegador SÍ trata como el contenedor de scroll real de la página) se
     previene el mismo desborde horizontal sin romper ningún sticky.
     SEGURIDAD: no es de seguridad, pero se documenta como hallazgo crítico
     también en docs/PENDIENTES.md. */
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:8px}

/* ============================================================
   APP SHELL
   ============================================================ */
.wolk-app{min-height:100dvh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-2));position:relative}
.wolk-app::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(620px 420px at 90% -8%,var(--mesh-a),transparent 60%),
    radial-gradient(520px 420px at -12% 14%,var(--mesh-b),transparent 60%)}
.wolk-shell{width:100%;max-width:var(--maxw);margin:0 auto;flex:1;position:relative;z-index:1;
  display:flex;flex-direction:column;padding:0 16px 28px}

/* ------------------------------------------------------------
   1.0.147 — SPLASH DE PANTALLA COMPLETA (solo /portal/, ver
   template-portal.php + wolk-portal.js). Corrige 1.0.146: Deiby
   aclaró que el splash tenía que tapar TODA la pantalla mientras
   [wolk_perfil_fiscal] (widget React de wolk-propuestas) hace su
   propio fetch — no solo la tarjeta donde vive ese widget — para
   que nunca se vea el portal "por partes" (un control listo, otro
   todavía cargando). z-index 10000: por encima de TODO lo demás
   en el tema (el valor más alto usado antes era 9999).
   ------------------------------------------------------------ */
.wolk-splash{
  position:fixed;inset:0;z-index:10000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-2));
  transition:opacity .35s ease;
}
/* 1.0.235 — vestido nuevo (pedido Deiby: el cajoncito blanco pulsando se veía
   "vulgar"). Ahora: LOGO SIN FONDO flotando (PNG transparente de Personalizar,
   fallback logo del sitio), con UNA entrada suave — nada de pulso infinito —,
   nombre del sitio, anillo girando con --brand y CARGANDO espaciado estilo
   app. Todo por tokens del tema: cambiar el esquema recolorea el splash solo.
   El id, .is-done y el lock quedan idénticos: wolk-portal.js no se enteró. */
.wolk-splash-mark{
  width:96px;max-width:40vw;height:auto;
  filter:drop-shadow(0 10px 22px color-mix(in srgb, var(--ink) 16%, transparent));
  /* 1.0.247 — el logo PALPITA (pedido Deiby con el ejemplo de Conexión Natural:
     "el logo palpita el de conexión... el de wolk no"). Entrada suave UNA vez
     y luego una respiración lenta infinita — arranca a los .7s para no pelear
     con la entrada. reduce-motion ya lo apaga (regla existente). */
  animation:wolk-splash-in .5s cubic-bezier(.2,.8,.2,1) both,
    wolk-splash-palpita 2.4s ease-in-out .7s infinite;
}
@keyframes wolk-splash-palpita{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
/* 1.0.247 — mientras el splash manda (html.wolk-splash-lock), NADA se cuela:
   la barra de abajo (Tienda/Carrito/Perfil, z-index 55) y el globito de ayuda
   (.whelp-fab-wrap) se pintaban ENCIMA del splash en el teléfono de Deiby
   (pantallazo 7 sep — stacking context distinto al del overlay). En vez de
   pelear con z-index, se esconden explícitamente mientras dura el lock; al
   quitarse la clase (wolk-portal.js, mecánica intacta) reaparecen solos. */
html.wolk-splash-lock .wolk-bottomnav,
html.wolk-splash-lock .whelp-fab-wrap{visibility:hidden}
/* 1.0.248 — .wolk-splash-name ELIMINADO (pedido Deiby: el logo ya trae el
   wordmark adentro; el nombre debajo se veía repetido). */
.wolk-splash-ring{
  margin-top:38px;width:30px;height:30px;border-radius:50%;
  border:3px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-top-color:var(--brand);
  animation:wolk-splash-gira .9s linear infinite;
}
.wolk-splash-txt{
  margin-top:14px;font:700 11.5px/1 var(--body);
  letter-spacing:.38em;text-indent:.38em;color:var(--ink-soft);
}
@keyframes wolk-splash-in{from{opacity:0;transform:scale(.9) translateY(8px)}}
@keyframes wolk-splash-gira{to{transform:rotate(360deg)}}
.wolk-splash.is-done{opacity:0;pointer-events:none}
/* mientras el splash está activo, la página de atrás no hace scroll */
html.wolk-splash-lock,html.wolk-splash-lock body{overflow:hidden;height:100%}
@media (prefers-reduced-motion:reduce){
  .wolk-splash-mark,.wolk-splash-ring{animation:none}
  .wolk-splash{transition:none}
}

/* topbar (logo + idioma) */
/* 1.0.176 — Deiby marcó con línea roja que TODO el bloque de arriba se ve
   "separado" y sugirió él mismo la causa correcta: "quizás quitarle el
   borde de los lados sería la solución". Medido: tenía razón. .wolk-shell
   (el contenedor de toda la página) tiene padding:0 16px 28px — 16px de
   aire a cada lado para TODO el contenido. .wolk-top vive adentro de ese
   padding, así que su fondo sólido (var(--bg-1)) se corta 16px antes del
   borde real de la pantalla, y en esa franja de 16px de cada lado se ve
   el fondo degradado de .wolk-app por detrás — una franja vertical de
   OTRO color corriendo de arriba a abajo en toda la página, como un marco
   lateral. Fix: método estándar de "full-bleed" — margen negativo de
   -16px a cada lado (para que el FONDO llegue hasta el borde real de la
   pantalla) + padding-left/right de 16px (para que el CONTENIDO de
   adentro — logo, ES/EN — quede exactamente en el mismo lugar que antes,
   alineado con el resto de la página). Mismo tratamiento en .wshop-stick
   más abajo. */
.wolk-top{display:flex;align-items:center;justify-content:space-between;padding:16px 0 6px;
  margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;}
/* 1.0.167 — cuando /tienda/ tiene el interruptor "Fijar arriba" en ON
   (Personalizar → Wolk Portal — Tienda), este bloque se pega arriba DEL
   TODO; la franja de búsqueda/categorías (.wshop-stick, más abajo en este
   archivo) se pega justo debajo, con el offset que mide
   assets/js/wolk-portal.js (--wolk-top-h) — así el corte de "lo fijo" queda
   exactamente al final de las categorías, como pidió Deiby. */
/* Selector compuesto (2 clases) a propósito: hay otra regla más abajo
   (".wolk-top{ position:relative; ... }", safe-area de notch) que si no
   ganaría por orden de aparición al empatar en especificidad con un
   selector de una sola clase — confirmado con un navegador real que sin
   esto position:sticky NUNCA llegaba a aplicarse. */
.wolk-top.wolk-top--stick{position:sticky;top:0;z-index:31;background:var(--bg-1)}
/* 1.0.169 — con la franja de arriba realmente fija, cualquier salto a un
   ancla (scrollIntoView, ej. al tocar una categoría) necesita "reservar"
   ese espacio o el título de la sección queda tapado detrás. --wolk-sticky-h
   la mide assets/js/wolk-portal.js (alto real de .wolk-top + .wshop-stick,
   se recalcula solo); si no corrió el JS todavía, 0px no rompe nada — el
   scroll simplemente no reserva espacio extra, como antes de 1.0.167. */
html{scroll-padding-top:var(--wolk-sticky-h,0px)}
.wolk-logo{background:transparent;border:0;border-radius:0;padding:0;
  box-shadow:none;display:inline-grid;place-items:center}
.wolk-logo img{height:30px;width:auto;max-width:160px;object-fit:contain}
.wolk-lang{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.wolk-lang button{border:0;background:none;cursor:pointer;font:700 11.5px var(--body);color:var(--ink-soft);padding:5px 12px;border-radius:999px;transition:.15s}
.wolk-lang button.on{background:var(--brand);color:var(--on-brand)}

/* generic card / button */
.wcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:0 6px 20px rgba(10,22,40,.06)}
.wbtn{border:0;cursor:pointer;font-family:var(--display);font-weight:700;border-radius:13px;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.wbtn-primary{color:var(--on-btn);background:linear-gradient(135deg,var(--btn),var(--btn-2));box-shadow:0 10px 22px var(--btn-shadow)}
.wbtn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
.wbtn-ghost{background:var(--surface-2);color:var(--ink)}
.wbtn-ghost:hover{filter:brightness(.97)}
.wbtn-block{width:100%;padding:15px;font-size:15px}

/* notices */
.wolk-notice{margin:10px 20px 0;border-radius:12px;padding:11px 14px;font-size:13px;font-weight:600}
.wolk-notice.err{background:var(--danger-soft);color:var(--danger)}
.wolk-notice.ok{background:var(--ok-soft);color:var(--ok)}

/* ============================================================
   PWA install banner
   ============================================================ */
.wolk-install{display:none;margin:10px 16px 0;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:10px 12px;align-items:center;gap:11px;box-shadow:0 8px 22px rgba(15,23,42,.08)}
.wolk-install.show{display:flex}
.wolk-install .ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--on-brand);font:700 16px var(--display)}
.wolk-install .ic img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.wolk-install .tx{flex:1;min-width:0}
.wolk-install .tx b{font:700 12.5px var(--display)}
.wolk-install .tx p{font-size:11px;color:var(--ink-soft);font-weight:500;margin-top:1px}
.wolk-install .go{border:0;cursor:pointer;background:var(--brand);color:var(--on-brand);font:700 12px var(--body);padding:8px 13px;border-radius:9px;flex-shrink:0}
.wolk-install .x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}

/* ============================================================
   LOGIN
   ============================================================ */
.wolk-auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px 24px 8px}
.wolk-auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px;text-align:center}
.wolk-auth-brand .chip{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.wolk-auth-brand .chip img{height:40px;max-width:210px;object-fit:contain}
.wolk-auth-brand p{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.wolk-tabs{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:12px;margin-bottom:16px}
.wolk-tab{flex:1;border:0;cursor:pointer;font:700 13.5px var(--body);color:var(--ink-soft);background:transparent;padding:10px;border-radius:9px;transition:.15s}
.wolk-tab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,22,40,.14)}
.wgrp{margin-bottom:13px}
.wgrp label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.wfield{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1.5px solid transparent;border-radius:12px;padding:0 12px;transition:.15s}
.wfield:focus-within{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
.wfield svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.wfield input{flex:1;border:0;outline:0;background:none;font:500 14.5px var(--body);color:var(--ink);padding:13px 0;min-width:0}
.wfield input::placeholder{color:var(--muted)}
.weye{border:0;background:none;cursor:pointer;color:var(--muted);padding:4px;display:grid;place-items:center}
.wrow{display:flex;align-items:center;justify-content:space-between;margin:4px 0 16px}
.wchk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);font-weight:600;cursor:pointer}
.wchk input{width:16px;height:16px;accent-color:var(--brand)}
.wforgot{font-size:12.5px;color:var(--accent-ink);font-weight:700;text-decoration:none}
.wolk-divider{display:flex;align-items:center;gap:12px;margin:16px 0}
.wolk-divider::before,.wolk-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.wolk-divider span{font-size:11px;color:var(--muted);font-weight:600}
.wolk-bio{width:100%;border:1.5px solid var(--line);cursor:pointer;background:var(--surface);color:var(--ink);font:700 13.5px var(--body);padding:13px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:9px}
.wolk-bio:hover{border-color:var(--brand);background:var(--surface-2)}
.wolk-bio svg{width:19px;height:19px;color:var(--brand)}
/* ============================================================
   PORTAL (perfil + secciones)
   ============================================================ */
.wolk-profile{display:flex;align-items:center;gap:14px;padding:6px 20px 14px}
.wavatar{width:62px;height:62px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:var(--on-brand);display:grid;place-items:center;font:800 25px var(--display);box-shadow:0 8px 20px var(--ring)}
.wprofile-info{flex:1;min-width:0}
.weyebrow{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.wname{font:800 20px var(--display);letter-spacing:-.02em;line-height:1.1;margin:1px 0 7px}
.wbadges{display:flex;gap:6px;flex-wrap:wrap}
.wbadge{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.wbadge.svc{background:var(--ring);color:var(--accent-ink)}
.wbadge.ok{background:var(--ok-soft);color:var(--ok)}
/* 1.0.255 — el badge de la cabecera ya NO es siempre verde: refleja el peor
   estado real de los planes y facturas del cliente (bug Viviana 21 set 2026:
   "arriba dice al día y abajo que venció"). */
.wbadge.info{background:#e0f2fe;color:#075985}
.wbadge.warn{background:#fef3c7;color:#92400e}
.wbadge.danger{background:#fee2e2;color:#991b1b}

.wchips{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 14px;scrollbar-width:none}
.wchips::-webkit-scrollbar{display:none}
.wchip{flex:0 0 auto;border:1px solid var(--line);cursor:pointer;background:var(--surface);color:var(--ink);
  padding:8px 14px;border-radius:999px!important;font:600 13px var(--body);display:flex;align-items:center;gap:7px;transition:.15s}
.wchip:hover{background:var(--surface-2)}
.wchip svg{width:15px;height:15px}

/* ===== MENÚ DE ACCESOS (tiles tipo app con globito de notificación) ===== */
.wmenu{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 12px;padding:0;margin:4px 0 24px}
.wmenu-item{flex:0 0 auto;width:74px;background:none;border:0;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0}
.wmenu-ico{position:relative;width:60px;height:60px;border-radius:18px;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);box-shadow:0 5px 16px rgba(10,22,40,.08);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.wmenu-item:hover .wmenu-ico{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,22,40,.14)}
.wmenu-item:active .wmenu-ico{transform:scale(.95)}
.wmenu-item.on .wmenu-ico{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:var(--on-brand)}
.wmenu-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* globito de notificación */
.wmenu-badge{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;background:#ef4444;color:#fff;
  font:800 11px var(--display);line-height:1;border:2.5px solid var(--bg-1);box-shadow:0 2px 6px rgba(239,68,68,.45)}
.wmenu-label{font-size:11.5px;font-weight:600;text-align:center;color:var(--ink);line-height:1.2}
/* 1.0.243 — UNA SOLA FILA en el teléfono (pantallazo Deiby: con la quinta
   puerta "Mi cuenta", "Proyectos" se bajaba solo a una segunda fila — "nada
   que ver que se haga para abajo"). En pantallas angostas las cajitas bajan
   a 48px (el MISMO tamaño del menú de la tarjeta del plan, .wam-ico 1.0.239
   — queda consistente) con gap corto y nowrap: las 5 entran en una fila en
   360px (5×60 + 4×6 = 324px de fila). En desktop no cambia nada. */
@media (max-width:520px){
  .wmenu{flex-wrap:nowrap;gap:12px 6px;justify-content:space-around}
  .wmenu-item{width:60px;gap:6px}
  .wmenu-ico{width:48px;height:48px;border-radius:14px}
  .wmenu-ico svg{width:22px;height:22px}
  .wmenu-label{font-size:10.5px}
  .wmenu-badge{min-width:18px;height:18px;font-size:10px;top:-6px;right:-6px;border-width:2px}
}
/* pantallas MUY angostas (<340px, raras): mejor que vuelva a envolver a que
   se desborde de lado. */
@media (max-width:340px){
  .wmenu{flex-wrap:wrap}
}
/* secciones que abre el menú: ocultas hasta tocar el tile */
.wsection.wcollapse[hidden]{display:none}
/* editor de perfil fiscal embebido (formulario de propuestas) */
.wfiscal-edit{margin-top:14px}
.wfiscal-edit[hidden]{display:none}
.wfiscal-edit .wcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}

.wsection{padding:4px 0 22px}
.wsec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.wsec-title{font:800 16px var(--display);letter-spacing:-.015em}
.wsec-action{background:none;border:0;cursor:pointer;color:var(--accent-ink);font:700 13px var(--body);display:flex;align-items:center;gap:4px;text-decoration:none}
.wsec-action svg{width:14px;height:14px}

.frow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.flabel{font-size:12.5px;color:var(--muted);font-weight:600}
.fvalue{font-size:13.5px;color:var(--ink);font-weight:700;text-align:right;word-break:break-word}

.wplan{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(10,22,40,.06)}
.wplan + .wplan{margin-top:12px}
.wplan-top{display:flex;align-items:center;gap:12px;padding:15px 16px}
.wplan-ico{width:46px;height:46px;border-radius:13px;background:var(--ring);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0}
.wplan-ico svg{width:24px;height:24px}
.wplan-meta{flex:1;min-width:0}
.wplan-name{font:800 15px var(--display)}
.wplan-sub{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.wpill{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.wpill.active{background:var(--ok-soft);color:var(--ok)}
.wpill.due{background:var(--danger-soft);color:var(--danger)}
.wplan-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.wcardline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);font-weight:600}
.wcardline svg{width:15px;height:15px}
/* 9 ago 2026 — Deiby: "Gestionar" cambiaba de lado según la tarjeta (ver nota larga en
   template-portal.php, ahí está el porqué exacto: era "justify-content:space-between" con
   3 hijos sueltos, y un ítem solo en su propia línea queda pegado a la izquierda). Se
   agrupan licencia/Relacionar + Gestionar/Renovar en ".wplan-actions" y se empuja ese grupo
   entero al borde derecho con "margin-left:auto" — un margen automático SÍ se sostiene
   aunque el grupo baje de línea solo (a diferencia de justify-content), así que el botón
   final queda siempre a la derecha, se vea donde se vea. */
.wplan-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}

/* 1.0.181 — Licencia PV Wolk INLINE dentro de ".wplan-foot" (misma fila que la tarjeta y
   "Gestionar"/"Renovar" — ajustado con Deiby, 8 ago 2026: el botón "Activar licencia"/
   "Relacionar" o la etiqueta "LICENCIA ACTIVA" viven en esa fila, no en un bloque aparte.
   Ver PLAN-ACTIVACION-LICENCIAS-PV-WOLK.md secciones 4.1bis/4.3bis. ".wplan-foot" ya trae
   flex-wrap:wrap arriba para que quepan los 3 elementos en pantallas angostas. La leyenda
   de un Extra deshabilitado ("wplan-license-noterow") es la única pieza que sigue viviendo
   en su propia fila debajo, porque es una oración completa y no cabe inline. */
.wplan-license{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.wplan-license-active{justify-content:flex-start}
.wplan-license-tag{font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--ok);background:var(--ok-soft);padding:4px 10px;border-radius:999px;white-space:nowrap}
.wplan-license-val{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.wplan-license-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.wplan-license-noterow{padding:0 16px 14px;border-top:none}
.wplan-license-note{font-size:12px;color:var(--ink-soft);line-height:1.5;margin:0}
.wplan-license-note a{color:var(--accent-ink);font-weight:700;text-decoration:underline}

/* ============================================================
   1.0.239 — MENÚ DE ACCIONES de la tarjeta del plan (.wplan-menu)
   Pedido Deiby (5 sep 2026): "con un icono y abajo en pequeñito la
   letra como menú" — mismo lenguaje del menú Facturas/Soporte
   (.wmenu-ico) a escala de tarjeta. Aprobado en preview-plan-acciones.
   Jerarquía conservada: primary = navy sólido (CTA, como .wbtn-primary),
   danger = rojo (Reportar pago vencido), disabled = apagado (Extra
   huérfano), es-por-vencer = aro ámbar en la cajita (antes en el botón).
   Todo por tokens del tema — los 3 esquemas salen gratis.
   ============================================================ */
.wplan-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 6px;
  padding:12px 10px 14px;border-top:1px solid var(--line)}
.wam{flex:0 0 auto;width:74px;background:none;border:0;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;text-decoration:none}
.wam-ico{position:relative;width:48px;height:48px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);
  box-shadow:0 4px 12px rgba(10,22,40,.07);
  transition:transform .15s ease,box-shadow .15s ease}
.wam:hover .wam-ico{transform:translateY(-2px);box-shadow:0 10px 22px rgba(10,22,40,.13)}
.wam:active .wam-ico{transform:scale(.93)}
.wam-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wam-label{font-size:10.5px;font-weight:700;text-align:center;color:var(--ink-soft);line-height:1.2;max-width:74px}
.wam.primary .wam-ico{background:linear-gradient(135deg,var(--btn),var(--btn-2));border-color:transparent;color:var(--on-btn);box-shadow:0 8px 18px var(--btn-shadow)}
.wam.primary .wam-label{color:var(--ink);font-weight:800}
.wam.danger .wam-ico{background:linear-gradient(135deg,#dc2626,#b91c1c);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(185,28,28,.3)}
.wam.danger .wam-label{color:var(--danger);font-weight:800}
.wam[aria-disabled="true"],.wam.disabled{cursor:not-allowed;pointer-events:none}
.wam[aria-disabled="true"] .wam-ico,.wam.disabled .wam-ico{opacity:.45}
.wam[aria-disabled="true"] .wam-label,.wam.disabled .wam-label{opacity:.55}
.wam.es-por-vencer .wam-ico{box-shadow:0 0 0 3px #fde68a,0 8px 18px var(--btn-shadow)}

.wproj,.wcase{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:14px;padding:13px 15px}
.wproj + .wproj,.wcase + .wcase{margin-top:9px}
.wproj.neg{border-left-color:var(--gold)}
.wproj.done{border-left-color:var(--hist);opacity:.92}
.wcase{border-left-color:var(--brand)}
.wcase.closed{border-left-color:var(--hist);opacity:.92}
.wproj-ico,.wcase-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--ok-soft);color:var(--ok)}
.wproj.neg .wproj-ico{background:var(--gold-soft);color:var(--gold)}
.wproj.done .wproj-ico{background:var(--hist-soft);color:var(--hist)}
.wcase-ico{background:var(--ring);color:var(--accent-ink)}
.wcase.closed .wcase-ico{background:var(--hist-soft);color:var(--hist)}
.wproj-ico svg,.wcase-ico svg{width:19px;height:19px}
.wproj-body,.wcase-body{flex:1;min-width:0}
.wproj-top,.wcase-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:3px}
.wproj-name,.wcase-asunto{font:800 14px var(--display);line-height:1.25}
.wcase-asunto{font-family:var(--body)}
.wproj-sub,.wcase-sub{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.wproj-open{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:var(--accent-ink);font:700 11.5px var(--body);text-decoration:none}
.wproj-open svg{width:13px;height:13px}
.wtag{padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:800}
.wtag.acc,.wtag.open{background:var(--ok-soft);color:var(--ok)}
.wtag.neg,.wtag.prog{background:var(--gold-soft);color:var(--gold)}
.wtag.open{background:var(--ring);color:var(--accent-ink)}
.wtag.closed{background:var(--hist-soft);color:var(--hist)}
.wtoggle{width:100%;margin-top:10px;background:var(--surface-2);border:0;cursor:pointer;border-radius:11px;padding:11px;font:700 13px var(--body);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:6px}
.wtoggle svg{width:15px;height:15px;transition:transform .2s}
.whidden{display:none}

.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 4px}
.wtile{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px;text-decoration:none}
.wtile-ico{width:54px;height:54px;border-radius:16px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink);transition:.15s;position:relative}
.wtile:active .wtile-ico{transform:scale(.94)}
.wtile-ico svg{width:25px;height:25px}
.wtile-label{font-size:11.5px;font-weight:600;text-align:center;color:var(--ink);line-height:1.2;max-width:80px}

.winv{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.winv:last-child{border-bottom:0}
.winv-ico{width:40px;height:40px;border-radius:12px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;flex-shrink:0}
.winv-ico.pend{background:var(--gold-soft);color:var(--gold)}
.winv-ico svg{width:19px;height:19px}
.winv-body{flex:1;min-width:0}
.winv-title{font:800 13.5px var(--display)}
.winv-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.winv-amt{text-align:right;flex-shrink:0}
.winv-amt b{font:800 14px var(--display)}
.winv-amt span{display:block;font-size:10.5px;font-weight:800;margin-top:2px}
.winv-amt .paid{color:var(--ok)} .winv-amt .pend{color:var(--gold)}

/* 1.0.216 — Pago RECHAZADO por soporte (pedido Deiby: que se VEA desde el
   perfil). Fila clicable al pedido, badge rojo parpadeando, ícono ✖ rojo. */
a.winv{text-decoration:none;color:inherit}
a.winv:hover .winv-title{text-decoration:underline}
.winv-ico.rech{background:var(--danger-soft);color:var(--danger)}
.winv-amt .rech{color:var(--danger);animation:wolk-rechazo-parpadeo 1.15s ease-in-out infinite}
@keyframes wolk-rechazo-parpadeo{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.winv-amt .rech,.wolk-alerta-rechazo{animation:none}}

/* 1.0.216 — ALERTA de pago rechazado al entrar al portal: parpadeo suave y CTA
   al MISMO URL del correo (pedido + motivo + subir comprobante corregido). */
.wolk-alertas-pago{margin:14px 0 4px;display:grid;gap:10px}
.wolk-alerta-rechazo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--danger-soft);
  border:1.5px solid var(--danger);border-radius:14px;padding:13px 16px;
  animation:wolk-rechazo-alerta 1.6s ease-in-out infinite}
@keyframes wolk-rechazo-alerta{0%,100%{box-shadow:0 0 0 0 rgba(185,28,28,0)}50%{box-shadow:0 0 0 5px rgba(185,28,28,.16)}}
.wolk-alerta-rechazo-txt{flex:1;min-width:200px}
.wolk-alerta-rechazo-txt strong{display:block;color:var(--danger);font-size:13.5px}
.wolk-alerta-rechazo-motivo{display:block;font-size:12.5px;color:var(--danger);opacity:.9;margin-top:3px;font-weight:600}
.wolk-alerta-rechazo-cta{display:inline-block;background:var(--danger);color:#fff !important;font-weight:800;
  font-size:12.5px;padding:9px 14px;border-radius:10px;text-decoration:none;white-space:nowrap}
.wolk-alerta-rechazo-cta:hover{filter:brightness(1.08)}

.wempty{font-size:12.5px;color:var(--muted);font-style:italic;font-weight:500;padding:6px 0}

.wlocked{margin:0 20px 16px;padding:15px 18px;border:1px dashed var(--line);border-radius:18px;display:flex;align-items:center;gap:13px}
.wlocked .ic{width:42px;height:42px;border-radius:12px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;flex-shrink:0}
.wlocked .ic svg{width:21px;height:21px}
.wlocked b{font:800 14px var(--display);display:flex;align-items:center;gap:7px}
.wlocked p{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.wsoon{font-size:10px;font-weight:800;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px}

/* svg defaults for inline icons */
.wsection svg,.wchip svg,.wsec-action svg,.wcardline svg,.wplan-ico svg,.wproj-ico svg,.wcase-ico svg,.winv-ico svg,.wtile-ico svg,.wlocked svg,.wfield svg,.weye svg,.wolk-bio svg,.wfi-contact svg,.wsb-whatsapp svg,.wshop-chips-more svg{
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   TIENDA (catálogo WooCommerce, mobile-first)
   ============================================================ */
.wshop{padding:4px 20px 24px}
.wshop-cat{font:800 16px var(--display);letter-spacing:-.015em;margin:18px 0 12px;display:flex;align-items:center;gap:8px}
.wshop-cat .count{font:700 11px var(--body);color:var(--muted);background:var(--surface-2);padding:2px 8px;border-radius:999px}
.wshop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wprod{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(10,22,40,.05);text-decoration:none;color:inherit;transition:.15s}
.wprod:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,22,40,.10)}
.wprod-img{aspect-ratio:1/1;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.wprod-img img{width:100%;height:100%;object-fit:cover}
.wprod-img .ph{color:var(--muted)}
.wprod-img .ph svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4}
.wprod-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.wprod-name{font:700 13px var(--body);line-height:1.3;color:var(--ink)}
.wprod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.wprod-price{font:800 15px var(--display);color:var(--ink)}
.wprod-price small{font-size:10px;color:var(--muted);font-weight:600;display:block;margin-top:-2px}
.wprod-add{border:0;cursor:pointer;background:var(--brand);color:var(--on-brand);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.wprod-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* responsive: en desktop el shell se ensancha un poco para tienda */
@media (min-width:760px){
  body.wolk-tienda-page .wolk-shell{--maxw:980px}
  body.wolk-herramienta-page .wolk-shell{--maxw:1140px} /* 1.0.269 — /menu-generador/ y /progresopv/ */
  body.wolk-tienda-page .wshop-grid{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   Valor fiscal sin completar
   ============================================================ */
.fvalue.empty{color:var(--muted);font-weight:600;font-style:italic}
/* ===== STEPPER flotante del checkout (móvil) ===== */
.wolk-steps{position:fixed;left:50%;transform:translateX(-50%);z-index:60;
  bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  display:flex;gap:4px;padding:6px;border-radius:999px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(10,22,40,.16);backdrop-filter:blur(10px)}
body:not(.wolk-has-bottomnav) .wolk-steps{bottom:calc(18px + env(safe-area-inset-bottom, 0px))}
.wolk-step{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:66px;
  padding:8px 12px;border:0;border-radius:999px;background:none;cursor:pointer;
  color:var(--ink-soft);font:700 11px var(--body);transition:.15s}
.wolk-step svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wolk-step.on{background:var(--brand);color:var(--on-brand);box-shadow:0 6px 16px var(--ring)}
#wolk-auth-box,.wolk-checkout-fiscal,#order_review,.woocommerce-checkout-review-order,#payment{scroll-margin-top:84px}
@media (min-width:821px){.wolk-steps{display:none}} /* experiencia móvil; desk no lo necesita */

/* Botón de cerrar sesión (perfil) — rojo, métricas del estándar de botones */
.wolk-logout{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;
  margin:18px 0 6px;padding:15px;border-radius:13px;border:0;cursor:pointer;
  background:var(--danger);color:#FFFFFF;font:700 15px var(--display);text-decoration:none;
  box-shadow:0 10px 22px var(--danger-soft);transition:.15s}
.wolk-logout:hover{filter:brightness(1.06);transform:translateY(-1px);color:#FFFFFF}
.wolk-logout svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 1.0.266 — Pie legal: «Política de privacidad · Eliminar mi cuenta» + modal de confirmación */
.wolk-legal{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 96px;font:500 13px var(--body);color:var(--ink-soft)}
.wolk-legal-general{margin:18px 0 24px}
.wolk-legal a,.wolk-legal-del{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:4px 2px;font:inherit;cursor:pointer}
.wolk-legal-del{color:var(--danger)}
.wolk-legal a:hover,.wolk-legal-del:hover{color:var(--ink)}
.wdel{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center} /* hoja que sube desde abajo (mismo modelo del modal 🔑 Accesos) */
.wdel[hidden]{display:none}
.wdel-bg{position:absolute;inset:0;background:rgba(10,22,40,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s ease}
.wdel-card{position:relative;width:100%;max-width:460px;background:var(--surface);color:var(--ink);border-radius:26px 26px 0 0;padding:30px 20px calc(22px + env(safe-area-inset-bottom));text-align:center;
  box-shadow:0 -18px 50px rgba(10,22,40,.22);transform:translateY(100%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.wdel-card::before{content:"";position:absolute;top:10px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:99px;background:var(--line)}
.wdel.is-on .wdel-bg{opacity:1}
.wdel.is-on .wdel-card{transform:none}
.wdel-paso:not([hidden]){animation:wdelEntra .3s ease both}
@keyframes wdelEntra{from{opacity:0;transform:translateY(8px)}}
.wdel-card h3{margin:12px 0 6px;font:700 20px var(--display)}
.wdel-card p{margin:6px 0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.wdel-ico{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:var(--danger-soft);color:var(--danger);animation:wdelPulse 2s ease-in-out infinite}
.wdel-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes wdelPulse{0%,100%{box-shadow:0 0 0 0 var(--danger-soft)}50%{box-shadow:0 0 0 10px transparent}}
.wdel-btns{display:flex;gap:10px;margin-top:18px}
.wdel-btns button{flex:1;min-height:46px;border-radius:13px;font:700 15px var(--display);cursor:pointer;transition:transform .12s,filter .15s}
.wdel-btns button:active{transform:scale(.97)}
.wdel-no{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.wdel-si{position:relative;background:var(--danger);color:#fff;border:0;box-shadow:0 10px 22px var(--danger-soft)}
.wdel-si:hover{filter:brightness(1.06)}
.wdel-spin{display:none;position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:wdelGira .7s linear infinite}
.wdel-si.is-load span{visibility:hidden}
.wdel-si.is-load .wdel-spin{display:block}
@keyframes wdelGira{to{transform:rotate(360deg)}}
.wdel-ok{display:flex;justify-content:center}
.wdel-ok svg{width:64px;height:64px;fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wdel-ok circle{stroke-dasharray:151;stroke-dashoffset:151;animation:wdelTrazo .5s ease-out forwards}
.wdel-ok path{stroke-dasharray:36;stroke-dashoffset:36;animation:wdelTrazo .35s .45s ease-out forwards}
@keyframes wdelTrazo{to{stroke-dashoffset:0}}
.wdel-cod{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.wdel-card,.wdel-bg{transition:none}.wdel-ico,.wdel-paso,.wdel-ok circle,.wdel-ok path{animation:none;stroke-dashoffset:0}}
/* Tarjeta de acceso del perfil (correo del sistema + contraseña) */
#sec-acceso-datos{margin-bottom:14px}
.wolk-pass-change{margin-left:8px;color:var(--accent-ink);font-weight:800;font-size:12.5px;text-decoration:underline;text-underline-offset:2px}
button.wolk-pass-change{background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.wolk-change-email{padding:14px 0 6px;border-top:1px solid var(--line);margin-top:6px}

/* ---- Interior del panel (markup del plugin wolk-propuestas, brandeado por el tema) ---- */
.wolk-change-email h1,.wolk-change-email h2,.wolk-change-email h3,.wolk-change-email h4{
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;color:var(--ink);font-size:16px;margin:0 0 8px}
.wolk-change-email p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 12px}
.wolk-change-email label{display:block;font:700 12px var(--body);color:var(--ink-soft);margin:10px 0 6px;text-align:left}
.wolk-change-email code{font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--ink)}
/* Inputs: mismos campos del tema. !important: gana a estilos inline/Tailwind del plugin. */
.wolk-change-email input[type=text],.wolk-change-email input[type=email],
.wolk-change-email input[type=password],.wolk-change-email input[type=number]{
  width:100%!important;background:var(--surface-2)!important;border:1.5px solid var(--line)!important;
  border-radius:12px!important;padding:12px 14px!important;font:500 14.5px var(--body)!important;
  color:var(--ink)!important;outline:0!important;min-height:46px;box-sizing:border-box;margin:0 0 4px}
.wolk-change-email input:focus{border-color:var(--brand)!important;background:var(--surface)!important;box-shadow:0 0 0 4px var(--ring)!important}
/* Botones: del azul genérico al botón Wolk (gradiente de marca, a lo ancho). */
.wolk-change-email button,.wolk-change-email input[type=submit],.wolk-change-email .button{
  display:inline-flex;align-items:center;justify-content:center;width:100%;border:0!important;cursor:pointer;
  font-family:var(--display)!important;font-weight:700!important;font-size:14px!important;color:var(--on-btn)!important;
  background:linear-gradient(135deg,var(--btn),var(--btn-2))!important;padding:13px 20px!important;
  border-radius:13px!important;box-shadow:0 10px 22px var(--btn-shadow)!important;margin-top:12px;transition:.15s}
.wolk-change-email button:hover,.wolk-change-email input[type=submit]:hover{filter:brightness(1.04);transform:translateY(-1px)}
/* El botón del toggle del tema (#wolk-change-email-btn) NO es de este panel: se excluye. */
#wolk-change-email-btn{width:auto;background:none!important;border:0!important;box-shadow:none!important;
  color:var(--accent-ink)!important;padding:0!important;margin:0 0 0 8px;font:800 12.5px var(--body)!important;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* ============================================================
   WooCommerce — Mi cuenta (de-uglify de las pantallas nativas)
   El tema base de WC sale sin estilos; acá lo metemos en el shell.
   ============================================================ */
.woocommerce-account .wsection{padding:4px 18px 26px}

/* navegación: de lista con viñetas a fila de chips deslizable */
/* FIX responsive: WC flota nav (30%) y content (68%) — dentro del shell de 460px
   el formulario quedaba en ~310px con el chip "Dashboard" flotando al lado.
   Acá TODO apila al 100% (mismo patrón del fix de .form-row-first/-last). */
.wolk-shell .woocommerce-MyAccount-navigation,
.wolk-shell .woocommerce-MyAccount-content{float:none;width:100%}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
.woocommerce-MyAccount-navigation li{flex:0 0 auto}
.woocommerce-MyAccount-navigation li a{display:inline-block;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:8px 14px;border-radius:999px;font:600 13px var(--body);text-decoration:none;white-space:nowrap;transition:.15s}
.woocommerce-MyAccount-navigation li a:hover{background:var(--surface-2)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--brand);color:var(--on-brand);border-color:transparent}

/* contenido en tarjeta */
.woocommerce-MyAccount-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:0 6px 20px rgba(10,22,40,.06);color:var(--ink)}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3,.woocommerce-Address-title h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em;margin:0 0 10px}
.woocommerce-MyAccount-content p{color:var(--ink-soft);font-size:14px;margin:0 0 12px}
.woocommerce-MyAccount-content a{color:var(--accent-ink);font-weight:600}
/* Fieldset "Password change": fuera el borde crudo del navegador; legend como
   título de sección con separador arriba. */
.woocommerce-MyAccount-content fieldset{border:0;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);min-width:0}
.woocommerce-MyAccount-content fieldset legend{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-.01em;padding:0;margin:0 0 10px;float:none;width:auto}
/* Hint bajo el display name (em/small de WC): discreto. */
.woocommerce-MyAccount-content .form-row em,.woocommerce-MyAccount-content .form-row small{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted);font-style:normal}

/* layout de dos columnas (direcciones) -> apilado y legible */
.woocommerce-Addresses{display:grid;gap:14px;margin-top:14px}
@media (min-width:600px){.woocommerce-Addresses{grid-template-columns:1fr 1fr}}
.woocommerce-Address{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.woocommerce-Address address{font-style:normal;font-size:13.5px;color:var(--ink);line-height:1.6}

/* formularios */
.woocommerce form .form-row{margin-bottom:13px;display:block}
/* FIX responsive: WC pone .form-row-first/-last en 47% flotado (pensado para páginas
   anchas); dentro del shell del portal eso deja inputs enanos y labels partidos.
   Acá TODO apila a lo ancho (mobile-first, consistente en desktop). */
.wolk-shell .woocommerce form .form-row-first,
.wolk-shell .woocommerce form .form-row-last{width:100%;float:none}
/* Lost/reset password: formulario centrado, cómodo. */
.woocommerce-ResetPassword{max-width:420px;margin:0 auto}
.woocommerce-ResetPassword label{white-space:normal}

/* ============================================================
   ESTÁNDAR DE BOTONES — una sola vara: métricas de .wbtn-block
   (ancho 100%, alto ~48, padding 15, font 15, radio 13).
   Aplica a TODOS los botones de formularios de cuenta/reset y al
   "Volver al portal". Los botones dentro de tablas (pedidos) quedan
   inline compactos porque un bloque ahí rompería las filas.
   ============================================================ */
.wolk-shell .woocommerce-MyAccount-content form .button,
.wolk-shell .woocommerce-MyAccount-content form button[type=submit],
.wolk-shell .woocommerce-ResetPassword .button,
.wolk-shell .woocommerce-ResetPassword button,
.wolk-shell .woocommerce form.login .button,
.wolk-shell .woocommerce form.register .button{
  width:100%;min-height:48px;padding:15px;font-size:15px;border-radius:13px;justify-content:center;text-align:center;margin-top:4px}
.woocommerce table.shop_table .button{width:auto;min-height:0;padding:9px 14px;font-size:13px;margin-top:0}
.woocommerce form label{display:block;font:700 12px var(--body);color:var(--ink-soft);margin-bottom:6px}
.woocommerce form input.input-text,.woocommerce form input[type=email],.woocommerce form input[type=password],
.woocommerce form input[type=tel],.woocommerce form input[type=text],.woocommerce form select,.woocommerce-input-wrapper input,
.select2-container .select2-selection{width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;font:500 14.5px var(--body);color:var(--ink);outline:0;min-height:46px}
.woocommerce form input:focus,.woocommerce form select:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
/* FIX: el ojito NATIVO de WC (.show-password-input) es absolute y su wrapper
   (.password-input) perdía el position:relative con nuestros overrides — el ojo
   caía a la IZQUIERDA encima del texto. Se ancla a la derecha, estándar del sitio. */
.woocommerce form .password-input{position:relative;display:block;width:100%}
.woocommerce form .password-input input{padding-right:46px!important}
.woocommerce form .show-password-input{position:absolute;left:auto!important;right:8px;top:50%;
  transform:translateY(-50%);margin:0;padding:0;width:34px;height:34px;display:grid;place-items:center;
  cursor:pointer;color:var(--muted);border-radius:10px;transition:.15s}
.woocommerce form .show-password-input:hover{background-color:var(--surface-2)}
/* ÍCONO CONSISTENTE: WC pinta el ojo con SU css y quedaban dos dibujos distintos
   en reposo según qué hoja/estado cargara. El tema define AMBOS estados con SVG
   propio (mismo ojo del auth box): oculta = ojo abierto (tocá para ver);
   visible (.display-password) = ojo tachado. */
.woocommerce form .show-password-input::before,
.woocommerce form .show-password-input::after{content:none!important;display:none!important}
.woocommerce form .show-password-input{
  background-repeat:no-repeat;background-position:center;background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.woocommerce form .show-password-input.display-password{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313B5A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E")}

/* botones WC -> botón Wolk */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce-Button{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--on-btn);
  background:linear-gradient(135deg,var(--btn),var(--btn-2));padding:13px 20px;border-radius:13px;
  box-shadow:0 10px 22px var(--btn-shadow);text-decoration:none;transition:.15s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{filter:brightness(1.04);transform:translateY(-1px);color:var(--on-brand)}

/* tablas (pedidos) */
.woocommerce table.shop_table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:13.5px}
.woocommerce table.shop_table th{background:var(--surface-2);padding:11px 12px;text-align:left;font:700 12px var(--body);color:var(--ink-soft)}
.woocommerce table.shop_table td{padding:11px 12px;border-top:1px solid var(--line);color:var(--ink)}

/* avisos */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{border:0;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;margin-bottom:14px;list-style:none;position:relative}
/* FIX: WC pinta un ícono ::before absoluto (círculo verde/i/x) que contaba con un
   padding-left de 3.5em que el tema quitó — quedaba montado sobre la primera letra. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,.woocommerce-notice::before,
.woocommerce-message::after,.woocommerce-info::after,.woocommerce-error::after,.woocommerce-notice::after{content:none!important;display:none!important}
/* El botón/enlace del notice (¿Deshacer?, Ver carrito) flota a la derecha en WC; acá inline y limpio. */
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{float:none;display:inline;background:none;border:0;padding:0;margin-left:6px;color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.woocommerce-notices-wrapper{max-width:100%;min-width:0}
.woocommerce-message{background:var(--ok-soft);color:var(--ok)}
.woocommerce-info{background:var(--ring);color:var(--accent-ink)}
.woocommerce-error{background:var(--danger-soft);color:var(--danger)}

/* ============================================================
   LOGIN partido: acceso + invitación a la tienda
   ============================================================ */
body.wolk-login-page .wolk-shell{ --maxw:1040px; }

.wolk-auth-grid{ display:grid; gap:22px; align-items:start; width:100%; }
.wolk-auth-main{ min-width:0; }
.wolk-auth-aside{ min-width:0; display:flex; flex-direction:column; gap:16px; }

.wolk-welcome-title{ font:800 26px/1.15 var(--display); letter-spacing:-.02em; color:var(--ink); }
.wolk-welcome-sub{ font-size:14.5px; color:var(--ink-soft); font-weight:500; max-width:44ch; }

.wolk-shop-invite{ display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:15px 16px;
  box-shadow:0 8px 24px rgba(10,22,40,.07); transition:.15s; }
.wolk-shop-invite:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(10,22,40,.12); }
.wolk-shop-invite .ico{ width:46px;height:46px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--on-brand); }
.wolk-shop-invite .ico svg,.wolk-shop-invite .go svg{ fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
.wolk-shop-invite .ico svg{ width:24px;height:24px; }
.wolk-shop-invite .tx{ flex:1;min-width:0; }
.wolk-shop-invite .tx b{ display:block; font:800 15px var(--display); color:var(--ink); }
.wolk-shop-invite .tx small{ display:block; font-size:12.5px; color:var(--ink-soft); font-weight:500; margin-top:2px; }
.wolk-shop-invite .go{ color:var(--accent-ink); flex-shrink:0; display:grid; place-items:center; }
.wolk-shop-invite .go svg{ width:22px;height:22px; }

.wolk-shop-peek{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wolk-shop-peek .peek{ display:flex;flex-direction:column;gap:6px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;transition:.15s;color:inherit; }
.wolk-shop-peek .peek:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(10,22,40,.10); }
.wolk-shop-peek .peek img,.wolk-shop-peek .peek .ph{ width:100%; aspect-ratio:1/1; border-radius:9px; object-fit:cover;
  background:var(--surface-2); display:grid; place-items:center; color:var(--muted); }
.wolk-shop-peek .peek .ph svg{ width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4; }
.wolk-shop-peek .peek-name{ font:600 11.5px/1.3 var(--body); color:var(--ink); }
.wolk-shop-peek .peek-price{ font:800 12.5px var(--display); color:var(--accent-ink); }

@media (min-width:860px){
  .wolk-auth-grid{ grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
  .wolk-auth-aside{ order:-1; }                 /* invitación a la izquierda, acceso a la derecha */
  .wolk-welcome-title{ font-size:30px; }
}

/* WooCommerce: contraseña perdida más contenida dentro del shell */
.woocommerce-ResetPassword{ max-width:440px; margin:0 auto; }
.woocommerce-ResetPassword p{ font-size:14px; color:var(--ink-soft); }

/* ============================================================
   FICHA DE PRODUCTO (single product) app-like
   ============================================================ */
.wprod-single{ max-width:var(--maxw); margin:0 auto; padding:6px 0 8px; }
.wback{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink-soft);
  font:700 13px var(--display); padding:8px 4px; margin-bottom:6px; }
.wback svg{ width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.wback:hover{ color:var(--accent-ink); }

.wfi{ display:grid; gap:18px; }
.wfi-media{ display:flex; flex-direction:column; gap:10px; }
.wfi-img{ background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  aspect-ratio:1/1; display:grid; place-items:center; box-shadow:0 10px 30px rgba(10,22,40,.08); }
.wfi-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.wfi-img .ph{ color:var(--muted); }
.wfi-img .ph svg{ width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:1.2; }
.wfi-video{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; text-decoration:none;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:8px 14px;
  font:700 13px var(--display); color:var(--ink); }
.wfi-video svg{ width:15px;height:15px;fill:currentColor;stroke:none; color:var(--accent-ink); }
.wfi-video:hover{ background:var(--surface); box-shadow:0 6px 16px rgba(10,22,40,.10); }

.wfi-info{ display:flex; flex-direction:column; gap:12px; }
.wfi-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.wchip{ text-decoration:none; font:700 11.5px var(--display); color:var(--accent-ink);
  background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:999px; padding:4px 11px; }
.wchip:hover{ filter:brightness(.97); }
.wfi-title{ font:800 24px/1.18 var(--display); letter-spacing:-.02em; color:var(--ink); }
.wfi-price{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
/* 1.0.107 — Ficha con oferta: badge (rojo oferta) → precio protagonista → ancla
   subordinada → ahorro. El tachado es TEXTO PLANO (sin el .amount interno de
   wc_price que heredaba los 30px y salía gigante). align-items:center para que
   badge y tachado no bailen en móvil al hacer wrap. */
.wfi-price.has-sale{ align-items:center; row-gap:4px; }
.wfi-off{ background:var(--sale); color:var(--on-sale); font:800 13px var(--display); padding:5px 11px; border-radius:8px; letter-spacing:.2px; }
.wfi-price .amount.is-sale{ font:800 32px var(--display); color:var(--ink); line-height:1; }
.wfi-was{ font:700 15px var(--body); color:var(--muted); text-decoration:line-through; }
.wfi-save{ font:700 13px var(--body); color:var(--sale); margin-top:-2px; margin-bottom:2px; }
@media (max-width:520px){
  .wfi-price .amount.is-sale{ font-size:28px; }
  .wfi-was{ font-size:14px; }
}
/* 1.0.109 — Suscripciones: identidad clara + confianza (solo afirmaciones reales). */
.wfi-subchip{ display:inline-flex; align-items:center; gap:7px; background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--brand) 35%, transparent); font:700 12.5px var(--body); padding:6px 12px; border-radius:999px; margin:2px 0 8px; }
.wfi-subchip svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; }
.wfi-subchip b{ font-weight:800; }
/* 1.0.159 — Deiby, con captura real: "/ año" se partía en 2 líneas ("/" arriba,
   "año" abajo) en la franja sticky, donde el ancho es angosto — se ve roto/
   desacomodado. white-space:nowrap fuerza el sufijo entero como una sola
   pieza (si no entra, el flex-wrap de arriba ya lo manda a la fila de abajo,
   pero ENTERO, nunca partido a la mitad). */
.wfi-per{ font:700 15px var(--body); color:var(--ink-soft); white-space:nowrap; }
.wfi-sub{ display:flex; flex-direction:column; gap:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:13px 15px; margin:10px 0 4px; }
.wfi-sub-row{ display:flex; align-items:flex-start; gap:9px; font:500 13.5px var(--body); color:var(--ink-soft); line-height:1.45; }
.wfi-sub-row svg{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; stroke:var(--accent-ink); stroke-width:2; fill:none; }
.wfi-sub-row b{ color:var(--ink); font-weight:800; }
.wfi-sub-row .mut{ color:var(--muted); }
/* 1.0.110 — Peek del precio en móvil: la imagen no se come el primer viewport.
   Si el precio ASOMA, el usuario baja solo — sin flechitas ni auto-scroll (jamás
   secuestrar el scroll). Tope 38vh; la imagen se contiene sin recortarse. */
@media (max-width:600px){
  .wfi-img{ max-height:38vh; }
  .wfi-img img{ max-height:calc(38vh - 2px); width:auto; max-width:100%; margin:0 auto; object-fit:contain; display:block; }
}
/* 1.0.110 — Barra sticky de compra (solo móvil): sobre el tab bar, respetando el
   safe-area de iOS. Botón con las métricas del ESTÁNDAR (.wbtn-block: min-height 48,
   font 15, radio 13). En desktop no existe: el CTA nativo siempre está a la vista. */
.wfi-stickybuy{ position:fixed; left:0; right:0; z-index:54; display:flex; align-items:center; gap:12px;
  bottom:calc(64px + env(safe-area-inset-bottom, 0px));
  background:var(--surface); border-top:1px solid var(--line); padding:10px 14px;
  box-shadow:0 -6px 18px rgba(10,22,40,.08); }
.wfi-stickybuy[hidden]{ display:none; }
.wsb-price{ display:flex; align-items:baseline; gap:7px; min-width:0; }
.wsb-price b{ font:800 19px var(--display); color:var(--ink); white-space:nowrap; }
.wsb-off{ background:var(--sale); color:var(--on-sale); font:800 11px var(--display); padding:3px 7px; border-radius:7px; align-self:center; }
.wsb-per{ font:700 12.5px var(--body); color:var(--ink-soft); white-space:nowrap; }
.wsb-btn{ flex:1; min-height:48px; padding:12px 15px; font:700 15px var(--body); border:0; border-radius:13px;
  background:linear-gradient(135deg,var(--btn),var(--btn-2)); color:var(--on-btn); cursor:pointer; }
/* 1.0.150/1.0.152 — Ícono de WhatsApp DENTRO de la barra sticky (siempre a
   un toque, sin scrollear). Sin fondo propio (1.0.152: el badge de marca
   ya es verde+blanco, reconocible solo — un fondo gris atrás competía sin
   sumar nada); se conserva el área de toque de 48px vía flex/padding. */
.wsb-whatsapp{ flex:0 0 48px; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; }
.wsb-whatsapp .wa-badge{ width:26px; height:26px; }
.wsb-whatsapp[hidden]{ display:none; }
@media (min-width:601px){ .wfi-stickybuy{ display:none !important; } }
/* Chip de recurrencia en la tarjeta del grid. */
.wcardp-sub{ display:inline-flex; align-items:center; gap:5px; font:700 10.5px var(--body); color:var(--accent-ink); margin-top:3px; }
.wcardp-sub svg{ width:11px; height:11px; stroke:currentColor; stroke-width:2.4; fill:none; }
.wfi-price .amount{ font:800 30px var(--display); color:var(--ink); }
.wfi-price .amount del{ color:var(--muted); font-size:.62em; font-weight:700; margin-right:4px; }
.wfi-price .amount ins{ text-decoration:none; }
/* 1.0.156 — Deiby: los decimales (".00") se ven muy grandes en los montos,
   restándole peso al número entero. .62em iguala la escala que YA usa este
   tema para texto secundario dentro del precio (ver ".wfi-price .amount del"
   arriba) — un solo <span>, funciona igual en la tarjeta, la ficha y la
   franja sticky porque el tamaño es RELATIVO al font-size de cada contexto.
   1.0.157 — con opacity el gris salía "otro color" (mancha translúcida) —
   se reemplazó por color:var(--muted) explícito.
   1.0.158 — Deiby, con captura real de "Ahorrás $15.00 USD" (texto en
   var(--sale), rojo/naranja): el color:var(--muted) del intento anterior
   pisaba el color del texto de alrededor SIEMPRE, sin importar el
   contexto — en una línea roja, los decimales salían grises en vez de
   rojos, un choque de color obvio ("otro color", con razón). El pedido
   ORIGINAL de Deiby nunca fue "otro color", fue solo "más pequeñitos" —
   ahora SIN color propio: hereda currentColor del texto que lo rodea
   (negro en el precio normal, rojo en "Ahorrás", lo que sea), y la ÚNICA
   diferencia visual real es el tamaño. Cero riesgo de choque de color en
   ningún contexto presente o futuro. */
.wprice-cents{ font-size:.62em; font-weight:700; }
/* 1.0.157 — envoltorio de UNA SOLA fila para el precio dentro de la tarjeta
   (".wcardp-price" es flex-direction:column: cada HIJO DIRECTO es su propia
   fila). Sin este <span>, el navegador trata el texto y el <span> de
   centavos de adentro como fragmentos separados y cada uno cae en su propia
   fila ("$100" / ".00" / "USD" apilados) — con el envoltorio, todo el precio
   es un solo hijo directo, una sola fila, como antes de agregar los centavos
   chicos. */
.wcardp-amount{ display:inline; }
.wfi-price .tag{ font:700 11px var(--display); color:var(--ink-soft); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; }
.wfi-iva{ font-size:13px; color:var(--ink-soft); font-weight:600; margin-top:-4px; }
.wfi-stock{ align-self:flex-start; font:700 12px var(--display); border-radius:999px; padding:4px 11px; }
.wfi-stock.ok{ color:#0f7a52; background:rgba(22,163,74,.12); }
.wfi-stock.no{ color:#b42318; background:rgba(220,38,38,.10); }
.wfi-short{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.wfi-short p{ margin:0 0 8px; }

/* Carrito nativo de WooCommerce reestilizado */
.wfi-cart{ margin-top:6px; }
.wfi-cart form.cart{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin:0; }
.wfi-cart .quantity{ display:flex; align-items:center; }
.wfi-cart .quantity input.qty{ width:68px; height:52px; text-align:center; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); color:var(--ink); font:700 16px var(--display); }
.wfi-cart .single_add_to_cart_button,
.wprod-single .single_add_to_cart_button{ flex:1; min-width:200px; height:52px; border:0; cursor:pointer;
  border-radius:14px; background:linear-gradient(135deg,var(--btn),var(--btn-2)); color:var(--on-btn);
  font:800 15px var(--display); letter-spacing:.01em; box-shadow:0 10px 24px var(--btn-shadow); transition:.15s; }
.wfi-cart .single_add_to_cart_button:hover{ transform:translateY(-2px); box-shadow:0 16px 32px var(--brand-shadow); }
.wfi-cart .woocommerce-variation-add-to-cart{ display:flex; gap:10px; flex-wrap:wrap; width:100%; }
.wfi-cart table.variations{ width:100%; border-collapse:collapse; margin:0 0 10px; }
.wfi-cart table.variations td{ padding:4px 0; }
.wfi-cart table.variations select{ width:100%; height:48px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink); padding:0 12px; font:600 14px var(--body); }

/* 1.0.149 (corregido tras feedback mobile de Deiby: ".wsec-action" se veía
   como texto suelto, sin peso ni área de toque real) — "Consultá por
   WhatsApp" + "Compartir" de la ficha como BOTONES reales, con las métricas
   del estándar .wbtn-block (min 48px de alto tocable) pero uno al lado del
   otro en vez de ancho completo, usando .wbtn-ghost (el MISMO gris sólido
   de "Gestionar"/"Volver al portal") para que se vean y se toquen bien sin
   competir con "Añadir al carrito", que sigue siendo el único CTA primario. */
/* 1.0.152 — FIX de contraste real (no cosmético): `.wbtn-ghost` usa
   `--surface-2`, pensado para vivir ENCIMA de una tarjeta blanca (`.wcard`)
   — acá los botones están DIRECTO sobre el degradado de fondo de la
   página (`.wfi-info` no tiene tarjeta propia), y en los esquemas
   teal/azul `--surface-2` (#F4F6F8) es casi IDÉNTICO en luminosidad al
   degradado de fondo (#E7ECFB→#F4F7FF): el botón quedaba invisible, no
   era un problema de caché. Se pisa el fondo con `--surface` (blanco
   sólido, el MISMO truco que ya usa la caja de la imagen del producto
   para "flotar" sobre ese degradado) + borde + sombra chica — así
   contrasta de verdad en los 3 esquemas de color. */
.wfi-contact{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.wfi-contact .wbtn{ flex:1 1 150px; min-height:48px; padding:12px 14px; font-size:14px;
  background:var(--surface); border:1px solid var(--line); box-shadow:0 4px 14px rgba(10,22,40,.07); }
.wfi-contact .wbtn:hover{ filter:brightness(.98); }
.wfi-contact svg{ width:17px; height:17px; flex:0 0 17px; }
.wfi-contact .wa-badge{ width:20px; height:20px; flex:0 0 20px; }
.wfi-whatsapp[hidden]{ display:none; }

.wfi-desc{ margin-top:18px; }
.wfi-desc h2{ font:800 17px var(--display); color:var(--ink); margin:0 0 8px; }
.wfi-desc p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 10px; }

@media (min-width:760px){
  .wfi{ grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
  .wfi-title{ font-size:28px; }
  .wfi-media{ position:sticky; top:80px; }
}

/* ============================================================
   TIENDA app-like (búsqueda + chips + tarjetas)
   ============================================================ */
/* 1.0.174 — Deiby, con foto real medida a nivel de píxel (no a ojo): entre
   el logo/idioma y la barra de búsqueda+categorías se veía una franja
   angosta de OTRO color (más oscura), como una costura que cortaba el
   bloque en dos tarjetas separadas — "todos cuadrados, sueltos". Causa
   real: este padding-top:6px dejaba un huequito ANTES de que empezara
   .wshop-stick (que ya tiene su PROPIO padding-top:6px por dentro, para
   separar la barra de búsqueda de su borde) — en ese huequito se veía el
   degradé de .wolk-app (bg-1→bg-2) en vez del bg-1 sólido de los bloques
   de al lado, y como el degradé ya no es 100% igual a bg-1 ahí abajo,
   quedaba una línea visible. Fix: se saca el padding-top de acá (ya está
   cubierto por el padding-top interno de .wshop-stick) — así no queda
   ningún hueco entre el logo/idioma y la barra, sea cual sea el color de
   fondo de esquema activo. Confirmado con Playwright, comparando el color
   de píxeles en la costura antes/después.
   ============================================================ */
.wshop2{ padding:0 0 24px; }

/* Bloque pegajoso COMPLETO: búsqueda + chips juntos (antes solo la barra
   se pegaba y los chips se iban, dejando al usuario sin poder cambiar de
   categoría sin volver a subir). 1.0.167: el offset "top" ya no es fijo —
   toma la altura real de .wolk-top (medida en JS, ver --wolk-top-h) para
   que ambos bloques queden pegados sin espacio ni superposición entre
   ellos. Si el interruptor de Personalizar está OFF, .wshop-stick--static
   (más abajo) anula este position:sticky por completo.
   1.0.175 — Deiby marcó con línea roja su propia foto (la misma que le
   mandé como prueba de 1.0.174) señalando que TODO el bloque de arriba se
   ve "cuadrado", como una tarjeta flotando. Medido en píxeles: la sombra
   de acá abajo (pensada para separar la franja fija del contenido que
   scrollea por debajo) era demasiado oscura en reposo — bajaba hasta
   rgb(195,201,215) desde un fondo de rgb(231,236,251), una caída fuerte
   que se lee como un borde/marco dibujado bajo toda la franja, incluso
   ANTES de hacer scroll. Fix: sombra mucho más sutil (menos opacidad, se
   nota al scrollear con contenido debajo, pero no se ve como un marco
   duro apenas carga la página). */
/* 1.0.176 — mismo full-bleed que .wolk-top (ver comentario ahí arriba):
   margen negativo -16px a cada lado para que el fondo sólido llegue al
   borde real de la pantalla, + padding compensatorio para que la barra
   de búsqueda y los chips queden en el mismo lugar de siempre. */
.wshop-stick{ position:sticky; top:var(--wolk-top-h,64px); z-index:30;
  background:var(--bg-1); padding-top:6px;
  margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px;
  box-shadow:0 6px 14px -10px rgba(10,22,40,.16); }
.wshop-stick--static{ position:static !important; }

/* Barra: búsqueda + carrito (ya no se pega sola; la pega el contenedor) */
.wshop-bar{ position:static; display:flex; gap:10px; align-items:center;
  padding:6px 0 10px; }
/* 1.0.170 — Deiby, con capturas reales de la franja ya pegada: "se ve como
   todo separado... que se vea sólido". Causa: la barra de búsqueda y el
   botón de carrito tenían CADA UNO su propia sombra de elevación
   (box-shadow), como si fueran tarjetas flotando por separado encima de la
   franja fija — antes, cuando esta franja no se quedaba pegada de verdad,
   esa sombra casi no se notaba (pasaba de largo con el scroll); ahora que
   la franja está fija en pantalla todo el tiempo, esas sombras quedan
   siempre visibles y hacen que se vea como piezas sueltas en vez de UNA
   barra sólida. Fix: se quita la sombra de reposo de la búsqueda y el
   carrito (solo border, sin elevación) — quedan integrados al mismo panel
   que el logo/idioma y los chips, todos con el mismo fondo sólido
   (var(--bg-1)/var(--surface)). El carrito conserva una sombra chica SOLO
   al pasar el mouse (feedback de que es clickeable), no en reposo. */
.wshop-search{ flex:1; min-width:0; display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:0 13px; height:46px; }
.wshop-search svg{ width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round; }
.wshop-search input{ flex:1; min-width:0; border:0; background:transparent; outline:none;
  font:500 15px var(--body); color:var(--ink); }
.wshop-search input::placeholder{ color:var(--muted); }
.wshop-cart{ position:relative; flex-shrink:0; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center; background:var(--surface); border:1px solid var(--line);
  color:var(--ink); text-decoration:none; transition:.15s; }
.wshop-cart:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(10,22,40,.10); }
.wshop-cart svg{ width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.wshop-cart-count{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  display:none; place-items:center; border-radius:10px; background:var(--brand); color:var(--on-brand);
  font:800 11px var(--display); border:2px solid var(--bg-1); }
.wshop-cart-count.has{ display:grid; }

/* ============================================================
   1.0.161 — Búsqueda por voz (Web Speech API nativa del navegador, sin
   backend/API propia). Botón adentro de la píldora de búsqueda, estilo
   YouTube: ícono chico a la derecha del input + modal a pantalla completa
   mientras escucha.
   ============================================================ */
.wshop-voice{ flex-shrink:0; width:30px; height:30px; border:0; border-radius:10px;
  background:var(--surface-2); color:var(--ink-soft); display:grid; place-items:center;
  cursor:pointer; transition:.15s; padding:0; }
.wshop-voice:hover{ background:var(--ring); color:var(--accent-ink); }
.wshop-voice[hidden]{ display:none; }
.wshop-voice svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wshop-voice.is-live{ background:var(--sale); color:var(--on-sale); }

.wvoice-modal{ position:fixed; inset:0; z-index:9980; display:flex; align-items:center; justify-content:center; padding:20px; }
.wvoice-modal[hidden]{ display:none; }
.wvoice-backdrop{ position:absolute; inset:0; background:rgba(10,22,40,.55); backdrop-filter:blur(2px); }
.wvoice-card{ position:relative; width:100%; max-width:340px; background:var(--surface); border-radius:22px;
  padding:32px 24px 26px; text-align:center; box-shadow:0 24px 60px rgba(10,22,40,.35); }
.wvoice-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:10px;
  background:var(--surface-2); color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; }
.wvoice-close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.wvoice-mic-wrap{ position:relative; width:88px; height:88px; margin:6px auto 20px; display:grid; place-items:center; }
.wvoice-pulse{ position:absolute; inset:0; border-radius:50%; background:var(--ring); animation:wvoicePulse 1.6s ease-out infinite; }
.wvoice-pulse.d2{ animation-delay:.5s; }
.wvoice-mic{ position:relative; width:64px; height:64px; border-radius:50%; background:var(--brand); color:var(--on-brand);
  display:grid; place-items:center; box-shadow:0 10px 24px rgba(10,22,40,.22); }
.wvoice-mic svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wvoice-modal.err .wvoice-mic{ background:var(--danger); }
.wvoice-modal.err .wvoice-pulse{ display:none; }
.wvoice-status{ font:800 16px var(--display); color:var(--ink); margin:0 0 4px; }
.wvoice-hint{ font:600 13.5px var(--body); color:var(--ink-soft); margin:0; }
.wvoice-retry{ margin-top:16px; }
@keyframes wvoicePulse{
  0%{ transform:scale(.7); opacity:.55; }
  100%{ transform:scale(1.55); opacity:0; }
}

/* Chips de categoría (scroll horizontal) */
.wshop-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.wshop-chips::-webkit-scrollbar{ display:none; }
/* 1.0.173 — Deiby, con foto real del celular: los 4 chips de categoría se
   ven con esquinas más cuadradas que redondeadas (en especial los 2 que
   aparecen al desplegar el "+N"). El CSS de este archivo YA pide el
   máximo posible (border-radius:999px = una píldora perfecta, redondeada
   según el alto real, no importa qué tan largo sea el texto) — probado
   en un navegador real con este mismo código y se ve como píldora. La
   sospecha, ya que no se puede probar en el sitio en vivo desde acá: el
   sitio carga bastante CSS de Elementor/WooCommerce (kits globales,
   estilos de botón por defecto) que puede estar aplicando su PROPIO
   border-radius a estos mismos <a> con más especificidad o más abajo en
   el orden de carga. Fix defensivo: !important, para que gane siempre
   pase lo que pase con esos otros estilos. */
.wchip{ flex:0 0 auto; cursor:pointer; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); font:700 13px var(--display); padding:8px 14px; border-radius:999px!important;
  display:inline-flex; align-items:center; gap:6px; transition:.14s; white-space:nowrap; }
.wchip .n{ font-size:11px; color:var(--muted); font-weight:700; }
.wchip:hover{ border-color:var(--brand); color:var(--ink); }
.wchip.on{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.wchip.on .n{ color:var(--on-brand); opacity:.85; }

/* Grilla de tarjetas */
.wshop-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.wcardp{ display:flex; flex-direction:column; background:var(--surface); border:1px solid rgba(15,23,42,.10);
  border-radius:18px; overflow:hidden; box-shadow:0 8px 20px rgba(10,22,40,.08); transition:.16s; }
.wcardp:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,22,40,.12); }
.wcardp-img{ display:block; position:relative; aspect-ratio:4/3; background:var(--surface-2); overflow:hidden; }
/* 1.0.107 — Badge de descuento en la tarjeta. z-index 5: el shimmer del is-loading
   vive en z1 y la imagen cargada en z2 — con z2 el badge quedaba TAPADO por la foto
   (bug real en producción 2026-07-17). Color semántico de oferta, no de marca. */
.wcardp-off{ position:absolute; top:8px; left:8px; z-index:5; background:var(--sale); color:var(--on-sale); font:800 11.5px var(--display); padding:4px 9px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.18); letter-spacing:.2px; }
/* 1.0.108 — El MISMO globito sobre la imagen grande de la ficha (pedido de Deiby).
   .wfi-img solo es position:relative en is-loading: se fija siempre para anclar el badge. */
.wfi-img{ position:relative; }
.wfi-img-off{ top:12px; left:12px; font-size:13px; padding:6px 12px; border-radius:10px; }
/* Ancla: regular tachado EN LA MISMA LÍNEA del precio, subordinado (anchoring). */
.wcardp-price .row{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.wcardp-was{ font:700 12.5px var(--body); color:var(--muted); text-decoration:line-through; }
.wcardp-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.wcardp-img .ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--muted); }
.wcardp-img .ph svg{ width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.3; }
.wcardp-body{ display:flex; flex-direction:column; gap:9px; padding:12px 13px 13px; flex:1; }
.wcardp-name{ font:600 14px/1.32 var(--body); color:var(--ink); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.wcardp-name:hover{ color:var(--accent-ink); }
.wcardp-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.wcardp-price{ display:flex; flex-direction:column; line-height:1.05; font:800 17px var(--display); color:var(--ink); }
.wcardp-price small{ font:600 10.5px var(--body); color:var(--muted); margin-top:3px; }
.wcardp-add{ flex-shrink:0; width:40px; height:40px; border:0; cursor:pointer; border-radius:13px;
  background:var(--brand); color:var(--on-brand); display:grid; place-items:center; transition:.15s;
  box-shadow:0 4px 12px color-mix(in srgb, var(--brand) 40%, transparent); }
.wcardp-add:hover{ transform:translateY(-1px) scale(1.04); }
.wcardp-add:active{ transform:scale(.94); }
.wcardp-add svg{ width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; grid-area:1/1; }
.wcardp-add .i-check{ opacity:0; transform:scale(.5); transition:.18s; }
.wcardp-add .i-plus{ transition:.18s; }
.wcardp-add.done{ background:var(--ok, #1faa6b); }
.wcardp-add.done .i-plus{ opacity:0; transform:scale(.5); }
.wcardp-add.done .i-check{ opacity:1; transform:scale(1); }
.wcardp-add.loading{ pointer-events:none; opacity:.65; }

.wshop-noresults{ text-align:center; color:var(--muted); font-weight:600; padding:40px 16px; }

/* Toast */
.wshop-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; font:700 13.5px var(--display); padding:11px 18px; border-radius:13px;
  box-shadow:0 12px 34px rgba(10,22,40,.30); z-index:9999; opacity:0; pointer-events:none; transition:.22s;
  display:flex; align-items:center; gap:9px; max-width:90vw; }
.wshop-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.wshop-toast.err{ background:#b23b3b; }
.wshop-toast svg{ width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; }

@media (min-width:560px){ .wshop-grid2{ grid-template-columns:repeat(3,1fr); gap:15px; } }
@media (min-width:860px){ .wshop-grid2{ grid-template-columns:repeat(4,1fr); } .wcardp-img{ aspect-ratio:1/1; } }

/* ============================================================
   LOGIN biométrico (Secure Passkeys) — identidad Wolk
   ============================================================ */
.wolk-passkey{ margin-top:4px; }
.wolk-passkey .wolk-passkey-btn,
.wolk-passkey button,
.wolk-passkey input[type=submit]{
  display:flex !important; align-items:center; justify-content:center; gap:10px;
  width:100% !important; height:48px; padding:0 20px !important;
  border:0 !important; border-radius:13px !important; cursor:pointer;
  background:linear-gradient(135deg,var(--btn),var(--btn-2)) !important;
  color:var(--on-btn) !important; font:800 14.5px var(--display) !important; transition:.15s; }
.wolk-passkey .wolk-passkey-btn:hover,
.wolk-passkey button:hover{ transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 40%, transparent); }
.wolk-passkey > div,
.wolk-passkey .secure-passkeys-form{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }

/* ============================================================
   FICHA DE PRODUCTO WooCommerce — app-like (no "woocommerce pelón")
   ============================================================ */
.single-product .wolk-shell{ --maxw:1040px; }
.woocommerce-breadcrumb{ font-size:12.5px; color:var(--muted); margin:0 0 16px; }
.woocommerce-breadcrumb a{ color:var(--accent-ink); text-decoration:none; }

/* Layout: galería + resumen lado a lado en desktop */
.single-product div.product{ display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; }
.single-product div.product > .woocommerce-product-gallery{ float:none; width:auto; margin:0; flex:1 1 320px; }
.single-product div.product > .summary{ float:none; width:auto; margin:0; flex:1 1 340px; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells{ flex:1 1 100%; width:100%; }

/* Galería redondeada dentro de tarjeta */
.single-product .woocommerce-product-gallery{ position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:14px; box-shadow:0 8px 24px rgba(10,22,40,.06); }
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery img{ border-radius:14px !important; }
.single-product .woocommerce-product-gallery__trigger{ top:22px; right:22px; }

/* Resumen */
.single-product .product_title{ font:800 30px/1.15 var(--display); letter-spacing:-.02em; color:var(--ink); margin:0 0 8px; }
.single-product .summary .price{ color:var(--accent-ink); font:800 26px var(--display); margin:0 0 12px; }
.single-product .summary .price del{ color:var(--muted); font-weight:600; font-size:.62em; margin-right:6px; }
.single-product .summary .price ins{ text-decoration:none; }
.woocommerce-product-details__short-description{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin-bottom:14px; }
.single-product .stock.in-stock{ font:700 13px var(--body); color:var(--ok,#1faa6b); margin-bottom:10px; }
.single-product .stock.out-of-stock{ color:#b23b3b; }

/* Cantidad + agregar */
.single-product form.cart{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 16px; }
.single-product .quantity .qty{ width:74px; height:48px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2); text-align:center; font:700 15px var(--body); color:var(--ink); }
.single-product .single_add_to_cart_button{ height:48px; border-radius:13px !important; padding:0 24px !important; font-weight:800 !important; }

.single-product .product_meta{ font-size:12.5px; color:var(--muted); margin-top:10px; border-top:1px solid var(--line); padding-top:12px; }
.single-product .product_meta a{ color:var(--accent-ink); text-decoration:none; }
.single-product .product_meta > span{ display:block; margin-bottom:4px; }

/* Badge oferta */
.woocommerce span.onsale{ position:absolute; top:12px; left:auto; right:12px; min-height:0; min-width:0; line-height:1.4;
  background:var(--brand); color:var(--on-brand); border-radius:999px; padding:4px 12px; font:800 11px var(--display); margin:0; }

/* Tabs (Descripción / Valoraciones) */
.woocommerce-tabs ul.tabs{ list-style:none; display:flex; gap:8px; margin:0 0 14px; padding:0; }
.woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce-tabs ul.tabs li{ background:var(--surface); border:1px solid var(--line) !important; border-radius:999px !important; margin:0; padding:0; }
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{ display:none !important; }
.woocommerce-tabs ul.tabs li a{ padding:8px 16px; font:700 13px var(--display); color:var(--ink-soft); }
.woocommerce-tabs ul.tabs li.active{ background:var(--brand); border-color:var(--brand) !important; }
.woocommerce-tabs ul.tabs li.active a{ color:var(--on-brand); }
.woocommerce-tabs .panel{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px;
  color:var(--ink-soft); font-size:14.5px; line-height:1.7; }
.woocommerce-tabs .panel h2{ font:800 19px var(--display); color:var(--ink); margin:0 0 10px; }

/* Productos relacionados / upsells como tarjetas */
.related > h2, .upsells > h2{ font:800 20px var(--display); color:var(--ink); margin:26px 0 14px; }
.woocommerce ul.products{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.woocommerce ul.products::before, .woocommerce ul.products::after{ display:none; }
.woocommerce ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; padding:0 0 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 6px 18px rgba(10,22,40,.06); transition:.16s; display:flex; flex-direction:column; }
.woocommerce ul.products li.product:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,22,40,.12); }
.woocommerce ul.products li.product a img{ margin:0 0 8px; border-radius:0; width:100%; aspect-ratio:4/3; object-fit:cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font:600 13.5px/1.32 var(--body); color:var(--ink); padding:0 12px; margin:0; }
.woocommerce ul.products li.product .price{ display:block; padding:6px 12px 0; color:var(--accent-ink); font:800 15px var(--display); }
.woocommerce ul.products li.product .price del{ color:var(--muted); font-size:.78em; margin-right:4px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .button{ margin:10px 12px 0; border-radius:11px !important; height:40px; }

@media (min-width:760px){
  .woocommerce ul.products{ grid-template-columns:repeat(4,1fr); gap:15px; }
}

/* ============================================================
   TIENDA en SECCIONES por categoría (barra+chips pegajosos)
   ============================================================ */
.wshop-stick{ position:sticky; top:var(--wolk-top-h,64px); z-index:20; background:var(--bg-1); padding-top:6px; }
.wshop-stick .wshop-bar{ position:static; background:none; padding:0 0 10px; margin:0; }
.wshop-stick .wshop-chips{ padding:0 0 12px; margin:0; }
a.wchip{ text-decoration:none; }

/* 1.0.153 — "+N" de categorías en mobile (en vez de scroll horizontal
   oculto). Desktop: sin cambios, todas las categorías entran en la fila
   como siempre y el botón se queda oculto (lo controla el JS). */
.wshop-chips-wrap{ position:relative; }
@media (max-width:600px){
  .wshop-chips{ flex-wrap:nowrap; overflow:hidden; padding-right:46px; }
  .wshop-chips.is-open{ flex-wrap:wrap; overflow:visible; padding-right:0; }
  .wshop-chips-more{ position:absolute; right:0; top:1px; display:flex; align-items:center; gap:4px;
    height:34px; padding:0 11px; border-radius:999px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink-soft); font:800 12px var(--display); cursor:pointer;
    box-shadow:0 4px 12px rgba(10,22,40,.08); }
  .wshop-chips-more[hidden]{ display:none; }
  .wshop-chips-more svg{ width:14px; height:14px; transition:transform .18s; }
  .wshop-chips-more.is-open svg{ transform:rotate(180deg); }
  /* Al abrirse, el botón sale de la fila recortada y pasa a vivir DEBAJO del
     grid ya desplegado en filas — mismo patrón del ejemplo (Word/Canva):
     categorías visibles + "+N" que abre filas hacia abajo. Deiby pidió que
     quede del MISMO lado (derecho) tanto abierto como cerrado — con
     `position:static` solo, el botón caía al margen IZQUIERDO (default de
     un bloque); `float:right` lo mantiene pegado a la derecha en los 2
     estados, y el mismo botón sirve para abrir Y para cerrar/ocultar. */
  .wshop-chips.is-open + .wshop-chips-more{ position:static; float:right; margin:8px 0 4px; }
  .wshop-chips-wrap::after{ content:""; display:table; clear:both; }
}

.wshop-sec{ scroll-margin-top:132px; }
.wshop-sec + .wshop-sec{ margin-top:8px; }
.wshop-sec-title{ display:flex; align-items:center; gap:8px; margin:8px 0 12px;
  font:800 18px var(--display); letter-spacing:-.01em; color:var(--ink); }
.wshop-sec-title .n{ font:700 12px var(--display); color:var(--muted); }

/* ============================================================
   MÓVIL: safe-area (notch) + compactaciones
   ============================================================ */
/* La barra de idioma quedaba bajo la barra de estado del iPhone → intocable.
   Empujamos con el safe-area y le subimos el z-index para que sea tappable. */
.wolk-top{ padding-top:calc(16px + env(safe-area-inset-top, 0px)); position:relative; z-index:5; }
.wolk-lang{ position:relative; z-index:6; }
.wolk-lang button{ min-width:42px; min-height:34px; }

/* Tarjetas de tienda más compactas en móvil */
@media (max-width:560px){
  .wcardp-img{ aspect-ratio:1/1; }
  .wcardp-body{ padding:10px 11px 11px; gap:7px; }
  .wcardp-name{ font-size:13px; min-height:2.4em; }
  .wcardp-price{ font-size:15.5px; }
  .wcardp-add{ width:36px; height:36px; }
  .wcardp-add svg{ width:18px; height:18px; }
  .wshop-sec-title{ font-size:16px; }
}

/* Ficha de producto: galería contenida (no a pantalla completa) en móvil */
@media (max-width:760px){
  .single-product div.product{ gap:18px; }
  .single-product .woocommerce-product-gallery{ max-width:380px; margin-left:auto; margin-right:auto; }
  .single-product .product_title{ font-size:24px; }
  .single-product .summary .price{ font-size:24px; }
}

/* ============================================================
   Refinamiento de chips (contador tipo badge, más compacto en móvil)
   ============================================================ */
.wchip .n{ background:rgba(15,23,42,.07); border-radius:999px; padding:1px 7px; font-size:11px; color:var(--ink-soft); }
.wchip.on .n{ background:rgba(255,255,255,.22); color:var(--on-brand); }
@media (max-width:560px){
  .wchip{ font-size:12px; padding:7px 12px; }
  .wchip .n{ font-size:10.5px; padding:1px 6px; }
}

/* Texto de ayuda dentro de una tarjeta de sección (ej. Acceso rápido / passkey) */
.wsec-help{ margin:0 0 12px; font-size:13px; line-height:1.5; color:var(--ink-soft); }

/* ============================================================
   Hint amable bajo el botón de passkey en el login
   ============================================================ */
.wolk-passkey-hint{
  margin:10px 2px 0; font-size:12.5px; line-height:1.5; color:var(--ink-soft);
  background:var(--surface-2,rgba(15,23,42,.04)); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px;
}
.wolk-passkey-hint.is-failed{
  color:#7c2d12; background:#fff7ed; border-color:#fed7aa; font-weight:600;
}

/* ============================================================
   WooCommerce BLOCKS (carrito / checkout) — marca Wolk
   El carrito usa bloques Gutenberg (no plantillas clásicas), por eso
   necesitan reglas propias. Se fuerza la marca sobre el morado por defecto.
   ============================================================ */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{color:var(--ink)}
/* títulos ("Cart", "Checkout", totales) a la tipografía/collor de la marca */
.wp-block-woocommerce-cart h1,.wp-block-woocommerce-checkout h1,
.wc-block-cart__totals-title,.wc-block-components-title{
  font-family:var(--display)!important;color:var(--ink)!important;font-weight:800!important;letter-spacing:-.01em}
/* botones de acción (Finalizar compra / Realizar pedido / Proceder) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained,
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button{
  background:var(--brand)!important;color:var(--on-brand)!important;border:0!important;
  border-radius:14px!important;font:800 15px var(--body)!important;padding:15px 22px!important;
  box-shadow:0 10px 24px var(--ring)!important;transition:.15s!important}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover{filter:brightness(1.05);transform:translateY(-1px)}
/* enlaces / acentos dentro del carrito */
.wp-block-woocommerce-cart a,.wp-block-woocommerce-checkout a{color:var(--accent-ink)}
/* tarjeta de totales y filas */
.wc-block-components-totals-item__value,.wc-block-cart-item__total-price-and-sale-badge-wrapper{color:var(--ink);font-weight:700}
.wc-block-components-product-name{color:var(--ink)!important;font-weight:700}
/* inputs del checkout: mismo estilo que el resto del portal */
.wc-block-components-text-input input,.wc-block-components-country-input select,.wc-block-components-address-form input{
  border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface-2)!important;color:var(--ink)!important}

/* ============================================================
   ANTI-MORADO — forzar la marca Wolk en TODO botón de WooCommerce
   El morado viene del preset de botón de theme.json (.wp-element-button)
   y de los bloques de WC; por especificidad/caché le ganaba al teal.
   Se fuerza con !important y cubriendo los 3 orígenes.
   ============================================================ */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.wfi-cart .single_add_to_cart_button,
.single-product .single_add_to_cart_button,
.wp-block-woocommerce-cart .wp-element-button,
.wp-block-woocommerce-checkout .wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button{
  background:linear-gradient(135deg,var(--btn),var(--btn-2))!important;
  background-color:var(--brand)!important;
  color:var(--on-brand)!important;border-color:transparent!important;border-radius:14px!important}
/* títulos, enlaces y precios del carrito/checkout que salían morados */
.wp-block-woocommerce-cart :is(h1,h2,h3,a,.wc-block-components-product-name),
.wp-block-woocommerce-checkout :is(h1,h2,h3,a),
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount{color:var(--ink)!important}

/* ============================================================
   CARRITO WOLK — mobile-first (override de plantillas WooCommerce)
   Una columna, tarjetas por producto, resumen limpio, CTA grande.
   ============================================================ */
.wcart{display:flex;flex-direction:column;gap:18px}
.wcart-form{margin:0}
.wcart-items{display:flex;flex-direction:column;gap:12px}

/* tarjeta de producto */
.wcart-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;
  padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:opacity .15s ease}
/* 1.0.148: feedback mientras la cantidad se está actualizando por AJAX (ver wolk-portal.js) */
.wcart-item.is-updating{opacity:.55;pointer-events:none}
.wcart-thumb img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--surface-2)}
.wcart-mid{min-width:0;display:flex;flex-direction:column;gap:6px}
.wcart-name{font-weight:700;color:var(--ink);text-decoration:none;line-height:1.25;font-size:15px}
.wcart-name:hover{color:var(--brand)}
.wcart-unit{font-size:12.5px;color:var(--ink-soft)}
.wcart-each{color:var(--muted)}
.wcart-linesub{font-weight:800;color:var(--ink);white-space:nowrap;font-size:15px}

/* fila de cantidad + quitar */
.wcart-qtyrow{display:flex;align-items:center;gap:10px;margin-top:2px}
.wcart-qtyrow .quantity{margin:0}
.wcart-qtyrow input.qty{width:64px;height:40px;text-align:center;border:1px solid var(--line);
  border-radius:12px;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:15px;-moz-appearance:textfield}
.wcart-qtyrow input.qty::-webkit-outer-spin-button,.wcart-qtyrow input.qty::-webkit-inner-spin-button{opacity:1}
.wcart-remove{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--muted);
  border:1px solid transparent;transition:.15s}
.wcart-remove:hover{color:#ef4444;background:#fef2f2;border-color:#fecaca}
.wcart-remove svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* cupón */
.wcart-coupon{display:flex;gap:8px;margin-top:2px}
.wcart-coupon-input{flex:1;min-width:0;height:46px;border:1px solid var(--line);border-radius:12px;
  padding:0 14px;background:var(--surface-2);color:var(--ink);font-size:14px}
.wcart-coupon-btn{flex:0 0 auto;height:46px;padding:0 18px;border:0;border-radius:12px;cursor:pointer;
  background:var(--surface-2);color:var(--ink);font-weight:700;border:1px solid var(--line)}
.wcart-coupon-btn:hover{background:var(--surface)}

/* actualizar (discreto) */
.wcart-actions{display:flex;justify-content:flex-end}
.wcart-update{background:none;border:0;color:var(--ink-soft);font-weight:600;font-size:13px;cursor:pointer;
  padding:6px 4px;text-decoration:underline;text-underline-offset:3px}
.wcart-update:hover{color:var(--ink)}

/* resumen + CTA */
.wcart-summary{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:18px;
  display:flex;flex-direction:column;gap:12px}
.wcart-sumhead{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.01em}
.wcart-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--ink-soft)}
.wcart-row .wcart-val{color:var(--ink);font-weight:700}
.wcart-total{border-top:1px solid var(--line);padding-top:12px;margin-top:2px;font-size:16px;color:var(--ink)}
.wcart-total span{font-weight:800}
.wcart-total .wcart-val{font-size:18px}
.wcart-checkout{display:block;text-align:center;margin-top:6px;padding:15px 20px;border-radius:13px;
  background:linear-gradient(135deg,var(--btn),var(--btn-2));color:var(--on-btn);font:800 16px var(--body);
  text-decoration:none;box-shadow:0 10px 24px var(--brand-shadow,rgba(19,181,166,.35));transition:.15s}
.wcart-checkout:hover{transform:translateY(-2px);box-shadow:0 16px 32px var(--brand-shadow,rgba(19,181,166,.45));color:var(--on-brand)}

/* vacío */
.wcart-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 10px;text-align:center}
.wcart-empty-ico{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.wcart-empty-ico svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wcart-empty-msg{color:var(--ink-soft);font-size:15px;font-weight:500;margin:0}
.wcart-empty .wcart-checkout{width:100%;max-width:280px}

/* desktop: dos columnas (items | resumen sticky) */
@media (min-width:820px){
  /* FIX: el shell seguía en 460px en carrito/checkout; el grid 1fr+340px no cabía,
     aplastaba los items (nombre montado sobre el precio) y desbordaba a la derecha. */
  body.woocommerce-cart .wolk-shell,
  body.woocommerce-checkout .wolk-shell{--maxw:920px}
  .wcart{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
  .wcart-form{grid-column:1}
  .wcart-collaterals{grid-column:2;position:sticky;top:16px}
}

/* Barra de carrito flotante eliminada: la tab bar inferior (con globito) la reemplaza. */


/* ===== Botones del form fiscal (markup del plugin, brandeados por el tema) =====
   El "Guardar" azul y hermanos, dentro de los wrappers del tema (checkout y
   portal), pasan al estándar Wolk. !important: gana a estilos inline/Tailwind. */
.wolk-checkout-fiscal button,.wolk-checkout-fiscal input[type=submit],.wolk-checkout-fiscal .button,
#sec-datos button,#sec-datos input[type=submit],#sec-datos .button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0!important;cursor:pointer;
  font-family:var(--display)!important;font-weight:700!important;font-size:15px!important;color:var(--on-btn)!important;
  background:linear-gradient(135deg,var(--btn),var(--btn-2))!important;
  width:100%!important;min-height:48px;padding:15px!important;
  border-radius:13px!important;box-shadow:0 10px 22px var(--ring)!important;transition:.15s}
.wolk-checkout-fiscal button:hover,#sec-datos button:hover{filter:brightness(1.04);transform:translateY(-1px)}
/* selects/inputs de teléfono etc. del wizard NO son botones: intactos. */

/* ===== Checkout fiscal (perfil de propuestas embebido) ===== */
.wolk-checkout-fiscal{margin:0 0 22px}
.wolk-iva-note-row td{padding-top:8px!important;border:0!important}
.wolk-iva-note{display:block;font-size:12px;color:var(--ink-soft);line-height:1.4}

/* ===== Globito de cuenta automática (checkout de invitados) ===== */
.wolk-guest-note{display:flex;gap:12px;align-items:flex-start;margin:14px 0 6px;padding:14px 16px;
  border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:14px;background:var(--surface-2)}
.wolk-guest-note .ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--ring);color:var(--accent-ink)}
.wolk-guest-note .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wolk-guest-note .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.wolk-guest-note .tx b{font-size:13.5px;color:var(--ink);font-weight:800;line-height:1.3}
.wolk-guest-note .tx small{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.wolk-fiscal-legend{margin:0 0 16px}
/* Aviso: ya existe una cuenta con este correo (validación en vivo del checkout) */
.wolk-email-exists{display:flex;flex-direction:column;gap:3px;margin:10px 0 4px;padding:12px 16px;
  border:1px solid var(--gold);border-left:4px solid var(--gold);border-radius:14px;background:var(--gold-soft)}
.wolk-email-exists b{font-size:13.5px;color:var(--gold);font-weight:800;line-height:1.3}
.wolk-email-exists span{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.wolk-email-exists a{color:var(--gold);font-weight:800;text-decoration:underline;text-underline-offset:2px}

/* Checklist vivo de contraseña (checkout) — estilo limpio, sin medidor */
.wolk-pwreq{list-style:none;margin:10px 0 4px;padding:0;display:flex;flex-direction:column;gap:8px}
.wolk-pwreq li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);transition:color .15s}
.wolk-pwreq .ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);background:var(--surface-2);color:transparent;transition:.15s}
.wolk-pwreq .ic svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wolk-pwreq li.ok{color:var(--ink)}
.wolk-pwreq li.ok .ic{background:var(--ok-soft);border-color:transparent;color:var(--ok)}

/* ===== Caja de AUTH inteligente del checkout (email-first) ===== */
.wolk-auth-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 18px;margin:0 0 22px;
  box-shadow:0 6px 20px rgba(10,22,40,.06)}
.wolk-auth-box h3{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.wolk-auth-sub{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 14px}
.wolk-auth-box label{display:block;font:700 12px var(--body);color:var(--ink-soft);margin:12px 0 6px}
.wolk-auth-box input[type=email],.wolk-auth-box input[type=password]{width:100%;background:var(--surface-2);
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:500 14.5px var(--body);color:var(--ink);
  outline:0;min-height:46px;box-sizing:border-box}
.wolk-auth-box input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
/* Ojito de contraseña (login y registro del auth box) */
.wolk-auth-field{position:relative}
.wolk-auth-field input{padding-right:46px!important}
.wolk-auth-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:grid;place-items:center;border:0;background:none;cursor:pointer;color:var(--muted);border-radius:10px;transition:.15s}
.wolk-auth-eye:hover{color:var(--ink);background:var(--surface-2)}
.wolk-auth-eye.on{color:var(--accent-ink)}
.wolk-auth-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wolk-auth-box .wbtn-block{margin-top:14px}
.wolk-auth-msg{margin:12px 0 0;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.45}
.wolk-auth-msg.info{background:var(--ring);color:var(--accent-ink)}
.wolk-auth-msg.warn{background:var(--gold-soft);color:var(--gold)}
.wolk-auth-forgot{display:block;width:100%;text-align:center;margin-top:12px;font-size:13px;font-weight:700;color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:2px;background:none;border:0;cursor:pointer;padding:6px 0;font-family:var(--body)}
.wolk-auth-forgot:disabled{color:var(--muted);cursor:default;text-decoration:none}
.wolk-auth-box .wbtn.loading{opacity:.65;pointer-events:none}

/* La facturación de WC queda vacía SIEMPRE (el correo vive en el perfil fiscal /
   auth box y la orden lo recibe server-side): fuera el título huérfano para todos. */
body.woocommerce-checkout .woocommerce-billing-fields{display:none}
body.wolk-guest-wizard .woocommerce-account-fields{display:none}
.wolk-guest-paynote{margin:0 0 14px;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:12px;background:var(--surface-2);font-size:13px;line-height:1.5;color:var(--ink-soft);font-weight:600}
/* Botón volver al portal (Mi cuenta) — mismas métricas del estándar .wbtn-block */
.wolk-account-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:14px;padding:15px;
  border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);
  font:700 15px var(--body);text-decoration:none;transition:.15s}
.wolk-account-back:hover{background:var(--surface-2);color:var(--ink)}
.wolk-account-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Restos del medidor de WC (por si el script llega cacheado): fuera. */
.woocommerce-checkout .woocommerce-password-strength,
.woocommerce-checkout .woocommerce-password-hint{display:none!important}

/* Variante leyenda fiscal (checkout logueado): mismo globito, acento distinto. */
.wolk-fiscal-legend{margin:0 0 14px;border-left-color:var(--gold)}
.wolk-fiscal-legend .ic{background:var(--gold-soft);color:var(--gold)}

/* ============================================================
   TAB BAR INFERIOR (estilo app) — Tienda · Carrito · Perfil
   ============================================================ */
.wolk-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;align-items:stretch;justify-content:space-around;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -8px 26px rgba(10,22,40,.07)}
.wolk-bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 4px 8px;text-decoration:none;color:var(--muted);font:600 11px var(--body);
  transition:color .15s ease}
.wolk-bnav-item:hover{color:var(--ink-soft)}
.wolk-bnav-item.on{color:var(--brand)}
.wolk-bnav-ico{position:relative;display:grid;place-items:center;width:26px;height:26px}
.wolk-bnav-ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wolk-bnav-item.on .wolk-bnav-ico::after{content:"";position:absolute;bottom:-7px;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.wolk-bnav-badge{position:absolute;top:-6px;right:-9px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;background:#ef4444;color:#fff;
  font:800 10px var(--display);border:2px solid var(--surface)}
/* reservar espacio para que la nav no tape el contenido */
body.wolk-has-bottomnav .wolk-shell{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
/* la barra de carrito flota ARRIBA de la tab bar */
/* la barra de carrito flotante fue eliminada (la reemplaza la tab bar) */
/* en desktop la app se centra; la tab bar se limita al ancho del shell y se centra */
@media (min-width:768px){
  .wolk-bottomnav{left:50%;right:auto;transform:translateX(-50%);width:min(100vw,var(--maxw));
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    border-top-left-radius:18px;border-top-right-radius:18px}
}

/* pop del flotante eliminado junto con la barra */


/* ============================================================
   SKELETONS de imagen (shimmer mientras cargan) — catálogo + ficha
   ============================================================ */
:root{--shimmer:rgba(255,255,255,.55)}
[data-theme="dark"]{--shimmer:rgba(255,255,255,.06)}
/* shimmer detrás de la imagen hasta que carga */
.wcardp-img.is-loading,.wfi-img.is-loading{position:relative;overflow:hidden;background:var(--surface-2)}
.wcardp-img.is-loading::before,.wfi-img.is-loading::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,transparent 20%,var(--shimmer) 50%,transparent 80%);
  background-size:200% 100%;animation:wolk-shimmer 1.25s ease-in-out infinite}
.wcardp-img.is-done::before,.wfi-img.is-done::before{content:none;animation:none}
@keyframes wolk-shimmer{0%{background-position:180% 0}100%{background-position:-180% 0}}
/* fade-in de la imagen al cargar */
.wcardp-img-el{opacity:0;transition:opacity .35s ease;position:relative;z-index:2}
.wcardp-img-el.is-loaded{opacity:1}
.wfi-img.is-loading img{opacity:0;transition:opacity .4s ease;position:relative;z-index:2}
.wfi-img img.is-loaded{opacity:1}
/* respeta usuarios con "reduce motion" */
@media (prefers-reduced-motion:reduce){
  .wcardp-img.is-loading::before,.wfi-img.is-loading::before{animation:none}
  .wcardp-img-el,.wfi-img.is-loading img{transition:none;opacity:1}
}

/* ------------------------------------------------------------
   1.0.146 — Splash de marca (con logo) mientras carga
   [wolk_perfil_fiscal] (shortcode de OTRO plugin, wolk-propuestas):
   su propio JS (cliente-app.js) muestra, mientras hace su fetch,
   un spinner azul genérico centrado + "Cargando tu perfil..."
   (clases Tailwind fijas "text-center py-12" — ver cliente-app.js).
   CORRIGE el intento de 1.0.145: Deiby pidió explícitamente un
   splash TIPO APP MÓVIL con el logo/ícono del tema — no un
   skeleton de franjas grises simulando el formulario (lo que se
   hizo en 1.0.145, se reemplaza acá por completo). Mismo
   precedente que las tarjetas de WLP más arriba en este archivo
   (.wlp-*): el TEMA pisa por CSS el markup de OTRO plugin, SIN que
   wolk-propuestas necesite tocar nada.
   - Se oculta SOLO el anillo azul genérico (`.animate-spin`); el
     texto "Cargando tu perfil..." se deja VISIBLE tal cual lo
     escribe el plugin (no se duplica ni se inventa por CSS: sigue
     siendo el texto real, ya traducido/mantenido por
     wolk-propuestas), solo se re-tipografía para que combine.
   - El ícono de app real (`wolk_portal_app_icon_url()`, el mismo
     usado en el manifest/apple-touch-icon) se inyecta como
     variable CSS `--wolk-splash-logo` desde `template-portal.php`
     (inline, en el propio `#sec-datos`) porque es un dato dinámico
     de PHP (theme_mod o fallback) — no puede vivir en este archivo
     estático. Se dibuja como un ícono redondeado que "respira"
     (pulso de escala/opacidad), como la pantalla de arranque de
     una app.
   ------------------------------------------------------------ */
#sec-datos .text-center.py-12{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:48px 20px;min-height:280px;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-2));
  border-radius:16px;
}
/* SEGURIDAD: solo oculta visualmente el anillo de carga genérico ya escapado
   por el propio plugin (wolk-propuestas); no se borra ni se reemplaza ningún
   dato, el texto real de ese mismo bloque queda intacto y visible. */
#sec-datos .text-center.py-12 > .animate-spin{display:none!important}
#sec-datos .text-center.py-12 p{font:700 13px var(--body);color:var(--ink-soft);margin:0}
#sec-datos .text-center.py-12::before{
  content:"";order:-1; /* el ícono siempre queda ARRIBA del texto, sin depender del orden real del DOM */
  width:72px;height:72px;border-radius:22px;flex-shrink:0;
  background:var(--surface) var(--wolk-splash-logo, none) center/58% no-repeat;
  box-shadow:0 10px 26px color-mix(in srgb, var(--ink) 16%, transparent);
  animation:wolk-splash-pulse 1.4s ease-in-out infinite;
}
@keyframes wolk-splash-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.72}}
@media (prefers-reduced-motion:reduce){
  #sec-datos .text-center.py-12::before{animation:none}
}

/* ============================================================
   TRANSICIONES APP-SHELL (View Transitions API, cross-document)
   Fade + slide suave entre páginas. Degrada solo si el navegador no la soporta.
   ============================================================ */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: wolk-vt-out .16s ease both; }
::view-transition-new(root){ animation: wolk-vt-in .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wolk-vt-out{ to{ opacity:0 } }
@keyframes wolk-vt-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}

/* ============================================================
   PULL-TO-REFRESH (indicador estilo app)
   ============================================================ */
.wolk-ptr{position:fixed;top:-48px;left:50%;transform:translateX(-50%);z-index:70;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);box-shadow:0 8px 22px rgba(10,22,40,.20);opacity:0;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.wolk-ptr .wolk-ptr-spin{display:grid;place-items:center;transition:transform .2s ease}
.wolk-ptr svg{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:2.3;stroke-linecap:round}
.wolk-ptr.ready svg{stroke:var(--brand-2)}
.wolk-ptr.ready .wolk-ptr-spin{transform:rotate(180deg)}
.wolk-ptr.loading .wolk-ptr-spin{animation:wolk-ptr-rot .8s linear infinite}
@keyframes wolk-ptr-rot{to{transform:rotate(360deg)}}

/* ============================================================
   1.0.115 — PEDIDO RECIBIDO (thankyou). Woo crudo daba pena:
   morado serif, tabla apretada, cero jerarquía. Es la ÚLTIMA
   pantalla tras pagar: la que más debe sentirse premium.
   Todo scoped a .woocommerce-order-received / .woocommerce-order.
   ============================================================ */
.woocommerce-order{ color:var(--ink); }

/* Héroe de éxito: check + mensaje grande, en tarjeta de marca. */
.woocommerce-order .woocommerce-thankyou-order-received{
  display:flex; align-items:center; gap:14px;
  background:color-mix(in srgb, var(--brand) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius:18px; padding:18px 20px; margin:6px 0 18px;
  font:800 18px/1.35 var(--display); color:var(--ink);
}
.woocommerce-order .woocommerce-thankyou-order-received::before{
  content:'✓'; flex:0 0 40px; width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:var(--on-brand); font:800 20px/1 var(--display);
  box-shadow:0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Resumen del pedido (número/fecha/correo/total/método): tarjeta en grid. */
.woocommerce-order ul.order_details{
  list-style:none; margin:0 0 22px; padding:16px 18px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
}
.woocommerce-order ul.order_details li{
  border:0; margin:0; padding:0; float:none; font:600 11px var(--body);
  text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
}
.woocommerce-order ul.order_details li strong{
  display:block; margin-top:4px; text-transform:none; letter-spacing:0;
  font:800 15px var(--display); color:var(--ink); word-break:break-word;
  font-variant-numeric:tabular-nums;
}

/* Títulos de sección: fuera el morado serif, dentro la marca. */
.woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-order .woocommerce-customer-details h2,
.woocommerce-order .woocommerce-column__title{
  font:800 19px var(--display); color:var(--ink); margin:20px 0 10px;
}

/* Tabla del pedido: filas limpias, montos a la derecha con números tabulares. */
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-order table.shop_table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; margin:0 0 20px;
}
.woocommerce-order .shop_table th, .woocommerce-order .shop_table td{
  border:0; border-bottom:1px solid var(--line); padding:12px 14px;
  font:500 14px/1.45 var(--body); color:var(--ink); text-align:left; background:transparent;
}
.woocommerce-order .shop_table thead th{
  font:700 11px var(--body); text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); background:var(--surface-2);
}
.woocommerce-order .shop_table td.woocommerce-table__product-total,
.woocommerce-order .shop_table th + td,
.woocommerce-order .shop_table thead th:last-child{
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.woocommerce-order .shop_table td.woocommerce-table__product-name a{
  color:var(--accent-ink); font-weight:700; text-decoration:none;
}
.woocommerce-order .shop_table tfoot th{
  font:600 12.5px var(--body); color:var(--muted); background:transparent;
}
.woocommerce-order .shop_table tfoot td{ font-weight:800; }
/* 1.0.137 — BUG confirmado con captura (Deiby, 2026-07-27): el resaltado de
   "total final" (fondo con tinte de marca + negrita grande) usaba
   tfoot tr:last-child — pero WooCommerce solo agrega la fila de MÉTODO DE
   PAGO al tfoot cuando existe, y esa fila queda DESPUÉS de la de Total. El
   resultado: el resaltado le cae a "Método de pago", no al Total. Se
   reemplaza por una clase que el JS (wolkOrderTotalsFix) asigna a la fila
   correcta detectándola por su CONTENIDO ("Total:"), no por su posición. */
.woocommerce-order .shop_table tfoot tr.wolk-total-row th,
.woocommerce-order .shop_table tfoot tr.wolk-total-row td{
  border-bottom:0 !important; font:800 16px var(--display) !important; color:var(--ink) !important;
  background:color-mix(in srgb, var(--brand) 7%, transparent) !important;
}

/* 1.0.137 — BUG confirmado: "$100.00 USD" y "$113.00 USD" se parten en
   2 líneas ("$100.00" / "USD") porque 1.0.118 puso white-space:normal
   !important en TODAS las celdas (para que nombres de producto largos no
   desbordaran) — pero un monto corto NUNCA debería partirse. Se restaura
   nowrap SOLO donde vive el monto: `.woocommerce-Price-amount` es la
   clase estándar y estable de WooCommerce Core para el precio (a
   diferencia de `.woocommerce-order-overview__email`, esta clase se usa
   en todo WooCommerce hace años — alta confianza, no es un supuesto
   nuevo). No toca el nombre del producto ni el método de pago, que sí
   pueden partirse en 2 líneas de forma legible. */
.woocommerce-order .shop_table .woocommerce-Price-amount{
  white-space:nowrap !important;
}

/* Dirección de facturación: tarjeta suave, sin cursiva de address. */
.woocommerce-order .woocommerce-customer-details address{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; font:500 14px/1.6 var(--body); font-style:normal; color:var(--ink);
}

/* Instrucciones de transferencia (BACS), si el gateway las imprime. */
.woocommerce-order .woocommerce-bacs-bank-details{ margin:0 0 20px; }
.woocommerce-order .wc-bacs-bank-details-heading,
.woocommerce-order .wc-bacs-bank-details-account-name{
  font:800 15px var(--display); color:var(--ink);
}
.woocommerce-order ul.wc-bacs-bank-details{
  list-style:none; margin:8px 0 0; padding:14px 16px;
  background:var(--surface-2); border:1px dashed color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius:14px;
}
.woocommerce-order ul.wc-bacs-bank-details li{
  font:500 13.5px/1.7 var(--body); color:var(--ink);
}
.woocommerce-order ul.wc-bacs-bank-details li strong{ font-weight:800; }

/* Móvil: el resumen a 2 columnas cómodas y la tabla sin apretarse. */
@media (max-width:520px){
  .woocommerce-order ul.order_details{ grid-template-columns:1fr 1fr; }
  .woocommerce-order .shop_table th, .woocommerce-order .shop_table td{ padding:11px 12px; font-size:13.5px; }
}

/* ============================================================
   1.0.116 — Thankyou "como app": acordeones con icono por
   sección. El JS (wolk_portal_thankyou_app) envuelve las
   secciones de Woo en <details>; este CSS los viste. Sin JS,
   la página queda como 1.0.115.
   ============================================================ */
details.wthx-acc{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  margin:0 0 14px; overflow:hidden;
}
details.wthx-acc > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  font:800 15.5px var(--display); color:var(--ink);
  transition:background .15s ease;
}
details.wthx-acc > summary::-webkit-details-marker{ display:none; }
details.wthx-acc > summary:hover{ background:var(--surface-2); }
details.wthx-acc .wthx-ic{
  flex:0 0 34px; width:34px; height:34px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--brand) 13%, transparent);
}
details.wthx-acc .wthx-ic svg{
  width:17px; height:17px; stroke:var(--accent-ink); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
details.wthx-acc .wthx-tt{ flex:1; min-width:0; }
details.wthx-acc .wthx-chev{
  flex:0 0 20px; width:20px; height:20px; position:relative; transition:transform .2s ease;
}
details.wthx-acc .wthx-chev::before{
  content:''; position:absolute; left:5px; top:6px; width:8px; height:8px;
  border-right:2.2px solid var(--muted); border-bottom:2.2px solid var(--muted);
  transform:rotate(45deg);
}
details.wthx-acc[open] > summary .wthx-chev{ transform:rotate(180deg); }
/* Contenido: las tarjetas internas de 1.0.115 pierden su borde/margen (ya están
   dentro de la tarjeta del acordeón) y respiran con padding propio. */
details.wthx-acc > section,
details.wthx-acc > .woocommerce-bacs-bank-details{ padding:2px 14px 14px; }
.wthx-app .woocommerce-order details.wthx-acc table.shop_table,
.wthx-app .woocommerce-order details.wthx-acc .woocommerce-customer-details address,
.wthx-app .woocommerce-order details.wthx-acc ul.wc-bacs-bank-details{
  border:0; border-radius:12px; margin-bottom:0; background:var(--surface-2);
}
.wthx-app .woocommerce-order details.wthx-acc .shop_table thead th{ background:transparent; }
/* Animación sutil al abrir (app feel). */
details.wthx-acc[open] > *:not(summary){ animation:wthxIn .18s ease; }
@keyframes wthxIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ============================================================
   1.0.118 — Fixes del thankyou en móvil (bugs reales, capturas
   de Deiby en iPhone SE):
   1) nowrap en celdas de valor inflaba la tabla más allá de la
      tarjeta y el overflow:hidden del acordeón CORTABA los
      montos ("$" mocho).
   2) el grid auto-fit del resumen desparramaba los datos
      (correo partido en 3 renglones, número flotando).
   3) el morado del producto era el kit de Elementor ganando
      especificidad.
   ============================================================ */

/* 1) Tabla: NADA de nowrap (los montos cortos no se parten solos);
   columnas con aire y montos a la derecha sin desbordar. */
.woocommerce-order .shop_table th,
.woocommerce-order .shop_table td{ white-space:normal !important; }
.woocommerce-order .shop_table thead th:first-child{ width:58%; }
.woocommerce-order .shop_table td.woocommerce-table__product-total,
.woocommerce-order .shop_table tfoot td{
  text-align:right; font-variant-numeric:tabular-nums; word-break:normal;
}
.woocommerce-order .shop_table tfoot th{ text-align:left; }

/* 3) Producto en marca, no en el morado del kit de Elementor. */
.woocommerce-order .shop_table td.woocommerce-table__product-name,
.woocommerce-order .shop_table td.woocommerce-table__product-name a,
.woocommerce-order .shop_table td.product-name a{
  color:var(--accent-ink) !important; text-decoration:none !important; font-weight:700 !important;
}

/* 2) Resumen del pedido: estilo RECIBO DE APP en todos los anchos —
   etiqueta izquierda gris, valor derecha bold, una línea por dato.
   Adiós grid auto-fit: predecible en 375px y en desktop. */
.woocommerce-order ul.order_details{
  display:block; padding:4px 18px;
}
.woocommerce-order ul.order_details li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.woocommerce-order ul.order_details li:last-child{ border-bottom:0; }
.woocommerce-order ul.order_details li strong{
  display:inline; margin-top:0; text-align:right; max-width:62%;
  overflow-wrap:anywhere; /* el correo largo baja de línea DENTRO de su celda, sin romper el layout */
}

/* 1.0.134 — FIX real (Deiby lo reportó varias veces): el correo se ve
   "desajustado" al bajar de línea. Causa confirmada acá arriba: el valor
   tiene text-align:right, así que cuando el correo es largo y wrappea,
   la segunda línea (ej. "com" de "gmail.com") queda pegada al borde
   DERECHO, huérfana y descolgada del resto de la palabra — se ve como si
   el texto estuviera roto. text-align:right se ve bien en valores de UNA
   línea (pedido, fecha, total, método) pero rompe la lectura en el único
   valor que normalmente ocupa 2+ líneas: el correo. Se alinea a la
   izquierda SOLO ese campo, para que ambas líneas arranquen del mismo
   borde y se lea como un bloque, no como una palabra suelta.
   SUPUESTO: `.woocommerce-order-overview__email` es el nombre de clase
   estándar que WooCommerce Core pone en ese <li> (checkout/thankyou.php)
   — no se pudo confirmar contra el HTML real emitido en wolksoft.com.
   Si el nombre real fuera otro, esta regla simplemente no aplica (no
   rompe nada) y seguiría viéndose como antes. */
.woocommerce-order ul.order_details li.woocommerce-order-overview__email strong{
  text-align:left;
}

/* 1.0.135 — DEFINITIVO: Deiby confirmó con captura que el fix de 1.0.134
   arregló el correo (sus 2 líneas ya alinean entre sí) pero eso dejó
   a la vista que es el ÚNICO valor alineado a la izquierda — pedido,
   fecha, total y método de pago se ven centrados/con sangría en la
   misma tarjeta. La inconsistencia ES el problema visual ahora. Ya van
   varias rondas en esta sesión donde razonar la cascada de este CSS
   contra lo que realmente renderiza el sitio en vivo no coincide (mismo
   patrón que el bloque de confianza del checkout) — en vez de seguir
   esa ruta, se fuerza el resultado final con !important sobre TODOS los
   valores por igual, sin excepción: bloque, alineados a la izquierda,
   sin límite de ancho — igual que el correo, que es el que ya se ve
   bien. Esto gana sobre cualquier regla anterior en este archivo
   (1.0.115, 1.0.118) sin necesidad de saber cuál de ellas es la que
   está aplicando de verdad en el sitio. */
.woocommerce-order ul.order_details li strong{
  display:block !important;
  text-align:left !important;
  max-width:none !important;
  width:100% !important;
  margin:4px 0 0 !important;
  /* 1.0.136 — Deiby: "la letra un poquito más pequeña para que se vea más
     ordenado". Bajado de 15px (tamaño original de 1.0.115, pensado para un
     valor corto y centrado) a 13px, más acorde al look de recibo/lista
     compacta que ya tiene el resto de la tarjeta. */
  font-size:13px !important;
}

/* ============================================================
   1.0.119 — Checkout NORMAL: des-moradar el panel de pago de WLP,
   bloque de confianza, emojis en el stepper y "parpadeo guía".
   (QA de Deiby 2026-07-23 en Galaxy Z Fold. El checkout es
   territorio del TEMA: el panel del gateway es markup en nuestra
   página y se viste acá, con los tokens.)
   ============================================================ */

/* 2) Panel de pago del gateway: fuera el morado, dentro la marca. */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment div.payment_box{
  background:var(--surface-2) !important; color:var(--ink) !important;
  border-radius:14px; font-family:var(--body);
}
.woocommerce-checkout #payment ul.payment_methods{ border:0; }
.woocommerce-checkout #payment ul.payment_methods li{ border-color:var(--line); }
.woocommerce-checkout #payment div.payment_box::before{ display:none; } /* flechita nativa con color heredado */
.woocommerce-checkout #payment input[type=radio]{ accent-color:var(--brand); }
.woocommerce-checkout #payment label{ color:var(--ink); font-family:var(--body); }
/* Badge "Protegido con 3D Secure" y afines del gateway (clases wlp-*): a la marca. */
.woocommerce-checkout #payment [class*="wlp"][class*="badge"],
.woocommerce-checkout #payment [class*="wlp"][class*="secure"],
.woocommerce-checkout #payment .payment_box [class*="3d"]{
  background:color-mix(in srgb, var(--brand) 10%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--brand) 35%, transparent) !important;
  color:var(--accent-ink) !important; border-radius:12px;
}
/* Botón "Realizar el pedido": estándar del tema (48/13/gradiente de marca). */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order{
  background:linear-gradient(135deg,var(--btn),var(--btn-2)) !important;
  color:var(--on-btn) !important; border:0 !important; border-radius:13px !important;
  min-height:48px; padding:13px 18px; font:700 15px var(--body) !important;
  width:100%; box-shadow:none; cursor:pointer;
}
.woocommerce-checkout #place_order:hover{ filter:brightness(1.05); }
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-privacy-policy-text p{
  color:var(--muted); font:500 12.5px/1.55 var(--body);
}

/* 1) DEFENSIVO para los campos de tarjeta: nada del tema puede tapar los
   iframes de Stripe Elements ni robarles el click. (Si tras esto los campos
   siguen muertos Y no hay iframe de Stripe DENTRO de cada campo, el mount de
   Elements no corrió: eso es de WLP, no de CSS.) */
.woocommerce-checkout #payment .payment_box{ position:relative; }
.woocommerce-checkout #payment .payment_box iframe{
  position:relative; z-index:2; pointer-events:auto !important;
}
.woocommerce-checkout #payment .payment_box::after{ pointer-events:none; }

/* 3) Stepper con emoji (mismo twemoji del wizard de suscripciones). */
.wolk-steps .wolk-step-ico{ font-size:18px; line-height:1; display:block; }
.wolk-steps .wolk-step-ico img.emoji{ width:18px; height:18px; }

/* 5) "Parpadeo guía": pulsa MUY leve el paso SIGUIENTE al activo.
   Último paso activo → nadie pulsa (el JS no marca is-next). */
@keyframes wolkStepHint{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%    { opacity:1;  transform:scale(1.08); }
}
.wolk-steps .wolk-step.is-next .wolk-step-ico{
  animation:wolkStepHint 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .wolk-steps .wolk-step.is-next .wolk-step-ico{ animation:none; opacity:.85; }
}

/* 1.0.128 — FIX: el texto nativo de WooCommerce Blocks ("Your personal data
   will be used...", a veces sin traducir por el bug de REST_REQUEST en
   determine_locale — ver functions.php) quedaba pegado al botón "Realizar
   el pedido", sin separación visual. No se pudo confirmar la clase exacta
   de ese texto (falta inspect-element de esa zona puntual), así que se
   ataca desde el lado conocido: separación garantizada ANTES del botón,
   sin depender de qué hay arriba. Se deja fuera .wlp-subscribe-cta a
   propósito — esa página ya se ve bien, no hay que tocarla. */
.woocommerce-checkout #place_order,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button{
  margin-top:16px !important;
}

/* 4) Bloque de confianza del checkout (lo imprime functions.php).
   1.0.130 — FIX: Deiby reportó las marcas de tarjeta "pegadas" abajo en
   /checkout/ escritorio (captura 2026-07-25). Causa real, verificable en
   este mismo archivo: .wolk-trust-badges tenía margin:2px arriba, así que
   la fila SSL/3DS/Stripe y la fila de marcas (VISA/MC/AMEX/stripe) quedaban
   casi sin separación entre sí, y el bloque completo pegado justo debajo
   del botón "Realizar el pedido" (margin-top:16px) sin aire, en contraste
   con el espacio generoso que sí tienen los campos de arriba. Se aumenta
   el espaciado vertical en los 3 niveles para que el bloque respire igual
   que el resto del panel. */
.wolk-trust{ margin:24px 0 6px; text-align:center; font-family:var(--body); }
.wolk-trust-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  font:600 13px var(--body); color:var(--ink-soft); margin-bottom:14px; }
.wolk-trust-badges{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:10px 0 14px; }

/* 1.0.126 — FIX: en /checkout/ escritorio (WooCommerce Blocks) la fila SSL/3DS/
   Stripe se ve angosta y con palabras cortadas ("Cone[xión] segura SSL"),
   mientras los chips de tarjeta justo debajo (mismo padre .wolk-trust) se ven
   bien. wolk_portal_checkout_confianza() cuelga del hook clásico
   woocommerce_review_order_after_submit; NO se pudo confirmar con
   inspect-element qué contenedor de la capa de compatibilidad de Blocks le
   impone el ancho angosto a .wolk-trust-row específicamente (si fuera el
   padre .wolk-trust completo, los chips también saldrían angostos, y no es
   el caso). Mientras se consigue el dato real, se blinda cada nivel por
   separado contra float/width/flex-basis heredados — no rompe nada si el
   causante no es ninguno de estos (el layout ya es el correcto por diseño). */
.wolk-trust,
.wolk-trust-row,
.wolk-trust-badges{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:1 1 100% !important;
  float:none !important;
  clear:both !important;
  box-sizing:border-box !important;
}
.wolk-trust{ display:block !important; }
.wolk-trust-row > span,
.wolk-trust-row > span > span{
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:keep-all !important;
  max-width:none !important;
}
/* 1.0.124 — Chips de marca en HTML/CSS (tipografía real, no <text> de SVG).
   Base idéntica para los 4: mismo alto, mismo radio, misma sombra → se ven
   como una FAMILIA, que es lo que da el look premium. */
.pay-chip{ display:inline-flex; align-items:center; justify-content:center;
  height:32px; min-width:52px; padding:0 12px; border-radius:7px;
  background:#fff; border:1px solid #E5E7EB; box-shadow:0 1px 3px rgba(10,22,40,.08);
  font-family:Helvetica,Arial,sans-serif; text-decoration:none; user-select:none; }
.pay-chip.pc-visa{ color:#1434CB; font-weight:800; font-style:italic;
  font-size:14.5px; letter-spacing:-.4px; }
.pay-chip.pc-mc{ gap:0; }
.pay-chip.pc-mc::before, .pay-chip.pc-mc::after{
  content:''; width:19px; height:19px; border-radius:50%; display:block; }
.pay-chip.pc-mc::before{ background:#EB001B; margin-right:-7px; z-index:1; }
.pay-chip.pc-mc::after{ background:#F79E1B; opacity:.92; }
.pay-chip.pc-amex{ background:#016FD0; border-color:#016FD0; color:#fff;
  font-weight:800; font-size:11px; letter-spacing:1.2px; }
.pay-chip.pc-stripe{ background:#635BFF; border-color:#635BFF; color:#fff;
  font-weight:700; font-size:14px; text-transform:lowercase; border-radius:999px;
  padding:0 16px; }
.pay-chip.pc-stripe:hover{ filter:brightness(1.07); }
.wolk-trust-pci{ font:500 12px/1.6 var(--body); color:var(--muted); max-width:520px; margin:0 auto; }
.wolk-trust-pci a{ color:var(--accent-ink); }

/* ============================================================
   1.0.120 — Neutralizar la marca CURLY LOVERS que WLP hornea en
   su CSS. Hallazgo leyendo WLP 1.9.19: wlp-checkout.css estiliza
   el checkout con var(--cl-purple, #7B2D8E) + Playfair — la marca
   de OTRO cliente con fallback morado. Como son VARIABLES, el fix
   limpio es DEFINIRLAS mapeadas a nuestros tokens: todo el CSS de
   WLP (classic Y blocks) renderiza en NUESTRA marca sin guerra de
   !important. (Los overrides del 1.0.119 quedan de cinturón.)
   ============================================================ */
:root, html[data-theme]{
  --cl-purple:       var(--brand);
  --cl-purple-dark:  color-mix(in srgb, var(--brand) 78%, #063a34);
  --cl-purple-light: color-mix(in srgb, var(--brand) 12%, var(--surface));
  --cl-purple-50:    color-mix(in srgb, var(--brand) 7%,  var(--surface));
  --cl-font-heading: var(--display);
  --cl-font-body:    var(--body);
  --cl-radius:       13px;
}

/* ============================================================
   1.0.121 — BOTONES PRIMARIOS A AZUL MARINO OSCURO + letras
   BLANCAS (decisión de identidad de Deiby, 2026-07-23: "azul
   marino oscuro… en negro se ve horrible"). Contraste blanco
   sobre navy ≈ 11:1 (AAA). SOLO botones: los ACENTOS de
   identidad (avatar, chips de iconos, check del thankyou y el
   toggle ES/EN) se quedan en teal — sin teal no hay marca.
   Implementado como override en cascada (una sola fuente de
   verdad, fácil de revertir); tokens por esquema.
   ============================================================ */
:root{
  --btn-bg:#22304F;                 /* azul marino profundo */
  --btn-bg-2:#2E4066;               /* marino un paso más claro (gradiente sutil) */
  --on-btn:#FFFFFF;
  --btn-ring:rgba(34,48,79,.25);
}
[data-theme="dark"]{
  --btn-bg:#35476E; --btn-bg-2:#41547E; --btn-ring:rgba(65,84,126,.35);
}

/* Los 10 botones primarios del tema (catalogados uno a uno; los !important
   replican los de las reglas originales para ganar su propia cascada). */
.wbtn-primary,
.woocommerce-Button,
.wsb-btn,
.wfi-cart .single_add_to_cart_button,
.wprod-single .single_add_to_cart_button,
.wcart-checkout,
.wolk-change-email button,.wolk-change-email input[type=submit],.wolk-change-email .button,
.wolk-passkey .wolk-passkey-btn,.wolk-passkey button,.wolk-passkey input[type=submit]{
  background:linear-gradient(135deg,var(--btn-bg),var(--btn-bg-2)) !important;
  color:var(--on-btn) !important;
  box-shadow:0 10px 22px var(--btn-ring) !important;
}
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button,
.wolk-checkout-fiscal button,.wolk-checkout-fiscal input[type=submit],.wolk-checkout-fiscal .button,
#sec-datos button,#sec-datos input[type=submit],#sec-datos .button,
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order{
  background:linear-gradient(135deg,var(--btn-bg),var(--btn-bg-2)) !important;
  color:var(--on-btn) !important;
}
/* Hover coherente en todos. */
.wbtn-primary:hover,.woocommerce-Button:hover,.wsb-btn:hover,
.wfi-cart .single_add_to_cart_button:hover,.wprod-single .single_add_to_cart_button:hover,
.wcart-checkout:hover,.woocommerce-checkout #place_order:hover{
  filter:brightness(1.12);
}
/* El botón de suscripción/pago de WLP también hereda el navy vía sus variables. */
:root, html[data-theme]{
  --cl-purple:       var(--btn-bg);
  --cl-purple-dark:  var(--btn-bg-2);
}

/* 1.0.121 — Botones de WLP (Suscribirme, place_order de blocks) al estándar navy.
   Sus acentos/links siguen en teal vía el mapeo --cl-* del 1.0.120.
   1.0.125 — FIX: el selector ".wlp-subscribe-submit" apuntaba a una clase que
   NO existe en el markup real de WLP 1.9.24 (el botón es
   id="wlp-subscribe-submit" CLASS="wlp-subscribe-cta" — "cta" no matchea
   "submit", así que este !important nunca aplicó). Se agrega ".wlp-subscribe-cta"
   con el nombre real. El fix de fondo (variable --wlp-color-primary) vive en
   inc/customizer.php (wolk_portal_wlp_primary_color_bridge); esta regla queda
   de CINTURÓN por si WLP vuelve a renombrar la clase en una versión futura. */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order,
.wlp-subscribe-btn, .wlp-subscribe-cta, .wlp-subscribe-submit,
[class*="wlp-"][class*="submit"], [class*="wlp-"][class*="btn-primary"]{
  background:linear-gradient(135deg,var(--btn),var(--btn-2)) !important;
  color:var(--on-btn) !important;
}
.wlp-subscribe-cta:not(:disabled):hover{ filter:brightness(1.12) !important; }

/* ============================================================
   1.0.141 — Espaciado EXTERNO de la tarjeta ".wplan" que WLP imprime en
   /suscribirse/mi-cuenta/ (templates/my-subscriptions.php). Mismo
   precedente que .wlp-subscribe-cta arriba: el tema pisa clases de
   WLP directamente por su nombre real en vez de pedirle a WLP que
   toque su propio <style> — evita otra ronda de ida y vuelta entre
   dos sesiones de trabajo distintas para un ajuste de un solo valor.
   .wolk-shell ya da 16px de aire a los lados (ver línea ~80); esto
   suma 8px más SOLO a esta tarjeta puntual (24px totales), sin
   afectar ninguna otra tarjeta ".wplan" del portal (Planes activos,
   que no lleva ".wlp-my" como ancestro). Confirmado con DevTools
   (Computed: margin-left/right 8px) — este espaciado SÍ aplica bien.

   1.0.142 — El problema real reportado ("las letras pegadas") no era
   este margen externo: es que ".wplan" NO tiene padding propio en el
   tema (el padding vive en ".wplan-top"/".wplan-foot", sub-elementos
   que el markup de WLP no usa — WLP mete su <h2>, sus ".frow" y su
   ".wlp-acciones" DIRECTO como hijos de ".wplan"). Sin ese padding,
   el texto queda pegado al borde interno de la tarjeta. Se agrega acá
   mismo, mismo selector reforzado, mismo alcance (solo esta tarjeta).
   ============================================================ */
.wolk-shell .wlp-my .wplan{
  margin:0 8px !important;
  padding:16px 18px !important;
}

/* ============================================================
   1.0.164 — Ícono flotante de Ayuda (WhatsApp + Video por pantalla).
   Pedido de Deiby (2026-07-31). z-index 56: por encima de la tab bar (55) y
   de la barra sticky de compra (54), por debajo del toast (9999) y del
   splash (10000) — nunca deberían coincidir en pantalla con esos dos igual.
   SUPUESTO: el offset inferior de 80px cuando hay tab bar es una aproximación
   (64px de alto + margen) — pendiente confirmación visual de Deiby en un
   producto real en móvil (ahí conviven tab bar + barra sticky de compra).
   ============================================================ */
.whelp-fab-wrap{
  position:fixed; right:16px; z-index:56; display:flex; flex-direction:column;
  align-items:flex-end; gap:12px; pointer-events:none;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
}
.whelp-fab-wrap > *{ pointer-events:auto; }
body.wolk-has-bottomnav .whelp-fab-wrap{ bottom:calc(80px + env(safe-area-inset-bottom,0px)); }

.whelp-sub{ display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(8px) scale(.85);
  transition:.2s ease; pointer-events:none; }
.whelp-fab-wrap.is-open .whelp-sub{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.whelp-lbl{ background:var(--ink); color:#fff; font:600 11.5px var(--body); padding:6px 10px; border-radius:8px; white-space:nowrap; }
.whelp-btn{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(10,22,40,.22); border:none; cursor:pointer; color:#fff; text-decoration:none; }
.whelp-btn svg{ width:22px; height:22px; }
.whelp-sub--wa .whelp-btn{ background:#25D366; }
/* 1.0.169 — Deiby: el ícono de Ayuda se veía "de otro color" comparado con
   el resto de los botones/chips de la tienda ("ADD ON", el "+" de agregar
   al carrito) — esos usan var(--brand) (el color de acento del esquema),
   pero el globito de Ayuda usaba var(--btn) (el color de "Botones" de
   Personalizar, que es OTRA variable y en el esquema "azul" da un navy
   bastante más oscuro/apagado que el --brand vívido de esa pantalla). Se
   cambia a var(--brand)/var(--on-brand) — mismo par que ya usa
   `.wcardp-add`/`.wchip.on` — para que combine con lo demás en los 3
   esquemas, en vez de solo en el esquema donde --btn y --brand coinciden. */
.whelp-sub--video .whelp-btn{ background:var(--brand); color:var(--on-brand); }

.whelp-fab{ width:58px; height:58px; border-radius:50%; background:var(--brand); color:var(--on-brand); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px color-mix(in srgb, var(--brand) 45%, transparent); transition:transform .25s ease; }
.whelp-fab svg{ width:26px; height:26px; }
.whelp-fab-wrap.is-open .whelp-fab{ transform:rotate(45deg); }

.whelp-modal{ position:fixed; inset:0; z-index:9970; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,22,40,.55); backdrop-filter:blur(2px); }
.whelp-modal.open{ display:flex; }
.whelp-card{ width:100%; max-width:320px; background:var(--surface); border-radius:20px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35); }
.whelp-card-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; }
.whelp-card-head h4{ font:700 14px var(--display); color:var(--ink); }
.whelp-close{ width:28px; height:28px; border-radius:50%; background:var(--surface-2); border:none; cursor:pointer;
  color:var(--ink-soft); font-size:16px; line-height:1; }
.whelp-player{ margin:0 16px 12px; border-radius:12px; overflow:hidden; background:#000; }
.whelp-player video{ width:100%; display:block; max-height:56vh; }
.whelp-langs{ display:flex; gap:6px; padding:0 16px 16px; }
.whelp-langs button{ flex:1; padding:8px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  font:700 12px var(--body); cursor:pointer; color:var(--ink-soft); }
.whelp-langs button.on{ background:var(--btn); color:#fff; border-color:var(--btn); }

@media (max-width:380px){
  .whelp-lbl{ display:none; } /* pantallas muy angostas: solo el ícono, sin la etiqueta */
}

/* ══ 1.0.217 — Planes por TRANSFERENCIA (diseño "Wolk sinpe previews") ══ */
/* Píldora roja del plan vencido. */
.wpill.expired{background:#fee2e2;color:#b91c1c}
/* Renglón de alerta bajo el subtítulo ("Vence en 3 días" / "Reportá tu pago…"). */
.wplan-sub-alerta{color:#b45309;font-weight:700;font-size:12.5px;margin-top:2px}
.wplan-top:has(.wpill.expired) .wplan-sub-alerta{color:#b91c1c}
/* Botón "Reportar pago transferencia": rojo si venció, aro de alerta si está por vencer. */
.wbtn-danger{color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 10px 22px rgba(185,28,28,.25)}
.wplan-reportar.es-por-vencer{box-shadow:0 0 0 3px #fde68a,0 10px 22px var(--btn-shadow)}
/* Cajita "Convertir a suscripción por tarjeta" — índigo suave, dentro de la card. */
.wplan-convertir{display:block;margin:0 16px 16px;padding:14px;border-radius:16px;background:#eef2ff;border:1px solid #dfe5ff}

/* 1.0.220 — PROMO EN CARRUSEL (referencia de Deiby: la app de McDonald's).
 * Una lámina a la vez, deslizamiento suave, puntitos abajo y el CTA SIEMPRE
 * visible fuera del carrusel: la promo rota, la acción no se mueve.
 * Sin JS se ve la primera lámina y ya — el HTML nace con .es-activa. */
.wconv-promo{position:relative;overflow:hidden;border-radius:12px}
.wconv-pista{display:flex;transition:transform .45s cubic-bezier(.22,.9,.3,1);will-change:transform;touch-action:pan-y}
.wconv-pista.es-arrastrando{transition:none}
.wconv-lamina{flex:0 0 100%;display:flex;align-items:center;gap:12px;min-width:0;padding:2px 2px 12px}
.wconv-lamina-txt{flex:1;min-width:0}
.wconv-chip{display:inline-block;margin-bottom:6px;padding:3px 9px;border-radius:999px;background:var(--btn,#1e2749);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.wconv-tit{margin:0;font-size:14.5px;font-weight:800;color:#1e2540;line-height:1.3}
.wconv-sub{margin:3px 0 0;font-size:12.5px;font-weight:600;color:#5b6488;line-height:1.4}
/* El sello del % — el gancho, como el "25% Off" rojo de McDonald's. */
.wconv-sello{flex-shrink:0;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;font-size:17px;font-weight:900;letter-spacing:-.5px;box-shadow:0 8px 18px -6px rgba(220,38,38,.65);animation:wconv-late 2.4s ease-out infinite}
@keyframes wconv-late{0%{transform:scale(1)}42%{transform:scale(1.07)}100%{transform:scale(1)}}
.wconv-ico{flex-shrink:0;width:44px;height:44px;border-radius:13px;background:var(--btn,#1e2749);display:flex;align-items:center;justify-content:center}
.wconv-ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Puntitos: el activo se estira, como en las apps. */
.wconv-puntos{display:flex;gap:6px;justify-content:center;padding:2px 0 10px}
.wconv-punto{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:#c3cbe8;cursor:pointer;transition:width .3s ease,background .3s ease}
.wconv-punto.es-activo{width:18px;background:var(--btn,#1e2749)}
.wconv-punto:focus-visible{outline:2px solid var(--btn,#1e2749);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.wconv-pista{transition:none}.wconv-sello{animation:none}.wconv-punto{transition:none}}
.wplan-convertir-ico{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--btn,#1e2749);display:flex;align-items:center;justify-content:center}
.wplan-convertir-ico svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wplan-convertir-cuerpo{flex:1;min-width:0}
.wplan-convertir-texto{margin:0 0 10px;font-size:13.5px;font-weight:700;color:#1e2540;line-height:1.45}
.wplan-convertir-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;font-size:13px}
.wplan-convertir-btn svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wplan-convertir-btn{width:100%;justify-content:center}
@media (max-width:360px){.wconv-sello{width:54px;height:54px;font-size:15px}}

/* 1.0.218 — Renglón "Próximo pago" del plan por transferencia (siempre visible). */
.wplan-sub-prox{color:#1e2540;font-weight:700;font-size:12.5px;margin-top:2px}

/* ── 1.0.222 · Magic link del login (ADR-016) ─────────────────────────────
   Botón con IDENTIDAD propia: outline navy del tema, separado del bloque de
   arriba. Antes usaba .wbtn-ghost (gris --surface-2), que quedaba pegado y
   casi invisible sobre el fondo de la tarjeta. */
.wolk-magic-btn{
  margin-top:12px;
  background:var(--surface);
  color:var(--btn);
  border:1.5px solid var(--btn);
  box-shadow:0 3px 12px color-mix(in srgb, var(--btn) 14%, transparent);
}
.wolk-magic-btn:hover{
  background:color-mix(in srgb, var(--btn) 7%, var(--surface));
  transform:translateY(-1px);
}
.wolk-magic-btn:active{ transform:translateY(0); }
.wolk-magic-btn svg{ flex:none; }

/* Caja de "revisá tu correo" + campo del código. Vive dentro de la tarjeta de
   login; hereda tokens del tema. */
.wolk-magic{margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.wolk-magic-msg{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink);text-align:center}
.wolk-magic-field input{font-family:'Courier New',Courier,monospace;font-size:20px;letter-spacing:.32em;text-align:center;font-weight:700}
.wolk-magic-err{margin:12px 0 0;font-size:13px;font-weight:600;color:#b91c1c;text-align:center;line-height:1.45}
.wolk-magic-resend{display:block;margin:12px auto 0;background:none;border:0;padding:6px 10px;font-size:12.5px;color:var(--muted);cursor:pointer;text-decoration:underline}
.wolk-magic-resend:disabled{cursor:default;text-decoration:none;opacity:.75}
/* [hidden] de la caja mágica: los display de .wfield y compañía (flex) pisan
   la regla [hidden] del user-agent (las de autor SIEMPRE ganan a las del UA,
   sin importar especificidad). Cazado por run39 en Chromium: el campo del
   código "escondido" seguía visible. */
.wolk-magic [hidden],#wolk-magic-box[hidden],#wolk-magic-err[hidden]{display:none!important}

/* 1.0.228 · Señal "creá tu contraseña" de UN CLIC (edit-account + cambiar correo). */
.wolk-pw-hint{display:block;margin:6px 0 0;font-size:12.5px;color:var(--muted,#94A3B8);line-height:1.5}
.wolk-pw-hint a{color:var(--brand,#13B5A6);font-weight:600}
.wolk-pw-hint-btn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--brand,#13B5A6);text-decoration:underline;cursor:pointer}
.wolk-pw-hint.is-ok{color:var(--ok,#047857);font-weight:600}
.wolk-pw-hint.is-wait{color:#b45309;font-weight:600}

/* ============================================================
   1.0.230 — Passkeys con vestido Wolk (QA Deiby 5 sep)
   El markup es del plugin Secure Passkeys; las clases wolk-pk-*
   las agrega wolk-portal.js por decoración dentro de nuestro
   panel. Si el plugin cambia su HTML, esto simplemente no aplica.
   ============================================================ */

/* Estado vacío: de cajita plana a tarjeta amable que invita. */
.wolk-passkey .wolk-pk-empty{
  display:block; border:2px dashed #cbd5e1; border-radius:14px;
  padding:22px 16px 20px; text-align:center; color:#64748b;
  background:#f8fafc; font-size:13px; line-height:1.55;
}
.wolk-passkey .wolk-pk-empty::before{
  content:'🔐'; display:block; font-size:26px; margin-bottom:6px;
}

/* Mensajes de éxito: banda verde suave, coherente con el portal. */
.wolk-passkey .wolk-pk-note{
  display:block; border:1px solid #bbf7d0; background:#f0fdf4;
  color:#166534; border-radius:12px; padding:10px 13px;
  font-size:13.5px; font-weight:600;
}

/* Fila de un acceso registrado: tarjeta del lenguaje del portal. */
.wolk-passkey .wolk-pk-item{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border:1px solid #e2e8f0; border-radius:14px; padding:12px 14px;
  background:#fbfcfe; margin-top:10px;
}

/* Basurero: delicado, rojo solo al insinuarse (el modal confirma).
   1.0.231 — DOBLE CANDADO: solo dentro de una fila confirmada (.wolk-pk-item).
   En 1.0.230 el selector suelto + una heurística floja pintaron de rojo
   TODOS los botones (Registrar acceso, Add, Cancel) y el flex de la fila
   aplicado a un contenedor grande descuadró la sección. Nunca más: el resto
   de botones queda con el estilo del TEMA (.wolk-passkey button, azul marca). */
.wolk-passkey .wolk-pk-item .wolk-pk-del{
  background:#fff !important; border:1px solid #fecaca !important;
  color:#dc2626 !important; border-radius:10px !important;
  width:38px; height:38px; padding:0 !important; font-size:15px;
  box-shadow:none !important; transform:none !important;
}
.wolk-passkey .wolk-pk-item .wolk-pk-del:hover{ background:#fef2f2 !important; }

/* 1.0.232 — FORM DE REGISTRO DE ACCESO: aire y alineación (QA Deiby 5 sep:
   "esos botones por qué tan feos, súper pegados, no centraditos"). El reset
   histórico del tema (margin/padding:0 !important sobre .secure-passkeys-form,
   arriba) le arrancó al form del plugin su espaciado, y el input y los
   botones traen anchos distintos → pegados y chuecos. Acá: todos al MISMO
   ancho (100% + border-box) y aire vertical entre elementos. */
#wolk-passkey-panel input:not([type=hidden]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]){
  width:100% !important; box-sizing:border-box !important; display:block;
  border:1px solid #cbd5e1 !important; border-radius:10px !important;
  padding:11px 12px !important; font-size:14px; margin:0 0 10px !important;
  background:#fff;
}
#wolk-passkey-panel button{
  width:100%; box-sizing:border-box; display:block;
  margin:0 0 8px !important;
}
/* El basurero de la fila NO hereda el ancho completo (es el iconito). */
.wolk-passkey .wolk-pk-item .wolk-pk-del{ width:38px !important; margin:0 !important; display:inline-flex; align-items:center; justify-content:center; }
/* Cancelar = secundario (gris), para que el primario mande. La clase la pone
   wolk-portal.js por el TEXTO exacto del botón (Cancel/Cancelar), reversible. */
.wolk-passkey button.wolk-pk-btn-sec{
  background:#f1f5f9 !important; color:#334155 !important;
  border:1px solid #e2e8f0 !important; box-shadow:none !important;
}
.wolk-passkey button.wolk-pk-btn-sec:hover{ background:#e2e8f0 !important; transform:none !important; }

/* Modal Wolk de confirmación de borrado (lo abre wolk-portal.js). */
.wolk-pk-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.55);
  display:none; align-items:center; justify-content:center;
  z-index:99998; padding:18px;
}
.wolk-pk-overlay.on{ display:flex; }
.wolk-pk-modal{
  background:#fff; border-radius:18px; max-width:360px; width:100%;
  padding:22px; text-align:center;
  box-shadow:0 24px 60px rgba(2,6,23,.35);
  animation:wolkPkPop .18s ease;
}
@keyframes wolkPkPop{ from{ transform:scale(.94); opacity:0; } }
.wolk-pk-mic{
  width:52px; height:52px; border-radius:50%; background:#fef2f2;
  color:#dc2626; font-size:24px; display:flex; align-items:center;
  justify-content:center; margin:0 auto 12px;
}
.wolk-pk-mtit{ margin:0 0 6px; font-size:17px; color:#0f172a; }
.wolk-pk-mtxt{ margin:0 0 16px; font-size:13.5px; color:#64748b; line-height:1.5; }
.wolk-pk-mrow{ display:flex; gap:10px; }
.wolk-pk-mrow button{
  flex:1; border-radius:11px; padding:12px; font-weight:700;
  font-size:14px; cursor:pointer;
}
.wolk-pk-mno{ background:#f1f5f9; border:1px solid #e2e8f0; color:#334155; }
.wolk-pk-msi{ background:#dc2626; border:0; color:#fff; }

/* ============================================================
   1.0.234 — WOLK VOZ: tarjeta de llamada flotante (Fase 3)
   La abre wolk-portal.js al tocar el tab 📞 (que solo existe si
   wp-admin encendió el check). Estilo llamada de WhatsApp:
   arrastrable, avatar que "habla", timer, silenciar y colgar.
   ============================================================ */
.wolk-voz-card{
  position:fixed; right:14px; bottom:calc(96px + env(safe-area-inset-bottom,0px));
  width:200px; z-index:99997; padding:14px 14px 12px; color:#fff;
  background:rgba(13,20,45,.94); backdrop-filter:blur(8px);
  border-radius:18px; box-shadow:0 16px 40px rgba(2,6,23,.55);
  cursor:grab; touch-action:none; user-select:none;
  animation:wolkVozIn .25s ease; text-align:center;
}
@keyframes wolkVozIn{ from{ transform:scale(.85); opacity:0; } }
.wolk-voz-grip{ color:#64748b; font-size:10px; letter-spacing:.2em; margin-bottom:6px; }
.wolk-voz-avatar{
  width:84px; height:84px; border-radius:50%; margin:0 auto 8px;
  display:block; object-fit:cover; position:relative;
}
.wolk-voz-avatar-css{
  background:linear-gradient(135deg,#2547d0,#7c3aed);
  display:flex; align-items:center; justify-content:center; font-size:36px;
}
/* anillos que pulsan cuando el agente habla (todos los modos de avatar) */
.wolk-voz-card::before,.wolk-voz-card::after{
  content:''; position:absolute; top:36px; left:50%; width:84px; height:84px;
  margin-left:-42px; border-radius:50%; border:2px solid transparent; pointer-events:none;
}
.wolk-voz-card.hablando::before{ border-color:rgba(124,58,237,.55); animation:wolkVozRing 1.4s ease infinite; }
.wolk-voz-card.hablando::after{ border-color:rgba(37,71,208,.45); animation:wolkVozRing 1.4s .5s ease infinite; }
@keyframes wolkVozRing{ 0%{ transform:scale(.9); opacity:1; } 100%{ transform:scale(1.35); opacity:0; } }
.wolk-voz-nom{ font-weight:800; font-size:13.5px; }
.wolk-voz-est{ font-size:11px; color:#93c5fd; margin:2px 0 8px; min-height:14px; }
.wolk-voz-eq{ display:flex; gap:3px; justify-content:center; height:16px; align-items:flex-end; margin-bottom:10px; visibility:hidden; }
.wolk-voz-card.hablando .wolk-voz-eq{ visibility:visible; }
.wolk-voz-eq i{ width:4px; background:#7dd3fc; border-radius:2px; animation:wolkVozEq .7s ease-in-out infinite; }
.wolk-voz-eq i:nth-child(2){ animation-delay:.1s; } .wolk-voz-eq i:nth-child(3){ animation-delay:.25s; }
.wolk-voz-eq i:nth-child(4){ animation-delay:.4s; } .wolk-voz-eq i:nth-child(5){ animation-delay:.15s; }
@keyframes wolkVozEq{ 0%,100%{ height:4px; } 50%{ height:16px; } }
.wolk-voz-fila{ display:flex; gap:10px; justify-content:center; }
.wolk-voz-btn{ width:40px; height:40px; border-radius:50%; border:0; font-size:16px; cursor:pointer; }
.wolk-voz-mute{ background:#26325c; color:#fff; }
.wolk-voz-fin{ background:#dc2626; color:#fff; }
@media (prefers-reduced-motion:reduce){
  .wolk-voz-card::before,.wolk-voz-card::after,.wolk-voz-eq i{ animation:none; }
}


/* ── 1.0.272 · Login en el CELULAR a pantalla completa ───────────────────────
   Pedido Deiby (31 oct): «primero el correo y de una vez el botón palpitando del
   enlace… explicar que con el enlace entra directo a su portal… abajo, o con
   contraseña… carruseles con brillitos de los otros productos… algo más fresco,
   full pantalla, a la altura de nosotros». Solo a menos de 600 px y solo en el
   login (body:has(.wolk-auth)); la computadora queda igual.
   Arriba: azul Wolk con luces que se mueven, logo en blanco, «Portal Wolk» y los
   productos pasando en tarjetas de vidrio con brillitos. Abajo: hoja blanca con
   el correo, el botón del enlace palpitando y la explicación; «o con tu
   contraseña» la abre. El <form> pasa a display:contents para ordenar sus campos
   junto con el botón del enlace (que vive fuera); el form sigue existiendo. */
.wolk-auth-title,.wolk-auth-sub,.wolk-auth-para,.wolk-ml-hint,.wolk-pass-div,.wolk-carrusel,.wolk-correo-guia,.wolk-hoja-logo{display:none}
@media (max-width:600px){
  body:has(.wolk-auth){background:#0f2a49;overflow-x:hidden}
  body:has(.wolk-auth) .wolk-app{overflow:hidden}
  /* 1.0.276 — Fondo sobrio (pedido de la jefa): azul Wolk quieto con una sola luz suave arriba; sin tornasol ni olas. */
  body:has(.wolk-auth) .wolk-app{background:
      radial-gradient(110% 55% at 50% 0%,rgba(255,255,255,.10) 0%,transparent 65%),
      linear-gradient(180deg,#163a63 0%,#123154 60%,#0f2a49 100%)}
  body:has(.wolk-auth) .wolk-shell{padding-left:0;padding-right:0;max-width:none}
  body:has(.wolk-auth) .wolk-top{padding:calc(14px + env(safe-area-inset-top, 0px)) 18px 0;position:relative;z-index:3} /* 1.0.279: respeta la barra del iPhone (hora, wifi, batería) cuando se abre como app. */
  body:has(.wolk-auth) .wolk-lang{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);box-shadow:none;backdrop-filter:blur(10px)}
  body:has(.wolk-auth) .wolk-lang button{color:rgba(255,255,255,.8)}
  body:has(.wolk-auth) .wolk-lang button.on{background:#fff;color:#0b1f3a}
  body:has(.wolk-auth) .wolk-legal{position:relative;background:var(--surface);margin:0 0 -240px;padding:6px 0 calc(258px + 96px + env(safe-area-inset-bottom))} /* El blanco llega hasta el final; +96 px: al final de la página, el botón de ayuda no tapa el audio de Emily. */
  .wolk-auth{position:relative;z-index:2;padding:0;justify-content:flex-start;min-height:calc(100dvh - 54px);display:flex;flex-direction:column}
  .wolk-auth-grid{display:contents}
  .wolk-auth-brand{order:1;gap:4px;margin:4px 0 0;padding:0 24px}
  .wolk-auth-brand .chip{display:none}
  #wolk-panel-login .wolk-hoja-logo{display:block;order:0;height:34px;max-width:190px;object-fit:contain;margin:0 auto 18px}
  .wolk-auth-brand p[data-i18n="subtitle"]{display:none}
  .wolk-auth-brand{position:relative}
  .wolk-auth-title{display:block;margin:18px 0 0;font:800 34px/1.05 var(--display);letter-spacing:-.03em;color:#fff;
    background:linear-gradient(110deg,#fff 42%,color-mix(in srgb,var(--brand) 45%,#fff) 50%,#fff 58%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wolkTituloBrillo 6s ease-in-out infinite}
  .wolk-auth-brand .wolk-auth-sub{display:block;margin:6px 0 0;font:600 17px var(--display);letter-spacing:-.01em;color:color-mix(in srgb,var(--brand) 35%,#fff)}
  .wolk-auth-brand .wolk-auth-para{display:block;max-width:300px;margin:8px auto 0;font-size:13.5px;line-height:1.45;font-weight:500;color:rgba(255,255,255,.8);animation:wolkLeeme 4.5s ease-in-out 3s infinite} /* Late suavecito a los 3 s, para que lo lean. */
  .wolk-auth-aside{order:2;padding:0;margin:0}
  .wolk-auth-aside > *:not(.wolk-carrusel){display:none!important}
  .wolk-auth-main{order:3;margin-top:auto}
  .wolk-auth > :not(.wolk-auth-brand):not(.wolk-auth-grid){order:4} /* El audio «Hay varias formas de entrar» (Wolk Payments), debajo de la hoja. */
  /* 1.0.278 — Audio de Emily: ancho justo (antes 100 % + margen: se salía 16 px por la derecha) y fondo blanco limpio
     detrás (sin la sombra que dejaba franja gris en el iPhone). */
  .wolk-auth{background:linear-gradient(to top,var(--surface) 130px,transparent 130px)}
  .wolk-auth > .wlpaud-login-guide{margin:0 16px!important;width:calc(100% - 32px)!important;max-width:none!important;box-sizing:border-box!important}
  #wolk-panel-login .wolk-passkey .login-via-passkey{background:var(--surface)!important;color:var(--ink)!important;border:1.5px solid var(--line)!important;box-shadow:none!important;border-radius:16px!important} /* Face ID / huella: segundo plano, el principal es el enlace. */

  /* Carrusel de vidrio con brillitos */
  .wolk-carrusel{display:block;margin:22px 0 18px}
  .wolk-carrusel-head{display:block;padding:0 22px 2px;text-align:left}
  .wolk-carrusel-head b{font:600 13px var(--body);color:rgba(255,255,255,.75);letter-spacing:.01em}
  .wolk-carrusel-head a{display:none}
  .wolk-carrusel-ventana{overflow:hidden;padding:8px 0 12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .wolk-carrusel-pista{display:flex;gap:12px;width:max-content;animation:wolkCarrusel 42s linear infinite}
  .wolk-carrusel:active .wolk-carrusel-pista{animation-play-state:paused}
  .wolk-car{position:relative;flex:none;width:132px;border-radius:20px;padding:9px 9px 11px;text-decoration:none;color:#fff;overflow:hidden;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:2px}
  .wolk-car{animation:wolkMecer 5s ease-in-out infinite}
  .wolk-car:nth-child(even){animation-delay:-2.5s}.wolk-car:nth-child(3n){animation-duration:6s}
  .wolk-car::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-130%);animation:wolkBrilloPasa 6s ease-in-out infinite;pointer-events:none}
  .wolk-car:nth-child(3n+2)::after{animation-delay:2s}.wolk-car:nth-child(3n)::after{animation-delay:4s}
  .wolk-car-img{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:14px;margin-bottom:6px;background:rgba(255,255,255,.92)}
  .wolk-car-img img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}
  .wolk-car-img svg{width:40px;height:40px;fill:none;stroke:#12325a;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
  .wolk-car-cat{display:none;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--brand) 70%,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wolk-car-name{font:700 12.5px/1.25 var(--display);min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .wolk-car-price{font-size:12px;font-weight:700;color:rgba(255,255,255,.85)}
  .wolk-brillo{position:absolute;z-index:2;width:16px;height:16px;pointer-events:none;background:#FFD54A;
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px rgba(255,213,74,.95));opacity:0;animation:wolkTitila 2.8s ease-in-out infinite}
  .wolk-brillo.b1{top:-4px;right:-3px}.wolk-brillo.b2{bottom:10%;left:-4px;width:11px;height:11px;animation-delay:.9s}.wolk-brillo.b3{top:38%;right:-5px;width:9px;height:9px;animation-delay:1.7s}

  /* Hoja blanca de abajo */
  .wolk-auth-main .wcard{border:0;border-radius:30px 30px 0 0;padding:14px 22px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(0,0,0,.28);clip-path:inset(-80px 0 0 0);animation:wolkHoja .55s cubic-bezier(.2,.8,.2,1) both} /* 1.0.278: la sombra solo hacia arriba (abajo dejaba franja gris sobre el audio de Emily). */
  .wolk-auth-main .wcard::before{content:"";display:block;width:40px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 18px}
  .wolk-tabs:not(:has(.wolk-tab + .wolk-tab)){display:none}
  #wolk-panel-login{display:flex;flex-direction:column}
  #wolk-panel-login > form{display:contents}
  #wolk-panel-login .wgrp{order:1;margin-bottom:0}
  #wolk-panel-login .wgrp:not(.wgrp-pass) > label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #wolk-panel-login .wolk-correo-guia{display:block;font:700 16px var(--display);color:var(--ink);margin:0 0 10px 2px}
  #wolk-panel-login .wfield{border-radius:16px;padding:0 15px;min-height:56px;background:#fff;border:2px solid color-mix(in srgb,var(--brand) 60%,#cbd5e1)}
  #wolk-panel-login .wfield svg{color:var(--accent-ink)}
  #wolk-panel-login .wfield input::placeholder{color:#7b8799}
  #wolk-panel-login .wgrp:not(.wgrp-pass) .wfield{animation:wolkCampo 2s ease-out infinite}
  #wolk-panel-login .wgrp:not(.wgrp-pass) .wfield:focus-within{animation:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
  #wolk-panel-login.wolk-correo-listo .wgrp:not(.wgrp-pass) .wfield{animation:none;border-color:#16a34a;box-shadow:none;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat right 14px center/20px}
  #wolk-panel-login .wfield input{font-size:16px;padding:16px 0} /* 16px: el iPhone no hace zoom al tocar el campo. */
  #wolk-panel-login .wolk-magic-btn{
    order:2;margin-top:12px;min-height:58px;border:0;border-radius:17px;gap:10px;white-space:nowrap;
    color:#fff;background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--brand) 55%,var(--btn)));
    font:700 16px var(--display);box-shadow:0 10px 22px var(--btn-shadow);transition:transform .2s
  }
  #wolk-panel-login.wolk-correo-listo .wolk-magic-btn{animation:wolkLatido 2s ease-out infinite;transform:scale(1.015)}
  #wolk-panel-login.wolk-correo-listo .wolk-magic-btn svg{animation:wolkSobre 2s ease-in-out infinite}
  #wolk-panel-login .wolk-magic{order:3}
  #wolk-panel-login .wolk-ml-hint{order:4;display:flex;gap:10px;align-items:flex-start;margin:14px 2px 0;font-size:13px;line-height:1.5;font-weight:500;color:var(--ink-soft)}
  #wolk-panel-login .wolk-ml-hint svg{width:18px;height:18px;flex:none;margin-top:1px;fill:color-mix(in srgb,var(--brand) 25%,transparent);stroke:var(--accent-ink);stroke-width:1.8;stroke-linejoin:round}
  #wolk-panel-login:has(#wolk-magic-box:not([hidden])) .wolk-ml-hint{display:none}
  #wolk-panel-login .wolk-divider-ml{display:none}
  #wolk-panel-login .wolk-pass-div{order:5;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:18px 0 0;padding:12px;border:0;background:none;cursor:pointer;
    font:600 13.5px var(--body);color:var(--ink-soft)}
  #wolk-panel-login .wolk-pass-div svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}
  #wolk-panel-login.wolk-pass-abierto .wolk-pass-div svg{transform:rotate(180deg)}
  #wolk-panel-login .wgrp-pass,#wolk-panel-login .wrow,#wolk-panel-login button[type="submit"]{display:none}
  #wolk-panel-login.wolk-pass-abierto .wgrp-pass{display:block;order:6;margin-top:4px}
  #wolk-panel-login .wgrp-pass label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #wolk-panel-login.wolk-pass-abierto .wrow{display:flex;order:7;margin:12px 2px 14px;gap:10px}
  #wolk-panel-login .wrow .wchk,#wolk-panel-login .wrow .wforgot{font-size:12.5px;white-space:nowrap}
  #wolk-panel-login.wolk-pass-abierto button[type="submit"]{display:flex;order:8;min-height:52px;padding:13px;border-radius:16px;font-size:15px;
    background:var(--surface)!important;color:var(--ink)!important;border:1.5px solid var(--line)!important;box-shadow:none!important}
  #wolk-panel-login .wolk-divider:not(.wolk-divider-ml){order:9}
  #wolk-panel-login .wolk-passkey{order:10}
  #wolk-panel-login .wolk-passkey-hint{order:11}
  #wolk-panel-login .wolk-apps-login-box{order:12;margin:14px 0 0}
  #wolk-panel-login .wolk-apps-tit{font-size:11.5px}
}
/* ── 1.0.284 · Login de la COMPUTADORA (pedido de Deiby, 9 nov 2026: la gente no veía «Entrar con un enlace al
   correo»). Solo de 601 px para arriba; el celular no cambia. El correo arriba, el botón del enlace justo debajo
   (palpita con el correo escrito) y la contraseña SIEMPRE abierta debajo de «o con tu contraseña», más grande y
   con un brillo suave. */
@media (min-width:601px){
  #wolk-panel-login{display:flex;flex-direction:column}
  #wolk-panel-login > form{display:contents}
  #wolk-panel-login .wgrp{order:1;margin-bottom:0}
  #wolk-panel-login .wgrp:not(.wgrp-pass) > label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #wolk-panel-login .wolk-correo-guia{display:block;font:700 16px var(--display);color:var(--ink);margin:0 0 10px 2px}
  #wolk-panel-login .wfield{border-radius:16px;padding:0 15px;min-height:56px;background:#fff;border:2px solid color-mix(in srgb,var(--brand) 60%,#cbd5e1)}
  #wolk-panel-login .wfield svg{color:var(--accent-ink)}
  #wolk-panel-login .wfield input::placeholder{color:#7b8799}
  #wolk-panel-login .wgrp:not(.wgrp-pass) .wfield{animation:wolkCampo 2s ease-out infinite}
  #wolk-panel-login .wgrp:not(.wgrp-pass) .wfield:focus-within{animation:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
  #wolk-panel-login.wolk-correo-listo .wgrp:not(.wgrp-pass) .wfield{animation:none;border-color:#16a34a;box-shadow:none;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat right 14px center/20px}
  #wolk-panel-login .wfield input{font-size:16px;padding:16px 0} /* 16px: el iPhone no hace zoom al tocar el campo. */
  #wolk-panel-login .wolk-magic-btn{
    order:2;margin-top:12px;min-height:58px;border:0;border-radius:17px;gap:10px;white-space:nowrap;
    color:#fff;background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--brand) 55%,var(--btn)));
    font:700 16px var(--display);box-shadow:0 10px 22px var(--btn-shadow);transition:transform .2s
  }
  #wolk-panel-login.wolk-correo-listo .wolk-magic-btn{animation:wolkLatido 2s ease-out infinite;transform:scale(1.015)}
  #wolk-panel-login.wolk-correo-listo .wolk-magic-btn svg{animation:wolkSobre 2s ease-in-out infinite}
  #wolk-panel-login .wolk-magic{order:3}
  #wolk-panel-login .wolk-ml-hint{order:4;display:flex;gap:10px;align-items:flex-start;margin:14px 2px 0;font-size:13px;line-height:1.5;font-weight:500;color:var(--ink-soft)}
  #wolk-panel-login .wolk-ml-hint svg{width:18px;height:18px;flex:none;margin-top:1px;fill:color-mix(in srgb,var(--brand) 25%,transparent);stroke:var(--accent-ink);stroke-width:1.8;stroke-linejoin:round}
  #wolk-panel-login:has(#wolk-magic-box:not([hidden])) .wolk-ml-hint{display:none}
  #wolk-panel-login .wolk-divider-ml{display:none}
  #wolk-panel-login .wolk-pass-div{order:5;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:20px 0 2px;padding:6px 12px;border:0;background:none;cursor:default;
    font:700 17px var(--display);color:var(--ink);
    background-image:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,color-mix(in srgb,var(--brand) 70%,#fff) 50%,var(--ink) 60%,var(--ink) 100%);
    background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:wolkBrilloTexto 4s ease-in-out 1.5s infinite}
  #wolk-panel-login .wolk-pass-div svg{display:none} /* Siempre abierta: no hay nada que desplegar. */
  #wolk-panel-login .wgrp-pass{display:block;order:6;margin-top:4px}
  #wolk-panel-login .wgrp-pass label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #wolk-panel-login .wrow{display:flex;order:7;margin:12px 2px 14px;gap:10px}
  #wolk-panel-login .wrow .wchk,#wolk-panel-login .wrow .wforgot{font-size:12.5px;white-space:nowrap}
  /* 1.0.285 — «Iniciar sesión» es un botón de verdad (antes blanco sobre blanco: al tocarlo ni se veía).
     Orden de importancia: el enlace palpita fuerte, «Iniciar sesión» un poco menos y Face ID más suave. */
  #wolk-panel-login button[type="submit"],#wolk-panel-login button[type="submit"]:hover,#wolk-panel-login button[type="submit"]:focus,#wolk-panel-login button[type="submit"]:active{
    display:flex;order:8;min-height:52px;padding:13px;border-radius:16px;font:700 15.5px var(--display);
    background:color-mix(in srgb,var(--brand) 14%,#fff)!important;color:var(--ink)!important;
    border:2px solid color-mix(in srgb,var(--brand) 70%,var(--ink))!important;opacity:1!important;filter:none!important;visibility:visible!important}
  #wolk-panel-login button[type="submit"]{animation:wolkLatidoMedio 2.6s ease-out .9s infinite}
  #wolk-panel-login button[type="submit"]:hover{background:color-mix(in srgb,var(--brand) 24%,#fff)!important}
  #wolk-panel-login button[type="submit"]:active{transform:scale(.98)}
  #wolk-panel-login .wolk-magic-btn{animation:wolkLatido 2s ease-out infinite}
  #wolk-panel-login .wolk-passkey .login-via-passkey{animation:wolkLatidoSuave 3.2s ease-out 1.6s infinite}
  #wolk-panel-login .wolk-divider:not(.wolk-divider-ml){order:9}
  #wolk-panel-login .wolk-passkey{order:10}
  #wolk-panel-login .wolk-passkey-hint{order:11}
  #wolk-panel-login .wolk-apps-login-box{order:12;margin:14px 0 0}
  #wolk-panel-login .wolk-apps-tit{font-size:11.5px}
}
@keyframes wolkBrilloTexto{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes wolkLatidoMedio{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 32%,transparent)}70%{box-shadow:0 0 0 8px color-mix(in srgb,var(--brand) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes wolkLatidoSuave{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 18%,transparent)}70%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ink) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@media (min-width:601px) and (prefers-reduced-motion:reduce){
  #wolk-panel-login .wolk-pass-div,#wolk-panel-login .wolk-magic-btn,#wolk-panel-login .wolk-magic-btn svg,#wolk-panel-login .wfield,#wolk-panel-login button[type="submit"],#wolk-panel-login .wolk-passkey .login-via-passkey{animation:none!important}
}
@keyframes wolkLatido{
  0%{box-shadow:0 12px 26px var(--btn-shadow),0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}
  70%{box-shadow:0 12px 26px var(--btn-shadow),0 0 0 14px color-mix(in srgb,var(--brand) 0%,transparent)}
  100%{box-shadow:0 12px 26px var(--btn-shadow),0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent)}
}
@keyframes wolkSobre{0%,60%,100%{transform:translateX(0)}70%{transform:translateX(3px)}80%{transform:translateX(-1px)}}
@keyframes wolkCarrusel{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
@keyframes wolkBrilloPasa{0%,60%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
@keyframes wolkTitila{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:1;transform:scale(1) rotate(25deg)}60%{opacity:.9;transform:scale(.9) rotate(35deg)}}
@keyframes wolkCampo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes wolkMecer{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-.6deg)}}
@keyframes wolkTituloBrillo{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
@keyframes wolkLeeme{0%,62%,100%{transform:scale(1);color:rgba(255,255,255,.8);text-shadow:none}74%{transform:scale(1.035);color:#fff;text-shadow:0 0 14px rgba(255,255,255,.35)}}
@keyframes wolkHoja{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  #wolk-panel-login .wolk-magic-btn,#wolk-panel-login .wolk-magic-btn svg,.wolk-carrusel-pista,.wolk-car::after,.wolk-brillo,.wolk-auth-main .wcard,.wolk-car,.wolk-auth-title,#wolk-panel-login .wfield,.wolk-auth-brand .wolk-auth-para{animation:none}
  .wolk-carrusel-ventana{overflow-x:auto}
}