/* ==========================================================================
   Comunicandoqueesgerundio — Brand Foundations
   Colors + Typography tokens. Import this first on every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS — Ubuntu (self-hosted, brand-supplied)
   The user supplied the official Ubuntu .ttf files in /fonts. They are wired
   below — no Google Fonts over the network. Paths are relative to this file
   (which sits at the project root). For production, prefer converting these to
   .woff2 (smaller) and subsetting to Latin + Latin-Extended; update the src
   urls accordingly. font-display:swap avoids invisible text on first paint.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Ubuntu"; font-style:normal; font-weight:300;
  font-display:swap; src:url("fonts/Ubuntu-Light.woff2") format("woff2"),url("fonts/Ubuntu-Light.ttf") format("truetype");
}
@font-face{
  font-family:"Ubuntu"; font-style:italic; font-weight:300;
  font-display:swap; src:url("fonts/Ubuntu-LightItalic.woff2") format("woff2"),url("fonts/Ubuntu-LightItalic.ttf") format("truetype");
}
@font-face{
  font-family:"Ubuntu"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/Ubuntu-Regular.woff2") format("woff2"),url("fonts/Ubuntu-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Ubuntu"; font-style:italic; font-weight:400;
  font-display:swap; src:url("fonts/Ubuntu-Italic.woff2") format("woff2"),url("fonts/Ubuntu-Italic.ttf") format("truetype");
}
@font-face{
  font-family:"Ubuntu"; font-style:normal; font-weight:500;
  font-display:swap; src:url("fonts/Ubuntu-Medium.woff2") format("woff2"),url("fonts/Ubuntu-Medium.ttf") format("truetype");
}
@font-face{
  font-family:"Ubuntu"; font-style:italic; font-weight:500;
  font-display:swap; src:url("fonts/Ubuntu-MediumItalic.woff2") format("woff2"),url("fonts/Ubuntu-MediumItalic.ttf") format("truetype");
}
@font-face{
  font-family:"Ubuntu"; font-style:normal; font-weight:700;
  font-display:swap; src:url("fonts/Ubuntu-Bold.woff2") format("woff2"),url("fonts/Ubuntu-Bold.ttf") format("truetype");
}
@font-face{
  font-family:"Ubuntu"; font-style:italic; font-weight:700;
  font-display:swap; src:url("fonts/Ubuntu-BoldItalic.woff2") format("woff2"),url("fonts/Ubuntu-BoldItalic.ttf") format("truetype");
}

:root{
  /* ===== BRAND CORE ===================================================== */
  --brand-orange:      #F08106; /* PRIMARY — corporate orange (CTAs, links)  */
  --brand-coral:       #FF5A36; /* logo body — energetic accent / gradients  */
  --brand-gold:        #FFBB00; /* logo beak — highlight / ratings / spark   */
  --brand-mint:        #B4DFC4; /* logo ring — SECONDARY, soft fills         */
  --brand-green:       #1F8A5B; /* derived deep green — secondary actions    */

  /* ===== ORANGE SCALE (primary) ======================================== */
  --orange-50:   #FFF4E8;
  --orange-100:  #FFE4C6;
  --orange-200:  #FCC889;
  --orange-300:  #F8AA4D;
  --orange-400:  #F49423;
  --orange-500:  #F08106;  /* = --brand-orange */
  --orange-600:  #D26E03;
  --orange-700:  #A95705;
  --orange-800:  #82440A;
  --orange-900:  #5E330C;

  /* ===== GREEN SCALE (secondary) ======================================= */
  --green-50:    #ECF8F1;
  --green-100:   #D2EFDE;  /* near brand-mint, slightly cooler tint        */
  --green-200:   #B4DFC4;  /* = --brand-mint */
  --green-300:   #84C9A1;
  --green-400:   #4FAE7B;
  --green-500:   #1F8A5B;  /* = --brand-green */
  --green-600:   #157049;
  --green-700:   #105839;
  --green-800:   #0D442C;
  --green-900:   #0A3221;

  /* ===== ACCENTS ======================================================= */
  --coral-400:   #FF7456;
  --coral-500:   #FF5A36;  /* = --brand-coral */
  --coral-600:   #E8421F;
  --gold-400:    #FFC93D;
  --gold-500:    #FFBB00;  /* = --brand-gold */
  --gold-600:    #E0A300;

  /* ===== NEUTRALS — warm gray ramp ===================================== */
  --ink-900:     #17120D;  /* near-black, warm — display headings           */
  --ink-800:     #2A2218;
  --ink-700:     #423A30;
  --gray-600:    #5C5346;
  --gray-500:    #7A7064;
  --gray-400:    #A39A8D;
  --gray-300:    #CFC8BE;
  --gray-200:    #E6E1D9;
  --gray-100:    #F3F0EB;
  --gray-50:     #FAF8F5;  /* warm off-white section bg                     */
  --white:       #FFFFFF;

  /* ===== SEMANTIC ROLES ================================================ */
  --bg:              var(--white);
  --bg-subtle:       var(--gray-50);
  --bg-mint:         var(--green-50);
  --bg-inverse:      var(--ink-900);
  --surface:         var(--white);
  --surface-raised:  var(--white);

  --fg:              var(--ink-900);   /* primary text                      */
  --fg-muted:        var(--gray-600);  /* secondary text                    */
  --fg-subtle:       var(--gray-500);  /* captions, meta                    */
  --fg-on-brand:     var(--white);     /* text on orange/coral/green        */
  --fg-on-mint:      var(--green-800); /* text on mint fills                */

  --border:          var(--gray-200);
  --border-strong:   var(--gray-300);
  --ring:            color-mix(in srgb, var(--brand-orange) 45%, transparent);

  --link:            var(--orange-700);  /* AA: orange-600 3.5:1 → orange-700 5.2:1 sobre blanco */
  --link-hover:      var(--orange-800);

  --primary:         var(--brand-orange);
  --primary-hover:   var(--orange-600);
  --primary-active:  var(--orange-700);
  --secondary:       var(--brand-green);
  --secondary-hover: var(--green-600);

  --success:         var(--green-500);
  --warning:         var(--gold-600);
  --danger:          var(--coral-600);

  /* ===== TYPOGRAPHY =================================================== */
  --font-sans: "Ubuntu", "Ubuntu Fallback", system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Ubuntu Mono", "SFMono-Regular", Menlo,
               Consolas, monospace;

  --fw-light:  300;
  --fw-regular:400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* Fluid type scale — clamp(min, fluid, max). 1.25 ratio.                */
  --text-xs:   0.75rem;                                 /* 12px            */
  --text-sm:   0.875rem;                                /* 14px            */
  --text-base: 1rem;                                    /* 16px            */
  --text-lg:   1.125rem;                                /* 18px            */
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);  /* 20→24           */
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);       /* 24→32           */
  --text-3xl:  clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);  /* 30→44           */
  --text-4xl:  clamp(2.4rem, 1.8rem + 3vw, 3.75rem);    /* 38→60           */
  --text-5xl:  clamp(3rem, 2rem + 4.6vw, 5rem);         /* 48→80           */

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;

  /* ===== SPACING (4px base) =========================================== */
  --space-1:  0.25rem;  --space-2:  0.5rem;  --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.5rem;  --space-6:  2rem;
  --space-7:  2.5rem;   --space-8:  3rem;    --space-10: 4rem;
  --space-12: 6rem;     --space-16: 8rem;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --container: 1200px;
  --container-narrow: 760px;

  /* ===== RADII ======================================================== */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ===== SHADOWS — warm, soft ========================================= */
  --shadow-xs: 0 1px 2px rgba(23,18,13,0.06);
  --shadow-sm: 0 2px 8px rgba(23,18,13,0.07);
  --shadow-md: 0 8px 24px rgba(23,18,13,0.09);
  --shadow-lg: 0 18px 48px rgba(23,18,13,0.12);
  --shadow-brand: 0 12px 28px rgba(240,129,6,0.28);

  /* ===== MOTION ======================================================= */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   420ms;
}

