/* ==========================================================================
   Kairos Factory — capa de marca sobre Kadence + WooCommerce
   Tokens tomados de los diseños hi-fi (Documents\Kairos\README.md)
   ========================================================================== */

:root {
  /* Marca — tokens EXACTOS de ESPECIFICACION_CLAUDE_CODE.md (seccion 4) */
  --kf-primary: #7B6AD4;      /* primario */
  --kf-primary-dark: #5E4DB2; /* primario hover / oscuro */
  --kf-lavender: #EAE4FA;     /* lavanda claro */
  --kf-cyan: #56B6E6;         /* cian */
  --kf-sky: #DDEEFA;          /* celeste */
  --kf-rose: #F0E6FA;
  --kf-accent-1: #9D7EBE;
  --kf-accent-2: #B7A9EE;
  --kf-accent-3: #9C8FE6;
  --kf-accent-4: #74C2EC;
  --kf-accent-5: #E4E7FB;
  --kf-accent-6: #E4E8FB;

  /* Neutros y superficies */
  --kf-bg: #F3F0FB;          /* fondo de pagina */
  --kf-surface: #FFFFFF;     /* superficie card */
  --kf-surface-soft: #FAF8FE;
  --kf-text: #2C2358;        /* texto principal */
  --kf-text-2: #534A7E;      /* texto secundario */
  --kf-muted: #8C84AE;       /* texto muted */
  --kf-disabled: #B4ADCE;    /* placeholder / deshabilitado */
  --kf-border: #E3DBF6;      /* borde input / pill */
  --kf-border-card: #EEE9FA; /* borde card */
  --kf-divider: #F1ECFA;     /* divisor interno */
  --kf-dashed: #CFC4EF;      /* borde dashed (vacios) */

  /* Semánticos */
  --kf-success-bg: #E4F5EC; --kf-success: #2C6E49; --kf-success-2: #3E8E5A;
  --kf-error-bg: #FDECEA;   --kf-error: #B3261E;
  --kf-warn: #C77A0E;       --kf-star: #E7A93C;

  /* Footer oscuro */
  --kf-footer: #251D4A; --kf-footer-card: #322755;
  --kf-footer-border: #3D316B; --kf-footer-text: #A89FCB;

  /* Radios */
  --kf-r-pill: 999px;
  --kf-r-card: 22px;
  --kf-r-banner: 34px;
  --kf-r-input: 14px;

  /* Sombras */
  --kf-shadow-card: 0 10px 26px rgba(74, 58, 122, .07);
  --kf-shadow-card-hi: 0 16px 40px rgba(74, 58, 122, .08);
  --kf-shadow-btn: 0 6px 16px rgba(123, 106, 212, .38);
  --kf-shadow-hero: 0 30px 60px rgba(74, 58, 122, .22);

  /* Tipografía */
  --kf-font-head: "Baloo 2", system-ui, sans-serif;
  --kf-font-body: "Nunito", system-ui, sans-serif;
}

/* Base ---------------------------------------------------------------------- */
body {
  background: var(--kf-bg);
  color: var(--kf-text);
  font-family: var(--kf-font-body);
}

h1, h2, h3, h4, h5,
.woocommerce-loop-product__title,
.product_title,
.wc-block-components-product-name {
  font-family: var(--kf-font-head);
  color: var(--kf-text);
  letter-spacing: -.01em;
}

a { color: var(--kf-primary); }
a:hover { color: var(--kf-primary-dark); }

/* Botones (WooCommerce + bloques) ------------------------------------------ */
.wp-block-button__link,
.button, a.button, button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.wc-block-components-button {
  background: var(--kf-primary) !important;
  color: #fff !important;
  border-radius: var(--kf-r-pill) !important;
  box-shadow: var(--kf-shadow-btn);
  font-family: var(--kf-font-head);
  font-weight: 700;
  border: 0;
  transition: background .2s ease, transform .2s ease;
}
.wp-block-button__link:hover,
.button:hover, a.button:hover, button.button:hover,
.woocommerce a.button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:hover {
  background: var(--kf-primary-dark) !important;
  transform: translateY(-1px);
}

