/*
 * Guía de Córdoba · identidad visual de bemypresent (capa de marca).
 * Papel, tinta y cobre; Fraunces para titulares y Geist para el texto.
 * Mobile first: la base es el móvil; los media queries amplían.
 */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/fraunces-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/fraunces-italic.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-normal.woff2) format("woff2")}

:root{
  /* Primitivas de marca (tokens.css de bemypresent) */
  --paper:#f6f2ed;
  --paper-2:oklch(93.6% .014 61);
  --blush:oklch(87.3% .029 48);
  --ink:#262422;
  --ink-deep:oklch(20% .006 68);
  --ink-muted:oklch(45% .012 60);
  --rule:oklch(87% .012 65);
  --rule-strong:oklch(60% .014 60);
  --copper:oklch(65.6% .084 42);
  --copper-ink:oklch(50% .105 42);
  --copper-soft:oklch(72% .075 44);
  --danger:oklch(46% .15 27);
  --danger-tint:oklch(94% .02 30);
  --ink-muted-dark:oklch(72% .008 70);
  --rule-dark:oklch(38% .008 68);

  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-card:1rem;--radius-pill:999px;
  --whisper:0 1px 2px rgb(38 36 34/.06);
  --hairline:0 0 0 1px rgb(38 36 34/.07);
  --print:0 2px 4px rgb(38 36 34/.08),0 16px 36px -8px rgb(38 36 34/.2);
  --label:.12em;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:112.5%;scroll-behavior:smooth;scroll-padding-top:4.5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--blush)}
a{color:var(--copper-ink);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--copper-ink);outline-offset:3px;border-radius:.25rem}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-display);font-optical-sizing:auto;font-weight:500;margin:0;letter-spacing:-.015em}
p{margin:0}

/* ───── Cabecera fija ───── */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;gap:.5rem;max-width:72rem;margin:0 auto;padding:.4rem .75rem}
.marca{flex:none;font:500 1.2rem/1 var(--font-display);color:var(--ink);text-decoration:none;padding:.5rem .4rem}
.marca span{display:none;color:var(--ink-muted)}
.top nav{flex:1;display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:1.5rem}
.top nav::-webkit-scrollbar{display:none}
.top nav a{flex:none;color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;padding:.55rem .95rem;border:1px solid var(--rule-strong);border-radius:var(--radius-pill);transition:background .2s var(--ease),color .2s var(--ease)}
.top nav a:hover,.top nav a:active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

main{max-width:72rem;margin:0 auto}
.kicker{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--label);color:var(--copper-ink)}

/* ───── Portada ───── */
.portada{padding:2rem 1.25rem 0}
.hero-text{max-width:42rem}
h1{font-size:clamp(2.6rem,9vw + .5rem,5.4rem);line-height:1.02;letter-spacing:-.022em;margin:.7rem 0 1.1rem}
h1 em{font-style:italic;font-weight:400;color:var(--copper-ink)}
.sub{font-size:1.12rem;color:var(--ink-muted);max-width:34rem}
.botones{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.1rem;padding:.7rem 1.6rem;border-radius:var(--radius-pill);font-weight:600;font-size:1rem;text-decoration:none;border:1px solid var(--ink);transition:background .2s var(--ease),color .2s var(--ease)}
.btn.primario{background:var(--ink);color:var(--paper)}
.btn.primario:hover{background:var(--ink-deep)}
.btn.fantasma{border-color:var(--rule-strong);color:var(--ink)}
.btn.fantasma:hover{background:var(--paper-2)}

.portada>figure{margin:0 -1.25rem}
.portada>figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
figcaption{font-size:.78rem;line-height:1.45;color:var(--ink-muted);padding:.6rem 1.25rem 0}
figcaption a{color:inherit}

