/* thesurfshop.ar — colores sacados del logo: amarillo y rosa flúor sobre azul océano. */
:root {
  --amarillo: #fff23a;
  --amarillo-2: #ffe600;
  --rosa: #ff2e9a;
  --rosa-2: #e0137e;
  --oceano: #0b2a4a;
  --profundo: #061a30;
  --abismo: #031020;
  --ola: #3fb8c9;
  --espuma: #e9f5f8;
  --arena: #f4ead7;

  --texto: #eef6fa;
  --texto-suave: #9fb6c9;
  --linea: rgba(255, 255, 255, 0.12);
  --tarjeta: #0e2f52;
  --tarjeta-2: #133a63;

  --ok: #3ee08f;
  --peligro: #ff5470;

  --radio: 14px;
  --radio-lg: 22px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);

  --f-titulo: 'Archivo', system-ui, sans-serif;
  --f-texto: 'Archivo', system-ui, sans-serif;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--profundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

/* Títulos tipo "racing": cursiva, ancha, pesada, con la sombra rosa del logo. */
.titulo-racing {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--amarillo);
  text-shadow: 0.06em 0.06em 0 var(--rosa);
}

/* Líneas de mar de fondo, como el mar del logo. */
.mar {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px),
    radial-gradient(120% 80% at 50% 0%, #174a7a 0%, var(--oceano) 45%, var(--profundo) 100%);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}