@font-face {
    font-family: 'Roboto Slab Viajera';
    src: url('./assets/444381810f6179687e20f7cfcdcf7f55.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  :root {
    --orange: #FF8700;
    --orange-dark: #E67A00;
    --teal: #14617D;
    --rust: #D14A1C;
    --cream: #FBF4E9;
    --paper: #F3E8D6;
    --ink: #201A12;
    --ink-soft: #5B4E3E;
    --line: #E2D3B8;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Work Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; height: auto; display: block; }
  h1, h2, h3, .display {
    font-family: 'Roboto Slab Viajera', 'Roboto Slab', Georgia, serif;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
  }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 8px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    border: none;
  }
  .btn-primary { background: var(--orange); color: #241300; }
  .btn-primary:hover { background: var(--orange-dark); }
  .chip {
    display: inline-flex;
    padding: 9px 16px;
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
  }
  .pill {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 7px 16px;
    border-radius: 100px;
    margin-bottom: 16px;
  }
  section { padding: 100px 0; }
  .fact {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
  }
  .fact-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }
  .fact-value { font-size: 15px; color: var(--ink); }
  .split-cols {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 64px;
    align-items: start;
  }
  .dest-cols {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
  }
  .author-cols {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 44px;
    align-items: center;
  }
  .facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 8px;
  }
  .navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    gap: 16px;
  }
  @media (max-width: 860px) {
    section { padding: 64px 0; }
    .split-cols, .dest-cols { grid-template-columns: 1fr; gap: 36px; }
    .author-cols { grid-template-columns: 96px 1fr; gap: 24px; }
  }

