/* =====================================================================
   Amadent · Design System — BUNDLE portable (tokens + iconos)
   Dra. Amanda Zenón · Ortodoncia
   Un solo archivo: color, tipografía, spacing/radii/shadow e iconos.
   Fuentes office-safe (Georgia/Calibri) e iconos Unicode — sin @font-face.
   Generado 2026-06-20.
   ===================================================================== */

/* ====== tokens/colors.css ====== */
/* =====================================================================
   Amadent · Design System — Color tokens
   Dra. Amanda Zenón · Ortodoncia
   Anchored on the brand teal #01AD9D + graphite from the logo.
   ===================================================================== */

:root{
  /* ---- Brand / primary ---------------------------------------------- */
  --teal:            #01AD9D;   /* TEAL primario — marca, titulares, acentos */
  --teal-deep:       #016F63;   /* teal profundo — fondos oscuros, texto sobre claro */
  --teal-medium:     #45C2B5;   /* teal medio — estados, hovers */
  --graphite:        #4B4640;   /* grafito bronce — neutro oscuro del logo */

  /* ---- Ink / text --------------------------------------------------- */
  --ink:             #1B312D;   /* carbón frío — texto base */
  --ink-deep:        #20302E;   /* tinta — máximo contraste */
  --taupe:           #6B7B78;   /* texto secundario / metadatos */
  --body:            #51605c;   /* gris cuerpo — párrafos largos */

  /* ---- Accents (sobre fondos teal) ---------------------------------- */
  --blush:           #A6E6DF;   /* acento claro sobre teal */
  --blush-pale:      #E2F6F3;   /* superficie teal muy clara */
  --aqua:            #BEEAE3;   /* verde agua */

  /* ---- Surfaces / neutros frío -------------------------------------- */
  --mist:            #E2F6F3;   /* neblina */
  --cream:           #F1F8F7;   /* off-white frío — fondo de página */
  --cream-2:         #E6F2F0;
  --white:           #FFFFFF;   /* blanco clínico */

  /* ---- Lines -------------------------------------------------------- */
  --line:            rgba(1,173,157,.26);
  --line-soft:       rgba(1,173,157,.14);

  /* =================================================================
     SEMANTIC ALIASES  — prefer these in components / layouts
     ================================================================= */
  --color-primary:        var(--teal);
  --color-primary-deep:   var(--teal-deep);
  --color-on-primary:     var(--white);
  --color-accent:         var(--blush);

  --text-strong:          var(--ink-deep);
  --text-default:         var(--ink);
  --text-body:            var(--body);
  --text-muted:           var(--taupe);
  --text-on-dark:         var(--white);
  --text-on-dark-muted:   var(--blush);

  --surface-page:         var(--cream);
  --surface-card:         var(--white);
  --surface-tint:         var(--blush-pale);
  --surface-invert:       var(--teal-deep);

  --border-default:       var(--line);
  --border-soft:          var(--line-soft);
  --focus-ring:           var(--teal);
}


/* ====== tokens/typography.css ====== */
/* =====================================================================
   Amadent · Design System — Typography tokens
   Office-safe pairing: Georgia (serif display) + Calibri (sans text).
   Both ship with MS Office on Windows & Mac, so PPT/Docx render 1:1.
   No @font-face needed — these are system fonts.
   ===================================================================== */

:root{
  /* ---- Families ----------------------------------------------------- */
  --font-serif: Georgia, 'Times New Roman', 'Nimbus Roman', serif;
  --font-sans:  Calibri, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Semantic roles */
  --font-display: var(--font-serif);   /* titulares, números, frases destacadas */
  --font-body:    var(--font-sans);    /* cuerpo, datos clínicos, UI */

  /* ---- Type scale (print / doc baseline, in px) --------------------- */
  --fs-display:  54px;   /* portada / H-title */
  --fs-h1:       38px;   /* sección */
  --fs-h2:       25px;   /* subtítulo */
  --fs-lead:     23px;   /* lead itálico */
  --fs-body:     15.5px; /* cuerpo */
  --fs-small:    13.5px; /* cuerpo chico */
  --fs-eyebrow:  11px;   /* kicker / overline */
  --fs-mono:     11.5px; /* metadatos / captions */

  /* ---- Weights ------------------------------------------------------ */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---- Line heights ------------------------------------------------- */
  --lh-tight:   1.04;
  --lh-snug:    1.15;
  --lh-normal:  1.55;
  --lh-loose:   1.72;

  /* ---- Tracking ----------------------------------------------------- */
  --ls-eyebrow: .32em;   /* kicker uppercase */
  --ls-tight:   .005em;
  --ls-mono:    .06em;
}

