/*
Theme Name:     CuentaCalc Child
Theme URI:      https://contapractica.com.mx
Description:    Child theme of Twenty Twenty-Five for CuentaCalc — modern UI with custom header/footer, homepage, brand tokens.
Author:         CuentaCalc
Author URI:     https://contapractica.com.mx
Template:       twentytwentyfive
Version:        0.3.3
License:        GPL-2.0-or-later
License URI:    https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    contapractica-child
*/

/* ============================================================
   Tokens (mirrors plugin base.css)
   ============================================================ */

:root {
  --cp-primary: #1C4E80;
  --cp-primary-50: #EEF3F9;
  --cp-primary-100: #D6E4F1;
  --cp-primary-200: #A8C6E2;
  --cp-primary-500: #1C4E80;
  --cp-primary-600: #16406A;
  --cp-primary-700: #0F2F50;
  --cp-primary-900: #0B2138;

  --cp-accent: #B5872E;
  --cp-accent-50: #FAF5E9;
  --cp-accent-500: #B5872E;
  --cp-accent-600: #946C22;

  --cp-bg: #F5F8FB;
  --cp-surface: #FFFFFF;
  --cp-surface-soft: #EEF2F7;
  --cp-text: #0F2138;
  --cp-text-soft: #34465C;
  --cp-text-muted: #5C6B7E;
  --cp-border: #DDE5EE;
  --cp-border-strong: #C3D0DD;

  --cp-1: 0.25rem;
  --cp-2: 0.5rem;
  --cp-3: 0.75rem;
  --cp-4: 1rem;
  --cp-5: 1.25rem;
  --cp-6: 1.5rem;
  --cp-8: 2rem;
  --cp-10: 2.5rem;
  --cp-12: 3rem;
  --cp-16: 4rem;
  --cp-20: 5rem;

  --cp-r-sm: 6px;
  --cp-r-md: 10px;
  --cp-r-lg: 14px;
  --cp-r-xl: 20px;

  --cp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --cp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07);
  --cp-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10);

  --cp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cp-dur-fast: 150ms;
  --cp-dur-base: 220ms;

  --cp-header-h: 72px;

  /* Typography (v0.3 redesign) */
  --cp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --cp-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --cp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Extra depth + per-pillar accents (v0.3) */
  --cp-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --cp-ring: 0 0 0 3px rgba(28, 78, 128, 0.35);
  --cp-pillar-1: #1C4E80; /* Contabilidad - primary blue */
  --cp-pillar-2: #2F6FB0; /* Estados financieros - lighter blue */
  --cp-pillar-3: #B5872E; /* Fiscal - gold */
  --cp-pillar-4: #2E7D72; /* Análisis - muted teal */
  --cp-pillar-5: #9B6A3C; /* Finanzas personales - bronze */
}

/* ============================================================
   Reset + base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body.cp-body {
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: var(--cp-font-sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a {
  color: var(--cp-primary);
  text-decoration: none;
  transition: color var(--cp-dur-fast) var(--cp-ease);
}

a:hover, a:focus-visible { color: var(--cp-primary-700); }

.cp-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--cp-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  z-index: 100;
}
.cp-skip-link:focus { top: 0; color: #fff; }

.cp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--cp-5);
}

@media (min-width: 768px) {
  .cp-container { padding: 0 var(--cp-8); }
}

/* ============================================================
   Site header (custom — replaces TT5 default)
   ============================================================ */

.cp-site-header {
  border-bottom: 1px solid var(--cp-border);
  position: sticky;
  top: 0;
  z-index: 50;
  /* No backdrop-filter: it would become the containing block for the
     fixed-position mobile nav panel, collapsing it into the header height. */
  background: rgba(255, 255, 255, 0.96);
}

.cp-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-5);
  height: var(--cp-header-h);
}

/* Logo */

.cp-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--cp-text);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.cp-logo:hover { color: var(--cp-primary); }

.cp-logo__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cp-logo__text {
  font-feature-settings: 'ss01';
}

/* Mobile nav toggle (hamburger) */

.cp-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-md);
  padding: 0;
  cursor: pointer;
  margin-left: auto;
}

.cp-nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cp-text);
  margin: 0 auto;
  border-radius: 1px;
  transition: transform var(--cp-dur-fast) var(--cp-ease), opacity var(--cp-dur-fast);
}

.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bar:nth-child(2) { opacity: 0; }
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Primary nav (mobile-first) */

.cp-primary-nav {
  position: fixed;
  top: var(--cp-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cp-surface);
  padding: var(--cp-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--cp-dur-base) var(--cp-ease);
  visibility: hidden;
}

.cp-primary-nav--open {
  transform: translateX(0);
  visibility: visible;
}

body.cp-nav-locked { overflow: hidden; }

.cp-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cp-1);
}

