/* Marca de Delia Trainer. ÚNICA fuente de colores, tipografías y medidas: el resto del código solo usa var(--…).
   Paleta semántica: 1 color de marca + 1 acento + neutros + estados. Si hace falta otro tono, se agrega AQUÍ
   con su uso, y aparece solo en /marca/. */
:root{
  /* Marca */
  --marca:#F4A6C1;          /* rosa pastel: fondos de botón principal, selección y acentos. Nunca texto (1.8:1 sobre --fondo) */
  --marca-fuerte:#B23A6E;   /* rosa profundo: texto de acento, enlaces y titular resaltado (5.3:1 sobre --fondo, 5.6:1 sobre --superficie) */
  --marca-hover:color-mix(in srgb,var(--marca) 85%,#000); /* al pasar el mouse o tocar un botón principal (tinta encima 6.9:1) */
  --marca-suave:color-mix(in srgb,var(--marca) 18%,#fff); /* fondos de avisos y chips de la marca (--marca-fuerte encima 5.1:1) */
  --marca-suave-2:color-mix(in srgb,var(--marca) 30%,#fff); /* píldora de la pestaña activa, chips (--marca-fuerte encima 4.7:1) */
  --marca-oscura:var(--marca-fuerte); /* alias para el núcleo de la plantilla: texto de marca, y fondo con --superficie encima (5.6:1) */
  --sobre-marca:#16151A;      /* texto encima de --marca, en tinta (9.6:1), nunca blanco (2.0:1) */
  --acento:#D9C8F5;           /* lavanda: detalles puntuales, insignias. Nunca texto (texto encima: --sobre-acento) */
  --sobre-acento:#16151A;     /* texto encima de --acento (11.7:1) */
  /* Pasteles de apoyo: uno por experta. Solo fondos; el texto encima va en --tinta (≥ 11:1). */
  --pastel-menta:#C7EBDD;     /* nutrióloga */
  --pastel-durazno:#FFD9C7;   /* entrenadora */
  --pastel-lavanda:#D9C8F5;   /* acompañante */
  --agua:#4E8FA8;             /* vasos de agua: borde de control (3.6:1 sobre superficie) */
  --macro-carbos:#B5683A;     /* carbohidratos, durazno fuerte (4.2:1) */
  --macro-grasa:#7A5BB5;      /* grasa, lavanda fuerte (5.3:1) */
  /* Escena del Sitio: rampa del gradiente Laminar (GetLayers) detrás del hero. La lee js/laminar.js y el
     respaldo en CSS mientras carga. Fondo decorativo: encima solo --tinta, --tinta-2 o --marca-fuerte en título grande (--escena-c domina). */
  --escena-fondo:#F9D3E1; --escena-a:#F4A6C1; --escena-b:#D9C8F5; --escena-c:#FFE3EC; --escena-d:#FFF9FB;
  /* Neutros */
  --fondo:#FFF7FA;          /* fondo de página: blanco rosado */
  --superficie:#FFFFFF;       /* tarjetas, diálogos */
  --tinta:#16151A;            /* texto principal (17.2:1 sobre --fondo) */
  --tinta-2:#5B5862;          /* texto secundario (6.6:1 sobre --fondo; no sobre lavanda: 4.5) */
  --linea:#EFDDE5;            /* bordes y divisores */
  --vidrio-fuerte:color-mix(in srgb,var(--superficie) 90%,transparent); /* cabecera y barra de las apps (esmerilado) */
  /* Estados */
  --ok:#15803D;      /* éxito */
  --aviso:#B45309;   /* atención */
  --error:#C2410C;   /* error */
  --info:#1D4ED8;    /* información */
  /* Tipografía: máximo 2 familias */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Figtree',system-ui,sans-serif;
  --t-1:2.5rem; --t-2:1.75rem; --t-3:1.25rem; --t-texto:1rem; --t-chico:.875rem;
  /* Forma */
  --radio:14px; --radio-chico:10px; --sombra:0 1px 2px rgba(22,21,26,.06),0 8px 24px -12px rgba(22,21,26,.18);
  --radio-tarjeta:20px; --radio-accion:999px; --sombra-alta:0 20px 50px -20px rgba(22,21,26,.35);
  /* Movimiento (transiciones CSS; los resortes viven en js/motor.js) */
  --dur-normal:250ms; --curva:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} /* sin destello gris al tocar: el foco visible es propio */
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font:400 var(--t-texto)/1.5 var(--sans);touch-action:manipulation;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
@media (pointer:coarse){input,select,textarea{font-size:16px}}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
img{max-width:100%;height:auto}
/* Controles: no se selecciona su texto al mantener presionado (el contenido sí se puede copiar). */
button,[role=button],[role=tab],[role=switch],summary{-webkit-user-select:none;user-select:none}
/* Instalada (inicio del celular) vs. navegador: .solo-navegador (p. ej. «Instalar») desaparece al instalarla.
   pwa.js pone html.instalada también en iOS (navigator.standalone). */
@media (display-mode:standalone){.solo-navegador{display:none!important}}
html.instalada .solo-navegador{display:none!important}
html:not(.instalada) .solo-instalada{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}