/* =====================================================================
   Utility classes — the brand's type ramp as reusable classes.
   ===================================================================== */
.az-eyebrow{
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--teal-deep); margin:0;
}
.az-display{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--ink); margin:0; }
.az-h1{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-h1); line-height:1.05; color:var(--ink); margin:0; }
.az-h2{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-h2); line-height:var(--lh-snug); color:var(--teal-deep); margin:0; }
.az-lead{ font-family:var(--font-display); font-style:italic; font-weight:var(--fw-regular); font-size:var(--fs-lead); line-height:1.4; color:var(--teal-deep); margin:0; }
.az-body{ font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-loose); color:var(--body); margin:0; }
.az-small{ font-family:var(--font-sans); font-size:var(--fs-small); line-height:1.66; color:var(--body); margin:0; }
.az-mono{ font-family:var(--font-sans); font-size:var(--fs-mono); letter-spacing:var(--ls-mono); color:var(--taupe); margin:0; }


/* ====== tokens/spacing.css ====== */
/* =====================================================================
   Amadent · Design System — Spacing, radii, shadow & motion tokens
   ===================================================================== */

:root{
  /* ---- Spacing scale (8px base) ------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   22px;
  --sp-6:   30px;
  --sp-7:   44px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  120px;   /* margen mayor de slide / portada */

  /* Page padding presets */
  --pad-doc:    64px 72px;     /* hoja A4 horizontal */
  --pad-slide:  104px 120px;   /* slide 1920×1080 */

  /* ---- Radii -------------------------------------------------------- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   10px;   /* tarjetas */
  --radius-lg:   16px;   /* imágenes redondeadas */
  --radius-pill: 999px;  /* badges / pills */
  --radius-full: 50%;    /* avatar / isotipo */

  /* ---- Borders ------------------------------------------------------ */
  --bw-hair: 1px;
  --bw-rule: 1.5px;

  /* ---- Shadows — soft, warm-cool, low-contrast ---------------------- */
  --shadow-sm:  0 8px 20px rgba(80,50,40,.18);
  --shadow-md:  0 14px 30px rgba(80,50,40,.20);
  --shadow-lg:  0 18px 50px rgba(80,50,40,.16);

  /* ---- Motion ------------------------------------------------------- */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}

/* =====================================================================
   Brand graphic primitives — reusable marks.
   ===================================================================== */

/* divisor de marca: línea — punto — línea */
.az-divider{ display:flex; align-items:center; gap:14px; width:100%; color:var(--teal); }
.az-divider::before,.az-divider::after{ content:''; height:1px; background:var(--line); flex:1; }
.az-divider .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }

/* destello / sparkle */
.az-sparkle{ display:inline-block; color:var(--teal); }

/* regla fina */
.az-rule{ height:1px; background:var(--line); border:0; margin:0; }


/* ====== tokens/icons.css ====== */
/* =====================================================================
   Amadent · Design System — Iconography tokens
   Dra. Amanda Zenón · Ortodoncia

   El sistema de marca NO usa una librería de íconos: usa un set acotado
   de glifos Unicode (dingbats) que vienen con todos los equipos — igual
   filosofía "office-safe" que la tipografía (sin @font-face, render 1:1
   en PPT / Docx / web). Aquí se fijan como tokens + clases utilitarias.

   Anclado en el DESTELLO ✦ del isologotipo como marca gráfica principal.
   ===================================================================== */

