/* Marca de Turismo médico (PROVISIONAL: el nombre y el color se decidirán después; cambiar aquí basta).
   Ú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:#0E7C86;          /* botones principales, enlaces, selección, tinta de la hélice */
  --marca-hover:color-mix(in srgb,var(--marca) 85%,#000); /* al pasar el mouse o tocar un botón principal */
  --marca-suave:color-mix(in srgb,var(--marca) 9%,#fff);  /* paneles de sección (menta acuosa), chips de la marca */
  --marca-suave-2:color-mix(in srgb,var(--marca) 15%,#fff); /* panel más hondo: lo que separa un bloque del que tapa */
  --marca-oscura:color-mix(in srgb,var(--marca) 70%,#000);  /* borde del botón principal, hover */
  --sobre-marca:#FFFFFF;      /* texto encima de --marca */
  --acento:#F5D98B;           /* arena/sol: botón secundario y detalles puntuales. Nunca texto largo */
  --acento-borde:color-mix(in srgb,var(--acento) 80%,#000 6%);
  --sobre-acento:#16151A;     /* texto encima de --acento */
  /* Neutros */
  --fondo:#FFFFFF;            /* fondo de página (papel blanco: la tinta WebGL se multiplica sobre él) */
  --superficie:#FFFFFF;       /* tarjetas, diálogos */
  --tinta:#16151A;            /* texto principal */
  --tinta-2:#5B5862;          /* texto secundario (≥ 4.5:1 sobre --superficie) */
  --tinta-suave:rgba(22,21,26,.5); /* texto terciario sobre paneles claros */
  --tinta-tenue:rgba(22,21,26,.4); /* cláusulas apagadas dentro de un párrafo destacado */
  --linea:rgba(0,0,0,.1);     /* bordes y divisores */
  --vidrio:rgba(255,255,255,.8);        /* paneles esmerilados */
  --vidrio-suave:rgba(255,255,255,.5);
  --vidrio-fuerte:rgba(255,255,255,.9);
  --sobre-foto:#FFFFFF;       /* texto sobre fotografía (siempre con velo) */
  --velo-foto:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.05) 22%,rgba(0,0,0,0) 52%,rgba(0,0,0,.55) 100%);
  /* Estados */
  --ok:#15803D;      /* éxito */
  --aviso:#B45309;   /* atención */
  --error:#C2410C;   /* error */
  --info:#1D4ED8;    /* información */
  /* Tipografía: UNA familia (Google Sans Flex, variable) para títulos y texto */
  --display:'Google Sans Flex',ui-sans-serif,system-ui,sans-serif;
  --sans:'Google Sans Flex',ui-sans-serif,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-marca:4px; --radio-panel:8px; --radio-tarjeta:24px; --radio-seccion:48px; --radio-chip:37px; --radio-accion:46px;
  --desenfoque-vidrio:10px;
  --dur-rapida:150ms; --dur-normal:250ms; --curva:cubic-bezier(.2,0,0,1);
  --interlineado-display:1.1; --interlineado-texto:1.2;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font:300 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}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}