/* RailClick blog · cabecera (rch) · todo anclado a #rch: el kit global de Elementor (.elementor-kit-5 a/button/input)
   pisa las reglas de clase. Paleta y tipos de Lina; sin fuentes nuevas (Inter y Newsreader ya las carga el tema). */
:root {
  --rch-cream: #F8F7F3; --rch-white: #fff; --rch-navy: #122532; --rch-slate: #4A5A66; --rch-turq: #0DA3AE; --rch-teal: #08777F;
  --rch-line: rgba(18, 37, 50, .12); --rch-h: 72px; --rch-top: var(--wp-admin--admin-bar--height, 0px);
  --rch-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rch-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --rch-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 1023.98px) { :root { --rch-h: 60px; } }
html { scroll-padding-top: calc(var(--rch-h) + var(--rch-top) + 16px); }

/* ---------- salto al contenido (fuera de #rch: va antes de la cabecera) ---------- */
a.rch-skip { position: fixed; left: 16px; top: calc(var(--rch-top) + 8px); z-index: 10001; padding: 10px 16px; border-radius: 4px;
  background: var(--rch-navy); color: #fff; font: 600 15px/1.2 var(--rch-sans); text-decoration: none; transform: translateY(-160%); }
a.rch-skip:focus { transform: none; outline: 2px solid var(--rch-turq); outline-offset: 2px; }
/* El kit de Elementor (.elementor-kit-5 a, a:hover) empata en especificidad y lo dejaba en teal sobre navy (2,44:1). */
body a.rch-skip, body a.rch-skip:hover, body a.rch-skip:focus, body a.rch-skip:visited { color: #fff; }
.rch-after { height: calc(var(--rch-h)); scroll-margin-top: 0; }
.rch-after--over { height: 0; }
.rch-after:focus { outline: none; }

/* ---------- reset frente al kit de Elementor y al tema ---------- */
#rch, #rch * { box-sizing: border-box; }
#rch a, #rch button, #rch summary, #rch input { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; text-decoration: none; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0; min-height: 0; width: auto; line-height: inherit; }
#rch ul { list-style: none; margin: 0; padding: 0; }
#rch p { margin: 0; }
#rch img { display: block; max-width: none; height: auto; border: 0; border-radius: 0; box-shadow: none; }
#rch summary { list-style: none; cursor: pointer; }
#rch summary::-webkit-details-marker { display: none; }
#rch :focus-visible { outline: 2px solid var(--rch-teal); outline-offset: 3px; border-radius: 3px; }
#rch .rch-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- barra ---------- */
#rch { position: fixed; top: var(--rch-top); left: 0; right: 0; z-index: 1000; font: 500 15px/1.3 var(--rch-sans); color: var(--rch-navy);
  background: var(--rch-cream); box-shadow: 0 1px 0 var(--rch-line);
  transition: background-color .3s var(--rch-ease), box-shadow .3s var(--rch-ease), transform .38s var(--rch-ease); }
/* Sobre la foto de cabecera: velo crema que garantiza el contraste del texto (navy sobre ≥ 85 % crema). */
#rch.rch--over:not(.is-solid) { background: linear-gradient(180deg, rgba(248, 247, 243, .95) 0%, rgba(248, 247, 243, .86) 62%, rgba(248, 247, 243, 0) 100%); box-shadow: none; }
#rch.is-hidden { transform: translateY(calc(-100% - var(--rch-top) - 2px)); }
#rch .rch-bar { height: var(--rch-h); max-width: 1248px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 24px; }
#rch .rch-logo { flex: none; display: flex; align-items: center; padding: 6px 4px 6px 0; }
#rch .rch-logo img { height: 30px; width: auto; }

/* ---------- navegación de escritorio ---------- */
#rch .rch-nav { flex: 1; display: flex; justify-content: center; }
#rch .rch-nav__head, #rch .rch-nav .rch-plan--menu { display: none; }
#rch .rch-list { display: flex; align-items: center; gap: 8px; }
#rch .rch-top { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; color: var(--rch-navy); transition: color .2s, background-color .2s; }
#rch .rch-top:hover, #rch .rch-dd[open] > .rch-top { color: var(--rch-teal); }
#rch .rch-top::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--rch-turq); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--rch-ease); }
#rch .rch-item.is-active > .rch-top::after, #rch .rch-item.is-active > .rch-dd > .rch-top::after { transform: scaleX(1); }
#rch .rch-chev { transition: transform .25s var(--rch-ease); }
#rch .rch-dd[open] .rch-chev { transform: rotate(180deg); }

/* desplegables: ancho completo bajo la barra */
#rch .rch-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--rch-cream); border-top: 1px solid var(--rch-line); border-bottom: 1px solid var(--rch-line);
  box-shadow: 0 28px 48px -24px rgba(18, 37, 50, .22); cursor: auto; }