.cp-nav-list > li > a {
  display: block;
  padding: var(--cp-3) var(--cp-4);
  border-radius: var(--cp-r-md);
  color: var(--cp-text);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.cp-nav-list > li > a:hover,
.cp-nav-list > li > a:focus-visible {
  background: var(--cp-primary-50);
  color: var(--cp-primary-700);
}

.cp-nav-sub {
  list-style: none;
  margin: 0;
  padding: var(--cp-2) 0 var(--cp-2) var(--cp-4);
  display: none;
  border-left: 2px solid var(--cp-border);
  margin-left: var(--cp-4);
}

.cp-nav-list__has-children--open > .cp-nav-sub {
  display: block;
}

.cp-nav-sub > li > a {
  display: block;
  padding: var(--cp-2) var(--cp-3);
  color: var(--cp-text-soft);
  font-size: 0.9375rem;
  border-radius: var(--cp-r-sm);
}

.cp-nav-sub > li > a:hover {
  background: var(--cp-primary-50);
  color: var(--cp-primary-700);
}

.cp-nav-list__cta {
  background: var(--cp-primary) !important;
  color: #fff !important;
  text-align: center;
  margin-top: var(--cp-3);
}

.cp-nav-list__cta:hover {
  background: var(--cp-primary-700) !important;
}

/* Desktop nav (≥900px) */

@media (min-width: 900px) {
  .cp-nav-toggle { display: none; }

  .cp-primary-nav {
    position: static;
    transform: none;
    visibility: visible;
    background: transparent;
    padding: 0;
    overflow: visible;
  }

  .cp-nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--cp-1);
  }

  .cp-nav-list > li > a {
    padding: var(--cp-2) var(--cp-4);
    font-size: 0.9375rem;
  }

  .cp-nav-list__has-children { position: relative; }

  .cp-nav-sub {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r-lg);
    box-shadow: var(--cp-shadow-md);
    padding: var(--cp-2);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--cp-dur-fast), transform var(--cp-dur-fast), visibility var(--cp-dur-fast);
  }

  .cp-nav-list__has-children:hover > .cp-nav-sub,
  .cp-nav-list__has-children:focus-within > .cp-nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .cp-nav-list__cta {
    margin-top: 0;
    margin-left: var(--cp-3);
    padding: 0.5rem 1.125rem !important;
    border-radius: var(--cp-r-md);
  }
}

/* ============================================================
   Homepage
   ============================================================ */

.cp-homepage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--cp-5);
}

@media (min-width: 768px) {
  .cp-homepage { padding: 0 var(--cp-8); }
}

/* Hero */

.cp-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-8);
  padding: var(--cp-16) 0 var(--cp-12);
  align-items: center;
  position: relative;
}

.cp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(28, 78, 128, 0.08), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(181, 135, 46, 0.05), transparent 35%);
  z-index: -1;
}

@media (min-width: 900px) {
  .cp-hero {
    grid-template-columns: 1.2fr 1fr;
    padding: var(--cp-20) 0 var(--cp-16);
  }
}

.cp-hero__heading {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 var(--cp-4);
  color: var(--cp-text);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.cp-hero__sub {
  font-size: 1.125rem;
  color: var(--cp-text-soft);
  margin: 0 0 var(--cp-6);
  max-width: 45ch;
  line-height: 1.55;
}

.cp-hero__ctas {
  display: flex;
  gap: var(--cp-3);
  flex-wrap: wrap;
}

.cp-hero__cta--primary,
.cp-hero__cta--secondary {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  border-radius: var(--cp-r-md);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 1rem;
  transition: all var(--cp-dur-fast) var(--cp-ease);
}

.cp-hero__cta--primary {
  background: var(--cp-primary);
  color: #fff;
  box-shadow: var(--cp-shadow-sm);
}

.cp-hero__cta--primary:hover {
  background: var(--cp-primary-700);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-md);
}

.cp-hero__cta--secondary {
  background: var(--cp-surface);
  color: var(--cp-primary);
  border-color: var(--cp-border);
}

.cp-hero__cta--secondary:hover {
  background: var(--cp-primary-50);
  color: var(--cp-primary-700);
}

.cp-hero__image {
  background:
    linear-gradient(135deg, var(--cp-primary-100) 0%, #fff 50%, var(--cp-accent-50) 100%);
  border-radius: var(--cp-r-xl);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  box-shadow: var(--cp-shadow-md);
  border: 1px solid var(--cp-border);
}

/* Sections */

.cp-section {
  padding: var(--cp-12) 0;
}

@media (min-width: 768px) {
  .cp-section { padding: var(--cp-16) 0; }
}

.cp-section__heading {
  font-size: clamp(1.625rem, 3vw, 2rem);
  font-weight: 800;
  margin: 0 0 var(--cp-2);
  color: var(--cp-text);
  letter-spacing: -0.02em;
}

.cp-section__sub {
  color: var(--cp-text-muted);
  margin: 0 0 var(--cp-8);
  max-width: 65ch;
  font-size: 1.0625rem;
}

/* Tool grid */

.cp-tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-5);
}

@media (min-width: 600px) { .cp-tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cp-tool-grid { grid-template-columns: repeat(3, 1fr); } }

.cp-tool-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-lg);
  padding: var(--cp-6);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: all var(--cp-dur-base) var(--cp-ease);
}

.cp-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cp-shadow-md);
  border-color: var(--cp-primary-200);
  color: inherit;
}

.cp-tool-card[data-status="próximamente"] {
  opacity: 0.7;
}

.cp-tool-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cp-r-md);
  background: linear-gradient(135deg, var(--cp-primary-100), var(--cp-primary-50));
  color: var(--cp-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--cp-3);
  font-weight: 700;
}

.cp-tool-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--cp-2);
  color: var(--cp-text);
  letter-spacing: -0.005em;
}

.cp-tool-card__desc {
  color: var(--cp-text-muted);
  margin: 0 0 var(--cp-4);
  flex-grow: 1;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.cp-tool-card__cta {
  color: var(--cp-primary);
  font-weight: 600;
  font-size: 0.9375rem;
}

.cp-tool-card__cta--soon {
  color: var(--cp-text-muted, #64748b);
  font-weight: 500;
}

/* Pillar grid */

.cp-pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-4);
}

