/* Strike Digital — capa de demostración que va encima de cada web de ejemplo (/demo/…).
   Todo lo de Strike lleva el prefijo sd- y sus propios colores, para no mezclarse con el diseño de la web de ejemplo. */

@font-face { font-family: "SD Barlow"; src: url("/fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "SD Nunito"; src: url("/fonts/nunito-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root { --sd-carbon: #2d2d2d; --sd-papel: #efecdd; --sd-hoja: #fbfaf4; --sd-amarillo: #f9b222; --sd-rojo: #b5302b; --sd-salida: cubic-bezier(0.16, 1, 0.3, 1); }
body { padding-bottom: 5.5rem; }

/* Barra fija de la demo */
.sd-barra {
  position: fixed; z-index: 900; left: 50%; bottom: 0.75rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.5rem; width: max-content; max-width: calc(100vw - 1rem);
  padding: 0.45rem; background: var(--sd-carbon); color: var(--sd-papel); border: 2px solid var(--sd-carbon);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25), 0 24px 40px -14px rgba(0, 0, 0, 0.6);
  font: 600 0.875rem/1.2 "SD Nunito", system-ui, sans-serif;
}
.sd-barra__marca { display: grid; gap: 0.1rem; padding: 0 0.7rem 0 0.5rem; color: inherit; text-decoration: none; }
.sd-barra__marca b { font: 700 0.9375rem/1 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sd-amarillo); }
.sd-barra__marca span { font-size: 0.6875rem; opacity: 0.8; }
.sd-barra a.sd-boton, .sd-barra button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 0.95rem; cursor: pointer;
  background: rgba(239, 236, 221, 0.12); color: var(--sd-papel); border: 0; border-radius: 0;
  font: 700 0.8125rem/1 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s ease-out, transform 0.25s var(--sd-salida);
}
.sd-barra a.sd-boton:hover, .sd-barra button:hover { background: rgba(239, 236, 221, 0.24); }
.sd-barra a.sd-boton--cta { background: var(--sd-amarillo); color: var(--sd-carbon); }
.sd-barra a.sd-boton--cta:hover { background: var(--sd-hoja); transform: rotate(-1.5deg) scale(1.03); }
.sd-barra :focus-visible, .sd-globo :focus-visible, .sd-hola :focus-visible { outline: 3px solid var(--sd-amarillo); outline-offset: 2px; }
.sd-barra button i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--sd-amarillo); box-shadow: 0 0 0 3px rgba(249, 178, 34, 0.3); }
.sd-barra button[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 2px var(--sd-papel); }
@media (max-width: 40rem) {
  .sd-barra { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; transform: none; width: auto; max-width: none; justify-content: space-between; gap: 0.3rem; padding: 0.35rem; }
  .sd-barra__marca { display: none; }
  .sd-barra a.sd-boton, .sd-barra button { flex: 1; padding: 0 0.5rem; font-size: 0.75rem; }
  .sd-barra button span { display: none; }
  .sd-barra button { flex: 0 0 2.75rem; }
}

/* Puntos numerados sobre la web */
.sd-con-punto { position: relative; }
.sd-punto {
  position: absolute; z-index: 40; top: -0.9rem; right: -0.9rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border-radius: 50%; cursor: pointer; background: var(--sd-amarillo); color: var(--sd-carbon); border: 2px solid var(--sd-carbon);
  font: 800 0.875rem/1 "SD Nunito", system-ui, sans-serif; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.55);
  transition: transform 0.25s var(--sd-salida), background-color 0.2s ease-out;
}
.sd-punto::before { content: ""; position: absolute; inset: -0.45rem; border-radius: 50%; }
.sd-punto:hover, .sd-punto[aria-expanded="true"] { transform: scale(1.15) rotate(-8deg); background: var(--sd-rojo); color: var(--sd-hoja); }
.sd-punto:focus-visible { outline: 3px solid var(--sd-carbon); outline-offset: 3px; }
.sd-sin-puntos .sd-punto { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sd-punto[aria-expanded="false"]::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--sd-amarillo); animation: sd-late 2.6s ease-out infinite; pointer-events: none; }
  @keyframes sd-late { from { opacity: 0.9; transform: scale(1); } 70%, to { opacity: 0; transform: scale(2); } }
}

