/*
Theme Name: rutea+
Theme URI: https://ruteamas.pe
Author: ruteamas.pe
Description: Tema editorial de guías de viaje por el Perú. Portada con destinos, escapadas desde Lima y fichas prácticas.
Version: 0.1.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: rutea-plus
*/

/* Concepto: guía de viaje editorial. Portada con altitud real de los destinos (costa a Andes), fichas con datos prácticos al estilo guía clásica. */
:root{
  --bg:#F1F4F1; --surface:#FFFFFF; --ink:#10262E; --muted:#51666D; --line:#D3DCD8;
  --sea:#17626B; --aji:#E9A21B; --aji-ink:#2E1E00; --tierra:#A8481F; --chip:#E4EBE7;
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  --f-data:'DM Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A171C; --surface:#10232A; --ink:#E8EFEC; --muted:#9DB1B6; --line:#233A42;
    --sea:#5CC0C9; --aji:#F0B13A; --aji-ink:#2E1E00; --tierra:#EE9468; --chip:#17303A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A171C; --surface:#10232A; --ink:#E8EFEC; --muted:#9DB1B6; --line:#233A42;
  --sea:#5CC0C9; --aji:#F0B13A; --aji-ink:#2E1E00; --tierra:#EE9468; --chip:#17303A; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55;
  padding-block:0 40px;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
}
.wrap{max-width:1120px; margin:0 auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--aji); outline-offset:3px; border-radius:4px}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; line-height:1.05; letter-spacing:-.02em}
p{margin:0}
.eyebrow{font-family:var(--f-data); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.sprite{position:absolute; width:0; height:0; overflow:hidden}

/* Cabecera */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px; border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:2px; font-family:var(--f-display); font-weight:800; font-size:26px; letter-spacing:-.03em; text-decoration:none}
.brand b{display:inline-grid; place-items:center; width:26px; height:26px; margin-inline:3px; background:var(--aji); color:var(--aji-ink); border-radius:7px; font-size:20px; line-height:1; box-shadow:0 3px 0 rgba(46,30,0,.45); transition:transform .12s ease, box-shadow .12s ease; animation:nudge .55s ease 1.95s}
.brand:active b{transform:translateY(3px) scale(.94); box-shadow:0 0 0 rgba(46,30,0,.45)}
@keyframes nudge{40%{transform:translateY(3px) scale(.92); box-shadow:0 0 0 rgba(46,30,0,.45)}}

/* Pantalla de entrada: el nombre aparece y el + se presiona como un botón */
.splash{position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--ink); color:var(--bg); pointer-events:none; animation:splash-out .45s ease 1.55s forwards}
@keyframes splash-out{to{opacity:0; visibility:hidden}}
.splash .word{display:flex; align-items:center; font-family:var(--f-display); font-weight:800; font-size:clamp(3.4rem,17vw,6.8rem); letter-spacing:-.04em; line-height:1; animation:word-in .5s ease backwards}
@keyframes word-in{from{opacity:0; transform:translateY(14px)}}
.splash b{position:relative; display:inline-grid; place-items:center; width:.84em; height:.84em; margin-left:.08em; border-radius:.2em; background:var(--aji); color:var(--aji-ink); font-size:inherit; font-weight:700; line-height:1; box-shadow:0 .08em 0 rgba(46,30,0,.55); animation:press 1.05s cubic-bezier(.3,.7,.3,1) .55s}
.splash b::after{content:""; position:absolute; inset:0; border-radius:inherit; border:.045em solid var(--aji); opacity:0; animation:ring .7s ease-out .7s}
@keyframes press{35%{transform:translateY(.08em) scale(.92); box-shadow:0 0 0 rgba(46,30,0,.55)} 70%{transform:translateY(-.02em) scale(1.05)}}
@keyframes ring{from{opacity:.85; transform:scale(1)} to{opacity:0; transform:scale(2.4)}}
.nav{display:flex; gap:28px; font-weight:500}
.nav a{text-decoration:none; padding-block:6px; border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--aji)}
.menu-btn{display:none; font:inherit; font-weight:600; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:8px 14px; cursor:pointer}
@media (max-width:720px){
  .nav{display:none; position:absolute; left:max(16px,env(safe-area-inset-left,0px)); right:max(16px,env(safe-area-inset-right,0px)); top:74px; flex-direction:column; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:6px 16px; z-index:5}
  .nav.open{display:flex}
  .nav a{padding-block:13px; border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .menu-btn{display:block}
  .top{position:relative}
}

/* Portada */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; padding-block:56px 64px; align-items:center}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem); font-weight:800; margin-top:14px}
.hero h1 em{font-style:normal; color:var(--sea)}
.lead{font-size:1.15rem; color:var(--muted); max-width:46ch; margin-top:20px}
.search{display:flex; gap:8px; margin-top:28px; max-width:520px}
.search input{flex:1; min-width:0; font:inherit; background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px}
.search input::placeholder{color:var(--muted)}
.btn{font:inherit; font-weight:600; background:var(--aji); color:var(--aji-ink); border:0; border-radius:12px; padding:14px 20px; cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.alt{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px}
.alt h2{font-size:1.5rem}
.alt .cap{color:var(--muted); font-size:.92rem; margin-top:6px}
.rows{display:grid; gap:12px; margin-top:22px}
.row{display:grid; grid-template-columns:92px 1fr 52px; gap:12px; align-items:center; font-size:.95rem}
.row .n{font-weight:600}
.bar{height:14px; background:var(--chip); border-radius:7px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--sea); border-radius:7px; min-width:6px}
.row.max .bar i{background:var(--aji)}
.row .v{font-family:var(--f-data); font-size:13px; text-align:right}
.alt .foot{font-family:var(--f-data); font-size:12px; color:var(--muted); margin-top:18px; padding-top:14px; border-top:1px dashed var(--line)}
@media (max-width:860px){ .hero{grid-template-columns:1fr; gap:36px; padding-block:36px 48px} }