@media (min-width: 700px) {
  .cp-pillar-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .cp-pillar-grid { grid-template-columns: repeat(3, 1fr); }
}

.cp-pillar-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-left: 4px solid var(--cp-primary);
  border-radius: var(--cp-r-md);
  padding: var(--cp-5);
  text-decoration: none;
  color: inherit;
  transition: transform var(--cp-dur-base) var(--cp-ease), box-shadow var(--cp-dur-base) var(--cp-ease);
}

.cp-pillar-card:hover {
  transform: translateX(2px);
  box-shadow: var(--cp-shadow-sm);
  color: inherit;
}

.cp-pillar-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--cp-2);
  color: var(--cp-text);
}

.cp-pillar-card__desc {
  margin: 0 0 var(--cp-3);
  color: var(--cp-text-muted);
  font-size: 0.9375rem;
}

.cp-pillar-card__meta {
  font-size: 0.875rem;
  color: var(--cp-primary);
  font-weight: 600;
}

/* Trust strip */

.cp-trust-strip {
  background: linear-gradient(135deg, var(--cp-primary-50) 0%, var(--cp-accent-50) 100%);
  padding: var(--cp-10) 0;
}

.cp-trust-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-6);
}

@media (min-width: 700px) {
  .cp-trust-strip__grid { grid-template-columns: repeat(3, 1fr); }
}

.cp-trust-badge {
  text-align: center;
}

.cp-trust-badge__icon {
  font-size: 1.5rem;
  color: var(--cp-primary-700);
  display: block;
  margin-bottom: var(--cp-2);
}

.cp-trust-badge__title {
  font-weight: 700;
  margin: 0 0 var(--cp-1);
  color: var(--cp-text);
}

.cp-trust-badge__desc {
  font-size: 0.9375rem;
  color: var(--cp-text-soft);
  margin: 0;
}

/* Author block */

.cp-author {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-lg);
  padding: var(--cp-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-5);
}

@media (min-width: 600px) {
  .cp-author {
    grid-template-columns: 120px 1fr;
    align-items: start;
  }
}

.cp-author__photo {
  width: 120px;
  height: 120px;
  flex: 0 0 120px;        /* never grow/shrink in a flex container */
  aspect-ratio: 1 / 1;    /* stay square even if a parent tries to stretch it */
  align-self: start;      /* don't stretch to the row/column height */
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cp-primary) 0%, var(--cp-primary-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  line-height: 1;
  color: #fff;
  font-weight: 700;
  box-shadow: var(--cp-shadow-sm);
}

.cp-author__body p { margin: 0 0 var(--cp-3); }
.cp-author__name { font-weight: 700; color: var(--cp-text); }

/* ============================================================
   Footer
   ============================================================ */

.cp-footer {
  background: var(--cp-primary-900);
  color: #A7B6C9;
  padding: var(--cp-12) 0 var(--cp-6);
  margin-top: var(--cp-16);
}

.cp-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--cp-5);
}

@media (min-width: 768px) {
  .cp-footer__container { padding: 0 var(--cp-8); }
}

.cp-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-8);
  margin-bottom: var(--cp-8);
}

@media (min-width: 700px) {
  .cp-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.cp-footer__col--brand { max-width: 320px; }

.cp-logo--footer .cp-logo__text { color: #fff; }
.cp-footer__tagline {
  margin-top: var(--cp-3);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.cp-footer__column-title {
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  margin: 0 0 var(--cp-3);
}

.cp-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cp-footer__list li { margin-bottom: var(--cp-2); }

.cp-footer__list a {
  color: #94A3B8;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--cp-dur-fast);
}

.cp-footer__list a:hover { color: #fff; }

.cp-footer__bottom {
  border-top: 1px solid #1E293B;
  padding-top: var(--cp-5);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: var(--cp-2);
  text-align: center;
}

.cp-footer__bottom p { margin: 0; }
.cp-footer__bottom a { color: #94A3B8; }
.cp-footer__bottom a:hover { color: #fff; }

.cp-disclaimer-bottom {
  font-size: 0.8125rem;
  color: #64748B;
  max-width: 70ch;
  margin: 0 auto !important;
  line-height: 1.5;
}

/* ============================================================
   Article content within pages
   ============================================================ */

.cp-main {
  min-height: 60vh;
}

.cp-main .wp-block-heading,
.cp-main h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--cp-10) 0 var(--cp-3);
  color: var(--cp-text);
  letter-spacing: -0.015em;
}

.cp-main h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: var(--cp-6) 0 var(--cp-2);
}

.cp-main p { margin: 0 0 var(--cp-4); line-height: 1.65; }

.cp-main ul, .cp-main ol {
  margin: 0 0 var(--cp-4);
  padding-left: var(--cp-6);
  line-height: 1.65;
}

.cp-main li { margin-bottom: var(--cp-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Articles, archives, pages, prose (classic templates)
   ============================================================ */

.cp-main { padding: var(--cp-8) 0 var(--cp-10); }
.cp-container--narrow { max-width: 760px; }

/* Breadcrumbs */
.cp-breadcrumbs {
  font-size: 0.875rem;
  color: var(--cp-text-muted);
  margin-bottom: var(--cp-5);
}
.cp-breadcrumbs a { color: var(--cp-text-muted); text-decoration: none; }
.cp-breadcrumbs a:hover { color: var(--cp-primary); }
.cp-breadcrumbs__sep { margin: 0 0.4rem; opacity: 0.5; }
.cp-breadcrumbs__current { color: var(--cp-text); }

/* Generic page */
.cp-page__header { margin-bottom: var(--cp-6); }
.cp-page__title { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; }

/* Article (single post) */
.cp-article__header { margin-bottom: var(--cp-6); }
.cp-article__title {
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--cp-3);
}
.cp-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--cp-text-muted);
}
.cp-article__sep { opacity: 0.5; }
.cp-article__hero { margin: 0 0 var(--cp-6); border-radius: var(--cp-r-lg); overflow: hidden; }
.cp-article__hero img { width: 100%; height: auto; }

.cp-article__footer { margin-top: var(--cp-8); padding-top: var(--cp-6); border-top: 1px solid var(--cp-border); }
.cp-author--inline { display: flex; gap: var(--cp-4); align-items: flex-start; }

/* Prose typography (article + page body) */
.cp-prose { font-size: 1.0625rem; line-height: 1.75; color: var(--cp-text); }
.cp-prose > * + * { margin-top: var(--cp-4); }
.cp-prose h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: var(--cp-8);
  margin-bottom: var(--cp-2);
}
.cp-prose h3 { font-size: 1.1875rem; margin-top: var(--cp-6); margin-bottom: var(--cp-2); }
.cp-prose a { color: var(--cp-primary); text-decoration: underline; text-underline-offset: 2px; }
.cp-prose a:hover { color: var(--cp-primary-700); }
.cp-prose ul, .cp-prose ol { padding-left: 1.4rem; }
.cp-prose li { margin-bottom: var(--cp-2); }
.cp-prose strong { color: var(--cp-text); }
.cp-prose .wp-block-table { overflow-x: auto; margin: var(--cp-5) 0; }
.cp-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.cp-prose th, .cp-prose td { padding: var(--cp-2) var(--cp-3); border: 1px solid var(--cp-border); text-align: left; }
.cp-prose thead th { background: var(--cp-primary-50); color: var(--cp-primary-700); }
.cp-prose tbody tr:nth-child(even) { background: var(--cp-surface-soft); }

/* Archive header */
.cp-archive__header { margin-bottom: var(--cp-7); }
.cp-archive__title { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.02em; }
.cp-archive__desc { margin-top: var(--cp-3); color: var(--cp-text-muted); }

/* Article card grid */
.cp-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-5);
}
@media (min-width: 600px) { .cp-article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cp-article-grid { grid-template-columns: repeat(3, 1fr); } }

