/* Páginas de contenido · Tarjeta Convida
   Misma identidad «Correo con vida»: cada página es una pieza de correspondencia.
   Pilar = un sobre que se abre al bajar · Guía = una carta sellada · Índice = una mesa de postales
   Contacto = una postal que se escribe y se envía · Legal = un documento con su matasellos. */

/* ------------------------------------------------ piezas comunes */

.migas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; font-size: .88rem; color: var(--gris); }
.migas a { color: var(--gris); text-decoration: none; }
.migas a:hover { color: var(--orquidea); }

/* Etiqueta postal: cinta de papel con una mini estampilla, como la etiqueta de un paquete */
.etiqueta-postal { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), 0 6px 14px -8px rgb(58 30 74 / .35); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orquidea); }
.etiqueta-postal:not(:has(img)) { padding-left: 16px; }
.etiqueta-sello { width: 30px; height: auto; rotate: -6deg; }
.etiqueta-clara { background: rgb(255 255 255 / .16); color: var(--blanco); box-shadow: 0 0 0 1px rgb(255 255 255 / .3); }

.pl-intro { max-width: 36rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--gris); margin-top: 20px; }
.misiva-meta { margin-top: 16px; font-size: .9rem; color: var(--gris); }

/* Prosa: el texto largo, con capitular, ejemplos como tarjetas de invitación y consejos sellados */
.prosa { font-size: 1.08rem; line-height: 1.75; color: #3A2F43; }
.prosa > * + * { margin-top: 1.05em; }
.prosa h2 { margin-top: 2.2em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--tinta); scroll-margin-top: 110px; }
.prosa h2::after { content: ""; display: block; width: 74px; height: 10px; margin-top: 12px; background: var(--coral); opacity: .9;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 10'%3E%3Cpath d='M2 6 Q 11 0 20 6 T 38 6 T 56 6 T 72 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 10'%3E%3Cpath d='M2 6 Q 11 0 20 6 T 38 6 T 56 6 T 72 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.prosa h3 { margin-top: 1.6em; font-size: 1.3rem; color: var(--tinta); }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: .45em; }
.prosa ul li::marker { color: var(--coral); }
.prosa ol li::marker { color: var(--orquidea); font-family: var(--titulos); }
.prosa strong { color: var(--tinta); }
.prosa a { font-weight: 600; }
.prosa-guia > p:first-child::first-letter { float: left; margin: .1em .12em 0 0; font-family: var(--titulos); font-size: 4.1em; line-height: .82; color: var(--orquidea); }

