/* Página «Cómo llega tu regalo» (como_llegan.aspx). Estilos de la maqueta como-llega-regalo-original/como-llega.css adaptados a la web:
   se quitan las tres @font-face (la tienda ya carga DM Sans) y solo se estiliza el contenido interior; cabecera y pie son los de la tienda. */
.packaging-page,.packaging-lightbox{--brand:#d9263b;font:400 16px/1.5 var(--ro-font,"DM Sans",Arial,sans-serif)}
.packaging-page,.packaging-page *,.packaging-lightbox,.packaging-lightbox *{box-sizing:border-box}
.packaging-page a{color:inherit;text-decoration:none}
.packaging-page button,.packaging-lightbox button{font:inherit;color:inherit}
.packaging-page img,.packaging-lightbox img{max-width:100%}
.packaging-page .packaging-shell{width:min(1320px,calc(100% - 48px));margin-inline:auto;min-width:0}
body.packaging-modal-open{overflow:hidden}
@media(max-width:767px){.packaging-page .packaging-shell{width:100%}
}
.packaging-page{color:#342e30;background:#fff;padding:24px 0 46px}
.packaging-shell{max-width:1240px}
.packaging-breadcrumb{display:flex;gap:10px;align-items:center;color:#9b8c91;font-size:12px;margin-bottom:32px}
.packaging-breadcrumb a:hover{color:var(--brand)}
.packaging-hero{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center;margin-bottom:95px}
.packaging-hero-copy{padding:20px 0}
.packaging-eyebrow{font-size:12px;color:var(--brand);font-weight:600;letter-spacing:.06em;margin:0 0 20px}
.packaging-hero h1{font-size:clamp(44px,5.4vw,72px);line-height:1.02;letter-spacing:-.055em;font-weight:600;margin:0 0 26px}
.packaging-hero h1>span{color:var(--brand)}
.packaging-lead{font-size:17px;line-height:1.7;color:#8a747e;margin:0;max-width:400px}
.packaging-anchor{display:inline-flex;align-items:center;gap:20px;margin-top:31px;padding:0 0 9px;font-size:13px;font-weight:500;color:#614753;border-bottom:1px solid #d2bbc6}
.packaging-anchor:hover{color:var(--brand);border-color:var(--brand)}
.packaging-anchor span{font-size:20px}
.box-photo{position:relative;display:block;padding:0;overflow:hidden;background:#fff;border:0;width:100%;cursor:zoom-in;border-radius:18px}
.box-photo>img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.box-photo:hover>img{transform:scale(1.025)}
.box-zoom{position:absolute;right:16px;bottom:16px;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;color:#6d535f;background:#fffc;opacity:0;transition:opacity .2s}
.box-zoom svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.box-photo:hover .box-zoom,.box-photo:focus-visible .box-zoom{opacity:1}
.packaging-hero-photo{aspect-ratio:1;background:#f7f0e8;border-radius:20px}
.packaging-section-heading{display:grid;grid-template-columns:60px 1fr;gap:26px;max-width:790px;margin-bottom:35px}
.packaging-section-number{display:block;font-size:12px;font-weight:500;color:#b39a8b;letter-spacing:.06em;line-height:1.5;padding-top:9px}
.packaging-page h2{font-size:clamp(29px,3vw,41px);font-weight:500;line-height:1.12;letter-spacing:-.035em;margin:0 0 18px}
.packaging-section-heading p,.packaging-feature-copy p{font-size:15px;line-height:1.8;color:#8b777f;margin:0}
.packaging-formats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.packaging-format{margin:0;padding:0 0 16px;border-bottom:1px solid #ece3e7}
.packaging-format>.box-photo{aspect-ratio:1;border-radius:14px;background:#fff;border:1px solid #f1e9ed}
.packaging-format>.box-photo img{object-fit:contain;padding:15px}
.packaging-format figcaption{padding:16px 2px 0;color:#69515d;font-size:14px;font-weight:500}
.packaging-formats{margin-bottom:90px;scroll-margin-top:94px}
.packaging-feature{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center;margin-bottom:80px}
.packaging-detail-photo{aspect-ratio:1;background:#f7f1ea;border-radius:18px}
.packaging-feature-copy{padding:16px 20px 16px 0;max-width:455px}
.packaging-feature-copy>.packaging-section-number{margin-bottom:17px}
.packaging-feature--color .packaging-feature-copy{padding:16px 20px 16px 0}
.packaging-feature--color h2{font-size:clamp(34px,4vw,52px)}
.packaging-bottom-link{margin-top:36px;text-align:center;font-size:13px;font-weight:500;color:var(--brand)}
.packaging-bottom-link a{border-bottom:1px solid #ecd2dc;padding-bottom:6px}
.packaging-bottom-link span{margin-left:14px}
.packaging-lightbox{padding:0;border:0;border-radius:16px;background:#fff;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:hidden}
.packaging-lightbox::backdrop{background:#251d24d9}
.packaging-lightbox>img{display:block;object-fit:contain;width:min(800px,calc(100vw - 32px));height:min(800px,calc(100dvh - 32px))}
.packaging-lightbox>button{position:absolute;right:12px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:#fffffff0;color:#6d535f;font-size:28px;line-height:1;z-index:1}
@media(max-width:1060px){.packaging-hero{gap:32px;margin-bottom:65px}
.packaging-hero h1{font-size:52px}
.packaging-lead{font-size:15px}
.packaging-feature{gap:40px}
}
@media(max-width:767px){.packaging-page{padding:18px 0 35px}
.packaging-shell{padding-left:20px;padding-right:20px}
.packaging-breadcrumb{font-size:10px;margin-bottom:24px}
.packaging-hero{display:flex;flex-direction:column;gap:24px;align-items:stretch;margin-bottom:48px}
.packaging-hero-copy{padding:0}
.packaging-eyebrow{font-size:11px;margin-bottom:14px}
.packaging-hero h1{font-size:49px;line-height:1.02;margin-bottom:18px}
.packaging-hero h1 br{display:none}
.packaging-lead{font-size:15px;line-height:1.7;max-width:none}
.packaging-anchor{font-size:12px;margin-top:20px;gap:16px}
.packaging-hero-photo{border-radius:14px}
.box-zoom{opacity:1;right:12px;bottom:12px;width:32px;height:32px}
.packaging-section-heading{grid-template-columns:28px 1fr;gap:12px;margin-bottom:24px}
.packaging-page h2{font-size:29px;margin-bottom:14px}
.packaging-section-number{font-size:10px;padding-top:5px}
.packaging-section-heading p,.packaging-feature-copy p{font-size:14px;line-height:1.75}
.packaging-formats-grid{grid-template-columns:1fr;gap:22px}
.packaging-format>.box-photo{aspect-ratio:1.12}
.packaging-format>.box-photo img{padding:12px 25px}
.packaging-format figcaption{font-size:14px;padding-top:12px}
.packaging-format{padding-bottom:15px}
.packaging-formats{margin-bottom:48px;scroll-margin-top:110px}
.packaging-feature{display:flex;flex-direction:column;gap:24px;align-items:stretch;margin-bottom:44px}
.packaging-feature-copy{padding:0;max-width:none}
.packaging-feature-copy>.packaging-section-number{margin-bottom:10px}
.packaging-feature--protection .packaging-feature-copy{order:-1}
.packaging-feature--color .packaging-feature-copy{padding:0}
.packaging-feature--color h2{font-size:34px}
.packaging-detail-photo{border-radius:14px}
.packaging-bottom-link{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){.box-photo>img,.box-zoom{transition:none}
}
/* Ajustes de integración: títulos equilibrados y la hoja común no pisa el color del enlace «Horarios y coste de envío». */
.packaging-page h1,.packaging-page h2{text-wrap:balance;font-family:inherit}
.packaging-page .packaging-bottom-link a{color:var(--brand)}
/* Títulos de las secciones normalizados: el número (01–08) siempre a la izquierda y en la misma línea que el título, y el mismo
   tamaño de letra en todos. La maqueta ponía el número encima del título en 02 y 03 y daba más tamaño al de «Ponle color a la vida». */
.packaging-page .packaging-feature-copy{display:grid;grid-template-columns:60px 1fr;column-gap:26px;align-items:start}
.packaging-page .packaging-feature-copy>.packaging-section-number{grid-column:1;grid-row:1;margin-bottom:0}
.packaging-page .packaging-feature-copy>h2{grid-column:2;grid-row:1}
.packaging-page .packaging-feature-copy>p{grid-column:2;grid-row:2}
.packaging-page .packaging-feature-copy>p+p{grid-row:3}
.packaging-page .packaging-section-heading h2,
.packaging-page .packaging-feature-copy h2{font-size:clamp(29px,3vw,41px);font-weight:500;line-height:1.12;letter-spacing:-.035em}
@media(max-width:767px){
.packaging-page .packaging-feature-copy{grid-template-columns:28px 1fr;column-gap:12px}
.packaging-page .packaging-feature-copy>.packaging-section-number{padding-top:5px}
.packaging-page .packaging-section-heading h2,
.packaging-page .packaging-feature-copy h2{font-size:29px}
}
/* Secciones 04–08 y fondo suave de las cajas (maqueta RegaloOriginal_4_paginas, versión 134). */
.packaging-experience{padding-top:24px;margin-bottom:56px;scroll-margin-top:94px}
@media(max-width:767px){.packaging-experience{padding-top:18px;margin-bottom:36px;scroll-margin-top:100px}.packaging-experience .packaging-feature-copy{order:-1}}

.packaging-narrative{scroll-margin-top:94px}.packaging-narrative .packaging-feature-copy p+p{margin-top:18px}.packaging-narrative--right .packaging-feature-copy{padding:16px 20px 16px 0}
@media(max-width:767px){.packaging-narrative{scroll-margin-top:100px}.packaging-narrative .packaging-feature-copy,.packaging-narrative--right .packaging-feature-copy{padding:0;order:-1}}
/* A soft wave gives the box formats a warm backdrop. */
.packaging-page{overflow-x:clip}.packaging-formats{position:relative;isolation:isolate;padding-bottom:12px}.packaging-formats::before,.packaging-formats::after{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none}.packaging-formats::before{top:170px;height:180px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath d='M0 76C150 164 245 165 420 143C585 122 680 150 836 76C1030 -17 1150 8 1285 14C1356 17 1393 35 1440 53V180H0Z' fill='%23faf3ef'/%3E%3C/svg%3E") center/100% 100% no-repeat}.packaging-formats::after{top:349px;bottom:-28px;background:#faf3ef}
@media(max-width:767px){.packaging-formats::before{top:215px;height:120px}.packaging-formats::after{top:334px;bottom:-18px}.packaging-formats{padding-bottom:8px}}