/* Precios ------------------------------------------------------------------- */
.price, .woocommerce-Price-amount, .amount {
  font-family: var(--kf-font-head);
  font-weight: 800;
  color: var(--kf-text);
}
del .woocommerce-Price-amount { color: var(--kf-disabled); font-weight: 600; }

/* Tarjetas de producto ------------------------------------------------------ */
ul.products li.product,
.wc-block-grid__product {
  background: var(--kf-surface);
  border: 1px solid var(--kf-border-card);
  border-radius: var(--kf-r-card);
  box-shadow: var(--kf-shadow-card);
  overflow: hidden;
}

/* Inputs -------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], select, textarea,
.wc-block-components-text-input input {
  border: 1.5px solid var(--kf-border) !important;
  border-radius: var(--kf-r-input) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--kf-primary) !important;
  outline: none;
}

/* Avisos WooCommerce -------------------------------------------------------- */
.woocommerce-message, .woocommerce-info { border-top-color: var(--kf-primary); }
.woocommerce-error { border-top-color: var(--kf-error); }

/* Badges de oferta ---------------------------------------------------------- */
.onsale, span.onsale {
  background: var(--kf-cyan) !important;
  color: #1D1D1B !important;
  border-radius: var(--kf-r-pill) !important;
  font-family: var(--kf-font-head);
  font-weight: 700;
  border: 0 !important;
  padding: 6px 14px !important;
}

/* ==========================================================================
   NAV — cabecera propia (header.php del tema hijo), la unica del sitio:
   portada, tienda, producto, carrito, checkout y mi cuenta comparten el mismo
   markup. Valores tomados de ESPECIFICACION_CLAUDE_CODE.md seccion 6.1, punto 2.
   ========================================================================== */
.kf-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 240, 251, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kf-border);
}
.kf-nav__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo ----------------------------------------------------------------- */
/* LOGO
   Se veia pequeño por DOS motivos, y ninguno era el CSS:
     1. El PNG traia un 33% de margen vacio arriba y abajo, asi que de los 54 px
        declarados el dibujo real ocupaba solo ~36.
     2. El fondo era blanco opaco, no transparente: se leia como una tarjetita
        blanca pegada sobre el lavanda del nav.
   Ambos se corrigieron en el archivo (recorte + transparencia). Con el margen
   fuera, la misma altura ya rinde ~50% mas de logo; se sube ademas a 62 px.
   El archivo mide 417x315, asi que a 62 px de alto aguanta pantalla retina
   (124 px reales) con holgura. */
.kf-nav__logo { display: block; line-height: 0; flex: 0 0 auto; }
.kf-nav__logo img { display: block; height: 62px; width: auto; }

/* Links (bloque central) ------------------------------------------------ */
.kf-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.kf-nav__links a {
  font-family: var(--kf-font-body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--kf-text-2);
  text-decoration: none;
  white-space: nowrap;
}
.kf-nav__links a:hover { color: var(--kf-primary); text-decoration: none; }

/* Acciones (bloque derecho) --------------------------------------------- */
.kf-nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.kf-nav__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--kf-r-pill);
  background: var(--kf-primary);
  color: #fff;
  font-family: var(--kf-font-head);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 22px;
  box-shadow: 0 6px 16px rgba(123, 106, 212, .4);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.kf-nav__wa:hover { background: var(--kf-primary-dark); color: #fff; transform: translateY(-1px); }
.kf-nav__wa-ico { font-size: 15px; line-height: 1; }

.kf-nav__circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--kf-border);
  transition: border-color .2s ease, transform .2s ease;
  flex: 0 0 auto;
}
.kf-nav__circle:hover { border-color: var(--kf-primary); transform: translateY(-1px); }
.kf-nav__circle .kf-nav__ico { font-size: 18px; line-height: 1; }

.kf-nav__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--kf-r-pill);
  background: var(--kf-primary);
  color: #fff;
  font-family: var(--kf-font-head);
  font-weight: 800;
  font-size: 11px;
  border: 2px solid #fff;
}
.kf-nav__badge--cero { display: none; }

