/* ============================================
   GUÍA DEL VIAJERO — Hoja de estilos principal
   Diseño editorial / atlas vintage moderno
   Escrita y financiada por Sergio Andrés Fonseca González
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500&family=Spline+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Paleta: atlas / sello de pasaporte */
  --tinta: #1f2a24;
  --tinta-suave: #3d4a42;
  --crema: #f4ede0;
  --crema-clara: #faf6ee;
  --papel: #ece2d0;
  --terracota: #c1502e;
  --terracota-osc: #9c3d20;
  --oceano: #2c5f6f;
  --oceano-claro: #4a8499;
  --oliva: #6b7245;
  --mostaza: #d8a13a;
  --arena: #e0d2b8;
  --borde: #cabfa8;
  --sombra: rgba(31, 42, 36, 0.12);
  --sombra-fuerte: rgba(31, 42, 36, 0.22);

  --fuente-display: 'Fraunces', Georgia, serif;
  --fuente-texto: 'Spline Sans', system-ui, sans-serif;

  --ancho-max: 1180px;
  --radio: 14px;
}

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

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

body {
  font-family: var(--fuente-texto);
  background-color: var(--crema);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(193, 80, 46, 0.05) 0, transparent 30%),
    radial-gradient(circle at 88% 72%, rgba(44, 95, 111, 0.06) 0, transparent 34%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231f2a24' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--tinta);
  line-height: 1.7;
  font-size: 17px;
  overflow-x: hidden;
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--fuente-display); font-weight: 600; line-height: 1.15; color: var(--tinta); }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
p { margin-bottom: 1.1rem; }
a { color: var(--terracota); text-decoration: none; transition: color .2s; }
a:hover { color: var(--terracota-osc); }

.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 24px; }

/* ---------- Encabezado / navegación ---------- */
.barra-superior {
  background: var(--tinta);
  color: var(--crema-clara);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 12px;
}
.barra-superior span { color: var(--mostaza); }

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 237, 224, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 14px 24px;
}
.logo {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 1.45rem;
  color: var(--tinta);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo .sello {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 2px solid var(--terracota);
  border-radius: 50%;
  color: var(--terracota);
  font-size: 1.1rem;
  transform: rotate(-8deg);
}
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  color: var(--tinta-suave);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 0; height: 2px;
  background: var(--terracota);
  transition: width .25s;
}
.nav-links a:hover::after { width: 100%; }
.menu-btn { display: none; background: none; border: none; font-size: 1.7rem; color: var(--tinta); cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 90px 0 70px;
  text-align: center;
  overflow: hidden;
}
.hero .kicker {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oceano);
  border: 1px solid var(--oceano-claro);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: 26px;
  background: rgba(74, 132, 153, 0.07);
}
.hero h1 { max-width: 14ch; margin: 0 auto 22px; }
.hero h1 em { font-style: italic; color: var(--terracota); }
.hero .sub {
  max-width: 60ch;
  margin: 0 auto 36px;
  font-size: 1.18rem;
  color: var(--tinta-suave);
}
.hero-acciones { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 100px;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primario { background: var(--terracota); color: var(--crema-clara); box-shadow: 0 6px 18px rgba(193, 80, 46, 0.3); }
.btn-primario:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(193, 80, 46, 0.4); color: #fff; }
.btn-secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-secundario:hover { background: var(--tinta); color: var(--crema-clara); transform: translateY(-2px); }

.brujula {
  position: absolute;
  opacity: 0.08;
  pointer-events: none;
}
.brujula-1 { top: 40px; left: -40px; width: 220px; transform: rotate(15deg); }
.brujula-2 { bottom: -60px; right: -50px; width: 280px; transform: rotate(-12deg); }

/* ---------- Disclaimer destacado ---------- */
.disclaimer-banner {
  background: var(--oceano);
  color: var(--crema-clara);
  border-radius: var(--radio);
  padding: 32px 36px;
  margin: 50px auto;
  max-width: 920px;
  position: relative;
  box-shadow: 0 12px 30px var(--sombra);
  border-left: 6px solid var(--mostaza);
}
.disclaimer-banner h3 { color: var(--mostaza); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.disclaimer-banner p { color: rgba(244, 237, 224, 0.92); margin-bottom: 8px; font-size: 0.98rem; }
.disclaimer-banner ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.disclaimer-banner li { padding-left: 28px; position: relative; font-size: 0.96rem; }
.disclaimer-banner li::before { content: '✓'; position: absolute; left: 0; color: var(--mostaza); font-weight: 700; }

/* ---------- Secciones ---------- */
.seccion {
  padding: 28px 34px;
  margin: 26px 0;
  background: var(--crema-clara);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 4px 14px var(--sombra);
  transition: transform .25s, box-shadow .25s;
  scroll-margin-top: 90px;
}
.seccion:hover { box-shadow: 0 8px 22px var(--sombra-fuerte); }
.seccion-cabecera { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 14px; }
.seccion-num {
  flex-shrink: 0;
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--crema-clara);
  background: var(--terracota);
  width: 54px; height: 54px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-4deg);
  box-shadow: 0 4px 10px rgba(193,80,46,0.3);
}
.seccion:nth-child(even) .seccion-num { background: var(--oceano); box-shadow: 0 4px 10px rgba(44,95,111,0.3); }
.seccion:nth-child(3n) .seccion-num { background: var(--oliva); box-shadow: 0 4px 10px rgba(107,114,69,0.3); }
.seccion-cabecera h2 { font-size: clamp(1.4rem, 3vw, 2rem); padding-top: 4px; }
.seccion-cuerpo p { color: var(--tinta-suave); }
.seccion-cuerpo ul, .seccion-cuerpo ol { margin: 0 0 1.1rem 1.4rem; color: var(--tinta-suave); }
.seccion-cuerpo li { margin-bottom: 7px; }
.seccion-cuerpo strong { color: var(--tinta); }