/* Ejemplo de redacción = una tarjeta de invitación en miniatura, con su lacre */
.prosa blockquote { position: relative; margin: 2em 0; padding: 44px clamp(22px, 5vw, 56px) 34px; text-align: center; font-family: var(--titulos); font-size: clamp(1.08rem, 1.7vw, 1.24rem); line-height: 1.6; color: var(--tinta);
	background: url("img/correo/papel.webp") center / 420px, #FFFDF8; background-blend-mode: multiply; border-radius: 6px;
	box-shadow: 0 0 0 1px #EADFCC, inset 0 0 0 10px #FFFDF8, inset 0 0 0 11px #D9C4A0, 0 22px 40px -26px rgb(58 30 74 / .5); }
.prosa blockquote::before { content: ""; position: absolute; top: -22px; left: 50%; width: 46px; height: 46px; translate: -50% 0; background: url("img/correo/sello-coral.webp?v=2") center / contain no-repeat; filter: drop-shadow(0 4px 6px rgb(58 30 74 / .3)); }
.prosa blockquote p + p { margin-top: .7em; }

/* Consejo = nota adhesiva con sello */
.prosa aside.nota, .prosa .nota { position: relative; margin: 2em 0; padding: 22px 24px 22px 76px; border-radius: 4px 18px 18px 18px; background: var(--coral-suave); color: #5B2A21; font-size: 1rem; line-height: 1.6; }
.prosa .nota::before { content: ""; position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; background: url("img/correo/sello-coral.webp?v=2") center / contain no-repeat; rotate: -10deg; }
.prosa .nota strong { color: #8A3624; }
.prosa .nota p + p { margin-top: .6em; }

mark.pendiente { padding: 1px 6px; border-radius: 6px; background: #FFF1C2; color: #7A5300; font-size: .9em; }

/* Pregunta-lista: la columna derecha de .preguntas */
.preguntas-lista { min-width: 0; }

/* Remate: cierre oscuro con la escena de la marca */
.remate { position: relative; overflow: hidden; margin-top: clamp(80px, 10vw, 128px); background: var(--ciruela); color: var(--blanco); isolation: isolate; }
.remate-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: -1; }
.remate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 50%, rgb(44 24 56 / .82), rgb(44 24 56 / .2)); }
.remate-dentro { max-width: 760px; margin: 0 auto; padding: clamp(80px, 12vw, 140px) var(--margen); text-align: center; display: grid; justify-items: center; gap: 18px; }
.remate-lacre { width: 74px; height: auto; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .35)); }
.remate h2 { color: var(--blanco); }
.remate .titulo.pintado .clave { color: #F3B8AB; }
.remate p { color: rgb(255 255 255 / .8); max-width: 34rem; }
.remate-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.remate-wa { background: transparent; border-color: rgb(255 255 255 / .55); }

/* ------------------------------------------------ pilar: el sobre que se abre */

.pl-portada { --abre: clamp(0, calc((var(--sc-p, 0) - .06) / .3), 1); --sale: clamp(0, calc((var(--sc-p, 0) - .3) / .45), 1); --rompe: clamp(0, calc(var(--sc-p, 0) / .14), 1); }
.pl-escena { min-height: 100svh; max-width: var(--ancho); margin: 0 auto; padding: 96px var(--margen) 48px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 72px); }
.pl-copia h1 { max-width: 13ch; }
.pl-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.pl-sobre { position: relative; width: min(520px, 100%); aspect-ratio: 1.48; margin: 18% auto 0; perspective: 1400px; filter: drop-shadow(0 30px 36px rgb(58 30 74 / .28)); rotate: calc(-3deg + var(--sale) * 3deg); }
.pl-sobre-dorso { position: absolute; inset: 0; border-radius: 10px; background: url("img/correo/forro.webp") center / cover; }
.pl-sobre-dorso::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgb(44 24 56 / .35), rgb(44 24 56 / 0) 60%); }
.pl-tarjeta { position: absolute; left: 6%; right: 6%; top: 7%; height: 88%; border-radius: 8px; overflow: hidden; display: grid; place-items: center; padding: 8% 10% 14%;
	background: var(--cat-fondo) center / cover, var(--orquidea); color: var(--blanco); box-shadow: 0 0 0 6px rgb(255 255 255 / .92), 0 14px 30px -12px rgb(0 0 0 / .45);
	translate: 0 calc(var(--sale) * -64%); scale: calc(1 + var(--sale) * .04); }
