/* ==========================================================================
   MAXITO TATTOO — sistema de diseño
   Derivado del rótulo pintado a mano de la vitrina. San José, Costa Rica.
   Colores muestreados directamente de la fotografía de referencia.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rye&family=Sacramento&family=Kaushan+Script&family=Archivo:wght@400;500;600;700&display=swap');

:root {
  /* ---- Color ------------------------------------------------------------ */
  --amarillo:        #FCD900;   /* relleno de las letras grandes */
  --amarillo-luz:    #FDE44A;   /* brillo, hover */
  --amarillo-sombra: #E0B800;

  --rojo:            #C81C00;   /* contorno y sombra dura */
  --rojo-oscuro:     #8E1400;
  --naranja:         #F97F16;   /* "World famous" */

  --cian:            #1BADEA;   /* scripts y textos secundarios */
  --cian-luz:        #4FC4F2;
  --cian-oscuro:     #0E7CAB;

  --negro:           #0F0F0E;   /* fondo, pizarrón */
  --negro-2:         #1A1A18;   /* superficies elevadas */
  --negro-3:         #262421;   /* bordes suaves */
  --hueso:           #F2EDE1;   /* texto sobre negro */
  --hueso-tenue:     #A9A499;

  /* ---- Tipografía ------------------------------------------------------- */
  --font-rotulo:  'Rye', 'Playbill', Georgia, serif;        /* MAXITO TATTOO */
  --font-script:  'Sacramento', cursive;                     /* Welcome */
  --font-brush:   'Kaushan Script', cursive;                 /* World famous */
  --font-texto:   'Archivo', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica (fluida) */
  --t-display: clamp(3rem, 11vw, 7.5rem);
  --t-h1:      clamp(2.25rem, 6vw, 4rem);
  --t-h2:      clamp(1.75rem, 4vw, 2.75rem);
  --t-h3:      1.375rem;
  --t-cuerpo:  1.0625rem;
  --t-chico:   0.9375rem;
  --t-micro:   0.75rem;

  /* ---- Espacio y forma -------------------------------------------------- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2.5rem;  --sp-5: 4rem;   --sp-6: 6rem;
  --radio: 4px;              /* el rótulo es anguloso: casi nada de redondeo */
  --borde: 2px solid var(--negro-3);
  --max-ancho: 1180px;
}

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

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--font-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cian); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cian-luz); }

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

img { max-width: 100%; display: block; }

.contenedor {
  width: min(100% - 2.5rem, var(--max-ancho));
  margin-inline: auto;
}

/* ==========================================================================
   LA FIRMA: el rótulo de tres capas
   Relleno amarillo + contorno rojo + sombra dura desplazada abajo-derecha.
   Es el mismo orden de capas que usa el rotulista sobre el vidrio.
   ========================================================================== */
.rotulo {
  font-family: var(--font-rotulo);
  color: var(--amarillo);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px var(--rojo);
  text-shadow:
    4px 4px 0 var(--rojo),
    8px 8px 0 rgba(0, 0, 0, 0.55);
}

/* Variante chica: el contorno grueso tapa el contraste en tamaños pequeños */
.rotulo--chico {
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 2px 2px 0 var(--rojo);
}

/* Variante invertida, para fondos claros o para el pizarrón de "Walk-ins" */
.rotulo--cian {
  color: var(--cian);
  -webkit-text-stroke-color: var(--negro);
  text-shadow: 3px 3px 0 var(--negro);
}

/* Los scripts del vidrio */
.script {
  font-family: var(--font-script);
  color: var(--cian);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  font-weight: 400;
}

.brush {
  font-family: var(--font-brush);
  color: var(--naranja);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.1;
}

/* El recurso de los guiones: -TO- -THE- -1993- */
.entre-guiones {
  font-family: var(--font-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-chico);
  color: var(--amarillo);
}
.entre-guiones::before { content: "– "; }
.entre-guiones::after  { content: " –"; }

/* Etiqueta / eyebrow */
.etiqueta {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cian);
}

/* ==========================================================================
   Destello (el diamante de cuatro puntas de la vitrina)
   ========================================================================== */
.destello {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  color: var(--amarillo);
  vertical-align: -0.1em;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}

.separador {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--rojo);
  margin: var(--sp-4) 0;
}
.separador::before, .separador::after {
  content: ""; height: 2px; flex: 1; background: var(--negro-3);
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: var(--t-chico);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border: 2px solid var(--amarillo);
  border-radius: var(--radio);
  background: var(--amarillo);
  color: var(--negro);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--rojo);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { background: var(--amarillo-luz); color: var(--negro); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--rojo); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--rojo); }

.btn--fantasma {
  background: transparent;
  color: var(--cian);
  border-color: var(--cian);
  box-shadow: 4px 4px 0 var(--cian-oscuro);
}
.btn--fantasma:hover { background: var(--cian); color: var(--negro); }

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.tarjeta {
  background: var(--negro-2);
  border: var(--borde);
  border-radius: var(--radio);
  padding: var(--sp-3);
}
.tarjeta h3 {
  font-family: var(--font-rotulo);
  color: var(--amarillo);
  font-size: var(--t-h3);
  margin: 0 0 0.5rem;
  font-weight: 400;
}

/* El pizarrón de la acera: fondo negro, marco cian */
.pizarron {
  background: var(--negro);
  border: 3px solid var(--cian);
  border-radius: var(--radio);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
}

/* ==========================================================================
   Formularios
   ========================================================================== */
label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hueso-tenue);
  margin-bottom: 0.4rem;
}
input, select, textarea {
  width: 100%;
  font-family: var(--font-texto);
  font-size: var(--t-cuerpo);
  color: var(--hueso);
  background: var(--negro);
  border: 2px solid var(--negro-3);
  border-radius: var(--radio);
  padding: 0.7rem 0.85rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cian);
  outline: none;
  box-shadow: 0 0 0 3px rgba(27, 173, 234, 0.25);
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.seccion { padding: var(--sp-6) 0; }
.grid { display: grid; gap: var(--sp-3); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.centrado { text-align: center; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}