#rch .rch-panel__in { max-width: 1248px; margin: 0 auto; padding: 28px 16px 32px; }
#rch .rch-panel__h { font: 600 11px/1 var(--rch-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rch-teal); margin-bottom: 20px; }
#rch .rch-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
#rch .rch-tile a { display: block; }
#rch .rch-tile__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #E9E6DD; }
#rch .rch-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--rch-ease); }
#rch .rch-tile a:hover img { transform: scale(1.04); }
#rch .rch-tile__name { display: block; margin-top: 12px; font: 400 22px/1.15 var(--rch-serif); color: var(--rch-navy); }
#rch .rch-tile a:hover .rch-tile__name, #rch .rch-row a:hover .rch-row__name { color: var(--rch-teal); }
#rch .rch-tile__n, #rch .rch-row__n { display: block; margin-top: 4px; font: 400 13px/1.3 var(--rch-sans); color: var(--rch-slate); }
#rch .rch-tile.is-active .rch-tile__name, #rch .rch-row.is-active .rch-row__name { text-decoration: underline; text-decoration-color: var(--rch-turq); text-decoration-thickness: 2px; text-underline-offset: 5px; }
#rch .rch-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
#rch .rch-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
#rch .rch-row a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rch-line); }
#rch .rch-row__name { font: 400 22px/1.15 var(--rch-serif); color: var(--rch-navy); transition: color .2s; }
#rch .rch-row__n { margin: 0; white-space: nowrap; }
#rch .rch-feat { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; align-items: start; }
#rch .rch-feat__media { grid-row: span 3; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #E9E6DD; }
#rch .rch-feat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--rch-ease); }
#rch .rch-feat:hover img { transform: scale(1.04); }
#rch .rch-feat__label { font: 600 11px/1 var(--rch-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rch-teal); }
#rch .rch-feat__title { margin-top: 8px; font: 400 19px/1.25 var(--rch-serif); color: var(--rch-navy); }
#rch .rch-feat__go { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--rch-sans); color: var(--rch-teal); }
#rch .rch-more { margin-top: 24px; }
#rch .rch-more a { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--rch-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rch-navy); padding: 6px 0; border-bottom: 1px solid var(--rch-turq); }
#rch .rch-more a:hover, #rch .rch-feat__go:hover { color: var(--rch-teal); }
#rch .rch-arrow { transition: transform .25s var(--rch-ease); flex: none; }
#rch a:hover > .rch-arrow, #rch a:hover .rch-feat__go .rch-arrow { transform: translateX(3px); }

/* ---------- herramientas: búsqueda y Plan your trip ---------- */
#rch .rch-tools { flex: none; display: flex; align-items: center; gap: 8px; }
#rch input[type="search"] { flex: 1; min-width: 0; height: 56px; padding: 0 4px; font: 400 28px/1.2 var(--rch-serif); color: var(--rch-navy); background: transparent; border: 0; border-bottom: 1px solid var(--rch-navy); outline: none; -webkit-appearance: none; appearance: none; }
#rch input[type="search"]::placeholder { color: #6B7882; opacity: 1; }
#rch input[type="search"]:focus-visible { border-bottom: 2px solid var(--rch-teal); outline: none; }
/* Plan your trip: discreto (contorno), venta en segundo plano */
#rch .rch-plan { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rch-teal); color: var(--rch-teal); font: 600 14px/1 var(--rch-sans); white-space: nowrap; transition: background-color .2s, color .2s; }
#rch .rch-plan:hover { background: var(--rch-teal); color: #fff; }
#rch .rch-burger { display: none; }

/* ---------- aparición de los desplegables (adorno: sin él todo funciona igual) ---------- */
@media (prefers-reduced-motion: no-preference) {
  #rch .rch-dd[open] .rch-tile, #rch .rch-dd[open] .rch-row, #rch .rch-dd[open] .rch-feat { animation: rch-rise .5s var(--rch-ease) both; }
  #rch .rch-dd[open] li:nth-child(2) { animation-delay: .04s; } #rch .rch-dd[open] li:nth-child(3) { animation-delay: .08s; }
  #rch .rch-dd[open] li:nth-child(4) { animation-delay: .12s; } #rch .rch-dd[open] li:nth-child(5) { animation-delay: .16s; }
  #rch .rch-dd[open] .rch-feat { animation-delay: .14s; }
  #rch .rch-dd[open] .rch-tile__media img { animation: rch-settle 1.1s var(--rch-ease) both; }
}
@keyframes rch-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes rch-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rch-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #rch, #rch * { transition: none !important; animation: none !important; } }