:root{
  /* ---- Glifos de marca (content de ::before) ------------------------ */
  --ico-sparkle:   "\2726";   /* ✦ destello — motivo principal, remata títulos y listas */
  --ico-dot:       "\2022";   /* • punto — divisor línea·punto·línea */
  --ico-phone:     "\2706";   /* ✆ teléfono */
  --ico-mail:      "\2709";   /* ✉ correo */
  --ico-web:       "\2756";   /* ❖ sitio web */
  --ico-at:        "\0040";   /* @ usuario / redes */
  --ico-check:     "\2713";   /* ✓ afirmación ("Sí decimos") */
  --ico-cross:     "\2715";   /* ✕ usos incorrectos / negación */
  --ico-arrow:     "\2192";   /* → llamado a la acción */
  --ico-diamond:   "\2727";   /* ✧ destello hueco — variante sutil */

  /* ---- Roles semánticos --------------------------------------------- */
  --ico-brand:     var(--ico-sparkle);   /* glifo firma de la marca */
  --ico-bullet:    var(--ico-sparkle);   /* viñeta de listas editoriales */

  /* ---- Métrica / color por defecto ---------------------------------- */
  --ico-color:     var(--teal);          /* color de acento por defecto */
  --ico-size:      1em;                  /* hereda del texto; override por clase */
  --ico-gap:       .6em;                 /* separación glifo ↔ texto */
}

/* =====================================================================
   Clase base + modificadores por glifo.
   Uso:  <span class="az-ico az-ico--phone"></span>
         <span class="az-ico az-ico--sparkle"></span>
   El glifo se inyecta con ::before, así el elemento queda vacío y
   accesible (decorativo). Para íconos con significado, añadir aria-label.
   ===================================================================== */
.az-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15em;
  font-size:var(--ico-size);
  line-height:1;
  color:var(--ico-color);
  font-style:normal;
  flex:0 0 auto;
  -webkit-font-smoothing:antialiased;
}
.az-ico::before{ content:var(--ico-brand); }

.az-ico--sparkle::before{ content:var(--ico-sparkle); }
.az-ico--dot::before    { content:var(--ico-dot); }
.az-ico--phone::before  { content:var(--ico-phone); }
.az-ico--mail::before   { content:var(--ico-mail); }
.az-ico--web::before    { content:var(--ico-web); }
.az-ico--at::before     { content:var(--ico-at); }
.az-ico--check::before  { content:var(--ico-check); }
.az-ico--cross::before  { content:var(--ico-cross); }
.az-ico--arrow::before  { content:var(--ico-arrow); }
.az-ico--diamond::before{ content:var(--ico-diamond); }

/* Tamaños rápidos */
.az-ico--sm{ --ico-size:.82em; }
.az-ico--lg{ --ico-size:1.4em; }
.az-ico--xl{ --ico-size:2em; }

/* Color contextual */
.az-ico--deep   { color:var(--teal-deep); }
.az-ico--muted  { color:var(--taupe); }
.az-ico--on-dark{ color:var(--blush); }

/* =====================================================================
   Patrones compuestos del manual.
   ===================================================================== */

/* Línea de contacto:  ícono + dato  (portada / firma / pie)            */
.az-contact{
  display:flex; align-items:center; gap:13px;
  font-family:var(--font-sans); font-size:var(--fs-body);
  color:var(--text-default);
}
.az-contact .az-ico{ color:var(--teal); width:18px; }

/* Lista con viñeta de destello ✦ — reemplaza los bullets por defecto.  */
.az-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.az-list > li{ position:relative; padding-left:1.7em; }
.az-list > li::before{
  content:var(--ico-bullet);
  position:absolute; left:0; top:.05em;
  color:var(--teal); font-size:.9em; line-height:1.55;
}

/* Badge circular con glifo — variante "x" de usos incorrectos o sello. */
.az-ico-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9em; height:1.9em; border-radius:var(--radius-full);
  background:var(--teal); color:var(--white);
  font-size:.85em; font-weight:var(--fw-bold); flex:0 0 auto;
}

/* =====================================================================
   Acentos tipográficos heredados (refuerzo, ya viven en spacing.css):
   .az-sparkle  → glifo suelto de marca
   .az-divider  → línea · punto · línea
   Aquí se les da el glifo por si se usan como ::before sin markup.
   ===================================================================== */
.az-sparkle::before{ content:var(--ico-sparkle); }