/* Farmacia Sáez Motilla · estilos de la web */
@font-face{font-family:'Belgiano';src:url('../fuentes/Belgiano.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fuentes/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fuentes/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/SourceSans3-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/SourceSans3-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fuentes/SourceSans3-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fuentes/SourceSans3-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/SourceSans3-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/SourceSans3-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fuentes/SourceSans3-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fuentes/SourceSans3-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fuentes/SourceSans3-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fuentes/SourceSans3-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
/* ── Base · paleta de marca ───────────────────────────────── */
--verde-botica:#1D4436;      /* PANTONE 5535 · color principal */
--verde-botica-alt:#3E6354;  /* divisiones y bordes sobre verde */
--verde-salvia:#A8B8AE;      /* texto secundario sobre verde */
--tinta:#14231C;             /* negro de la marca */
--crema:#F4F1E9;             /* papel */
--papel:#E9E9E5;             /* fondo de página, un paso más gris que la crema */
--blanco:#FFFFFF;
--metal:#A7A8A2;             /* gris de cajones y estanterías */
--lima:#A8C93A;              /* uso restringido: cruz normativa y señalética */

/* ── Base · neutros de texto y línea ──────────────────────── */
--gris-texto:#3A4741;
--gris-apoyo:#57615B;
--gris-apoyo-2:#5C6A63;
--gris-hilo:#D9D4C6;         /* filete estándar sobre crema */
--gris-hilo-suave:#E3DFD2;
--gris-hilo-fuerte:#CFCABB;
--gris-hilo-alerta:#E0D4D4;  /* filete de ficha de uso incorrecto */
--gris-trama:#DED9CB;        /* fondo de la trama de foto */
--gris-trama-linea:#D2CCBB;
--gris-trama-texto:#6E685C;

/* ── Base · estados (derivados, no vienen del manual) ─────── */
--estado-ok:#1D4436;
--estado-aviso:oklch(72% 0.13 78);
--estado-aviso-fondo:oklch(96% 0.035 84);
--estado-error:oklch(48% 0.14 27);
--estado-error-fondo:oklch(96% 0.02 27);

/* ── Semánticos · superficie ──────────────────────────────── */
--surface-page:var(--papel);
--surface-card:var(--crema);
--surface-raised:var(--blanco);
--surface-brand:var(--verde-botica);
--surface-metal:var(--metal);
--surface-inset:var(--crema);

/* ── Semánticos · texto ───────────────────────────────────── */
--text-title:var(--tinta);
--text-body:var(--gris-texto);
--text-muted:var(--gris-apoyo);
--text-brand:var(--verde-botica);
--text-on-brand:var(--crema);
--text-on-brand-muted:var(--verde-salvia);
--text-on-metal:var(--tinta);
--text-spec:var(--gris-apoyo-2);   /* etiquetas mono de ficha técnica */
--text-link:var(--verde-botica);
--text-link-hover:var(--tinta);
--text-disabled:var(--metal);

/* ── Semánticos · línea y borde ───────────────────────────── */
--border-hairline:var(--gris-hilo);
--border-soft:var(--gris-hilo-suave);
--border-strong:var(--gris-hilo-fuerte);
--border-on-brand:var(--verde-botica-alt);
--border-focus:var(--lima);

/* ── Semánticos · acento ──────────────────────────────────── */
--accent:var(--lima);            /* cruz normativa y señalética de secciones */
--accent-on:var(--tinta);        /* única tinta admitida sobre lima */
}

:root{
/* ── Familias ─────────────────────────────────────────────── */
--font-display:'Belgiano',Georgia,'Times New Roman',serif;
--font-sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

/* ── Pesos ────────────────────────────────────────────────── */
--weight-display:400;   /* Belgiano tiene un solo peso */
--weight-regular:400;
--weight-light:300;
--weight-semibold:600;
--weight-bold:700;

/* ── Escala display · Belgiano, caja mixta, nunca bajo 24px ─ */
--fs-display-1:58px;   --lh-display-1:1.02; /* @kind other */  --ls-display-1:-0.01em; /* @kind other */
--fs-display-2:46px;   --lh-display-2:1.04; /* @kind other */
--fs-display-3:34px;   --lh-display-3:1.08; /* @kind other */
--fs-display-4:24px;   --lh-display-4:1.15; /* @kind other */

/* ── Escala de texto · Source Sans 3 ──────────────────────── */
--fs-body-lg:19px;     --lh-body-lg:1.6; /* @kind other */
--fs-body:16px;        --lh-body:1.6; /* @kind other */
--fs-body-sm:14.5px;   --lh-body-sm:1.6; /* @kind other */
--fs-caption:12.5px;   --lh-caption:1.5; /* @kind other */
--fs-micro:11.5px;     --lh-micro:1.55; /* @kind other */

/* ── Antetítulos · sans 600 en versal espaciada ───────────── */
--fs-eyebrow:13px;     --ls-eyebrow:0.28em; /* @kind other */
--fs-eyebrow-sm:11px;  --ls-eyebrow-sm:0.18em; /* @kind other */

/* ── Mono · etiquetas de especificación y ficha técnica ───── */
--fs-mono:11px;        --ls-mono:0.1em; /* @kind other */
--fs-mono-sm:9.5px;    --ls-mono-sm:0.1em; /* @kind other */
--ls-mono-wide:0.16em; /* @kind other */

/* ── Logotipo · proporciones fijas del bloque de dos líneas ─ */
/* apellido = 2/3 del cuerpo de «Farmacia» */
--logo-ratio-apellido:0.667; /* @kind other */
--logo-lh:0.94; /* @kind other */
/* separación entre líneas = 0.13 × cuerpo */
--logo-gap-ratio:0.13; /* @kind other */
}

:root{
/* ── Escala ─ base 2px, paradas reales del manual ─────────── */
--space-hair:2px;
--space-3xs:4px;
--space-2xs:6px;
--space-xs:9px;
--space-s:12px;
--space-sm:14px;
--space-m:16px;
--space-ml:20px;
--space-l:24px;
--space-xl:32px;
--space-2xl:40px;
--space-3xl:52px;
--space-4xl:64px;

/* ── Rejillas de aplicación ───────────────────────────────── */
--gap-mosaico:12px;      /* rejilla de variantes y fichas */
--pad-ficha:26px;        /* tarjeta impresa 85×55 */
--pad-bloque-y:36px;     /* bloque de manual: 36px arriba/abajo */
--pad-bloque-x:40px;     /* 40px a los lados */
--pad-seccion:48px;
--pad-pagina:64px;

/* ── Anchos ───────────────────────────────────────────────── */
--medida-texto:780px;    /* medida máxima de párrafo largo */
--medida-texto-corta:610px;
--ancho-lamina:1120px;   /* lámina de manual */
--ancho-contenido:1040px;

/* ── Zona de respeto del logotipo ─────────────────────────── */
/* margen = ancho de la boca de la copa */
--respeto-ratio:1; /* @kind other */
}

:root{
/* ── Radios · la marca no redondea ────────────────────────── */
--radius-none:0;
--radius-circle:50%;     /* única excepción: avatar de redes y sellos */

/* ── Filetes ──────────────────────────────────────────────── */
--hairline:1px; /* @kind spacing */
--border-card:var(--hairline) solid var(--border-hairline); /* @kind other */
--border-inner:var(--hairline) solid var(--border-soft); /* @kind other */
--border-dashed-guia:var(--hairline) dashed var(--accent); /* @kind other */

/* ── Sombras · una sola, casi imperceptible ───────────────── */
--shadow-card:0 1px 2px rgba(0,0,0,0.05);
--shadow-flotante:0 10px 30px rgba(20,35,28,0.14);  /* derivada: diálogos y avisos */

/* ── Trama de foto · marcador mientras no hay imagen ──────── */
--trama-foto:repeating-linear-gradient(45deg,var(--gris-trama-linea) 0 3.2px,var(--gris-trama) 3.2px 9px); /* @kind other */

/* ── Foco ─────────────────────────────────────────────────── */
--focus-ring:0 0 0 2px var(--crema),0 0 0 4px var(--accent); /* @kind shadow */
--focus-ring-brand:0 0 0 2px var(--verde-botica); /* @kind shadow */
}

:root{
/* Marca de imprenta: el movimiento es discreto. Fundidos y
   desplazamientos de 1–2px. Nunca rebotes ni escalados. */
--dur-instant:90ms; /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--ease-out:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
--ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); /* @kind other */
--desplazamiento-press:1px; /* @kind spacing */
}

/* Reglas base mínimas. Todo lo demás vive en los componentes. */
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--accent);color:var(--accent-on)}
.fsm-eyebrow{font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-brand)}
.fsm-spec{font-family:var(--font-mono);font-size:var(--fs-mono-sm);letter-spacing:var(--ls-mono-sm);text-transform:uppercase;color:var(--text-spec)}
.fsm-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.fsm-icon>svg{width:100%;height:100%;display:block}
.fsm-trama{background:var(--trama-foto)}

html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--papel)}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[open] .faq-ver{display:none}
details:not([open]) .faq-ocultar{display:none}
.btn{transition:var(--transition-control)}
.btn:active{transform:translateY(var(--desplazamiento-press))}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn-solido:hover{background:var(--tinta)!important;border-color:var(--tinta)!important}
.btn-linea:hover{background:var(--crema)!important}
.btn-sobreVerde:hover{background:var(--blanco)!important;border-color:var(--blanco)!important}
.nav-h:hover{color:var(--verde-botica)!important}
.hv1:hover{color:var(--blanco)!important}
.hv2:hover{color:var(--verde-botica)!important}
.hv3:hover{color:var(--tinta)!important}
.hv4:hover{color:var(--crema)!important}
.hv5:hover{background:var(--papel)!important}