/* Globo con la explicación */
.sd-globo {
  position: fixed; z-index: 950; width: min(21rem, calc(100vw - 1.5rem)); padding: 1.1rem 1.2rem 1.2rem;
  background: var(--sd-hoja); color: var(--sd-carbon); border: 2px solid var(--sd-carbon);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 26px 40px -14px rgba(0, 0, 0, 0.6);
  font: 400 0.9375rem/1.5 "SD Nunito", system-ui, sans-serif; text-align: left; transform: rotate(-0.6deg);
}
.sd-globo[hidden] { display: none; }
.sd-globo small { display: block; margin-bottom: 0.45rem; font: 700 0.6875rem/1 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sd-rojo); }
.sd-globo b { display: block; margin-bottom: 0.4rem; font: 700 1.375rem/1.05 "SD Barlow", sans-serif; text-transform: uppercase; }
.sd-globo p { margin: 0; }
.sd-globo__pie { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.9rem; }
.sd-globo__pie button { min-height: 2.5rem; padding: 0 0.85rem; cursor: pointer; background: none; color: var(--sd-carbon); border: 2px solid var(--sd-carbon); border-radius: 0; font: 700 0.75rem/1 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
.sd-globo__pie button:last-child { background: var(--sd-carbon); color: var(--sd-hoja); }
.sd-globo__pie button:hover { background: var(--sd-amarillo); color: var(--sd-carbon); }
@media (max-width: 40rem) { .sd-globo { left: 0.75rem !important; right: 0.75rem; top: auto !important; bottom: 4.6rem; width: auto; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sd-globo:not([hidden]) { animation: sd-sale 0.35s var(--sd-salida); }
  @keyframes sd-sale { from { opacity: 0; scale: 0.92; translate: 0 10px; } }
}

/* Franja de cierre: la web se hace a la medida */
.sd-medida { padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem); background: var(--sd-amarillo); color: var(--sd-carbon); border-top: 2px solid var(--sd-carbon); font: 400 1.0625rem/1.55 "SD Nunito", system-ui, sans-serif; outline: 0; }
.sd-medida__caja { max-width: 62rem; margin-inline: auto; }
.sd-medida b { display: block; max-width: 20ch; font: 700 clamp(2rem, 1.2rem + 3.6vw, 3.75rem)/0.98 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; }
.sd-medida p { margin: 1.25rem 0 0; max-width: 56ch; font-size: 1.125rem; }
.sd-medida ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.sd-medida li { padding: 0.5rem 0.9rem; background: var(--sd-hoja); border: 2px solid var(--sd-carbon); font: 700 0.875rem/1.1 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.sd-medida li:nth-child(3n + 1) { transform: rotate(-1.2deg); } .sd-medida li:nth-child(3n) { transform: rotate(1deg); }
.sd-medida li:last-child { background: var(--sd-carbon); color: var(--sd-amarillo); }
.sd-medida__cta { display: inline-flex; align-items: center; min-height: 3.25rem; margin-top: 2rem; padding: 0 1.6rem; background: var(--sd-rojo); color: var(--sd-hoja); font: 700 1rem/1 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; transition: transform 0.25s var(--sd-salida), background-color 0.2s ease-out; }
.sd-medida__cta:hover { background: var(--sd-carbon); transform: rotate(-1.2deg) scale(1.03); }
.sd-medida__cta:focus-visible { outline: 3px solid var(--sd-carbon); outline-offset: 3px; }
.sd-medida--panel { margin-top: 2rem; border: 2px solid var(--sd-carbon); }

/* Aviso de cookies dentro de la demo (misma respuesta que en el resto del sitio) */
.sd-cookies { position: fixed; z-index: 930; left: 0.75rem; top: 0.75rem; width: min(20rem, calc(100vw - 1.5rem)); padding: 0.85rem 0.95rem; background: var(--sd-hoja); color: var(--sd-carbon); border: 2px solid var(--sd-carbon); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.55); font: 400 0.8125rem/1.45 "SD Nunito", system-ui, sans-serif; }
.sd-cookies p { margin: 0 0 0.6rem; }
.sd-cookies a { color: inherit; }
.sd-cookies div { display: flex; gap: 0.4rem; }
.sd-cookies button { flex: 1; min-height: 2.75rem; cursor: pointer; background: none; color: var(--sd-carbon); border: 2px solid var(--sd-carbon); border-radius: 0; font: 700 0.75rem/1 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
.sd-cookies .sd-cookies__si { background: var(--sd-carbon); color: var(--sd-hoja); }
.sd-cookies button:hover { background: var(--sd-amarillo); color: var(--sd-carbon); }
.sd-cookies :focus-visible { outline: 3px solid var(--sd-rojo); outline-offset: 2px; }

/* Bienvenida a la demo */
.sd-hola {
  position: fixed; z-index: 940; left: 50%; bottom: 5.2rem; transform: translateX(-50%) rotate(-0.8deg); width: min(26rem, calc(100vw - 1.5rem));
  padding: 1.1rem 1.2rem; background: var(--sd-amarillo); color: var(--sd-carbon); border: 2px solid var(--sd-carbon);
  box-shadow: 0 24px 40px -14px rgba(0, 0, 0, 0.55); font: 400 0.9375rem/1.5 "SD Nunito", system-ui, sans-serif;
}
.sd-hola b { display: block; margin-bottom: 0.3rem; font: 700 1.375rem/1.05 "SD Barlow", sans-serif; text-transform: uppercase; }
.sd-hola p { margin: 0 0 0.8rem; }
.sd-hola button { min-height: 2.75rem; padding: 0 1.1rem; cursor: pointer; background: var(--sd-carbon); color: var(--sd-hoja); border: 0; border-radius: 0; font: 700 0.8125rem/1 "SD Barlow", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
.sd-hola button:hover { background: var(--sd-rojo); }
@media (prefers-reduced-motion: no-preference) {
  .sd-hola { animation: sd-hola 0.7s 0.5s var(--sd-salida) both; }
  @keyframes sd-hola { from { opacity: 0; translate: 0 24px; rotate: 4deg; } }
}
@media (prefers-reduced-motion: reduce) { .sd-barra *, .sd-punto, .sd-globo, .sd-hola { transition-duration: 0.01ms !important; } }