.pl-tarjeta-nombre { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-family: var(--titulos); font-size: clamp(1.1rem, 2.2vw, 1.6rem); opacity: calc(var(--sale) * 1.4 - .3); }
.pl-tarjeta-dibujo { width: 80%; height: 70%; color: var(--blanco); }
.pl-tarjeta-dibujo path { stroke-width: 3.4px; stroke-dashoffset: calc(1 - var(--sale)); }
.pl-sobre-frente { position: absolute; inset: 0; border-radius: 10px; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
	background: linear-gradient(160deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 40%), url("img/correo/papel.webp") center / 380px, #DCC8E7; background-blend-mode: normal, multiply, normal; }
.pl-sobre-frente::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(58 30 74 / .1), transparent 30% 70%, rgb(58 30 74 / .1)); clip-path: polygon(0 0, 50% 54%, 0 100%); }
.pl-solapa { position: absolute; left: 0; right: 0; top: 0; height: 60%; transform-origin: 50% 0; transform-style: preserve-3d; transform: rotateX(calc(var(--abre) * 178deg)); z-index: 3; }
.pl-solapa::before, .pl-solapa-forro { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; border-radius: 10px 10px 0 0; }
.pl-solapa::before { background: linear-gradient(rgb(255 255 255 / .25), rgb(58 30 74 / .12)), url("img/correo/papel.webp") center / 380px, #D6C0E2; background-blend-mode: normal, multiply, normal; }
.pl-solapa-forro { transform: rotateX(180deg); background: url("img/correo/forro.webp") center / cover; filter: brightness(.92); }
.pl-sobre.abierta .pl-solapa { z-index: 0; }
.pl-sobre.abierta .pl-sobre-dorso { z-index: 0; }
.pl-sobre > * { z-index: 1; }
.pl-sobre .pl-tarjeta { z-index: 1; }
.pl-sobre .pl-sobre-frente { z-index: 2; }
.pl-lacre { position: absolute; z-index: 4; top: 46%; width: 21%; scale: .84 1; height: auto; translate: -50% -50%; opacity: calc(1 - var(--rompe) * var(--rompe)); filter: drop-shadow(0 6px 8px rgb(58 30 74 / .35)); }
.pl-lacre-izq { left: 50%; transform: translate(calc(var(--rompe) * -46px), calc(var(--rompe) * 30px)) rotate(calc(var(--rompe) * -28deg)); }
.pl-lacre-der { left: 50%; transform: translate(calc(var(--rompe) * 46px), calc(var(--rompe) * 34px)) rotate(calc(var(--rompe) * 30deg)); }
.pl-estampilla { position: absolute; z-index: 4; right: 6%; bottom: 8%; width: 22%; height: auto; rotate: 5deg; filter: drop-shadow(0 6px 10px rgb(58 30 74 / .3)); }
.pl-matasellos { position: absolute; z-index: 5; right: 14%; bottom: 13%; width: 44%; height: auto; opacity: .62; rotate: -8deg; mix-blend-mode: multiply; pointer-events: none; }

/* Momentos: una ruta de correo que se dibuja, con cuatro paradas */
.pl-momentos { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 24px var(--margen) 0; }
.pl-ruta { position: absolute; left: var(--margen); right: var(--margen); top: 20px; width: calc(100% - var(--margen) * 2); height: 120px; overflow: visible; }
.pl-ruta path { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-dasharray: .012 .012; vector-effect: non-scaling-stroke; opacity: .7; }
.pl-momentos ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.pl-momentos li { display: grid; gap: 12px; justify-items: start; padding-top: 18px; font-family: var(--titulos); font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.3; color: var(--tinta); }
.pl-parada { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blanco); color: var(--orquidea); font-size: 1.5rem; box-shadow: 0 0 0 2px var(--orquidea), 0 0 0 7px var(--blanco), 0 0 0 8.5px var(--orquidea), 0 14px 22px -10px rgb(58 30 74 / .45); }
.pl-momentos li:nth-child(2) { padding-top: 58px; }
.pl-momentos li:nth-child(3) { padding-top: 6px; }
.pl-momentos li:nth-child(4) { padding-top: 44px; }

/* Cuerpo editorial: título fijo a la izquierda, texto a la derecha, separadores perforados */
.pl-cuerpo { max-width: var(--ancho); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--margen) 0; }
.pl-bloque { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 80px); padding: clamp(40px, 5vw, 64px) 0; }
.pl-bloque + .pl-bloque { border-top: 0; background: radial-gradient(circle, var(--linea) 2.4px, transparent 2.9px) top left / 14px 8px repeat-x; }
.pl-bloque-titulo { position: sticky; top: 104px; align-self: start; font-size: clamp(1.6rem, 2.7vw, 2.3rem); }
.pl-num { display: block; margin-bottom: 10px; font-family: var(--texto); font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: var(--coral); }
.pl-bloque-primero .prosa > p:first-child::first-letter { float: left; margin: .1em .12em 0 0; font-family: var(--titulos); font-size: 4.1em; line-height: .82; color: var(--orquidea); }

/* Taller: categoría sin diseños todavía */
.taller { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 5vw, 56px); border-radius: 28px; overflow: hidden; color: var(--blanco); background: var(--cat-fondo) center / cover, var(--orquidea); }
.taller-dibujo { aspect-ratio: 1.2; display: grid; place-items: center; border-radius: 20px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); }
.taller-dibujo .linea { width: 78%; height: 78%; color: var(--blanco); }
.taller h2 { color: var(--blanco); margin-bottom: 14px; }
.taller p { color: rgb(255 255 255 / .86); }
.taller p + p { margin-top: 18px; }

/* ------------------------------------------------ postales (guías) */