.cp-article-card {
  display: flex;
  flex-direction: column;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--cp-dur-base) var(--cp-ease), box-shadow var(--cp-dur-base) var(--cp-ease), border-color var(--cp-dur-base) var(--cp-ease);
}
.cp-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: var(--cp-primary-200);
}
.cp-article-card__thumb img { width: 100%; height: 160px; object-fit: cover; }
.cp-article-card__body { display: flex; flex-direction: column; gap: var(--cp-2); padding: var(--cp-5); }
.cp-article-card__cat {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-primary);
}
.cp-article-card__title { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; }
.cp-article-card__excerpt { font-size: 0.9375rem; color: var(--cp-text-muted); line-height: 1.55; }
.cp-article-card__cta { margin-top: auto; font-weight: 600; font-size: 0.9375rem; color: var(--cp-primary); }

/* Pagination */
.cp-pagination { margin-top: var(--cp-8); }
.cp-pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  margin: 0 2px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-md);
  text-decoration: none;
  color: var(--cp-text);
}
.cp-pagination .page-numbers.current { background: var(--cp-primary); color: #fff; border-color: var(--cp-primary); }
.cp-pagination .page-numbers:hover:not(.current) { border-color: var(--cp-primary); color: var(--cp-primary); }

/* Search + empty + 404 */
.cp-search-list { list-style: none; margin: 0; padding: 0; }
.cp-search-item { padding: var(--cp-4) 0; border-bottom: 1px solid var(--cp-border); }
.cp-search-item h2 { font-size: 1.25rem; }
.cp-search-item a { text-decoration: none; color: var(--cp-text); }
.cp-search-item a:hover { color: var(--cp-primary); }
.cp-empty { color: var(--cp-text-muted); padding: var(--cp-8) 0; }
.cp-404 { text-align: center; padding: var(--cp-10) 0; }
.cp-404__title { font-size: 4rem; color: var(--cp-primary); line-height: 1; }
.cp-404__lead { font-size: 1.125rem; color: var(--cp-text-muted); margin: var(--cp-3) 0 var(--cp-6); }
.cp-404 .cp-button { margin: 0 var(--cp-2); }

/* "Ver todas" link under a homepage section */
.cp-section__more { text-align: center; margin-top: var(--cp-6); }

/* ============================================================
   ============================================================
   v0.3 REDESIGN LAYER — typography, depth, motion, dark mode
   (cascades over the base rules above)
   ============================================================
   ============================================================ */

/* ---- Tier 1: display typography ---- */
.cp-hero__heading,
.cp-section__heading,
.cp-tool-card__title,
.cp-pillar-card__title,
.cp-article-card__title,
.cp-page__title,
.cp-article__title,
.cp-archive__title,
.cp-tool-page__title,
.cp-tool__heading,
.cp-result__heading,
.cp-404__title,
.cp-main h2, .cp-main h3,
.cp-prose h2, .cp-prose h3,
.cp-tool-page__main h2, .cp-tool-page__main h3 {
  font-family: var(--cp-font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.cp-hero__heading,
.cp-page__title,
.cp-article__title,
.cp-archive__title,
.cp-tool-page__title {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.cp-section__heading { font-weight: 600; line-height: 1.12; }
.cp-logo__text { font-family: var(--cp-font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.02em; }

/* Tabular, ledger-style figures everywhere numbers matter */
.cp-cell--num,
.cp-result__heading,
.cp-progress-card__level-num,
.cp-stat dd,
.cp-hero__stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Slightly larger, airier prose for readability */
.cp-prose { font-size: 1.075rem; line-height: 1.78; }

/* ---- Tier 1: atmosphere & depth ---- */

/* Subtle page-wide grain/dot texture behind everything (very low opacity) */
body.cp-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(28, 78, 128, 0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
}
.cp-site-header, .cp-main, .cp-footer, .cp-trust-strip, .cp-tool-page__hero { position: relative; z-index: 1; }

/* Header gains a soft shadow + display logo */
.cp-site-header {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
}

/* Hero: richer mesh + staggered entrance */
.cp-hero::before {
  background:
    radial-gradient(60% 80% at 92% 0%, rgba(28, 78, 128, 0.12), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(181, 135, 46, 0.10), transparent 55%),
    radial-gradient(40% 50% at 50% 120%, rgba(30, 64, 175, 0.06), transparent 60%);
}
.cp-hero__heading { background: none; }
.cp-hero__heading .cp-hero__accent,
.cp-hero__heading em { font-style: normal; color: var(--cp-primary); }

@media (prefers-reduced-motion: no-preference) {
  .cp-hero__heading { animation: cp-rise 0.7s var(--cp-ease) both; }
  .cp-hero__sub { animation: cp-rise 0.7s var(--cp-ease) 0.08s both; }
  .cp-hero__ctas { animation: cp-rise 0.7s var(--cp-ease) 0.16s both; }
  .cp-hero__image { animation: cp-rise 0.8s var(--cp-ease) 0.22s both; }
}
@keyframes cp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Hero visual reads as a layered, glossy card */
.cp-hero__image {
  background:
    radial-gradient(120% 120% at 0% 0%, var(--cp-primary-100), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, var(--cp-primary-50) 55%, var(--cp-accent-50) 100%);
  box-shadow: var(--cp-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Section eyebrow accent above headings */
.cp-section__heading::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  margin-bottom: var(--cp-4);
  background: linear-gradient(90deg, var(--cp-primary), var(--cp-accent));
}

/* ---- Tier 2: cards ---- */

/* Tool cards: animated top accent bar + lifted icon */
.cp-tool-card { position: relative; overflow: hidden; }
.cp-tool-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cp-primary), var(--cp-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cp-dur-base) var(--cp-ease);
}
.cp-tool-card:hover { box-shadow: var(--cp-shadow-lg); border-color: var(--cp-primary-200); }
.cp-tool-card:hover::before { transform: scaleX(1); }
.cp-tool-card__icon { box-shadow: 0 6px 14px -6px rgba(28, 78, 128, 0.5); }

/* Pillar cards: per-topic accent colour + modern hover */
.cp-pillar-card { border-left-width: 4px; transition: transform var(--cp-dur-base) var(--cp-ease), box-shadow var(--cp-dur-base) var(--cp-ease), border-color var(--cp-dur-base) var(--cp-ease); }
.cp-pillar-card:hover { transform: translateY(-3px); box-shadow: var(--cp-shadow-md); }
.cp-pillar-grid > .cp-pillar-card:nth-child(1) { border-left-color: var(--cp-pillar-1); }
.cp-pillar-grid > .cp-pillar-card:nth-child(2) { border-left-color: var(--cp-pillar-2); }
.cp-pillar-grid > .cp-pillar-card:nth-child(3) { border-left-color: var(--cp-pillar-3); }
.cp-pillar-grid > .cp-pillar-card:nth-child(4) { border-left-color: var(--cp-pillar-4); }
.cp-pillar-grid > .cp-pillar-card:nth-child(5) { border-left-color: var(--cp-pillar-5); }
.cp-pillar-grid > .cp-pillar-card:nth-child(1) .cp-pillar-card__meta { color: var(--cp-pillar-1); }
.cp-pillar-grid > .cp-pillar-card:nth-child(2) .cp-pillar-card__meta { color: var(--cp-pillar-2); }
.cp-pillar-grid > .cp-pillar-card:nth-child(3) .cp-pillar-card__meta { color: var(--cp-pillar-3); }
.cp-pillar-grid > .cp-pillar-card:nth-child(4) .cp-pillar-card__meta { color: var(--cp-pillar-4); }
.cp-pillar-grid > .cp-pillar-card:nth-child(5) .cp-pillar-card__meta { color: var(--cp-pillar-5); }

/* Article cards: brighter category chip */
.cp-article-card__cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cp-primary-50);
  color: var(--cp-primary-700);
  align-self: flex-start;
}

/* ---- Tier 2: tool form + result polish ---- */
.cp-form__input, .cp-form__select, .cp-form__textarea { transition: border-color var(--cp-dur-fast), box-shadow var(--cp-dur-fast), background-color var(--cp-dur-fast); }
.cp-form__input:hover, .cp-form__select:hover, .cp-form__textarea:hover { border-color: var(--cp-border-strong); }

fieldset.cp-form__fieldset {
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-lg);
  padding: var(--cp-4) var(--cp-5) var(--cp-5);
  margin: 0;
  background: var(--cp-surface-soft);
}
legend.cp-form__legend {
  font: 700 0.8125rem/1 var(--cp-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-primary-700);
  padding: 0 var(--cp-2);
}

/* Result block reads like an "output" card with a hero figure */
.cp-tool__result:has(.cp-result__heading) {
  background: linear-gradient(180deg, var(--cp-primary-50), var(--cp-surface) 60%);
  border: 1px solid var(--cp-primary-100);
  border-radius: var(--cp-r-lg);
  padding: var(--cp-6);
}
.cp-result__heading {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  color: var(--cp-primary-900);
}

/* ---- Tier 3: micro-interactions ---- */

/* Primary buttons get a subtle vertical sheen */
.cp-button--primary, .cp-hero__cta--primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 45%);
}

