/* ============================================================================
   inloff — Design tokens globales (warm minimalism 2026)
   ----------------------------------------------------------------------------
   Capa :root reutilizable por home/header/footer y futuros módulos.
   Prefijo --inloff-* para NO colisionar con los --c-* scoped del footer
   (inloff-footer.css) ni con variables de Flatsome.
   Se encola GLOBAL (todas las páginas) con prioridad baja para que cualquier
   hoja del child pueda consumirlos.
   ========================================================================= */

:root {
  /* — Color: marca — */
  --inloff-navy:        #1B2540;
  --inloff-navy-deep:   #131A2E;
  --inloff-navy-soft:   #2A3656;
  --inloff-heart:       #C5A184;
  --inloff-heart-light: #D7B89E;
  --inloff-heart-dark:  #AD8763;
  --inloff-heart-glow:  rgba(197, 161, 132, 0.45);
  /* Dos papeles del bronce, con nombre propio para que no se confundan.
     El heart y el heart-dark son colores decorativos: de línea, de icono o de
     relleno bajo texto oscuro. Como TEXTO sobre claro el heart da 2,1:1 y el
     heart-dark 3,3:1, y como RELLENO bajo texto blanco el heart-dark da 3,1:1:
     los tres suspenden AA. El bronce de abajo (el mismo --inloff-bronze que ya
     usaba el área de cliente) da 5,5:1 como texto sobre crema y 5,9:1 con
     blanco encima. Sobre navy el heart normal ya cumple (6,2:1) y se queda.
     bronze-fill NO admite texto oscuro: navy sobre él baja a 2,5:1. */
  --inloff-bronze-text: var(--inloff-bronze);
  --inloff-bronze-fill: var(--inloff-bronze);
  --inloff-cream:       #F2E8D5; /* unificada a la crema cálida canónica (antes #FAF7F2); la PDP ya la usaba */
  --inloff-cream-light: #FDFBF7;
  --inloff-cream-warm:  #F5EFE5;
  --inloff-cream-deep:  #EFE7D9;

  /* — Color: texto — */
  --inloff-ink:         #2C2C2C;
  --inloff-ink-soft:    #4A4A4A;
  --inloff-muted:       #6B6B6B;
  --inloff-on-navy:     #FAF7F2;
  --inloff-on-navy-soft: rgba(250, 247, 242, 0.78);
  --inloff-on-navy-muted: rgba(250, 247, 242, 0.52);

  /* — Líneas / divisores — */
  --inloff-line:        rgba(27, 37, 64, 0.10);
  --inloff-line-strong: rgba(27, 37, 64, 0.16);
  --inloff-line-heart:  rgba(197, 161, 132, 0.30);
  /* Base rgb del navy canónico (#1B2540) para componer rgba() por token
     (antes se usaba el navy divergente 27,43,75 en varias hojas). */
  --inloff-navy-rgb:    27, 37, 64;
  --inloff-heart-rgb:   197, 161, 132;

  /* — Superficies + líneas cálidas (opacas) —
     Blanco de card y beiges de borde que las hojas usaban en hex literal. */
  --inloff-surface:          #FFFFFF;
  --inloff-line-warm:        #E8E2D5; /* borde beige de panel/card */
  --inloff-line-warm-soft:   #F0EBE2; /* divisor de fila, más claro */
  --inloff-line-warm-strong: #D8D3C8; /* borde beige acentuado */

  /* — Estado semántico (canonizado desde los literales de Mi cuenta) —
     Cada estado: base (icono/texto) · ink (texto oscuro sobre soft) ·
     soft (fondo tenue) · line (borde). El color NUNCA es único portador:
     acompañar siempre de icono/etiqueta (convención de marca). */
  --inloff-success:      #4A7C59;  --inloff-success-ink:  #2D4D36;
  --inloff-success-soft: #EAF3EC;  --inloff-success-line: #CBE3CE;
  --inloff-error:        #C0392B;  --inloff-error-ink:    #6E2A22;
  --inloff-error-soft:   #FBE8E6;  --inloff-error-line:   #F0CFCB;
  --inloff-warning:      #E8A020;  --inloff-warning-ink:  #B8830C;
  --inloff-warning-soft: #FBEFD5;  --inloff-warning-line: #F2D88E;
  --inloff-info:         #2A3656;  /* = navy-soft; no había info previo */

  /* — Tipografía — */
  --inloff-font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  /* O2.13 (D6 audit 2026-05-30): cambio body font Nunito Sans (heredado de
     Flatsome) → Outfit (gratuita Google Fonts, pareja moderna con Playfair).
     Se carga desde wp_enqueue_scripts pri 5 en functions.php junto a este
     mismo file. */
  --inloff-font-sans:   'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* — Radios — */
  --inloff-radius-sm:   8px;
  --inloff-radius:      14px;
  --inloff-radius-lg:   22px;
  --inloff-radius-pill: 999px;

  /* — Sombras (difusas y cálidas, nunca duras) — */
  --inloff-shadow-sm:   0 2px 10px rgba(27, 37, 64, 0.06);
  --inloff-shadow:      0 14px 40px rgba(27, 37, 64, 0.10);
  --inloff-shadow-hover: 0 24px 56px rgba(27, 37, 64, 0.18);

  /* — Layout — */
  --inloff-max:         1170px;

  /* — Escala de espaciado — */
  --inloff-s1: 8px;
  --inloff-s2: 16px;
  --inloff-s3: 24px;
  --inloff-s4: 40px;
  --inloff-s5: 64px;
  --inloff-s6: 96px;

  /* — Área de cliente (ADR-150 · rediseño "Hoja de ruta de taller") —
     Tokens propios del panel: papel/hairline/campo, gris cálido, bronce de
     atención, discos de tier y duraciones de motion contenida. */
  --inloff-bronze:      #7E5E3B;  /* label de nota del taller, atención, débitos (5,7:1 sobre cream-light) */
  --inloff-hairline:    #E6DCC8;  /* línea del libro de cuentas y divisores del área */
  --inloff-muted-warm:  #6B6560;  /* gris cálido de meta/hints (5,6:1 sobre cream-light) */
  --inloff-field-line:  #968F80;  /* borde de inputs/selects/checks (3,2:1 — WCAG 1.4.11) */
  --inloff-cream-50:    rgba(242, 232, 213, 0.5); /* hover de fila y de chip */
  --inloff-shadow-card: 0 8px 24px rgba(27, 37, 64, 0.06); /* sombra tinta de la ficha */
  --inloff-ring:        0 0 0 3px rgba(27, 37, 64, 0.14);  /* anillo de foco de campo */
  --inloff-dur-fast:    220ms;
  --inloff-dur-grow:    600ms;
  --inloff-stagger:     40ms;
  --inloff-tier-semilla:  #E3D3BC;
  --inloff-tier-artesano: var(--inloff-heart);
  --inloff-tier-maestro:  var(--inloff-bronze);
  --inloff-ico:         20px;
  /* Alto del header sticky de Flatsome (lo publica su JS en runtime) + 24px.
     Se usa como top del índice sticky y como scroll-margin de anclas/foco. */
  --inloff-header-offset: calc(var(--flatsome--header--sticky-height, 0px) + 24px);

  /* — Motion — */
  --inloff-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --inloff-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --inloff-dur:         0.45s;
}

