/* ═══════════════════════════════════════════════════════════════════
   QUÉ HACER TENERIFE — sistema de diseño
   Un único archivo con tokens y componentes compartidos por todas las
   páginas. Cada página solo añade lo que es exclusivamente suyo.

   Regla de color del sitio:
     · TEAL   = lo que se puede tocar (enlaces, acciones, foco)
     · NARANJA = tiempo (fechas, "hoy", "en curso", novedad)
     · TINTA  = jerarquía y piezas destacadas
   No usar naranja para nada que no hable de cuándo pasa algo.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* — color — */
  --ink: #181a1d;
  --ink-2: #23272c;
  --paper: #f7f5f0;
  --paper-2: #efece4;
  --card: #ffffff;
  --line: #e4e0d6;
  --line-2: #d0cabb;
  --text: #181a1d;
  --text-2: #3c3f44;
  --muted: #6c6f75;
  --muted-dark: #a9a396;

  --teal: #0c5f5a;
  --teal-dark: #0a4b47;
  --teal-soft: #e5efec;
  --mint: #7bdcc3;
  --sun: #d65d2c;
  --sun-soft: #fbe9df;
  --sun-ink: #8c3c17;
  --sun-light: #f0855a;   /* el naranja legible sobre tinta */

  /* — tipografía — */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 25px;

  /* — espacio — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* — forma — */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* — profundidad: solo dos niveles en todo el sitio — */
  --sh-1: 0 1px 2px rgba(24,26,29,.05);
  --sh-2: 0 14px 36px rgba(24,26,29,.12);

  --wrap: 960px;
  --pad: 20px;

  /* Alias de los nombres antiguos: el CSS que quede en cada página sigue
     funcionando y apunta ya a los valores nuevos. */
  --atlantic: var(--teal);
  --atlantic-soft: var(--teal-soft);
  --teal-light: var(--mint);
  --radius: var(--r-md);
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  /* Sin esto, el motor móvil agranda por su cuenta el texto de algunos
     bloques (en el móvil de pruebas subía chips de 12px a 13,5px), y las
     piezas de una misma fila dejan de medir lo mismo. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

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

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }

/* Un único anillo de foco en todo el sitio. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sólo los laterales: así una página puede darle aire vertical a su <main>
   sin que este selector se lo pise. */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* Kicker de sección. Una vez por página, nunca dos.
   Va en gris: el naranja está reservado para las fechas. */
.eyebrow {
  margin: 0 0 var(--s2);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* ══════════ CABECERA COMÚN ══════════ */

.site-head {
  border-bottom: 1px solid var(--line);
  background: rgba(247,245,240,.92);
  backdrop-filter: saturate(140%) blur(8px);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand img { width: 34px; height: 34px; display: block; border-radius: var(--r-xs); }
.brand span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); background: var(--paper-2); }
.site-nav a[aria-current] {
  color: var(--ink);
  font-weight: 600;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}


/* ══════════ TITULAR DE PÁGINA ══════════ */

.pagehead { padding: var(--s6) 0 var(--s4); }
.pagehead h1 {
  margin: 0;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.02;
}
.pagehead .lead {
  margin: var(--s3) 0 0;
  max-width: 56ch;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--text-2);
}
.pagehead .dateline {
  margin: var(--s3) 0 0;
  font-size: var(--t-sm);
  color: var(--muted);
}
.pagehead .dateline b { color: var(--sun); font-weight: 600; }


/* ══════════ CONTROLES ══════════ */