.postales { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.postal { position: relative; }
.postal:nth-child(3n + 1) { rotate: -.6deg; }
.postal:nth-child(3n + 2) { rotate: .5deg; }
.postal-enlace { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 24px 22px; border-radius: 6px; text-decoration: none; color: var(--tinta);
	background: url("img/correo/papel.webp") center / 380px, #FFFDF8; background-blend-mode: multiply;
	box-shadow: 0 0 0 1px #EBE1D3, 0 18px 30px -22px rgb(58 30 74 / .55); transition: translate .45s var(--curva), box-shadow .45s var(--curva), rotate .45s var(--curva); }
.postal-sellos { position: relative; align-self: flex-end; width: 92px; height: 86px; margin: -8px -6px 0 0; }
.postal-estampilla { position: absolute; right: 0; top: 0; width: 70px; height: auto; rotate: 5deg; filter: drop-shadow(0 4px 6px rgb(58 30 74 / .25)); transition: rotate .5s var(--rebote); }
.postal-matasellos { position: absolute; left: -26px; top: 26px; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 2px solid rgb(44 24 56 / .55); color: rgb(44 24 56 / .7); rotate: -14deg; transition: rotate .6s var(--curva), scale .6s var(--rebote); }
.postal-matasellos::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgb(44 24 56 / .4); }
.postal-matasellos span { font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-align: center; line-height: 1.2; max-width: 50px; }
.postal-ante { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orquidea); }
.postal-titulo { font-family: var(--titulos); font-weight: 400; font-size: 1.42rem; line-height: 1.2; text-wrap: balance; }
.postal-resumen { color: var(--gris); font-size: .96rem; line-height: 1.55; }
.postal-leer { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--orquidea); }
.postal-leer span { display: inline-block; transition: translate .35s var(--curva); }

.postal-grande { margin-bottom: 34px; rotate: none !important; }
.postal-grande .postal-enlace { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 40px; padding: clamp(28px, 4vw, 52px); }
.postal-grande .postal-sellos { grid-column: 2; grid-row: 1 / 5; align-self: center; width: 200px; height: 190px; margin: 0; }
.postal-grande .postal-estampilla { width: 150px; }
.postal-grande .postal-matasellos { width: 110px; height: 110px; left: -10px; top: 76px; }
.postal-grande .postal-matasellos span { font-size: .72rem; max-width: 70px; }
.postal-grande .postal-titulo { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.postal-grande .postal-resumen { font-size: 1.08rem; max-width: 40rem; }

/* ------------------------------------------------ guía: la carta */

.lectura-ruta { position: fixed; z-index: 29; left: 0; right: 0; top: var(--cabeza-h, 75px); height: 3px; pointer-events: none; }
.lectura-avance { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--lee, 0)); background: repeating-linear-gradient(90deg, var(--coral) 0 10px, transparent 10px 16px); }
.lectura-lacre { position: absolute; top: -9px; left: 0; width: 22px; height: auto; translate: calc(var(--lee, 0) * (100vw - 22px)) 0; opacity: calc(var(--lee, 0) * 30); filter: drop-shadow(0 2px 3px rgb(58 30 74 / .3)); }

