/* ============================================================
   TEMA MIGA — se aplica SOLO a las páginas del proyecto Miga
   (caso-estudio.html y branding.html). Carga DESPUÉS de case.css.
   ÚNICO aporte: los COLORES corporativos de Miga.
   La tipografía es la del portfolio (Cooper + Poppins).
   ============================================================ */
:root{
  /* paleta real de Miga */
  --pan:#F0E5D0;       /* superficie cálida */
  --masa:#E8D7B5;      /* beige medio */
  --atardecer:#D89B5A; /* ámbar */
  --corteza:#B85C43;   /* rust del logo — acción primaria */
  --olivar:#6B7548;    /* oliva — secundario */
  --tierra:#281F1B;    /* texto del logo */

  /* remapeo de los tokens del sistema a la marca Miga */
  --cream:#FAF4E8;
  --ink:#281F1B;
  --ink-soft:#6F5C49;
  --ink-faint:#A8927A;
  --line:rgba(40,31,27,.15);
  --line-strong:rgba(40,31,27,.30);
  --box:#FFFFFF;
  --box-2:#F0E5D0;
  --burgundy:#B85C43;          /* botones y acentos -> corteza */
  --sky:#E3D2AE;               /* acentos fríos -> masa cálida */
  --butter:#F0D29B;            /* banda -> ámbar suave */
  --sky-soft:#EFE3C8;          /* persona que recibe / voz "sí" */
  --butter-soft:#E7EBD3;       /* persona que ofrece -> tinte olivar */
}

/* persona "recibe compañía" (Carmen) en ladrillo suave de Miga */
.persona.a{background:#F4DBCD;}
/* journey: columna de Carmen en ladrillo + círculo de número en marrón */
.stage .u.a{background:#F4DBCD;}
.stage .sn{background:var(--ink);}

/* banda de próximos pasos en tono pan, más Miga */
.band.butter{background:var(--masa);}
.more-link:hover{background:#9a4734;}

/* ============================================================
   LOGOTIPO / ISOTIPO DE MIGA (archivos reales)
   ============================================================ */
/* el fondo de página siempre es el crema de la home, independientemente del tema */
body{background:#FCFAF3;}

.miga-logo{display:block;margin:0;line-height:0;}
.miga-logo .logotipo{height:clamp(58px,9vw,104px);width:auto;display:block;}

.naming-hero .logotipo{height:clamp(56px,9vw,100px);width:auto;display:inline-block;}

/* isotipo como marca discreta en el pie */
.colophon .iso{height:30px;width:auto;display:block;margin:0 auto 14px;opacity:.9;}