/* índice de secciones */
.indice {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px 34px;
  margin: 40px 0;
}
.indice h2 { margin-bottom: 18px; }
.indice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 22px;
}
.indice-grid a {
  color: var(--tinta-suave);
  font-size: 0.93rem;
  padding: 5px 0;
  display: flex;
  gap: 9px;
  border-bottom: 1px dashed transparent;
}
.indice-grid a:hover { color: var(--terracota); border-bottom-color: var(--borde); }
.indice-grid a span { color: var(--terracota); font-weight: 600; min-width: 22px; }

/* ---------- Cajas de consejo / tip / aviso ---------- */
.caja { border-radius: 12px; padding: 18px 22px; margin: 18px 0; font-size: 0.96rem; }
.caja-tip { background: rgba(216, 161, 58, 0.12); border-left: 4px solid var(--mostaza); }
.caja-aviso { background: rgba(193, 80, 46, 0.1); border-left: 4px solid var(--terracota); }
.caja-dato { background: rgba(44, 95, 111, 0.09); border-left: 4px solid var(--oceano); }
.caja-eco { background: rgba(107, 114, 69, 0.12); border-left: 4px solid var(--oliva); }
.caja .etiqueta { font-weight: 700; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.1em; display: block; margin-bottom: 5px; }
.caja-tip .etiqueta { color: var(--terracota-osc); }
.caja-aviso .etiqueta { color: var(--terracota-osc); }
.caja-dato .etiqueta { color: var(--oceano); }
.caja-eco .etiqueta { color: var(--oliva); }