/* Iconos SVG de la cabecera (hamburguesa y panel de administracion).
   Van en SVG y no como caracter de texto porque el ☰ no existe en twemoji —el
   sustituto de emoji de WordPress— y quedaba a merced de la fuente del
   telefono. Toman el color con currentColor, igual que los del pie. */
.kf-nav__svg { width: 21px; height: 21px; display: block; fill: currentColor; }

/* El COLOR es el arreglo de fondo, no el SVG: .kf-nav__circle pinta el circulo
   de blanco y este es un <button>, que NO hereda el morado de
   `a { color: var(--kf-primary) }` como si hacen el carrito y el logo. Kadence
   le pone `color: #fff` a los botones, asi que el glifo salia blanco sobre
   blanco: contraste 1:1, invisible en movil. En escritorio nunca se noto
   porque ahi la hamburguesa esta oculta. */
.kf-nav__burger {
  display: none;
  border: 1px solid var(--kf-border);
  background: #fff;
  color: var(--kf-primary);
  cursor: pointer;
  padding: 0;
}
.kf-nav__burger:hover { color: var(--kf-primary-dark); }

/* Abierto/cerrado se dibuja solo con CSS a partir de aria-expanded, que es el
   estado que ya mantiene nav.js. Asi no hay dos fuentes de verdad. */
.kf-nav__burger-cerrar { display: none; }
.kf-nav__burger[aria-expanded="true"] .kf-nav__burger-abrir { display: none; }
.kf-nav__burger[aria-expanded="true"] .kf-nav__burger-cerrar { display: block; }

/* Panel movil ------------------------------------------------------------ */
.kf-nav__panel {
  display: flex;
  flex-direction: column;
  padding: 8px 20px 18px;
  background: var(--kf-bg);
  border-top: 1px solid var(--kf-border);
}
.kf-nav__panel a {
  padding: 13px 4px;
  font-family: var(--kf-font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--kf-text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--kf-border);
}
.kf-nav__panel a:last-child { border-bottom: 0; }
.kf-nav__panel a:hover { color: var(--kf-primary); }
.kf-nav__panel[hidden] { display: none; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .kf-nav__in { padding: 12px 20px; gap: 12px; }
  .kf-nav__links { display: none; }
  /* El acceso al panel ya NO se oculta en movil. Antes se escondia porque se le
     mostraba a todos los visitantes y estorbaba; ahora header.php solo lo
     imprime para quien tiene `edit_products`, asi que quien lo ve es porque lo
     usa — y lo usa sobre todo desde el telefono, para subir fotos de producto. */
  .kf-nav__burger { display: inline-flex; }
}
@media (max-width: 480px) {
  .kf-nav__in { padding: 10px 16px; }
  .kf-nav__logo img { height: 46px; }
  .kf-nav__wa { padding: 0; width: 44px; height: 44px; justify-content: center; border-radius: 50%; }
  .kf-nav__wa-txt { display: none; }
  .kf-nav__wa-ico { font-size: 19px; }
  .kf-nav__actions { gap: 8px; }
}

/* Al administrador le salen CUATRO circulos (WhatsApp, carrito, panel y menu).
   4x44 + 3 huecos + el logo + el padding se pasan de 320 px, que es el ancho de
   los Android de gama baja que siguen siendo comunes en Colombia — y el
   administrador es justo quien va a trabajar desde el telefono. Se aprieta el
   hueco y se bajan los circulos a 40 px, que sigue siendo objetivo tactil
   aceptable a ese tamano de pantalla. */
@media (max-width: 360px) {
  .kf-nav__actions { gap: 6px; }
  .kf-nav__circle,
  .kf-nav__wa { width: 40px; height: 40px; }
  .kf-nav__logo img { height: 40px; }
}

/* Titulo de pagina (Tienda, Carrito, Mi cuenta...) */
.page-title, .entry-hero, .entry-hero-container-inner {
  background: var(--kf-lavender) !important;
}
.page-title h1, .entry-hero h1 {
  font-family: var(--kf-font-head) !important;
  color: var(--kf-text) !important;
  font-weight: 800;
}

/* Pie de pagina */
.site-footer, .site-bottom-footer-wrap, .site-middle-footer-wrap {
  background: var(--kf-footer) !important;
  color: var(--kf-footer-text) !important;
}
.site-footer a { color: #fff !important; }
.site-footer a:hover { color: var(--kf-cyan) !important; }

/* ==========================================================================
   TIENDA — catalogo, producto, carrito y checkout con el diseno de marca
   (equivalente de los prototipos Catalogo.dc.html y Checkout.dc.html)
   ========================================================================== */

/* --- Cuadricula de productos --------------------------------------------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 22px;
  margin: 0 0 32px !important;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 14px !important;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(76, 44, 145, .13);
}
.woocommerce ul.products li.product a img {
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 12px;
  background: var(--kf-lavender);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 17.5px !important;
  font-weight: 700;
  padding: 0 !important;
  margin: 0 0 4px;
}
.woocommerce ul.products li.product .price {
  color: var(--kf-text) !important;
  font-size: 21px;
  margin: 6px 0 12px;
  display: block;
}
.woocommerce ul.products li.product .button {
  margin-top: auto !important;
  width: 100%;
  border-radius: 14px !important;
  padding: 12px 16px !important;
}

/* --- Ficha de producto ---------------------------------------------------- */
.woocommerce div.product .product_title { font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.woocommerce div.product p.price { font-size: 30px; margin: 14px 0 18px; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 22px; }
.woocommerce div.product form.cart .quantity input.qty {
  border: 1.5px solid var(--kf-border) !important;
  border-radius: var(--kf-r-input) !important;
  padding: 12px 10px;
  text-align: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding-left: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--kf-border) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--kf-lavender) !important;
  border: 0 !important;
  border-radius: var(--kf-r-pill) !important;
  margin: 0 8px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--kf-primary) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }

/* --- Carrito -------------------------------------------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--kf-border-card) !important;
  border-radius: var(--kf-r-card) !important;
  border-collapse: separate !important;
  overflow: hidden;
  background: var(--kf-surface);
}
.woocommerce table.shop_table th {
  font-family: var(--kf-font-head);
  color: var(--kf-text);
  background: var(--kf-lavender);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--kf-border-card) !important; }
.woocommerce table.shop_table img { border-radius: 12px; }

/* --- Tablas dentro de páginas de contenido -------------------------------
   Las páginas legales (/devoluciones-y-pqr/, /politicas-de-compra/,
   /politica-de-datos/) las pinta Kadence dentro de .entry-content, y el tema
   solo traía estilos para las tablas de WooCommerce. Resultado: la tabla salía
   SIN bordes ni cabecera, y las columnas parecían texto suelto desalineado —
   justo lo que no puede pasar en una tabla que dice plazos legales, donde la
   fila es la unidad de sentido ("mi situación → qué aplica → cuánto tiempo").
   Reportado el 7-sep-2026 sobre el "Resumen rápido".
   Va por elemento y no por clase a propósito: el editor de WordPress genera
   <table> pelada, así que cualquier tabla futura hereda esto sin tocar nada. */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 15.5px;
  background: var(--kf-surface, #fff);
  border: 1px solid var(--kf-border-card, #EEE9FA);
  border-radius: var(--kf-r-card, 22px);
  overflow: hidden;                 /* recorta las esquinas de la cabecera */
}
.entry-content table th,
.entry-content table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--kf-border-card, #EEE9FA);
  overflow-wrap: anywhere;          /* que una palabra larga no desborde */
}
.entry-content table thead th {
  background: var(--kf-primary, #7B6AD4);
  color: #fff;
  font-family: var(--kf-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  border-bottom: 0;
}
/* Cebra: en una tabla de plazos, seguir la fila con el ojo es lo que importa. */
.entry-content table tbody tr:nth-child(even) { background: var(--kf-lavender, #F3F0FB); }
.entry-content table tbody tr:last-child td { border-bottom: 0; }
/* La primera columna es la que se busca ("¿cuál es mi caso?"): que resalte. */
.entry-content table tbody td:first-child { font-weight: 600; color: var(--kf-text, #2C2358); }

@media (max-width: 640px) {
  /* Tres columnas en un teléfono caben si se aprieta la tipografía; forzar
     scroll horizontal esconde la tercera, que es justamente el plazo. */
  .entry-content table { font-size: 13.5px; }
  .entry-content table th,
  .entry-content table td { padding: 9px 10px; }
}
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce .cart_totals h2 { font-size: 22px; }

/* --- Checkout ------------------------------------------------------------- */
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
#order_review_heading { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.woocommerce form .form-row label { font-weight: 700; font-size: 13.5px; color: var(--kf-text-2); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection {
  border: 1.5px solid var(--kf-border) !important;
  border-radius: var(--kf-r-input) !important;
  padding: 12px 14px !important;
  height: auto !important;
  min-height: 48px;
}
.woocommerce-checkout #payment {
  background: var(--kf-lavender) !important;
  border-radius: var(--kf-r-card) !important;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--kf-surface) !important;
  border-radius: var(--kf-r-input) !important;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--kf-border) !important; }
.woocommerce #payment #place_order,
.woocommerce-checkout .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  font-size: 17px !important;
  padding: 16px 22px !important;
}

/* --- Paginacion y orden --------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul {
  border: 0 !important;
  display: flex; gap: 8px; justify-content: center;
}
/* PAGINACION CORREGIDA: circulos reales, no ovalos deformados.
   El problema era radius pill + padding asimetrico sobre un <li> inline. */
.woocommerce nav.woocommerce-pagination ul li {
  border: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  display: inline-flex;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--kf-lavender);
  color: var(--kf-primary-dark);
  font-family: var(--kf-font-head);
  font-weight: 700;
  padding: 10px 16px !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--kf-primary) !important;
  color: #fff !important;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  border: 1.5px solid var(--kf-border) !important;
  border-radius: var(--kf-r-pill) !important;
  padding: 10px 16px !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  width: 46px; height: 46px;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  line-height: 1;
  transition: transform .2s ease, background .2s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { transform: translateY(-3px) scale(1.06); }