/* Animated underline for in-prose links */
.cp-prose a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size var(--cp-dur-base) var(--cp-ease), color var(--cp-dur-fast);
}
.cp-prose a:hover { background-size: 100% 1.5px; }

/* Consistent visible focus ring across interactive elements */
a:focus-visible,
button:focus-visible,
.cp-button:focus-visible,
.cp-form__input:focus-visible,
.cp-form__select:focus-visible,
.cp-tool-card:focus-visible,
.cp-pillar-card:focus-visible,
.cp-article-card:focus-visible {
  outline: none;
  box-shadow: var(--cp-ring);
  border-radius: var(--cp-r-md);
}

/* === CUENTACALC APPEARANCE :: generated, do not edit by hand === */
/* CuentaCalc appearance — glossy tool icons (by slug) + hero graphic + hero bg.
   CSS-only & wp-admin friendly: paste into Personalizar -> CSS adicional on live.
   Regenerate via tools/generate-appearance-css.py. */

.cp-hero::before {
  background:
    radial-gradient(rgba(28,78,128,0.05) 1.1px, transparent 1.2px) 0 0 / 24px 24px,
    radial-gradient(72% 92% at 90% -12%, rgba(28,78,128,0.16), transparent 60%),
    radial-gradient(58% 72% at -6% 112%, rgba(181,135,46,0.15), transparent 55%),
    radial-gradient(45% 55% at 50% 130%, rgba(47,111,176,0.08), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
          mask-image: linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}

.cp-hero__image { color: transparent; font-size: 0; position: relative; overflow: hidden; }
.cp-hero__image::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 210'%3E%3Ccircle cx='20' cy='20' r='4' fill='%23A8C6E2'/%3E%3Ccircle cx='34' cy='20' r='4' fill='%23D6E4F1'/%3E%3Crect x='150' y='14' width='114' height='12' rx='6' fill='%23EEF3F9'/%3E%3Crect x='16' y='42' width='118' height='52' rx='10' fill='%23fff' stroke='%23DDE5EE'/%3E%3Crect x='28' y='56' width='40' height='8' rx='4' fill='%23A8C6E2'/%3E%3Crect x='28' y='70' width='66' height='12' rx='6' fill='%231C4E80'/%3E%3Crect x='146' y='42' width='118' height='52' rx='10' fill='%23fff' stroke='%23DDE5EE'/%3E%3Crect x='158' y='56' width='40' height='8' rx='4' fill='%23E7C98C'/%3E%3Crect x='158' y='70' width='52' height='12' rx='6' fill='%23B5872E'/%3E%3Crect x='16' y='106' width='248' height='88' rx='10' fill='%23fff' stroke='%23DDE5EE'/%3E%3Crect x='40' y='150' width='16' height='28' rx='3' fill='%23A8C6E2'/%3E%3Crect x='72' y='138' width='16' height='40' rx='3' fill='%232F6FB0'/%3E%3Crect x='104' y='150' width='16' height='28' rx='3' fill='%23A8C6E2'/%3E%3Crect x='136' y='128' width='16' height='50' rx='3' fill='%232F6FB0'/%3E%3Crect x='168' y='142' width='16' height='36' rx='3' fill='%23A8C6E2'/%3E%3Crect x='200' y='120' width='16' height='58' rx='3' fill='%231C4E80'/%3E%3Cpolyline points='48,146 80,134 112,140 144,122 176,132 208,116 240,110' fill='none' stroke='%23B5872E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='240' cy='110' r='4.2' fill='%23B5872E'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 80% auto;
  filter: drop-shadow(0 10px 18px rgba(15,42,80,0.16));
}

