/* =========================================================
   Itinerario · tarjeta tipo collage (papel con volumen, ramita de gypsophila con lazo, hojas)
   Se adapta a cada estilo con las variables del tema.
   ========================================================= */
.itin { padding: 5.5rem 1.1rem 6rem; overflow: hidden; }
.itin-mesa { position: relative; max-width: 560px; margin: 0 auto; --itin-papel: #FCFBF8; --itin-tinta: #3A3733; --itin-ac: var(--accent); --itin-tallo: #7E8A5C; }
.itin-papel-atras { position: absolute; inset: 1.5% -2.5% -2% 5%; background: var(--bg2); border-radius: 3px; transform: rotate(2.4deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.itin-card { position: relative; z-index: 1; overflow: hidden; border-radius: 3px; padding: 3.4rem 1.7rem 2.8rem 31%; color: var(--itin-tinta);
  background-color: var(--itin-papel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 12px 24px rgba(0, 0, 0, .10), 0 42px 60px -24px rgba(0, 0, 0, .28); }
.itin-card > header, .itin-lista, .itin-card > footer { position: relative; z-index: 2; }
.itin-card header { text-align: center; margin-bottom: 2.2rem; padding-right: 8%; }
.itin-titulo { margin: 0; font: 400 clamp(3rem, 11vw, 4.4rem)/1 "Allura", "Cormorant Garamond", cursive; color: var(--itin-tinta); letter-spacing: 0; }
.itin-sub { margin: .7rem 0 0; font: 400 .74rem/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .38em; text-transform: uppercase; color: var(--itin-tinta); opacity: .85; }

.itin-lista { list-style: none; margin: 0; padding: 0; position: relative; }
.itin-lista::before { content: ""; position: absolute; left: calc(2.7rem + 1rem + 4.5px); top: .8rem; bottom: 2.4rem; width: 1px; background: var(--itin-ac); opacity: .55; }
.itin-lista li { text-align: left; display: grid; grid-template-columns: 2.7rem 9px 1fr; column-gap: 1rem; align-items: start; padding: 0 0 1.45rem; }
.itin-lista li:last-child { padding-bottom: .4rem; }
.itin-icono { color: var(--itin-ac); padding-top: .15rem; }
.itin-icono .itin-ic { width: 2.7rem; height: 2.7rem; display: block; }
.itin-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--itin-ac); margin-top: .55rem; position: relative; z-index: 1; }
.itin-lista time { display: block; font: 400 1.12rem/1.1 "Cormorant Garamond", Georgia, serif; font-variant-numeric: oldstyle-nums; letter-spacing: .04em; opacity: .85; }
.itin-lista b { display: block; font: 500 1.28rem/1.25 "Cormorant Garamond", Georgia, serif; margin-top: .1rem; }
.itin-lista small { display: block; font: italic 400 .98rem/1.35 "Cormorant Garamond", Georgia, serif; opacity: .78; margin-top: .1rem; }

.itin-card footer { text-align: center; margin-top: 2rem; }
.itin-gracias { margin: 0; font: 400 .74rem/1.4 "Cormorant Garamond", Georgia, serif; letter-spacing: .32em; text-transform: uppercase; }
.itin-cor { display: block; color: var(--itin-ac); font-size: .95rem; margin: .5rem 0 .2rem; }
.itin-firma { margin: 0; font: 400 1.7rem/1.15 "Allura", "Cormorant Garamond", cursive; }

/* hojas de acuarela en las esquinas */
.itin-hojas { position: absolute; z-index: 1; color: var(--itin-ac); pointer-events: none; }
.itin-hojas-a { top: -14px; right: -18px; width: 30%; }
.itin-hojas-b { bottom: -16px; right: -14px; width: 34%; transform: scaleY(-1) rotate(-6deg); }
/* ramita de gypsophila con lazo de lino: sale del papel (volumen) */
.itin-gyp { position: absolute; z-index: 3; left: -4%; top: 12%; width: 31%; height: 82%; pointer-events: none;
  filter: drop-shadow(5px 9px 6px rgba(0, 0, 0, .22)) drop-shadow(1px 1px 1px rgba(0, 0, 0, .15)); }
.itin-gyp .tallos { stroke: var(--itin-tallo); stroke-width: .9; stroke-linecap: round; }
.itin-gyp .flores { fill: #FFFDF8; stroke: #D6CDBB; stroke-width: .5; }
.itin-gyp .lazo { fill: #E9E1D3; stroke: #BFB4A1; stroke-width: .8; }
.itin-cinta { display: none; position: absolute; z-index: 4; width: 34%; height: 1.9rem; background: rgba(222, 210, 186, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.itin-cinta-a { top: -.6rem; left: 8%; transform: rotate(-5deg); }
.itin-cinta-b { bottom: -.5rem; right: 6%; transform: rotate(4deg); }

@media (max-width: 520px) {
  .itin { padding: 4.5rem .9rem 5rem; }
  .itin-card { padding: 2.8rem 1.1rem 2.3rem 27%; }
  .itin-gyp { left: -7%; width: 34%; top: 14%; }
  .itin-lista li { grid-template-columns: 2.2rem 9px 1fr; column-gap: .7rem; padding-bottom: 1.2rem; }
  .itin-lista::before { left: calc(2.2rem + .7rem + 4.5px); }
  .itin-icono .itin-ic { width: 2.2rem; height: 2.2rem; }
  .itin-lista b { font-size: 1.13rem; } .itin-lista small { font-size: .9rem; } .itin-lista time { font-size: 1rem; }
}

/* ---------- adaptaciones por estilo ---------- */
[data-theme="animacion"] .itin-mesa { --itin-papel: #FCFBF8; --itin-papel: color-mix(in srgb, var(--bg) 22%, #FFFEFB); --itin-tinta: var(--ink); }
[data-theme="salvia"] .itin-mesa { --itin-tallo: #6F7F66; }
[data-theme="boho"] .itin-mesa { --itin-papel: #FAF4EB; --itin-tallo: #8C6F4E; }
[data-theme="boho"] .itin-gyp .lazo { fill: #D9B892; stroke: #A9825C; }
[data-theme="noche"] .itin-mesa, [data-theme="velas"] .itin-mesa { --itin-papel: var(--bg2); --itin-tinta: var(--ink); --itin-tallo: #A99472; }
[data-theme="noche"] .itin-card, [data-theme="velas"] .itin-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 50px rgba(0, 0, 0, .55); }
[data-theme="noche"] .itin-papel-atras, [data-theme="velas"] .itin-papel-atras { background: rgba(255, 255, 255, .05); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
[data-theme="noche"] .itin-gyp .flores, [data-theme="velas"] .itin-gyp .flores { fill: #F4EEE4; stroke: #8F8573; }
[data-theme="velas"] .itin-card { background-image: radial-gradient(120% 70% at 50% 0%, rgba(230, 170, 108, .14), transparent 60%); }
/* Editorial: collage de revista con cintas y sombra dura */
[data-theme="editorial"] .itin-mesa { --itin-papel: #FFFFFF; --itin-tinta: #0B0B0B; --itin-ac: #0B0B0B; }
[data-theme="editorial"] .itin-card { padding-left: 1.7rem; border-radius: 0; box-shadow: 12px 12px 0 #0B0B0B; border: 1px solid #0B0B0B; overflow: visible; }
[data-theme="editorial"] .itin-papel-atras { background: #EDEDED; transform: rotate(-2.6deg); inset: 3% 3% -3% -2%; box-shadow: none; }
[data-theme="editorial"] .itin-gyp, [data-theme="editorial"] .itin-hojas { display: none; }
[data-theme="editorial"] .itin-cinta { display: block; }
[data-theme="editorial"] .itin-titulo, [data-theme="editorial"] .itin-firma { font-family: "Bodoni Moda", "Cormorant Garamond", serif; font-style: italic; font-size: clamp(2.6rem, 9vw, 3.6rem); }
[data-theme="editorial"] .itin-firma { font-size: 1.3rem; }
@media (max-width: 520px) { [data-theme="editorial"] .itin-card { padding-left: 1.1rem; box-shadow: 8px 8px 0 #0B0B0B; } }

.itin-ejemplo { position: relative; z-index: 5; max-width: 30rem; margin: 0 auto 1.4rem; padding: .6rem 1rem; border-radius: 999px; background: #2A2724; color: #F6F2EB; font: 400 .74rem/1.35 "Jost", sans-serif; text-align: center; letter-spacing: .02em; }