/* ============================================================================
   Override global body font (O2.13).
   Flatsome pone `body { font-family: 'Nunito Sans', sans-serif }` vía la
   inline CSS de Customizer. Necesita `!important` para ganar la cascada
   (la inline lleva alta specificity). Headings serif (Playfair) NO se tocan
   — solo body/UI/labels/datos heredan Outfit.
   ========================================================================= */
body,
button,
input,
optgroup,
select,
textarea {
    font-family: var(--inloff-font-sans) !important;
}

/* ============================================================================
   O2.14 — Tabular-nums global en precios (WC + custom).
   Outfit soporta `tabular-nums` (todos sus glyphs numéricos tienen el mismo
   advance width). Esto alinea las cifras en columnas: importes en cards de
   loop, totales del cart, tablas de precios bulk, líneas de checkout, etc.
   Solo afecta a la métrica horizontal de los dígitos — el tipo es el mismo.
   ========================================================================= */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.amount,
del .amount,
ins .amount,
.cart-subtotal .amount,
.order-total .amount,
.cart-discount .amount,
.product-price,
.price ins,
.price del,
.inloff-pc__price,
.inloff-cat-toolbar__count,
.cart-price,
.inloff-cart-fragment-amount,
[data-tabular-nums],
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Stripe Express Checkout — Link deshabilitado GLOBALMENTE.
 * El botón "Pagar con link" (Stripe Link) es verde de marca propia, no
 * recoloreable a navy (el theme ya usa button_theme=dark). Lo ocultamos en
 * TODAS las superficies donde el ECE puede aparecer (product/cart/checkout)
 * para no romper la paleta. Quedan Apple Pay + Google Pay (negros). El iframe
 * de Link sigue en el DOM pero oculto; las reglas de collapse de cart/checkout
 * keyean en los iframes de Apple/Google, así que Link no las afecta.
 * Cubre O2.5 (PDP) + C3.3 (cart/checkout). Área 2/3.
 * ------------------------------------------------------------------------- */
