/*
  2daysinbarcelona.com — motor hibrido
  Design tokens + estructura base clonada del chasis visitaritalia
  (hero full-bleed + panel oscuro de datos), con paleta propia.

  Tres capas de color, roles distintos, nunca intercambiables:
  1. Blaugrana  -> ESTRUCTURAL. Fondo, texto, paneles oscuros, CTA principal.
  2. Trencadis  -> ACENTO DECORATIVO PUNTUAL. Bordes, separadores, bullets.
                   Nunca mas del 5-8% de la superficie visible de una vista.
  3. Miro       -> ETIQUETA / BADGE. Iconografia y marcadores puntuales.
                   Nunca fondo de seccion ni CTA.

  No reutilizar --ocre de visitaritalia (#D9A441). Paleta 100% propia.
*/

:root{
  /* ---- Blaugrana: base estructural ---- */
  --paper:      #FAF7F2;  /* fondo base */
  --cream:      #F1EAE0;  /* fondo secundario, tarjetas y notas */
  --ink:        #191521;  /* texto principal */
  --muted:      #635C70;  /* texto secundario */
  --slate:      #0A2A4D;  /* panel oscuro: hero shade, facts panel, ticker */
  --slate2:     #123A63;  /* variante clara de slate, para degradados y hover de fondo oscuro */
  --blau:       #0B3D6E;  /* azul blaugrana, acento estructural secundario, enlaces sobre fondo claro */
  --grana:      #7A1E3C;  /* granate blaugrana, CTA principal */
  --grana-dark: #5C1730;  /* hover/active de CTA */
  --line:       #E4DACB; /* bordes sutiles sobre --paper/--cream */
  --white:      #FFFFFF;

  /* ---- Trencadis: acento decorativo puntual (Gaudi mosaic) ---- */
  /* Uso: patron de borde, separador fino, bullet, subrayado de heading. */
  /* Nunca como fondo de bloque ni de seccion completa. */
  --daurat:              #C9971E;
  --trencadis-cobalt:    #1B5FA8;
  --trencadis-turquoise: #1E9E9E;

  /* ---- Miro: bloques planos para etiqueta/badge (nunca fondo de seccion) ---- */
  --miro-yellow: #F5C300;
  --miro-red:    #E1291F;
  --miro-green:  #1B8A5A;
  --miro-black:  #171512;

  /* ---- Tipografia (mismo stack del chasis, 3 familias, @font-face local) ---- */
  --font-display: 'Oswald', sans-serif;   /* H1/H2, marca, ticker, uppercase condensado */
  --font-serif:   'Fraunces', Georgia, serif; /* entradillas, citas, subtitulo con opinion */
  --font-body:    -apple-system, 'Inter', sans-serif; /* cuerpo de texto */

  /* ---- Espaciado y forma (escala compartida, no depende de paleta) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-card: 0 10px 30px rgba(10,42,77,.14);
  --max-w: 1080px;
}

/* ==========================================================================
   NOTA (2026-08-19): este fichero es SOLO la capa de tokens. La estructura
   (hero, facts, ticker, cards, footer...) vive entera en layout.css, calco
   literal del CSS de visitaritalia. Las reglas estructurales que vivian aqui
   se retiraron: duplicaban selectores de layout.css con valores de una
   iteracion anterior y sus propiedades no pisadas (paddings de .card .cname
   y .card .ctag, min-height del .tcard .cta) se colaban en el render final.
   ========================================================================== */

/* ==========================================================================
   Trencadis: separador decorativo puntual (Gaudi mosaic)
   Uso: entre secciones editoriales, nunca como fondo de bloque completo.
   Franja fina, tres teselas de color alternadas, altura fija de 6px.
   ========================================================================== */
.trencadis-divider{
  height:6px;
  width:64px;
  margin:28px auto;
  background:repeating-linear-gradient(
    90deg,
    var(--daurat) 0 14px,
    var(--trencadis-cobalt) 14px 28px,
    var(--trencadis-turquoise) 28px 42px,
    transparent 42px 48px
  );
  border-radius:var(--radius-sm);
}
/* variante borde: reemplaza un border-bottom plano por una tesela partida, uso puntual bajo H2 */
.trencadis-underline{
  border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,var(--daurat),var(--trencadis-cobalt),var(--trencadis-turquoise)) 1;
  padding-bottom:8px;
  display:inline-block;
}

/* ==========================================================================
   Miro: badges planos, solo etiqueta/icono, nunca fondo de seccion ni CTA
   ========================================================================== */
.miro-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  border-radius:999px;
  color:var(--miro-black);
}
.miro-badge--yellow{background:var(--miro-yellow)}
.miro-badge--red{background:var(--miro-red);color:var(--white)}
.miro-badge--green{background:var(--miro-green);color:var(--white)}