.search { position: relative; }
.search input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--sh-1);
}
.search input::placeholder { color: #9a958c; }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }

select {
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  cursor: pointer;
  max-width: 100%;
}
select:hover { border-color: var(--line-2); }

.pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto;
  padding: 8px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.pill:hover { border-color: var(--line-2); }
/* Seleccionado = teal, la familia de lo que se puede tocar. */
.pill.on { background: var(--teal); color: #fff; border-color: var(--teal); }

.filtertoggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.filtertoggle:hover { border-color: var(--line-2); }
.filtertoggle .chev { transition: transform .15s ease; }
.filtertoggle.open { background: var(--teal); color: #fff; border-color: var(--teal); }
.filtertoggle.open .chev { transform: rotate(180deg); }

.clear {
  padding: 9px 4px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--teal);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.clear:hover { color: var(--teal-dark); }
.clear[hidden] { display: none; }

.meta {
  color: var(--muted);
  font-size: var(--t-sm);
  margin: var(--s5) 0 0;
}


/* ══════════ TARJETA ══════════ */

main { padding: var(--s3) 0 var(--s8); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: var(--s4);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }

/* En pantalla ancha la ficha se lee en horizontal: la foto sostiene
   la columna izquierda y el texto ocupa una medida cómoda.
   La altura la fija SIEMPRE el texto: la foto va posicionada en absoluto
   para no aportar altura, así una foto vertical no deja un hueco muerto
   debajo de los botones. El min-height es solo un suelo. */
@media (min-width: 720px) {
  .card.has-cover {
    display: grid; grid-template-columns: 268px minmax(0, 1fr);
    align-items: stretch; min-height: 216px;
  }
  .card.has-cover .cover { overflow: hidden; }
  .card.has-cover .cover img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
}

.cover { position: relative; background: var(--paper-2); }
.cover img { display: block; width: 100%; height: 208px; object-fit: cover; }

.body { padding: var(--s4) var(--s4) 18px; }
@media (min-width: 720px) { .body { padding: 20px 22px; } }

.title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 5px;
}
.title a { color: inherit; text-decoration: none; }
.title a:hover { text-decoration: underline; }

.pitch {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--teal);
  margin: 0 0 10px;
}

.row2 { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.row2 .sep { opacity: .45; margin: 0 6px; }

.desc { font-size: 14px; color: var(--text-2); margin: 0 0 12px; max-width: 68ch; }

/* Chips: dos niveles y nada más.
   · neutro  -> taxonomía (categoría, municipio, precio)
   · destaca -> estado temporal (hoy, en curso, gratis, novedad) */
.chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin: 0 0 12px; }
.chip {
  /* flex: 0 0 auto + nowrap: un chip nunca se encoge por debajo de su
     etiqueta. Sin esto, en móvil "Hoy" se partía en dos líneas, doblaba de
     alto y, al ser tan corto, salía como un círculo naranja. Si no cabe,
     el chip entero pasa a la línea siguiente, que es lo que debe pasar. */
  flex: 0 0 auto;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--t-xs);
  /* Interlineado en px, no relativo: aunque el navegador infle la letra de
     algún chip suelto, todos los de la fila siguen midiendo lo mismo. */
  line-height: 19px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Taxonomía: contorno, sin relleno. Un relleno beige sobre tarjeta blanca
   ensucia la ficha y compite con la foto; el contorno pesa lo justo para
   agrupar los datos sin llamar la atención. */
.chip.cat, .chip.sub, .chip.muni, .chip.price, .chip.rate {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Gratis es un dato que conviene ver: mismo contorno, en teal. */
.chip.free {
  background: transparent;
  color: var(--teal);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #bcd7d2;
}
/* La única etiqueta rellena de la ficha es la que habla de cuándo. */
.chip.live { background: var(--sun); color: #fff; font-weight: 600; box-shadow: none; }

/* Acciones de la ficha */
.links { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.links a, .revbtn {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--card);
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
}
.links a:hover, .revbtn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
/* La acción principal de cada ficha se lleva el peso; el resto es secundario. */
.links a.calendar-btn, .links a.detail-link {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-weight: 600;
}
.links a.calendar-btn:hover, .links a.detail-link:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}

/* Sello de fecha sobre la foto: la pieza que define la agenda. */
/* Todo lo que va encima de una foto comparte el mismo tratamiento: tinta
   sólida con un filo claro. Una pieza blanca desaparece sobre las fotos
   claras, que en una agenda cultural son la mitad de los carteles. */
.datebadge, .ratingbadge, .photo-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.22) inset;
  border-radius: var(--r-sm);
}

.datebadge {
  padding: 8px 0 6px;
  width: 54px;
  text-align: center;
  line-height: 1;
}
.datebadge b { font-family: var(--serif); font-weight: 600; font-size: 22px; display: block; color: #fff; }
.datebadge span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sun-light);
}
.datebadge.tbd b { font-size: 13px; }
.datebadge.range { width: auto; padding: 9px 12px 10px; text-align: left; line-height: 1.2; }
.datebadge.range .ln {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: normal; text-transform: none; color: #fff; white-space: nowrap;
}
.datebadge.range .ln b { display: inline; font-family: var(--serif); font-size: 15px; }
.datebadge.range .ln.to { color: var(--sun-light); margin-top: 1px; }
.datebadge.range .ln.to::before { content: '→ '; color: rgba(255,255,255,.45); font-weight: 400; }