/* ---- modern hero ---- */
.cp-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .9rem; margin: 0 0 var(--cp-5);
  border-radius: 999px; font: 600 .8rem/1 var(--cp-font-sans); letter-spacing: .01em;
  color: var(--cp-primary-700);
  background: linear-gradient(120deg, rgba(28,78,128,.10), rgba(46,125,114,.10) 55%, rgba(181,135,46,.14));
  border: 1px solid rgba(28,78,128,.18);
}
.cp-hero__badge-dot { color: var(--cp-accent); font-size: .95em; }

.cp-grad {
  background: linear-gradient(100deg,#1C4E80 0%,#1E7BB0 32%,#2E7D72 64%,#357E66 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.cp-hero__heading {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  line-height: 1.04; letter-spacing: -.025em; font-weight: 700;
}

/* gradient primary CTA + refined secondary */
.cp-hero__cta--primary {
  background: linear-gradient(100deg,#1C4E80 0%,#1E7BB0 32%,#2E7D72 64%,#357E66 100%); color: #fff; border: 0;
  padding: .9rem 1.5rem; border-radius: var(--cp-r-md); font-weight: 700;
  box-shadow: 0 12px 26px -12px rgba(28,78,128,.7);
  transition: transform var(--cp-dur-base) var(--cp-ease), box-shadow var(--cp-dur-base) var(--cp-ease), filter var(--cp-dur-fast);
}
.cp-hero__cta--primary:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff;
  box-shadow: 0 18px 34px -14px rgba(28,78,128,.8); }
.cp-hero__cta--secondary {
  padding: .9rem 1.35rem; border-radius: var(--cp-r-md); font-weight: 700;
  background: #fff; color: var(--cp-text); border: 1px solid var(--cp-border);
  transition: transform var(--cp-dur-base) var(--cp-ease), border-color var(--cp-dur-base) var(--cp-ease);
}
.cp-hero__cta--secondary:hover { transform: translateY(-2px); border-color: var(--cp-primary-200); color: var(--cp-text); background: #fff; }

/* hero stat strip */
.cp-hero__stats {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--cp-8);
  margin: var(--cp-8) 0 0; padding: var(--cp-5) 0 0; border-top: 1px solid var(--cp-border);
}
.cp-hero__stat { display: flex; flex-direction: column; gap: .12rem; }
.cp-hero__stat-num {
  font: 700 1.75rem/1 var(--cp-font-display); letter-spacing: -.02em;
  background: linear-gradient(120deg,#1C4E80,#2E7D72 58%,#B5872E);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.cp-hero__stat-label { font: 600 .76rem/1 var(--cp-font-sans); color: var(--cp-text-muted);
  text-transform: uppercase; letter-spacing: .07em; }

/* ---- bigger, modern section headings ---- */
.cp-section__heading { font-size: clamp(1.85rem, 3.4vw, 2.55rem); letter-spacing: -.025em; }

/* ---- dark "why CuentaCalc" feature section (bento, varied sizes) ---- */
.cp-feature {
  margin: var(--cp-16) 0;
  padding: clamp(2rem, 5vw, 3.75rem);
  border-radius: var(--cp-r-xl);
  color: #E8EFF7;
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(46,125,114,.28), transparent 55%),
    radial-gradient(70% 100% at 0% 100%, rgba(181,135,46,.20), transparent 50%),
    linear-gradient(160deg,#0E2742 0%,#0B2138 55%,#0A1B2E 100%);
}
.cp-feature__badge { color: #CFE2F4; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
/* scoped to beat .cp-main h2 (which would force dark text on this dark panel) */
.cp-feature .cp-feature__heading {
  font: 700 clamp(1.9rem,3.8vw,2.9rem)/1.08 var(--cp-font-display);
  letter-spacing: -.025em; color: #fff; margin: .35rem 0 var(--cp-8);
}
/* light accent gradient (the navy one would vanish on dark) */
.cp-feature .cp-grad { background: linear-gradient(100deg,#7FB7EC 0%,#5FD2C2 52%,#F0CB83 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.cp-bento { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--cp-4); }
.cp-bento__card {
  grid-column: span 2; padding: var(--cp-6);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--cp-r-lg);
  transition: transform var(--cp-dur-base) var(--cp-ease), border-color var(--cp-dur-base), background var(--cp-dur-base);
}
.cp-bento__card--lg { grid-column: span 3; }
.cp-bento__card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.cp-bento__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; font-size: 1.25rem; font-weight: 700; color: #fff;
  background: linear-gradient(150deg,#2F6FB0,#1C4E80);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.cp-bento__card:nth-child(2) .cp-bento__icon { background: linear-gradient(150deg,#3FA0D6,#1E7BB0); }
.cp-bento__card:nth-child(3) .cp-bento__icon { background: linear-gradient(150deg,#3FA193,#2E7D72); }
.cp-bento__card:nth-child(4) .cp-bento__icon { background: linear-gradient(150deg,#5E6AC4,#3D49A0); }
.cp-bento__card:nth-child(5) .cp-bento__icon { background: linear-gradient(150deg,#4E9E86,#357E66); }
.cp-bento__stat { display: block; font: 700 2.6rem/1 var(--cp-font-display); letter-spacing: -.02em; }
.cp-bento__title { font: 700 1.05rem/1.2 var(--cp-font-display); color: #fff; margin: .65rem 0 .3rem; }
.cp-bento__card--lg .cp-bento__title { font-size: 1.5rem; }
.cp-bento__desc { color: #A9BED4; font-size: .95rem; margin: 0; }

.cp-feature__stats {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--cp-10);
  margin: var(--cp-10) 0 0; padding: var(--cp-8) 0 0; border-top: 1px solid rgba(255,255,255,.12);
}
.cp-feature__stats li { display: flex; flex-direction: column; gap: .2rem; }
.cp-feature__stat-num { font: 700 2.4rem/1 var(--cp-font-display); letter-spacing: -.02em; }
.cp-feature__stat-label { color: #A9BED4; font-size: .9rem; }

@media (max-width: 1000px) { .cp-bento__card, .cp-bento__card--lg { grid-column: span 3; } }
@media (max-width: 640px)  { .cp-bento { grid-template-columns: 1fr; } .cp-bento__card, .cp-bento__card--lg { grid-column: auto; } }

/* ---- nav dropdown fix ---- */
/* header shared z-index:1 with .cp-main, which (being later in the DOM) painted
   over the dropdown and ate its clicks. Lift the header above main, give the
   submenu its own layer, and remove the 4px gap that dropped :hover before the
   cursor reached the menu. */
.cp-site-header { z-index: 100; }
.cp-nav-sub { z-index: 200; top: 100%; }

/* line icons, no tile */
.cp-tool-card__icon {
  position: relative; width: 42px; height: 40px;
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
  color: transparent; font-size: 0; margin-bottom: var(--cp-3);
  transition: transform var(--cp-dur-base,.25s) var(--cp-ease,ease);
}
.cp-tool-card__icon::after {
  content: ''; position: absolute; inset: 0;
  background-repeat: no-repeat; background-position: left center; background-size: 40px 40px;
}
.cp-tool-card:hover .cp-tool-card__icon { transform: translateY(-2px); }

/* per-tool line glyphs, stroke coloured by category (homepage AND /herramientas/) */
.cp-tool-card[href*="generador-de-asientos"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='6' y='5' width='20' height='22' rx='2.5' stroke='%231C4E80'/%3E%3Cline x1='11' y1='5' x2='11' y2='27' stroke='%23B5872E'/%3E%3Cline x1='14' y1='11' x2='22' y2='11' stroke='%231C4E80'/%3E%3Cline x1='14' y1='16' x2='22' y2='16' stroke='%231C4E80'/%3E%3Cline x1='14' y1='21' x2='19' y2='21' stroke='%231C4E80'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="validador-de-asientos"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='16' cy='16' r='10.5' stroke='%231C4E80'/%3E%3Cpath d='M10.5 16.5l3.6 3.6 7.4-7.6' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="buscador-de-cuentas"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='14' cy='14' r='8' stroke='%231C4E80'/%3E%3Cline x1='20' y1='20' x2='26' y2='26' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="constructor-de-estados"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='6' y='6' width='20' height='20' rx='2.5' stroke='%231E7BB0'/%3E%3Cline x1='11' y1='21' x2='11' y2='16' stroke='%231E7BB0'/%3E%3Cline x1='16' y1='21' x2='16' y2='11' stroke='%23B5872E'/%3E%3Cline x1='21' y1='21' x2='21' y2='14' stroke='%231E7BB0'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="efe-indirecto"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 14a8 8 0 0 1 13.5-3.5' stroke='%231E7BB0'/%3E%3Cpath d='M24 18a8 8 0 0 1-13.5 3.5' stroke='%231E7BB0'/%3E%3Cpolyline points='17.6,9 21.8,10.3 20.6,14.4' stroke='%23B5872E'/%3E%3Cpolyline points='14.4,23 10.2,21.7 11.4,17.6' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="punto-de-equilibrio"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7 6V25H26' stroke='%232E7D72' opacity='.55'/%3E%3Cline x1='9' y1='22' x2='24' y2='10' stroke='%232E7D72'/%3E%3Cline x1='9' y1='12' x2='24' y2='21' stroke='%23B5872E'/%3E%3Ccircle cx='16.1' cy='16.3' r='2.2' fill='%23B5872E' stroke='none'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="razones-financieras"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='16' cy='16' r='10' stroke='%232E7D72'/%3E%3Cline x1='16' y1='16' x2='16' y2='6.5' stroke='%232E7D72'/%3E%3Cline x1='16' y1='16' x2='23.6' y2='19' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="van-tir"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpolyline points='6,22 13,15 18,18 25,9' stroke='%232E7D72'/%3E%3Cpolyline points='21,9 25,9 24.7,12.8' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="calculadora-depreciacion"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpolyline points='6,9 13,16 18,13 25,22' stroke='%232E7D72'/%3E%3Cpolyline points='21,22 25,22 24.7,18.2' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="calculadora-iva"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cline x1='10' y1='22' x2='22' y2='10' stroke='%233D49A0' stroke-width='2.3'/%3E%3Ccircle cx='11.5' cy='11.5' r='3' stroke='%23B5872E'/%3E%3Ccircle cx='20.5' cy='20.5' r='3' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="calculadora-isr-sueldos"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 5h14v22l-2.3-1.6-2.3 1.6-2.4-1.6-2.3 1.6L9 27z' stroke='%233D49A0'/%3E%3Cline x1='12.5' y1='11.5' x2='19.5' y2='11.5' stroke='%233D49A0'/%3E%3Cline x1='12.5' y1='15.5' x2='19.5' y2='15.5' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="calculadora-nomina"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='6' y='9' width='20' height='15' rx='3' stroke='%233D49A0'/%3E%3Cpath d='M21 15h5v4h-5a2 2 0 0 1 0-4z' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="interes-compuesto"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cellipse cx='12' cy='20' rx='6.5' ry='2.6' stroke='%23357E66'/%3E%3Cellipse cx='12' cy='15.5' rx='6.5' ry='2.6' stroke='%23357E66'/%3E%3Cpolyline points='20,16 23,13 26,16' stroke='%23B5872E'/%3E%3Cline x1='23' y1='13' x2='23' y2='22' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="cuanto-auto-puedo-pagar"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 18.5l1.8-4.6A3 3 0 0 1 10.6 12h8.8a3 3 0 0 1 2.8 1.9L24 18.5' stroke='%23357E66'/%3E%3Cline x1='5' y1='18.5' x2='27' y2='18.5' stroke='%23357E66'/%3E%3Ccircle cx='10' cy='21' r='2.3' stroke='%23B5872E'/%3E%3Ccircle cx='20' cy='21' r='2.3' stroke='%23B5872E'/%3E%3C/svg%3E"); }
.cp-tool-card[href*="cuanto-casa-puedo-pagar"] .cp-tool-card__icon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 15l10-8 10 8' stroke='%23357E66'/%3E%3Cpath d='M8.5 13.5V25h15V13.5' stroke='%23357E66'/%3E%3Cpath d='M13.5 25v-6h5v6' stroke='%23B5872E'/%3E%3C/svg%3E"); }
/* === END CUENTACALC APPEARANCE === */