/* LOGO PIE: 58px como indica la spec */
.site-footer .site-title, .site-footer .site-branding .site-title {
  width: 210px; height: 58px;
  background: url("kairos-logo.png") left center / contain no-repeat;
  text-indent: -9999px; overflow: hidden; display: block;
}


/* ==========================================================================
   PIE DE PAGINA — vive AQUI y no en landing.css porque aparece en todas las
   paginas del sitio, no solo en la portada. landing.css solo se encola en la
   portada, y por eso el pie salia sin estilos en Catalogo y en el checkout.
   ========================================================================== */
.kf-pie {
  background: var(--kf-footer);
  color: var(--kf-footer-text);
  padding: 54px 0 0;
}
.kf-pie__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 34px;
  align-items: start;
}
.kf-pie__logo { height: 66px; width: auto; display: block; margin-bottom: 16px; }
.kf-pie__marca p { margin: 0; font-size: 14.5px; line-height: 1.65; max-width: 34em; }
.kf-pie__col { display: flex; flex-direction: column; gap: 10px; }
.kf-pie__col h3 {
  color: #fff;
  font-family: var(--kf-font-head);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}
.kf-pie__col a {
  color: var(--kf-footer-text);
  text-decoration: none;
  font-size: 14.5px;
}
.kf-pie__col a:hover { color: #fff; }
.kf-pie__legal {
  border-top: 1px solid var(--kf-footer-border);
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 32px 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.kf-pie__por { opacity: .75; }

@media (max-width: 900px) {
  .kf-pie__in { grid-template-columns: 1fr 1fr; gap: 28px; }
  .kf-pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .kf-pie__in { grid-template-columns: 1fr; }
  .kf-pie__legal { flex-direction: column; gap: 6px; }
}


/* WooCommerce trae `.woocommerce-page img { height: auto }`, que tiene MAS
   especificidad (0,1,1) que `.kf-pie__logo` (0,1,0) y la gana en Catalogo,
   carrito y checkout: el logo del pie salia a tamano natural. Se sube la
   especificidad a (0,2,0) en vez de recurrir a !important, que solo traslada
   el problema al siguiente que quiera ajustarlo. */
.kf-pie .kf-pie__logo { height: 66px; width: auto; }

/* --- Redes sociales del pie ----------------------------------------------
   Iconos SVG en linea (ver footer.php). El color se hereda con currentColor,
   asi que basta con `color: #fff` en el circulo para que el glifo salga blanco
   sobre el pie oscuro — sin duplicar el color en cada <path>.

   44x44 px: es el minimo tactil que sigue todo el sitio (spec 6.1). Un icono de
   20 px suelto seria imposible de acertar con el pulgar. */
.kf-pie__redes {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kf-pie__redes li { display: block; }

.kf-red {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.kf-red svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}
.kf-red:hover,
.kf-red:focus-visible {
  background: var(--kf-primary);
  border-color: var(--kf-primary);
  color: #fff;
  transform: translateY(-3px);
}
.kf-red:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* WooCommerce fuerza `height: auto` en sus paginas y aplasta el circulo; se
   gana con dos clases (0,2,0) en vez de recurrir a !important, igual que se
   hizo con el logo del pie (INC-013). */
.kf-pie .kf-red { height: 44px; }

/* landing.js ya respeta prefers-reduced-motion en las animaciones de la
   portada, pero este hover se escribio solo en CSS y se quedaba fuera. El
   salto de 3px es decorativo: sin el, el icono sigue avisando que responde
   por el cambio de fondo, que es el que de verdad comunica el estado. */
@media (prefers-reduced-motion: reduce) {
  .kf-red { transition: none; }
  .kf-red:hover,
  .kf-red:focus-visible { transform: none; }
}

/* --- Estados de la solicitud mayorista -----------------------------------
   Vive AQUI y no en registro-mayorista.css por la misma razon que el pie
   (INC-013): estas tres piezas se pintan FUERA de su pagina —la franja en todo
   el sitio, la nota en la ficha de producto y la tarjeta en Mi cuenta— y
   registro-mayorista.css solo se encola en /registro-mayorista/. Si se quedan
   alla, salen sin estilos justo donde importan. */

/* Franja fina en todo el sitio. NO pegajosa y NO descartable: se va al bajar,
   y asi no necesita ni JavaScript ni cookie que recordar. */
.kf-franja-pend {
  background: var(--kf-lavender, #F3F0FB); color: var(--kf-primary-dark);
  font-size: 13.5px; text-align: center; padding: 11px 16px; line-height: 1.4;
}
.kf-nota-pend {
  font-size: 13px; color: var(--kf-warn, #C77A0E); margin: 6px 0 12px;
}
.kf-tarjeta-est { border-radius: 16px; padding: 18px 20px; margin: 0 0 22px; }
.kf-tarjeta-est h3 { margin: 0 0 8px; font-family: var(--kf-font-head); font-size: 18px; }
.kf-tarjeta-est p { margin: 0 0 10px; line-height: 1.6; }
.kf-tarjeta-est__datos { font-size: 13px; color: #8C84AE; }
/* Ambar y no rojo: estar en validacion no es un fallo del usuario. */
.kf-tarjeta-est--pend { background: #FFF8EC; border-left: 4px solid var(--kf-warn, #C77A0E); }
.kf-tarjeta-est--ok   { background: var(--kf-success-bg, #E4F5EC); border-left: 4px solid var(--kf-success, #2C6E49); }
/* El boton de la tarjeta: .kf-btn vive en landing.css, que tampoco se carga en
   Mi cuenta. Lo minimo para que no salga como un enlace suelto. */
.kf-tarjeta-est .kf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px; border-radius: var(--kf-r-pill, 999px);
  background: var(--kf-primary); color: #fff; text-decoration: none;
  font-family: var(--kf-font-head); font-weight: 700; font-size: 15px;
}
.kf-tarjeta-est .kf-btn:hover { background: var(--kf-primary-dark); color: #fff; }