/* ═══════════════════════════════════════════════════════════════════════
   LEXSTART · RESERVAR CITA (v33)
   1) Tarjetas de tarifa con "cielo" según la franja (día, tarde, fin de semana).
   2) "La agenda": libro de citas que se levanta, se abre, la pluma escribe el
      número de cada paso, pasa las páginas y se cierra (cita.js).
   Sin JS o con "reducir movimiento" los pasos se ven como tarjetas de papel.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────── 1 · Tarjetas de tarifa ───────────── */
.ct-card { --mx: 50%; --my: 50%; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .ct-card:hover { background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(46, 158, 128, .09), transparent 45%); }
}
.ct-sky { position: relative; height: 96px; margin: -34px -30px 22px; overflow: hidden; display: flex; align-items: center; padding: 0 30px; isolation: isolate;
  background: linear-gradient(135deg, #d4f1ff 0%, #9fe0d4 55%, #5DCAA5 100%); }
.ct-sky.ev { background: linear-gradient(135deg, #ffc98a 0%, #e6789a 52%, #5b4a9c 100%); }
.ct-sky.wk { background: linear-gradient(135deg, #fff0c2 0%, #f7c25a 50%, #d9822b 100%); }
.ct-sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: linear-gradient(180deg, transparent, var(--card)); opacity: .5; z-index: -1; }
.ct-sky .ct-ico { position: relative; margin: 0; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .55) !important; color: #135e4b !important; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ct-sky.ev .ct-ico { color: #5b2b63 !important; }
.ct-sky.wk .ct-ico { color: #8a4a00 !important; }
.ct-sky .ct-ico svg { width: 26px; height: 26px; }
.ct-sky.dy .ct-ico svg { animation: ctSpin 26s linear infinite; }
.ct-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.ct-sky.dy .ct-orb { right: -30px; top: -40px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 244, 200, .35) 40%, transparent 70%); animation: ctPulse 6s ease-in-out infinite; }
.ct-sky.ev .ct-orb { right: 26px; top: 18px; width: 4px; height: 4px; background: #fff; box-shadow: -40px 20px 0 -1px #fff, -86px 6px 0 0 rgba(255, 255, 255, .8), -62px 44px 0 -1px rgba(255, 255, 255, .7), -14px 52px 0 0 #fff; animation: ctTwinkle 3.4s ease-in-out infinite; }
.ct-sky.wk .ct-orb { right: 30px; top: 22px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); border-radius: 2px; box-shadow: -48px 28px 0 -3px rgba(255, 255, 255, .85), -96px 8px 0 -2px rgba(255, 255, 255, .7), -22px 50px 0 -4px #fff; animation: ctTwinkle 4.2s ease-in-out infinite; }
@keyframes ctSpin { to { transform: rotate(360deg); } }
@keyframes ctPulse { 50% { transform: scale(1.12); opacity: .8; } }
@keyframes ctTwinkle { 50% { opacity: .35; } }
.ct-card .ct-badge { z-index: 2; background: rgba(255, 255, 255, .88) !important; color: #8a4a00 !important; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .ct-card .ct-badge { background: rgba(0, 0, 0, .55) !important; color: #ffd38a !important; }
@media (max-width: 560px) { .ct-sky { margin: -30px -22px 20px; padding: 0 22px; height: 84px; } }

/* ───────────── 2 · La agenda ───────────── */
.ag { position: relative; background: #000; color: #f5f5f7; overflow: clip; --pw: 400px; --ph: 540px; --penh: 170px;
  --u: calc(var(--fz, 1) * 1cqw); --ink: #1d2f57; --paper: #fbf7ee; --paper2: #f4eddd; --gold: #d9b56a; }
.ag::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 40% at 50% 58%, rgba(46, 158, 128, .22), transparent 70%), radial-gradient(28% 30% at 82% 18%, rgba(217, 181, 106, .12), transparent 70%), radial-gradient(30% 30% at 12% 85%, rgba(126, 207, 207, .08), transparent 70%); }
.ag-pin { position: relative; }
.ag-head { position: relative; z-index: 5; max-width: var(--a-max); width: 100%; margin: 0 auto; padding: 0 22px; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ag-head .a-eyebrow { color: #7ECFCF !important; margin-bottom: 8px; }
.ag-head h2 { margin: 0; font-size: clamp(34px, 4.6vw, 60px) !important; font-weight: 700; letter-spacing: -.04em; line-height: 1.02; color: #f5f5f7; }
.ag-head h2 em { font-style: normal; background: linear-gradient(100deg, #f3d58a, #fff1c4 45%, #7ECFCF); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.ag-count { flex: none; font-size: 15px; font-weight: 600; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.ag-count b { color: #f5f5f7; font-size: 28px; font-weight: 700; }
.ag-bar { display: none; }

/* Papel */
.ag-face { box-sizing: border-box; }
/* v35 · Unidad de las páginas (--u = 1 % del ancho de la página):
   con animación la calcula cita.js en píxeles (--pwu), así no depende de container queries;
   sin animación se usa cqw y, en navegadores sin container queries, un valor fijo. */
.ag:not(.ag-live) .ag-face { container-type: inline-size; }
.ag.ag-live { --u: var(--pwu, 4px); }
.ag.ag-live .ag-in { --u: calc(var(--fz, 1) * var(--pwu, 4px)); }
@supports not (container-type: inline-size) { .ag, .ag .ag-in { --u: min(4.4px, .9vw); } }
.ag-paper { position: relative; background-color: var(--paper); color: #2b2824; font-family: 'Outfit', system-ui, sans-serif;
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(72, 112, 150, .13) 27px, rgba(72, 112, 150, .13) 28px);
  background-position: 0 var(--lt, 62px); }
.ag-in { position: relative; z-index: 1; height: 100%; box-sizing: border-box; padding: calc(7 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)) calc(9 * var(--u)); display: flex; flex-direction: column; }
.ag-left .ag-in { padding: calc(7 * var(--u)) calc(9 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u)); }
.ag-hand, .ag-step h3 { font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; }
.ag-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: calc(2.2 * var(--u)); margin-bottom: calc(4 * var(--u)); border-bottom: 1.5px solid rgba(43, 40, 36, .55); font-size: clamp(8px, calc(2.8 * var(--u)), 13px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6b6257; }
.ag-ph em { font-style: normal; font-weight: 700; letter-spacing: .2em; color: #1c7f65; }

/* Página derecha: el paso */
.ag-top { display: flex; align-items: flex-end; gap: calc(4 * var(--u)); margin-bottom: calc(3.4 * var(--u)); }
.ag-num { flex: none; width: calc(17 * var(--u)); height: auto; overflow: visible; }
.ag-ink { fill: none; stroke: var(--ink); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.ag-step h3 { margin: 0 0 calc(1.4 * var(--u)); font-size: clamp(17px, calc(9.6 * var(--u)), 46px); font-weight: 700; line-height: .95; letter-spacing: 0; color: var(--ink) !important;
  opacity: var(--h, 1); transform: translateY(calc((1 - var(--h, 1)) * 8px)); }
.ag-txt { opacity: var(--t, 1); transform: translateY(calc((1 - var(--t, 1)) * 12px)); }
.ag-txt p { margin: 0 0 calc(3 * var(--u)); font-size: clamp(10.5px, calc(3.9 * var(--u)), 17px); line-height: 1.5; color: #3d3833; }
.ag-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(2.2 * var(--u)); }
.ag-ul li { position: relative; padding-left: calc(5.4 * var(--u)); font-size: clamp(10px, calc(3.6 * var(--u)), 16px); line-height: 1.42; color: #3d3833; }
.ag-ul li::before { content: ''; position: absolute; left: 0; top: .5em; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); min-width: 7px; min-height: 7px; border-radius: 50%; border: 1.5px solid var(--ink); }
.ag-ul li:nth-child(odd)::before { background: radial-gradient(circle, var(--ink) 0 35%, transparent 40%); }
.ag-prices { display: grid; gap: calc(1.6 * var(--u)); margin: 0 0 calc(3 * var(--u)); }
.ag-prices div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: calc(1.6 * var(--u)) 0; border-bottom: 1px dashed rgba(43, 40, 36, .35); font-size: clamp(10px, calc(3.7 * var(--u)), 16px); color: #3d3833; }
.ag-prices b { font-family: 'Caveat', cursive; font-size: clamp(14px, calc(6.2 * var(--u)), 28px); font-weight: 700; color: var(--ink); white-space: nowrap; }
.ag-prices small { display: block; font-size: .8em; color: #7a7066; }
.ag-small { margin: 0 !important; font-size: clamp(9.5px, calc(3.3 * var(--u)), 14.5px) !important; color: #6b6257 !important; }

/* Páginas izquierdas: apuntes a mano */
.ag-left .ag-hand { color: var(--ink); }
.ag-week { position: relative; flex: 1; display: grid; grid-template-columns: calc(7 * var(--u)) repeat(7, 1fr); gap: calc(1.6 * var(--u)); min-height: 0; margin-bottom: calc(3 * var(--u)); }
.ag-week .ax .t0 { position: relative; flex: 1; font-size: clamp(8px, calc(2.6 * var(--u)), 12px); color: #7a7066; }
.ag-week .ax .t0 span { position: absolute; right: 0; transform: translateY(-50%); }
.ag-day { position: relative; display: flex; flex-direction: column; }
.ag-day b { display: block; text-align: center; font-family: 'Caveat', cursive; font-size: clamp(11px, calc(5 * var(--u)), 22px); font-weight: 700; color: var(--ink); line-height: 1.1; margin-bottom: calc(1.4 * var(--u)); }
.ag-day .tl { position: relative; flex: 1; border-radius: 6px; background: rgba(43, 40, 36, .05); border: 1px solid rgba(43, 40, 36, .12); }
.ag-day .tl i { position: absolute; left: 12%; right: 12%; border-radius: 4px; }
.ag-day .tl .d { top: 7.7%; height: 69.2%; background: linear-gradient(180deg, #8fdcc7, #3BB89A); }
.ag-day .tl .e { top: 76.9%; height: 15.4%; background: linear-gradient(180deg, #e6789a, #7a5aa8); }
.ag-day .tl .w { top: 30.8%; height: 53.8%; background: linear-gradient(180deg, #f7d27a, #e0952f); }
.ag-legend { display: grid; gap: calc(1.2 * var(--u)); font-size: clamp(12px, calc(5.2 * var(--u)), 24px); line-height: 1.05; }
.ag-legend span { display: flex; align-items: center; gap: calc(2.4 * var(--u)); }
.ag-legend i { flex: none; width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 3px; }
.ag-legend .d { background: #3BB89A; } .ag-legend .e { background: #a0609a; } .ag-legend .w { background: #eaa13a; }
.ag-note { margin: calc(3 * var(--u)) 0 0; font-size: clamp(12px, calc(5 * var(--u)), 23px); line-height: 1.1; transform: rotate(-2deg); }
.ag-form { display: grid; gap: calc(5.2 * var(--u)); margin-top: calc(2 * var(--u)); font-size: clamp(13px, calc(6.2 * var(--u)), 28px); }
.ag-form .row { display: flex; align-items: flex-end; gap: calc(3 * var(--u)); }
.ag-form .row i { flex: 1; height: 0; border-bottom: 1.5px solid rgba(29, 47, 87, .55); transform: translateY(-.25em); }
.ag-form .chk { gap: calc(6 * var(--u)); }
.ag-form .chk > span::before { content: '☐'; margin-right: calc(1.4 * var(--u)); font-family: 'Outfit', sans-serif; font-size: .8em; }
.ag-form .chk > span.on::before { content: '☑'; color: #1c7f65; }
.ag-arrow { margin-top: auto; align-self: flex-end; font-size: clamp(14px, calc(6.6 * var(--u)), 30px); color: #1c7f65; transform: rotate(-4deg); }
.ag-sticky { position: relative; align-self: flex-start; width: 70%; padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(7 * var(--u)); margin: calc(1 * var(--u)) 0 0 calc(3 * var(--u)); background: linear-gradient(170deg, #fff7b0, #ffe97a); box-shadow: 0 14px 22px -14px rgba(0, 0, 0, .45); transform: rotate(-3deg); font-size: clamp(13px, calc(6 * var(--u)), 27px); line-height: 1.12; color: #3d3410; }
.ag-sticky::before { content: ''; position: absolute; top: -calc(3 * var(--u)); left: 32%; width: 30%; height: calc(6 * var(--u)); background: rgba(255, 255, 255, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); transform: rotate(4deg); }
.ag-sticky b { display: block; margin-bottom: calc(2 * var(--u)); font-size: 1.15em; }
.ag-mail { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-top: auto; font-size: clamp(12px, calc(5.6 * var(--u)), 25px); line-height: 1.1; }
.ag-mail svg { flex: none; width: calc(22 * var(--u)); height: auto; }
.ag-receipt { position: relative; align-self: center; width: 78%; margin-top: calc(2 * var(--u)); padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(17 * var(--u)); background: #fff; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .45); transform: rotate(2deg);
  -webkit-mask: radial-gradient(circle calc(2.2 * var(--u)) at 50% 100%, transparent 98%, #000) 0 0 / calc(7 * var(--u)) 100% repeat-x; mask: radial-gradient(circle calc(2.2 * var(--u)) at 50% 100%, transparent 98%, #000) 0 0 / calc(7 * var(--u)) 100% repeat-x; }
.ag-receipt .ln { display: flex; justify-content: space-between; gap: 6px; padding: calc(1.8 * var(--u)) 0; border-bottom: 1px dashed #c9c1b3; font-size: clamp(12px, calc(5.6 * var(--u)), 25px); }
.ag-stamp { position: absolute; right: calc(5 * var(--u)); bottom: calc(6.5 * var(--u)); padding: calc(1.2 * var(--u)) calc(3 * var(--u)); border: 2.5px solid rgba(200, 60, 60, .75); border-radius: 6px; color: rgba(200, 60, 60, .8); font-size: clamp(10px, calc(3.4 * var(--u)), 15px); font-weight: 800; letter-spacing: .14em; transform: rotate(-10deg); }
.ag-end { justify-content: center; text-align: center; }
.ag-end .ag-hand { font-size: clamp(16px, calc(8 * var(--u)), 38px); line-height: 1.05; transform: rotate(-3deg); }
.ag-end small { display: block; margin-top: calc(4 * var(--u)); font-size: clamp(10px, calc(3 * var(--u)), 13px); letter-spacing: .14em; text-transform: uppercase; color: #8a8076; }
.ag-endpaper .ag-in { justify-content: flex-end; }
.ag-endpaper p { margin: 0; font-size: clamp(9px, calc(2.8 * var(--u)), 12px); line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: #8a8076; }

/* Tapas de piel */
.ag-cover { position: relative; color: var(--gold);
  background-color: #0b3a2f;
  background-image: radial-gradient(120% 90% at 25% 15%, rgba(255, 255, 255, .12), transparent 55%), radial-gradient(80% 60% at 80% 95%, rgba(0, 0, 0, .45), transparent 70%),
    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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 10px 0 18px -8px rgba(0, 0, 0, .55); }
.ag-stitch { position: absolute; inset: calc(4.6 * var(--u)); border: 1.5px dashed rgba(217, 181, 106, .5); border-radius: calc(2.4 * var(--u)); pointer-events: none; }
.ag-corner { position: absolute; width: calc(11 * var(--u)); height: calc(11 * var(--u)); background: linear-gradient(135deg, #f6dd98, #b8913f 60%, #8a6a2a); }
.ag-corner.tr { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ag-corner.br { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ag-emb { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 calc(17 * var(--u)) 0 calc(8 * var(--u)); }
.ag-logo { width: calc(52 * var(--u)); height: auto; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .12)); }
.ag-slogan { margin: calc(6 * var(--u)) 0 0; font-size: clamp(10px, calc(3.8 * var(--u)), 17px); font-weight: 500; letter-spacing: .22em; white-space: nowrap; text-transform: uppercase; background: linear-gradient(100deg, #b8913f, #f6dd98 45%, #fff3c9 55%, #b8913f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-yr { margin: calc(2.4 * var(--u)) 0 0; font-family: 'Caveat', cursive; font-size: clamp(14px, calc(5.6 * var(--u)), 24px); color: rgba(217, 181, 106, .85); }
.ag-band { position: absolute; top: 0; bottom: 0; right: calc(9 * var(--u)); width: calc(4.4 * var(--u)); background: linear-gradient(90deg, #031510, #0f2a23 45%, #031510); box-shadow: -2px 0 6px rgba(0, 0, 0, .5), 2px 0 6px rgba(0, 0, 0, .5); }
.ag-bcover .ag-band { right: auto; left: calc(9 * var(--u)); }
.ag-bmark { position: absolute; left: 0; right: 0; bottom: calc(12 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); font-size: clamp(10px, calc(3.2 * var(--u)), 14px); letter-spacing: .24em; color: rgba(217, 181, 106, .75); }
.ag-bmark svg { width: calc(12 * var(--u)); height: auto; }

/* Pluma */
.ag-pen { position: absolute; left: 0; top: 0; z-index: 60; width: calc(var(--penh) * .154); height: var(--penh); pointer-events: none; transform-origin: 50% 99%; will-change: transform, opacity;
  filter: drop-shadow(-12px 16px 10px rgba(0, 0, 0, .35)); }

/* Final */
.ag-final h3 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; color: #f5f5f7; }
.ag-final p { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: #a1a1a6; }
.ag-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ag-cta { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; background: var(--a-teal); color: #fff !important; box-shadow: 0 8px 30px -10px rgba(46, 158, 128, .7); transition: transform .35s var(--a-ease-out), filter .3s; }
.ag-cta.alt { background: rgba(255, 255, 255, .1); color: #f5f5f7 !important; box-shadow: none; border: 1px solid rgba(255, 255, 255, .18); }
.ag-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ag-cta:active { transform: scale(.97); }
body.en a.ag-cta span[data-en] { display: inline !important; }

/* ── Sin animación (sin JS o "reducir movimiento"): pasos como hojas de papel ── */
.ag:not(.ag-live) { padding: clamp(90px, 10vw, 130px) 0; }
.ag:not(.ag-live) .ag-count, .ag:not(.ag-live) .ag-pen, .ag:not(.ag-live) .ag-block, .ag:not(.ag-live) .ag-spine { display: none; }
.ag:not(.ag-live) .ag-book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 920px; margin: 44px auto 0; padding: 0 22px; box-sizing: border-box; }
.ag:not(.ag-live) .ag-leaf { display: contents; }
.ag:not(.ag-live) .ag-face { display: none; }
.ag:not(.ag-live) .ag-step { display: block; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ag:not(.ag-live) .ag-ink { stroke-dashoffset: 0 !important; }
.ag:not(.ag-live) .ag-final { max-width: 620px; margin: 40px auto 0; padding: 0 22px; text-align: center; }
.ag:not(.ag-live) .ag-ctas { justify-content: center; }
@media (max-width: 760px) { .ag:not(.ag-live) .ag-book { grid-template-columns: 1fr; } }

/* ── Con animación ── */
.ag.ag-live .ag-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + var(--sub-h, 0px) + 20px); box-sizing: border-box; }
.ag.ag-live .ag-stage { position: relative; flex: 1; min-height: 0; margin-top: 10px; }
.ag.ag-live .ag-scene { position: absolute; inset: 0 0 46px; perspective: 1800px; perspective-origin: 50% 35%; }
.ag.ag-live .ag-book { position: absolute; left: 50%; top: 50%; width: calc(var(--pw) * 2); height: var(--ph); margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) * -1); transform-origin: 50% 70%; will-change: transform; }
.ag.ag-live .ag-leaf { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.ag.ag-live .ag-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 12px 12px 2px; }
.ag.ag-live .ag-face.back { transform: rotateY(180deg); border-radius: 12px 2px 2px 12px; }
.ag.ag-live .ag-face::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--sh, 0); background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .08) 60%, rgba(255, 255, 255, .06)); }
.ag.ag-live .ag-paper.ag-right::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(80, 55, 20, .2), rgba(80, 55, 20, 0) 9%), linear-gradient(270deg, rgba(80, 55, 20, .06), transparent 4%); }
.ag.ag-live .ag-paper.ag-left::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(270deg, rgba(80, 55, 20, .2), rgba(80, 55, 20, 0) 9%), linear-gradient(90deg, rgba(80, 55, 20, .06), transparent 4%); }
.ag-block { position: absolute; top: 0; width: var(--pw); height: var(--ph); background: var(--paper2); pointer-events: none; }
.ag-block.r { left: 50%; border-radius: 2px 12px 12px 2px; transform: translate(4px, 4px); box-shadow: 1px 1px 0 #e7dec9, 2px 2px 0 #d9ccb0, 3px 3px 0 #e7dec9, 4px 4px 0 #cfc1a3, 10px 26px 50px -18px rgba(0, 0, 0, .9); }
.ag-block.l { left: calc(50% - var(--pw)); border-radius: 12px 2px 2px 12px; transform: translate(-4px, 4px); box-shadow: -1px 1px 0 #e7dec9, -2px 2px 0 #d9ccb0, -3px 3px 0 #e7dec9, -4px 4px 0 #cfc1a3, -10px 26px 50px -18px rgba(0, 0, 0, .9); opacity: 0; }
.ag-spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 46px; margin-left: -23px; z-index: 45; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(60, 40, 10, .22) 45%, rgba(60, 40, 10, .3) 50%, rgba(60, 40, 10, .22) 55%, transparent); }
.ag.ag-live .ag-final { position: absolute; top: 50%; left: 60%; width: 380px; transform: translate(30px, -50%); opacity: 0; visibility: hidden; transition: opacity .7s var(--a-ease), transform .9s var(--a-ease-out), visibility .7s; z-index: 70; }
.ag.ag-live.at-final .ag-final { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.ag.ag-live .ag-bar { display: grid; position: absolute; left: 22px; right: 22px; bottom: 22px; max-width: calc(var(--a-max) - 44px); margin: 0 auto; grid-template-columns: repeat(4, 1fr); gap: 6px; z-index: 5; }
.ag-bar i { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; position: relative; }
.ag-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #f3d58a, #7ECFCF); transform-origin: left; transform: scaleX(var(--s, 0)); }

/* v34 · Cada cara solo se ve por su lado (Safari en iPhone no siempre respeta backface-visibility) */
.ag.ag-live .ag-leaf.fl > .ag-face.front, .ag.ag-live .ag-leaf:not(.fl) > .ag-face.back { visibility: hidden; }

/* v34 · Móvil: agenda encuadernada arriba. Apuntes en la página de arriba, el paso abajo;
   las hojas se pasan hacia arriba (cita.js añade .ag-v) */
.ag.ag-live.ag-v .ag-book { width: var(--pw); height: calc(var(--ph) * 2); margin: calc(var(--ph) * -1) 0 0 calc(var(--pw) / -2); transform-origin: 50% 50%; }
.ag.ag-live.ag-v .ag-leaf { left: 0; top: 50%; transform-origin: 50% 0; }
.ag.ag-live.ag-v .ag-face { border-radius: 2px 2px 12px 12px; }
.ag.ag-live.ag-v .ag-face.back { transform: rotateX(180deg); border-radius: 12px 12px 2px 2px; }
.ag.ag-live.ag-v .ag-face::after { background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .08) 60%, rgba(255, 255, 255, .06)); }
.ag.ag-live.ag-v .ag-paper.ag-right::before { background: linear-gradient(180deg, rgba(80, 55, 20, .2), rgba(80, 55, 20, 0) 12%), linear-gradient(0deg, rgba(80, 55, 20, .06), transparent 5%); }
.ag.ag-live.ag-v .ag-paper.ag-left::before { background: linear-gradient(0deg, rgba(80, 55, 20, .2), rgba(80, 55, 20, 0) 12%), linear-gradient(180deg, rgba(80, 55, 20, .06), transparent 5%); }
.ag.ag-v .ag-block.r { left: 0; top: 50%; border-radius: 2px 2px 12px 12px; transform: translate(3px, 4px); box-shadow: 1px 1px 0 #e7dec9, 2px 2px 0 #d9ccb0, 3px 3px 0 #e7dec9, 4px 4px 0 #cfc1a3, 6px 22px 40px -16px rgba(0, 0, 0, .9); }
.ag.ag-v .ag-block.l { left: 0; top: 0; border-radius: 12px 12px 2px 2px; transform: translate(3px, -4px); box-shadow: 1px -1px 0 #e7dec9, 2px -2px 0 #d9ccb0, 3px -3px 0 #e7dec9, 4px -4px 0 #cfc1a3; }
.ag.ag-v .ag-spine { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 36px; margin: -18px 0 0; background: linear-gradient(180deg, transparent, rgba(60, 40, 10, .22) 45%, rgba(60, 40, 10, .3) 50%, rgba(60, 40, 10, .22) 55%, transparent); }
/* Páginas apaisadas (móvil): menos margen y el paso a dos columnas (número y título | texto) */
.ag.ag-v .ag-in { padding: calc(4.2 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(7 * var(--u)); }
.ag.ag-v .ag-ph { margin-bottom: calc(2.6 * var(--u)); padding-bottom: calc(1.6 * var(--u)); }
.ag.ag-v .ag-step .ag-in { display: grid; grid-template-columns: 30% minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: calc(4 * var(--u)); align-items: start; }
.ag.ag-v .ag-step .ag-ph { grid-column: 1 / -1; }
.ag.ag-v .ag-step .ag-top { flex-direction: column; align-items: flex-start; gap: calc(1.6 * var(--u)); margin: 0; }
.ag.ag-v .ag-num { width: calc(12.5 * var(--u)); }
.ag.ag-v .ag-step h3 { font-size: clamp(16px, calc(7.2 * var(--u)), 32px); }
.ag.ag-v .ag-form { grid-template-columns: 1fr 1fr; gap: calc(3.4 * var(--u)) calc(6 * var(--u)); margin-top: 0; }
.ag.ag-v .ag-in.ag-rem { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: calc(5 * var(--u)); align-items: center; }
.ag.ag-v .ag-in.ag-rem .ag-ph { grid-column: 1 / -1; align-self: start; }
.ag.ag-v .ag-sticky { width: auto; margin: 0; }
.ag.ag-v .ag-mail { margin: 0; flex-direction: column; align-items: flex-start; }
.ag.ag-v .ag-receipt { width: 62%; margin-top: 0; }
.ag.ag-v .ag-in.ag-wkp { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: calc(5 * var(--u)); }
.ag.ag-v .ag-in.ag-wkp .ag-ph { grid-column: 1 / -1; }
.ag.ag-v .ag-week { grid-column: 1; grid-row: 2 / 4; margin: 0; gap: calc(1.2 * var(--u)); }
.ag.ag-v .ag-legend { grid-column: 2; grid-row: 2; align-self: center; font-size: clamp(11px, calc(4.1 * var(--u)), 19px); white-space: nowrap; }
.ag.ag-v .ag-note { grid-column: 2; grid-row: 3; margin: 0; font-size: clamp(11px, calc(3.8 * var(--u)), 17px); }
/* Cada página ajusta su propio tamaño de texto (cita.js pone --fz en .ag-in) */
.ag-in { --u: calc(var(--fz, 1) * 1cqw); }
/* Páginas muy justas de alto: se oculta la frase de introducción (puntos, precios y nota final se mantienen) */
.ag-in.ag-tight .ag-txt > p:not(.ag-small), .ag-in.ag-tight .ag-note { display: none; }

/* Móvil */
@media (max-width: 760px) {
  .ag-head { align-items: center; }
  .ag-head h2 { font-size: clamp(25px, 7.4vw, 36px) !important; }
  .ag-head .a-eyebrow { margin-bottom: 4px; }
  .ag-count b { font-size: 22px; }
  .ag.ag-live .ag-pin { padding-top: calc(var(--nav-h) + var(--sub-h, 0px) + 14px); }
  .ag.ag-live .ag-scene { bottom: 40px; }
  .ag.ag-live .ag-bar { bottom: 18px; }
  .ag.ag-live .ag-final { top: auto; bottom: 46px; left: 22px; right: 22px; width: auto; text-align: center; transform: translateY(24px); }
  .ag.ag-live.at-final .ag-final { transform: none; }
  .ag.ag-live .ag-final h3 { font-size: 26px; }
  .ag.ag-live .ag-final p { font-size: 15px; margin-top: 8px; }
  .ag.ag-live .ag-ctas { justify-content: center; margin-top: 14px; }
  .ag-cta { height: 44px; font-size: 15px; padding: 0 18px; }
  .ag.ag-live .ag-cta.alt { display: none; }
}
/* Pantallas bajas: el texto de la página respira menos */
@media (max-height: 700px) { .ag-txt p { margin-bottom: calc(2 * var(--u)); } .ag-ul { gap: calc(1.4 * var(--u)); } }

@media (prefers-reduced-motion: reduce) {
  .ct-sky .ct-ico svg, .ct-orb { animation: none !important; }
}