/* ==========================================================================
   SEMANTIC TYPE ROLES — apply directly to elements
   ========================================================================== */
.h1, h1{
  font-family:var(--font-sans); font-weight:var(--fw-bold);
  font-size:var(--text-5xl); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); color:var(--fg); text-wrap:balance;
}
.h2, h2{
  font-family:var(--font-sans); font-weight:var(--fw-bold);
  font-size:var(--text-4xl); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); color:var(--fg); text-wrap:balance;
}
.h3, h3{
  font-family:var(--font-sans); font-weight:var(--fw-bold);
  font-size:var(--text-3xl); line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight); color:var(--fg); text-wrap:balance;
}
.h4, h4{
  font-family:var(--font-sans); font-weight:var(--fw-medium);
  font-size:var(--text-2xl); line-height:var(--leading-snug); color:var(--fg);
}
.eyebrow{
  font-family:var(--font-sans); font-weight:var(--fw-bold);
  font-size:var(--text-sm); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--orange-700); /* AA: brand-orange 2.6:1 → orange-700 5.2:1 sobre blanco */
}
.lead{
  font-size:var(--text-xl); line-height:var(--leading-normal);
  color:var(--fg-muted); font-weight:var(--fw-light);
}
.body, p{
  font-size:var(--text-base); line-height:var(--leading-normal);
  color:var(--fg-muted);
}
.small{ font-size:var(--text-sm); line-height:var(--leading-normal); }
.caption{ font-size:var(--text-xs); color:var(--fg-subtle);
  letter-spacing:0.02em; }
.mono{ font-family:var(--font-mono); }
a{ color:var(--link); text-decoration-thickness:0.08em;
  text-underline-offset:0.16em; }
a:hover{ color:var(--link-hover); }