/* ============================================================
   Maquetacion TARJETA
   El contenido flota dentro de una tarjeta con marco decorativo
   sobre un fondo texturizado. Itinerario en carrusel horizontal.
   ============================================================ */

.layout-tarjeta{
  background-image:
    radial-gradient(620px 320px at 8% 6%,color-mix(in srgb,var(--c-acento) 14%,transparent),transparent 66%),
    radial-gradient(660px 340px at 92% 94%,color-mix(in srgb,var(--c-acento2) 14%,transparent),transparent 66%);
  background-attachment:fixed
}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .layout-tarjeta{background-image:none}
}

/* ---------- Portada como tarjeta ---------- */
.layout-tarjeta .portada-inv{padding:34px 18px}
.layout-tarjeta .portada-int{
  background:var(--c-tarjeta);
  border-radius:var(--radio);
  padding:52px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.14);
  position:relative;
  max-width:600px
}
.layout-tarjeta .portada-int::before{
  content:"";position:absolute;inset:10px;border:1px solid var(--c-acento);
  border-radius:calc(var(--radio) * .7);opacity:.4;pointer-events:none
}
/* Con foto: la imagen queda de fondo y la tarjeta encima */
.layout-tarjeta .portada-inv.con-foto{color:var(--c-texto)}
.layout-tarjeta .portada-inv.con-foto .etiqueta-sup{color:var(--c-acento);opacity:1}
.layout-tarjeta .portada-inv.con-foto .adorno{color:var(--c-acento)}
.layout-tarjeta .flecha-abajo{bottom:-34px}

/* ---------- Cada seccion es una tarjeta ---------- */
.layout-tarjeta .seccion{padding:26px 18px}
.layout-tarjeta .seccion .int{
  background:var(--c-tarjeta);
  border-radius:var(--radio);
  padding:44px 24px;
  box-shadow:var(--sombra);
  border:1px solid rgba(128,128,128,.14);
  max-width:760px
}
.layout-tarjeta .seccion .int.estrecho{max-width:620px}

/* Dentro de una tarjeta, las sub-tarjetas se aplanan */
.layout-tarjeta .tarjeta-lugar,
.layout-tarjeta .tarjeta-inv,
.layout-tarjeta .detalle{
  background:transparent;box-shadow:none;
  border:1px dashed rgba(128,128,128,.3)
}
.layout-tarjeta .cuenta .cr{box-shadow:none}

/* ---------- Itinerario horizontal ---------- */
@media(min-width:720px){
  .layout-tarjeta .linea-tiempo{
    max-width:none;display:flex;gap:0;overflow-x:auto;padding-bottom:14px;text-align:center
  }
  .layout-tarjeta .linea-tiempo::before{
    left:0;right:0;top:7px;bottom:auto;height:1px;width:auto
  }
  .layout-tarjeta .linea-tiempo li{
    flex:1 0 150px;padding:32px 10px 0;text-align:center
  }
  .layout-tarjeta .linea-tiempo .punto{left:50%;transform:translateX(-50%);top:0}
  .layout-tarjeta .act-it{font-size:18px}
}

/* ---------- Detalles ---------- */
.layout-tarjeta .galeria-inv{gap:8px}
.layout-tarjeta .galeria-inv figure{border-radius:calc(var(--radio) * .8)}

.layout-tarjeta .inv-pie{border-top:0;padding-top:20px}
.layout-tarjeta .inv-pie p{margin-inline:auto}