.misiva-portada { padding: clamp(40px, 6vw, 80px) var(--margen) 0; }
.misiva { position: relative; max-width: 960px; margin: 0 auto; padding: clamp(28px, 5vw, 64px); border-radius: 6px;
	background: url("img/correo/papel.webp") center / 420px, #FFFDF8; background-blend-mode: multiply;
	box-shadow: 0 0 0 1px #EBE1D3, 0 40px 70px -40px rgb(58 30 74 / .55), 0 12px 0 -6px #F3EADF, 0 22px 0 -12px #EADFD0; }
.misiva-sellos { position: absolute; right: clamp(18px, 4vw, 44px); top: clamp(18px, 3vw, 34px); width: clamp(110px, 16vw, 168px); aspect-ratio: 1; }
.misiva-estampilla { position: absolute; right: 0; top: 0; width: 76%; height: auto; rotate: 6deg; filter: drop-shadow(0 8px 12px rgb(58 30 74 / .25)); }
.misiva-matasellos { position: absolute; left: -54%; top: 40%; width: 128%; rotate: -10deg; mix-blend-mode: multiply; opacity: .7; }
.misiva-matasellos img { width: 100%; height: auto; }
.misiva-fecha { position: absolute; left: 4.5%; top: 20%; width: 31%; aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(.5rem, .9vw, .64rem); font-weight: 800; letter-spacing: .06em; text-align: center; color: #3B2348; line-height: 1.15; padding: 0 6%; }
.misiva .migas { margin-bottom: 26px; }
.misiva .etiqueta-postal { margin-bottom: 14px; }
.misiva-titulo { max-width: 17ch; padding-right: clamp(80px, 14vw, 170px); font-size: clamp(2.2rem, 5vw, 3.8rem); }
.misiva-resumen { max-width: 40rem; margin-top: 22px; font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.6; color: #4C3F57; }

.guia-cuerpo { max-width: var(--ancho); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--margen) 0; display: grid; grid-template-columns: 230px minmax(0, 46rem); justify-content: center; gap: clamp(32px, 6vw, 88px); }
.indice { position: sticky; top: 112px; align-self: start; font-size: .92rem; }
.indice-titulo { margin-bottom: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.indice ol { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px dotted var(--linea); display: grid; gap: 10px; counter-reset: i; }
.indice li { position: relative; counter-increment: i; }
.indice li::before { content: ""; position: absolute; left: -22px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--papel); box-shadow: 0 0 0 2px var(--linea); transition: background-color .3s, box-shadow .3s; }
.indice a { color: var(--gris); text-decoration: none; line-height: 1.4; display: block; transition: color .2s; }
.indice a:hover, .indice a[aria-current="true"] { color: var(--orquidea); }
.indice li:has(a[aria-current="true"])::before { background: var(--coral); box-shadow: 0 0 0 2px var(--coral), 0 0 0 5px var(--coral-suave); }
.indice-otra { margin-top: 26px; }
.indice-otra a { font-weight: 600; color: var(--orquidea); }

.fuentes h2 { font-size: 1.4rem; margin-bottom: 14px; }
.fuentes ul { margin: 0; padding-left: 1.2em; color: var(--gris); font-size: .95rem; display: grid; gap: 6px; }
.fuentes a { color: var(--gris); }

/* ------------------------------------------------ índice de guías */

.guias-portada { position: relative; max-width: var(--ancho); margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--margen) 0; }
.guias-portada h1 { max-width: 12ch; }
.guias-matasellos { position: absolute; right: var(--margen); top: 50%; width: min(480px, 44vw); height: auto; opacity: .16; rotate: -8deg; pointer-events: none; translate: 0 -40%; }
.guias-mesa { padding-top: clamp(40px, 5vw, 64px); }

/* ------------------------------------------------ legal */

.legal-portada { position: relative; max-width: var(--ancho); margin: 0 auto; padding: clamp(64px, 8vw, 104px) var(--margen) 0; }
.legal-portada h1 { max-width: 14ch; }
.legal-matasellos { position: absolute; right: var(--margen); top: clamp(48px, 6vw, 80px); width: min(380px, 40vw); opacity: .5; rotate: -6deg; }
.legal-matasellos .matasellos-aro { animation: girar 60s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
.prosa-legal { font-size: 1.02rem; line-height: 1.7; }
.legal-seccion + .legal-seccion { margin-top: 2.6em; padding-top: 2.4em; background: radial-gradient(circle, var(--linea) 2.4px, transparent 2.9px) top left / 14px 8px repeat-x; }
.prosa-legal h2 { display: flex; align-items: center; gap: 14px; margin-top: 0; font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.prosa-legal h2::after { display: none; }
.legal-num { --diente: 6px; flex: none; display: grid; place-items: center; width: 46px; height: 52px; font-size: 1.15rem; color: var(--orquidea); background: var(--orquidea-suave);
	-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; }
.legal-fuentes ul { font-size: .92rem; }

/* ------------------------------------------------ contacto: la postal */

.contacto { max-width: var(--ancho); margin: 0 auto; padding: clamp(64px, 8vw, 104px) var(--margen) 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contacto h1 { max-width: 11ch; }
.canales { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.canal { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); color: var(--tinta); text-decoration: none; transition: box-shadow .3s var(--curva), translate .3s var(--curva); }
.canal .icono { width: 30px; height: 30px; color: var(--orquidea); }
.canal span { display: grid; line-height: 1.35; color: var(--gris); font-size: .95rem; }
.canal strong { color: var(--tinta); font-size: 1.05rem; }
.canal-wa { background: #EAF7EF; box-shadow: 0 0 0 1px #CDE9D7; }
.canal-wa .icono { color: #1F8A4C; }
.contacto-nota { margin-top: 22px; font-size: .92rem; color: var(--gris); }

.buzon { position: relative; perspective: 1600px; }
.tarjeta-postal { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: 8px; transform-origin: 50% 120%;
	background: url("img/correo/papel.webp") center / 420px, #FFFDF8; background-blend-mode: multiply;
	box-shadow: 0 0 0 1px #EBE1D3, 0 46px 70px -40px rgb(58 30 74 / .55), 0 10px 0 -5px #F1E7DB; rotate: 1deg; }
.tarjeta-postal::before { content: ""; position: absolute; left: 51.2%; top: 30px; bottom: 30px; width: 1.5px; background: #DCCBB4; }
.tp-mensaje, .tp-direccion { padding: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tp-motivos { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-motivos legend { padding: 0; margin-bottom: 12px; font-family: var(--titulos); font-size: 1.4rem; color: var(--tinta); }
.tp-motivos label { position: relative; }
.tp-motivos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tp-motivos span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #DCCBB4; font-size: .9rem; font-weight: 600; color: #6A5A49; transition: background-color .2s, border-color .2s, color .2s; }
.tp-motivos input:checked + span { background: var(--orquidea); border-color: var(--orquidea); color: var(--blanco); }
.tp-motivos input:focus-visible + span { outline: 3px solid var(--orquidea); outline-offset: 2px; }
.tp-campo { display: grid; gap: 2px; }
.tp-campo > span { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8C7A66; }
.tp-campo em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tp-campo input, .tp-campo textarea { width: 100%; border: 0; border-bottom: 1.5px solid #CDBBA2; border-radius: 0; background: transparent; padding: 8px 2px; font: inherit; font-size: 1.05rem; color: var(--tinta); }
.tp-campo input:focus, .tp-campo textarea:focus { outline: none; border-bottom-color: var(--orquidea); }
.tp-campo [aria-invalid="true"] { border-bottom-color: var(--coral); }
.tp-texto { flex: 1; }
.tp-texto textarea { flex: 1; min-height: 220px; resize: vertical; border: 0; line-height: 34px; padding: 0 2px;
	background: repeating-linear-gradient(transparent 0 33px, #D8C7AF 33px 34.5px); font-family: var(--titulos); font-size: 1.12rem; }
.tp-sellos { position: relative; height: 112px; margin-bottom: 4px; }
.tp-estampilla { position: absolute; right: 0; top: 0; width: 96px; height: auto; rotate: 4deg; filter: drop-shadow(0 6px 8px rgb(58 30 74 / .25)); }
.tp-matasellos { position: absolute; right: 26px; top: 26px; width: 210px; height: auto; mix-blend-mode: multiply; opacity: 0; rotate: -8deg; scale: 1.5; }
.tarjeta-postal.sellada .tp-matasellos { opacity: .75; scale: 1; transition: opacity .12s, scale .32s cubic-bezier(.2, 1.6, .5, 1); }
.tp-para { font-family: var(--titulos); font-size: 1.2rem; color: var(--tinta); }
.tp-para strong { font-weight: 400; color: var(--orquidea); }
.tp-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tp-acepta { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: #6A5A49; line-height: 1.45; }
.tp-acepta input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.tp-error { padding: 10px 14px; border-radius: 12px; background: var(--coral-suave); color: #8A3624; font-size: .9rem; }
.tp-enviar { align-self: flex-start; margin-top: 4px; }
.tp-enviar[aria-busy="true"] { opacity: .7; pointer-events: none; }
.tarjeta-postal.vuela { animation: postal-vuela 1.05s cubic-bezier(.55, 0, .25, 1) forwards; }
@keyframes postal-vuela {
	0% { transform: none; }
	22% { transform: translateY(14px) rotateX(10deg) scale(.98); }
	100% { transform: translate(28%, -130%) rotate(-14deg) rotateX(30deg) scale(.42); opacity: 0; }
}
.tp-gracias { display: grid; justify-items: center; text-align: center; gap: 14px; padding: clamp(40px, 6vw, 72px) 24px; border-radius: 22px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); }
.tp-gracias:focus { outline: none; }
.tp-gracias-lacre { width: 84px; height: auto; }
.tp-gracias h2 em { font-style: normal; color: var(--orquidea); }
.tp-gracias p { color: var(--gris); max-width: 28rem; }

/* ------------------------------------------------ interacción y tamaños */

@media (hover: hover) and (pointer: fine) {
	.postal-enlace:hover { translate: 0 -6px; rotate: 0deg; box-shadow: 0 0 0 1px #E2D3C0, 0 30px 44px -24px rgb(58 30 74 / .6); }
	.postal-enlace:hover .postal-estampilla { rotate: -3deg; }
	.postal-enlace:hover .postal-matasellos { rotate: 6deg; scale: 1.06; }
	.postal-enlace:hover .postal-leer span { translate: 4px 0; }
	.canal:hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--orquidea), 0 14px 24px -14px rgb(58 30 74 / .4); }
	.remate-wa:hover { background: rgb(255 255 255 / .1); }
}

@media (max-width: 1023px) {
	.guia-cuerpo { grid-template-columns: minmax(0, 1fr); max-width: 50rem; }
	.indice { position: static; padding: 20px 22px; border-radius: 18px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); }
	.contacto { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
	.pl-escena { grid-template-columns: minmax(0, 1fr); align-content: center; padding-top: 32px; gap: 8px; }
	.pl-sobre { order: -1; width: min(330px, 78vw); margin: 22% auto 0; }
	.pl-copia h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
	.pl-intro { margin-top: 14px; font-size: 1rem; }
	.pl-acciones { margin-top: 18px; }
	.pl-acciones .boton { flex: 1 1 auto; }
	.pl-portada .migas { display: none; }
	.pl-ruta { display: none; }
	.pl-momentos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
	.pl-momentos li, .pl-momentos li:nth-child(n) { padding-top: 0; }
	.pl-parada { width: 52px; height: 52px; font-size: 1.2rem; }
	.pl-bloque { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.pl-bloque-titulo { position: static; }
	.taller { grid-template-columns: minmax(0, 1fr); }
	.postal-grande .postal-enlace { grid-template-columns: minmax(0, 1fr); }
	.postal-grande .postal-sellos { grid-column: auto; grid-row: auto; align-self: flex-end; width: 130px; height: 120px; order: -1; }
	.postal-grande .postal-estampilla { width: 96px; }
	.postal-grande .postal-matasellos { width: 80px; height: 80px; top: 40px; }
	.misiva-sellos { width: 92px; }
	.misiva-titulo { padding-right: 0; margin-top: 70px; }
	.misiva .etiqueta-postal { margin-top: 0; }
	.guias-matasellos, .legal-matasellos { width: 60vw; opacity: .1; }
}
@media (max-width: 640px) {
	.tarjeta-postal { grid-template-columns: minmax(0, 1fr); rotate: 0deg; }
	.tarjeta-postal::before { left: 24px; right: 24px; top: auto; bottom: auto; width: auto; height: 1.5px; display: none; }
	.tp-direccion { order: -1; padding-bottom: 0; }
	.tp-mensaje { padding-top: 8px; }
	.tp-sellos { position: absolute; right: 18px; top: 16px; width: 120px; height: 96px; }
	.tp-estampilla { width: 74px; }
	.tp-matasellos { width: 150px; right: 18px; }
	.tp-para { padding-right: 96px; min-height: 64px; }
	.tp-texto textarea { min-height: 170px; }
	.misiva { padding: 24px 20px 30px; }
	.misiva-fecha { font-size: .42rem; }
	.prosa blockquote { padding: 40px 18px 28px; }
	.prosa aside.nota, .prosa .nota { padding: 70px 20px 20px; }
	.prosa .nota::before { top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.pl-portada { --abre: 1; --sale: 1; --rompe: 1; }
	.legal-matasellos .matasellos-aro { animation: none; }
	.tarjeta-postal.vuela { animation: none; opacity: 0; }
}

/* Tabla de la política de devoluciones */
.prosa .tabla-legal { width: 100%; margin: 1.4em 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; font-size: .98rem; }
.prosa .tabla-legal th { padding: 12px 16px; background: var(--orquidea-suave); color: var(--orquidea); text-align: left; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.prosa .tabla-legal td { padding: 14px 16px; border-top: 1px solid var(--linea); vertical-align: top; background: var(--blanco); }
.prosa .tabla-legal td:last-child { width: 42%; }
@media (max-width: 600px) { .prosa .tabla-legal td:last-child { width: auto; } .prosa .tabla-legal th, .prosa .tabla-legal td { padding: 10px 12px; } }