#wc-stripe-express-checkout-element-link {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Compatibilidad con Flatsome — columnas con ancho máximo, centradas
 *
 * Flatsome trae, a partir de 850 px:
 *     .col:first-child .col-inner { margin-left: auto; margin-right: 0 }
 * Es inerte mientras la columna ocupa el 100 %, pero en cuanto el constructor
 * le pone un `max_width` —que Flatsome resuelve con un <style> por ID— el
 * `auto` de la izquierda se come todo el hueco libre y la caja se pega al
 * borde DERECHO de su columna. El texto sigue centrado dentro de su caja, así
 * que no se lee como un fallo de alineación sino como un bloque descuadrado.
 *
 * No se puede enganchar por el ID de la columna: Flatsome lo regenera en cada
 * render, así que hace falta una regla que gane por especificidad (0-4-1
 * contra la 0-3-0 de Flatsome, sin `!important` y sin depender del orden).
 *
 * OPT-IN, no catch-all, y esto es lo importante: centrar es una decisión de
 * PÁGINA. «Cómo funciona» centra sus nueve secciones y le sienta bien; las
 * demás alinean a bandera izquierda contra el raíl de x=147,5 y ya traen su
 * propio `margin-left: 0` para conseguirlo. Un selector que cogiera a todas
 * las `inloff-pag-*` pisaría esas decisiones en silencio: se probó y descuadró
 * el h1 de sostenibilidad 155 px, la cabecera de cifras de nuestra historia
 * 205 y dos cabeceras de tipos de personalización 185, dejando páginas con dos
 * raíles de arranque distintos. Cada página que quiera centrar, que se apunte.
 * ------------------------------------------------------------------------- */
body.inloff-pag-como-funciona .col:first-child > .col-inner {
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * Páginas editoriales que terminan en banda a todo ancho
 *
 * Flatsome reserva 30 px bajo la última `.col` y otros 30 en el envoltorio de
 * contenido. En una página que acaba en crema no se nota; en una que acaba en
 * una banda navy a todo ancho deja un filo blanco de 60 px entre la banda y el
 * pie, y la página se lee como si le faltara el remate.
 *
 * `#main` conserva su reserva (84 px por debajo de 850 px) para que la barra
 * fija del móvil no tape el final: eso no se toca aquí.
 * ------------------------------------------------------------------------- */
body[class*="inloff-pag-"] #content.page-wrapper {
    padding-bottom: 0;

    /* Y arriba lo mismo, por el mismo motivo. Flatsome reserva 30 px en
       `.page-wrapper` para separar el contenido del header, lo cual está bien
       cuando el contenido empieza con texto sobre el fondo de la página. Estas
       seis empiezan con una banda de color a sangre completa, así que esos
       30 px se ven como una tira de crema entre el menú y la banda: parece que
       la página no ha cargado del todo. Medido en /tarjeta-regalo/: la banda
       del héroe arrancaba en y=194 con el contenido en y=164. */
    padding-top: 0;
}

/* El hueco de abajo tiene otro dueño: `.col` de Flatsome lleva
   `padding-bottom: 30px` para separar columnas apiladas, y la columna única
   que envuelve toda la página se lo come igual. Solo la de primer nivel —las
   columnas de dentro (pasos, razones, FAQ) sí necesitan su separación—. */
body[class*="inloff-pag-"] #content.page-wrapper > .row > .col {
    padding-bottom: 0;
}