/* Secciones */
section{padding-block:56px; border-top:1px solid var(--line)}
.sec-head{display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.8rem); font-weight:700; margin-top:8px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{font:inherit; font-size:.92rem; font-weight:500; background:var(--chip); color:var(--ink); border:1px solid transparent; border-radius:999px; padding:8px 16px; cursor:pointer}
.chip:hover{border-color:var(--sea)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg)}

/* Tarjetas de destino */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(16,38,46,.14)}
.art{display:block; width:100%; aspect-ratio:5/3; max-width:100%}
.card .body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1}
.tag{font-family:var(--f-data); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tierra)}
.card h3{font-size:1.55rem; font-weight:700}
.card .loc{color:var(--muted); font-size:.92rem; margin-top:-4px}
.facts{display:grid; gap:0; margin:6px 0 0; border-top:1px solid var(--line)}
.facts div{display:flex; justify-content:space-between; gap:12px; padding-block:8px; border-bottom:1px solid var(--line); font-size:.9rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0; font-family:var(--f-data); font-size:13px; text-align:right}
.card .more{margin-top:auto; padding-top:6px; font-weight:600; font-size:.92rem}
.card .more a{text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--aji)}
.card .more span{color:var(--muted); font-weight:500}
.empty{padding:28px; border:1px dashed var(--line); border-radius:16px; color:var(--muted)}

/* Escapadas */
.trips{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink)}
.trips li{display:grid; grid-template-columns:130px 1fr auto; gap:24px; align-items:baseline; padding-block:20px; border-bottom:1px solid var(--line)}
.trips .t{font-family:var(--f-data); font-size:2rem; font-weight:500; line-height:1}
.trips .t small{font-size:.9rem; color:var(--muted)}
.trips h3{font-size:1.4rem}
.trips p{color:var(--muted); margin-top:4px; max-width:60ch}
.trips .for{font-family:var(--f-data); font-size:12px; letter-spacing:.08em; text-transform:uppercase; background:var(--chip); border-radius:999px; padding:6px 12px; white-space:nowrap}
.note{font-size:.9rem; color:var(--muted); margin-top:16px; max-width:70ch}
@media (max-width:720px){
  .trips li{grid-template-columns:1fr; gap:6px}
  .trips .for{justify-self:start; margin-top:6px}
}

/* Ficha destacada */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.feature .art{border-radius:18px}
.feature h2{font-size:clamp(2rem,4.4vw,3.2rem); font-weight:800; margin-top:10px}
.feature .txt{color:var(--muted); margin-top:16px; max-width:52ch}
.panel{margin-top:24px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:6px 20px}
.panel div{display:grid; grid-template-columns:120px 1fr; gap:16px; padding-block:14px; border-bottom:1px solid var(--line)}
.panel div:last-child{border-bottom:0}
.panel dt{font-family:var(--f-data); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tierra); padding-top:3px}
.panel dd{margin:0}
@media (max-width:860px){ .feature{grid-template-columns:1fr; gap:28px} .panel div{grid-template-columns:1fr; gap:4px} }