/* Nota valorativa sobre la foto (sitios) */
.ratingbadge {
  padding: 8px 13px;
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 5px;
}
.ratingbadge .star { color: var(--sun-light); }
.ratingbadge .n { color: rgba(255,255,255,.62); font-weight: 500; font-size: 12.5px; }

/* Estados de lista */
.empty, .loading { text-align: center; color: var(--muted); padding: var(--s8) var(--s4); }
.empty strong {
  color: var(--text); display: block;
  font-family: var(--serif); font-size: var(--t-lg); margin-bottom: var(--s1);
}
.skeleton {
  height: 216px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--paper-2), var(--paper), var(--paper-2));
  background-size: 200% 100%;
  animation: sh 1.4s infinite;
  margin-top: var(--s4);
}
@keyframes sh { to { background-position: -200% 0; } }


/* ══════════ PIE COMÚN ══════════ */

.site-foot {
  background: var(--ink);
  color: #e9e3d9;
  margin-top: var(--s7);
}
.site-foot .wrap { padding: var(--s7) var(--pad) var(--s6); }
.site-foot h2 {
  font-size: var(--t-lg);
  margin: 0 0 var(--s1);
  color: #fff;
}
.foot-sign {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 4.6vw, 32px);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 6px;
  color: #fff;
  max-width: 18ch;
}
.foot-by { color: var(--muted-dark); font-size: 14px; margin: 0 0 var(--s4); }

.foot-block {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: 460px;
}
.foot-block .sub, .sub { color: var(--muted-dark); font-size: 13.5px; margin: 0 0 var(--s4); }

.site-foot a { color: var(--mint); }

.foot-links {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: var(--s6) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.12);
}
.foot-links a {
  color: #cfc9bd; font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.foot-links a:hover { color: #fff; }
.foot-legal { color: #7d7871; font-size: var(--t-xs); margin: var(--s5) 0 0; }

/* Botón de Instagram: la única pieza naranja del pie. */
.ig {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: #ece7dd; background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  font-weight: 500; font-size: 14px; padding: 10px 17px;
  border-radius: var(--r-pill);
  transition: border-color .15s ease, background .15s ease;
}
.ig:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff; }

/* Formularios sobre fondo oscuro */
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: 12.5px; color: #cfc9bd; margin-bottom: 5px; }
.field input, .field textarea,
.fform input, .fform textarea,
.news-form input {
  width: 100%;
  font: inherit;
  font-size: var(--t-base);
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.fform input, .fform textarea { margin-bottom: 10px; }
.field textarea { resize: vertical; min-height: 110px; }
.fform textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder,
.fform input::placeholder, .fform textarea::placeholder,
.news-form input::placeholder { color: #8f897e; }
.field input:focus-visible, .field textarea:focus-visible,
.fform input:focus-visible, .fform textarea:focus-visible,
.news-form input:focus-visible {
  outline: 2px solid var(--mint); outline-offset: 1px; border-color: transparent;
}

.news-form { display: flex; gap: var(--s2); }
.news-form input { flex: 1 1 auto; min-width: 0; }
/* Sobre fondo oscuro la familia "tocable" es la menta: mismo papel que el
   teal en claro, con contraste suficiente sobre la tinta. */
.news-form button, .send, .fsend {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 600;
  font-size: var(--t-base);
  color: #06322f;
  background: var(--mint);
  border: none;
  border-radius: var(--r-sm);
  padding: 12px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.news-form button:hover, .send:hover, .fsend:hover { background: #96e7d3; }
.send:disabled, .fsend:disabled { opacity: .55; cursor: default; }

.news-note, .formnote, .fnote { font-size: 13.5px; margin: 10px 0 0; min-height: 18px; }
.news-note.ok, .formnote.ok, .fnote.ok { color: var(--mint); }
.news-note.err, .formnote.err, .fnote.err { color: #f0a58e; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ══════════ RESPONSIVE ══════════ */

@media (max-width: 620px) {
  :root { --pad: 16px; }
  .site-head .wrap { gap: var(--s2); }
  .brand span { font-size: 14px; }
  .site-nav a { padding: 7px 9px; font-size: 12.5px; }
  .site-nav a.opt { display: none; }
  .pagehead { padding: var(--s5) 0 var(--s3); }
  .pagehead .lead { font-size: 15.5px; }
  .cover img { height: 180px; }
  .title { font-size: 18.5px; }
  .card[data-detail-url] { cursor: pointer; -webkit-tap-highlight-color: rgba(12,95,90,.08); }
  .site-foot .wrap { padding: var(--s6) var(--pad) var(--s5); }
  .news-form { flex-direction: column; }
}

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