/* ============================================================
   SEA Consultores & Asesores SAS — Design Tokens
   Para: https://seaconsultores.com/
   Archivo: /wp-content/themes/woodmart-child/sea-tokens.css
   ============================================================ */

/* @import debe ir primero en el archivo */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;1,400&display=swap');

/* Wallman Love — display, titulares, wordmark */
@font-face {
  font-family: 'Wallman Love';
  src: url('https://seaconsultores.com/wp-content/themes/woodmart-child/fonts/Wallman-Bold-free.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Corbel — cuerpo, UI, etiquetas, datos tabulares */
@font-face {
  font-family: 'Corbel';
  src: url('https://seaconsultores.com/wp-content/themes/woodmart-child/fonts/corbell.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Corbel';
  src: url('https://seaconsultores.com/wp-content/themes/woodmart-child/fonts/corbelli.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Corbel';
  src: url('https://seaconsultores.com/wp-content/themes/woodmart-child/fonts/corbel.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Corbel';
  src: url('https://seaconsultores.com/wp-content/themes/woodmart-child/fonts/corbeli.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Corbel';
  src: url('https://seaconsultores.com/wp-content/themes/woodmart-child/fonts/corbelb.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Corbel';
  src: url('https://seaconsultores.com/wp-content/themes/woodmart-child/fonts/corbelz.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============ COLORS ============
     Brand blues sampled directly from the logo PNGs.
     AZUL1 = #005AA7 (primary signal blue)
     AZUL2 = #02295B (deep corporate navy)
  */

  /* Primary — SEA Azul */
  --sea-blue-50:  #EAF2FA;
  --sea-blue-100: #CFDFF0;
  --sea-blue-200: #9FC0E2;
  --sea-blue-300: #6BA0D4;
  --sea-blue-400: #3BA0E8;   /* ⭐ sky accent from social posts */
  --sea-blue-500: #005AA7;   /* ⭐ PRIMARY — brand blue */
  --sea-blue-600: #004C8E;
  --sea-blue-700: #003E75;
  --sea-blue-800: #02295B;   /* ⭐ SECONDARY — deep navy */
  --sea-blue-900: #011A3B;
  --sea-blue-950: #010F23;

  /* Signature gradient — deep navy to mid-blue, used on social/post backgrounds */
  --sea-gradient: linear-gradient(135deg, #02295B 0%, #004C8E 55%, #005AA7 100%);
  --sea-gradient-radial: radial-gradient(1200px 800px at 20% 10%, #1F4C8A 0%, #02295B 60%, #011A3B 100%);

  /* Neutrals — corporate greys */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F9FC;
  --neutral-100:  #EEF2F7;
  --neutral-200:  #E1E7EF;
  --neutral-300:  #C9D2DE;
  --neutral-400:  #9AA6B6;
  --neutral-500:  #6B7789;
  --neutral-600:  #4B5567;
  --neutral-700:  #343B49;
  --neutral-800:  #1F2430;
  --neutral-900:  #0E1118;

  /* Semantic accent — used sparingly on dashboards, charts, status */
  --accent-success:   #2E8B57;  /* balanced professional green */
  --accent-warning:   #D98B1F;  /* amber, not saturated orange */
  --accent-danger:    #B3261E;  /* controlled corporate red */
  --accent-info:      #0E7AB8;  /* lighter blue, aligned with primary */

  /* Service-line accents (Contable / Tributaria / Legal / Administrativa) */
  --svc-contable:       #005AA7; /* primary blue */
  --svc-tributaria:     #02295B; /* deep navy */
  --svc-legal:          #0E7AB8; /* info blue */
  --svc-administrativa: #4B5567; /* graphite */

  /* ============ SEMANTIC COLOR TOKENS ============ */
  --bg:             var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-muted:       var(--neutral-100);
  --bg-inverse:     var(--sea-blue-800);
  --bg-brand:       var(--sea-blue-500);
  --bg-brand-deep:  var(--sea-blue-800);

  --fg:             var(--neutral-900);
  --fg-1:           var(--neutral-800); /* primary text */
  --fg-2:           var(--neutral-600); /* secondary text */
  --fg-3:           var(--neutral-500); /* tertiary / captions */
  --fg-4:           var(--neutral-400); /* disabled / placeholder */
  --fg-inverse:     var(--neutral-0);
  --fg-brand:       var(--sea-blue-500);
  --fg-brand-deep:  var(--sea-blue-800);

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--sea-blue-500);

  --link:           var(--sea-blue-500);
  --link-hover:     var(--sea-blue-700);
  --focus-ring:     color-mix(in oklch, var(--sea-blue-500) 60%, transparent);

  /* ============ TYPOGRAPHY ============ */
  --font-display:        'Wallman Love', 'Fredoka', system-ui, sans-serif;   /* titulares, wordmark */
  --font-display-italic: 'Wallman Love', 'Fredoka', system-ui, sans-serif;
  --font-sans:           'Corbel', 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  --font-serif:     'Source Serif 4', Georgia, serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  /* Modular scale (1.200 — "Minor Third") anchored at 16px */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  3.75rem;   /* 60 */
  --fs-6xl:  4.5rem;    /* 72 */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ============ SPACING (4px base) ============ */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  /* ============ RADII ============ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-bubble: 32px;
  --radius-pill:   999px;

  /* ============ SHADOWS ============ */
  --shadow-xs: 0 1px 2px rgba(2, 41, 91, 0.06);
  --shadow-sm: 0 1px 3px rgba(2, 41, 91, 0.08), 0 1px 2px rgba(2, 41, 91, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(2, 41, 91, 0.08), 0 2px 4px -2px rgba(2, 41, 91, 0.05);
  --shadow-lg: 0 10px 20px -4px rgba(2, 41, 91, 0.10), 0 4px 8px -4px rgba(2, 41, 91, 0.06);
  --shadow-xl: 0 20px 40px -8px rgba(2, 41, 91, 0.14), 0 8px 16px -8px rgba(2, 41, 91, 0.08);
  --shadow-inner: inset 0 1px 2px rgba(2, 41, 91, 0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ============ MOTION ============ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ============ LAYOUT ============ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1440px;
}

/* ============================================================
   SEMANTIC TEXT STYLES
   ============================================================ */

.sea-eyebrow,
[data-sea="eyebrow"] {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
}

h1, .sea-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-3xl), 4vw + 1rem, var(--fs-6xl));
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg-brand-deep);
  overflow-wrap: break-word;
  margin: 0 0 20px;
  text-transform: uppercase;
}

h2, .sea-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-2xl), 2.5vw + 1rem, var(--fs-4xl));
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-brand-deep);
  overflow-wrap: break-word;
  margin: 0 0 16px;
  text-transform: uppercase;
}

h3, .sea-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .sea-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h5, .sea-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* <em> dentro de titulares display permanece en Wallman Love —
   sin cambio de familia ni estilo itálico para mantener coherencia visual. */
h1 em, .sea-h1 em,
h2 em, .sea-h2 em,
.sea-display-italic em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* Signature SEA display — Wallman Love Bold, blanco sobre gradiente navy */
.sea-display-italic {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
}

.sea-bubble {
  background: var(--sea-blue-700);
  color: #fff;
  border-radius: var(--radius-bubble);
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  box-shadow: 0 6px 18px rgba(2, 41, 91, 0.35);
}

.sea-bubble--sky   { background: var(--sea-blue-400); color: #fff; }
.sea-bubble--white { background: #fff; color: var(--sea-blue-800); }
.sea-bubble--navy  { background: var(--sea-blue-800); color: #fff; }

p, .sea-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  overflow-wrap: break-word;
}

.sea-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

.sea-caption, small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.sea-quote, blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-brand-deep);
}

code, .sea-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-muted);
  padding: 0.12em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--fg-brand-deep);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

/* Global resets used by previews */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   RESPONSIVE TYPOGRAPHY
   Breakpoints alineados con los containers del design system:
   sm  = 640px  (móvil grande / landscape)
   md  = 768px  (tablet)
   lg  = 1024px (desktop)
   ============================================================ */

/* Tablet — ajustes intermedios */
@media (max-width: 1024px) {
  h3, .sea-h3 {
    font-size: var(--fs-xl);       /* 24px en vez de 30px */
  }
  .sea-quote, blockquote {
    font-size: var(--fs-lg);       /* 20px en vez de 24px */
  }
}

/* Móvil */
@media (max-width: 640px) {
  h3, .sea-h3 {
    font-size: var(--fs-lg);       /* 20px */
    line-height: var(--lh-normal);
  }
  h4, .sea-h4 {
    font-size: var(--fs-md);       /* 18px */
  }
  h5, .sea-h5 {
    font-size: var(--fs-base);     /* 16px */
  }
  .sea-lead {
    font-size: var(--fs-base);     /* 16px en vez de 18px */
    line-height: var(--lh-normal);
  }
  .sea-quote, blockquote {
    font-size: var(--fs-md);       /* 18px */
  }
  .sea-bubble {
    font-size: var(--fs-base);
    padding: 10px 16px;
  }
}

/* ============================================================
   UTILITY CLASSES — fondos, aplica como CSS class en Elementor
   ============================================================ */

.sea-bg-gradient {
  background: var(--sea-gradient) !important;
}

.sea-bg-gradient-radial {
  background: var(--sea-gradient-radial) !important;
}

.sea-bg-navy {
  background: var(--sea-blue-800) !important;
}

.sea-bg-brand {
  background: var(--sea-blue-500) !important;
}

.sea-bg-subtle {
  background: var(--neutral-50) !important;
}

main#main-content {
	padding-bottom: 0px !important;
}

