/* Base común de las webs de ejemplo de PymeClic (negocios ficticios).
   Cada ejemplo define sus colores en :root y su estética en su propio estilo.css. */

@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 160ms;
  --dur-hover: 200ms;
  /* valores por defecto; cada ejemplo los sobrescribe */
  --fondo: #f5f0e6;
  --tinta: #1c1b18;
  --tinta-2: #4a463e;
  --acento: #1f4a3a;
  --sobre-acento: #fffdf8;
  --linea: rgba(28, 27, 24, .14);
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.55 var(--sans); padding-bottom: 76px; overflow-x: hidden; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--acento); color: var(--sobre-acento); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.ej-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 700px) { :root { --gutter: 40px; } }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Banda que deja claro que es un ejemplo */
.ej-banda { background: #1c1b18; color: #f5f0e6; font: 500 13px/1.35 var(--sans); padding: 9px var(--gutter); display: flex; justify-content: center; align-items: center; gap: 6px 14px; flex-wrap: wrap; text-align: center; }
.ej-banda strong { font-weight: 700; }
.ej-banda a { color: #f2b79e; font-weight: 700; text-underline-offset: 3px; }
.ej-banda a:focus-visible { outline-color: #f2b79e; }

/* Botones genéricos (cada ejemplo les da su forma) */
.ej-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease, color var(--dur-hover) ease; }
.ej-btn:active { transform: scale(.97); }
.ej-btn-2 { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px currentColor; }

/* Pestañas accesibles (las mueve ejemplos.js; sin JS se ven todos los paneles) */
[role="tab"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.js [role="tabpanel"][hidden] { display: none; }

/* Barra fija inferior en el móvil */
.ej-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea); }
.ej-barra a { display: grid; justify-items: center; gap: 2px; padding: 7px 4px; border-radius: 12px; font: 600 13px/1.2 var(--sans); text-decoration: none; color: var(--tinta); }
.ej-barra a:first-child { background: var(--acento); color: var(--sobre-acento); }
.ej-barra svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .ej-barra { display: none; } }

/* Pie común */
.ej-pie { padding-top: 40px; padding-bottom: 48px; font-size: 14px; line-height: 1.5; }
.ej-pie p + p { margin-top: 6px; }
.ej-pie a { font-weight: 700; text-underline-offset: 3px; }