/* ---------- Checklists interactivas ---------- */
.checklist {
  list-style: none !important;
  margin: 16px 0 !important;
  display: grid;
  gap: 6px;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, opacity .2s;
  user-select: none;
}
.checklist li:hover { background: var(--arena); }
.checklist li.marcado { opacity: 0.55; background: rgba(107,114,69,0.12); }
.checklist li.marcado .check-texto { text-decoration: line-through; }
.check-caja {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--oliva);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: transparent;
  transition: all .2s;
  margin-top: 2px;
}
.checklist li.marcado .check-caja { background: var(--oliva); color: #fff; }
.check-texto { color: var(--tinta-suave); }
.checklist-barra {
  height: 8px;
  background: var(--arena);
  border-radius: 100px;
  overflow: hidden;
  margin: 4px 0 14px;
}
.checklist-relleno { height: 100%; width: 0; background: var(--oliva); border-radius: 100px; transition: width .4s ease; }
.checklist-progreso-txt { font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 10px; font-weight: 600; }

/* ---------- Acordeón (FAQ / glosario plegable) ---------- */
.acordeon-item { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--crema); }
.acordeon-cab {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 16px 20px;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--tinta);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.acordeon-cab:hover { color: var(--terracota); }
.acordeon-cab .mas { font-size: 1.4rem; color: var(--terracota); transition: transform .25s; flex-shrink: 0; }
.acordeon-item.abierto .mas { transform: rotate(45deg); }
.acordeon-cuerpo { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acordeon-cuerpo-inner { padding: 0 20px 18px; color: var(--tinta-suave); font-size: 0.96rem; }

/* ---------- Glosario ---------- */
.glosario-busqueda {
  width: 100%;
  padding: 14px 20px;
  border: 2px solid var(--borde);
  border-radius: 100px;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  background: var(--crema);
  color: var(--tinta);
  margin-bottom: 22px;
}
.glosario-busqueda:focus { outline: none; border-color: var(--oceano); }
.glosario-lista { display: grid; gap: 12px; }
.glosario-termino {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 16px 20px;
  background: var(--crema);
}
.glosario-termino dt { font-family: var(--fuente-display); font-weight: 700; font-size: 1.1rem; color: var(--oceano); margin-bottom: 4px; }
.glosario-termino dd { color: var(--tinta-suave); font-size: 0.95rem; }
.glosario-vacio { text-align: center; color: var(--tinta-suave); padding: 30px; font-style: italic; }

/* ---------- Quiz ---------- */
.quiz { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px 30px; }
.quiz-pregunta { margin-bottom: 24px; }
.quiz-pregunta:last-of-type { margin-bottom: 0; }
.quiz-pregunta p.q { font-weight: 600; font-size: 1.05rem; margin-bottom: 12px; color: var(--tinta); }
.quiz-opciones { display: grid; gap: 9px; }
.quiz-opcion {
  text-align: left;
  background: var(--crema);
  border: 2px solid var(--borde);
  border-radius: 10px;
  padding: 12px 18px;
  font-family: var(--fuente-texto);
  font-size: 0.97rem;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: all .2s;
}
.quiz-opcion:hover { border-color: var(--oceano-claro); }
.quiz-opcion.correcta { background: rgba(107,114,69,0.2); border-color: var(--oliva); color: var(--tinta); font-weight: 600; }
.quiz-opcion.incorrecta { background: rgba(193,80,46,0.13); border-color: var(--terracota); color: var(--terracota-osc); }
.quiz-opcion:disabled { cursor: default; }
.quiz-feedback { margin-top: 10px; font-size: 0.9rem; padding: 10px 14px; border-radius: 8px; display: none; }
.quiz-feedback.ver { display: block; }
.quiz-feedback.bien { background: rgba(107,114,69,0.15); color: var(--oliva); }
.quiz-feedback.mal { background: rgba(193,80,46,0.1); color: var(--terracota-osc); }
.quiz-resultado {
  margin-top: 24px;
  text-align: center;
  padding: 20px;
  background: var(--oceano);
  color: var(--crema-clara);
  border-radius: 12px;
  font-family: var(--fuente-display);
  font-size: 1.3rem;
  font-weight: 700;
  display: none;
}
.quiz-resultado.ver { display: block; }

/* ---------- Herramientas interactivas (calculadora / conversor) ---------- */
.herramienta { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px 28px; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; color: var(--tinta); }
.campo input, .campo select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  background: var(--crema);
  color: var(--tinta);
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--oceano); }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.resultado-caja {
  margin-top: 18px;
  padding: 20px;
  background: var(--tinta);
  color: var(--crema-clara);
  border-radius: 12px;
  text-align: center;
}
.resultado-caja .grande { font-family: var(--fuente-display); font-size: 2rem; font-weight: 900; color: var(--mostaza); display: block; }
.resultado-caja .detalle { font-size: 0.86rem; opacity: 0.85; }

