/* ==========================================================================
   Economía Viajera — Hoja de estilos compartida
   Estética: fanzine de viajes vintage / editorial soleado
   Paleta: arena · terracota · verde teal · oro
   Tipografías: Fraunces (display) + Karla (texto)
   ========================================================================== */

:root{
  --sand:        #f4ecdc;
  --sand-deep:   #ece0c8;
  --paper:       #fbf6ea;
  --ink:         #2b2620;
  --ink-soft:    #5a5145;
  --clay:        #c0522e;   /* terracota */
  --clay-deep:   #9a3d1f;
  --teal:        #1f4d46;   /* verde profundo */
  --teal-soft:   #2f6b61;
  --gold:        #d99a2b;   /* sol */
  --gold-soft:   #e8c06a;
  --line:        #d9caab;
  --shadow:      rgba(43,38,32,.14);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", "Segoe UI", system-ui, sans-serif;

  --maxw: 1080px;
  --radius: 14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--sand);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(217,154,43,.10), transparent 40%),
    radial-gradient(circle at 88% 8%, rgba(31,77,70,.08), transparent 42%),
    radial-gradient(circle at 50% 120%, rgba(192,82,46,.10), transparent 55%);
  line-height:1.7;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* textura de grano sutil */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:var(--clay-deep); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover{ color:var(--clay); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.narrow{ max-width:760px; }

/* ---------- Barra de progreso de lectura ---------- */
.progress-bar{
  position:fixed; top:0; left:0; height:4px; width:0%;
  background:linear-gradient(90deg,var(--clay),var(--gold));
  z-index:200; transition:width .1s linear;
}

/* ---------- Navegación ---------- */
.topnav{
  position:sticky; top:0; z-index:150;
  background:rgba(251,246,234,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topnav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{
  font-family:var(--font-display); font-weight:600; font-size:1.25rem;
  color:var(--teal); letter-spacing:-.01em; text-decoration:none;
  display:flex; align-items:center; gap:.5rem;
}
.brand .dot{ width:11px; height:11px; border-radius:50%; background:var(--clay);
  box-shadow:0 0 0 4px rgba(192,82,46,.18); }
.nav-links{ display:flex; gap:1.4rem; list-style:none; align-items:center; }
.nav-links a{ color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.95rem; }
.nav-links a:hover{ color:var(--clay); }
.menu-btn{ display:none; background:none; border:1.5px solid var(--line); border-radius:8px;
  padding:.4rem .6rem; font-size:1.1rem; cursor:pointer; color:var(--teal); }

@media(max-width:820px){
  .nav-links{
    position:absolute; top:64px; right:0; left:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{ max-height:340px; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:.85rem 24px; border-top:1px solid var(--line); width:100%; }
  .menu-btn{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  padding:80px 0 64px; text-align:center; position:relative; overflow:hidden;
}
.hero .kicker{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.32em;
  font-size:.78rem; font-weight:700; color:var(--clay); margin-bottom:1.2rem;
}
.hero h1{
  font-family:var(--font-display); font-weight:600; line-height:1.02;
  font-size:clamp(2.6rem,7vw,5.4rem); letter-spacing:-.02em; color:var(--teal);
  margin-bottom:1.2rem;
}
.hero h1 em{ font-style:italic; color:var(--clay); }
.hero p.lead{ max-width:620px; margin:0 auto 2rem; font-size:1.18rem; color:var(--ink-soft); }
.hero .cta-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block; font-family:var(--font-body); font-weight:700; font-size:1rem;
  padding:.85rem 1.6rem; border-radius:50px; text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--clay); color:#fff; box-shadow:0 6px 18px rgba(192,82,46,.3); }
.btn-primary:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 10px 24px rgba(192,82,46,.38); }
.btn-ghost{ background:transparent; color:var(--teal); border-color:var(--teal); }
.btn-ghost:hover{ background:var(--teal); color:var(--paper); transform:translateY(-2px); }

/* sellos / pasaporte decorativo */
.stamp{
  position:absolute; font-family:var(--font-display); font-weight:600;
  border:2.5px dashed var(--gold); color:var(--gold); border-radius:12px;
  padding:.4rem .9rem; transform:rotate(-12deg); opacity:.55;
  font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
}
.stamp.s1{ top:60px; left:6%; transform:rotate(-14deg); }
.stamp.s2{ top:120px; right:5%; transform:rotate(9deg); border-color:var(--teal-soft); color:var(--teal-soft); }
@media(max-width:820px){ .stamp{ display:none; } }

/* ---------- Índice / tabla de contenidos ---------- */
.toc{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px; margin:0 auto 60px; box-shadow:0 10px 30px var(--shadow);
}
.toc h2{ font-family:var(--font-display); color:var(--teal); font-size:1.4rem; margin-bottom:1rem; }
.toc ol{ columns:2; column-gap:40px; list-style:none; counter-reset:toc; }
.toc li{ counter-increment:toc; margin-bottom:.5rem; break-inside:avoid; }
.toc li a{ text-decoration:none; color:var(--ink-soft); font-size:.96rem; display:flex; gap:.6rem; }
.toc li a::before{ content:counter(toc,decimal-leading-zero); color:var(--clay); font-weight:700;
  font-family:var(--font-display); min-width:2ch; }
.toc li a:hover{ color:var(--clay); }
@media(max-width:640px){ .toc ol{ columns:1; } }

/* ---------- Secciones ---------- */
.section{ padding:54px 0; border-top:1px dashed var(--line); position:relative; }
.section:first-of-type{ border-top:none; }
.section .num{
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  color:var(--clay); letter-spacing:.18em; text-transform:uppercase; margin-bottom:.5rem;
  display:inline-flex; align-items:center; gap:.6rem;
}
.section .num::before{ content:""; width:30px; height:2px; background:var(--clay); display:inline-block; }
.section h2{
  font-family:var(--font-display); font-weight:600; line-height:1.08;
  font-size:clamp(1.7rem,3.6vw,2.5rem); color:var(--teal); letter-spacing:-.01em;
  margin-bottom:1.1rem;
}
.section h3{ font-family:var(--font-display); color:var(--teal-soft); font-size:1.3rem;
  margin:1.6rem 0 .7rem; }
.section p{ margin-bottom:1.05rem; max-width:72ch; }
.section ul, .section ol{ margin:0 0 1.1rem 1.3rem; }
.section li{ margin-bottom:.5rem; max-width:70ch; }

/* ---------- Recuadros: tip / aviso / dato ---------- */
.callout{
  border-radius:var(--radius); padding:20px 24px; margin:1.4rem 0;
  border-left:5px solid var(--gold); background:rgba(217,154,43,.10);
}
.callout .tag{ font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.78rem; color:var(--clay-deep); display:block; margin-bottom:.35rem; }
.callout.tip{ border-color:var(--gold); background:rgba(217,154,43,.10); }
.callout.warn{ border-color:var(--clay); background:rgba(192,82,46,.10); }
.callout.warn .tag{ color:var(--clay-deep); }
.callout.fact{ border-color:var(--teal-soft); background:rgba(31,77,70,.08); }
.callout.fact .tag{ color:var(--teal); }
.callout p:last-child{ margin-bottom:0; }

/* ---------- Tarjetas ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:1.4rem 0; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:0 6px 18px var(--shadow); }
.card h4{ font-family:var(--font-display); color:var(--clay); font-size:1.15rem; margin-bottom:.5rem; }
.card p{ font-size:.96rem; color:var(--ink-soft); margin:0; }

/* ---------- Checklist interactivo ---------- */
.checklist{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; margin:1.4rem 0; box-shadow:0 6px 18px var(--shadow);
}
.checklist-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:1rem; }
.checklist-head h4{ font-family:var(--font-display); color:var(--teal); font-size:1.25rem; }
.check-progress{ font-weight:700; color:var(--clay); font-size:.95rem;
  background:rgba(192,82,46,.10); padding:.3rem .8rem; border-radius:50px; }
.checklist ul{ list-style:none; margin:0; }
.checklist li{ margin:0; border-top:1px solid var(--line); }
.checklist li:first-child{ border-top:none; }
.checklist label{
  display:flex; align-items:flex-start; gap:.8rem; padding:.7rem .2rem; cursor:pointer;
  font-size:1rem; user-select:none;
}
.checklist input[type=checkbox]{ appearance:none; -webkit-appearance:none;
  width:22px; height:22px; min-width:22px; margin-top:2px; border:2px solid var(--teal-soft);
  border-radius:6px; cursor:pointer; position:relative; transition:.15s; background:var(--sand); }
.checklist input[type=checkbox]:checked{ background:var(--teal); border-color:var(--teal); }
.checklist input[type=checkbox]:checked::after{ content:"✓"; color:var(--gold-soft); font-weight:700;
  position:absolute; top:-2px; left:3px; font-size:1.05rem; }
.checklist input:checked + span{ text-decoration:line-through; color:var(--ink-soft); opacity:.7; }
.reset-btn{ background:none; border:1.5px solid var(--line); color:var(--ink-soft);
  font-family:var(--font-body); font-size:.85rem; padding:.35rem .8rem; border-radius:50px; cursor:pointer; }
.reset-btn:hover{ border-color:var(--clay); color:var(--clay); }

/* ---------- Calculadora de presupuesto ---------- */
.calc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; margin:1.4rem 0; box-shadow:0 6px 18px var(--shadow); }
.calc .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.calc label{ display:block; font-weight:700; font-size:.85rem; color:var(--teal); margin-bottom:.3rem; }
.calc input{ width:100%; padding:.6rem .7rem; border:1.5px solid var(--line); border-radius:8px;
  font-family:var(--font-body); font-size:1rem; background:var(--sand); color:var(--ink); }
.calc input:focus{ outline:none; border-color:var(--clay); }
.calc-result{ margin-top:20px; padding:18px 22px; border-radius:var(--radius);
  background:var(--teal); color:var(--paper); display:flex; justify-content:space-between;
  align-items:baseline; flex-wrap:wrap; gap:8px; }
.calc-result .label{ font-weight:700; letter-spacing:.04em; }
.calc-result .amount{ font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--gold-soft); }
.calc small{ display:block; margin-top:.8rem; color:var(--ink-soft); font-size:.85rem; }

