/*
  2daysinbarcelona.com — CAPA DE TEMA (linen-style)  ·  9-sep-2026

  Que es: una capa de CSS encima de layout.css, el mismo patron que THEME_FIELD
  en apps/hoteladay/functions/_shared/_render.ts. NO toca ni una plantilla, ni
  una clase, ni tokens.css, ni layout.css. Se quita borrando su <link> de
  functions/_shared/render.ts y el sitio vuelve exactamente a lo de antes.

  Que NO cambia: la paleta. Los diez colores blaugrana/trencadis/Miro salen de
  tokens.css tal cual (--grana, --blau, --slate, --daurat, --line, --cream...).
  Aqui no se declara ni un color nuevo. Tampoco cambia la estructura: mismo
  hero a sangre, mismo panel oscuro de datos, mismas rejillas y breakpoints.

  Que cambia, y por que (skill linen-style, reglas 1 a 7):
    1. El trabajo de las fuentes. Oswald condensado en mayusculas titulaba TODO,
       y eso es lo que se lee como landing de plantilla (caso museumticketsparis,
       2-sep-2026). Fraunces, que ya estaba en el sitio, pasa a los titulares en
       caja normal; Oswald se queda en marca, etiquetas, cifras y botones, que es
       donde un condensado trabaja bien. Cero fuentes nuevas.
    2. La jerarquia la hace el tracking, no el tamano: el h1 baja de 6,5rem a
       3,9rem y las versalitas suben a la banda .14em-.18em.
    3. Fuera las rayitas gruesas de acento bajo los titulos: pasan a filete de
       1px en el color del texto (lo que linenharbour mide de verdad).
    4. Fuera la cursiva como recurso de composicion (regla 6).
    5. Fuera el recuadro con barra de color a un lado: filete de 1px a todo el
       borde (regla 7).
    6. Fuera el radio y la sombra que levanta la tarjeta al pasar por encima:
       separa el borde, no la sombra (reglas 1 y 2).
    7. El unico gesto que se anade es el subrayador de hoteladay traido al
       daurat: el enlace del cuerpo lleva su filete y se rellena al pasar.
*/

/* ==========================================================================
   1. El serif titula, el condensado etiqueta
   ========================================================================== */
.hero h1,
h2.sec,
.g-body h2,
.relwrap h2,
.value h2,
.ho h2,
.legal h1,
.legal h2,
.card .cname,
.ncard h3,
.bcard h3,
.sub-card h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-style:normal;
  text-transform:none;
  letter-spacing:-.012em;
}

/* El h3 del cuerpo se separa del h2 por FAMILIA, no solo por tamano. */
.g-body h3{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.005em;
}

/* ==========================================================================
   2. Escala y ritmo. El titular deja de gritar y el cuerpo gana medida.
   ========================================================================== */
.hero h1{font-size:clamp(1.95rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:-.018em}
.hero .stand{font-size:1.02rem;line-height:1.6;max-width:62ch}
h2.sec{font-size:1.45rem;line-height:1.2;margin:38px 0 8px}
.g-body h2{font-size:1.42rem;line-height:1.2;margin:44px 0 8px}
.relwrap h2{font-size:1.3rem;line-height:1.2}
.value h2,.ho h2{font-size:1.15rem;line-height:1.25}
.legal h1{font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.12}
.bcard h3{font-size:1.3rem;line-height:1.18}
.ncard h3{font-size:1.12rem;line-height:1.22}
.card .cname{font-size:1.18rem;line-height:1.14;letter-spacing:-.008em}
/* Medida de lectura, no ancho de contenedor. 900px son ~110 caracteres. */
.g-body p,.g-body li{max-width:70ch}
.g-body p{margin:16px 0 18px}

/* ==========================================================================
   3. Toda mayuscula, en su banda de tracking (.14em a .20em)
   ========================================================================== */
.brand,.ticker a,.nav-main a,table.vi-table th{letter-spacing:.14em}
.f-brand{letter-spacing:.16em}
.sub-cta,a.sub-cta,.facts .fcta,.tcard .cta,.ho-card .cta,.sp-row .cta,
form.contact button,.etag{letter-spacing:.16em}
/* Miga de pan y firma editorial: en caja normal se leen como lo que son, un
   dato de servicio, y dejan de competir con el titular. */
.crumbs,.g-meta{text-transform:none;letter-spacing:0;font-size:.83rem}

/* ==========================================================================
   4. La rayita gruesa de acento pasa a filete de 1px del color del texto
   ========================================================================== */
h2.sec::after,
.g-body h2::after,
.relwrap h2::after,
.legal h1::after{width:34px;height:1px;background:currentColor;opacity:.75;margin-top:10px}
.brand::after{width:30px;height:1px;background:currentColor;opacity:.7;margin-top:3px}
.hero .stand::before{width:26px;height:1px;background:currentColor;opacity:.85;vertical-align:5px;margin-right:10px}

/* ==========================================================================
   5. La cursiva no es un recurso de composicion (un <em> en un parrafo si)
   ========================================================================== */
.card .cline,.f-tag,.g-body blockquote{font-style:normal}

/* ==========================================================================
   6. Ni recuadro con barra de color a un lado: filete de 1px a todo el borde
   ========================================================================== */
.value,.author,.authorbox,.ho,.tldr{border:1px solid var(--line)}
.g-body blockquote{border-left:1px solid var(--line);padding:6px 0 6px 18px}
.sub-card{border-top:1px solid var(--line)}
/* El filete del pie era de 4px y del MISMO color que su fondo: no separaba nada. */
footer.site{border-top:0}
/* El acento del TL;DR se muda de la barra al rotulo, que es donde se lee. */
.tldr-h{color:var(--grana);letter-spacing:.16em}

/* ==========================================================================
   7. Sin esquina redondeada por inercia; el circulo del avatar se queda
   ========================================================================== */
.card,.g-body img,.facts .fcta,.miro-badge,.trencadis-divider{border-radius:0}

/* ==========================================================================
   8. Separa el borde, no la sombra. El movimiento se queda en la foto.
   ========================================================================== */
.card:hover{transform:none;box-shadow:none}
.card:hover img.bg{transform:scale(1.03)}
.ncard{transition:border-color .15s ease}
.ncard:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.author-avatar{box-shadow:none}
.secnav a:hover,.start-chip:hover,.tt-chip:hover,.book-card:hover,.pagination a:hover{border-color:var(--ink)}

/* ==========================================================================
   9. El subrayador. Unico gesto anadido, y es el de hoteladay en daurat:
      el enlace del cuerpo lleva su filete y se rellena al pasar por encima.
   ========================================================================== */
.g-body a{border-bottom:1px solid var(--daurat);text-decoration:none}
.g-body a:hover{text-decoration:none;background:#C9971E29}