/* Styles moved from the HTML elements. */
.inline-style-01 { width:100%; min-height:100vh; overflow-x:hidden; background:var(--cream); }
.inline-style-02 { position:sticky; top:0; z-index:50; background:rgba(251,244,233,0.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.inline-style-03 { height:30px; width:auto; }
.inline-style-04 { padding:11px 22px; font-size:14.5px; }
.inline-style-05 { position:relative; width:100%; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; }
.inline-style-07 { position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,15,8,0.18) 0%, rgba(18,13,7,0.58) 62%, rgba(14,10,5,0.88) 100%); }
.inline-style-08 { position:relative; width:100%; padding-top:64px; padding-bottom:72px; display:flex; flex-direction:column; gap:26px; color:#fff; }
.inline-style-09 { font-size:clamp(26px,4vw,46px); line-height:1.18; max-width:800px; color:#fff; }
.inline-style-10 { font-size:18px; line-height:1.6; max-width:620px; color:#f1e9dc; }
.inline-style-11 { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-top:6px; }
.inline-style-12 { font-size:17px; padding:17px 32px; }
.inline-style-13 { font-size:14px; color:#e7dcc9; }
.inline-style-14 { position:relative; }
.inline-style-15 { background:var(--orange); border-radius:4px; padding:36px 28px; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 30px 60px -20px rgba(30,20,10,0.35); position:relative; overflow:hidden; }
.inline-style-16 { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:0.55; }
.inline-style-17 { position:relative; font-size:13px; letter-spacing:0.06em; color:#361f00; font-weight:700; }
.inline-style-18 { position:relative; width:100%; height:auto; }
.inline-style-19 { position:relative; font-size:13px; color:#361f00; font-weight:500; }
.inline-style-20 { display:flex; flex-direction:column; gap:22px; }
.inline-style-21 { font-size:clamp(24px,2.8vw,36px); }
.inline-style-22 { font-size:17px; line-height:1.75; color:var(--ink-soft); max-width:620px; }
.inline-style-23 { color:var(--teal); }
.inline-style-24 { color:var(--rust); }
.inline-style-25 { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.inline-style-26 { font-size:clamp(24px,2.8vw,36px); margin-bottom:12px; }
.inline-style-27 { font-size:17px; color:var(--ink-soft); max-width:600px; margin-bottom:48px; }
.inline-style-28 { display:flex; flex-direction:column; gap:36px; }
.inline-style-29 { background:var(--teal); }
.inline-style-30 { display:flex; flex-wrap:wrap; gap:10px; }
.inline-style-31 { background:var(--rust); }
.inline-style-32 { display:flex; justify-content:center; }
.inline-style-33 { margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.inline-style-34 { width:min(340px,88vw); border-radius:2px; transform:rotate(-2.5deg); box-shadow:0 20px 40px -15px rgba(30,20,10,0.35); }
.inline-style-35 { font-size:13.5px; color:var(--ink-soft); text-align:center; max-width:280px; }
.inline-style-36 { background:var(--ink); }
.inline-style-37 { max-width:800px; display:flex; flex-direction:column; gap:22px; }
.inline-style-38 { font-size:clamp(21px,2.4vw,29px); line-height:1.45; color:#fff; }
.inline-style-39 { font-size:15.5px; color:#b9ab93; }
.inline-style-40 { width:100%; height:auto; }
.inline-style-41 { display:flex; flex-direction:column; gap:16px; }
.inline-style-42 { font-size:clamp(22px,2.4vw,30px); }
.inline-style-43 { font-size:17px; line-height:1.75; color:var(--ink-soft); max-width:600px; }
.inline-style-44 { display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; max-width:600px; }
.inline-style-45 { font-size:clamp(24px,3vw,38px); color:#fff; }
.inline-style-46 { font-size:17px; line-height:1.6; color:#dcebf1; }
.inline-style-47 { font-size:clamp(38px,5.5vw,54px); color:var(--orange); }
.inline-style-48 { font-size:18px; padding:19px 40px; }
.inline-style-49 { font-size:13px; color:#b9d3dc; }
.inline-style-50 { font-size:14px; color:#a9c8d2; margin-top:6px; }
.inline-style-51 { background:var(--ink); padding:36px 0; }
.inline-style-52 { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.inline-style-53 { height:20px; width:auto; opacity:0.9; }
.inline-style-54 { font-size:13px; color:#a89a86; }

/* Frase destacada */
.quote-big { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.15; color: #fff; }
.quote-accent { color: var(--orange); }
.quote-block { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.quote-author { font-size: 16px; color: #b9ab93; }
.quote-author cite { font-style: italic; }
.quote-cta { align-self: flex-start; font-weight: 600; font-size: 17px; color: var(--orange); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.quote-cta:hover { color: #fff; }

/* Collage de la sección de destinos */
.collage { width: min(480px, 92vw); height: auto; }

/* Tapa del libro */
.book-cover {
  width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 30px 60px -20px rgba(30,20,10,0.45), 0 2px 6px rgba(30,20,10,0.15);
}
@media (max-width: 860px) {
  .inline-style-14 { max-width: 340px; margin: 0 auto; width: 100%; }
}

/* Carrusel de fotos de la portada */
.hero-carousel { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 900ms ease; background: #241b15; }
.hero-slide.is-active { opacity: 1; }
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}
/* Encuadre de cada foto: --pos en compu, --pos-mobile en celular (pantalla vertical) */
.slide-sidney    { --pos: 50% 42%; --pos-mobile: 36% 50%; }
.slide-taj       { --pos: 50% 45%; --pos-mobile: 56% 50%; }
.slide-petra       { --pos: 50% 48%; --pos-mobile: 6% 50%; }
.slide-cordillera  { --pos: 50% 38%; --pos-mobile: 50% 50%; }
.slide-golden-gate { --pos: 50% 72%; --pos-mobile: 77% 50%; }
@media (max-aspect-ratio: 1/1) {
  .hero-photo { object-position: var(--pos-mobile, center); }
}

.carousel-controls { position: absolute; z-index: 2; right: max(24px, calc((100vw - 1180px)/2 + 24px)); bottom: 40px; display: flex; align-items: center; gap: 14px; color: white; }
.carousel-arrow { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(0,0,0,.35); color: white; font-size: 28px; line-height: 1; cursor: pointer; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: rgba(0,0,0,.75); }
.carousel-dots { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.carousel-dot { width: 11px; height: 11px; padding: 0; border: 1px solid white; border-radius: 50%; background: transparent; cursor: pointer; }
.carousel-dot.is-active { background: white; }
.carousel-controls button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (max-width: 700px) { .inline-style-08 { padding-bottom: 116px; } .carousel-controls { right: 24px; bottom: 22px; } }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }