/* Aguas Calmas — páginas de travesía. Requiere base.css. */
/* Ficha: título y datos a la izquierda, mapa a la derecha */
.ficha{display:flex;gap:clamp(32px,4vw,72px);padding:80px var(--pad) 0;align-items:flex-start}
.ficha .col{flex:1 1 0;min-width:0;max-width:600px}
.volver{font-size:14px;color:var(--marina)}
.ficha .nivel{margin-top:36px;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--olive)}
.ficha h1{margin-top:14px;font-size:clamp(32px,4.6vw,58px);line-height:1.08}
.ficha .lede{margin-top:26px;max-width:46ch;font-size:19px}
.ficha-datos{margin-top:44px;border-top:1px solid var(--line-2)}
.ficha-datos div{display:flex;gap:32px;padding:15px 0;border-bottom:1px solid var(--line)}
.ficha-datos dt{width:190px;flex:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ficha-datos dd{font-size:16px;color:var(--ink)}
.mapa-col{flex:1 1 0;min-width:0}
.mapa-col .lienzo{border-radius:20px;overflow:hidden;background:#eef3f6;line-height:0;
  aspect-ratio:620/400;display:flex;align-items:center;justify-content:center}
.mapa-col .lienzo::before{content:"Mapa de la ruta";font-family:var(--body);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#9db0bc}
.mapa-col .lienzo:has(svg)::before{display:none}
.pie-mapa{margin-top:14px;font-size:13px;color:var(--muted)}

/* Itinerario */
.itin{padding:144px var(--pad) 0}
.itin h2{font-size:clamp(29px,4.6vw,52px);line-height:1.06}
.dias{margin-top:56px;border-top:1px solid var(--line-2)}
.dia{display:flex;gap:clamp(28px,4vw,72px);padding:30px 0;border-bottom:1px solid var(--line)}
.dia h3{width:clamp(200px,26vw,320px);flex:none;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.3vw,26px);
  line-height:1.25;color:var(--ink);letter-spacing:.005em}
.dia p{font-size:16px;line-height:1.62;color:var(--muted);max-width:64ch;text-wrap:pretty}

/* Lo práctico */
.practico{padding:120px var(--pad) 0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.practico .c{background:var(--card);border-radius:20px;padding:32px 34px 36px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.practico h4{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.practico ul{list-style:none;margin-top:8px}
.practico li{font-size:15px;line-height:1.5;color:var(--ink-2);padding:11px 0;border-bottom:1px solid var(--line)}
.practico li:last-child{border-bottom:0}
.practico .nota{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}

/* Cierre */
.cta{margin:144px var(--pad) 0;padding:clamp(36px,4vw,64px);background:var(--card);border-radius:20px;
  display:flex;align-items:center;justify-content:space-between;gap:56px}
.cta h2{font-size:clamp(26px,3.8vw,44px);line-height:1.08;max-width:16ch}
.cta .lede{margin-top:16px;max-width:44ch}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — mismos cortes que base.css
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .ficha{flex-direction:column;padding-top:56px}
  .ficha .col{max-width:none;width:100%}
  .mapa-col{width:100%}
  .practico{grid-template-columns:1fr 1fr}
  .cta{flex-direction:column;align-items:flex-start;gap:28px}
}

@media (max-width:680px){
  .ficha{padding:40px var(--pad) 0;gap:32px}
  .ficha h1{margin-top:10px}
  .ficha .lede{margin-top:18px;font-size:17px;max-width:none}
  .ficha-datos{margin-top:30px}
  /* La ficha de datos pasa de dos columnas a etiqueta arriba y dato abajo:
     con 20px de padding no caben 190px de etiqueta más el valor. */
  .ficha-datos div{flex-direction:column;gap:4px;padding:12px 0}
  .ficha-datos dt{width:auto;font-size:11.5px}
  .ficha-datos dd{font-size:15.5px}

  .itin{padding:72px var(--pad) 0}
  .dias{margin-top:32px}
  .dia{flex-direction:column;gap:8px;padding:22px 0}
  .dia h3{width:auto}
  .dia p{max-width:none}

  .practico{padding:72px var(--pad) 0;grid-template-columns:1fr;gap:16px}
  .practico .c{padding:24px 24px 26px}

  .cta{margin:72px var(--pad) 0;padding:26px 22px}
  .mapa-col .lienzo{aspect-ratio:360/300;border-radius:16px}
  .cta h2{max-width:none}
  .cta .lede{max-width:none}
}