/* Sitio Tarjeta Convida · identidad «Correo con vida»
   Sello de lacre, estampillas con borde perforado, matasellos y rutas de correo.
   Movimiento de marca: estampar (golpe de sello), trazar (rutas que se dibujan), deslizar del sobre. */

/* Tokens de scrollcraft con la marca */
:root {
	--sc-canvas: #FBF8FC; --sc-surface: #FFFFFF;
	--sc-ink: #231B2B; --sc-ink-soft: #65586F;
	--sc-accent: #7A2E8E; --sc-accent-ink: #FFFFFF;
	--sc-font-display: "Young Serif", Georgia, serif;
	--sc-font-text: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
	interpolate-size: allow-keywords;
}
:root {
	--tinta: #231B2B;
	--gris: #65586F;
	--linea: #E6DDEE;
	--papel: #FBF8FC;
	--blanco: #FFFFFF;
	--orquidea: #7A2E8E;
	--orquidea-oscura: #5E2170;
	--orquidea-suave: #F4E8F8;
	--lavanda: #E9DDF0;
	--coral: #E0654F;
	--coral-suave: #FCE9E4;
	--ciruela: #2C1838;
	--titulos: "Young Serif", Georgia, serif;
	--texto: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
	--radio: 16px;
	--curva: cubic-bezier(.23, 1, .32, 1);
	--rebote: cubic-bezier(.34, 1.4, .64, 1);
	--ancho: 1160px;
	--margen: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #CDB9D6 var(--papel); accent-color: var(--orquidea); caret-color: var(--orquidea); }
html.lenis { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--sc-canvas); color: var(--tinta); font: 17px/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.5rem; }
p { margin: 0; }
a { color: var(--orquidea); text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--orquidea); outline-offset: 3px; border-radius: 6px; }
::selection { background: #E7D3EF; color: var(--tinta); }
.plan-precio, .filtros a span, .flip-cartas { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--tinta); color: var(--blanco); }
.saltar:focus { top: 12px; }
.centro { text-align: center; }
.enlace { color: var(--orquidea); font-weight: 600; text-underline-offset: 4px; }
.icono { width: 1em; height: 1em; flex: none; }

/* ------------------------------------------------ elementos de identidad */

/* Estampilla: borde perforado de verdad (máscara), papel blanco y marco interior */
.estampilla { --diente: 7px; position: relative; display: inline-grid; padding: 10px; background: var(--blanco);
	-webkit-mask: radial-gradient(circle at center, transparent calc(var(--diente) * .42), #000 calc(var(--diente) * .45)) 0 0 / var(--diente) var(--diente) round, linear-gradient(#000, #000) var(--diente) var(--diente) / calc(100% - var(--diente) * 2) calc(100% - var(--diente) * 2) no-repeat;
	mask: radial-gradient(circle at center, transparent calc(var(--diente) * .42), #000 calc(var(--diente) * .45)) 0 0 / var(--diente) var(--diente) round, linear-gradient(#000, #000) var(--diente) var(--diente) / calc(100% - var(--diente) * 2) calc(100% - var(--diente) * 2) no-repeat;
	filter: drop-shadow(0 10px 18px rgb(58 30 74 / .22)); }
.estampilla-dentro { display: grid; place-items: center; align-content: center; gap: 4px; padding: 14px; border: 1.5px solid currentColor; color: var(--orquidea); background: var(--orquidea-suave); text-align: center; }

/* Matasellos */
.matasellos { color: var(--orquidea); overflow: visible; }
.matasellos-aro { transform-origin: 100px 100px; }
.lacre { color: var(--orquidea); filter: drop-shadow(0 6px 10px rgb(58 30 74 / .3)); }

/* Títulos con tinta: las letras suben de su renglón con resorte, la palabra clave recibe un trazo de pincel
   coral que se pinta detrás, la onda de matasellos se dibuja con una pluma en la punta y, en los títulos grandes,
   un sello de lacre cae sobre la palabra clave. */
.titulo { position: relative; }
.titulo .p { display: inline-block; white-space: nowrap; overflow: clip; overflow-clip-margin: .2em; padding: .06em .02em .14em; margin: -.06em -.02em -.14em; vertical-align: bottom; }
.titulo .l { display: inline-block; }
.js-titulos .titulo:not(.estampado) .l { transform: translateY(115%) rotate(10deg); opacity: 0; }
.titulo .clave { position: relative; font-style: normal; color: inherit; transition: color .6s var(--curva) .2s; }
.titulo.pintado .clave { color: var(--orquidea); }
.titulo .pincel { position: absolute; z-index: -1; left: -.12em; right: -.14em; bottom: .02em; height: .5em; overflow: visible; pointer-events: none; }
.titulo .pincel path { fill: var(--coral); opacity: .26; }
.acto-cierre .titulo .pincel path { opacity: .55; }
.acto-cierre .titulo.pintado .clave { color: var(--blanco); }
.titulo .pincel { transform-origin: 0 50%; transform: scaleX(0); }
.titulo.pintado .pincel { transform: scaleX(1); transition: transform .75s cubic-bezier(.65, 0, .25, 1); }
.titulo .onda { display: block; width: min(220px, 60%); height: 14px; margin-top: 10px; color: var(--coral); overflow: visible; }
.titulo .onda path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.titulo .onda circle { fill: var(--coral); opacity: 0; }
.titulo .sello-cae { position: absolute; z-index: 2; width: clamp(38px, 3.6vw, 54px); height: auto; right: -1.05em; top: -.05em; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 8px rgb(58 30 74 / .35)); }
.titulo .sello-onda { position: absolute; z-index: 1; width: clamp(38px, 3.6vw, 54px); aspect-ratio: 1; right: -1.05em; top: -.05em; border-radius: 50%; border: 2px solid var(--coral); opacity: 0; pointer-events: none; }
.centro .titulo .onda, .cierre-texto .titulo .onda { margin-inline: auto; }

/* ------------------------------------------------ botones y cabecera */
.boton { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--orquidea); background: var(--orquidea); color: var(--blanco); font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s, transform .16s var(--curva); }
.boton:active { transform: scale(.97); }
.boton-claro { background: transparent; color: var(--orquidea); }
.boton-chico { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.boton-luz { background: var(--blanco); border-color: var(--blanco); color: var(--ciruela); }

.cabeza { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 12px var(--margen); background: rgb(251 248 252 / .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-family: var(--titulos); font-size: 1.15rem; }
.marca .logo-vivo { width: auto; height: 46px; overflow: visible; }
.pie-logo { display: inline-block; margin-bottom: 14px; padding: 10px 16px; border-radius: 16px; background: var(--papel); }
.pie-logo .logo-vivo { width: auto; height: 58px; overflow: visible; }
.pie-lista { grid-template-columns: 1fr !important; }
.pie-pago { margin-top: 18px; font-size: .9rem; color: rgb(255 255 255 / .62); }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .98rem; }
.menu a[aria-current="page"] { color: var(--orquidea); }

/* ------------------------------------------------ secciones */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(64px, 9vw, 112px) var(--margen) 0; }
.seccion > h2, .seccion > h1 { margin-bottom: 16px; }
.seccion-bajada { max-width: 44rem; color: var(--gris); margin-bottom: 32px; font-size: 1.05rem; }