/* ---------- móvil y tableta ---------- */
@media (max-width: 1023.98px) {
  #rch .rch-bar { gap: 8px; }
  #rch .rch-logo img { height: 26px; }
  #rch .rch-tools { margin-left: auto; gap: 2px; }
  #rch .rch-plan--bar { display: none; }
  #rch .rch-burger { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 10px; border-radius: 999px; font: 600 15px/1 var(--rch-sans); color: var(--rch-navy); cursor: pointer; }
  #rch .rch-burger__lines { position: relative; display: block; width: 20px; height: 12px; }
  #rch .rch-burger__lines span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--rch-ease), top .3s var(--rch-ease); }
  #rch .rch-burger__lines span:first-child { top: 1px; } #rch .rch-burger__lines span:last-child { top: 9px; }
  #rch.is-open .rch-burger__lines span:first-child { top: 5px; transform: rotate(45deg); }
  #rch.is-open .rch-burger__lines span:last-child { top: 5px; transform: rotate(-45deg); }

  /* el menú: hoja crema bajo la barra */
  #rch .rch-nav { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--rch-h) + var(--rch-top)); display: block; overflow-y: auto; overscroll-behavior: contain;
    background: var(--rch-cream); border-top: 1px solid var(--rch-line); padding: 8px 16px calc(32px + env(safe-area-inset-bottom));
    visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .45s var(--rch-ease), opacity .3s, visibility 0s .45s; }
  #rch.is-open .rch-nav, #rch .rch-nav:target { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path .45s var(--rch-ease), opacity .2s, visibility 0s; }
  #rch .rch-nav:target { top: var(--rch-top); z-index: 2; border-top: 0; }
  #rch .rch-nav__head { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-bottom: 4px; }
  .rch-js #rch .rch-nav__head { display: none; }
  #rch .rch-nav__title { font: 600 11px/1 var(--rch-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rch-teal); }
  #rch .rch-close { display: inline-grid; place-items: center; width: 44px; height: 44px; }
  #rch .rch-list { display: block; }
  #rch .rch-item { border-bottom: 1px solid var(--rch-line); }
  #rch .rch-top { display: flex; justify-content: space-between; width: 100%; padding: 18px 0; border-radius: 0; font: 400 28px/1.15 var(--rch-serif); }
  #rch .rch-top::after { left: 0; right: auto; width: 32px; bottom: 10px; }
  #rch .rch-chev { width: 18px; height: 18px; }
  #rch .rch-panel { position: static; border: 0; box-shadow: none; background: none; }
  #rch .rch-panel__in { padding: 0 0 20px; }
  #rch .rch-panel__h { display: none; }
  #rch .rch-tiles { grid-template-columns: 1fr; gap: 0; }
  #rch .rch-tile a { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px 0; }
  #rch .rch-tile__media { grid-row: span 2; border-radius: 3px; }
  #rch .rch-tile__name { margin: 0; font: 500 17px/1.25 var(--rch-sans); }
  #rch .rch-tile__n { margin: 0; }
  #rch .rch-split { display: block; }
  #rch .rch-rows { display: block; }
  #rch .rch-row a { padding: 12px 0; border-bottom: 0; }
  #rch .rch-row__name { font: 500 17px/1.25 var(--rch-sans); }
  #rch .rch-feat { display: none; }
  #rch .rch-more { margin-top: 8px; }
  #rch .rch-nav .rch-plan--menu { display: flex; justify-content: center; height: 52px; margin-top: 28px; font-size: 16px; }
  #rch input[type="search"] { font-size: 22px; height: 48px; }
  @media (prefers-reduced-motion: no-preference) {
    #rch.is-open .rch-item, #rch.is-open .rch-plan--menu { animation: rch-rise .5s var(--rch-ease) both; }
    #rch.is-open .rch-item:nth-child(2) { animation-delay: .05s; } #rch.is-open .rch-item:nth-child(3) { animation-delay: .1s; }
    #rch.is-open .rch-plan--menu { animation-delay: .15s; }
  }
}
html.rch-lock, html.rch-lock body { overflow: hidden; }
@media print { #rch { position: static; } .rch-after { display: none; } #rch .rch-tools, #rch .rch-nav { display: none; } }
