/* =====================================================================
   Amo Invitar! · Página Álbum QR (Albunear)
   Verdes Amo Invitar: #4e9c87 · claro #E5F3EC · oscuro #154b3f
   Los gráficos (celular, tableta, QR y tarjetas) se miden en % y cqw
   para escalar igual en cualquier pantalla, como en albunear.com
   ===================================================================== */
.alb {
  --alb-verde: #4e9c87;
  --alb-verde-2: #3f8a77;
  --alb-verde-light: #E5F3EC;
  --alb-verde-oscuro: #154b3f;
  --alb-dark: #1c1c1c;
  --alb-muted: #5f6b67;
  --alb-line: #d6e7df;
}

/* ---------- Comunes ---------- */
.alb-section { padding: 70px 0; position: relative; }
.alb-section.alb-alt { background: #f6faf8; }
.alb-kicker { display: block; font-size: 0.813rem; letter-spacing: .3em; text-transform: uppercase; color: var(--alb-verde); font-weight: 600; margin-bottom: 10px; }
.alb-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.alb-head p { color: var(--alb-muted); }
.alb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.alb-btns .btn { border-radius: 50px; padding: 10px 26px; letter-spacing: .05em; }
.alb .button-verde2:hover { background-color: #4e9c87; color: #fff; }
.alb-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: #3d4643; }
.alb-ticks li { display: flex; gap: 6px; align-items: center; }
.alb-ticks svg { width: 17px; height: 17px; color: var(--alb-verde); flex: none; }
.alb-icon svg { width: 44px; height: 44px; color: var(--alb-verde); }

/* ---------- Portada ---------- */
.alb-hero { overflow: hidden; padding: 130px 0 80px; background: linear-gradient(160deg, #ffffff 0%, var(--alb-verde-light) 55%, #cfe8dc 100%); }
.alb-hero::before { content: ''; position: absolute; right: -15%; top: -25%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(78, 156, 135, .22), transparent 62%); pointer-events: none; }
.alb-hero .container { position: relative; }
.alb-logo { width: clamp(170px, 22vw, 240px); height: auto; display: block; margin-bottom: 18px; }
.alb-hero h1 { font-weight: 500; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; color: #2d2d2d; margin-bottom: 18px; }
.alb-hero h1 em { color: var(--alb-verde); font-style: italic; }
.alb-hero .lead { font-size: 18px; color: #3d4643; }
@media (max-width: 991.98px) {
  .alb-hero { padding: 150px 0 60px; text-align: center; }
  .alb-logo { margin: 0 auto 16px; }
  .alb-hero .alb-btns, .alb-hero .alb-ticks { justify-content: center; }
}

/* Celular – tableta vertical – tarjeta QR (flotan) */
.alb-mock { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1.172; margin-left: auto; container-type: inline-size; }
.alb-mock-tv { position: absolute; left: 25.1%; top: 0; width: 59.1%; aspect-ratio: 630 / 793; border-radius: 3.4cqw; border: 1.6cqw solid var(--alb-dark); background: #111; overflow: hidden; box-shadow: 0 34px 70px rgba(21, 75, 63, .35); }
.alb-mock-tv i { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: albfade 24s infinite; }
.alb-mock-tv i:nth-child(2) { animation-delay: 4s; }
.alb-mock-tv i:nth-child(3) { animation-delay: 8s; }
.alb-mock-tv i:nth-child(4) { animation-delay: 12s; }
.alb-mock-tv i:nth-child(5) { animation-delay: 16s; }
.alb-mock-tv i:nth-child(6) { animation-delay: 20s; }
@keyframes albfade { 0%,100% { opacity: 0; transform: scale(1); } 4%, 16.7% { opacity: 1; } 21% { opacity: 0; transform: scale(1.08); } }
.alb-mock-toast { position: absolute; top: 2.4cqw; left: 50%; transform: translateX(-50%); background: var(--alb-verde-oscuro); color: #fff; font-size: 2.2cqw; padding: .9cqw 2.2cqw; border-radius: 999px; white-space: nowrap; z-index: 2; }
.alb-mock-phone { position: absolute; left: 0; top: 25.1%; z-index: 2; width: 32.6%; height: 74.9%; border-radius: 5.6cqw; border: 1.4cqw solid var(--alb-dark); background: url(../images/albunear/garden.webp) center / cover, #eceeec; padding: 6cqw 2.1cqw 2.1cqw; text-align: center; box-shadow: 0 26px 50px rgba(21, 75, 63, .35); animation: albfloat 6s ease-in-out infinite; overflow: hidden; }
@keyframes albfloat { 50% { transform: translateY(-10px); } }
.alb-mock-phone::before { content: ''; position: absolute; top: 1.2cqw; left: 50%; width: 2.4cqw; height: 2.4cqw; background: var(--alb-dark); border-radius: 50%; transform: translateX(-50%); }
.alb-mock-phone .card-in { background: rgba(255,255,255,.92); border-radius: 2.8cqw; padding: 2.1cqw 1.4cqw; }
.alb-mock-phone p { line-height: 1.3; }
.alb-mock-phone .t0 { font-size: 1.45cqw; letter-spacing: .2em; text-transform: uppercase; color: #6f6a60; margin: 0; }
.alb-mock-phone .t1 { font: 400 5.3cqw/1 'Allura', cursive; margin: .7cqw 0; white-space: nowrap; color: #2d2d2d; }
.alb-mock-phone .t2 { font-size: 1.8cqw; color: #6f6a60; margin: 0 0 1.8cqw; }
.alb-mock-phone .b { background: var(--alb-verde); color: #fff; border-radius: 999px; font-size: 1.95cqw; padding: 1.4cqw; }
.alb-mock-phone .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7cqw; margin-top: 1.8cqw; }
.alb-mock-phone .g i { aspect-ratio: 1; border-radius: 1cqw; background-size: cover; background-position: center; }
.alb-mock-qr { position: absolute; left: 70.8%; top: 46.5%; z-index: 3; width: 27%; padding: 2.5cqw 2.1cqw 2.1cqw; text-align: center; border-radius: 1.8cqw; isolation: isolate;
  background: url(../images/albunear/garden.webp) center / cover, #fff; box-shadow: 0 18px 40px rgba(21, 75, 63, .3); transform: rotate(7deg); animation: albfloatqr 7s ease-in-out infinite; }
@keyframes albfloatqr { 50% { transform: rotate(7deg) translateY(-8px); } }
.alb-mock-qr::after { content: ''; position: absolute; inset: 1.25cqw; border-radius: 1.1cqw; background: rgba(255,255,255,.86); z-index: -1; }
.alb-mock-qr p { line-height: 1.3; }
.alb-mock-qr .q0 { font-size: 1.34cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--alb-verde-2); margin: .4cqw 0 0; font-weight: 600; }
.alb-mock-qr .q1 { font: 400 4.4cqw/1.1 'Allura', cursive; margin: .4cqw 0 1.1cqw; color: #3a3a36; white-space: nowrap; }
.alb-mock-qr img { width: 16.4cqw; height: 16.4cqw; display: block; margin: 0 auto; border-radius: .7cqw; }
.alb-mock-qr .q2 { font-size: 1.43cqw; color: #6f6a60; margin: 1.25cqw 0 0; }
@media (max-width: 991.98px) { .alb-mock { margin: 40px auto 0; } }

/* ---------- Pasos y funciones ---------- */
.alb-card { height: 100%; background: #fff; border: 1px solid var(--alb-line); border-radius: 20px; padding: 26px 22px; transition: transform .25s, box-shadow .25s; }
.alb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(78, 156, 135, .16); }
.alb-card h3 { font-size: 1.15rem; font-weight: 600; margin: 14px 0 8px; color: #2d2d2d; }
.alb-card p { margin: 0; font-size: 15px; color: var(--alb-muted); }
.alb-card .alb-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--alb-verde-light); color: var(--alb-verde); font-weight: 700; font-size: 14px; margin-left: 8px; vertical-align: top; }

/* ---------- Mejor juntos ---------- */
.alb-bt { background: linear-gradient(180deg, #ffffff 0%, var(--alb-verde-light) 100%); }
.alb-combo-logos { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.4vw, 14px); margin: 4px 0 14px; }
.alb-combo-logos .cl-ai { height: clamp(24px, 7vw, 38px); width: auto; }
.alb-combo-logos .cl-alb { height: clamp(31px, 9.2vw, 50px); width: auto; margin-top: 6px; }
.alb-combo-logos span { font: 300 clamp(22px, 6vw, 30px)/1 'Jost', sans-serif; color: var(--alb-dark); }
.alb-head p.alb-promo, .alb-promo { display: inline-block; background: var(--alb-verde); color: #fff; border-radius: 16px; padding: 12px 20px; font-size: 15px; margin-top: 4px; }
.alb-promo strong { color: #fff; }
.alb-bt-stage { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 40px; }
.alb-bt-phones { display: flex; gap: 22px; justify-content: center; }
.alb-bt-phone { margin: 0; text-align: center; }
.alb-bt-phone figcaption { margin-top: 12px; font-size: 13.5px; color: var(--alb-muted); letter-spacing: .04em; }
.alb-bt-screen { position: relative; width: 250px; height: 520px; border-radius: 34px; border: 9px solid var(--alb-dark); overflow: hidden; background: #fbf9f4; box-shadow: 0 30px 60px rgba(21, 75, 63, .28); }
.alb-bt-screen::before { content: ''; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; background: var(--alb-dark); border-radius: 50%; transform: translateX(-50%); z-index: 2; }
.alb-bt-poster { background: url(../images/albunear/lovestory.webp) center / cover; }
.alb-bt-poster-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #5a4a2c; text-align: center; }
.alb-bt-poster-in p { line-height: 1.1; }
.alb-bt-poster-in .k { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #9e906b; margin: 0; font-weight: 600; }
.alb-bt-poster-in .n { font: 400 40px/1.1 'Allura', cursive; margin: 6px 0; }
.alb-bt-poster-in .d { font-size: 11px; letter-spacing: .2em; color: #8f8167; margin: 0; }
.alb-bt-screen iframe { position: absolute; top: 0; left: 0; width: 390px; height: 852px; border: 0; transform: scale(.5949); transform-origin: 0 0; background: transparent; }
/* Tarjetas impresas: cada imagen conserva su proporción; textos en cqw para escalar con la tarjeta */
.alb-bt-prints { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1.08; container-type: inline-size; justify-self: center; }
.alb-bt-card { position: absolute; container-type: inline-size; margin: 0; filter: drop-shadow(0 14px 22px rgba(28, 28, 28, .22)); color: #9e906b; text-align: center; font-family: 'Montserrat', 'Jost', sans-serif; }
.alb-bt-card > img:first-child { display: block; width: 100%; height: auto; }
.alb-bt-card p { position: absolute; left: 0; right: 0; margin: 0; line-height: 1.15; transform: translateY(-50%); white-space: nowrap; }
.alb-bt-std { width: 37%; left: 1%; top: 3%; transform: rotate(-5deg); }
.alb-bt-std .t1 { top: 34.1%; font-size: 5.4cqw; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.alb-bt-std .dw, .alb-bt-std .dm { top: 69.4%; font-size: 4cqw; font-weight: 500; color: #fff; text-transform: uppercase; }
.alb-bt-std .dw { left: auto; right: 62%; } .alb-bt-std .dm { left: 60%; right: auto; }
.alb-bt-std .dd { top: 69.4%; font-size: 7.6cqw; font-weight: 400; color: #fff; }
.alb-bt-std .dy { top: 76.4%; font-size: 3.9cqw; font-weight: 500; color: #fff; }
.alb-bt-qr { width: 29%; left: 34%; top: 38%; transform: rotate(4deg); z-index: 2; }
.alb-bt-qr .t1 { top: 23.4%; font-size: 5.2cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.alb-bt-qr .code { position: absolute; left: 30.6%; top: 50.2%; width: 38.8%; height: auto; }
.alb-bt-qr .t2 { top: 88.2%; font-size: 4.2cqw; font-weight: 500; color: #fff; text-transform: uppercase; white-space: normal; padding: 0 16%; }
.alb-bt-menu { width: 23%; left: 64%; top: 1%; transform: rotate(3deg); }
.alb-bt-menu .t1 { top: 23.4%; font: 400 17cqw/1 'Yellowtail', 'Allura', cursive; color: #1c1c1c; }
.alb-bt-menu i { position: absolute; left: 30%; width: 40%; height: 1%; background: #e5d5b0; }
.alb-bt-menu i:nth-of-type(2n) { left: 23%; width: 54%; }
.alb-bt-menu i:nth-of-type(1) { top: 31.6%; } .alb-bt-menu i:nth-of-type(2) { top: 38.9%; } .alb-bt-menu i:nth-of-type(3) { top: 45.8%; }
.alb-bt-menu i:nth-of-type(4) { top: 53.1%; } .alb-bt-menu i:nth-of-type(5) { top: 59.8%; } .alb-bt-menu i:nth-of-type(6) { top: 67.1%; }
.alb-bt-table { width: 22%; left: 75%; top: 50%; transform: rotate(-4deg); z-index: 3; }
.alb-bt-table .t1 { top: 13.7%; font-size: 8cqw; font-weight: 500; text-transform: uppercase; }
.alb-bt-table .num { top: 30.5%; font: 700 46cqw/1 'Playfair Display', Georgia, serif; }
.alb-bt-sou { width: 23%; left: 5%; top: 66%; transform: rotate(-6deg); z-index: 3; }
.alb-bt-sou .t1 { top: 45.6%; font-size: 8.4cqw; font-weight: 500; text-transform: uppercase; white-space: normal; padding: 0 14%; line-height: 1.12; }
@media (max-width: 1060px) { .alb-bt-stage { grid-template-columns: 1fr; } .alb-bt-prints { margin: 10px auto 0; } }
@media (max-width: 600px) {
  .alb-bt-phones { gap: 10px; } .alb-bt-screen { width: 160px; height: 333px; border-width: 7px; border-radius: 24px; } .alb-bt-screen iframe { transform: scale(.3744); }
  .alb-bt-screen::before { width: 12px; height: 12px; top: 6px; }
}

/* ---------- Comparativa ---------- */
.alb-cmp-lg { height: 1.1em; width: auto; vertical-align: -.25em; }
.alb-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; border: 1px solid var(--alb-line); background: #fff; }
.alb-compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.alb-compare th, .alb-compare td { padding: 13px 12px; text-align: center; border-bottom: 1px solid #eef3f1; }
.alb-compare th { font-weight: 600; font-size: 14px; color: #3d4643; }
.alb-compare td:first-child, .alb-compare th:first-child { text-align: left; }
.alb-compare tr:last-child td { border-bottom: 0; }
.alb-compare .us { background: var(--alb-verde-light); color: var(--alb-verde-oscuro); font-weight: 700; }
.alb-compare .y { color: var(--alb-verde); font-weight: 700; }
.alb-compare .n { color: #c2645a; }
.alb-compare .p { color: #b08a3c; font-weight: 700; }
.alb-legend { text-align: center; font-size: 13.5px; color: var(--alb-muted); margin-top: 14px; }

/* ---------- Preguntas ---------- */
.alb-faq { max-width: 820px; margin: 0 auto; }
.alb-faq details { background: #fff; border: 1px solid var(--alb-line); border-radius: 14px; margin-bottom: 10px; padding: 0 20px; }
.alb-faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 600; position: relative; color: #2d2d2d; }
.alb-faq summary::-webkit-details-marker { display: none; }
.alb-faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 300; color: var(--alb-verde); }
.alb-faq details[open] summary::after { content: '–'; }
.alb-faq details p { color: var(--alb-muted); padding-bottom: 16px; margin: 0; }
.alb-faq .faq-off { display: none; }

/* ---------- CTA final ---------- */
.alb-cta { background: linear-gradient(150deg, var(--alb-verde-2) 0%, var(--alb-verde) 55%, #79b5a3 100%); color: #fff; border-radius: 28px; padding: clamp(36px, 6vw, 64px) clamp(22px, 6vw, 70px); text-align: center; box-shadow: 0 24px 50px rgba(21, 75, 63, .25); }
.alb-cta h2 { color: #fff; font-weight: 500; font-size: clamp(24px, 3.2vw, 36px); }
.alb-cta p { color: #eef7f3; max-width: 720px; margin: 0 auto 26px; }
.alb-cta .alb-btns { justify-content: center; }
.alb-cta .btn-light { color: var(--alb-verde-oscuro); font-weight: 600; }