/* ------------------------------------------------ portada */
.hero { max-width: var(--ancho); margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--margen) 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero h1 { max-width: 24ch; font-size: clamp(2.3rem, 3.6vw, 3.25rem); }
.hero-bajada { margin-top: 22px; max-width: 30rem; font-size: 1.18rem; color: var(--gris); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.rota { display: inline-block; color: var(--orquidea); font-weight: 600; transition: opacity .28s var(--curva), filter .28s var(--curva), translate .28s var(--curva); }
.rota.cambiando { opacity: 0; filter: blur(4px); translate: 0 .3em; }

.escena { position: relative; height: min(760px, calc(100svh - 120px)); min-height: 600px; isolation: isolate; }
.escena .plano { position: absolute; will-change: transform; }
.plano-fondo { left: 50%; top: 20%; width: 125%; translate: -42% 0; opacity: .22; z-index: 0; }
.plano-fondo .matasellos-aro { animation: girar 40s linear infinite; }
.plano-medio { left: 50%; top: 2%; z-index: 1; translate: -50% 0; }
.plano-frente { z-index: 2; pointer-events: none; }
.frente-izq { left: -6%; bottom: 14%; rotate: -9deg; animation: entra-izq .9s var(--rebote) .3s both; }
.frente-der { right: -6%; bottom: 26%; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; animation: entra-der .9s var(--rebote) .45s both; }
.estampilla-img { display: block; height: auto; filter: drop-shadow(0 14px 20px rgb(58 30 74 / .28)); }
.estampilla-hero { width: 170px; }
.sello-img { display: block; height: auto; filter: drop-shadow(0 8px 12px rgb(58 30 74 / .35)); }
.lacre-hero { width: 104px; rotate: 12deg; }
.matasellos-img { height: auto; }
.aviso-hero { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--blanco); font-size: .9rem; box-shadow: 0 18px 36px -18px rgb(58 30 74 / .45), 0 0 0 1px var(--linea); max-width: 15rem; }
.aviso-hero .icono, .aviso-flotante .icono { width: 26px; height: 26px; color: #2E7650; }
@keyframes entra-izq { from { opacity: 0; translate: -40px 30px; } }
@keyframes entra-der { from { opacity: 0; translate: 40px 30px; } }
@keyframes girar { to { transform: rotate(360deg); } }

/* Teléfono */
.telefono { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ficha-telefono { justify-self: center; }
.telefono-pantalla { position: relative; width: 280px; height: 598px; border-radius: 34px; background: var(--blanco); box-shadow: 0 50px 90px -40px rgb(58 30 74 / .55), 0 12px 24px -12px rgb(58 30 74 / .3); }
.telefono-pantalla > :not(.telefono-marco) { clip-path: inset(0 round 34px); }
.telefono-pantalla::after { content: ""; position: absolute; z-index: 5; left: -5.95%; right: -6.26%; top: -2.29%; bottom: -2.5%; background: url(img/correo/celular.webp) center / 100% 100% no-repeat; pointer-events: none; }
.telefono-pantalla iframe { position: absolute; top: 0; left: 0; width: 390px; height: 833px; border: 0; transform: scale(var(--escala-tel, .7179)); transform-origin: 0 0; opacity: 0; transition: opacity .5s var(--curva); clip-path: inset(0 round 47px) !important; }
.telefono.en-vivo iframe { opacity: 1; }
/* Pista «Toque el sello»: anillos que laten sobre el sello del ejemplo y un rótulo coral que lo señala. */
.toque { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .6s var(--curva) .4s; text-decoration: none; --tx: 50%; --ty: 50%; --tt: 44%; --td: 27%; }
.telefono.en-vivo .toque, .toque.es-enlace { opacity: 1; }
.toque.es-enlace { pointer-events: auto; }
.telefono.tocado .toque { opacity: 0; transition: opacity .25s ease-out; }
.toque-anillo { position: absolute; left: var(--tx); top: var(--ty); width: var(--td); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2.5px solid var(--coral); box-shadow: 0 0 0 5px rgb(224 101 79 / .16), inset 0 0 0 5px rgb(224 101 79 / .1); animation: toque-late 2.4s var(--curva) infinite; }
.toque-anillo-2 { animation-delay: 1.2s; }
.toque-rotulo { position: absolute; left: var(--tx); top: var(--tt); translate: -50% calc(-100% - 14px); display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px 10px 13px; border-radius: 999px; background: var(--coral); color: #fff; font: 700 .84rem/1 var(--texto); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 12px 24px -10px rgb(160 50 30 / .75), 0 0 0 4px rgb(255 255 255 / .55); animation: toque-flota 2.4s ease-in-out infinite; }
.toque-rotulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / .35); animation: toque-punto 1.2s ease-in-out infinite; }
.toque-rotulo::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; translate: -50% 0; rotate: 45deg; border-radius: 0 0 3px 0; background: var(--coral); }
.toque.sin-sello .toque-anillo { display: none; }
.toque.sin-sello .toque-rotulo { left: 50%; top: auto; bottom: 22px; translate: -50% 0; }
.toque.sin-sello .toque-rotulo::after { display: none; }
@keyframes toque-late { 0% { scale: .92; opacity: 0; } 18% { opacity: 1; } 100% { scale: 1.8; opacity: 0; } }
@keyframes toque-flota { 50% { transform: translateY(-5px); } }
@keyframes toque-punto { 50% { scale: .6; opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
	.ficha-fondo, .ficha-icono .icono { animation: none; } .toque-anillo, .toque-rotulo, .toque-rotulo::before { animation: none; } .toque-anillo-2 { display: none; } .toque-anillo { opacity: 1; } }
/* El marco del celular sobresale de la pantalla: si una entrada recorta la figura, se deja espacio para el marco y su sombra. */
.telefono[data-sc-reveal] { padding: 20px 64px 112px; margin: -20px -64px -112px; }
.telefono figcaption { font-size: .92rem; color: var(--gris); }
.vista-paleta[hidden] { display: none; }

/* Portada en miniatura (producto: ilustraciones del diseño) */
.portada { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--fondo); container-type: inline-size; }
.portada .capa { position: absolute; height: auto; }
.portada .montanas { left: 0; right: 0; bottom: 0; width: 100%; opacity: .5; }
.portada .arriba { top: 5%; left: 50%; width: 80%; transform: translateX(-50%); }
.portada .izq { left: -10%; bottom: -6%; width: 48%; }
.portada .der { right: -10%; bottom: -6%; width: 46%; }
.portada-texto { position: absolute; left: 10%; right: 10%; top: 36%; display: flex; flex-direction: column; align-items: center; gap: 2cqi; text-align: center; color: var(--tinta); }
.portada-texto small { font-family: var(--letra); font-style: italic; font-size: 5cqi; opacity: .8; }
.portada-texto strong { font-family: var(--letra); font-weight: 400; font-size: 11cqi; line-height: 1.05; text-wrap: balance; }
.portada-telefono { aspect-ratio: auto; height: 100%; }
/* Portadas de la colección Editorial: solo tipografía, una composición por diseño */
.portada-editorial { background: var(--papel); color: var(--tinta); font-family: var(--letra); }
.portada-editorial .pe-caja { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqi; padding: 0 9cqi; }
.portada-editorial small { font: 600 3.2cqi/1.2 "Hanken Grotesk", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--acento); }
.portada-editorial strong { font-weight: 400; font-size: 15cqi; line-height: .9; letter-spacing: -0.02em; display: flex; flex-direction: column; }
.portada-editorial strong em { font-size: .5em; color: var(--acento); line-height: 1.3; }
.portada-editorial .pe-fecha { font: 500 3cqi/1 "Hanken Grotesk", sans-serif; letter-spacing: .26em; text-transform: uppercase; opacity: .75; }
.pe-cabeza { position: absolute; top: 7%; left: 9cqi; right: 9cqi; padding-bottom: 2cqi; border-bottom: 1px solid currentColor; font: 600 2.8cqi/1 "Hanken Grotesk", sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.pe-portada strong { font-size: 19cqi; line-height: .84; }
.pe-monograma .pe-caja { align-items: center; text-align: center; padding-top: 20cqi; }
.pe-monograma strong { font-size: 9cqi; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; align-items: center; }
.pe-monograma strong em { text-transform: none; letter-spacing: 0; }
.pe-mono { position: absolute; top: 14%; left: 50%; translate: -50% 0; width: 26cqi; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid color-mix(in oklab, var(--tinta) 45%, transparent); border-radius: 50%; font-size: 7cqi; outline: 1px solid color-mix(in oklab, var(--tinta) 20%, transparent); outline-offset: 2cqi; }
.pe-bloque .pe-caja { justify-content: flex-start; padding: 0; }
.pe-bloque small, .pe-bloque strong { background: var(--hoja); color: var(--papel); padding: 0 9cqi; }
.pe-bloque small { padding-top: 22cqi; color: color-mix(in oklab, var(--papel) 70%, var(--hoja)); }
.pe-bloque strong { font-weight: 700; font-size: 12cqi; letter-spacing: -0.045em; padding-bottom: 9cqi; margin-top: -2.4cqi; padding-top: 2.4cqi; }
.pe-bloque .pe-fecha { padding: 2cqi 9cqi; border-bottom: 2px solid var(--tinta); margin: 0 9cqi; padding-inline: 0; }
.pe-bloque .pe-caja::after { content: ""; position: absolute; left: 9cqi; right: 9cqi; top: 64%; height: 14cqi; border-top: 1px solid color-mix(in oklab, var(--tinta) 30%, transparent); border-bottom: 2px solid var(--tinta); background: repeating-linear-gradient(to right, transparent 0 calc(25% - 1px), color-mix(in oklab, var(--tinta) 25%, transparent) calc(25% - 1px) 25%); }
.pe-arco .pe-caja { align-items: center; text-align: center; }
.pe-arco .pe-caja::before { content: ""; position: absolute; left: 18%; right: 18%; top: 16%; bottom: 14%; border-radius: 999px 999px 2px 2px; background: var(--hoja); }
.pe-arco small { position: absolute; top: 8%; }
.pe-arco strong { position: relative; color: var(--papel); font-size: 11cqi; align-items: center; }
.pe-arco .pe-fecha { position: absolute; bottom: 20%; color: var(--papel); }
.pe-titular .pe-cabeza { font: 900 6.6cqi/1 var(--letra); letter-spacing: -0.02em; text-transform: none; text-align: center; border-top: 3px double currentColor; padding-top: 2cqi; }
.pe-titular .pe-caja { align-items: center; text-align: center; }
.pe-titular strong { font-weight: 900; font-size: 17cqi; letter-spacing: -0.035em; align-items: center; }
.pe-miel { background: radial-gradient(120% 80% at 70% 0%, #FFFBF0, var(--papel) 50%, var(--fondo)); overflow: hidden; }
.pe-miel img { position: absolute; pointer-events: none; max-width: none; }
.pe-miel-prado { left: -40%; bottom: 8%; width: 180%; opacity: .8; }
.pe-miel-izq { left: -30%; bottom: -3%; height: 62%; }
.pe-miel-der { right: -32%; bottom: -3%; height: 66%; }
.pe-miel .pe-caja { align-items: center; text-align: center; justify-content: flex-start; padding-top: 22cqi; }
.pe-miel strong { font-weight: 300; font-size: 14cqi; align-items: center; }
.pe-miel strong em { font-style: italic; }
.pe-septiembre { background: linear-gradient(180deg, #F6E6C6 0%, #EDCF98 58%, #D6AD63 100%); overflow: hidden; }
.pe-septiembre img { position: absolute; pointer-events: none; max-width: none; }
.pe-septiembre .pe-sol { position: absolute; width: 90%; aspect-ratio: 1; right: -18%; top: 4%; border-radius: 50%; background: radial-gradient(closest-side, #FFF4D6 0 12%, rgb(255 226 160 / .7) 26%, rgb(244 190 100 / .25) 55%, transparent 72%); }
.pe-sep-horizonte { left: -30%; bottom: 10%; width: 170%; opacity: .8; }
.pe-sep-olivar { left: -40%; bottom: -2%; width: 190%; }
.pe-sep-rama { right: -34%; top: 6%; width: 78%; rotate: -14deg; }
.pe-septiembre .pe-caja { justify-content: flex-start; padding-top: 24cqi; }
.pe-septiembre strong { font-weight: 500; font-size: 14cqi; color: #393329; }
.pe-septiembre strong em { font-style: italic; font-weight: 400; color: #8E6A2C; }
.pe-septiembre small, .pe-septiembre .pe-fecha { color: #393329; }
.pe-rosa { background: radial-gradient(90% 70% at 100% 40%, rgb(104 40 61 / .7), transparent 70%), linear-gradient(120deg, #1C121C, #241824 55%, #2C1828); overflow: hidden; }
.pe-rosa .pe-luz { position: absolute; width: 80%; aspect-ratio: 1; right: -30%; top: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgb(197 139 153 / .25), transparent 70%); }
.pe-rosa-flor { position: absolute; right: -30%; top: 26%; width: 92%; max-width: none; pointer-events: none; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .5)); }
.pe-rosa .pe-caja { justify-content: flex-start; padding-top: 22cqi; }
.pe-rosa strong { font-weight: 400; font-size: 14cqi; color: #F5EEE9; letter-spacing: -0.03em; }
.pe-rosa strong em { font-style: italic; color: #C58B99; }
.pe-rosa small, .pe-rosa .pe-fecha { color: #C58B99; }
/* Nube de Montaña: bruma verde ceniza con tres cordilleras al fondo */
.pe-nube { background-color: #E9EFEB; background-image: var(--pe-pintura, none), radial-gradient(110% 70% at 50% 0%, #FCFDFB 0%, rgb(252 253 251 / 0) 62%), linear-gradient(180deg, #F3F6F2 0%, #E2EAE5 48%, #C5D5CC 100%); background-size: cover; background-position: 50% 62%; overflow: hidden; }
.pe-nube::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 46% at 50% 50%, rgb(248 251 249 / .82), rgb(248 251 249 / .35) 60%, transparent 100%); }
.pe-nube::after { content: ""; position: absolute; left: -20%; top: 64%; width: 120%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .75), transparent 80%); filter: blur(2cqi); }
.pe-nube .pe-caja { z-index: 2; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 8cqi; }
.pe-nube strong { font-family: "Gilda Display", Georgia, serif; font-weight: 400; font-size: 12cqi; line-height: 1.05; color: #1E2B27; letter-spacing: -0.01em; }
.pe-nube strong em { display: block; font-family: "Corinthia", cursive; font-style: normal; font-weight: 400; color: #9A4E86; font-size: 1.4em; line-height: .6; margin: .08em 0 .02em; }
.pe-nube small, .pe-nube .pe-fecha { color: #9A4E86; }
.pe-marea { background-color: #F1E6D4; background-image: var(--pe-pintura, none), radial-gradient(90% 45% at 50% 105%, rgb(94 149 146 / .3), transparent 72%), linear-gradient(180deg, #FBF4E8 0%, #F2E4CD 50%, #E5CFB0 100%); background-size: cover; background-position: 50% 60%; overflow: hidden; }
.pe-marea::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 46% at 50% 46%, rgb(252 247 239 / .85), rgb(252 247 239 / .35) 60%, transparent 100%); }
.pe-md-ola { position: absolute; left: -10%; right: -10%; bottom: 10%; height: 9%; background: radial-gradient(60% 100% at 25% 100%, transparent 62%, rgb(255 255 255 / .85) 64%, transparent 70%), radial-gradient(60% 100% at 75% 0%, transparent 62%, rgb(255 255 255 / .6) 64%, transparent 70%); }
.pe-marea .pe-caja { z-index: 2; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 8cqi; }
.pe-marea strong { font-family: "Italiana", Georgia, serif; font-weight: 400; font-size: 13cqi; line-height: 1; color: #22403F; letter-spacing: .01em; }
.pe-marea strong em { display: block; font-family: "Allura", cursive; font-style: normal; font-weight: 400; color: #BC6446; font-size: .8em; line-height: .9; margin: .04em 0; }
.pe-marea small, .pe-marea .pe-fecha { color: #BC6446; }
.pe-cafe { background-color: #F4EBDD; background-image: var(--pe-pintura, none), radial-gradient(70% 50% at 75% 10%, rgb(255 236 200 / .8), transparent 70%), linear-gradient(180deg, #FAF4EA 0%, #F2E6D3 60%, #E6D6BC 100%); background-size: cover; background-position: 50% 60%; overflow: hidden; }
.pe-cafe::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 44% at 50% 42%, rgb(250 244 234 / .88), rgb(250 244 234 / .35) 62%, transparent 100%); }
.pe-cf-banda { position: absolute; left: -10%; right: -10%; bottom: -4%; height: 22%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: #22362A; box-shadow: 0 -8px 0 #A9262F, 0 -16px 0 rgb(126 154 85 / .9); }
.pe-cafe .pe-caja { z-index: 2; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 8cqi 8cqi 22cqi; }
.pe-cafe strong { font-family: "Prata", Georgia, serif; font-weight: 400; font-size: 12cqi; line-height: 1.04; color: #2B1E17; }
.pe-cafe strong em { display: block; font-family: "Mrs Saint Delafield", cursive; font-style: normal; font-weight: 400; color: #A9262F; font-size: 1.2em; line-height: .7; margin: .06em 0 0; }
.pe-cafe small, .pe-cafe .pe-fecha { color: #A9262F; }
/* Palacio de Cristal: dos planos de vidrio sobre marfil y azul hielo */
.pe-palacio { background: linear-gradient(172deg, #FAFAF6, #E3ECEF 55%, #D3E0E6); overflow: hidden; }
.pe-palacio img { position: absolute; pointer-events: none; max-width: none; }
.pe-jardin { position: absolute; inset: 0; filter: blur(1.8px); opacity: .78; }
.pe-pal-hoja-1 { left: -18%; top: 6%; width: 70%; rotate: -16deg; }
.pe-pal-hoja-2 { right: -22%; bottom: -6%; width: 66%; rotate: 24deg; }
.pe-pal-hoja-3 { right: -6%; top: -8%; width: 44%; rotate: 160deg; }
.pe-vidrio { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .55) 0 1px, rgb(255 255 255 / .1) 2px 1.6cqi, rgb(48 58 64 / .03) 2.4cqi, rgb(48 58 64 / .08) 3.1cqi 3.2cqi), linear-gradient(170deg, rgb(250 250 246 / .35), rgb(220 232 236 / .25)); box-shadow: inset 0 0 0 1.1cqi #303A40, inset 0 0 0 1.4cqi rgb(255 255 255 / .5); }
.pe-vidrio-i { left: 0; } .pe-vidrio-d { right: 0; }
.pe-vidrio::after { content: ""; position: absolute; top: 18%; bottom: 18%; width: 1.2cqi; border-radius: 1cqi; background: linear-gradient(90deg, #8E9AA2, #F3F6F7 40%, #B9C2C9 60%, #6E7A82); }
.pe-vidrio-i::after { right: 6%; } .pe-vidrio-d::after { left: 6%; }
.pe-pal-gota { width: 4.2cqi; opacity: .9; }
.pe-pal-gota-1 { left: 16%; top: 18%; } .pe-pal-gota-2 { right: 22%; top: 70%; width: 3cqi; } .pe-pal-gota-3 { left: 30%; bottom: 10%; width: 5cqi; }
.pe-palacio .pe-caja { align-items: center; justify-content: center; padding: 0 9cqi; }
.pe-placa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.2cqi; text-align: center; padding: 7cqi 7cqi 6.4cqi; background: #F7F7F2; box-shadow: 0 0 0 .3cqi #303A40, 0 0 0 1.6cqi #F7F7F2, 0 0 0 1.9cqi rgb(48 58 64 / .35), 0 6cqi 10cqi -4cqi rgb(35 42 47 / .45); }
.pe-palacio strong { font-weight: 400; font-size: 14cqi; color: #303A40; align-items: center; line-height: .92; }
.pe-palacio strong em { font-style: italic; color: #4F6772; font-size: .48em; }
.pe-palacio small, .pe-palacio .pe-fecha { color: #4F6772; }
.pe-palacio small { letter-spacing: .34em; font-size: 2.6cqi; }
.pe-palacio .pe-fecha { font-size: 2.4cqi; }
.pe-aurora { background: radial-gradient(70% 60% at 18% 12%, #EACFD0, transparent 70%), radial-gradient(60% 60% at 92% 88%, #BECBD7, transparent 70%), linear-gradient(170deg, #E4E0EE, #FAF8F4); overflow: hidden; }
.pe-aurora img { position: absolute; pointer-events: none; max-width: none; }
.pe-au-perla { right: 8%; top: 9%; width: 22%; filter: drop-shadow(0 3cqi 4cqi rgb(120 106 150 / .3)); }
.pe-au-destello { width: 9cqi; }
.pe-au-destello-1 { left: 12%; top: 16%; } .pe-au-destello-2 { right: 30%; top: 30%; width: 6cqi; }
.pe-au-hilo { left: -8%; bottom: 17%; width: 116%; rotate: -4deg; opacity: .95; }
.pe-au-concha { filter: drop-shadow(0 2cqi 3cqi rgb(120 106 150 / .25)); }
.pe-au-concha-1 { left: -6%; bottom: -3%; width: 36%; rotate: -10deg; }
.pe-au-concha-2 { right: -2%; bottom: -6%; width: 18%; rotate: 14deg; }
.pe-aurora .pe-caja { align-items: center; text-align: center; justify-content: flex-start; padding-top: 30cqi; }
.pe-aurora strong { font-weight: 300; font-size: 15cqi; color: #3E3A4A; align-items: center; }
.pe-aurora strong em { font-style: italic; color: #8C7AA6; }
.pe-aurora small, .pe-aurora .pe-fecha { color: #6E6880; }
/* Portada de la colección Línea Viva: fondo con grano y la línea en blanco */
.portada-trazo { background: var(--hoja) center / cover no-repeat; color: #fff; }
.portada-trazo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .32), transparent 55%); }
.portada-trazo .portada-linea { position: absolute; left: 6%; right: 6%; top: 18%; width: 88%; height: auto; overflow: visible; }
.portada-trazo .portada-linea path { fill: none; stroke: #fff; stroke-width: 2.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.portada-trazo .portada-texto { top: auto; bottom: 10%; z-index: 1; color: #fff; }
.portada-trazo .portada-texto small, .portada-trazo .portada-texto strong { font-family: var(--letra); }
.portada-telefono .arriba { top: 4%; width: 92%; }
.portada-telefono .portada-texto { top: 26%; }
.portada-telefono .izq { width: 62%; }
.portada-telefono .der { width: 60%; }

/* ------------------------------------------------ el sobre (pico) */
.acto-sobre { --sc-p: 0; }
.sobre-escena { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 5vw, 72px); max-width: var(--ancho); margin: 0 auto; padding: 72px var(--margen) 0; }
.sobre-copia { position: relative; min-height: 16rem; }
.sobre-linea, .sobre-final { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.sobre-linea { font-family: var(--titulos); font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.12; text-wrap: balance; }
.sobre-final h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.sobre-final p { margin: 14px 0 0; color: var(--gris); font-size: 1.12rem; max-width: 26rem; }
.sobre-final .sobre-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.sobre-acciones .boton .icono { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }
.sobre-marco { height: 100%; display: grid; place-items: center; }
.sobre {
	--e: clamp(0, calc(var(--sc-p) * 8), 1);
	--s: clamp(0, calc((var(--sc-p) - .1) * 7), 1);
	--f: clamp(0, calc((var(--sc-p) - .22) * 5.5), 1);
	--c: clamp(0, calc((var(--sc-p) - .38) * 4.5), 1);
	--z: clamp(0, calc((var(--sc-p) - .6) * 5.5), 1);
	position: relative; width: min(360px, 66vw); aspect-ratio: 4 / 5;
	transform: perspective(1700px) translateY(calc((1 - var(--e)) * 6vh + var(--c) * 24%)) rotateX(calc(14deg - var(--e) * 10deg)) rotateZ(calc(-5deg + var(--e) * 3deg + var(--c) * 2deg - var(--z) * 0deg));
}
.sobre > * { position: absolute; }
.sobre-espalda, .sobre-solapa, .sobre-bolsillo, .sobre-sello { pointer-events: none; }
/* Orden fijo de capas: espalda, solapa abierta, tarjeta, bolsillo, solapa cerrada, sello. */
.sobre-espalda { z-index: 1; inset: 0; border-radius: 10px; background: linear-gradient(rgb(44 24 56 / .18), rgb(44 24 56 / 0) 40%), url(img/correo/forro.webp) center / cover; box-shadow: 0 50px 90px -40px rgb(58 30 74 / .55), 0 14px 28px -16px rgb(58 30 74 / .35); opacity: calc(1 - var(--z)); }
.sobre-solapa { z-index: 5; left: 0; right: 0; top: 0; height: 57%; background: linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 60%, rgb(58 30 74 / .1)), url(img/correo/papel.webp) center / 220px, #DCC8E7; background-blend-mode: normal, multiply, normal; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transform: perspective(900px) rotateX(calc(var(--f) * 178deg)); opacity: calc(1 - var(--z)); }
.sobre.abierta .sobre-solapa { z-index: 2; background: linear-gradient(0deg, rgb(44 24 56 / .3), rgb(44 24 56 / 0)), url(img/correo/forro.webp) center / 340px; background-blend-mode: normal, normal; }
.sobre-tarjeta { z-index: 3; left: 7%; right: 7%; top: 5%; transform-origin: 50% 30%; transform: translate3d(0, calc(var(--c) * -64% + var(--z) * 26%), 0) scale(calc(1 + var(--z) * .3)); }
.sobre-tarjeta-dentro { position: relative; transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .5s var(--curva); }
.sobre-tarjeta .portada { border-radius: 6px; box-shadow: 0 16px 34px -14px rgb(35 27 43 / .45); }
.sobre-bolsillo { z-index: 4; inset: 0; border-radius: 10px; background: linear-gradient(180deg, rgb(255 255 255 / .4), rgb(255 255 255 / 0) 55%, rgb(58 30 74 / .08)), url(img/correo/papel.webp) center / 220px, #E6D6EE; background-blend-mode: normal, multiply, normal; clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); opacity: calc(1 - var(--z)); filter: drop-shadow(0 -2px 3px rgb(58 30 74 / .12)); }
.sobre-bolsillo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49.6%, rgb(58 30 74 / .1) 50%, transparent 50.6%), linear-gradient(to bottom left, transparent 49.6%, rgb(58 30 74 / .1) 50%, transparent 50.6%); }
.sobre-sello { z-index: 6; left: 50%; top: 57%; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.sobre-sello .mitad { position: absolute; inset: 0; }
.sobre-sello img { display: block; width: 100%; height: auto; }
/* El lacre roto es más ancho que alto: las mitades comparten un lienzo de 1,4 : 1 y se centran sobre el sello entero, a su misma altura. */
.sobre-sello .mitad img { position: absolute; left: 50%; top: 50%; width: 138%; max-width: none; translate: -50% -50%; scale: .84 1; }
.sobre-sello .mitad, .sobre-sello .sello-entero { display: grid; place-items: center; filter: drop-shadow(0 6px 8px rgb(44 24 56 / .35)); }
.sello-entero { position: absolute; inset: 0; opacity: clamp(0, calc(1 - var(--s) * 14), 1); }

/* Puntos para explorar la invitación cuando ya salió del sobre. */
.puntos { position: absolute; inset: 0; pointer-events: none; }
.punto { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 3px solid var(--blanco); border-radius: 50%; background: var(--coral); box-shadow: 0 6px 16px -4px rgb(58 30 74 / .5); cursor: pointer; pointer-events: auto; scale: 0; transition: scale .5s var(--curva), background .3s, rotate .35s var(--curva); }
.punto::before, .punto::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2.5px; margin: -1.25px 0 0 -5.5px; border-radius: 2px; background: var(--blanco); }
.punto::after { rotate: 90deg; }
.punto-aro { position: absolute; inset: -6px; border: 2px solid var(--coral); border-radius: 50%; animation: latido 2s var(--curva) infinite; animation-delay: calc(var(--n) * .3s); }
@keyframes latido { 0% { scale: .7; opacity: .9; } 100% { scale: 1.7; opacity: 0; } }
.sobre.lista .punto { scale: 1; transition-delay: calc(var(--n) * 110ms), 0s, 0s; }
.punto:hover, .punto[aria-expanded="true"] { background: var(--ciruela); }
.punto[aria-expanded="true"] { rotate: 45deg; }
.punto[aria-expanded="true"] .punto-aro { animation: none; opacity: 0; }
.punto:focus-visible { outline: 3px solid var(--orquidea); outline-offset: 4px; }
.punto-nota { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: flex; gap: 10px; align-items: flex-start; width: clamp(176px, 72%, 220px); padding: 12px 14px; border-radius: 14px; background: var(--blanco); color: var(--tinta); font-size: .82rem; line-height: 1.35; box-shadow: 0 18px 40px -16px rgb(35 27 43 / .5); pointer-events: none; opacity: 0; visibility: hidden; translate: -50% 24px; scale: .92; transition: opacity .25s, scale .35s var(--curva), visibility 0s .35s; }
.punto-nota.a-izq { translate: calc(-100% + 26px) 24px; }
.punto-nota.a-der { translate: -26px 24px; }
.punto-nota.arriba { translate: -50% calc(-100% - 24px); }
.punto-nota.abierta { opacity: 1; visibility: visible; scale: 1; transition: opacity .25s, scale .35s var(--curva), visibility 0s; }
.punto-nota .icono { flex: none; width: 26px; height: 26px; color: var(--orquidea); }
.punto-nota strong { display: block; margin-bottom: 2px; font-size: .9rem; }
.mitad-izq { transform: translate(calc(var(--s) * -46%), calc(var(--s) * 40%)) rotate(calc(var(--s) * -28deg)); opacity: calc(min(1, var(--s) * 14) * (1 - var(--s))); }
.mitad-der { transform: translate(calc(var(--s) * 46%), calc(var(--s) * 48%)) rotate(calc(var(--s) * 24deg)); opacity: calc(min(1, var(--s) * 14) * (1 - var(--s))); }

/* ------------------------------------------------ diseños en acordeón */
.acto-disenos { --sc-p: 0; }
.disenos-escena { display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: var(--ancho); margin: 0 auto; padding: 84px var(--margen) 24px; }
.disenos-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acordeon { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; height: min(62vh, 560px); }
.pliego { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--fondo); transition: flex-grow .7s var(--curva); box-shadow: 0 30px 50px -36px rgb(58 30 74 / .55); }
.pliego.abierto { flex-grow: 5; }
.pliego a { position: absolute; inset: 0; display: block; color: var(--tinta); text-decoration: none; }
.portada-pliego { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.portada-pliego .arriba { width: min(92%, 420px); }
.portada-pliego .izq, .portada-pliego .der { width: min(40%, 220px); }
.portada-pliego .portada-texto strong { font-size: clamp(1.6rem, 9cqi, 3.4rem); }
.portada-pliego .portada-texto small { font-size: clamp(.8rem, 3cqi, 1.1rem); }
.pliego-lomo { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font-weight: 700; font-size: .9rem; padding: 14px 8px; border-radius: 999px; background: rgb(255 255 255 / .85); transition: opacity .3s var(--curva); }
.pliego.abierto .pliego-lomo { opacity: 0; }
.pliego:not(.abierto) .portada-texto { opacity: 0; transition: opacity .2s; }
.pliego-info { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; background: rgb(255 255 255 / .9); backdrop-filter: blur(6px); opacity: 0; translate: 0 14px; transition: opacity .4s var(--curva) .2s, translate .5s var(--curva) .2s; }
.pliego.abierto .pliego-info { opacity: 1; translate: 0 0; }
.pliego-info strong { font-family: var(--titulos); font-weight: 400; font-size: 1.3rem; }
.pliego-info span { color: var(--gris); }
.pliego-info em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--orquidea); }

/* ------------------------------------------------ celebraciones en riel */
.acto-celebra { --sc-p: 0; }
.celebra-escena { display: flex; flex-direction: column; justify-content: center; }
.celebra-titulo { position: absolute; top: 92px; left: var(--margen); z-index: 2; }
.riel { list-style: none; margin: 56px 0 0; padding: 0 var(--margen); gap: clamp(16px, 3vw, 40px); align-items: center; }
.panel-celebra { flex: 0 0 min(76vw, 600px); }
.panel-celebra a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: min(58vh, 500px); padding: clamp(24px, 3vw, 40px); border-radius: 26px; overflow: hidden; color: var(--tinta); text-decoration: none; background: var(--tono, var(--orquidea-suave)) center / cover no-repeat; }
.panel-celebra:nth-child(7n+2) a { --tono: #F7E3DE; }
.panel-celebra:nth-child(7n+3) a { --tono: #E6E5F3; }
.panel-celebra:nth-child(7n+4) a { --tono: #FBEBD8; }
.panel-celebra:nth-child(7n+5) a { --tono: #E1ECF0; }
.panel-celebra:nth-child(7n+6) a { --tono: #EEE6F3; }
.panel-celebra:nth-child(7n+7) a { --tono: #E7E3DE; }
.panel-celebra.hay a { --tono: var(--orquidea); color: var(--blanco); }
.panel-celebra.con-fondo a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(35 27 43 / .62), transparent 60%); }
.panel-celebra.con-fondo a { color: var(--blanco); isolation: isolate; }
/* Fondo con vida: va más lento que el riel (parallax), respira y se acerca al pasar el mouse. */
.panel-fondo { position: absolute; inset: -6% -14%; z-index: -1; background: center / cover no-repeat; transform: translate3d(calc((var(--sc-p, .5) - .5) * 22%), 0, 0); will-change: transform; }
.panel-fondo { animation: respirar 10s ease-in-out infinite alternate; transition: filter .6s var(--curva); }
@keyframes respirar { from { scale: 1.02; rotate: 0deg; } to { scale: 1.08; rotate: .8deg; } }
.panel-celebra.con-fondo a:hover .panel-fondo { filter: saturate(1.15) brightness(1.06); }
.panel-celebra.con-fondo a::before { z-index: 0; }
.panel-celebra.con-fondo .estado, .panel-celebra.con-fondo strong, .panel-celebra.con-fondo .frase, .panel-celebra.con-fondo .panel-linea { z-index: 1; }
.panel-icono { position: absolute; right: clamp(20px, 3vw, 40px); top: 50%; translate: 0 -62%; color: var(--orquidea); opacity: .9; transform: translateX(calc(var(--sc-p) * -60px)) rotate(calc(-8deg + var(--sc-p) * 16deg)); }
.panel-icono .icono { width: clamp(120px, 18vw, 220px); height: auto; aspect-ratio: 1; }
.panel-celebra.hay .panel-icono { color: var(--blanco); opacity: .85; }
/* Línea continua que se dibuja de izquierda a derecha al entrar el panel. */
.panel-linea { position: absolute; left: 6%; top: 20%; width: 88%; height: auto; overflow: visible; color: var(--orquidea); pointer-events: none; }
.panel-celebra.hay .panel-linea, .panel-celebra.con-fondo .panel-linea { color: var(--blanco); }
.linea path { fill: none; stroke: currentColor; stroke-width: 3.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.linea-pluma { fill: var(--coral); opacity: 0; transition: opacity .4s var(--curva), r .5s var(--curva); }
.linea.dibujando .linea-pluma { opacity: 1; }
.linea.dibujada path { stroke-dashoffset: 0; }
.linea.dibujada .linea-pluma { opacity: 1; r: 26; }
.panel-celebra strong { position: relative; z-index: 1; font-family: var(--titulos); font-weight: 400; font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -.01em; transition: translate .35s var(--curva); }
.panel-celebra .frase { position: relative; z-index: 1; margin-top: 12px; font-size: 1.12rem; max-width: 22rem; opacity: .85; }
.panel-celebra .estado { position: absolute; z-index: 1; top: clamp(20px, 2.6vw, 32px); left: clamp(24px, 3vw, 40px); padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / .7); color: var(--tinta); font-size: .88rem; font-weight: 600; }
.panel-celebra.hay .estado { background: var(--blanco); color: var(--orquidea); }

/* ------------------------------------------------ cómo funciona: ruta de correo */
.acto-pasos { --sc-p: 0; background:
	repeating-linear-gradient(135deg, transparent 0 22px, rgb(122 46 142 / .045) 22px 23px),
	repeating-linear-gradient(45deg, transparent 0 22px, rgb(224 101 79 / .04) 22px 23px),
	rgb(244 236 247 / .18); }
.pasos-escena { --r: clamp(0, calc(var(--sc-p) * 1.18), 1); display: flex; flex-direction: column; justify-content: center; max-width: var(--ancho); margin: 0 auto; padding: 84px var(--margen) 0; }
.ruta { position: relative; height: 170px; margin: 30px 0 10px; }
.ruta-trazo { width: 100%; height: 100%; overflow: visible; }
.ruta-guia { fill: none; stroke: rgb(122 46 142 / .22); stroke-width: 2.5; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ruta-hecha { fill: none; stroke: var(--orquidea); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--r)); }
.ruta-sobre { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--coral); color: var(--blanco); box-shadow: 0 10px 20px -8px rgb(224 101 79 / .7); }
.ruta-sobre .icono { width: 28px; height: 28px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pasos li { display: flex; flex-direction: column; gap: 6px; }
.estampilla-paso { --diente: 6px; justify-self: start; width: 104px; margin-bottom: 12px; }
.estampilla-paso .estampilla-dentro { aspect-ratio: 5 / 6; }
.estampilla-paso .icono { width: 44px; height: 44px; }
.matasello-paso { position: absolute; right: -16px; top: -14px; width: 54px; height: 54px; transform: rotate(-14deg); }
.matasello-paso img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgb(58 30 74 / .3)); }
.pasos strong { font-size: 1.15rem; }
.pasos li > span:last-child { color: var(--gris); }

/* ------------------------------------------------ el panel */
.acto-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.panel-texto h2 { max-width: 14ch; }
.panel-texto p { margin: 18px 0 26px; color: var(--gris); max-width: 30rem; font-size: 1.08rem; }
.panel-vista { position: relative; display: grid; place-items: center; padding: 20px 0; }
.panel-matasellos { position: absolute; width: 130%; left: -10%; top: 12%; opacity: .12; z-index: -1; }
.panel-matasellos .matasellos-aro { animation: girar 50s linear infinite reverse; }
.panel-espera { background: var(--papel); }
.aviso-flotante { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--blanco); font-size: .92rem; box-shadow: 0 18px 36px -18px rgb(58 30 74 / .45), 0 0 0 1px var(--linea); max-width: 16rem; }
.aviso-flotante strong { color: var(--orquidea); }
.aviso-flotante.a2 .icono { color: var(--coral); }
.aviso-flotante.a3 .icono { color: var(--orquidea); }
.aviso-flotante.a1 { top: 16%; left: 0; }
.aviso-flotante.a2 { top: 44%; right: 0; }
.aviso-flotante.a3 { top: 72%; left: 4%; }

/* ------------------------------------------------ lo que trae: mosaico */
.trae-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: 36px; }
.trae-cabeza p { color: var(--gris); max-width: 32rem; }
.mosaico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pieza { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radio); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
.pieza-icono { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 14px; background: var(--orquidea-suave); color: var(--orquidea); }
.pieza-icono .icono { width: 26px; height: 26px; transition: transform .45s var(--rebote); }
.pieza strong { font-size: 1.02rem; }
.pieza-texto { color: var(--gris); font-size: .92rem; line-height: 1.45; }
.pieza-pronto { background: transparent; box-shadow: 0 0 0 1.5px var(--linea) inset; }
.pieza-pronto .pieza-icono { background: var(--coral-suave); color: var(--coral); }
.pieza-marca { position: absolute; top: 16px; right: 16px; padding: 3px 10px; border-radius: 999px; background: var(--coral-suave); color: #B5412C; font-size: .74rem; font-weight: 700; font-style: normal; }
.pieza-demo { grid-column: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; padding: 24px; background: var(--ciruela); color: var(--blanco); box-shadow: none; overflow: hidden; }
.pieza-demo .pieza-icono { grid-row: 1 / 3; background: rgb(255 255 255 / .12); color: var(--blanco); }
.pieza-demo .pieza-texto { color: rgb(255 255 255 / .75); }
.pieza-demo .mini { grid-column: 1 / -1; margin-top: 18px; }
.demo-musica, .demo-mapa { background: var(--orquidea); }
/* Demostración: cuenta regresiva */
/* Reloj de paletas: cada dígito es una carta partida en dos que voltea al cambiar */
.flip-reloj { --carta-w: clamp(24px, 3vw, 38px); --carta-h: calc(var(--carta-w) * 1.42); display: flex; align-items: flex-start; gap: clamp(6px, 1vw, 12px); }
.flip-grupo { display: grid; justify-items: center; gap: 6px; }
.flip-grupo small { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .62); }
.flip-cartas { display: flex; gap: 3px; font: 600 calc(var(--carta-h) * .66)/1 var(--texto); font-variant-numeric: tabular-nums; color: var(--ciruela); }
.flip-sep { width: 4px; height: var(--carta-h); display: grid; align-content: center; gap: 9px; font-style: normal; }
.flip-sep::before, .flip-sep::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / .55); }
.carta { position: relative; width: var(--carta-w); height: var(--carta-h); perspective: 300px; border-radius: 7px; box-shadow: 0 8px 14px -8px rgb(0 0 0 / .55); }
.carta > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; display: block; background: #FDFBFE; text-align: center; backface-visibility: hidden; }
.carta > span > b { display: block; height: var(--carta-h); line-height: var(--carta-h); font-weight: 600; }
.carta .arriba, .carta .hoja-arriba { top: 0; border-radius: 7px 7px 0 0; background: linear-gradient(#FFFFFF, #F3EEF6); }
.carta .abajo, .carta .hoja-abajo { bottom: 0; border-radius: 0 0 7px 7px; background: linear-gradient(#EFE8F3, #FBF8FC); }
.carta .abajo > b, .carta .hoja-abajo > b { transform: translateY(-50%); }
.carta::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(44 24 56 / .28); z-index: 4; }
.carta .hoja-arriba { z-index: 3; transform-origin: 50% 100%; }
.carta .hoja-abajo { z-index: 2; transform-origin: 50% 0; transform: rotateX(90deg); }
.carta.voltea .hoja-arriba { animation: hoja-cae 300ms cubic-bezier(.55,0,.75,.4) both; }
.carta.voltea .hoja-abajo { animation: hoja-llega 380ms cubic-bezier(.2,.9,.3,1.25) 260ms both; }
@keyframes hoja-cae { to { transform: rotateX(-90deg); filter: brightness(.75); } }
@keyframes hoja-llega { from { transform: rotateX(90deg); filter: brightness(1.15); } to { transform: rotateX(0); } }
/* Demostración: música */
/* Música: un tocadiscos. El brazo baja, el disco acelera, la onda respira y la barra avanza. */
.mini-musica { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.4vw, 26px); }
.tocadiscos { position: relative; width: clamp(92px, 11vw, 124px); aspect-ratio: 1; margin-right: clamp(10px, 1.6vw, 16px); }
.disco { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #241530 0 30%, #120A18 31% 100%); box-shadow: 0 14px 26px -12px rgb(0 0 0 / .7), inset 0 0 0 2px rgb(255 255 255 / .05); will-change: transform; }
.disco-surcos { position: absolute; inset: 4%; border-radius: 50%; background: repeating-radial-gradient(circle, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px); -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35%); mask: radial-gradient(circle, transparent 0 34%, #000 35%); }
.disco-etiqueta { position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--ciruela) 0 7%, transparent 7.5%), conic-gradient(from 200deg, var(--coral), #F28A6E, var(--coral)); }
.disco-brillo { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .16) 12%, transparent 18% 50%, rgb(255 255 255 / .1) 58%, transparent 64%); pointer-events: none; }
.brazo { position: absolute; top: -6%; right: -14%; width: 46%; height: 82%; transform-origin: 78% 12%; transform: rotate(-26deg); }
.brazo-base { position: absolute; right: 8%; top: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #D9CDE2 24% 60%, #B8A6C6 62%); box-shadow: 0 4px 8px rgb(0 0 0 / .3); }
.brazo-vara { position: absolute; right: 24%; top: 12%; width: 3px; height: 78%; border-radius: 2px; background: linear-gradient(90deg, #fff, #CBBBD6); transform-origin: top; transform: rotate(14deg); box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
.brazo-capsula { position: absolute; left: 22%; bottom: 0; width: 16%; height: 17%; border-radius: 3px; background: linear-gradient(#fff, #CBBBD6); transform: rotate(14deg); box-shadow: 0 2px 4px rgb(0 0 0 / .35); }
.reproductor { display: grid; gap: 8px; min-width: 0; }
.pista { display: grid; gap: 2px; min-width: 0; }
.pista strong { font: 400 1.05rem/1.15 var(--titulos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pista small { font-size: .78rem; color: rgb(255 255 255 / .66); }
.onda { display: block; width: 100%; height: 40px; }
.barra { position: relative; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .2); }
.barra-llena { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--blanco); }
.barra-punto { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--blanco); box-shadow: 0 0 0 4px rgb(255 255 255 / .18); }
.tiempos { display: flex; justify-content: space-between; font-size: .7rem; color: rgb(255 255 255 / .6); font-variant-numeric: tabular-nums; }
.tocar { width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--orquidea); cursor: pointer; box-shadow: 0 12px 22px -10px rgb(0 0 0 / .55); transition: transform 160ms var(--curva); }
.tocar:active { transform: scale(.94); }
.tocar:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
.tocar svg { width: 24px; height: 24px; fill: currentColor; }
.tocar .ico-play { display: none; }
.tocar[aria-pressed="false"] .ico-play { display: inline; }
.tocar[aria-pressed="false"] .ico-pausa { display: none; }
@keyframes ecualizador { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
/* Demostración: confirmación */
.mini-confirma { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; align-self: end; }
.opcion-mini { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .35); font-size: .88rem; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color 220ms var(--curva), color 220ms var(--curva), border-color 220ms var(--curva), transform 160ms var(--curva); }
.opcion-mini.si { animation: elegir 3.2s var(--curva) infinite; }
@keyframes elegir { 0%, 25% { background: transparent; color: var(--blanco); border-color: rgb(255 255 255 / .35); } 35%, 85% { background: var(--blanco); color: var(--ciruela); border-color: var(--blanco); } 100% { background: transparent; } }
/* Demostración: mapa */
/* Mapa: la ruta se traza, el auto la recorre y la cámara se acerca al destino */
.mini-mapa { position: relative; display: block; margin-inline: -24px -24px; margin-bottom: -24px; height: 150px; overflow: hidden; border-radius: 0 0 var(--radio) var(--radio); }
.mapa-svg { display: block; width: 100%; height: 100%; }
.mapa-manzanas rect { fill: rgb(255 255 255 / .07); }
.mapa-parque { fill: rgb(170 220 190 / .16); }
.mapa-arboles circle { fill: rgb(170 220 190 / .3); }
.mapa-avenida { fill: none; stroke: rgb(255 255 255 / .12); stroke-width: 7; }
.mapa-ruta-base { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 3; stroke-dasharray: .1 6; stroke-linecap: round; }
.mapa-ruta { fill: none; stroke: var(--blanco); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgb(255 255 255 / .45)); }
.mapa-inicio { fill: var(--blanco); stroke: rgb(255 255 255 / .35); stroke-width: 4; }
.mapa-halo { fill: var(--coral); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mapa-pin path { fill: var(--coral); stroke: #fff; stroke-width: .8; }
.mapa-pin circle { fill: #fff; }
.mapa-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.mapa-auto circle { fill: var(--coral); stroke: #fff; stroke-width: 1.6; }
.mapa-auto .centro { fill: #fff; stroke: none; }
.mapa-etiqueta { opacity: 0; }
.mapa-etiqueta rect { fill: #fff; }
.mapa-etiqueta text { font: 600 4.6px/1 "Hanken Grotesk", system-ui, sans-serif; fill: var(--ciruela); }
.mapa-etiqueta .sub { font-weight: 500; font-size: 3.6px; fill: var(--gris); }
@keyframes recorrer { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes rebotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }


/* ------------------------------------------------ planes */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { display: flex; }
.plan-cara { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 28px; border-radius: 22px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), 0 30px 50px -40px rgb(58 30 74 / .4); }
.plan-destacado .plan-cara { background: var(--ciruela); color: var(--blanco); box-shadow: 0 40px 70px -40px rgb(44 24 56 / .8); }
.plan-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--orquidea-suave); color: var(--orquidea); }
.plan-icono .icono { width: 30px; height: 30px; }
.plan-destacado .plan-icono { background: rgb(255 255 255 / .12); color: var(--blanco); }
.plan-precio { font-family: var(--titulos); font-size: 2.5rem; line-height: 1; color: var(--orquidea); }
.plan-destacado .plan-precio { color: #F1C6E3; }
.plan-resumen { color: var(--gris); }
.plan-destacado .plan-resumen, .plan-destacado .plan-entrega { color: rgb(255 255 255 / .72); }
.plan-ejemplo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: .88rem; }
.plan-ejemplo span { flex-basis: 100%; color: var(--gris); font-weight: 600; letter-spacing: .02em; }
.plan-ejemplo a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid currentColor; color: var(--orquidea); font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.plan-ejemplo a:hover { background: var(--orquidea); border-color: var(--orquidea); color: var(--blanco); }
.plan-destacado .plan-ejemplo span { color: inherit; opacity: .75; }
.plan-destacado .plan-ejemplo a { color: var(--blanco); }
.plan-destacado .plan-ejemplo a:hover { background: var(--blanco); color: var(--ciruela); border-color: var(--blanco); }
.plan ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .96rem; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .icono { width: 20px; height: 20px; margin-top: 2px; color: var(--orquidea); }
.plan-destacado li .icono { color: #F1C6E3; }
.plan-entrega { margin-top: auto; padding-top: 14px; font-size: .9rem; color: var(--gris); border-top: 1px solid var(--linea); }
.plan-destacado .plan-entrega { border-color: rgb(255 255 255 / .15); }
.plan-sello { position: absolute; top: -34px; right: -26px; width: 140px; color: var(--coral); rotate: 12deg; }
.plan-sello .matasellos-ondas, .plan-sello .matasellos > text { display: none; }
.plan-sello .matasellos-aro { animation: girar 18s linear infinite; }
.planes-extra { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 0; max-width: 50rem; color: var(--gris); }
.planes-extra .icono { width: 28px; height: 28px; color: var(--orquidea); }

/* ------------------------------------------------ preguntas en dos columnas */
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 1.06rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--titulos); font-size: 1.5rem; line-height: 1; color: var(--orquidea); transition: transform .25s var(--curva); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 22px; color: var(--gris); }
.preguntas details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--curva), content-visibility .4s allow-discrete; }
.preguntas details[open]::details-content { block-size: auto; }

/* ------------------------------------------------ cierre */
.acto-cierre { --sc-p: 0; margin-top: clamp(80px, 10vw, 120px); background: var(--ciruela); color: var(--blanco); }
.cierre-escena { --k: clamp(0, calc(var(--sc-p) * 1.5), 1); display: grid; place-items: center; text-align: center; overflow: hidden; }
.cierre-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.cierre-matasellos { position: absolute; width: min(1000px, 130vw); height: auto; left: 50%; top: 50%; translate: -46% -50%; filter: invert(1); opacity: .07; }
.estampilla-vuela { position: absolute; width: clamp(84px, 9vw, 124px); height: auto; filter: drop-shadow(0 16px 24px rgb(0 0 0 / .45)); }
.estampilla-vuela.v0 { left: 8%; top: 18%; transform: translate(calc((1 - var(--k)) * -40vw), calc((1 - var(--k)) * -20vh)) rotate(calc(-16deg + var(--k) * 6deg)); }
.estampilla-vuela.v1 { left: 16%; bottom: 14%; transform: translate(calc((1 - var(--k)) * -36vw), calc((1 - var(--k)) * 30vh)) rotate(calc(10deg - var(--k) * 2deg)); }
.estampilla-vuela.v2 { right: 10%; top: 14%; transform: translate(calc((1 - var(--k)) * 40vw), calc((1 - var(--k)) * -24vh)) rotate(calc(14deg - var(--k) * 4deg)); }
.estampilla-vuela.v3 { right: 18%; bottom: 12%; transform: translate(calc((1 - var(--k)) * 38vw), calc((1 - var(--k)) * 28vh)) rotate(calc(-8deg + var(--k) * 2deg)); }
.estampilla-vuela.v4 { left: 30%; top: 8%; transform: translate(calc((1 - var(--k)) * -10vw), calc((1 - var(--k)) * -40vh)) rotate(calc(6deg + var(--k) * 2deg)); }
.estampilla-vuela.v5 { right: 32%; bottom: 6%; transform: translate(calc((1 - var(--k)) * 10vw), calc((1 - var(--k)) * 40vh)) rotate(calc(-6deg - var(--k) * 2deg)); }
.cierre-texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 var(--margen); }
.cierre-lacre { width: 96px; height: auto; filter: drop-shadow(0 10px 16px rgb(0 0 0 / .45)); transform: scale(calc(.6 + var(--k) * .4)) rotate(calc((1 - var(--k)) * -90deg)); }
.cierre-texto h2 { font-size: clamp(2.4rem, 6vw, 5rem); max-width: 14ch; }

/* ------------------------------------------------ tarjetas del catálogo */
.rejilla-disenos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px 22px; }
.diseno { display: flex; flex-direction: column; gap: 12px; }
.diseno-enlace { display: flex; flex-direction: column; gap: 12px; color: var(--tinta); text-decoration: none; }
.diseno-enlace .portada { border-radius: var(--radio); box-shadow: 0 1px 0 var(--linea), 0 20px 40px -30px rgb(35 27 43 / .5); transition: transform .35s var(--curva); }
.diseno-pie { display: flex; flex-direction: column; }
.diseno-pie strong { font-family: var(--titulos); font-weight: 400; font-size: 1.35rem; }
.diseno-pie span { color: var(--gris); font-size: .92rem; }
.muestras { display: flex; gap: 8px; }
.muestras a { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--m1) 50%, var(--m2) 50%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }

/* Catálogo */
.catalogo h1 { margin-bottom: 12px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filtros a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .95rem; }
.filtros a span { font-size: .8rem; color: var(--gris); }
.filtros a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.filtros a[aria-current="page"] span { color: rgb(255 255 255 / .7); }
.vacio { max-width: 40rem; padding: 40px 0; }
.vacio h2 { margin-bottom: 12px; }
.vacio p { color: var(--gris); margin-bottom: 20px; }
.vacio .boton { margin: 0 8px 8px 0; }

/* Ficha */
.ficha { max-width: var(--ancho); margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--margen) 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.ficha-telefono { position: sticky; top: 96px; }
.migas { font-size: .92rem; color: var(--gris); margin-bottom: 10px; }
.migas a { color: var(--gris); }
.ficha-resumen { margin: 16px 0 28px; font-size: 1.12rem; color: var(--gris); max-width: 36rem; }
.paletas { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.paletas legend { padding: 0; margin-bottom: 12px; font-weight: 600; }
.paletas legend span { font-weight: 400; color: var(--gris); }
.paleta { position: relative; cursor: pointer; }
.paleta input { position: absolute; opacity: 0; pointer-events: none; }
.paleta > span { display: block; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(var(--m1) 0 40%, var(--m2) 0 70%, var(--m3) 0); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); transition: box-shadow .2s; }
.paleta input:checked + span { box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--orquidea); }
.paleta input:focus-visible + span { outline: 3px solid var(--orquidea); outline-offset: 5px; }
.ficha-nota { color: var(--gris); font-size: .95rem; max-width: 34rem; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 44px; }
.ficha h2 { font-size: 1.5rem; margin-bottom: 14px; }
.rasgos { margin: 0 0 20px; padding: 0 0 0 1.1em; display: flex; flex-direction: column; gap: 8px; }
.rasgos li::marker { color: var(--orquidea); }

/* Pie */
/* Aire antes del pie: catálogo, fichas, guías, contacto y páginas legales terminan sin pegarse al footer (el inicio cierra con su propio acto). */
#contenido:not(:has(> .acto-cierre)) { padding-bottom: clamp(72px, 10vw, 128px); }
.pie { background: var(--tinta); color: rgb(255 255 255 / .82); }
.pie-dentro { max-width: var(--ancho); margin: 0 auto; padding: 56px var(--margen) 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.pie strong { display: block; margin-bottom: 10px; color: var(--blanco); font-family: var(--titulos); font-weight: 400; font-size: 1.2rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.pie a { color: rgb(255 255 255 / .82); }
.pie-wa { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--blanco) !important; }
.pie-final { max-width: var(--ancho); margin: 0 auto; padding: 18px var(--margen) 28px; border-top: 1px solid rgb(255 255 255 / .12); font-size: .88rem; }

@media (hover: hover) and (pointer: fine) {
	.boton:hover { background: var(--orquidea-oscura); border-color: var(--orquidea-oscura); }
	.boton-claro:hover { background: var(--orquidea-suave); color: var(--orquidea-oscura); }
	.boton-luz:hover { background: var(--orquidea-suave); border-color: var(--orquidea-suave); color: var(--ciruela); }
	.menu a:hover { color: var(--orquidea); }
	.pie a:hover { color: var(--blanco); }
	.diseno-enlace:hover .portada { transform: translateY(-4px); }
	.panel-celebra a:hover strong { translate: 6px 0; }
	.pieza:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--linea), 0 24px 40px -28px rgb(58 30 74 / .5); }
	.pieza:hover .pieza-icono .icono { transform: rotate(-10deg) scale(1.15); }
	.pieza-demo:hover { box-shadow: 0 24px 40px -28px rgb(44 24 56 / .7); }
}

@media (max-width: 899px) {
	.menu { display: none; }
	.marca .logo-vivo { height: 38px; }
	.cabeza .boton-chico { margin-left: auto; }
	.hero, .ficha, .acto-panel, .trae-cabeza { grid-template-columns: minmax(0, 1fr); }
	.hero h1 { max-width: 14ch; }
	.escena { height: 540px; min-height: 0; margin: 0 calc(var(--margen) * -1); overflow: hidden; }
	.frente-izq { left: 2%; bottom: 8%; scale: .72; transform-origin: left bottom; }
	.frente-der { right: 2%; bottom: 20%; scale: .8; transform-origin: right bottom; }
	.telefono-pantalla { width: 220px; height: 470px; border-radius: 27px; --escala-tel: .5641; }
	.telefono-pantalla > :not(.telefono-marco) { clip-path: inset(0 round 27px); }
	.ficha-telefono { position: static; order: -1; }
	.sobre-escena { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; padding-top: 64px; gap: 8px; }
	.sobre-marco { order: -1; }
	.sobre { width: min(250px, 58vw); }
	.sobre-copia { min-height: 10rem; }
	.sobre-linea { font-size: 1.7rem; }
	.acordeon { flex-direction: column; height: min(68svh, 620px); }
	.pliego-lomo { writing-mode: horizontal-tb; rotate: 0deg; bottom: 50%; translate: -50% 50%; padding: 6px 14px; }
	.panel-celebra { flex-basis: 82vw; }
	.panel-celebra a { height: 56svh; }
	.panel-celebra strong { font-size: clamp(2.2rem, 10vw, 3rem); }
	.panel-icono { top: 28%; }
	.panel-icono .icono { width: 120px; }
	.ruta { display: none; }
	.pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
	.estampilla-paso { width: 80px; }
	.estampilla-paso .icono { width: 32px; height: 32px; }
	.pasos li > span:last-child { font-size: .9rem; }
	.mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.planes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.preguntas { grid-template-columns: minmax(0, 1fr); }
	.aviso-flotante { font-size: .85rem; max-width: 13rem; }
	.pie-dentro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
	body { font-size: 16px; }
	.mosaico { grid-template-columns: minmax(0, 1fr); }
	.pieza-demo { grid-column: auto; }
	.hero-acciones .boton { flex: 1 1 auto; }
	.rejilla-disenos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
	.diseno-pie strong { font-size: 1.1rem; }
	.estampilla-vuela .estampilla-dentro { width: 64px; height: 78px; }
	.estampilla-vuela .icono { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.panel-fondo { transform: none; animation: none; }
	html { scroll-behavior: auto; }
	.frente-izq, .frente-der { animation: none; }
	.matasellos-aro, .opcion-mini.si, .carta .hoja-arriba, .carta .hoja-abajo { animation: none !important; }
	.titulo .l { opacity: 1 !important; transform: none !important; }
	.titulo .onda path { stroke-dashoffset: 0; }
	.titulo .pincel { transform: scaleX(1); }
	.titulo .sello-cae { opacity: 1; }
	.sobre { --e: 1; --s: 1; --f: 1; --c: 1; --z: 1; }
	.punto-aro { animation: none; }
	.cierre-escena { --k: 1; }
	.pasos-escena { --r: 1; }
	* { transition: none !important; }
}

.pe-riviera { background: linear-gradient(180deg, #FBF2E2 0%, #F7E3CB 38%, #EDB596 66%); background-size: cover; background-position: 50% 70%; overflow: hidden; }
.pe-rv-sol-img { position: absolute; left: 80%; top: 64%; width: 44%; max-width: none; translate: -50% -50%; pointer-events: none; }
.pe-rv-costa { position: absolute; left: -12%; top: 64%; width: 72%; max-width: none; translate: 0 -100%; pointer-events: none; }
.pe-rv-mar { position: absolute; left: 0; right: 0; top: 64%; bottom: 0; background: linear-gradient(180deg, #9DBCCB, #6F96AD); background-size: cover; background-position: 50% 0; }
.pe-rv-baranda { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqi; background-repeat: repeat-x; background-size: auto 100%; background-position: 50% 100%; }
.pe-rv-rama { position: absolute; right: -16%; top: -5%; width: 62%; max-width: none; pointer-events: none; transform: scaleX(-1) rotate(8deg); }
.pe-riviera .pe-caja { justify-content: flex-start; padding-top: 16cqi; z-index: 2; }
.pe-riviera small { font: 400 6.4cqi/1 "Pinyon Script", cursive; letter-spacing: 0; text-transform: none; color: #B8573F; }
.pe-riviera strong { font-weight: 400; font-size: 14cqi; color: #244A65; text-shadow: 0 1px 10px rgb(255 244 226 / .6); }
.pe-riviera strong em { font: 400 .6em/1 "Pinyon Script", cursive; color: #B8573F; }
.pe-riviera .pe-fecha { color: #244A65; }

/* ------------------------------------------------ celebraciones + diseños (vitrina del inicio) */
.celebra-fichas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: -6px; }
.celebra-ficha { position: relative; aspect-ratio: 1; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 12px; border: 0; border-radius: 18px; text-align: left; cursor: pointer; color: var(--blanco); background: var(--tono, var(--orquidea-suave)); box-shadow: 0 18px 30px -24px rgb(58 30 74 / .6); transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
.celebra-ficha:nth-child(7n+2) { --tono: #F7E3DE; } .celebra-ficha:nth-child(7n+3) { --tono: #E6E5F3; } .celebra-ficha:nth-child(7n+4) { --tono: #FBEBD8; }
.celebra-ficha:nth-child(7n+5) { --tono: #E1ECF0; } .celebra-ficha:nth-child(7n+6) { --tono: #EEE6F3; } .celebra-ficha:nth-child(7n+7) { --tono: #E7E3DE; }
.celebra-ficha::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(35 27 43 / .66), transparent 62%); }
.ficha-fondo { position: absolute; inset: -6%; z-index: -2; background: center / cover no-repeat; animation: respirar 10s ease-in-out infinite alternate; transition: filter .5s var(--curva); }
.ficha-icono { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; color: var(--orquidea); }
.ficha-icono .icono { width: 46%; height: auto; animation: respirar 6s ease-in-out infinite alternate; }
.ficha-nombre { font-family: var(--titulos); font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.05; }
.celebra-ficha small { font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgb(255 255 255 / .88); color: var(--orquidea); }
.celebra-ficha:hover { transform: translateY(-4px); }
.celebra-ficha:hover .ficha-fondo { filter: saturate(1.15) brightness(1.06); }
.celebra-ficha:active { transform: scale(.97); }
.celebra-ficha.activa { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--fondo-pagina, #F5EAF8), 0 0 0 6px var(--orquidea), 0 24px 34px -22px rgb(58 30 74 / .7); }
.celebra-ficha:not(.activa) .ficha-fondo { filter: saturate(.75); }
.celebra-ficha:focus-visible { outline: 3px solid var(--orquidea); outline-offset: 3px; }
.celebra-frase { margin: -10px 0 0; color: var(--gris); font-size: 1.05rem; }
.pliego[hidden] { display: none; }
.acordeon.uno .pliego { flex-grow: 1; }
.pliego-pronto { background: var(--orquidea-suave, #EFE4F5); }
.pronto-caja { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; color: var(--orquidea); }
.pronto-caja .icono { width: 72px; height: 72px; }
.pronto-caja strong { font-family: var(--titulos); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); color: var(--tinta); }
.pronto-caja span { color: var(--gris); max-width: 26rem; }
@media (max-width: 760px) {
	.celebra-fichas { display: flex; overflow-x: auto; margin-inline: calc(-1 * var(--margen)); padding: 10px var(--margen) 12px; scrollbar-width: none; }
	.celebra-fichas::-webkit-scrollbar { display: none; }
	.celebra-ficha { flex: 0 0 104px; }
	.celebra-frase { display: none; }
}
/* Dibujo de línea vivo sobre cada cuadro de celebración */
.ficha-linea { position: absolute; z-index: 0; top: 8%; left: 50%; width: 64%; height: auto; translate: -50% 0; fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .92; filter: drop-shadow(0 4px 10px rgb(30 15 40 / .35)); animation: ficha-flota 5s ease-in-out infinite alternate; pointer-events: none; }
.ficha-linea path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ficha-traza 7s var(--curva, ease) infinite; }
.ficha-linea .linea-pluma { display: none; }
.celebra-ficha:nth-child(2n) .ficha-linea { animation-delay: -1.7s; }
.celebra-ficha:nth-child(3n) .ficha-linea path { animation-delay: -2.3s; }
.celebra-ficha:hover .ficha-linea, .celebra-ficha.activa .ficha-linea { opacity: 1; scale: 1.06; }
.celebra-ficha small, .ficha-nombre { position: relative; z-index: 1; }
@keyframes ficha-flota { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-7%) rotate(3deg); } }
@keyframes ficha-traza { 0% { stroke-dashoffset: 1; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@media (max-width: 760px) { .ficha-linea { width: 58%; stroke-width: 8; } }
@media (prefers-reduced-motion: reduce) { .ficha-linea, .ficha-linea path { animation: none; stroke-dashoffset: 0; } }
/* Ajuste: trazo fino y siempre visible (solo flota), nombres que nunca se cortan */
.ficha-linea { stroke-width: 1.6; opacity: .95; }
.ficha-linea path { vector-effect: non-scaling-stroke; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.ficha-nombre { font-size: clamp(.85rem, 1.15vw, 1.12rem); max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 760px) { .ficha-linea { stroke-width: 1.4; } .ficha-nombre { font-size: .82rem; } }
.celebra-ficha .ficha-linea path { stroke-width: 1.15px !important; vector-effect: non-scaling-stroke; }
/* Efecto de dibujado: se traza una vez y queda; se re-dibuja al pasar o tocar */
.celebra-ficha .ficha-linea path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: none; }
.celebra-fichas.dibujar .ficha-linea path { animation: ficha-dibuja 1.9s cubic-bezier(.6,.05,.3,1) forwards; }
.celebra-fichas.dibujar .celebra-ficha:nth-child(2) .ficha-linea path { animation-delay: .12s; }
.celebra-fichas.dibujar .celebra-ficha:nth-child(3) .ficha-linea path { animation-delay: .24s; }
.celebra-fichas.dibujar .celebra-ficha:nth-child(4) .ficha-linea path { animation-delay: .36s; }
.celebra-fichas.dibujar .celebra-ficha:nth-child(5) .ficha-linea path { animation-delay: .48s; }
.celebra-fichas.dibujar .celebra-ficha:nth-child(6) .ficha-linea path { animation-delay: .6s; }
.celebra-fichas.dibujar .celebra-ficha:nth-child(7) .ficha-linea path { animation-delay: .72s; }
.celebra-fichas.dibujar .celebra-ficha.redibuja .ficha-linea path { animation: ficha-dibuja2 1.4s cubic-bezier(.6,.05,.3,1) forwards; animation-delay: 0s; }
@keyframes ficha-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ficha-dibuja2 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .celebra-ficha .ficha-linea path, .celebra-fichas.dibujar .ficha-linea path { animation: none !important; stroke-dashoffset: 0; } }
/* Vista previa: Bosque de Luciérnagas */
.pe-bosque { background: #172C25; overflow: hidden; }
.pe-bosque .pe-bosque-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-bosque .pe-bosque-flor { position: absolute; left: 50%; top: 30%; width: 22%; translate: -50% 0; z-index: 2; filter: drop-shadow(0 0 12px rgb(212 181 107 / .4)); }
.pe-bosque .portada-texto { z-index: 2; color: #F2EBDD; text-shadow: 0 2px 16px rgb(15 31 26 / .8); }
.pe-bosque .portada-texto small { color: #D4B56B; }
.pe-bosque .pe-bosque-luz { position: absolute; z-index: 3; left: 30%; top: 26%; width: 6px; height: 6px; border-radius: 50%; background: #FFF3C4; box-shadow: 0 0 14px 5px rgb(212 181 107 / .7); animation: respirar 4s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .pe-bosque .pe-bosque-luz { animation: none; } }


/* ================================================ Fondo de la portada: papel limpio con puntos finos y una cinta de satín
   que recorre la página entera (sitio.js la traza según el alto real y la desenrolla con el scroll). */
body:has(.cinta-fondo) { background-color: var(--sc-canvas); background-image: radial-gradient(rgb(122 46 142 / .14) 1.1px, transparent 1.5px); background-size: 24px 24px; }
.cinta-fondo { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: -1; overflow: hidden; pointer-events: none; }
.cinta { display: block; }
/* Vivas en los costados y suaves detrás del contenido, para no estorbar la lectura cuando cruzan. */
.cinta-fondo { -webkit-mask-image: linear-gradient(90deg, #000 0 11%, rgb(0 0 0 / .28) 24% 76%, #000 89% 100%); mask-image: linear-gradient(90deg, #000 0 11%, rgb(0 0 0 / .28) 24% 76%, #000 89% 100%); }
@media (max-width: 700px) { .cinta-fondo { -webkit-mask-image: linear-gradient(90deg, #000 0 8%, rgb(0 0 0 / .22) 18% 82%, #000 92% 100%); mask-image: linear-gradient(90deg, #000 0 8%, rgb(0 0 0 / .22) 18% 82%, #000 92% 100%); } }
body:has(.cinta-fondo) .cabeza { background: rgb(251 248 252 / .78); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }

/* ================================================ Planes como joya: banda oscura de degradados en movimiento */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.planes-joya { position: relative; isolation: isolate; color: #F7EEF9; padding-bottom: clamp(72px, 9vw, 112px); margin-top: clamp(56px, 8vw, 96px); }
.joya-fondo { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; overflow: hidden; background: linear-gradient(160deg, #2A1636 0%, #2C1838 45%, #1E1027 100%); border-radius: clamp(28px, 4vw, 56px); }
.joya-fondo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.joya-fondo::after { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.planes-joya .titulo, .planes-joya .seccion-bajada, .planes-joya .planes-extra { color: #F7EEF9; }
.planes-joya .seccion-bajada, .planes-joya .planes-extra { color: rgb(247 238 249 / .74); }
.planes-joya .titulo.pintado .clave { background: linear-gradient(100deg, #F6C6E6 0%, #FFB59E 45%, #CDB8FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.planes-joya .titulo .pincel path { fill: #C2479B; opacity: .45; }
.planes-joya .planes-extra .icono { color: #F6C6E6; }
/* Tarjetas de vidrio con borde de luz */
.planes-joya .plan { position: relative; }
.planes-joya .plan-cara { background: linear-gradient(160deg, rgb(255 255 255 / .96), rgb(250 243 252 / .9)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 40px 70px -40px rgb(0 0 0 / .7); color: var(--tinta); }
.planes-joya .plan-precio { background: linear-gradient(100deg, var(--orquidea), #C2479B 60%, var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.planes-joya .plan-destacado .plan-cara { background: radial-gradient(120% 80% at 100% 0%, rgb(224 101 79 / .35), transparent 60%), radial-gradient(100% 90% at 0% 100%, rgb(110 86 220 / .4), transparent 60%), linear-gradient(165deg, #7A2E8E 0%, #4A1F5E 55%, #2C1838 100%); color: var(--blanco); box-shadow: 0 0 0 1px rgb(255 255 255 / .18), 0 50px 90px -40px rgb(194 71 155 / .65); }
.planes-joya .plan-destacado .plan-precio { background: linear-gradient(100deg, #FFE1F1, #FFC2AE 55%, #DCCBFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-halo { position: absolute; inset: -3px; z-index: 0; border-radius: 25px; pointer-events: none; }
.plan-halo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: conic-gradient(from var(--ang), transparent 0 40%, #FFB59E 58%, #FFE1F1 66%, #CDB8FF 76%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: halo-gira 5s linear infinite; }
.plan-halo::after { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 40px; background: conic-gradient(from var(--ang), transparent 0 40%, rgb(255 181 158 / .55) 60%, rgb(205 184 255 / .5) 76%, transparent 90%); filter: blur(22px); animation: halo-gira 5s linear infinite; }
.planes-joya .plan-destacado .plan-cara { position: relative; z-index: 1; }
@keyframes halo-gira { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
	.plan-halo::before, .plan-halo::after { animation: none; }
}
@media (max-width: 720px) {
	.joya-fondo { border-radius: 28px; }
}

/* Planes en una sola pantalla (computadora): al tocar «Planes» en el menú se ve completo, debajo de la barra. */
.planes-joya { scroll-margin-top: 72px; }
@media (min-width: 900px) {
	.planes-joya { max-width: 1240px; min-height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(24px, 4svh, 44px); padding-bottom: clamp(22px, 3.6svh, 40px); }
	.planes-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(14px, 2.6svh, 26px); }
	.planes-cabeza .titulo { margin: 0; }
	.planes-cabeza .seccion-bajada { margin: 0 0 .4em; max-width: 30rem; text-align: right; }
	.planes-joya .planes { gap: 16px; }
	.planes-joya .plan-cara { gap: 6px; padding: clamp(18px, 2.6svh, 24px) 24px; }
	.planes-joya .plan-icono { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 12px; }
	.planes-joya .plan-icono .icono { width: 22px; height: 22px; }
	.planes-joya .plan-destacado .plan-icono { right: auto; left: auto; top: 18px; right: 18px; }
	.planes-joya .plan-sello { width: 112px; top: -30px; right: 46px; }
	.planes-joya .plan h3 { font-size: 1.35rem; }
	.planes-joya .plan-precio { font-size: clamp(1.8rem, 4.4svh, 2.3rem); }
	.planes-joya .plan-resumen { font-size: .9rem; line-height: 1.4; }
	.planes-joya .plan ul { gap: 4px; margin-top: 4px; font-size: .87rem; line-height: 1.38; }
	.planes-joya .plan li .icono { width: 17px; height: 17px; margin-top: 1px; }
	.planes-joya .plan-entrega { padding-top: 10px; font-size: .82rem; line-height: 1.4; }
	.planes-joya .plan-ejemplo { margin-top: 4px; gap: 6px 8px; font-size: .82rem; }
	.planes-joya .plan-ejemplo span { flex-basis: auto; margin-right: 2px; }
	.planes-joya .plan-ejemplo a { min-height: 32px; padding: 0 12px; }
	.planes-joya .planes-extra { margin-top: clamp(12px, 2.4svh, 22px); font-size: .88rem; }
	.planes-joya .planes-extra .icono { width: 22px; height: 22px; }
}
/* Pantallas bajas (laptops): todavía más compacto para que quepa entero. */
@media (min-width: 900px) and (max-height: 820px) {
	.planes-joya .titulo { font-size: 2.1rem; }
	.planes-joya .plan-resumen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.planes-joya .plan ul { font-size: .84rem; line-height: 1.32; gap: 3px; }
	.planes-joya .plan-entrega { padding-top: 8px; }
}

/* ================================================ Vitrina de diseños (inicio): tira horizontal con las invitaciones a tamaño real */
.disenos-escena { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(24px, 4vw, 48px); gap: 22px; justify-content: flex-start; }
.vitrina { position: relative; margin: 4px calc(var(--margen) * -1) 0; }
.vit-tira { list-style: none; margin: 0; padding: 14px var(--margen) 26px; display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--margen), #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--margen), #000 calc(100% - 56px), transparent 100%); }
.vit-tira::-webkit-scrollbar { display: none; }
.vit-tira.al-final { -webkit-mask-image: none; mask-image: none; }
.vit-carta { flex: 0 0 clamp(210px, 21vw, 262px); scroll-snap-align: start; }
.vit-carta[hidden] { display: none; }
.vit-carta > a { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 22px; background: #fff; color: #231B2B; text-decoration: none; box-shadow: 0 0 0 1px rgb(122 46 142 / .1), 0 22px 40px -30px rgb(58 30 74 / .55); transition: transform .45s var(--curva), box-shadow .45s var(--curva); }
.vit-carta > a:hover, .vit-carta > a:focus-visible { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 0 0 1px rgb(122 46 142 / .18), 0 34px 56px -30px rgb(58 30 74 / .6); }
.vit-portada { display: block; margin: 8px 8px 0; border-radius: 16px; overflow: hidden; }
.vit-portada .portada { width: 100%; transition: transform .7s var(--curva); }
.vit-carta > a:hover .vit-portada .portada { transform: scale(1.04); }
.vit-pie { display: grid; gap: 2px; padding: 12px 16px 16px; color: #231B2B; }
.vit-pie strong { font-family: var(--titulos); font-weight: 400; font-size: 1.12rem; line-height: 1.2; }
.vit-dato { color: #65586F; font-size: .84rem; }
.vit-colores { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.vit-colores i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .7), 0 0 0 1px rgb(35 27 43 / .12); }
.vit-colores small { margin-left: 4px; color: #65586F; font-size: .78rem; font-weight: 600; }
/* Etiquetas de color: solo en algunos diseños */
.vit-etiqueta { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .02em; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .45); }
.vit-etiqueta .icono { width: 14px; height: 14px; }
.vit-solicitado { background: linear-gradient(110deg, #EE6A50 0%, #E2477D 55%, #A93BA8 100%); }
.vit-nuevo { background: linear-gradient(110deg, #1F9C93, #3F7FD0); }
.vit-solicitado::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 48%, transparent 66%); background-size: 260% 100%; animation: vit-brillo 3.6s ease-in-out infinite; }
@keyframes vit-brillo { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
/* Última carta: ver todos */
.vit-todos > a { justify-content: center; align-items: center; gap: 10px; text-align: center; min-height: 100%; padding: 24px; background: linear-gradient(160deg, var(--orquidea), #4A1F5E); color: #fff; }
.vit-todos > a > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(255 255 255 / .16); }
.vit-todos .icono { width: 26px; height: 26px; }
.vit-todos strong { font-family: var(--titulos); font-weight: 400; font-size: 1.3rem; }
.vit-todos small { opacity: .8; }
.vit-pronto > a { justify-content: center; padding: 28px; background: var(--orquidea-suave); }
.vit-pronto-caja { display: grid; gap: 8px; justify-items: center; text-align: center; color: var(--gris); }
.vit-pronto-caja .icono { width: 34px; height: 34px; color: var(--orquidea); }
.vit-pronto-caja strong { font-family: var(--titulos); font-weight: 400; font-size: 1.3rem; color: var(--tinta); }
/* Flechas */
.vit-flecha { position: absolute; z-index: 3; top: calc(50% - 40px); display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--blanco); color: var(--orquidea); box-shadow: 0 10px 26px -10px rgb(58 30 74 / .5), 0 0 0 1px var(--linea); cursor: pointer; transition: opacity .3s, transform .3s var(--curva); }
.vit-flecha .icono { width: 22px; height: 22px; }
.vit-flecha:hover { transform: scale(1.08); }
.vit-flecha[disabled] { opacity: 0; pointer-events: none; }
.vit-antes { left: max(4px, calc(var(--margen) - 25px)); }
.vit-despues { right: max(4px, calc(var(--margen) - 25px)); }
@media (max-width: 720px) {
	.vit-carta { flex-basis: 72vw; }
	.vit-flecha { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vit-solicitado::after { animation: none; } .vit-carta > a, .vit-portada .portada { transition: none; } }

/* La miniatura de cada invitación debe ocupar la pantalla también sin iframe. */
.ficha-telefono .telefono-pantalla > .vista-paleta { height: 100%; }

/* El panel del inicio es solo para ver: sin la pista de «toque el sello». */
.acto-panel .toque { display: none !important; }