/* Bariátrica Contigo · tokens del design system · generado, no editar a mano */
/* ── tokens/fonts.css ── */
/* Bariátrica Contigo — webfonts.
   DM Sans is the brand's typeface in every medium (web, producto e impreso).
   El manual de marca de marzo 2026 especifica Myriad Pro; al no existir licencia web,
   la marca adoptó DM Sans, que replica la geometría del artwork de la landing.
   Source Sans 3 queda solo como respaldo del stack. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,400..700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");

/* ── tokens/colors.css ── */
/* ── Bariátrica Contigo · colour system ────────────────────────────────
   Base values are measured from the brand manual (Mar 2026) and from the
   "Endoscopía Digestiva Alta" landing artwork. Semantic aliases at the end
   are what product code should consume. */
:root{
  /* Brand marks — manual, pages 2 & 4 */
  --bc-brand-green:#1E514B;   /* CMYK 84/14/60/44 · logo "Bariátrica" */
  --bc-brand-mint:#46BFAC;    /* CMYK 66/0/41/0  · logo "Contigo" + dandelion */

  /* Teal — the web/product primary ramp (headlines, buttons, icons) */
  --bc-teal-950:#073A40;
  --bc-teal-900:#0A4A50;
  --bc-teal-800:#0C5A62;
  --bc-teal-700:#0F6068;      /* primary: H1, filled buttons, icon strokes */
  --bc-teal-600:#12727A;
  --bc-teal-500:#0E9C94;      /* accent rule under section headings */
  --bc-teal-300:#7FD3CB;
  --bc-teal-100:#D7EDEA;
  --bc-teal-50:#ECF8F4;       /* pale mint icon circles */

  /* Navy — dark cards, doctor panels, footer */
  --bc-navy-950:#00243C;
  --bc-navy-900:#002C48;
  --bc-navy-800:#003460;
  --bc-navy-700:#0A4A6E;
  --bc-navy-tint:#E8F0F4;     /* pale blue info strips */
  --bc-footer:#14384C;        /* teal-navy del footer del sitio */
  --bc-cyan-300:#3FC8DC;      /* "Cirujano Digestivo y Bariátrico" on navy */

  /* Green — commitment/action (WhatsApp, submit, check marks) */
  --bc-green-700:#33875A;
  --bc-green-600:#3B9764;
  --bc-green-500:#43A16C;   /* verde de los botones de contacto */
  --bc-green-400:#4FAE78;

  /* Neutrals */
  --bc-white:#FFFFFF;
  --bc-page:#F8F9FB;
  --bc-gray-50:#F4F6F7;
  --bc-gray-100:#EDF0F2;
  --bc-gray-200:#E2E7EA;
  --bc-gray-300:#CFD6DB;
  --bc-slate-500:#8A9199;
  --bc-slate-600:#5A6169;     /* body copy on light */
  --bc-slate-700:#33414D;
  --bc-ink:#14202A;

  /* ── Semantic aliases ── */
  --text-heading:var(--bc-teal-700);
  --text-heading-alt:var(--bc-navy-900);
  --text-body:var(--bc-slate-600);
  --text-strong:var(--bc-slate-700);
  --text-muted:var(--bc-slate-500);
  --text-on-dark:var(--bc-white);
  --text-on-dark-muted:rgba(255,255,255,.78);
  --text-on-dark-subtle:rgba(255,255,255,.60);
  --text-accent-on-dark:var(--bc-cyan-300);
  --text-link:var(--bc-teal-700);
  --text-link-hover:var(--bc-teal-500);

  --surface-page:var(--bc-page);
  --surface-card:var(--bc-white);
  --surface-band:#F6F8FA;        /* alternating section band */
  --surface-tint-mint:var(--bc-teal-50);
  --surface-tint-blue:var(--bc-navy-tint);
  --surface-dark:var(--bc-navy-900);
  --surface-footer:var(--bc-footer);
  --surface-dark-gradient:linear-gradient(120deg,#002C48 0%,#0A4A6E 100%);
  --surface-dark-gradient-alt:linear-gradient(120deg,#003460 0%,#0A4A6E 100%); /* panel de agenda del artwork */
  --surface-brand:var(--bc-brand-green);

  --border-subtle:var(--bc-gray-100);
  --border-card:#EAEEF0;
  --border-tint:var(--bc-teal-100);
  --border-field:var(--bc-gray-200);
  --border-divider:var(--bc-gray-200);
  --border-on-dark:rgba(255,255,255,.12);

  --accent-rule:var(--bc-teal-500);

  --action-primary:var(--bc-teal-700);
  --action-primary-hover:var(--bc-teal-800);
  --action-primary-active:var(--bc-teal-900);
  --action-cta:var(--bc-green-500);
  --action-cta-hover:var(--bc-green-700);
  --action-on-dark:var(--bc-white);

  --icon-primary:var(--bc-teal-700);
  --icon-on-tint:var(--bc-teal-700);
  --icon-circle-bg:var(--bc-teal-50);
  --check-mark:var(--bc-green-400);
  --check-mark-teal:var(--bc-teal-500);
}

/* ── tokens/typography.css ── */
/* ── Typography ────────────────────────────────────────────────────────
   Sizes are the landing artwork's values normalised to 1× CSS px
   (the source JPG is a 1.5× export; every value below is measured ÷1.5). */
:root{
  --font-sans:"DM Sans","Source Sans 3","Segoe UI",system-ui,sans-serif;
  --font-display:var(--font-sans);
  /* Corporativa adoptada: DM Sans. El manual (mar 2026) especifica Myriad Pro, que es
     licenciada y no se sirve en web; la marca adopta DM Sans en todos los soportes. */
  --font-corporate:var(--font-sans);

  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */

  /* Display & headings */
  --text-hero:68px;      --lh-hero:0.96; /* @kind other */   --ls-hero:-0.02em; /* @kind other */
  --text-h1:48px;        --lh-h1:1.04; /* @kind other */     --ls-h1:-0.015em; /* @kind other */
  --text-h2:32px;        --lh-h2:1.12; /* @kind other */     --ls-h2:-0.01em; /* @kind other */
  --text-h3:21px;        --lh-h3:1.22; /* @kind other */     --ls-h3:-0.005em; /* @kind other */
  --text-h4:18px;        --lh-h4:1.3; /* @kind other */

  /* Body */
  --text-lead:21px;      --lh-lead:1.42; /* @kind other */
  --text-body:17px;      --lh-body:1.5; /* @kind other */
  --text-body-sm:16px;   --lh-body-sm:1.5; /* @kind other */
  --text-caption:14px;   --lh-caption:1.45; /* @kind other */
  --text-micro:12px;     --lh-micro:1.4; /* @kind other */

  /* Numerals — plan prices */
  --text-price:42px;     --lh-price:1.0; /* @kind other */    --ls-price:-0.02em; /* @kind other */
  --text-price-sm:30px;

  /* Eyebrow / label */
  --text-eyebrow:17px;   --ls-eyebrow:0.005em; /* @kind other */
  --text-label:15px;

  /* Mobile overrides (≤600px) */
  --text-hero-m:34px;    --lh-hero-m:1.06; /* @kind other */
  --text-h2-m:24px;
  --text-h3-m:19px;
  --text-lead-m:17px;
  --text-price-m:32px;
}
@media (max-width:600px){
  :root{
    --text-hero:var(--text-hero-m);
    --lh-hero:var(--lh-hero-m); /* @kind other */
    --text-h2:var(--text-h2-m);
    --text-h3:var(--text-h3-m);
    --text-lead:var(--text-lead-m);
    --text-price:var(--text-price-m);
    --text-body:16px;
    --text-eyebrow:15px;
  }
}

/* ── tokens/spacing.css ── */
/* ── Spacing & layout — 4px base ─────────────────────────────────────── */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-14:56px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* Layout */
  --container-max:1120px;      /* desktop content width */
  --container-narrow:860px;    /* the artwork's authored content width */
  --gutter-desktop:32px;
  --gutter-mobile:20px;

  --section-py:80px;           /* vertical rhythm between sections */
  --section-py-tight:56px;
  --section-py-mobile:48px;

  --card-p:28px;               /* standard card padding */
  --card-p-sm:20px;
  --card-p-lg:36px;
  --grid-gap:20px;
  --grid-gap-lg:24px;

  --heading-rule-w:56px;       /* mint rule under centred headings */
  --heading-rule-h:4px;
  --heading-rule-gap:14px;

  --control-h:44px;            /* inputs & small buttons */
  --control-h-lg:52px;         /* hero / CTA buttons */
  --icon-circle:52px;
  --icon-circle-lg:64px;
  --icon-circle-sm:40px;
}
@media (max-width:600px){
  :root{
    --section-py:var(--section-py-mobile);
    --card-p:20px;
    --grid-gap:14px;
  }
}

/* ── tokens/radii.css ── */
/* ── Corner radii ─────────────────────────────────────────────────────── */
:root{
  --radius-xs:6px;
  --radius-sm:8px;      /* buttons, inputs */
  --radius-md:12px;     /* small cards, images */
  --radius-lg:16px;     /* standard cards, plan rows */
  --radius-xl:20px;     /* large panels, dark doctor card */
  --radius-2xl:28px;    /* full-bleed feature panels */
  --radius-pill:999px;  /* chips, icon circles, doctor pill */
}

/* ── tokens/elevation.css ── */
/* ── Elevation ─────────────────────────────────────────────────────────
   The brand's shadows are wide, soft and tinted with the teal ink —
   never neutral black, never tight/hard. */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(10,42,48,.05);
  --shadow-card:0 1px 2px rgba(10,42,48,.04), 0 10px 30px rgba(10,42,48,.06);
  --shadow-card-hover:0 2px 6px rgba(10,42,48,.06), 0 18px 44px rgba(10,42,48,.11);
  --shadow-panel:0 20px 50px rgba(10,42,48,.09);
  --shadow-dark:0 24px 60px rgba(0,44,72,.26);
  --shadow-button:0 2px 10px rgba(15,96,104,.22);
  --shadow-button-cta:0 2px 12px rgba(67,161,108,.30);
  --shadow-inset-field:inset 0 1px 2px rgba(10,42,48,.05);

  /* Ring used for focus — never the browser default outline */
  --ring-focus:0 0 0 3px rgba(15,96,104,.22); /* @kind shadow */
  --ring-focus-cta:0 0 0 3px rgba(67,161,108,.28); /* @kind shadow */
}