/* ========================================================================== */
/* Hero section */
/* ========================================================================== */
.sea-hero__background-img {
    position: absolute !important;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    opacity: 0.08;
}

/* Hero Cards */
.sea-hero__card {
    position: absolute !important;
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 16px;
}

.sea-hero__card--top-right {
    right: -45% !important;
    top: -30px !important;
    width: 360px !important;
    padding: var(--space-6) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
}

.sea-hero__card--bottom-left {
    left: 0;
    bottom: 20px;
    width: 240px;
}

.sea-hero__card-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-brand);
    margin-bottom: 8px;
}

.sea-hero__card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sea-hero__card-percentage {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 32px;
    color: var(--fg-brand-deep);
    letter-spacing: var(--tracking-tight);
}

.sea-hero__card-status {
    font-size: 12px;
    color: #2e8b57;
    font-weight: 600;
}

/* Progress List */
.sea-hero__progress-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sea-hero__progress-item {
    margin-bottom: 0;
}

.sea-hero__progress-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    margin-bottom: 4px;
    color: var(--fg-1);
}

.sea-hero__progress-value {
    color: var(--fg-3);
    font-family: var(--font-mono);
}

.sea-hero__progress-bar {
    height: 4px;
    background: var(--bg-muted);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.sea-hero__progress-fill {
    height: 100%;
    background: var(--sea-blue-500);
    border-radius: var(--radius-xs);
}

/* Bottom Card - Icon */
.sea-hero__card-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--sea-blue-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.sea-hero__card-icon i {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
    color: var(--fg-brand);
}

.sea-hero__card-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--fg-1);
    margin: 0;
}

.sea-hero__card-date {
    font-size: var(--fs-xs);
    color: var(--fg-3);
    margin-top: 4px;
}