/* ---------- Tarjetas de consejo ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; margin: 20px 0; }
.tarjeta {
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 22px;
  transition: transform .2s;
}
.tarjeta:hover { transform: translateY(-4px); }
.tarjeta .icono { font-size: 1.9rem; margin-bottom: 10px; display: block; }
.tarjeta h4 { margin-bottom: 8px; }
.tarjeta p { font-size: 0.92rem; color: var(--tinta-suave); margin: 0; }

/* ---------- Pie de página ---------- */
.pie {
  background: var(--tinta);
  color: var(--crema-clara);
  padding: 56px 0 30px;
  margin-top: 60px;
}
.pie-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.pie h4 { color: var(--mostaza); margin-bottom: 16px; font-size: 1.05rem; }
.pie p { color: rgba(244,237,224,0.75); font-size: 0.92rem; }
.pie ul { list-style: none; }
.pie ul li { margin-bottom: 9px; }
.pie ul a { color: rgba(244,237,224,0.8); font-size: 0.92rem; }
.pie ul a:hover { color: var(--mostaza); }
.pie-logo { font-family: var(--fuente-display); font-weight: 900; font-size: 1.4rem; color: var(--crema-clara); margin-bottom: 12px; }
.pie-base {
  border-top: 1px solid rgba(244,237,224,0.18);
  padding-top: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(244,237,224,0.6);
}
.pie-base .gratis {
  display: inline-block;
  background: var(--oliva);
  color: var(--crema-clara);
  padding: 4px 14px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

/* ---------- Botón volver arriba ---------- */
.arriba {
  position: fixed;
  bottom: 26px; right: 26px;
  width: 48px; height: 48px;
  background: var(--terracota);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(193,80,46,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .2s;
  z-index: 90;
}
.arriba.ver { opacity: 1; pointer-events: auto; }
.arriba:hover { transform: translateY(-3px); }

/* ---------- Páginas legales / contenido simple ---------- */
.pagina-legal { padding: 50px 0 30px; }
.pagina-legal .contenido {
  background: var(--crema-clara);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 44px 50px;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: 0 4px 14px var(--sombra);
}
.pagina-legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.pagina-legal .fecha { color: var(--tinta-suave); font-size: 0.9rem; margin-bottom: 30px; display: block; }
.pagina-legal h2 { font-size: 1.5rem; margin: 32px 0 12px; color: var(--oceano); }
.pagina-legal h3 { font-size: 1.2rem; margin: 20px 0 8px; }
.pagina-legal p, .pagina-legal li { color: var(--tinta-suave); }
.pagina-legal ul, .pagina-legal ol { margin: 0 0 1.1rem 1.4rem; }
.pagina-legal li { margin-bottom: 8px; }
.pagina-legal a { font-weight: 600; }
.correo-destacado {
  display: inline-block;
  background: var(--papel);
  border: 2px dashed var(--oceano);
  border-radius: 12px;
  padding: 16px 26px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--oceano);
  margin: 14px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--crema-clara);
    border-bottom: 1px solid var(--borde);
    padding: 10px 24px 20px;
  }
  .nav-links.abierto { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--borde); width: 100%; }
  .menu-btn { display: block; }
  .pie-grid { grid-template-columns: 1fr; gap: 30px; }
  .campo-fila { grid-template-columns: 1fr; }
  .seccion { padding: 22px 20px; }
  .pagina-legal .contenido { padding: 30px 24px; }
}