/* ============================================
   Guía Carretera Austral — sistema visual
   Heredado de Libro Final/Guia Carretera Austral Sur.html
   ============================================ */

:root{
  --ink:#20302f;
  --ink-soft:#4a5a57;
  --paper:#f5f2ea;
  --card:#ffffff;
  --line:#e7e2d6;
  --teal:#0f6e78;
  --teal-deep:#0b4c55;
  --teal-mist:#eef4f3;
  --ochre:#bd6234;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --ancho:640px;       /* ancho máximo de lectura */
  --aire:22px;         /* respiración lateral en móvil */
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}

.contenido{
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 var(--aire);
}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.08;}
h2{font-size:31px;margin-bottom:16px;}
h3{font-size:20px;}

p{margin-bottom:16px;}
p:last-child{margin-bottom:0;}

.seccion{padding:56px 0;}
.seccion--claro{background:var(--card);}
.seccion--oscuro{background:var(--teal-deep);color:#eafcff;}
.seccion--oscuro h2{color:#fff;}

/* --- Botón de compra: el elemento más importante de la página --- */
.boton{
  display:block;
  width:100%;
  background:var(--ochre);
  color:#fff;
  font-family:var(--sans);
  font-size:18px;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  padding:19px 24px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.boton:hover{background:#a9542c;transform:translateY(-1px);}
.boton:active{transform:translateY(0);}

.boton-nota{
  font-size:14px;
  color:var(--ink-soft);
  text-align:center;
  margin-top:12px;
  line-height:1.45;
}
.seccion--oscuro .boton-nota{color:#bcdcdc;}

@media (min-width:700px){
  body{font-size:18px;}
  h2{font-size:38px;}
  .seccion{padding:80px 0;}
  .boton{width:auto;min-width:320px;margin:0 auto;}
}

/* ---------- Bloque 1: Hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero__foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__velo{
  position:absolute;
  inset:0;
  /* Oscurecido neutro y sutil, solo en la franja inferior donde va el texto.
     La parte alta de la foto queda a la vista, sin teñir. */
  background:linear-gradient(to top,rgba(13,32,31,.80) 0%,rgba(13,32,31,.56) 26%,rgba(13,32,31,.24) 52%,rgba(13,32,31,.04) 72%,rgba(13,32,31,0) 100%);
}
.hero__texto{
  position:relative;
  padding-top:48px;
  padding-bottom:52px;
  color:#fff;
  width:100%;
  text-shadow:0 2px 14px rgba(10,20,19,.55),0 1px 3px rgba(10,20,19,.5);
}
.hero__marca{
  font-size:13px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#eafcff;
  margin-bottom:14px;
}
.hero h1{
  font-size:40px;
  line-height:1.03;
  color:#fff;
  margin-bottom:18px;
  max-width:13em;
}
.hero__bajada{
  font-size:17px;
  color:#f2faf9;
  margin-bottom:28px;
  max-width:30em;
}
.hero .boton-nota{color:#bcdcdc;}

@media (min-width:700px){
  .hero h1{font-size:52px;}
  .hero__bajada{font-size:19px;}
  .hero .boton{margin:0;}
  .hero .boton-nota{text-align:left;}
}

/* --- Etiqueta que abre cada sección --- */
.etiqueta{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:12px;
}
.seccion--oscuro .etiqueta{color:#e8a077;}

/* ---------- Bloque 2: El problema ---------- */
.problema p{color:#cfe4e2;}
.problema__cierre{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.4;
  color:#fff;
  border-left:3px solid var(--ochre);
  padding-left:18px;
  margin-top:26px;
}

/* ---------- Bloque 3: Quién soy ---------- */
.autor__cabecera{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:30px;
}
.autor__foto{
  width:116px;
  height:116px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--teal-mist);
}
.credenciales{list-style:none;display:flex;flex-direction:column;gap:9px;}
.credenciales li{
  font-size:13.5px;
  line-height:1.25;
  color:var(--ink-soft);
}
.credenciales strong{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:22px;
  color:var(--teal-deep);
  line-height:1;
}
.autor__cuenta a{
  color:var(--teal);
  font-weight:600;
  text-decoration:none;
  font-size:16px;
}
.autor__cuenta a:hover{text-decoration:underline;}

@media (min-width:700px){
  .autor__foto{width:152px;height:152px;}
  .autor__cabecera{gap:30px;margin-bottom:36px;}
  .credenciales{flex-direction:row;gap:34px;}
  .credenciales li{font-size:14.5px;max-width:9em;}
  .credenciales strong{font-size:27px;margin-bottom:3px;}
  .problema__cierre{font-size:24px;}
}

/* ---------- Bloque 4: Qué hay adentro ---------- */
.contenido-guia__intro{
  font-family:var(--serif);
  font-size:20px;
  color:var(--teal-deep);
  margin-bottom:32px;
}
.lista-cap{list-style:none;}
.cap{
  display:flex;
  gap:13px;
  align-items:flex-start;
  padding:13px 0;
  border-top:1px solid var(--line);
}
.cap:last-child{border-bottom:1px solid var(--line);}
.cap__n{
  flex:none;
  width:29px;height:29px;
  border-radius:50%;
  background:var(--teal-mist);
  color:var(--teal-deep);
  border:1px solid #d9e8e7;
  font-family:var(--serif);
  font-weight:600;
  font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.cap h3{margin-bottom:2px;font-size:18px;}
.cap p{font-size:14.5px;line-height:1.45;color:var(--ink-soft);margin:0;}

/* Dos columnas solo cuando hay ancho de sobra. En teléfono cada columna
   quedaría de ~165px y los títulos se romperían en tres líneas. */
@media (min-width:820px){
  .contenido-guia .contenido{max-width:960px;}
  .lista-cap{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:44px;
  }
  .cap{padding:16px 0;}
  /* Con dos columnas, el borde inferior del último elemento sobra */
  .cap:last-child{border-bottom:none;}
}

/* ---------- La ruta: elemento firma ----------
   La línea que une los puntos NO es decoración: su trazo indica el tipo de
   camino. Continua = pavimento. Segmentada = ripio. Discontinua larga = barcaza.
   Datos tomados de la tabla de tramos del libro. */
.ruta__intro{color:#bcdcdc;margin-bottom:34px;}

.ruta__lista{list-style:none;margin:0 0 30px;}

.hito{
  position:relative;
  padding-left:34px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0 10px;
}
.hito__punto{
  position:absolute;
  left:0;top:.42em;
  width:13px;height:13px;
  border-radius:50%;
  background:var(--teal-deep);
  border:2.5px solid #7fd0d0;
}
.hito--fin .hito__punto{background:var(--ochre);border-color:var(--ochre);}
.hito__lugar{
  font-family:var(--serif);
  font-weight:600;
  font-size:19px;
  color:#fff;
  line-height:1.2;
}
.hito__nota{
  font-size:13px;
  color:#8fb8b8;
  font-style:italic;
}

.tramo{
  position:relative;
  padding:9px 0 9px 34px;
  margin-left:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13.5px;
  color:#9fc6c6;
  font-variant-numeric:tabular-nums;
}
/* El trazo vertical: aquí es donde la línea cuenta el tipo de camino */
.tramo::before{
  content:"";
  position:absolute;
  left:5.5px;top:0;bottom:0;
  width:3px;
}
.tramo--pavimento::before{background:#7fd0d0;}
.tramo--ripio::before{
  background:repeating-linear-gradient(to bottom,#7fd0d0 0 5px,transparent 5px 11px);
}
.tramo--barcaza::before{
  background:repeating-linear-gradient(to bottom,var(--ochre) 0 3px,transparent 3px 14px);
}
.tramo__km{color:#eafcff;font-weight:600;min-width:58px;}
.tramo__sup{
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#7ba8a8;
}
.tramo--barcaza .tramo__sup{color:#d99263;}

.ruta__pie{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.45;
  color:#dff0ef;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:24px;
}

@media (min-width:700px){
  .hito__lugar{font-size:22px;}
  .tramo{font-size:15px;gap:18px;}
  .tramo__km{min-width:72px;}
  .ruta__pie{font-size:20px;}
}

/* ---------- Bloque 5: Vistazo adentro ---------- */
.vistazo__intro{
  font-family:var(--serif);
  font-size:19px;
  color:var(--teal-deep);
  margin-bottom:28px;
}
.vistazo__tira{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:4px var(--aire) 20px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.vistazo__tira img{
  flex:none;
  width:210px;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 6px 22px rgba(32,48,47,.13);
  scroll-snap-align:center;
}

@media (min-width:700px){
  .vistazo__tira{justify-content:center;padding-left:0;padding-right:0;}
  .vistazo__tira img{width:250px;}
}

/* ---------- Bloque 6: Objeción ---------- */
.objecion{background:var(--teal-mist);}
.objecion h2{color:var(--teal-deep);}
.objecion p{color:var(--ink-soft);}

/* ---------- Banda ---------- */
/* Las bandas muestran la foto COMPLETA. La del glaciar es prueba de que
   Gonzalo estuvo ahí: recortarle la cumbre o las piernas la anula. */
.banda img{width:100%;height:auto;}
/* Va justo antes del precio: necesita aire propio para no quedar pegada
   al bloque oscuro de abajo ni a la sección de arriba. */
.banda--retrato{
  background:var(--paper);
  padding:38px var(--aire) 46px;
}
.banda--retrato img{
  max-width:900px;
  margin:0 auto;
  border-radius:12px;
  box-shadow:0 10px 34px rgba(32,48,47,.16);
}
/* Esta foto ya viene recortada en formato de banda: se muestra completa,
   sin altura fija, para no perder el panorama por los lados. */
.banda--laguna img{height:auto;}
@media (min-width:700px){
  /* En pantalla ancha la banda de la laguna quedaría demasiado alta: se acota
     y se ancla abajo, donde está la laguna. */
  .banda--laguna img{height:420px;object-fit:cover;object-position:50% 100%;}
}

/* ---------- Bloque 7: Precio ---------- */
.precio__ancla{color:#cfe8e6;margin-bottom:32px;}
.precio__caja{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:30px 24px;
  text-align:center;
}
.precio__monto{
  font-family:var(--serif);
  font-size:52px;
  font-weight:600;
  color:#fff;
  line-height:1;
  margin-bottom:8px;
}
.precio__detalle{font-size:15px;color:#bcdcdc;margin-bottom:24px;}

/* ---------- Bloque 8: Preguntas ---------- */
.faq__item{border-bottom:1px solid var(--line);}
.faq__item summary{
  font-family:var(--serif);
  font-weight:600;
  font-size:18px;
  padding:18px 30px 18px 0;
  cursor:pointer;
  list-style:none;
  position:relative;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"+";
  position:absolute;right:4px;top:15px;
  font-size:25px;font-weight:400;color:var(--teal);
}
.faq__item[open] summary::after{content:"−";}
.faq__item p{
  font-size:16px;
  color:var(--ink-soft);
  padding-bottom:20px;
}

/* ---------- Bloque 9: Cierre ---------- */
.cierre{background:var(--card);text-align:center;}
.cierre__insta{margin-top:26px;font-size:16px;color:var(--ink-soft);}
.cierre__insta a{color:var(--teal);font-weight:600;text-decoration:none;}
.cierre__legal{margin-top:34px;font-size:13.5px;color:#9a9287;}