/* ---------- Glosario interactivo ---------- */
.glossary-search{ width:100%; padding:.8rem 1rem; border:1.5px solid var(--line);
  border-radius:50px; font-family:var(--font-body); font-size:1rem; margin-bottom:1.2rem;
  background:var(--paper); color:var(--ink); }
.glossary-search:focus{ outline:none; border-color:var(--clay); }
.glossary-item{ border-bottom:1px solid var(--line); }
.glossary-item button{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-size:1.18rem; color:var(--teal); font-weight:600;
  padding:1rem .2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.glossary-item button:hover{ color:var(--clay); }
.glossary-item .toggle{ color:var(--clay); font-weight:700; transition:transform .2s; }
.glossary-item.open .toggle{ transform:rotate(45deg); }
.glossary-item .def{ max-height:0; overflow:hidden; transition:max-height .3s ease;
  font-size:1rem; color:var(--ink-soft); }
.glossary-item.open .def{ max-height:320px; }
.glossary-item .def p{ padding:0 .2rem 1.1rem; margin:0; }
.no-results{ color:var(--ink-soft); font-style:italic; padding:1rem 0; display:none; }

/* ---------- Disclaimer destacado ---------- */
.disclaimer-box{
  background:var(--teal); color:var(--paper); border-radius:18px;
  padding:34px 36px; margin:1.6rem 0; box-shadow:0 14px 36px rgba(31,77,70,.3);
  position:relative; overflow:hidden;
}
.disclaimer-box::after{ content:"✺"; position:absolute; right:-10px; bottom:-26px;
  font-size:9rem; color:rgba(217,154,43,.18); }
.disclaimer-box h3{ font-family:var(--font-display); color:var(--gold-soft); font-size:1.5rem; margin-bottom:1rem; }
.disclaimer-box ul{ list-style:none; margin:0; position:relative; z-index:1; }
.disclaimer-box li{ padding:.5rem 0 .5rem 1.8rem; position:relative; max-width:68ch; }
.disclaimer-box li::before{ content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:700; }
.disclaimer-box .sign{ margin-top:1.2rem; font-family:var(--font-display); font-style:italic;
  color:var(--gold-soft); position:relative; z-index:1; }

/* ---------- Footer ---------- */
.footer{ background:var(--teal); color:var(--sand); margin-top:60px; padding:54px 0 30px; }
.footer .wrap{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.footer h4{ font-family:var(--font-display); color:var(--gold-soft); font-size:1.05rem;
  margin-bottom:1rem; letter-spacing:.04em; }
.footer a{ color:var(--sand); text-decoration:none; display:block; margin-bottom:.6rem; opacity:.88; }
.footer a:hover{ color:var(--gold-soft); opacity:1; }
.footer p{ font-size:.95rem; opacity:.85; max-width:42ch; }
.footer .brand-f{ font-family:var(--font-display); font-size:1.5rem; color:var(--paper); margin-bottom:.6rem; }
.footer .legal{ grid-column:1/-1; border-top:1px solid rgba(244,236,220,.22);
  margin-top:24px; padding-top:20px; font-size:.85rem; opacity:.75; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media(max-width:780px){ .footer .wrap{ grid-template-columns:1fr; gap:28px; } }

/* ---------- Banner de cookies ---------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:300;
  background:var(--ink); color:var(--sand); border-radius:16px;
  padding:20px 24px; box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  max-width:760px; margin:0 auto; transform:translateY(160%); transition:transform .4s ease;
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner p{ font-size:.95rem; margin:0; flex:1; min-width:240px; }
.cookie-banner a{ color:var(--gold-soft); }
.cookie-banner .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-banner button{ font-family:var(--font-body); font-weight:700; font-size:.9rem;
  padding:.6rem 1.2rem; border-radius:50px; cursor:pointer; border:none; }
.cookie-accept{ background:var(--gold); color:var(--ink); }
.cookie-accept:hover{ background:var(--gold-soft); }
.cookie-reject{ background:transparent; color:var(--sand); border:1.5px solid rgba(244,236,220,.4); }
.cookie-reject:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

/* ---------- Páginas legales / contacto ---------- */
.page-hero{ padding:60px 0 30px; text-align:center; }
.page-hero .kicker{ text-transform:uppercase; letter-spacing:.3em; font-size:.75rem;
  font-weight:700; color:var(--clay); margin-bottom:.8rem; }
.page-hero h1{ font-family:var(--font-display); font-weight:600; color:var(--teal);
  font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.01em; }
.legal-body{ padding:20px 0 50px; }
.legal-body h2{ font-family:var(--font-display); color:var(--teal); font-size:1.5rem;
  margin:2.2rem 0 .8rem; }
.legal-body h3{ font-family:var(--font-display); color:var(--teal-soft); font-size:1.2rem; margin:1.4rem 0 .5rem; }
.legal-body p, .legal-body li{ color:var(--ink); }
.legal-body ul{ margin:0 0 1.1rem 1.3rem; }
.legal-body li{ margin-bottom:.5rem; }
.updated{ color:var(--ink-soft); font-style:italic; font-size:.9rem; }

.contact-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:34px; box-shadow:0 12px 30px var(--shadow); text-align:center; margin:1.4rem auto; max-width:560px; }
.contact-card .mail{ font-family:var(--font-display); font-size:1.4rem; color:var(--clay);
  word-break:break-all; display:inline-block; margin:.6rem 0 1.2rem; }

.back-home{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2rem; font-weight:700;
  text-decoration:none; color:var(--teal); }
.back-home:hover{ color:var(--clay); }

/* ---------- Animación de aparición ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}