.plan{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.75rem}
.plan a{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center;background:var(--paper-2);border-radius:var(--radius-card);box-shadow:var(--hairline);padding:1rem 1.1rem;text-decoration:none;color:var(--ink);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.plan a:hover{box-shadow:var(--hairline),var(--whisper);transform:translateY(-2px)}
.plan .n{grid-row:1/3;font:italic 400 3rem/1 var(--font-display);color:var(--copper-ink);min-width:1.1ch}
.plan strong{font:500 1.2rem/1.25 var(--font-display)}
.plan span:last-child{color:var(--ink-muted);font-size:.95rem}
.nota{margin:1.5rem 0 0;font-size:.9rem;line-height:1.55;color:var(--ink-muted);border-left:3px solid var(--copper);padding:.2rem 0 .2rem 1rem}

/* ───── Días ───── */
.dia{padding:4rem 1.25rem 0;counter-reset:parada}
.dia-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.num{font:italic 400 clamp(4.5rem,18vw,8rem)/.8 var(--font-display);color:var(--rule-strong);margin-top:.25rem}
.dia-head h2,.dia>h2{font-size:clamp(1.9rem,6vw + .5rem,3.2rem);line-height:1.08;margin:.35rem 0 .6rem}
.ritmo{color:var(--ink-muted);max-width:36rem}
.aparte{margin-top:1.5rem;color:var(--ink-muted)}

/* ───── Fichas ───── */
.ficha{counter-increment:parada;background:var(--paper-2);border-radius:var(--radius-card);box-shadow:var(--hairline);overflow:hidden;margin:0 0 1.75rem}
.ficha figure{margin:0}
.ficha figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ficha figcaption{padding:.6rem 1.25rem 0}
.ficha-cuerpo{padding:1.25rem 1.25rem 1.5rem}
.parada{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--label);color:var(--ink-muted)}
.parada::before{content:"Parada " counter(parada)}
.ficha h3{font-size:clamp(1.65rem,4vw + .6rem,2.2rem);line-height:1.12;margin:.3rem 0 .75rem}
.desc{font-size:1.06rem}
dl{margin:1.25rem 0 0}
dl div{padding:.8rem 0;border-top:1px solid var(--rule)}
dt{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--label);color:var(--ink-muted);margin-bottom:.2rem}
dd{margin:0}
dd strong{font-weight:600}
.aviso{display:inline-block;background:var(--danger-tint);color:var(--danger);font-weight:600;padding:0 .45rem;border-radius:.3rem}
.consejo{margin-top:1rem;padding:1rem 1.1rem;border-radius:.75rem;background:color-mix(in oklab,var(--blush) 45%,var(--paper));box-shadow:inset 3px 0 0 var(--copper-ink)}
.consejo span{display:block;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--label);color:var(--copper-ink);margin-bottom:.15rem}

/* ───── Consejos prácticos ───── */
#consejos>h2,#creditos>h2{font-size:clamp(1.9rem,6vw + .5rem,3.2rem);line-height:1.08;margin:.2rem 0 1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.consejos{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.consejos li{background:var(--paper-2);border-radius:var(--radius-card);box-shadow:var(--hairline);padding:1.1rem 1.25rem}
.consejos h3{font-size:1.3rem;margin-bottom:.3rem}

/* ───── Créditos ───── */
#creditos{padding-bottom:4rem}
#creditos h3{font-size:1.4rem;margin:2rem 0 .75rem}
#creditos p,#creditos li{font-size:.9rem;line-height:1.55}
#creditos ul{padding-left:1.1rem;margin:0}
#creditos li{margin:.45rem 0;overflow-wrap:anywhere}
.lista-creditos{color:var(--ink-muted)}
#creditos .nota{margin-top:1.5rem}

/* ───── Pie sobre banda oscura ───── */
footer{background:var(--ink);color:var(--paper);padding:3.5rem 1.25rem 2.5rem;text-align:center}
.frase{font:500 clamp(2.2rem,9vw,4.2rem)/1.08 var(--font-display);letter-spacing:-.02em}
.frase em{font-style:italic;font-weight:400;color:var(--copper-soft)}
.pie{margin:1.5rem auto 0;max-width:34rem;font-size:.85rem;color:var(--ink-muted-dark)}
footer a{color:var(--copper-soft)}
footer :focus-visible{outline-color:var(--copper-soft)}

/* ───── Tablet ───── */
@media(min-width:700px){
  html{font-size:118.75%}
  .marca span{display:inline}
  .top nav{mask-image:none;-webkit-mask-image:none;justify-content:flex-end}
  .portada{padding:3.5rem 2rem 0}
  .portada>figure{margin:0}
  .portada>figure img{aspect-ratio:16/9;border-radius:var(--radius-card);box-shadow:var(--print)}
  figcaption,.ficha figcaption{padding-left:0}
  .plan{grid-template-columns:repeat(3,1fr);margin-top:2.5rem}
  .plan a{grid-template-columns:1fr;row-gap:.25rem;padding:1.4rem}
  .plan .n{grid-row:auto;font-size:3.6rem;margin-bottom:.5rem}
  .dia{padding:5.5rem 2rem 0}
  .ficha figcaption{padding-left:1.25rem}
  .consejos{grid-template-columns:1fr 1fr}
  dl div{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem}
  dt{margin:.28rem 0 0}
}

/* ───── Escritorio: foto a un lado, datos al otro ───── */
@media(min-width:960px){
  .ficha{display:grid;grid-template-columns:5fr 6fr;align-items:start}
  .ficha figure{position:sticky;top:4.75rem}
  .ficha figure img{aspect-ratio:4/3;object-fit:cover}
  .ficha-cuerpo{padding:1.75rem 2rem 2rem}
  .ficha:nth-of-type(even){grid-template-columns:6fr 5fr}
  .ficha:nth-of-type(even) figure{order:2}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media(prefers-contrast:more){:root{--ink-muted:oklch(36% .012 60)}}
@media print{.top{display:none}.ficha{break-inside:avoid;box-shadow:none}footer{background:none;color:var(--ink)}}