/* Guías */
.guides{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.guides li{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px; border-bottom:1px solid var(--line)}
.guides h3{font-size:1.2rem; font-weight:600; letter-spacing:-.01em; line-height:1.25}
.guides .soon{font-family:var(--f-data); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 10px; white-space:nowrap}
@media (max-width:720px){ .guides{grid-template-columns:1fr} }

/* Pie */
footer{border-top:2px solid var(--ink); padding-top:32px; display:grid; grid-template-columns:1.2fr 1fr; gap:32px}
footer .brand{font-size:22px}
footer p{color:var(--muted); font-size:.92rem; margin-top:12px; max-width:50ch}
footer ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; align-content:start}
footer li a{text-decoration:none; font-weight:500}
footer li a:hover{text-decoration:underline; text-decoration-color:var(--aji); text-underline-offset:4px; text-decoration-thickness:2px}
.legal{grid-column:1/-1; max-width:none; font-family:var(--f-data); font-size:12px; color:var(--muted); padding-top:20px; border-top:1px solid var(--line)}
@media (max-width:720px){ footer{grid-template-columns:1fr} }
/* Evita que contenido interno ensanche las columnas en pantallas angostas */
.hero>*,.feature>*,.grid>*,footer>*{min-width:0}
@media (max-width:860px){ .hero,.feature{grid-template-columns:minmax(0,1fr)} }
@media (max-width:720px){ footer,.guides{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .grid{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .card{transition:none} .card:hover{transform:none} .splash{display:none} .brand b{animation:none} }

/* ===== Ajustes para WordPress ===== */
[hidden]{display:none!important}
img{max-width:100%; height:auto}
body{margin:0}
html.no-splash .splash{display:none}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.nav ul, .nav li{display:contents; list-style:none; margin:0; padding:0}
.nav .current-menu-item > a, .nav .current_page_item > a{border-color:var(--aji)}
@media (max-width:720px){ .nav ul, .nav li{display:contents} }
.more-link{font-weight:600; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--aji)}
.guides h3 a{text-decoration:none}
.guides h3 a:hover{text-decoration:underline; text-decoration-color:var(--aji); text-underline-offset:4px; text-decoration-thickness:2px}
.guides .soon{font-variant-numeric:tabular-nums}
img.art{object-fit:cover; height:auto}
.card .card-media{display:block}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline; text-decoration-color:var(--aji); text-underline-offset:4px; text-decoration-thickness:2px}
.card .excerpt{color:var(--muted); font-size:.95rem}
.archive-head{padding-block:48px 8px; border-top:0}
.archive-head h1{font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; margin-top:10px}
.navigation.pagination{margin-top:36px}
.nav-links{display:flex; gap:8px; flex-wrap:wrap}
.nav-links a, .nav-links span{font-family:var(--f-data); font-size:14px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; text-decoration:none; background:var(--surface)}
.nav-links .current{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* Artículos y páginas */
.post-wrap{max-width:760px; margin:0 auto; padding-block:48px 24px}
.post-wrap h1{font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; margin:12px 0 14px}
.post-meta{font-family:var(--f-data); font-size:13px; color:var(--muted)}
.post-thumb{margin:28px 0 0}
.post-thumb img{width:100%; border-radius:18px; aspect-ratio:5/3; object-fit:cover}
.entry{font-size:1.08rem; margin-top:32px}
.entry p{margin:0 0 1.25em}
.entry h2{font-size:1.9rem; font-weight:700; margin:2em 0 .6em}
.entry h3{font-size:1.4rem; font-weight:700; margin:1.8em 0 .5em}
.entry a{text-decoration-color:var(--aji); text-decoration-thickness:2px; text-underline-offset:3px}
.entry img{border-radius:14px}
.entry ul, .entry ol{padding-left:1.3em; margin:0 0 1.25em}
.entry li{margin-bottom:.4em}
.entry blockquote{border-left:4px solid var(--aji); margin:1.6em 0; padding:4px 0 4px 18px; color:var(--muted)}
.entry figure{margin:1.6em 0}
.entry figcaption{font-family:var(--f-data); font-size:12px; color:var(--muted); margin-top:8px}
.entry table{width:100%; border-collapse:collapse; font-size:.95rem}
.entry th, .entry td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left}
.entry .alignwide, .entry .alignfull{max-width:100%}
.hero>*,.feature>*,.grid>*,footer>*{min-width:0}
@media (max-width:860px){ .hero,.feature{grid-template-columns:minmax(0,1fr)} }
@media (max-width:720px){ footer,.guides{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .grid{grid-template-columns:minmax(0,1fr)} }
.notfound{padding-block:80px; text-align:left}
.notfound h1{font-size:clamp(2.4rem,6vw,4.5rem); font-weight:800}
.notfound p{color:var(--muted); margin:16px 0 24px; max-width:46ch}
.notfound a.btn{display:inline-block; text-decoration:none}