/* ── tokens/motion.css ── */
/* ── Motion ────────────────────────────────────────────────────────────
   Calm and clinical: short fades, small rises, no bounce, no spring. */
:root{
  --dur-fast:120ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:240ms; /* @kind other */
  --dur-reveal:420ms; /* @kind other */

  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */

  --t-hover:all var(--dur-base) var(--ease-out); /* @kind other */
  --t-collapse:grid-template-rows var(--dur-slow) var(--ease-out); /* @kind other */

  --lift-hover:-2px;      /* cards rise 2px on hover, never scale up */
  --press-scale:.985; /* @kind other */     /* buttons compress slightly on press */
  --reveal-rise:16px;     /* enter-viewport fade + rise distance */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms; /* @kind other */--dur-base:0ms; /* @kind other */--dur-slow:0ms; /* @kind other */--dur-reveal:0ms; /* @kind other */--lift-hover:0px;--press-scale:1; /* @kind other */--reveal-rise:0px}
}

/* ── tokens/base.css ── */
/* ── Base element styles ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-heading);font-family:var(--font-display);font-weight:var(--fw-bold);text-wrap:balance}
h1{font-size:var(--text-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--text-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4{font-size:var(--text-h4);line-height:var(--lh-h4);font-weight:var(--fw-semibold)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:var(--t-hover)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--ring-focus)}
img{max-width:100%;height:auto;display:block}
strong{font-weight:var(--fw-bold);color:var(--text-heading)}
small{font-size:var(--text-caption)}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

/* Layout helpers */
.bc-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter-desktop)}
.bc-section{padding-block:var(--section-py)}
.bc-band{background:var(--surface-band)}
@media (max-width:600px){.bc-container{padding-inline:var(--gutter-mobile)}}